@extends('layouts.app')

@section('title', 'Our Story')

@section('content')

    <x-breadcrumb :items="[['label' => 'About']]" />

    {{-- Page hero --}}
    <section class="bg-cream-100 py-16 text-center lg:py-24">
        <div class="container-shop max-w-3xl">
            <p class="eyebrow mb-3">Our story</p>
            <h1 class="font-serif text-4xl leading-tight font-medium sm:text-5xl">From our family farm to your daily ritual</h1>
            <p class="mx-auto mt-5 max-w-2xl leading-relaxed text-ink-700">
                Divne began with a simple belief — that honest, farm-fresh ingredients make the best skincare.
                Every batch is made slowly, tested rigorously and shipped fresh from our workshop.
            </p>
        </div>
    </section>

    {{-- Story split --}}
    <section class="py-16 lg:py-24">
        <div class="container-shop grid items-center gap-12 lg:grid-cols-2">
            <div class="overflow-hidden">
                <img src="{{ asset('images/misc/about-farm.svg') }}" alt="Illustration of our farm at sunrise" width="1000" height="1100" class="aspect-[10/11] w-full object-cover" loading="lazy">
            </div>
            <div class="max-w-xl">
                <p class="eyebrow mb-3">How it started</p>
                <h2 class="section-title">A goat farm, a kitchen and one stubborn idea</h2>
                <div class="prose-shop mt-6">
                    <p>
                        It started on a small family farm, where fresh goat milk was an everyday staple. When store-bought
                        products kept irritating our founder's sensitive skin, she went back to what generations before
                        her had trusted — milk, cold-pressed oils and time-tested botanicals.
                    </p>
                    <p>
                        The first batches were mixed in a home kitchen and shared with neighbours. Word travelled. Today,
                        that same care goes into every jar, bottle and bar we make — small batches, fresh ingredients,
                        and formulations tested for Indian skin and Indian weather.
                    </p>
                </div>
                <a href="{{ route('shop') }}" class="btn-primary mt-8">Shop Our Products</a>
            </div>
        </div>
    </section>

    {{-- Values --}}
    <section class="bg-moss-50 py-16 lg:py-24">
        <div class="container-shop">
            <x-section-heading eyebrow="What we stand for" title="Our Promise" center class="justify-center" />
            <div class="grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
                @foreach ([
                    ['icon' => 'leaf', 'title' => 'Farm-Fresh First', 'text' => 'Milk from our own farm, botanicals from partner growers we know by name.'],
                    ['icon' => 'shield', 'title' => 'Clinically Tested', 'text' => 'Every formulation is dermatologically tested and safety assessed before launch.'],
                    ['icon' => 'droplet', 'title' => 'No Nasties', 'text' => 'Free from sulphates, parabens, silicones, mineral oil and artificial fragrance.'],
                    ['icon' => 'heart', 'title' => 'Cruelty-Free', 'text' => 'Never tested on animals. Our goats are family — pampered, not prodded.'],
                ] as $value)
                    <div class="bg-white p-8 text-center shadow-soft">
                        <span class="mx-auto flex h-14 w-14 items-center justify-center rounded-full bg-moss-100 text-moss-700"><x-icon :name="$value['icon']" class="h-6 w-6" /></span>
                        <h3 class="mt-5 font-serif text-lg font-medium">{{ $value['title'] }}</h3>
                        <p class="mt-2.5 text-sm leading-relaxed text-ink-500">{{ $value['text'] }}</p>
                    </div>
                @endforeach
            </div>
        </div>
    </section>

    {{-- Stats --}}
    <section class="py-16 lg:py-24">
        <div class="container-shop grid grid-cols-2 gap-10 text-center lg:grid-cols-4">
            @foreach ([
                ['value' => '5,00,000+', 'label' => 'Happy customers'],
                ['value' => '40+', 'label' => 'Small-batch products'],
                ['value' => '120+', 'label' => 'Goats on our farm'],
                ['value' => '4.8/5', 'label' => 'Average rating'],
            ] as $stat)
                <div>
                    <p class="font-serif text-4xl font-medium text-moss-700 lg:text-5xl">{{ $stat['value'] }}</p>
                    <p class="mt-2 text-xs font-semibold tracking-[0.18em] text-ink-500 uppercase">{{ $stat['label'] }}</p>
                </div>
            @endforeach
        </div>
    </section>

    {{-- Founder quote --}}
    <section class="bg-blush-100 py-16 lg:py-24">
        <div class="container-shop max-w-3xl text-center">
            <x-icon name="sparkles" class="mx-auto h-8 w-8 text-terra-500" />
            <blockquote class="mt-6 font-serif text-2xl leading-relaxed font-medium text-ink-900 sm:text-3xl">
                &ldquo;Skincare shouldn't be a chemistry exam. If you wouldn't put it on a child's skin, we won't put it in a jar.&rdquo;
            </blockquote>
            <p class="mt-6 text-sm font-semibold tracking-[0.18em] text-ink-500 uppercase">— Founder, Divne</p>
        </div>
    </section>

    {{-- CTA --}}
    <section class="py-16 text-center lg:py-24">
        <div class="container-shop max-w-2xl">
            <h2 class="section-title">Ready to meet your skin's new favourites?</h2>
            <p class="mt-4 text-ink-500">Start with our bestsellers — loved by half a million customers across India.</p>
            <div class="mt-8 flex flex-wrap justify-center gap-4">
                <a href="{{ route('shop') }}" class="btn-primary">Shop Bestsellers</a>
                <a href="{{ route('contact') }}" class="btn-outline">Talk to Us</a>
            </div>
        </div>
    </section>

@endsection