@extends('layouts.app')

@section('content')
<main id="mainContent">
  <!-- Page Hero -->
  <section class="page-hero">
    <div class="container">
      <nav class="breadcrumbs" aria-label="Breadcrumb">
        <a href="{{ route('home') }}">Home</a>
        <i class="fas fa-chevron-right" style="font-size: 0.7rem;"></i>
        <span>Industries</span>
      </nav>
      <h1 class="page-hero-title">Vertical Specialization Across <span class="text-gradient">India's Core Sectors</span></h1>
      <p class="page-hero-desc text-muted">Specialized headhunting and talent advisory practices tailored to the technical requirements and regulatory environments of key industries.</p>
    </div>
  </section>

  <!-- Industries Grid Section -->
  <section class="section">
    <div class="container">
      <div class="services-grid" style="grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));">
        @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">{{ $industry->description }}</p>

            @if($industry->key_roles && count($industry->key_roles) > 0)
              <div style="margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border-light);">
                <span style="font-size: 0.8rem; font-weight: 700; text-transform: uppercase; color: var(--text-light); letter-spacing: 0.5px; display: block; margin-bottom: 0.5rem;">
                  Representative Mandates:
                </span>
                <div class="job-tags">
                  @foreach($industry->key_roles as $role)
                    <span class="job-tag">{{ $role }}</span>
                  @endforeach
                </div>
              </div>
            @endif

            <a href="{{ route('contact') }}?industry={{ $industry->slug }}" class="service-link" style="margin-top: 1.25rem;">
              Request Sector Mandate <i class="fas fa-arrow-right"></i>
            </a>
          </div>
        @endforeach
      </div>
    </div>
  </section>

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