@extends('layouts.app')

@section('title', 'Apex Crop Care | Agricultural & Agrochemical Solutions')
@section('meta_description', 'Apex Crop Care - Premium agrochemical solutions for sustainable agriculture. Fertilizers, pesticides, herbicides, fungicides, and plant growth regulators.')
@section('og_title', 'Apex Crop Care | Agricultural & Agrochemical Solutions')
@section('og_description', 'Empowering farmers with innovative agrochemical solutions for bountiful, sustainable yields.')

@section('content')

@push('styles')
<style>
/* ============================================================
   AESTHETIC HERO SLIDER (Ken Burns & Glassmorphism)
   ============================================================ */
.hero-slider-section {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.hero-slider {
    position: relative;
    width: 100%;
    height: 92vh;
    min-height: 620px;
    max-height: 900px;
    overflow: hidden;
    background: #06180d;
}

/* ---- Individual slides with Ken Burns effect ---- */
.hero-slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    visibility: hidden;
    transform: scale(1.1);
    transition: opacity 1.2s cubic-bezier(0.65, 0, 0.35, 1),
                transform 7.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                visibility 1.2s ease;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    will-change: opacity, transform;
}

.hero-slide.active {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
    z-index: 2;
}

/* ---- Multi-layer gradient overlay ---- */
.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg,
            rgba(3, 20, 10, 0.92) 0%,
            rgba(3, 20, 10, 0.72) 40%,
            rgba(3, 20, 10, 0.35) 70%,
            rgba(3, 20, 10, 0.15) 100%);
    z-index: 1;
}

.hero-overlay::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(
        ellipse at 15% 50%,
        rgba(0, 143, 60, 0.22) 0%,
        transparent 60%
    );
}

/* ---- Ambient Particles ---- */
.hero-particles {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
}

.hero-particles span {
    position: absolute;
    display: block;
    width: 5px;
    height: 5px;
    background: rgba(74, 222, 128, 0.45);
    border-radius: 50%;
    animation: heroFloat 18s infinite linear;
    box-shadow: 0 0 10px rgba(74, 222, 128, 0.6);
}

.hero-particles span:nth-child(1)  { left: 8%;  animation-duration: 16s; animation-delay: 0s; }
.hero-particles span:nth-child(2)  { left: 22%; animation-duration: 20s; animation-delay: -3s;  width: 7px; height: 7px; }
.hero-particles span:nth-child(3)  { left: 38%; animation-duration: 14s; animation-delay: -5s; }
.hero-particles span:nth-child(4)  { left: 52%; animation-duration: 22s; animation-delay: -8s;  width: 8px; height: 8px; }
.hero-particles span:nth-child(5)  { left: 68%; animation-duration: 17s; animation-delay: -11s; }
.hero-particles span:nth-child(6)  { left: 84%; animation-duration: 19s; animation-delay: -14s; width: 6px; height: 6px; }

@keyframes heroFloat {
    0%   { transform: translateY(110vh) scale(0.6); opacity: 0; }
    15%  { opacity: 1; }
    85%  { opacity: 1; }
    100% { transform: translateY(-10vh) scale(1.1); opacity: 0; }
}

/* ---- Container Grid & Layout ---- */
.hero-container {
    position: relative;
    z-index: 3;
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 3rem;
}

.hero-grid-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 3rem;
    width: 100%;
}

.hero-content {
    max-width: 680px;
    color: #fff;
}

/* Slide Content Entrance Animation */
.hero-slide .hero-content > * {
    opacity: 0;
    transform: translateY(35px);
    transition: opacity 0.85s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                transform 0.85s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.hero-slide.active .hero-content > * {
    opacity: 1;
    transform: translateY(0);
}

.hero-slide.active .hero-content > *:nth-child(1) { transition-delay: 0.25s; }
.hero-slide.active .hero-content > *:nth-child(2) { transition-delay: 0.38s; }
.hero-slide.active .hero-content > *:nth-child(3) { transition-delay: 0.52s; }
.hero-slide.active .hero-content > *:nth-child(4) { transition-delay: 0.66s; }

/* Category Tag Pill */
.hero-category {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.5rem 1.25rem;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(74, 222, 128, 0.3);
    border-radius: 100px;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #a7f3d0;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    margin-bottom: 1.5rem;
}

.hero-category-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #4ade80;
    box-shadow: 0 0 10px #4ade80, 0 0 20px rgba(74, 222, 128, 0.6);
    animation: heroPulse 2s infinite ease-in-out;
}

