@extends('layouts.app')

@section('title', 'Crosby Farm and Investments')
@section('meta_description', 'A large-scale commercial agricultural and investment enterprise dedicated to sustainable farming, crop production, livestock rearing, dairy farming, and agricultural wealth creation across the United States.')

@push('styles')
<style>
    .home-hero-slide {
        position: absolute;
        inset: 0;
        opacity: 0;
        transition: opacity 700ms ease;
    }

    .home-hero-slide.is-active {
        opacity: 1;
    }

    .home-hero-dot {
        height: 0.7rem;
        width: 0.7rem;
        border-radius: 999px;
        border: 1px solid rgba(4, 83, 26, 0.25);
        background: rgba(255, 255, 255, 0.72);
        transition: background 180ms ease, transform 180ms ease;
    }

    .home-hero-dot.is-active {
        background: #128a2e;
        transform: scale(1.18);
    }

    .home-hero-copy {
        text-shadow: 0 3px 18px rgba(0, 0, 0, 0.62);
    }

    .home-hero-actions {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.65rem;
        max-width: 43rem;
    }

    .home-hero-action {
        min-height: 3.75rem;
        justify-content: center;
        text-align: center;
        line-height: 1.15;
    }

    @media (max-width: 640px) {
        .home-hero-actions {
            gap: 0.45rem;
        }

        .home-hero-action {
            min-height: 4.35rem;
            padding: 0.7rem 0.35rem;
            font-size: 0.72rem;
            flex-direction: column;
        }

        .home-hero-action svg {
            width: 1rem;
            height: 1rem;
        }
    }

</style>
@endpush

@section('content')
@php
    $homeVideo = $homeVideo ?? [
        'title' => 'Milking Operations',
        'description' => 'Watch a glimpse of our dairy process, where careful animal handling and consistent milking routines help us produce quality milk for families and farm partners.',
        'url' => asset('videos/vd.mp4') . '?v=' . (file_exists(public_path('videos/vd.mp4')) ? filemtime(public_path('videos/vd.mp4')) : time()),
    ];
@endphp

<!-- Hero Section -->
<section class="relative min-h-[620px] flex items-center overflow-hidden bg-cream">
    @php
        $heroSlides = [
            [
                'image' => asset('images/banner.jfif'),
                'alt' => 'Crosby Farm cattle',
            ],
            [
                'image' => asset('images/farm/cattle-barn-herd.jpeg'),
                'alt' => 'Crosby Farm cattle barn',
            ],
            [
                'image' => asset('images/farm/hay-bales-equipment.jpeg'),
                'alt' => 'Crosby Farm hay and equipment',
            ],
            [
                'image' => asset('images/farm/cattle-pasture-lane.jpeg'),
                'alt' => 'Crosby Farm cattle in pasture',
            ],
            [
                'image' => asset('images/farm/crop-field-equipment.jpeg'),
                'alt' => 'Crosby Farm crop field equipment',
            ],
        ];
    @endphp

    <!-- Background Image -->
    <div class="absolute inset-0" data-hero-carousel>
        @foreach ($heroSlides as $slide)
            <div class="home-hero-slide {{ $loop->first ? 'is-active' : '' }}" data-hero-slide>
                <img src="{{ $slide['image'] }}" alt="{{ $slide['alt'] }}" class="w-full h-full object-cover">
            </div>
        @endforeach
    </div>

    <div class="absolute inset-0 z-10" style="background: linear-gradient(90deg, rgba(3, 28, 14, 0.9) 0%, rgba(13, 40, 24, 0.66) 52%, rgba(0, 0, 0, 0.3) 100%);"></div>
    
    <!-- Content -->
    <div class="relative z-20 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20">
        <div class="max-w-2xl home-hero-copy">
            <div class="inline-flex items-center gap-2 bg-white/88 backdrop-blur-sm px-4 py-2 rounded-full text-primary-700 border border-primary-200 shadow-sm text-sm font-semibold mb-6 animate-fade-in-down">
                <svg class="w-4 h-4 text-primary-500" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/></svg>
                Welcome to Crosby Farm and Investments
            </div>
            
            <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold text-white font-serif leading-tight mb-6 animate-fade-in-up">
                Feeding Tomorrow, Building Wealth for <span class="text-white">Generations</span>
            </h1>
            
            <p class="text-lg font-semibold text-white mb-8 leading-relaxed animate-fade-in-up max-w-xl" style="animation-delay: 0.2s">
                A large-scale commercial agricultural and investment enterprise dedicated to sustainable farming, crop production, livestock rearing, dairy farming, and agricultural wealth creation across the United States.
            </p>
            
            <div class="home-hero-actions animate-fade-in-up" style="animation-delay: 0.4s">
                <a href="{{ url('/about') }}" class="home-hero-action farm-button inline-flex items-center gap-2 bg-primary-500 hover:bg-primary-600 text-white px-6 py-3 rounded-lg font-semibold transition-all duration-300 hover:-translate-y-0.5">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                    Explore Our Farm
                </a>
                <a href="{{ url('/investment') }}" class="home-hero-action inline-flex items-center gap-2 bg-white/92 hover:bg-white text-primary-700 px-6 py-3 rounded-lg font-semibold border border-primary-300 transition-all duration-300 hover:shadow-lg hover:-translate-y-0.5">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg>
                    Invest With Us
                </a>
                <a href="{{ url('/dairy') }}" class="home-hero-action inline-flex items-center gap-2 bg-white/92 hover:bg-white text-primary-700 px-6 py-3 rounded-lg font-semibold border border-primary-300 transition-all duration-300 hover:shadow-lg hover:-translate-y-0.5">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg>
                    Learn About Dairy Farming
                </a>
            </div>
        </div>
    </div>

    <div class="absolute bottom-6 left-4 z-20 flex items-center gap-3 sm:left-6 lg:left-1/2 lg:-translate-x-1/2">
        @foreach ($heroSlides as $slide)
            <button type="button" class="home-hero-dot {{ $loop->first ? 'is-active' : '' }}" aria-label="Show slide {{ $loop->iteration }}" data-hero-dot data-slide-index="{{ $loop->index }}"></button>
        @endforeach
    </div>
