@extends('layouts.app')

@php
    $category = $activeCategory ? $categories[$activeCategory] : null;
    $pageTitle = $category ? $category['label'].' product directions' : 'Products shaped into coherent ranges';
    $allProducts = config('products.products');
    $categoryVisuals = [
        'skincare' => 'images/inner-pages/products-skincare.webp',
        'haircare' => 'images/inner-pages/products-haircare.webp',
        'personal-care' => 'images/inner-pages/products-personal-care.webp',
    ];
    $heroImage = $activeCategory ? $categoryVisuals[$activeCategory] : 'images/inner-pages/products-hero.webp';
    $productsFaqs = [
        ['question' => 'How do we choose the right product category?', 'answer' => 'Start with the customer, route to market, and role the range needs to play. Skin Care, Hair Care, and Personal Care can then be reviewed as focused standalone directions or as parts of a coordinated collection.'],
        ['question' => 'Can a project begin with one product?', 'answer' => 'Yes. A focused single-product direction can be a practical first step, with future range relationships considered without committing to an unnecessarily large opening assortment.'],
        ['question' => 'Can several products be developed as one range?', 'answer' => 'Products can be discussed as a coordinated range so format, packaging direction, label language, and presentation feel connected across the collection.'],
        ['question' => 'When are packaging options discussed?', 'answer' => 'Packaging direction is best discussed early. The supported options shown on each product page provide a starting point, while final presentation depends on the agreed project scope.'],
        ['question' => 'Can an existing product direction be refined?', 'answer' => 'Some product directions can provide a considered starting point for refinement. The workable development scope is established against the product, project stage, and commercial brief.'],
        ['question' => 'Can we enquire before the brief is finalized?', 'answer' => 'Yes. A category, target customer, business context, and broad product interest are enough to begin a useful discussion about the next development step.'],
    ];
    $whyChoose = [
        ['Connected product development', 'Product direction, formulation, packaging, and presentation are considered as parts of one range system.'],
        ['Category-focused direction', 'Each format has a clear role, helping businesses avoid an opening assortment that feels disconnected or unnecessarily broad.'],
        ['Packaging alignment', 'Pack and label direction enter the conversation early enough to support range consistency and product presentation.'],
        ['Commercially practical ranges', 'Development decisions stay connected to the customer, sales environment, project stage, and intended route to market.'],
    ];
@endphp

@section('title', $pageTitle.' | Auravista')
@section('meta_description', 'Explore Auravista private-label Skin Care, Hair Care, and Personal Care product directions for coordinated ranges and range expansion.')

