@extends('layouts.app')

@php
    use App\Helpers\SeoHelper;
    use App\Helpers\DynamicMegamenuNavData;

    $locale = app()->getLocale();
    $navData = $megaNavData ?? DynamicMegamenuNavData::prepare();
    $industrySections = $navData['industrySections'] ?? [];
    $localizedRoute = fn ($routeName, $params = []) => SeoHelper::localizedRoute($routeName, $params, $locale);
    $copyLocale = in_array($locale, ['en', 'us', 'pt', 'br', 'es', 'fr'], true) ? $locale : 'en';
    $pageCopy = [
        'en' => [
            'title' => 'Digital growth systems for the industries customers search, compare and choose every day.',
            'description' => 'Find the right growth path for your sector. Each industry page connects website, SEO, paid traffic, social media and conversion work to how that business actually wins customers.',
            'meta_title' => 'Industries We Help Grow | Criazo',
            'meta_description' => 'Explore digital growth systems by industry. Websites, SEO, paid traffic, social media and conversion strategy for businesses that need more leads, sales and customers.',
            'cta_title' => 'Ready to make your sector easier to choose?',
            'cta_description' => 'Tell us what you sell and where customers decide. The plan will focus on visibility, trust, leads and sales.',
            'cta_primary' => 'Get a quote',
        ],
        'us' => [
            'title' => 'Digital growth systems for the industries customers search, compare and choose every day.',
            'description' => 'Find the right growth path for your sector. Each industry page connects website, SEO, paid traffic, social media and conversion work to how that business actually wins customers.',
            'meta_title' => 'Industries We Help Grow | Criazo',
            'meta_description' => 'Explore digital growth systems by industry. Websites, SEO, paid traffic, social media and conversion strategy for businesses that need more leads, sales and customers.',
            'cta_title' => 'Ready to make your sector easier to choose?',
            'cta_description' => 'Tell us what you sell and where customers decide. The plan will focus on visibility, trust, leads and sales.',
            'cta_primary' => 'Get a quote',
        ],
        'pt' => [
            'title' => 'Sistemas de crescimento digital para setores que os clientes pesquisam, comparam e escolhem todos os dias.',
            'description' => 'Encontra o caminho certo para o teu setor. Cada página liga website, SEO, tráfego pago, redes sociais e conversão à forma como esse negócio ganha clientes.',
            'meta_title' => 'Setores que ajudamos a crescer | Criazo',
            'meta_description' => 'Explora sistemas de crescimento digital por setor. Websites, SEO, tráfego pago, redes sociais e conversão para negócios que precisam de mais leads, vendas e clientes.',
            'cta_title' => 'Pronto para tornar o teu setor mais fácil de escolher?',
            'cta_description' => 'Diz-nos o que vendes e onde os clientes decidem. O plano foca visibilidade, confiança, leads e vendas.',
            'cta_primary' => 'Pedir proposta',
        ],
        'br' => [
            'title' => 'Sistemas de crescimento digital para setores que os clientes pesquisam, comparam e escolhem todos os dias.',
            'description' => 'Encontre o caminho certo para o seu setor. Cada página conecta site, SEO, tráfego pago, redes sociais e conversão à forma como esse negócio ganha clientes.',
            'meta_title' => 'Setores que ajudamos a crescer | Criazo',
            'meta_description' => 'Explore sistemas de crescimento digital por setor. Sites, SEO, tráfego pago, redes sociais e conversão para negócios que precisam de mais leads, vendas e clientes.',
            'cta_title' => 'Pronto para tornar seu setor mais fácil de escolher?',
            'cta_description' => 'Conte o que você vende e onde os clientes decidem. O plano foca visibilidade, confiança, leads e vendas.',
            'cta_primary' => 'Pedir proposta',
        ],
        'es' => [
            'title' => 'Sistemas de crecimiento digital para sectores que los clientes buscan, comparan y eligen cada día.',
            'description' => 'Encuentra el camino adecuado para tu sector. Cada página conecta web, SEO, tráfico pago, redes sociales y conversión con la forma real de ganar clientes.',
            'meta_title' => 'Industrias que ayudamos a crecer | Criazo',
            'meta_description' => 'Explora sistemas de crecimiento digital por industria. Web, SEO, tráfico pago, redes sociales y conversión para negocios que necesitan más leads, ventas y clientes.',
            'cta_title' => '¿Listo para que tu sector sea más fácil de elegir?',
            'cta_description' => 'Cuéntanos qué vendes y dónde deciden tus clientes. El plan se centrará en visibilidad, confianza, leads y ventas.',
            'cta_primary' => 'Pedir propuesta',
        ],
        'fr' => [
            'title' => 'Des systèmes de croissance digitale pour les secteurs que les clients recherchent, comparent et choisissent chaque jour.',
            'description' => 'Trouvez le bon chemin pour votre secteur. Chaque page relie site web, SEO, trafic payant, réseaux sociaux et conversion à la façon dont ce business gagne des clients.',
            'meta_title' => 'Secteurs que nous aidons à développer | Criazo',
            'meta_description' => 'Explorez les systèmes de croissance digitale par secteur. Sites web, SEO, trafic payant, réseaux sociaux et conversion pour générer plus de leads, ventes et clients.',
            'cta_title' => 'Prêt à rendre votre secteur plus facile à choisir ?',
            'cta_description' => 'Dites-nous ce que vous vendez et où vos clients décident. Le plan visera visibilité, confiance, leads et ventes.',
            'cta_primary' => 'Demander un devis',
        ],
    ][$copyLocale];

    $industryImages = [
        'food-beverage' => 'images/industries/food-beverage.jpg',
        'retail' => 'images/industries/retail.jpg',
        'beauty-personal-care' => 'images/industries/beauty-personal-care.jpg',
        'professional-business-services' => 'images/industries/professional-business-services.jpg',
        'home-local-services' => 'images/industries/home-local-services.jpg',
        'health-wellness' => 'images/industries/health-wellness.jpg',
        'sports-fitness' => 'images/industries/sports-fitness.jpg',
        'education-training' => 'images/industries/education-training.jpg',
        'events-hospitality' => 'images/industries/events-hospitality.jpg',
        'transport-mobility' => 'images/industries/transport-mobility.jpg',
        'nonprofits-organizations' => 'images/industries/nonprofits-organizations.jpg',
        'creative-personal-brands' => 'images/industries/creative-personal-brands.jpg',
        'enterprise-multi-location' => 'images/industries/enterprise-multi-location.jpg',
    ];
    $industryDescriptions = [
        'food-beverage' => 'Restaurants, bars and food brands need demand before the visit, trust before the booking and repeat business after the first order.',
        'retail' => 'Retail brands need customers to find the right product, trust the store and buy online or in person with less hesitation.',
        'beauty-personal-care' => 'Beauty businesses need clients to see the result, trust the professional and book before comparing every nearby option.',
        'professional-business-services' => 'Service firms need authority, clear offers and better lead quality so the right clients choose the business before the first call.',
        'home-local-services' => 'Local service businesses need to be found at urgent moments and turn searches into calls, quotes and booked jobs.',
        'health-wellness' => 'Health and wellness teams need confidence, clarity and easy booking paths for people making careful personal decisions.',
        'sports-fitness' => 'Fitness brands need memberships, bookings and trust from people comparing coaches, classes and local options.',
        'education-training' => 'Education businesses need students and parents to understand the outcome, trust the program and take the next step.',
        'events-hospitality' => 'Hospitality and event businesses need visual proof, local visibility and quick enquiry paths for dates that matter.',
        'transport-mobility' => 'Transport companies need direct booking demand, price confidence and reliable communication before the trip starts.',
        'nonprofits-organizations' => 'Organizations need clarity, credibility and action paths that turn attention into members, donors and campaign support.',
        'creative-personal-brands' => 'Creators and personal brands need authority, audience growth and simple paths from attention to enquiries or sales.',
        'enterprise-multi-location' => 'Multi-location brands need consistent visibility, local trust and conversion systems that work across every market.',
    ];