</section>

<!-- Welcome Section -->
<section class="py-20 bg-white">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="grid lg:grid-cols-2 gap-12 items-center">
            <!-- Image -->
            <div class="relative animate-on-scroll">
                <div class="rounded-lg overflow-hidden shadow-xl shadow-primary-900/10 ring-1 ring-primary-100">
                    <img src="{{ asset('images/farm/hay-bales-equipment.jpeg') }}" alt="Crosby Farm hay and field equipment" class="w-full h-[400px] object-cover">
                </div>
                <div class="hidden sm:block absolute -bottom-6 -right-6 w-48 h-48 bg-primary-100 rounded-lg -z-10"></div>
            </div>
            
            <!-- Content -->
            <div class="animate-on-scroll">
                <div class="inline-flex items-center gap-2 text-primary-500 font-semibold text-sm mb-4">
                    <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/></svg>
                    Where Agriculture Meets Investment Opportunity.
                </div>
                
                <h2 class="text-3xl md:text-4xl font-bold text-primary-600 font-serif mb-6">Welcome to Crosby Farm and Investments</h2>
                
                <p class="text-gray-600 leading-relaxed mb-8">
                    Founded by Andrea Crosby, Crosby Farm and Investments combines advanced farming technology, responsible agricultural practices, and investment-driven operations to create a profitable and sustainable agricultural ecosystem across crop cultivation, dairy production, livestock management, and agricultural investment programs.
                </p>
                
                <!-- Specialties -->
                <div class="grid grid-cols-2 sm:grid-cols-3 gap-4 mb-8">
                    <div class="flex items-center gap-3 p-3 bg-primary-50 rounded-lg border border-primary-100">
                        <div class="w-10 h-10 bg-white rounded-full flex items-center justify-center flex-shrink-0 shadow-sm">
                            <svg class="w-5 h-5 text-primary-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg>
                        </div>
                        <span class="text-sm font-medium text-primary-700">Dairy Cow Farming</span>
                    </div>
                    <div class="flex items-center gap-3 p-3 bg-primary-50 rounded-lg border border-primary-100">
                        <div class="w-10 h-10 bg-white rounded-full flex items-center justify-center flex-shrink-0 shadow-sm">
                            <svg class="w-5 h-5 text-primary-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"/></svg>
                        </div>
                        <span class="text-sm font-medium text-primary-700">Goat Rearing</span>
                    </div>
                    <div class="flex items-center gap-3 p-3 bg-primary-50 rounded-lg border border-primary-100">
                        <div class="w-10 h-10 bg-white rounded-full flex items-center justify-center flex-shrink-0 shadow-sm">
                            <svg class="w-5 h-5 text-primary-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"/></svg>
                        </div>
                        <span class="text-sm font-medium text-primary-700">Dog Breeding & Care</span>
                    </div>
                    <div class="flex items-center gap-3 p-3 bg-primary-50 rounded-lg border border-primary-100">
                        <div class="w-10 h-10 bg-white rounded-full flex items-center justify-center flex-shrink-0 shadow-sm">
                            <svg class="w-5 h-5 text-primary-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z"/></svg>
                        </div>
                        <span class="text-sm font-medium text-primary-700">Commercial Crop Production</span>
                    </div>
                    <div class="flex items-center gap-3 p-3 bg-primary-50 rounded-lg border border-primary-100">
                        <div class="w-10 h-10 bg-white rounded-full flex items-center justify-center flex-shrink-0 shadow-sm">
                            <svg class="w-5 h-5 text-primary-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                        </div>
                        <span class="text-sm font-medium text-primary-700">Crop Production</span>
                    </div>
                    <div class="flex items-center gap-3 p-3 bg-primary-50 rounded-lg border border-primary-100">
                        <div class="w-10 h-10 bg-white rounded-full flex items-center justify-center flex-shrink-0 shadow-sm">
                            <svg class="w-5 h-5 text-primary-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg>
                        </div>
                        <span class="text-sm font-medium text-primary-700">Agricultural Investments</span>
                    </div>
                </div>
                
                <!-- Mission -->
                <div class="farm-soft-panel rounded-lg p-6 flex items-start gap-4 shadow-sm">
                    <div class="w-12 h-12 bg-primary-100 rounded-full flex items-center justify-center flex-shrink-0">
                        <svg class="w-6 h-6 text-primary-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                    </div>
                    <div>
                        <h3 class="font-semibold text-primary-700 mb-1">Our Mission is Simple:</h3>
                        <p class="text-gray-600 text-sm">To provide high-quality agricultural products while creating profitable investment opportunities that support food security, economic development, and long-term financial growth.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Milking Section -->