@keyframes heroPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50%      { transform: scale(1.4); opacity: 0.7; }
}

/* Title */
.hero-title {
    font-size: clamp(2.5rem, 5.2vw, 4.4rem);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.025em;
    margin-bottom: 1.3rem;
    color: #ffffff;
    background: linear-gradient(135deg, #ffffff 0%, #d1fae5 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
}

/* Subtitle */
.hero-subtitle {
    font-size: clamp(1rem, 1.3vw, 1.18rem);
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 2.2rem;
    max-width: 580px;
    font-weight: 400;
}

/* Action Buttons */
.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
}

.hero-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.95rem 2rem;
    border-radius: 100px;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-decoration: none;
    transition: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    position: relative;
    overflow: hidden;
    cursor: pointer;
    border: none;
}

.hero-btn svg {
    transition: transform 0.3s ease;
}

.hero-btn-primary {
    background: linear-gradient(135deg, #16a34a 0%, #008f3c 100%);
    color: #fff;
    box-shadow: 0 8px 25px -6px rgba(22, 163, 74, 0.5);
}

.hero-btn-primary:hover {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    transform: translateY(-2px);
    box-shadow: 0 14px 35px -6px rgba(22, 163, 74, 0.65);
    color: #fff;
}

.hero-btn-primary:hover svg {
    transform: translateX(4px);
}

.hero-btn-secondary {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    border: 1.5px solid rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.hero-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.6);
    transform: translateY(-2px);
    color: #fff;
}

/* Floating Glass Stat Card (Right Side) */
.hero-stat-card {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 1.35rem 1.85rem;
    background: rgba(6, 24, 13, 0.55);
    border: 1px solid rgba(74, 222, 128, 0.3);
    border-radius: 20px;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5), 0 0 25px rgba(74, 222, 128, 0.12);
    opacity: 0;
    transform: translateY(25px);
    transition: opacity 0.85s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.8s,
                transform 0.85s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.8s;
    flex-shrink: 0;
}

.hero-slide.active .hero-stat-card {
    opacity: 1;
    transform: translateY(0);
}

.hero-stat-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: rgba(74, 222, 128, 0.14);
    border: 1px solid rgba(74, 222, 128, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.hero-stat-number {
    display: block;
    font-size: 1.75rem;
    font-weight: 800;
    color: #4ade80;
    line-height: 1.1;
    letter-spacing: -0.02em;
    text-shadow: 0 0 16px rgba(74, 222, 128, 0.5);
}

.hero-stat-text {
    display: block;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.82);
    font-weight: 500;
    margin-top: 3px;
}

/* Controls & Bottom Bar */
.hero-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    border: 1.5px solid rgba(255, 255, 255, 0.25);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    transition: all 0.35s ease;
    opacity: 0;
}

.hero-slider:hover .hero-nav {
    opacity: 1;
}

.hero-nav:hover {
    background: #16a34a;
    border-color: #16a34a;
    transform: translateY(-50%) scale(1.08);
    box-shadow: 0 10px 25px rgba(22, 163, 74, 0.5);
}

.hero-nav-prev { left: 2rem; }
.hero-nav-next { right: 2rem; }

/* Slide Indicators / Progress Dots */
.hero-dots {
    position: absolute;
    bottom: 2.8rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
    gap: 0.9rem;
    align-items: center;
}

.hero-dot {
    position: relative;
    width: 44px;
    height: 4px;
    border-radius: 100px;
    background: rgba(255, 255, 255, 0.25);
    border: none;
    cursor: pointer;
    overflow: hidden;
    padding: 0;
    transition: background 0.3s ease;
}

