@extends('layouts.app')

@section('content')
<div class="min-h-screen bg-background">
    @include('partials.navbar', ['variant' => 'dark'])

    <main>
        {{-- Hero --}}
        <div class="bg-secondary pt-[140px] pb-20">
            <div class="mx-auto max-w-7xl px-6">
                <p class="mb-4 flex items-center gap-4 font-display text-sm font-semibold uppercase tracking-[0.15em] text-primary">
                    <span class="h-0.5 w-8 bg-primary"></span>
                    Why Choose Us
                </p>
                <h1 class="max-w-3xl font-display text-[40px] leading-[1.1] text-secondary-foreground sm:text-[54px] lg:text-[64px]">
                    Why HSE Horizon
                </h1>
                <p class="mt-6 max-w-2xl text-sm leading-relaxed text-white/55">
                    We're not a compliance checkbox. We're a specialist HSE consultancy built on
                    field experience, independent judgment, and a genuine belief that safety
                    performance is the product of culture — not paperwork.
                </p>

                <div class="mt-10 flex flex-wrap gap-3">
                    @foreach (config('why.differentiators') as $item)
                        <span class="border border-white/15 px-4 py-2 font-display text-[11px] font-bold uppercase tracking-[0.12em] text-white/50">
                            {{ $item['no'] }} — {{ $item['title'] }}
                        </span>
                    @endforeach
                </div>
            </div>
        </div>

        <div class="h-1.5 w-full bg-brand-gradient"></div>

        {{-- Stats bar --}}
        <div data-animate class="bg-primary">
            <div class="mx-auto grid max-w-7xl grid-cols-2 divide-x divide-primary-foreground/20 px-6 lg:grid-cols-4">
                @foreach (config('why.stats') as $i => $stat)
                    <div class="ani-up flex flex-col items-center gap-1 px-6 py-10 text-center" style="animation-delay: {{ $i * 0.1 }}s">
                        <span class="font-display text-[42px] font-extrabold leading-none text-primary-foreground lg:text-[52px]">
                            {{ $stat['value'] }}
                        </span>
                        <span class="max-w-[140px] text-[12px] font-medium leading-snug text-primary-foreground/75">
                            {{ $stat['label'] }}
                        </span>
                    </div>
                @endforeach
            </div>
        </div>

        {{-- Differentiators --}}
        <div class="mx-auto max-w-7xl divide-y divide-border px-6">
            @foreach (config('why.differentiators') as $i => $item)
                @php($flip = $i % 2 !== 0)
                <article data-animate class="grid items-center gap-12 py-20 lg:grid-cols-2 lg:gap-20">
                    {{-- Photo panel --}}
                    <div class="ani-reveal relative h-[340px] overflow-hidden lg:h-[460px] {{ $flip ? 'lg:order-2' : '' }}" style="animation-delay: 0.1s">
                        <img src="{{ asset('images/' . $item['image']) }}" alt="{{ $item['image_alt'] }}" class="size-full object-cover" loading="lazy">
                        <div class="absolute inset-0 bg-secondary/30"></div>
                        <div class="absolute bottom-0 left-0 top-0 w-1 bg-primary"></div>

                        <div class="absolute bottom-6 right-6 flex size-16 items-center justify-center bg-primary shadow-lg">
                            @include('partials.icon', ['name' => $item['icon'], 'class' => 'size-7 text-primary-foreground'])
                        </div>

                        <div class="absolute right-0 top-0 bg-secondary px-4 py-2">
                            <span class="font-display text-[13px] font-bold uppercase tracking-[0.18em] text-primary">
                                {{ $item['no'] }}
                            </span>
                        </div>
                    </div>

                    {{-- Content --}}
                    <div class="{{ $flip ? 'lg:order-1' : '' }}">
                        <p class="ani-down mb-4 flex items-center gap-3 font-display text-sm font-semibold uppercase tracking-[0.15em] text-primary" style="animation-delay: 0.15s">
                            <span class="h-0.5 w-6 bg-primary"></span>
                            {{ $item['no'] }}
                        </p>

                        <h2 class="font-display text-[26px] leading-[1.2] text-secondary sm:text-[32px] lg:text-[36px]">
                            @foreach (explode(' ', $item['title']) as $wi => $word)
                                <span class="mr-2 inline-flex overflow-hidden">
                                    <span class="word-up" style="animation-delay: {{ 0.2 + $wi * 0.04 }}s">{{ $word }}</span>
                                </span>
                            @endforeach
                        </h2>

                        <p class="ani-up mt-5 text-sm leading-relaxed text-muted-foreground" style="animation-delay: 0.35s">
                            {{ $item['body'] }}
                        </p>

                        <ul class="mt-6 flex flex-col gap-3">
                            @foreach ($item['points'] as $pi => $point)
                                <li class="ani-up flex items-start gap-3" style="animation-delay: {{ 0.42 + $pi * 0.08 }}s">
                                    @include('partials.icon', ['name' => 'check-circle', 'class' => 'mt-0.5 size-4 shrink-0 text-primary'])
                                    <span class="text-sm text-secondary">{{ $point }}</span>
                                </li>
                            @endforeach
                        </ul>
                    </div>
                </article>
            @endforeach
        </div>

        {{-- Standards --}}
        <section data-animate class="bg-secondary py-20">
            <div class="mx-auto max-w-7xl px-6">
                <div class="mb-12 flex flex-col items-center text-center">
                    <p class="ani-down mb-4 flex items-center gap-3 font-display text-sm font-semibold uppercase tracking-[0.15em] text-primary" style="animation-delay: 0.1s">
                        <span class="h-0.5 w-6 bg-primary"></span>
                        Standards We Work To
                        <span class="h-0.5 w-6 bg-primary"></span>
                    </p>
                    <h2 class="ani-up max-w-xl font-display text-[28px] leading-[1.2] text-secondary-foreground sm:text-[34px]" style="animation-delay: 0.2s">
                        Built for Certification. Designed to Last.
                    </h2>
                </div>

                <div class="flex flex-wrap justify-center gap-3">
                    @foreach (config('why.standards') as $i => $std)
                        <div class="ani-up border border-white/10 px-5 py-3 font-display text-[13px] font-bold uppercase tracking-[0.12em] text-white/60 transition-colors duration-300 hover:border-primary hover:text-primary" style="animation-delay: {{ 0.25 + $i * 0.06 }}s">
                            {{ $std }}
                        </div>
                    @endforeach
                </div>
            </div>
        </section>

        {{-- CTA --}}
        <section data-animate class="bg-background py-24">
            <div class="mx-auto max-w-3xl px-6 text-center">
                <p class="ani-down mb-4 flex items-center justify-center gap-3 font-display text-sm font-semibold uppercase tracking-[0.15em] text-primary" style="animation-delay: 0.1s">
                    <span class="h-0.5 w-6 bg-primary"></span>
                    Ready to Work With Us?
                    <span class="h-0.5 w-6 bg-primary"></span>
                </p>
                <h2 class="ani-up font-display text-[30px] leading-[1.2] text-secondary sm:text-[38px]" style="animation-delay: 0.2s">
                    Let's Talk About Your HSE Needs
                </h2>
                <p class="ani-up mt-5 text-sm leading-relaxed text-muted-foreground" style="animation-delay: 0.3s">
                    Whether you need a single audit or a complete HSE structure built from the ground
                    up, our team is ready with a tailored approach — not a generic quote.
                </p>
                <div class="ani-up mt-8 flex flex-wrap items-center justify-center gap-4" style="animation-delay: 0.4s">
                    <a href="{{ route('contact') }}" class="btn-slide h-14 bg-primary px-10 text-sm text-primary-foreground hover:bg-secondary">
                        <span class="btn-label">
                            <span class="text-one">Talk to an HSE Specialist</span>
                            <span class="text-two">Talk to an HSE Specialist</span>
                        </span>
                        @include('partials.arrow-icon')
                    </a>
                    <a href="{{ route('home') }}#what-we-do" class="btn-slide h-14 border-2 border-secondary bg-transparent px-10 text-sm text-secondary hover:bg-secondary hover:text-secondary-foreground">
                        <span class="btn-label">
                            <span class="text-one">View Our Services</span>
                            <span class="text-two">View Our Services</span>
                        </span>
                        @include('partials.arrow-icon')
                    </a>
                </div>
            </div>
        </section>
    </main>

    @include('partials.footer')
</div>
@endsection