<section class="py-20 bg-primary-50 border-y border-primary-100" data-milking-section>
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="grid lg:grid-cols-[0.9fr_1.1fr] gap-12 items-center">
            <div class="animate-on-scroll">
                <div class="inline-flex items-center gap-2 text-primary-500 font-semibold text-sm mb-4">
                    <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/></svg>
                    Fresh Dairy Operations
                </div>
                <h2 class="text-3xl md:text-4xl font-bold text-primary-600 font-serif mb-6">{{ $homeVideo['title'] ?? 'Milking' }}</h2>
                <p class="text-gray-600 leading-relaxed mb-6">
                    {{ $homeVideo['description'] ?? 'Watch a glimpse of our dairy process, where careful animal handling and consistent milking routines help us produce quality milk for families and farm partners.' }}
                </p>
                <a href="{{ url('/dairy') }}" class="inline-flex items-center gap-2 bg-primary-500 hover:bg-primary-600 text-white px-6 py-3 rounded-lg font-semibold transition-all duration-300 hover:-translate-y-0.5">
                    Learn About Dairy Farming
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg>
                </a>
            </div>

            <div class="animate-on-scroll">
                <div class="rounded-lg bg-white p-3 shadow-xl shadow-primary-900/10 ring-1 ring-primary-100" style="max-width: 560px; margin-left: auto; margin-right: auto;">
                    <div class="rounded-md overflow-hidden bg-black ring-1 ring-primary-900/10" style="height: 315px;">
                        <video class="w-full object-contain" style="height: 315px; max-height: 315px;" controls muted playsinline preload="auto" data-milking-video>
                            <source src="{{ $homeVideo['url'] ?? asset('videos/vd.mp4') }}" type="video/mp4">
                            Your browser does not support the video tag.
                        </video>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Services Section -->