.hero-dot-progress {
    position: absolute;
    inset: 0;
    width: 0%;
    background: linear-gradient(90deg, #4ade80, #16a34a);
    border-radius: 100px;
    box-shadow: 0 0 10px rgba(74, 222, 128, 0.7);
}

.hero-dot.active .hero-dot-progress {
    width: 100%;
    transition: width 6.5s linear;
}

.hero-counter {
    position: absolute;
    bottom: 2.6rem;
    right: 3rem;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.85rem;
    font-weight: 600;
}

.hero-counter-current {
    color: #4ade80;
    font-size: 1.05rem;
    text-shadow: 0 0 14px rgba(74, 222, 128, 0.5);
}

.hero-counter-divider {
    width: 32px;
    height: 1.5px;
    background: rgba(255, 255, 255, 0.35);
}

.hero-counter-total {
    opacity: 0.6;
}

/* Responsive */
@media (max-width: 1024px) {
    .hero-stat-card { display: none; }
    .hero-container { padding: 0 2rem; }
    .hero-nav-prev { left: 1rem; }
    .hero-nav-next { right: 1rem; }
}

@media (max-width: 768px) {
    .hero-slider { height: 85vh; min-height: 540px; }
    .hero-container { padding: 0 1.5rem; }
    .hero-title { font-size: clamp(2rem, 7.5vw, 2.8rem); }
    .hero-subtitle { font-size: 0.95rem; margin-bottom: 1.8rem; }
    .hero-actions { flex-direction: column; align-items: stretch; gap: 0.8rem; }
    .hero-btn { justify-content: center; width: 100%; }
    .hero-nav { width: 44px; height: 44px; opacity: 1; background: rgba(0, 0, 0, 0.3); }
    .hero-counter { display: none; }
}
</style>
@endpush

<section class="hero-slider-section">
    <div class="hero-slider" id="heroSlider">
        @foreach($slides as $index => $slide)
        <div class="hero-slide {{ $index === 0 ? 'active' : '' }}"
             style="background-image: url('{{ \Illuminate\Support\Str::startsWith($slide['bg'] ?? '', ['http://', 'https://']) ? $slide['bg'] : asset($slide['bg'] ?? 'uploads/slider/slider.png') }}');"
             data-index="{{ $index }}">
            
            {{-- Multi-layer Overlay --}}
            <div class="hero-overlay"></div>
            
            {{-- Floating Ambient Particles --}}
            <div class="hero-particles">
                <span></span><span></span><span></span>
                <span></span><span></span><span></span>
            </div>

            <div class="hero-container">
                <div class="hero-grid-wrapper">
                    <div class="hero-content">
                        @if(!empty($slide['category']))
                            <span class="hero-category">
                                <span class="hero-category-dot"></span>
                                {{ $slide['category'] }}
                            </span>
                        @endif
                        <h1 class="hero-title">{{ $slide['title'] ?? 'Apex Crop Care' }}</h1>
                        @if(!empty($slide['subtitle']))
                            <p class="hero-subtitle">{{ $slide['subtitle'] }}</p>
                        @endif
                        <div class="hero-actions">
                            <a href="{{ $slide['primary_url'] ?? route('products') }}" class="hero-btn hero-btn-primary">
                                <span>{{ $slide['primary_label'] ?? 'Explore Products' }}</span>
                                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
                                    <path d="M5 12h14M12 5l7 7-7 7"/>
                                </svg>
                            </a>
                            @if(!empty($slide['secondary_url']) && !empty($slide['secondary_label']))
                                <a href="{{ $slide['secondary_url'] }}" class="hero-btn hero-btn-secondary">
                                    {{ $slide['secondary_label'] }}
                                </a>
                            @endif
                        </div>
                    </div>

                    @if(!empty($slide['stat_number']) && !empty($slide['stat_text']))
                        <div class="hero-stat-card">
                            <div class="hero-stat-icon">
                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#4ade80" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                    <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/>
                                </svg>
                            </div>
                            <div class="hero-stat-body">
                                <span class="hero-stat-number">{{ $slide['stat_number'] }}</span>
                                <span class="hero-stat-text">{{ $slide['stat_text'] }}</span>
                            </div>
                        </div>
                    @endif
                </div>
            </div>
        </div>
        @endforeach

        {{-- Navigation Arrows --}}
        <button class="hero-nav hero-nav-prev" aria-label="Previous slide">
            <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
                <path d="M15 18l-6-6 6-6"/>
            </svg>
        </button>
        <button class="hero-nav hero-nav-next" aria-label="Next slide">
            <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
                <path d="M9 18l6-6-6-6"/>
            </svg>
        </button>

        {{-- Slide Indicators / Dots --}}
        <div class="hero-dots">
            @foreach($slides as $index => $slide)
                <button class="hero-dot {{ $index === 0 ? 'active' : '' }}"
                        data-index="{{ $index }}"
                        aria-label="Go to slide {{ $index + 1 }}">
                    <span class="hero-dot-progress"></span>
                </button>
            @endforeach
        </div>

        {{-- Slide Counter --}}
        <div class="hero-counter">
            <span class="hero-counter-current">01</span>
            <span class="hero-counter-divider"></span>
            <span class="hero-counter-total">{{ str_pad(count($slides), 2, '0', STR_PAD_LEFT) }}</span>
        </div>
    </div>
</section>

<!-- About Preview -->
<section class="section section-about-preview">
    <div class="container">
        <div class="about-preview-grid">
            <div class="about-preview-image" data-reveal>
                <div class="about-image-wrapper">
                    <img src="{{ asset('uploads/about/about.png') }}" alt="Apex Crop Care - Agricultural advancement" class="about-real-img">
                </div>
            </div>
            <div class="about-preview-text" data-reveal>
                <span class="section-tag">Who We Are</span>
                <h2 class="section-title">About Apex Crop Care</h2>
                <p>Apex Crop Care has carved a niche in the agrochemical industry through its dedication to agricultural advancement and farmer prosperity. With an extensive portfolio of advanced fertilizers, pesticides, herbicides, fungicides, and plant growth regulators (PGRs), we prioritize product efficacy, quality, and farmer-centric solutions.</p>
                <p>Founded with a commitment to sustainable agriculture, we have established state-of-the-art manufacturing and research facilities that allow us to innovate and produce agrochemical products that meet global standards.</p>
                <a href="{{ route('about') }}" class="btn btn-primary">
                    Learn More
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
                </a>
            </div>
        </div>
    </div>
</section>

<!-- Mission & Vision -->
<section class="section section-mission-vision">
    <div class="container">
        <div class="mv-grid">
            <div class="mv-card mv-mission" data-reveal>
                <div class="mv-icon">
                    <svg viewBox="0 0 64 64" fill="none" width="56" height="56">
                        <circle cx="32" cy="32" r="30" fill="#008F3C" opacity="0.1"/>
                        <circle cx="32" cy="32" r="20" fill="#008F3C" opacity="0.15"/>
                        <path d="M32 18v28M18 32h28" stroke="#008F3C" stroke-width="3" stroke-linecap="round"/>
                        <circle cx="32" cy="32" r="6" fill="#008F3C" opacity="0.3"/>
                    </svg>
                </div>
                <h3>Our Mission</h3>
                <p>Our mission at Apex Crop Care is to empower farmers with innovative agrochemical solutions that are effective, sustainable, and tailored to the unique challenges of modern agriculture. Through cutting-edge research and development, we focus on creating high-quality fertilizers, pesticides, herbicides, fungicides, and plant growth regulators (PGRs) that enhance productivity, soil health, and crop resilience. We are dedicated to elevating the farming experience and supporting farmers in achieving bountiful, sustainable yields.</p>
            </div>
            <div class="mv-card mv-vision" data-reveal>
                <div class="mv-icon">
                    <svg viewBox="0 0 64 64" fill="none" width="56" height="56">
                        <circle cx="32" cy="32" r="30" fill="#006B5B" opacity="0.1"/>
                        <circle cx="32" cy="32" r="20" fill="#006B5B" opacity="0.15"/>
                        <path d="M18 32 Q25 20 32 20 Q39 20 46 32 Q39 44 32 44 Q25 44 18 32Z" stroke="#006B5B" stroke-width="2.5" fill="none"/>
                        <circle cx="32" cy="32" r="5" fill="#006B5B" opacity="0.4"/>
                    </svg>
                </div>
                <h3>Our Vision</h3>
                <p>Our vision is to cultivate a future where agriculture thrives through sustainable practices and advanced agro-technologies. Apex Crop Care aspires to be a leading force in agro-solutions that contribute to the prosperity and well-being of farmers, fostering a community-oriented approach where innovation drives abundant and resilient harvests. We are committed to creating a lasting impact in the agriculture sector, empowering farmers with reliable, high-performance products designed for their success and sustainability.</p>
            </div>
        </div>
    </div>
</section>

<!-- Product Categories -->
<section class="section section-categories">
    <div class="container">
        <div class="section-header" data-reveal>
            <span class="section-tag">What We Offer</span>
            <h2 class="section-title">Product Categories</h2>
            <p class="section-subtitle">Explore our comprehensive range of agrochemical solutions designed for modern agriculture.</p>
        </div>
        <div class="categories-grid">
            @component('components.category-card', [
                'title' => 'Growth Promoter',
                'count' => 3,
                'route' => route('products.growth-promoter'),
                'icon' => '<svg viewBox="0 0 48 48" fill="none" width="40" height="40"><path d="M24 6 Q18 14 18 22 Q18 28 20 32 Q22 34 24 34 Q26 34 28 32 Q30 28 30 22 Q30 14 24 6Z" fill="#16A34A" opacity="0.8"/><path d="M24 34 Q20 40 20 44 Q22 46 24 46 Q26 46 28 44 Q28 40 24 34Z" fill="#006B5B" opacity="0.6"/><path d="M14 20 Q20 22 24 18" stroke="#16A34A" stroke-width="2" fill="none"/><path d="M34 20 Q28 22 24 18" stroke="#16A34A" stroke-width="2" fill="none"/></svg>',
                'description' => 'Enhance crop growth naturally'
            ])
            @endcomponent

            @component('components.category-card', [
                'title' => 'Insecticide',
                'count' => 4,
                'route' => route('products.insecticide'),
                'icon' => '<svg viewBox="0 0 48 48" fill="none" width="40" height="40"><ellipse cx="24" cy="28" rx="10" ry="12" fill="#006B5B" opacity="0.7"/><circle cx="24" cy="16" r="6" fill="#006B5B" opacity="0.8"/><line x1="14" y1="22" x2="8" y2="18" stroke="#006B5B" stroke-width="2" opacity="0.5"/><line x1="34" y1="22" x2="40" y2="18" stroke="#006B5B" stroke-width="2" opacity="0.5"/><line x1="14" y1="30" x2="8" y2="34" stroke="#006B5B" stroke-width="2" opacity="0.5"/><line x1="34" y1="30" x2="40" y2="34" stroke="#006B5B" stroke-width="2" opacity="0.5"/></svg>',
                'description' => 'Protect crops from pests'
            ])
            @endcomponent

            @component('components.category-card', [
                'title' => 'Herbicide',
                'count' => 8,
                'route' => route('products.herbicide'),
                'icon' => '<svg viewBox="0 0 48 48" fill="none" width="40" height="40"><path d="M24 42 L24 20" stroke="#16A34A" stroke-width="2.5"/><path d="M24 20 Q18 16 16 10 Q20 14 24 16" fill="#4CAF3D" opacity="0.8"/><path d="M24 24 Q30 18 32 12 Q28 18 24 20" fill="#16A34A" opacity="0.8"/><path d="M24 28 Q20 24 14 22 Q18 24 24 26" fill="#66BB6A" opacity="0.7"/><path d="M24 28 Q28 24 34 22 Q30 24 24 26" fill="#43A047" opacity="0.7"/><line x1="16" y1="42" x2="32" y2="42" stroke="#5D4E37" stroke-width="3" opacity="0.3"/></svg>',
                'description' => 'Weed control solutions'
            ])
            @endcomponent

            @component('components.category-card', [
                'title' => 'Fungicide',
                'count' => 2,
                'route' => route('products.fungicide'),
                'icon' => '<svg viewBox="0 0 48 48" fill="none" width="40" height="40"><circle cx="24" cy="18" r="12" fill="#006B5B" opacity="0.15"/><circle cx="20" cy="16" r="4" fill="#006B5B" opacity="0.3"/><circle cx="28" cy="14" r="3" fill="#006B5B" opacity="0.25"/><circle cx="24" cy="22" r="3.5" fill="#006B5B" opacity="0.2"/><path d="M24 30 L24 42" stroke="#006B5B" stroke-width="3" opacity="0.5"/><path d="M24 34 Q20 36 18 38" stroke="#006B5B" stroke-width="2" fill="none" opacity="0.4"/><path d="M24 36 Q28 38 30 40" stroke="#006B5B" stroke-width="2" fill="none" opacity="0.4"/></svg>',
                'description' => 'Fungal disease protection'
            ])
            @endcomponent
        </div>
    </div>
</section>

<!-- Featured Products -->
<section class="section section-featured">
    <div class="container">
        <div class="section-header" data-reveal>
            <span class="section-tag">Featured Products</span>
            <h2 class="section-title">Our Premium Solutions</h2>
            <p class="section-subtitle">High-quality agrochemical products trusted by farmers across the nation.</p>
        </div>
        <div class="featured-products-grid">
            @component('components.product-card', [
                'name' => 'Power-XL',
                'technicalName' => 'Gibberellic Acid 0.001% L',
                'packing' => '5 Liter, 1 Liter, 500 ml, 250 ml, 100 ml',
                'category' => 'Growth Promoter',
                'image' => \App\Support\ProductData::imageFor('Power-XL'),
            ])
            @endcomponent

            @component('components.product-card', [
                'name' => 'EMA-5',
                'technicalName' => 'Emamectin Benzoate 5% SG',
                'packing' => '1 kg, 500 gm, 250 gm, 100 gm',
                'category' => 'Insecticide',
                'image' => \App\Support\ProductData::imageFor('EMA-5'),
            ])
            @endcomponent

            @component('components.product-card', [
                'name' => 'Quizal',
                'technicalName' => 'Quizalofop Ethyl 10% EC',
                'packing' => '1 Liter, 500 ml, 250 ml',
                'category' => 'Herbicide',
                'image' => \App\Support\ProductData::imageFor('Quizal'),
            ])
            @endcomponent

            @component('components.product-card', [
                'name' => 'Azotab-B',
                'technicalName' => 'Azoxystrobin 11% + Tebuconazole 18.3% ww SC',
                'packing' => '5 Liter, 1 Liter, 500 ml, 250 ml, 100 ml',
                'category' => 'Fungicide',
                'image' => \App\Support\ProductData::imageFor('Azotab-B'),
            ])
            @endcomponent
        </div>
        <div class="text-center" data-reveal>
            <a href="{{ route('products') }}" class="btn btn-primary btn-lg">
                View All Products
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
            </a>
        </div>
    </div>
</section>

<!-- Plant Parts Preview -->
<section class="section section-plant-preview">
    <div class="container">
        <div class="plant-preview-grid">
            <div class="plant-preview-text" data-reveal>
                <span class="section-tag">Learn About Agriculture</span>
                <h2 class="section-title">Parts of a Plant</h2>
                <p>Understanding the fundamental structure of plants is essential for effective crop management. Explore the key components that contribute to healthy plant growth and development.</p>
                <a href="{{ route('parts-of-plant') }}" class="btn btn-primary">
                    Explore Plant Parts
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
                </a>
            </div>
            <div class="plant-preview-visual" data-reveal>
                <div class="plant-parts-mini">
                    <div class="pp-item pp-leaf">
                        <span>Leaf</span>
                    </div>
                    <div class="pp-item pp-flower">
                        <span>Flower</span>
                    </div>
                    <div class="pp-item pp-stem">
                        <span>Stem</span>
                    </div>
                    <div class="pp-item pp-fruit">
                        <span>Fruit</span>
                    </div>
                    <div class="pp-item pp-root">
                        <span>Root</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- CTA Section -->
<section class="section section-cta">
    <div class="cta-bg">
        <svg viewBox="0 0 1440 400" preserveAspectRatio="none">
            <rect width="1440" height="400" fill="url(#ctaGrad)"/>
            <path d="M0 200 Q360 100 720 200 Q1080 300 1440 200 L1440 400 L0 400Z" fill="#0a2e1a" opacity="0.3"/>
            <defs>
                <linearGradient id="ctaGrad" x1="0" y1="0" x2="1440" y2="400">
                    <stop offset="0%" stop-color="#006B5B"/>
                    <stop offset="50%" stop-color="#008F3C"/>
                    <stop offset="100%" stop-color="#006B5B"/>
                </linearGradient>
            </defs>
        </svg>
    </div>
    <div class="container cta-content" data-reveal>
        <h2 class="cta-title">Ready to Grow With Us?</h2>
        <p class="cta-text">Discover how Apex Crop Care can support your agricultural journey with innovative solutions and expert guidance.</p>
        <div class="cta-actions">
            <a href="{{ route('products') }}" class="btn btn-white">
                Explore Products
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
            </a>
            <a href="{{ route('contact') }}" class="btn btn-outline-white">
                Get in Touch
            </a>
        </div>
    </div>
</section>
@push('scripts')
<script>
(function () {
    'use strict';

    const slider = document.getElementById('heroSlider');
    if (!slider) return;

    const slides     = slider.querySelectorAll('.hero-slide');
    const dots       = slider.querySelectorAll('.hero-dot');
    const prevBtn    = slider.querySelector('.hero-nav-prev');
    const nextBtn    = slider.querySelector('.hero-nav-next');
    const counterEl  = slider.querySelector('.hero-counter-current');
    const totalSlides = slides.length;

    let currentIndex = 0;
    let autoplayTimer = null;
    let isPaused = false;
    const AUTOPLAY_DURATION = 6500; // 6.5s — matches CSS progress bar

    // ---- Utility: pad number ----
    const pad = (n) => String(n).padStart(2, '0');

    // ---- Go to a specific slide ----
    function goToSlide(index) {
        if (index === currentIndex) return;
        if (index < 0) index = totalSlides - 1;
        if (index >= totalSlides) index = 0;

        // Toggle active classes
        slides[currentIndex].classList.remove('active');
        if (dots[currentIndex]) dots[currentIndex].classList.remove('active');

        currentIndex = index;

        slides[currentIndex].classList.add('active');
        if (dots[currentIndex]) {
            // Reset and restart the dot progress animation
            const progress = dots[currentIndex].querySelector('.hero-dot-progress');
            if (progress) {
                progress.style.transition = 'none';
                progress.style.width = '0%';
                // Force reflow
                void progress.offsetWidth;
                progress.style.transition = '';
            }
            dots[currentIndex].classList.add('active');
        }

        // Update counter
        if (counterEl) counterEl.textContent = pad(currentIndex + 1);

        // Reset autoplay timer
        restartAutoplay();
    }

    // ---- Next / Prev ----
    function nextSlide() { goToSlide(currentIndex + 1); }
    function prevSlide() { goToSlide(currentIndex - 1); }

    // ---- Autoplay ----
    function startAutoplay() {
        if (autoplayTimer) clearInterval(autoplayTimer);
        autoplayTimer = setInterval(() => {
            if (!isPaused) nextSlide();
        }, AUTOPLAY_DURATION);
    }

    function restartAutoplay() {
        if (autoplayTimer) clearInterval(autoplayTimer);
        startAutoplay();
    }

    // ---- Event Listeners ----
    if (nextBtn) nextBtn.addEventListener('click', nextSlide);
    if (prevBtn) prevBtn.addEventListener('click', prevSlide);

    dots.forEach((dot, i) => {
        dot.addEventListener('click', () => goToSlide(i));
    });

    // Pause on hover (desktop)
    slider.addEventListener('mouseenter', () => { isPaused = true; });
    slider.addEventListener('mouseleave', () => { isPaused = false; });

    // Keyboard navigation
    document.addEventListener('keydown', (e) => {
        if (e.key === 'ArrowLeft')  prevSlide();
        if (e.key === 'ArrowRight') nextSlide();
    });

    // Touch swipe support
    let touchStartX = 0;
    let touchEndX = 0;

    slider.addEventListener('touchstart', (e) => {
        touchStartX = e.changedTouches[0].screenX;
    }, { passive: true });

    slider.addEventListener('touchend', (e) => {
        touchEndX = e.changedTouches[0].screenX;
        handleSwipe();
    }, { passive: true });

    function handleSwipe() {
        const threshold = 50;
        const diff = touchStartX - touchEndX;
        if (Math.abs(diff) < threshold) return;
        if (diff > 0) nextSlide();
        else prevSlide();
    }

    // Pause when tab is hidden
    document.addEventListener('visibilitychange', () => {
        isPaused = document.hidden;
    });

    // ---- Initialize ----
    // Ensure first slide is active (server-rendered already has it, but safety)
    slides.forEach((s, i) => {
        if (i === 0) s.classList.add('active');
        else s.classList.remove('active');
    });
    if (counterEl) counterEl.textContent = '01';

    startAutoplay();
})();
</script>
@endpush

@endsection