<x-layout>
    {{-- ============================ HERO ============================ --}}
    <section class="relative overflow-hidden bg-paper-200 border-b border-slate-200">
        <div class="absolute inset-0 grid-bg opacity-70"></div>
        <div class="absolute -top-px inset-x-0 h-px bg-gradient-to-r from-transparent via-brand-500/50 to-transparent"></div>

        <div class="relative shell pt-16 pb-20 lg:pt-24 lg:pb-28 grid lg:grid-cols-[1.05fr_0.95fr] gap-14 items-center">
            <div>
                <p class="kicker mb-6 reveal" style="--d:.05s">Technology Infrastructure · Procurement · Logistics</p>
                <h1 class="text-4xl sm:text-5xl lg:text-[4rem] font-semibold tracking-tight leading-[1.02] text-slate-ink reveal" style="--d:.12s">
                    Infrastructure,<br>
                    <span class="text-brand-600">delivered</span> &amp; integrated.
                </h1>
                <p class="mt-7 text-lg text-slate-500 max-w-xl leading-relaxed reveal" style="--d:.22s">
                    We source, ship, and integrate complete technology systems — broadcast, ICT, security, and power — under one accountable partner. From specification to commissioning, the final system simply works.
                </p>
                <div class="mt-9 flex flex-wrap gap-3 reveal" style="--d:.3s">
                    <a href="{{ route('quote') }}" class="btn btn-primary">Request a Quote <x-icon name="arrow" class="w-4 h-4"/></a>
                    <a href="{{ route('services.index') }}" class="btn btn-ghost">Explore services</a>
                </div>

                {{-- Trust row --}}
                <div class="mt-10 flex flex-wrap items-center gap-x-7 gap-y-3 reveal" style="--d:.4s">
                    @foreach (['Single accountable partner','Global supply network','Spec to support'] as $point)
                        <span class="inline-flex items-center gap-2 text-sm text-slate-500">
                            <x-icon name="check" class="w-4 h-4 text-brand-600"/> {{ $point }}
                        </span>
                    @endforeach
                </div>
            </div>

            {{-- Hero photo with floating stat --}}
            <div class="relative reveal" style="--d:.38s">
                <div class="media media-ring media-zoom aspect-[5/4] shadow-2xl">
                    <img src="{{ asset('images/hero.jpg') }}" alt="Brokam engineers commissioning technology infrastructure" loading="eager">
                    <div class="absolute inset-0 bg-gradient-to-t from-navy-900/35 to-transparent"></div>
                </div>
                <div class="absolute -bottom-5 -left-4 sm:left-6 flex items-center gap-3 rounded-2xl border border-slate-200 bg-white px-5 py-3.5 shadow-xl">
                    <span class="grid place-items-center w-10 h-10 rounded-xl bg-brand-50 text-brand-600">
                        <x-icon name="globe" class="w-5 h-5"/>
                    </span>
                    <div>
                        <p class="font-display text-sm font-semibold text-slate-ink leading-none">Global · Single partner</p>
                        <p class="font-mono text-[11px] text-slate-400 mt-1">Spec → source → integrate</p>
                    </div>
                </div>
                <div class="absolute -top-4 -right-3 hidden sm:flex items-center gap-2 rounded-full bg-brand-500 text-white px-4 py-2 shadow-lg">
                    <span class="w-1.5 h-1.5 rounded-full bg-white"></span>
                    <span class="font-mono text-[11px] tracking-wide">6 CORE SERVICES</span>
                </div>
            </div>
        </div>

        {{-- Stats strip --}}
        <div class="relative border-t border-slate-200 bg-white/60">
            <div class="shell grid grid-cols-2 lg:grid-cols-4 divide-x divide-slate-200">
                @foreach ($stats as $stat)
                    <div class="py-7 px-2 lg:px-6 first:pl-0">
                        <p class="font-display text-2xl sm:text-3xl font-semibold text-slate-ink">{{ $stat['value'] }}</p>
                        <p class="font-mono text-[11px] uppercase tracking-wide text-slate-400 mt-1.5">{{ $stat['label'] }}</p>
                    </div>
                @endforeach
            </div>
        </div>
    </section>

    {{-- ======================= POSITIONING ======================= --}}
    <section class="section">
        <div class="shell grid lg:grid-cols-[0.95fr_1.05fr] gap-12 lg:gap-16 items-center">
            <div class="relative">
                <div class="media media-ring media-zoom aspect-[4/3] shadow-xl">
                    <img src="{{ asset('images/procurement.jpg') }}" alt="Procurement and logistics operations" loading="lazy">
                </div>
                <div class="media media-ring absolute -bottom-8 -right-4 w-40 sm:w-48 aspect-square hidden sm:block border-4 border-white shadow-2xl">
                    <img src="{{ asset('images/integration.jpg') }}" alt="System integration" loading="lazy">
                </div>
            </div>
            <div>
                <p class="kicker mb-5">Who we are</p>
                <h2 class="text-3xl sm:text-4xl font-semibold tracking-tight text-slate-ink max-w-md">The bridge between world-class technology and the clients who depend on it.</h2>
                <div class="mt-6 text-lg text-slate-500 leading-relaxed space-y-5 max-w-xl">
                    <p>At our core, we are a procurement and logistics supply chain business. We source equipment from a trusted global network, move it efficiently and securely, and deliver complete, ready-to-operate technology solutions.</p>
                    <p>Clients engage Brokam to remove risk — we handle specification, sourcing, importation, logistics, installation, and integration, so you manage one partner instead of many vendors.</p>
                </div>
                <a href="{{ route('about') }}" class="link-underline inline-flex items-center gap-2 font-semibold text-brand-600 mt-7">About Brokam International <x-icon name="arrow" class="w-4 h-4"/></a>
            </div>
        </div>
    </section>

    {{-- ============================ SERVICES ============================ --}}
    <section class="section bg-paper-200 border-y border-slate-200">
        <div class="shell">
            <div class="flex flex-col md:flex-row md:items-end justify-between gap-6 mb-12">
                <div>
                    <p class="kicker mb-4">Capabilities</p>
                    <h2 class="text-3xl sm:text-4xl font-semibold tracking-tight text-slate-ink max-w-2xl">Six core services, one operational outcome.</h2>
                </div>
                <a href="{{ route('services.index') }}" class="btn btn-ghost shrink-0">All services <x-icon name="arrow" class="w-4 h-4"/></a>
            </div>
            <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
                @foreach ($services as $service)
                    <x-service-card :service="$service" delay="{{ $loop->index * 0.06 }}s"/>
                @endforeach
            </div>
        </div>
    </section>

    {{-- ============================ APPROACH ============================ --}}
    <section class="section">
        <div class="shell">
            <div class="max-w-2xl mb-12">
                <p class="kicker mb-4">How we work</p>
                <h2 class="text-3xl sm:text-4xl font-semibold tracking-tight text-slate-ink">A transparent process — engineered to remove risk.</h2>
            </div>
            <ol class="grid sm:grid-cols-2 lg:grid-cols-3 gap-5">
                @foreach ($approach as $step)
                    <li class="card p-6">
                        <span class="font-mono text-sm font-semibold text-brand-600">{{ $step['step'] }}</span>
                        <h3 class="mt-3 text-lg font-semibold text-slate-ink">{{ $step['title'] }}</h3>
                        <p class="mt-2 text-sm text-slate-500 leading-relaxed">{{ $step['body'] }}</p>
                    </li>
                @endforeach
            </ol>
            <div class="mt-8">
                <a href="{{ route('approach') }}" class="link-underline inline-flex items-center gap-2 font-semibold text-brand-600">See our full approach <x-icon name="arrow" class="w-4 h-4"/></a>
            </div>
        </div>
    </section>

    {{-- ============================ WHY CHOOSE ============================ --}}
    <section class="section bg-paper-200 border-y border-slate-200">
        <div class="shell">
            <div class="max-w-2xl mb-12">
                <p class="kicker mb-4">Why Brokam</p>
                <h2 class="text-3xl sm:text-4xl font-semibold tracking-tight text-slate-ink">Dependability and breadth, in one accountable partner.</h2>
            </div>
            <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-x-10 gap-y-9">
                @foreach ($whyChoose as $item)
                    <div class="flex gap-4">
                        <span class="shrink-0 mt-0.5 grid place-items-center w-9 h-9 rounded-lg border border-brand-100 bg-brand-50 text-brand-600">
                            <x-icon name="check" class="w-5 h-5"/>
                        </span>
                        <div>
                            <h3 class="text-base font-semibold text-slate-ink">{{ $item['title'] }}</h3>
                            <p class="mt-1.5 text-sm text-slate-500 leading-relaxed">{{ $item['body'] }}</p>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </section>

    {{-- ============================ INDUSTRIES ============================ --}}
    <section class="section">
        <div class="shell">
            <div class="flex flex-col md:flex-row md:items-end justify-between gap-6 mb-12">
                <div>
                    <p class="kicker mb-4">Who we serve</p>
                    <h2 class="text-3xl sm:text-4xl font-semibold tracking-tight text-slate-ink max-w-xl">Trusted where reliable infrastructure is non-negotiable.</h2>
                </div>
                <a href="{{ route('industries') }}" class="btn btn-ghost shrink-0">All industries <x-icon name="arrow" class="w-4 h-4"/></a>
            </div>
            <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-5">
                @foreach ($industries as $ind)
                    <a href="{{ route('industries') }}" class="card group overflow-hidden flex flex-col">
                        <div class="media media-zoom aspect-[16/10] scrim">
                            <img src="{{ asset($ind['image'] ?? 'images/enterprise.jpg') }}" alt="{{ $ind['name'] }}" loading="lazy">
                            <span class="absolute z-[2] bottom-3 left-3 right-3 text-sm font-semibold text-white leading-snug">{{ $ind['name'] }}</span>
                        </div>
                    </a>
                @endforeach
            </div>
        </div>
    </section>

    {{-- ============================ PROJECTS ============================ --}}
    @if ($projects->isNotEmpty())
        <section class="section bg-paper-200 border-y border-slate-200">
            <div class="shell">
                <div class="flex flex-col md:flex-row md:items-end justify-between gap-6 mb-12">
                    <div>
                        <p class="kicker mb-4">Selected work</p>
                        <h2 class="text-3xl sm:text-4xl font-semibold tracking-tight text-slate-ink">Complete systems, delivered.</h2>
                    </div>
                    <a href="{{ route('projects.index') }}" class="btn btn-ghost shrink-0">All projects <x-icon name="arrow" class="w-4 h-4"/></a>
                </div>
                <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
                    @foreach ($projects as $project)
                        <x-project-card :project="$project"/>
                    @endforeach
                </div>
            </div>
        </section>
    @endif

    {{-- ============================ NEWS ============================ --}}
    @if ($articles->isNotEmpty())
        <section class="section">
            <div class="shell">
                <div class="flex flex-col md:flex-row md:items-end justify-between gap-6 mb-12">
                    <div>
                        <p class="kicker mb-4">Insights</p>
                        <h2 class="text-3xl sm:text-4xl font-semibold tracking-tight text-slate-ink">Perspectives from the supply chain.</h2>
                    </div>
                    <a href="{{ route('news.index') }}" class="btn btn-ghost shrink-0">All articles <x-icon name="arrow" class="w-4 h-4"/></a>
                </div>
                <div class="grid md:grid-cols-3 gap-6">
                    @foreach ($articles as $article)
                        <x-article-card :article="$article"/>
                    @endforeach
                </div>
            </div>
        </section>
    @endif

    <x-cta-band/>
</x-layout>