<section class="py-20 bg-gradient-to-b from-gray-50 to-white">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="section-title animate-on-scroll">
            <div class="inline-flex items-center gap-2 text-primary-500 font-semibold text-sm mb-4">
                <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/></svg>
                What We Do
            </div>
            <h2 class="text-3xl md:text-4xl font-bold text-primary-600 font-serif">Our Farming & Investment Services</h2>
        </div>
        
        <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
            <!-- Dairy Production -->
            <div class="farm-card bg-white rounded-lg overflow-hidden transition-all duration-300 hover:-translate-y-2 animate-on-scroll">
                <div class="h-48 overflow-hidden">
                    <img src="{{ asset('images/farm/milking-equipment.jpeg') }}" alt="Dairy milking equipment" class="w-full h-full object-cover hover:scale-110 transition-transform duration-500">
                </div>
                <div class="p-6">
                    <div class="w-12 h-12 bg-primary-500 rounded-full flex items-center justify-center -mt-12 mb-4 relative z-10 shadow-lg">
                        <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z"/></svg>
                    </div>
                    <h3 class="text-lg font-bold text-primary-700 mb-2">Dairy Production</h3>
                    <p class="text-gray-600 text-sm mb-4">Premium-quality dairy production through modern dairy systems and sustainable animal care.</p>
                    <a href="{{ url('/dairy') }}" class="inline-flex items-center gap-1 text-primary-500 hover:text-primary-600 font-semibold text-sm transition-colors">
                        Learn More
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg>
                    </a>
                </div>
            </div>
            
            <!-- Livestock Rearing -->
            <div class="farm-card bg-white rounded-lg overflow-hidden transition-all duration-300 hover:-translate-y-2 animate-on-scroll" style="animation-delay: 0.1s">
                <div class="h-48 overflow-hidden">
                    <img src="{{ asset('images/farm/cattle-pasture-lane.jpeg') }}" alt="Crosby Farm livestock pasture" class="w-full h-full object-cover hover:scale-110 transition-transform duration-500">
                </div>
                <div class="p-6">
                    <div class="w-12 h-12 bg-primary-500 rounded-full flex items-center justify-center -mt-12 mb-4 relative z-10 shadow-lg">
                        <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"/></svg>
                    </div>
                    <h3 class="text-lg font-bold text-primary-700 mb-2">Livestock Rearing</h3>
                    <p class="text-gray-600 text-sm mb-4">Professional management of cattle, goats, sheep, poultry, farm dogs, and other agricultural animals.</p>
                    <a href="{{ url('/livestock') }}" class="inline-flex items-center gap-1 text-primary-500 hover:text-primary-600 font-semibold text-sm transition-colors">
                        Learn More
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg>
                    </a>
                </div>
            </div>
            
            <!-- Crop Farming -->
            <div class="farm-card bg-white rounded-lg overflow-hidden transition-all duration-300 hover:-translate-y-2 animate-on-scroll" style="animation-delay: 0.2s">
                <div class="h-48 overflow-hidden">
                    <img src="{{ asset('images/farm/crop-field-equipment.jpeg') }}" alt="Crosby Farm crop field operations" class="w-full h-full object-cover hover:scale-110 transition-transform duration-500">
                </div>
                <div class="p-6">
                    <div class="w-12 h-12 bg-primary-500 rounded-full flex items-center justify-center -mt-12 mb-4 relative z-10 shadow-lg">
                        <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z"/></svg>
                    </div>
                    <h3 class="text-lg font-bold text-primary-700 mb-2">Crop Farming</h3>
                    <p class="text-gray-600 text-sm mb-4">Large-scale cultivation of corn, wheat, soybeans, hay, vegetables, fruits, and animal feed crops.</p>
                    <a href="{{ url('/crops') }}" class="inline-flex items-center gap-1 text-primary-500 hover:text-primary-600 font-semibold text-sm transition-colors">
                        Learn More
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg>
                    </a>
                </div>
            </div>
            
            <!-- Farm Investments -->
            <div class="farm-card bg-white rounded-lg overflow-hidden transition-all duration-300 hover:-translate-y-2 animate-on-scroll" style="animation-delay: 0.3s">
                <div class="h-48 overflow-hidden">
                    <img src="{{ asset('images/farm/john-deere-combine.jpeg') }}" alt="Farm investment equipment" class="w-full h-full object-cover hover:scale-110 transition-transform duration-500">
                </div>
                <div class="p-6">
                    <div class="w-12 h-12 bg-primary-500 rounded-full flex items-center justify-center -mt-12 mb-4 relative z-10 shadow-lg">
                        <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg>
                    </div>
                    <h3 class="text-lg font-bold text-primary-700 mb-2">Farm Investments</h3>
                    <p class="text-gray-600 text-sm mb-4">Agricultural investment programs for long-term planning, passive income, and retirement-focused investors.</p>
                    <a href="{{ url('/investment') }}" class="inline-flex items-center gap-1 text-primary-500 hover:text-primary-600 font-semibold text-sm transition-colors">
                        Learn More
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg>
                    </a>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Why Choose Us -->