@endphp

@section('title', $pageCopy['meta_title'])
@section('meta_description', $pageCopy['meta_description'])
@section('robots', 'index, follow')
@section('og_title', $pageCopy['meta_title'])
@section('og_description', $pageCopy['meta_description'])
@section('twitter_title', $pageCopy['meta_title'])
@section('twitter_description', $pageCopy['meta_description'])
@section('og_image', asset('images/industries/beauty-personal-care.jpg'))

@push('schema')
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "CollectionPage",
  "@id": "{{ SeoHelper::getCanonicalUrl() }}/#webpage",
  "url": "{{ SeoHelper::getCanonicalUrl() }}",
  "name": {!! json_encode($pageCopy['meta_title']) !!},
  "description": {!! json_encode($pageCopy['meta_description']) !!},
  "isPartOf": { "@id": "{{ config('seo.site_url') }}/#website" },
  "about": { "@id": "{{ config('seo.site_url') }}/#organization" },
  "inLanguage": "{{ SeoHelper::getCurrentLanguageCode() }}"
}
</script>
@endpush

@section('content')
<article class="industry-index-page">
    <section class="industry-index-hero" aria-labelledby="industry-index-heading">
        <div class="site-container">
            <h1 id="industry-index-heading">{{ $pageCopy['title'] }}</h1>
            <p>{{ $pageCopy['description'] }}</p>
        </div>
    </section>

    <section class="industry-index-list" aria-label="{{ __('messages.nav.industries') }}">
        <div class="site-container">
            <div class="industry-index">
                @foreach($industrySections as $section)
                    @php
                        $sectionId = $section['id'] ?? '';
                        $items = array_slice($section['items'] ?? [], 0, 8);
                    @endphp
                    <article class="industry-index__row">
                        <div class="industry-index__title">
                            <a href="{{ $section['href'] }}" class="industry-index__main-link">
                                <h2>{{ $section['label'] }}</h2>
                            </a>
                            <p>{{ $industryDescriptions[$sectionId] ?? $pageCopy['description'] }}</p>
                        </div>

                        <a href="{{ $section['href'] }}" class="industry-index__media" aria-label="{{ $section['label'] }}">
                            <img
                                src="{{ asset($industryImages[$sectionId] ?? 'images/industries/beauty-personal-care.jpg') }}"
                                alt="{{ $section['label'] }} business owner working"
                                width="960"
                                height="1280"
                                loading="{{ $loop->first ? 'eager' : 'lazy' }}"
                                @if($loop->first) fetchpriority="high" @endif
                            >
                        </a>

                        <nav class="industry-index__nav" aria-label="{{ $section['label'] }}">
                            @foreach($items as $item)
                                <a href="{{ $item['href'] }}" class="industry-index__service">
                                    <span>{{ $item['label'] }}</span>
                                    <small>Growth systems built around how this business gets found, earns trust and turns demand into customers.</small>
                                </a>
                            @endforeach
                        </nav>
                    </article>
                @endforeach
            </div>
        </div>
    </section>

    <section class="industry-index-cta" aria-labelledby="industry-cta-heading">
        <div class="site-container">
            <h2 id="industry-cta-heading">{{ $pageCopy['cta_title'] }}</h2>
            <p>{{ $pageCopy['cta_description'] }}</p>
            <a href="{{ $localizedRoute('contact.index') }}" class="industry-index-cta__btn">{{ $pageCopy['cta_primary'] }}</a>
        </div>
    </section>
