@extends('layouts.app')

@section('title', 'Farm-Fresh Natural Skincare & Personal Care')

@section('content')

    {{-- Hero slider --}}
    <section class="relative w-full overflow-hidden" style="position: relative; width: 100%; height: calc(100vw / 2.56); min-height: 380px; max-height: 675px;" data-hero-slider aria-label="Featured offers">
        @php
            $slides = [
                [
                    'eyebrow' => 'Farm-Fresh Skincare',
                    'title' => 'Pure Saffron & Goat Milk Glow',
                    'text' => 'Handcrafted formulations infused with Kashmiri Saffron and farm-fresh Goat Milk for 24-hour hydration and radiant skin.',
                    'cta' => 'Shop Saffron Collection',
                    'url' => route('shop', 'moisturisers'),
                    'image' => 'images/hero-banner-1.png'
                ],
                [
                    'eyebrow' => 'Botanical Haircare',
                    'title' => 'Say Goodbye To Hairfall',
                    'text' => '9 cold-pressed herbal oils blended to nourish your roots, strengthen hair shafts, and promote lush growth.',
                    'cta' => 'Shop Herbal Shampoo',
                    'url' => route('shop', 'shampoos'),
                    'image' => 'images/hero-banner-2.png'
                ],
                [
                    'eyebrow' => 'Artisanal Perfumes',
                    'title' => 'Luxury In Every Drop',
                    'text' => 'Captivating French Jasmine and White Musk notes crafted for long-lasting 18-hour elegance.',
                    'cta' => 'Explore Luxury Fragrances',
                    'url' => route('shop', 'perfumes'),
                    'image' => 'images/hero-banner-3.png'
                ],
            ];
        @endphp

        @foreach ($slides as $i => $slide)
            <div class="absolute inset-0 w-full h-full transition-opacity duration-700 ease-in-out" data-slide style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: {{ $i === 0 ? '1' : '0' }}; pointer-events: {{ $i === 0 ? 'auto' : 'none' }}; z-index: {{ $i === 0 ? '10' : '0' }};">
                <img src="{{ asset($slide['image']) }}" alt="{{ $slide['title'] }}" style="position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center center;" @if($i > 0) loading="lazy" @endif>
                <div class="absolute inset-0" style="position: absolute; inset: 0; background: linear-gradient(to right, rgba(15,20,18,0.2), transparent 60%);"></div>
                
                <div class="container-shop relative z-20 flex h-full items-center py-10 sm:py-16" style="position: relative; z-index: 20; height: 100%; display: flex; align-items: center;">
                    <div class="max-w-md lg:max-w-lg p-6 sm:p-8 lg:p-10 rounded-2xl border border-white/60 shadow-2xl" style="background-color: rgba(255, 255, 255, 0.88); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); max-width: 520px; padding: 32px; border-radius: 16px;">
                        <p class="mb-2 text-xs sm:text-sm font-semibold tracking-widest text-moss-800 uppercase" style="color: #186297; font-weight: 700; letter-spacing: 1.5px; font-size: 12px; margin-bottom: 8px;">{{ $slide['eyebrow'] }}</p>
                        <h2 class="font-serif text-2xl sm:text-4xl lg:text-5xl font-semibold leading-tight text-ink-900" style="font-family: 'Playfair Display', serif; font-size: 36px; color: #0f1412; font-weight: 600; line-height: 1.2;">{{ $slide['title'] }}</h2>
                        <p class="mt-3 text-xs sm:text-sm lg:text-base leading-relaxed text-ink-700" style="margin-top: 12px; color: #334155; line-height: 1.6; font-size: 14px;">{{ $slide['text'] }}</p>
                        <a href="{{ $slide['url'] }}" class="btn-primary mt-6 inline-flex shadow-md hover:shadow-xl transition-all" style="margin-top: 20px; display: inline-flex; background-color: #186297; color: white; padding: 12px 24px; border-radius: 8px; font-weight: 600; text-decoration: none;">{{ $slide['cta'] }}</a>
                    </div>
                </div>
            </div>
        @endforeach

        <div style="position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 30; display: flex; gap: 8px; align-items: center;">
            @foreach ($slides as $i => $slide)
                <button type="button" class="cursor-pointer transition-all duration-300" data-slide-dot aria-label="Go to slide {{ $i + 1 }}" style="height: 10px; width: {{ $i === 0 ? '28px' : '10px' }}; border-radius: 5px; background-color: {{ $i === 0 ? '#186297' : 'rgba(24, 98, 151, 0.4)' }}; border: none; cursor: pointer;"></button>
            @endforeach
        </div>
    </section>

    {{-- Value Pillars --}}
    <section class="border-b border-cream-200 bg-white">
        <div class="container-shop grid grid-cols-2 gap-6 py-8 sm:grid-cols-4">
            @foreach ([
                ['icon' => 'divine-assets/THE FUTURE OF PERSONAL CARE IS HERE/Transparency.svg', 'title' => '100% Transparency', 'text' => 'Full ingredient disclosure'],
                ['icon' => 'divine-assets/THE FUTURE OF PERSONAL CARE IS HERE/Only the best.svg', 'title' => 'Only The Best', 'text' => 'Highest grade botanicals'],
                ['icon' => 'divine-assets/THE FUTURE OF PERSONAL CARE IS HERE/Efficiency.svg', 'title' => 'Clinically Proven', 'text' => 'Visible results in 4 weeks'],
                ['icon' => 'divine-assets/THE FUTURE OF PERSONAL CARE IS HERE/Affordable.svg', 'title' => 'Fair Pricing', 'text' => 'Luxury care made accessible'],
            ] as $item)
                <div class="flex items-center gap-3.5">
                    <span class="flex h-12 w-12 shrink-0 items-center justify-center rounded-full bg-moss-50">
                        <img src="{{ asset($item['icon']) }}" alt="" class="h-6 w-6">
                    </span>
                    <div>
                        <p class="text-sm font-semibold text-ink-900">{{ $item['title'] }}</p>
                        <p class="text-xs text-ink-500">{{ $item['text'] }}</p>
                    </div>
                </div>
            @endforeach
        </div>
    </section>

    {{-- Bestsellers --}}
    <section class="py-16 lg:py-20">
        <div class="container-shop">
            <x-section-heading eyebrow="Customer favourites" title="Our Bestsellers" :link="route('shop')" />
            <div class="grid grid-cols-2 gap-x-5 gap-y-10 md:grid-cols-3 xl:grid-cols-4">
                @foreach ($featuredProducts as $product)
                    <x-product-card :product="$product" />
                @endforeach
            </div>
        </div>
    </section>

    {{-- Shop By Categories (Our Collections) --}}
    <section class="bg-cream-50 py-16 lg:py-20">
        <div class="container-shop">
            <x-section-heading eyebrow="Explore Collections" title="Shop by Category" center class="justify-center" />
            <div class="grid grid-cols-2 gap-6 sm:grid-cols-3 lg:grid-cols-6">
                @foreach ($categories as $category)
                    <a href="{{ route('shop', $category->slug) }}" class="group block text-center bg-white p-4 rounded-xl border border-cream-200 shadow-xs hover:shadow-soft transition-all">
                        <div class="overflow-hidden bg-cream-100 rounded-lg aspect-square mb-3">
                            <img src="{{ asset($category->image) }}" alt="{{ $category->name }}"
                                class="h-full w-full object-cover transition-transform duration-500 group-hover:scale-105" loading="lazy">
                        </div>
                        <p class="text-xs font-bold tracking-[0.12em] text-ink-900 uppercase transition-colors group-hover:text-moss-600">{{ $category->name }}</p>
                    </a>
                @endforeach
            </div>
        </div>
    </section>

    {{-- Shop By Key Ingredients --}}
    <section class="py-16 bg-white">
        <div class="container-shop">
            <x-section-heading eyebrow="Pure Botanicals" title="Shop by Key Ingredients" center class="justify-center" />
            <div class="grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-6">
                @foreach ([
                    ['name' => 'Kashmiri Saffron', 'image' => 'divine-assets/SHOP BY KEY INGREDIENTS/Saffron.png'],
                    ['name' => 'Fresh Goat Milk', 'image' => 'divine-assets/SHOP BY KEY INGREDIENTS/Goat Milk.png'],
                    ['name' => 'Organic Hibiscus', 'image' => 'divine-assets/SHOP BY KEY INGREDIENTS/Hibiscus.png'],
                    ['name' => 'Wild Amla', 'image' => 'divine-assets/SHOP BY KEY INGREDIENTS/Amla.png'],
                    ['name' => 'Raw Turmeric', 'image' => 'divine-assets/SHOP BY KEY INGREDIENTS/Turmeric.png'],
                    ['name' => 'Zesty Citrus', 'image' => 'divine-assets/SHOP BY KEY INGREDIENTS/Citrus.png'],
                ] as $ing)
                    <a href="{{ route('shop') }}" class="group text-center">
                        <div class="overflow-hidden rounded-full aspect-square bg-cream-100 border-2 border-moss-200 p-2 mx-auto w-28 sm:w-32 group-hover:border-moss-600 transition-all">
                            <img src="{{ asset($ing['image']) }}" alt="{{ $ing['name'] }}" class="h-full w-full object-cover rounded-full group-hover:scale-110 transition-transform">
                        </div>
                        <p class="mt-3 text-xs font-semibold text-ink-900 group-hover:text-moss-600">{{ $ing['name'] }}</p>
                    </a>
                @endforeach
            </div>
        </div>
    </section>

    {{-- Meet Our Founder & Brand Vision --}}
    <section style="background: linear-gradient(135deg, #0d222e 0%, #186297 100%); color: white; padding: 72px 0;">
        <div class="container-shop" style="display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center;">
            <div style="position: relative; border-radius: 20px; overflow: hidden; box-shadow: 0 20px 40px rgba(0,0,0,0.3); border: 2px solid rgba(255,255,255,0.15);">
                <img src="{{ asset('divine-assets/Our Founder/Our Founder.png') }}" alt="Founder of Divine Drops" style="width: 100%; height: 100%; max-height: 480px; object-fit: cover; display: block;">
            </div>
            <div>
                <span style="display: inline-block; background: rgba(255,255,255,0.15); color: #fef08a; font-size: 11px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; padding: 4px 14px; border-radius: 20px; margin-bottom: 16px; border: 1px solid rgba(254, 240, 138, 0.3);">
                    OUR STORY & VISION
                </span>
                <h2 class="font-serif" style="font-size: 34px; font-weight: 700; color: #ffffff; margin: 0 0 16px 0; line-height: 1.25;">
                    Crafted With Pure Love & Scientific Precision
                </h2>
                <div style="position: relative; padding-left: 20px; border-left: 3px solid #fef08a; margin-bottom: 20px;">
                    <p style="font-size: 16px; line-height: 1.7; color: #f1f5f9; font-style: italic; margin: 0;">
                        &ldquo;Divine Drops was born out of a passion to reclaim the purity of natural Indian skincare. We combine centuries-old botanical wisdom — farm-fresh goat milk, Kashmiri saffron, and cold-pressed herbal oils — with modern dermatological science.&rdquo;
                    </p>
                </div>
                <div style="font-family: 'Playfair Display', serif; font-size: 16px; font-weight: 600; color: #fef08a; margin-bottom: 28px;">
                    — Founder, Divine Drops Luxury Skincare
                </div>
                <a href="{{ route('about') }}" class="btn-primary" style="display: inline-flex; align-items: center; gap: 8px; background: #ffffff; color: #186297; font-weight: 700; border-radius: 50px; padding: 12px 28px; text-decoration: none; box-shadow: 0 4px 14px rgba(0,0,0,0.15); transition: all 0.2s;">
                    Discover Our Philosophy →
                </a>
            </div>
        </div>
    </section>

    {{-- Real People Real Stories (Customer Testimonials & Photos) --}}
    <section class="py-16 lg:py-20 bg-cream-50">
        <div class="container-shop">
            <x-section-heading eyebrow="Verified Customer Transformations" title="Real People, Real Stories" center class="justify-center" />
            <div class="grid gap-8 md:grid-cols-3">
                @foreach ([
                    ['name' => 'Ananya R.', 'image' => 'divine-assets/REAL PEOPLE REAL STORIES/1st Image/1.png', 'text' => 'The Saffron Moisturizer is hands down the best cream I have ever used. My skin looks visibly brighter and super dewy!'],
                    ['name' => 'Priyanka M.', 'image' => 'divine-assets/REAL PEOPLE REAL STORIES/2nd Image/2.png', 'text' => 'Herbal Shampoo dramatically reduced my hairfall within 3 weeks. Loving the natural botanical shine!'],
                    ['name' => 'Divya S.', 'image' => 'divine-assets/REAL PEOPLE REAL STORIES/3rd Image/3.png', 'text' => 'The Rosy Facial Cleanser feels so luxurious and gentle. Doesn’t strip my skin barrier at all.'],
                ] as $r)
                    <div class="bg-white border border-cream-200 rounded-2xl overflow-hidden shadow-soft">
                        <img src="{{ asset($r['image']) }}" alt="{{ $r['name'] }}" class="w-full aspect-[4/3] object-cover">
                        <div class="p-6">
                            <x-stars :rating="5" />
                            <blockquote class="mt-3 text-sm text-ink-700 leading-relaxed">&ldquo;{{ $r['text'] }}&rdquo;</blockquote>
                            <p class="mt-4 font-semibold text-sm text-ink-900">{{ $r['name'] }} <span class="text-xs font-normal text-moss-600">&check; Verified Customer</span></p>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </section>

    {{-- Journal preview --}}
    <section class="py-16 lg:py-20">
        <div class="container-shop">
            <x-section-heading eyebrow="From the journal" title="Skincare, Simplified" :link="route('blog')" linkText="Read All" />
            <div class="grid gap-8 md:grid-cols-3">
                @foreach ($posts as $post)
                    <article class="group">
                        <a href="{{ route('blog.show', $post->slug) }}" class="block overflow-hidden rounded-xl">
                            <img src="{{ asset($post->image) }}" alt="{{ $post->title }}" width="1200" height="800"
                                class="aspect-[3/2] w-full object-cover transition-transform duration-500 group-hover:scale-105" loading="lazy">
                        </a>
                        <p class="mt-4 text-[11px] font-semibold tracking-[0.2em] text-terra-500 uppercase">{{ $post->category }} &middot; {{ $post->read_time }}</p>
                        <h3 class="mt-2 font-serif text-lg font-medium text-ink-900">
                            <a href="{{ route('blog.show', $post->slug) }}" class="transition-colors hover:text-moss-600">{{ $post->title }}</a>
                        </h3>
                        <p class="mt-2 line-clamp-2 text-sm leading-relaxed text-ink-500">{{ $post->excerpt }}</p>
                    </article>
                @endforeach
            </div>
        </div>
    </section>

@endsection