<section class="py-16 bg-primary-50 border-y border-primary-100">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="section-title animate-on-scroll">
            <h2 class="text-3xl md:text-4xl font-bold text-primary-600 font-serif">Why Choose Crosby Farm and Investments?</h2>
        </div>
        
        <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-6">
            <div class="text-center animate-on-scroll">
                <div class="w-16 h-16 bg-primary-100 rounded-full flex items-center justify-center mx-auto mb-3">
                    <svg class="w-8 h-8 text-primary-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
                </div>
                <h4 class="text-sm font-semibold text-primary-700">Large-Scale<br>Commercial Farming</h4>
            </div>
            <div class="text-center animate-on-scroll" style="animation-delay: 0.1s">
                <div class="w-16 h-16 bg-primary-100 rounded-full flex items-center justify-center mx-auto mb-3">
                    <svg class="w-8 h-8 text-primary-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"/></svg>
                </div>
                <h4 class="text-sm font-semibold text-primary-700">Reliable Dairy &<br>Livestock Operations</h4>
            </div>
            <div class="text-center animate-on-scroll" style="animation-delay: 0.2s">
                <div class="w-16 h-16 bg-primary-100 rounded-full flex items-center justify-center mx-auto mb-3">
                    <svg class="w-8 h-8 text-primary-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z"/></svg>
                </div>
                <h4 class="text-sm font-semibold text-primary-700">Modern Sustainable<br>Farming Systems</h4>
            </div>
            <div class="text-center animate-on-scroll" style="animation-delay: 0.3s">
                <div class="w-16 h-16 bg-primary-100 rounded-full flex items-center justify-center mx-auto mb-3">
                    <svg class="w-8 h-8 text-primary-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg>
                </div>
                <h4 class="text-sm font-semibold text-primary-700">Diversified Income<br>Streams</h4>
            </div>
            <div class="text-center animate-on-scroll" style="animation-delay: 0.4s">
                <div class="w-16 h-16 bg-primary-100 rounded-full flex items-center justify-center mx-auto mb-3">
                    <svg class="w-8 h-8 text-primary-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z"/></svg>
                </div>
                <h4 class="text-sm font-semibold text-primary-700">Investment-Friendly<br>Structure</h4>
            </div>
            <div class="text-center animate-on-scroll" style="animation-delay: 0.5s">
                <div class="w-16 h-16 bg-primary-100 rounded-full flex items-center justify-center mx-auto mb-3">
                    <svg class="w-8 h-8 text-primary-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg>
                </div>
                <h4 class="text-sm font-semibold text-primary-700">Transparent Operational<br>Management</h4>
            </div>
        </div>
    </div>
</section>

