@extends('layouts.app')

@section('content')
<main id="mainContent">
  <!-- Hero Section -->
  <section class="hero-section" aria-label="Hero Section">
    <div class="container">
      <div class="hero-grid">
        <!-- Hero Text -->
        <div class="hero-content">
          <div class="hero-badge reveal">
            <i class="fas fa-award"></i>
            <span>#1 Recruitment &amp; IT Staffing Partner in Central India</span>
          </div>

          <h1 class="hero-title reveal">
            Connecting Visionary Companies with <span class="text-gradient">Exceptional Talent</span>
          </h1>

          <p class="hero-lead reveal">
            From Fortune 500 enterprises to high-growth tech startups, Zhelhire Consultancy Pvt Ltd delivers strategic executive search, contract staffing, and tailored IT consulting from Nagpur to global markets.
          </p>

          <div class="hero-cta-group reveal">
            <a href="{{ route('contact') }}" class="btn btn-primary btn-lg">
              <i class="fas fa-briefcase"></i> Hire Top Talent
            </a>
            <a href="{{ route('jobs.index') }}" class="btn btn-outline btn-lg">
              <i class="fas fa-search"></i> Explore Open Roles
            </a>
          </div>

          <!-- Trust Bar / Key Metrics -->
          <div class="hero-trust-bar reveal">
            <div class="trust-item">
              <span class="trust-number">500+</span>
              <span class="trust-label">Successful Placements</span>
            </div>
            <div class="trust-item">
              <span class="trust-number">98%</span>
              <span class="trust-label">Retention Rate</span>
            </div>
            <div class="trust-item">
              <span class="trust-number">&lt; 48h</span>
              <span class="trust-label">Profile Turnaround</span>
            </div>
          </div>
        </div>

        <!-- Hero Media / Visual Mockup -->
        <div class="hero-media reveal">
          <div class="hero-image-wrapper">
            <img src="https://images.unsplash.com/photo-1521737604893-d14cc237f11d?auto=format&fit=crop&w=800&q=80" 
                 alt="HR Consultants interviewing executive talent at Zhelhire Nagpur" 
                 loading="eager" width="800" height="520">
            
            <!-- Floating Metric Badge 1 -->
            <div class="floating-badge floating-card-1">
              <div class="badge-icon" style="background: rgba(16, 185, 129, 0.15); color: var(--success);">
                <i class="fas fa-check-double"></i>
              </div>
              <div>
                <span class="badge-title">90-Day Guarantee</span>
                <span class="badge-subtitle">Risk-free placement assurance</span>
              </div>
            </div>

            <!-- Floating Metric Badge 2 -->
            <div class="floating-badge floating-card-2">
              <div class="badge-icon" style="background: rgba(0, 102, 255, 0.15); color: var(--accent);">
                <i class="fas fa-certificate"></i>
              </div>
              <div>
                <span class="badge-title">ISO 9001:2015</span>
                <span class="badge-subtitle">Standardized quality hiring</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- Client Logos Ticker -->
  <section class="section-bg" style="padding: 2.5rem 0; border-top: 1px solid var(--border-light); border-bottom: 1px solid var(--border-light);">
    <div class="container">
      <p style="text-align: center; font-size: 0.85rem; color: var(--text-light); text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 1.5rem; font-weight: 600;">
        Trusted by 50+ Enterprises, GCCs &amp; High-Growth Startups
      </p>
      <div style="display: flex; gap: 3rem; justify-content: center; align-items: center; flex-wrap: wrap; opacity: 0.75;">
        @foreach($clients as $client)
          <span style="font-family: var(--font-heading); font-weight: 700; font-size: 1.2rem; color: var(--text-muted); display: inline-flex; align-items: center; gap: 0.5rem;">
            <i class="fas fa-building" style="color: var(--accent); font-size: 1rem;"></i> {{ $client->name }}
          </span>
        @endforeach
      </div>
    </div>
  </section>

  <!-- Core Services Section -->
  <section class="section" aria-label="Services Section">
    <div class="container">
      <div class="section-header reveal">
        <span class="section-badge"><i class="fas fa-cogs"></i> Our Solutions</span>
        <h2 class="section-title">Comprehensive Workforce &amp; Staffing Services</h2>
        <p class="section-desc">We tailor precision talent acquisition programs designed to eliminate attrition and accelerate business roadmaps.</p>
      </div>

      <div class="services-grid">
        @foreach($services as $service)
          <x-service-card :service="$service" />
        @endforeach
      </div>

      <div style="text-align: center; margin-top: 3rem;" class="reveal">
        <a href="{{ route('services.index') }}" class="btn btn-outline btn-lg">
          View All Services <i class="fas fa-arrow-right"></i>
        </a>
      </div>
    </div>
  </section>

  <!-- Animated Numerical Stats Section -->
  <section class="section section-bg" aria-label="Stats & Impact">
    <div class="container">
      <div class="stats-grid">
        <div class="stat-card reveal">
          <div class="stat-icon"><i class="fas fa-user-tie"></i></div>
          <div class="stat-number">
            <span data-counter-target="500">0</span>+
          </div>
          <p class="stat-label">Executive Placements</p>
        </div>

        <div class="stat-card reveal">
          <div class="stat-icon"><i class="fas fa-handshake"></i></div>
          <div class="stat-number">
            <span data-counter-target="98">0</span>%
          </div>
          <p class="stat-label">Client Retention Rate</p>
        </div>

        <div class="stat-card reveal">
          <div class="stat-icon"><i class="fas fa-building"></i></div>
          <div class="stat-number">
            <span data-counter-target="50">0</span>+
          </div>
          <p class="stat-label">Enterprise Clients</p>
        </div>

        <div class="stat-card reveal">
          <div class="stat-icon"><i class="fas fa-clock"></i></div>
          <div class="stat-number">
            <span data-counter-target="48">0</span>h
          </div>
          <p class="stat-label">Average Shortlist Turnaround</p>
        </div>
      </div>
    </div>
  </section>

  <!-- Industries Preview -->
  <section class="section">
    <div class="container">
      <div class="section-header reveal">
        <span class="section-badge"><i class="fas fa-layer-group"></i> Sector Expertise</span>
        <h2 class="section-title">Industries We Empower</h2>
        <p class="section-desc">Deep vertical recruitment intelligence across India's fastest expanding economic sectors.</p>
      </div>

      <div class="services-grid">
        @foreach($industries as $industry)
          <div class="service-card reveal">
            <div class="service-icon-box" style="background: rgba(0, 102, 255, 0.08); color: var(--accent);">
              <i class="{{ $industry->icon ?? 'fas fa-industry' }}"></i>
            </div>
            <h3 class="service-title">{{ $industry->name }}</h3>
            <p class="service-desc">{{ Str::limit($industry->description, 130) }}</p>
            <a href="{{ route('industries.index') }}" class="service-link">
              Explore Roles <i class="fas fa-arrow-right"></i>
            </a>
          </div>
        @endforeach
      </div>
    </div>
  </section>

  <!-- Featured Jobs Board -->
  <section class="section section-bg">
    <div class="container">
      <div class="section-header reveal">
        <span class="section-badge"><i class="fas fa-briefcase"></i> Hot Openings</span>
        <h2 class="section-title">Featured Career Opportunities</h2>
        <p class="section-desc">Explore verified executive and technology roles with top Indian and global employers.</p>
      </div>

      <div class="job-cards-list">
        @foreach($featuredJobs as $job)
          <x-job-card :job="$job" />
        @endforeach
      </div>

      <div style="text-align: center; margin-top: 2.5rem;" class="reveal">
        <a href="{{ route('jobs.index') }}" class="btn btn-primary btn-lg">
          Browse All Open Positions <i class="fas fa-arrow-right"></i>
        </a>
      </div>
    </div>
  </section>

  <!-- Testimonials Carousel Section -->
  <section class="section" aria-label="Client Testimonials">
    <div class="container">
      <div class="section-header reveal">
        <span class="section-badge"><i class="fas fa-comment-dots"></i> Client Stories</span>
        <h2 class="section-title">What Corporate Leaders Say</h2>
        <p class="section-desc">Feedback from CHROs, VP Engineering, and Talent Acquisition heads across India.</p>
      </div>

      <div class="slider-container reveal">
        <div class="testimonial-track" id="testimonialTrack">
          @foreach($testimonials as $testimonial)
            <x-testimonial-card :testimonial="$testimonial" />
          @endforeach
        </div>

        <!-- Slider Controls -->
        <div class="slider-controls">
          <button class="slider-btn" id="prevTestimonial" aria-label="Previous Testimonial">
            <i class="fas fa-chevron-left"></i>
          </button>
          <div class="slider-dots" id="testimonialDots"></div>
          <button class="slider-btn" id="nextTestimonial" aria-label="Next Testimonial">
            <i class="fas fa-chevron-right"></i>
          </button>
        </div>
      </div>
    </div>
  </section>

  <!-- Insights & Blog Preview -->
  <section class="section section-bg">
    <div class="container">
      <div class="section-header reveal">
        <span class="section-badge"><i class="fas fa-newspaper"></i> Knowledge Hub</span>
        <h2 class="section-title">Latest HR Insights &amp; Market Trends</h2>
        <p class="section-desc">Expert perspectives on hiring strategies, salary benchmarks, and Indian employment regulations.</p>
      </div>

      <div class="blog-grid">
        @foreach($recentPosts as $post)
          <x-blog-card :post="$post" />
        @endforeach
      </div>

      <div style="text-align: center; margin-top: 2.5rem;" class="reveal">
        <a href="{{ route('blog.index') }}" class="btn btn-outline btn-lg">
          Explore All Insights <i class="fas fa-arrow-right"></i>
        </a>
      </div>
    </div>
  </section>

  <!-- Frequently Asked Questions -->
  <section class="section">
    <div class="container" style="max-width: 860px;">
      <div class="section-header reveal">
        <span class="section-badge"><i class="fas fa-question-circle"></i> FAQ</span>
        <h2 class="section-title">Frequently Asked Questions</h2>
        <p class="section-desc">Everything you need to know about partnering with Zhelhire Consultancy.</p>
      </div>

      <div class="faq-container reveal">
        @foreach($faqs as $faq)
          <div class="faq-item">
            <button class="faq-trigger" aria-expanded="false">
              <span>{{ $faq->question }}</span>
              <i class="fas fa-chevron-down faq-icon"></i>
            </button>
            <div class="faq-content">
              <div class="faq-content-inner">
                {{ $faq->answer }}
              </div>
            </div>
          </div>
        @endforeach
      </div>
    </div>
  </section>

  <!-- CTA Banner -->
  @include('partials.cta-banner')
</main>
@endsection