@section('content')
<main class="overflow-hidden bg-white text-[#1f3443]" data-page-products>
    <section class="products-hero relative overflow-hidden bg-[#f7f1ea] pb-14 pt-28 sm:pb-16 sm:pt-32 lg:pb-20">
        <div class="pointer-events-none absolute inset-0 [background:radial-gradient(circle_at_12%_18%,rgba(187,122,88,.12),transparent_24%),radial-gradient(circle_at_88%_72%,rgba(140,152,117,.1),transparent_26%)]" aria-hidden="true"></div>
        <div class="relative mx-auto grid max-w-[1400px] gap-12 px-5 md:px-10 lg:grid-cols-[.93fr_1.07fr] lg:items-center lg:px-16">
            <div data-inner-stagger>
                <p class="inner-eyebrow">Private-label product portfolio</p>
                <h1 class="inner-display mt-6 max-w-[11ch]">{{ $pageTitle }}</h1>
                <p class="mt-6 max-w-xl text-base leading-8 text-[#40261a]/70">{{ $category['description'] ?? 'Explore Skin Care, Hair Care, and Personal Care formats designed to begin clearer conversations about product direction, packaging, and coordinated private-label development.' }}</p>
                <div class="mt-8 flex flex-wrap gap-3">
                    <a href="#product-catalogue" class="inner-button">Explore the catalogue</a>
                    <a href="{{ route('contact') }}" class="inner-button inner-button-outline">Start a product enquiry</a>
                </div>
                <div class="mt-9 flex flex-wrap items-center gap-x-7 gap-y-3 border-t border-[#40261a]/10 pt-5 text-xs text-[#40261a]/55">
                    <span><strong class="mr-1 text-[#1f3443]">{{ count($allProducts) }}</strong> product directions</span>
                    <span><strong class="mr-1 text-[#1f3443]">{{ count($categories) }}</strong> core categories</span>
                    <span>Built for B2B range discussions</span>
                </div>
            </div>

            <div class="products-hero__visual" data-inner-image>
                <div class="products-hero__primary">
                    <img src="{{ asset($heroImage) }}" alt="{{ $category['label'] ?? 'Auravista product portfolio' }} presentation" width="900" height="720" fetchpriority="high" data-inner-parallax>
                </div>
                <div class="products-hero__secondary">
                    <img src="{{ asset('images/inner-pages/products-secondary.webp') }}" alt="Supporting natural personal-care product format" width="1400" height="1100">
                </div>
                <div class="products-hero__label">
                    <span>Portfolio view</span>
                    <strong>{{ $category['label'] ?? 'All categories' }}</strong>
                </div>
            </div>
        </div>
    </section>

    <section class="py-20 lg:py-28" aria-labelledby="portfolio-overview-heading">
        <div class="mx-auto grid max-w-[1400px] gap-12 px-5 md:px-10 lg:grid-cols-[.72fr_1.28fr] lg:items-start lg:px-16">
            <div data-inner-reveal>
                <p class="inner-eyebrow">Portfolio overview</p>
                <h2 id="portfolio-overview-heading" class="mt-6 max-w-[12ch] text-4xl leading-none tracking-[-.05em] sm:text-5xl">A category system built beyond isolated products.</h2>
            </div>
            <div data-inner-reveal>
                <div class="grid gap-5 text-base leading-8 text-[#40261a]/68 sm:grid-cols-2">
                    <p>Each direction can begin as a focused standalone product, provide a considered route into private label, or extend an existing collection.</p>
                    <p>Across categories, formulation, packaging, label direction, and finished presentation can be discussed together so the range reads as one commercial idea.</p>
                </div>
                <div class="mt-9 grid gap-3 sm:grid-cols-3" data-inner-stagger>
                    @foreach($categories as $key => $item)
                        <a href="{{ route('products', ['category' => $key]) }}" class="group overflow-hidden rounded-[1.25rem] border border-[#1f3443]/10 bg-[#f7f1ea] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-[#bb7a58]">
                            <img src="{{ asset($categoryVisuals[$key]) }}" alt="{{ $item['label'] }} category" width="420" height="300" loading="lazy" class="aspect-[7/5] w-full object-cover transition duration-500 group-hover:scale-[1.03]">
                            <div class="flex items-center justify-between gap-3 p-4"><span class="text-sm font-semibold">{{ $item['label'] }}</span><span class="text-[#b86f45]" aria-hidden="true">→</span></div>
                        </a>
                    @endforeach
                </div>
            </div>
        </div>
    </section>

    <section class="border-y border-[#1f3443]/10 bg-[#f7f1ea] py-5" aria-label="Product category navigation">
        <div class="mx-auto flex max-w-[1400px] gap-2 overflow-x-auto px-5 py-1 md:px-10 lg:px-16">
            <a href="{{ route('products') }}#product-catalogue" class="inner-filter shrink-0 {{ !$activeCategory ? 'is-active' : '' }}" @if(!$activeCategory) aria-current="page" @endif>All Products</a>
            @foreach($categories as $key => $item)
                <a href="{{ route('products', ['category' => $key]) }}#product-catalogue" class="inner-filter shrink-0 {{ $activeCategory === $key ? 'is-active' : '' }}" @if($activeCategory === $key) aria-current="page" @endif>{{ $item['label'] }}</a>
            @endforeach
        </div>
    </section>

    <section id="product-catalogue" class="scroll-mt-24 bg-white py-20 lg:py-28" aria-labelledby="products-heading">
        <div class="mx-auto max-w-[1400px] px-5 md:px-10 lg:px-16">
            <div class="flex flex-col gap-5 border-b border-[#1f3443]/10 pb-8 sm:flex-row sm:items-end sm:justify-between" data-inner-reveal>
                <div>
                    <p class="inner-eyebrow">Available formats</p>
                    <h2 id="products-heading" class="mt-5 max-w-[14ch] text-4xl leading-none tracking-[-.05em] sm:text-5xl">{{ $category ? $category['label'].' directions' : 'The complete product edit' }}</h2>
                </div>
                <p class="text-sm text-[#40261a]/55">{{ str_pad((string) count($products), 2, '0', STR_PAD_LEFT) }} products shown</p>
            </div>
            <div class="mt-9 grid gap-5 sm:grid-cols-2 xl:grid-cols-3" data-inner-stagger>
                @forelse($products as $product)
                    <x-product-card :product="$product" :id="$product['slug']" class="scroll-mt-28" />
                @empty
                    <p class="col-span-full py-16 text-center text-[#40261a]/65">No products are available in this category.</p>
                @endforelse
            </div>
        </div>
    </section>

    <section class="bg-[#1f3443] py-20 text-[#f6f0e8] lg:py-28" aria-labelledby="why-auravista-heading">
        <div class="mx-auto grid max-w-[1400px] gap-12 px-5 md:px-10 lg:grid-cols-[.82fr_1.18fr] lg:px-16">
            <div class="lg:sticky lg:top-28 lg:self-start" data-inner-image>
                <p class="text-xs font-semibold uppercase tracking-[.16em] text-[#e5ad8d]">Why choose Auravista</p>
                <h2 id="why-auravista-heading" class="mt-6 max-w-[12ch] text-4xl leading-none tracking-[-.05em] sm:text-5xl">A clearer product conversation from the start.</h2>
                <div class="mt-8 overflow-hidden rounded-[1.5rem] border border-white/10">
                    <img src="{{ asset('images/inner-pages/products-development.webp') }}" alt="Professional cosmetic treatment and product application" width="1400" height="1100" loading="lazy" class="aspect-[3/2] w-full object-cover" data-inner-parallax>
                </div>
            </div>
            <div class="border-t border-white/15" data-inner-stagger>
                @foreach($whyChoose as $index => $reason)
                    <article class="grid gap-4 border-b border-white/15 py-7 sm:grid-cols-[4rem_1fr]">
                        <span class="text-sm text-[#e5ad8d]">{{ sprintf('%02d', $index + 1) }}</span>
                        <div><h3 class="text-xl text-white">{{ $reason[0] }}</h3><p class="mt-3 max-w-xl text-sm leading-7 text-white/62">{{ $reason[1] }}</p></div>
                    </article>
                @endforeach
            </div>
        </div>
    </section>

    @include('partials.faq', [
        'faqs' => $productsFaqs,
        'title' => 'Practical questions about choosing and building a range.',
        'note' => 'A useful starting point for product selection, packaging direction, refinement, and coordinated private-label development.',
    ])

    <section class="products-final-cta relative overflow-hidden py-20 text-[#f6f0e8] sm:py-24">
        <img src="{{ asset('images/inner-pages/products-cta.webp') }}" alt="" width="1400" height="1100" loading="lazy" class="absolute inset-0 h-full w-full object-cover" aria-hidden="true">
        <div class="absolute inset-0 bg-[#0f2230]/88"></div>
        <div class="relative mx-auto flex max-w-[1400px] flex-col gap-8 px-5 md:px-10 lg:flex-row lg:items-end lg:justify-between lg:px-16" data-inner-reveal>
            <div><p class="text-xs font-semibold uppercase tracking-[.16em] text-[#e5ad8d]">Build the range</p><h2 class="mt-6 max-w-[14ch] text-4xl leading-none tracking-[-.05em] sm:text-6xl">Connect product, pack, and presentation around one clear idea.</h2><p class="mt-5 max-w-xl text-sm leading-7 text-white/64">Share the category and business context behind the range. A completely finalized brief is not required.</p></div>
            <div class="flex flex-wrap gap-3"><a href="{{ route('contact') }}" class="inner-button inner-button-light">Get a quote</a><a href="{{ route('about') }}" class="inline-flex min-h-12 items-center justify-center rounded-full border border-white/20 px-6 text-sm font-semibold text-white transition hover:-translate-y-0.5 hover:bg-white/5">About Auravista</a></div>
        </div>
    </section>
</main>
@endsection