<!-- Stats Section -->
<section class="relative py-20 overflow-hidden">
    <div class="absolute inset-0">
        <img src="{{ asset('images/farm/hay-bales-equipment.jpeg') }}" alt="Crosby Farm hay equipment" class="w-full h-full object-cover">
        <div class="absolute inset-0 bg-gradient-to-r from-primary-900/94 via-primary-700/88 to-primary-600/84"></div>
    </div>
    
    <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 sm:gap-8">
            <div class="text-center text-white animate-on-scroll">
                <div class="flex items-center justify-center gap-3 mb-2">
                    <svg class="w-10 h-10 text-gold-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                    <div class="text-left">
                        <div class="text-4xl font-bold" data-counter>5,000+</div>
                        <div class="text-primary-200 text-sm">Acres Managed</div>
                    </div>
                </div>
            </div>
            <div class="text-center text-white animate-on-scroll" style="animation-delay: 0.1s">
                <div class="flex items-center justify-center gap-3 mb-2">
                    <svg class="w-10 h-10 text-gold-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg>
                    <div class="text-left">
                        <div class="text-4xl font-bold" data-counter>2,000+</div>
                        <div class="text-primary-200 text-sm">Dairy Cows</div>
                    </div>
                </div>
            </div>
            <div class="text-center text-white animate-on-scroll" style="animation-delay: 0.2s">
                <div class="flex items-center justify-center gap-3 mb-2">
                    <svg class="w-10 h-10 text-gold-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z"/></svg>
                    <div class="text-left">
                        <div class="text-4xl font-bold" data-counter>20+</div>
                        <div class="text-primary-200 text-sm">Years of Farming Experience</div>
                    </div>
                </div>
            </div>
            <div class="text-center text-white animate-on-scroll" style="animation-delay: 0.3s">
                <div class="flex flex-col sm:flex-row items-center justify-center gap-3 mb-2">
                    <svg class="w-10 h-10 text-gold-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z"/></svg>
                    <div class="text-center sm:text-left">
                        <div class="text-3xl sm:text-4xl font-bold">Thousands</div>
                        <div class="text-primary-200 text-sm">of Gallons of Milk Produced Weekly</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Testimonials & Newsletter -->
<section class="py-20 bg-white">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="grid lg:grid-cols-2 gap-12">
            <!-- Testimonials -->
            <div>
                <div class="inline-flex items-center gap-2 text-primary-500 font-semibold text-sm mb-4">
                    <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/></svg>
                    What Our Partners & Investors Say
                </div>
                
                <div class="farm-card relative bg-white rounded-lg p-8">
                    <div id="testimonial-slider">
                        <div class="testimonial-slide">
                            <svg class="w-10 h-10 text-primary-200 mb-4" fill="currentColor" viewBox="0 0 24 24"><path d="M14.017 21v-7.391c0-5.704 3.731-9.57 8.983-10.609l.995 2.151c-2.432.917-3.995 3.638-3.995 5.849h4v10h-9.983zm-14.017 0v-7.391c0-5.704 3.748-9.57 9-10.609l.996 2.151c-2.433.917-3.996 3.638-3.996 5.849h3.983v10h-9.983z"/></svg>
                            <p class="text-gray-700 text-lg mb-6 leading-relaxed">"Crosby Farm and Investments helped me participate in agriculture while planning for long-term financial security."</p>
                            <div class="flex items-center gap-4">
                                <div class="flex gap-1">
                                    <svg class="w-5 h-5 text-gold-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
                                    <svg class="w-5 h-5 text-gold-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
                                    <svg class="w-5 h-5 text-gold-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
                                    <svg class="w-5 h-5 text-gold-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
                                    <svg class="w-5 h-5 text-gold-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
                                </div>
                                <span class="text-sm text-gray-500">- Retired Investor</span>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Slider Controls -->
                    <div class="flex items-center gap-4 mt-6">
                        <button id="prev-testimonial" class="w-10 h-10 bg-primary-500 hover:bg-primary-600 text-white rounded-full flex items-center justify-center transition-colors">
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/></svg>
                        </button>
                        <div class="flex gap-2">
                            <span class="w-3 h-3 bg-primary-500 rounded-full"></span>
                            <span class="w-3 h-3 bg-gray-300 rounded-full"></span>
                            <span class="w-3 h-3 bg-gray-300 rounded-full"></span>
                        </div>
                        <button id="next-testimonial" class="w-10 h-10 bg-primary-500 hover:bg-primary-600 text-white rounded-full flex items-center justify-center transition-colors">
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
                        </button>
                    </div>
                </div>
            </div>
            
            <!-- Newsletter -->
            <div>
                <h3 class="text-2xl font-bold text-primary-600 font-serif mb-4">Stay Connected with Our Farm</h3>
                <p class="text-gray-600 mb-6">Subscribe to get the latest farm updates, dairy insights, and investment opportunities.</p>
                
                <form class="flex flex-col sm:flex-row gap-3 mb-8">
                    <input type="email" placeholder="Enter your email address" class="flex-1 min-w-0 px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500 outline-none transition-all">
                    <button type="submit" class="bg-primary-500 hover:bg-primary-600 text-white px-6 py-3 rounded-lg font-semibold flex items-center gap-2 transition-colors">
                        Subscribe
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"/></svg>
                    </button>
                </form>
                
                <!-- Brand Badge -->
                <div class="farm-soft-panel rounded-lg p-8 text-center">
                    <div class="w-32 h-32 mx-auto mb-4 relative">
                        <div class="absolute inset-0 border-4 border-primary-500 rounded-full"></div>
                        <div class="absolute inset-2 border-2 border-primary-300 rounded-full"></div>
                        <div class="absolute inset-0 flex flex-col items-center justify-center">
                            <svg class="w-12 h-12 text-primary-600" fill="currentColor" viewBox="0 0 24 24">
                                <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/>
                            </svg>
                            <span class="text-xs font-bold text-primary-600 mt-1">CROSBY FARM</span>
                        </div>
                    </div>
                    <h4 class="text-lg font-bold text-primary-700 font-serif mb-2">FEEDING TOMORROW</h4>
                    <div class="inline-block bg-primary-500 text-white px-4 py-1 rounded-full text-sm font-semibold mb-2">BUILDING WEALTH FOR GENERATIONS</div>
                    <p class="text-gray-600 text-sm">WHERE AGRICULTURE MEETS INVESTMENT OPPORTUNITY</p>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Recommended Features -->