</article>

@push('styles')
<style>
    .industry-index-hero {
        padding: clamp(6rem, 12vw, 10rem) 0 clamp(3.5rem, 7vw, 6rem);
        background: linear-gradient(to bottom, #ecf4f5 0%, #fff 100%);
    }

    .industry-index-hero h1 {
        max-width: 18ch;
        margin: 0;
        color: #101828;
        font-size: clamp(3.1rem, 7vw, 7.3rem);
        font-weight: 700;
        line-height: .9;
        letter-spacing: -.06em;
    }

    .industry-index-hero p {
        max-width: 45rem;
        margin: 1.6rem 0 0;
        color: #4b5563;
        font-size: clamp(1.05rem, 1.45vw, 1.35rem);
        line-height: 1.45;
        letter-spacing: -.035em;
    }

    .industry-index-list {
        padding: clamp(2rem, 5vw, 4rem) 0 clamp(5rem, 9vw, 8rem);
        background: #fff;
    }

    .industry-index {
        display: grid;
        gap: clamp(3.25rem, 7vw, 6.5rem);
    }

    .industry-index__row {
        display: grid;
        grid-template-columns: minmax(13rem, .72fr) minmax(17rem, .9fr) minmax(17rem, 1fr);
        align-items: center;
        gap: clamp(2rem, 5vw, 4.75rem);
        padding: clamp(1.5rem, 3vw, 2.4rem) 0;
        border-top: 1px solid rgba(15, 23, 42, .1);
    }

    .industry-index__title h2 {
        max-width: 8.5ch;
        margin: 0;
        color: #101828;
        font-size: clamp(2.05rem, 3.5vw, 4.35rem);
        font-weight: 700;
        line-height: .92;
        letter-spacing: -.06em;
    }

    .industry-index__title p {
        max-width: 27rem;
        margin: 1.2rem 0 0;
        color: #4b5563;
        font-size: clamp(.95rem, 1.2vw, 1.08rem);
        line-height: 1.45;
        letter-spacing: -.025em;
    }

    .industry-index__main-link,
    .industry-index__service {
        color: inherit;
        text-decoration: none;
    }

    .industry-index__main-link:hover h2,
    .industry-index__service:hover span {
        color: var(--color-criazo-primary, #08aaa5);
    }

    .industry-index__media {
        display: block;
        aspect-ratio: 4 / 5;
        overflow: hidden;
        border-radius: 10px;
        background: #eef3f4;
    }

    .industry-index__media img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform .5s ease;
    }

    .industry-index__media:hover img {
        transform: scale(1.035);
    }

    .industry-index__nav {
        display: grid;
        align-content: center;
    }

    .industry-index__service {
        display: grid;
        gap: .28rem;
        padding: .78rem 0;
        border-bottom: 1px solid rgba(15, 23, 42, .12);
    }

    .industry-index__service span {
        color: #101828;
        font-size: .98rem;
        font-weight: 700;
        line-height: 1.1;
        letter-spacing: -.035em;
    }

    .industry-index__service small {
        max-width: 31rem;
        color: #667085;
        font-size: .82rem;
        line-height: 1.35;
        letter-spacing: -.02em;
    }

    .industry-index-cta {
        padding: clamp(5rem, 9vw, 8rem) 0;
        background: #00b7b2;
        color: #fff;
        text-align: center;
    }

    .industry-index-cta h2 {
        max-width: 18ch;
        margin: 0 auto;
        font-size: clamp(2.6rem, 5vw, 5.2rem);
        font-weight: 700;
        line-height: .95;
        letter-spacing: -.06em;
    }

    .industry-index-cta p {
        max-width: 38rem;
        margin: 1.3rem auto 2rem;
        color: rgba(255,255,255,.86);
        font-size: 1.1rem;
        line-height: 1.45;
        letter-spacing: -.03em;
    }

    .industry-index-cta__btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 3rem;
        padding: .9rem 1.35rem;
        border-radius: 999px;
        background: #fff;
        color: #101828;
        font-weight: 700;
        text-decoration: none;
    }

    @media (max-width: 1023px) {
        .industry-index__row {
            grid-template-columns: minmax(0, 1fr);
            gap: 1.6rem;
        }

        .industry-index__title h2 {
            max-width: 12ch;
        }

        .industry-index__media {
            aspect-ratio: 16 / 10;
        }
    }
</style>
@endpush
@endsection