<section class="py-20 bg-gray-50">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="section-title animate-on-scroll">
            <div class="inline-flex items-center gap-2 text-primary-500 font-semibold text-sm mb-4">
                <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/></svg>
                Website Features
            </div>
            <h2 class="text-3xl md:text-4xl font-bold text-primary-600 font-serif">Built for Farm Partners and Investors</h2>
        </div>

        <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
            @php
                $features = [
                    ['title' => 'Investor Dashboard', 'text' => 'Personalized access to reports, plan details, and farm performance updates.'],
                    ['title' => 'Online Investment Registration', 'text' => 'A guided path for starting a farm investment inquiry online.'],
                    ['title' => 'Live Farm Updates', 'text' => 'Current updates from dairy, livestock, crop, and sustainability operations.'],
                    ['title' => 'Milk Production Statistics', 'text' => 'Transparent dairy production figures for active farm partners.'],
                    ['title' => 'Newsletter Subscription', 'text' => 'Regular farm news, investment education, and seasonal updates.'],
                    ['title' => 'Online Consultation Booking', 'text' => 'Simple scheduling for farm tours and investor consultations.'],
                ];
            @endphp

            @foreach ($features as $feature)
                <div class="bg-white rounded-lg p-6 shadow-sm border border-primary-100 animate-on-scroll">
                    <h3 class="text-lg font-bold text-primary-700 mb-2">{{ $feature['title'] }}</h3>
                    <p class="text-gray-600 text-sm leading-relaxed">{{ $feature['text'] }}</p>
                </div>
            @endforeach
        </div>
    </div>
</section>

<!-- CTA Section -->
<section class="py-20 bg-gradient-to-r from-primary-900 via-primary-700 to-primary-600 relative overflow-hidden">
    <div class="absolute inset-0 opacity-10">
        <svg class="w-full h-full" viewBox="0 0 100 100" preserveAspectRatio="none">
            <pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse">
                <path d="M 10 0 L 0 0 0 10" fill="none" stroke="white" stroke-width="0.5"/>
            </pattern>
            <rect width="100" height="100" fill="url(#grid)"/>
        </svg>
    </div>
    
    <div class="relative max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
        <h2 class="text-3xl md:text-4xl font-bold text-white font-serif mb-6">Ready to Invest in American Agriculture?</h2>
        <p class="text-primary-200 text-lg mb-8 max-w-2xl mx-auto">Join investors who trust Crosby Farm and Investments for diversified agricultural operations, transparent management, and long-term growth opportunities.</p>
        <div class="flex flex-wrap justify-center gap-4">
            <a href="{{ url('/investment') }}" class="bg-gold-400 hover:bg-gold-500 text-primary-700 px-8 py-4 rounded-lg font-bold text-lg transition-all duration-300 hover:shadow-lg hover:-translate-y-0.5">
                View Investment Plans
            </a>
            <a href="{{ url('/contact') }}" class="bg-white/10 hover:bg-white text-white hover:text-primary-600 px-8 py-4 rounded-lg font-bold text-lg border border-white/30 hover:border-white transition-all duration-300 hover:shadow-lg hover:-translate-y-0.5">
                Contact Us Today
            </a>
        </div>
    </div>
</section>
@endsection

@push('scripts')
<script>
    // Home hero carousel
    const heroSlides = document.querySelectorAll('[data-hero-slide]');
    const heroDots = document.querySelectorAll('[data-hero-dot]');
    let currentHeroSlide = 0;

    function updateHeroSlide(index) {
        if (!heroSlides.length) {
            return;
        }

        currentHeroSlide = (index + heroSlides.length) % heroSlides.length;

        heroSlides.forEach((slide, slideIndex) => {
            slide.classList.toggle('is-active', slideIndex === currentHeroSlide);
        });

        heroDots.forEach((dot, dotIndex) => {
            dot.classList.toggle('is-active', dotIndex === currentHeroSlide);
        });

    }

    heroDots.forEach((dot) => {
        dot.addEventListener('click', () => {
            updateHeroSlide(Number(dot.dataset.slideIndex || 0));
        });
    });

    setInterval(() => {
        updateHeroSlide(currentHeroSlide + 1);
    }, 5500);

    const milkingSection = document.querySelector('[data-milking-section]');
    const milkingVideo = document.querySelector('[data-milking-video]');

    if (milkingSection && milkingVideo && 'IntersectionObserver' in window) {
        let milkingVideoStarted = false;
        const milkingObserver = new IntersectionObserver((entries) => {
            entries.forEach((entry) => {
                if (!entry.isIntersecting || milkingVideoStarted) {
                    return;
                }

                milkingVideoStarted = true;
                milkingVideo.play().catch(() => {
                    milkingVideoStarted = false;
                });
            });
        }, {
            threshold: 0.45,
        });

        milkingObserver.observe(milkingSection);
    }

    // Testimonial Slider
    const testimonials = [
        {
            text: "Crosby Farm and Investments helped me participate in agriculture while planning for long-term financial security.",
            author: "Retired Investor"
        },
        {
            text: "The farm investment program has given me peace of mind for retirement. The returns have been consistent.",
            author: "John M., Gold Plan Investor"
        },
        {
            text: "I love how the company combines modern farming technology with sustainable agriculture. Truly inspiring.",
            author: "Sarah T., Community Partner"
        }
    ];
    
    let currentSlide = 0;
    const slider = document.getElementById('testimonial-slider');
    const dots = document.querySelectorAll('.flex.gap-2 span');
    
    function updateSlider() {
        const t = testimonials[currentSlide];
        slider.innerHTML = `
            <div class="testimonial-slide animate-fade-in">
                <svg class="w-10 h-10 text-primary-200 mb-4" fill="currentColor" viewBox="0 0 24 24"><path d="M14.017 21v-7.391c0-5.704 3.731-9.57 8.983-10.609l.995 2.151c-2.432.917-3.995 3.638-3.995 5.849h4v10h-9.983zm-14.017 0v-7.391c0-5.704 3.748-9.57 9-10.609l.996 2.151c-2.433.917-3.996 3.638-3.996 5.849h3.983v10h-9.983z"/></svg>
                <p class="text-gray-700 text-lg mb-6 leading-relaxed">"${t.text}"</p>
                <div class="flex items-center gap-4">
                    <div class="flex gap-1">
                        ${'<svg class="w-5 h-5 text-gold-400" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>'.repeat(5)}
                    </div>
                    <span class="text-sm text-gray-500">- ${t.author}</span>
                </div>
            </div>
        `;
        
        dots.forEach((dot, i) => {
            dot.className = i === currentSlide ? 'w-3 h-3 bg-primary-500 rounded-full' : 'w-3 h-3 bg-gray-300 rounded-full';
        });
    }
    
    document.getElementById('prev-testimonial')?.addEventListener('click', () => {
        currentSlide = (currentSlide - 1 + testimonials.length) % testimonials.length;
        updateSlider();
    });
    
    document.getElementById('next-testimonial')?.addEventListener('click', () => {
        currentSlide = (currentSlide + 1) % testimonials.length;
        updateSlider();
    });
    
    // Auto-rotate testimonials
    setInterval(() => {
        currentSlide = (currentSlide + 1) % testimonials.length;
        updateSlider();
    }, 5000);
</script>
@endpush