{% extends 'base.html.twig' %}

{% block title %}KitsCo - Eco Toolkit Solutions for Human-Wildlife Conflict{% endblock %}

{% block stylesheets %}
<style>
    html { scroll-behavior: smooth; }
    .hero-gradient { background: linear-gradient(135deg, #1a1a2e 0%, #0f3460 60%, #16213e 100%); }
    .product-card:hover { transform: translateY(-6px); box-shadow: 0 20px 40px rgba(0,0,0,0.1); }
    .toolkit-card { background: linear-gradient(145deg, #f8fafc 0%, #e8f4f8 100%); }
    .stat-counter { background: linear-gradient(135deg, #0f3460 0%, #1a1a2e 100%); }
    @keyframes spin { to { transform: rotate(360deg); } }
    .animate-spin { animation: spin 1s linear infinite; }

    /* Carousel Styles */
    .cms-carousel-slide {
        will-change: transform;
        transition: transform 0.5s ease-in-out;
    }
</style>
{% endblock %}

{% block body %}
{% if is_granted('ROLE_ADMIN') %}
    {% include 'website/_admin_bar.html.twig' %}
{% endif %}

<!-- Navigation -->
<nav class="fixed top-0 w-full z-50 bg-white/95 backdrop-blur-sm border-b border-gray-100 transition-all" id="navbar">
    <div class="max-w-7xl mx-auto px-4 sm:px-6">
        <div class="flex justify-between items-center h-16">
            <a href="#" class="flex items-center gap-2">
                <img src="{{ asset('images/logo_transparent_background_cropped_logo_only.png') }}" alt="KitsCo" class="h-10">
            </a>
            <div class="hidden md:flex items-center gap-8">
                <a href="#about" class="text-sm text-gray-600 hover:text-kitsco-accent transition-colors">About</a>
                <a href="#products" class="text-sm text-gray-600 hover:text-kitsco-accent transition-colors">Products</a>
                <a href="#toolkits" class="text-sm text-gray-600 hover:text-kitsco-accent transition-colors">Toolkits</a>
                <a href="#services" class="text-sm text-gray-600 hover:text-kitsco-accent transition-colors">Services</a>
                <a href="#contact" class="text-sm text-gray-600 hover:text-kitsco-accent transition-colors">Contact</a>
                <a href="{{ path('shop_index') }}" class="bg-kitsco-accent hover:bg-kitsco-dark text-white text-sm font-medium px-4 py-2 rounded-lg transition-colors"><i class="bi bi-cart3 mr-1"></i>Shop</a>
            </div>
            <button class="md:hidden text-gray-600" id="mobileMenuBtn">
                <i class="bi bi-list text-2xl"></i>
            </button>
        </div>
    </div>
    <div class="hidden md:hidden bg-white border-t border-gray-100 px-4 py-4 space-y-3" id="mobileMenu">
        <a href="#about" class="block text-sm text-gray-600 py-2">About</a>
        <a href="#products" class="block text-sm text-gray-600 py-2">Products</a>
        <a href="#toolkits" class="block text-sm text-gray-600 py-2">Toolkits</a>
        <a href="#services" class="block text-sm text-gray-600 py-2">Services</a>
        <a href="#contact" class="block text-sm text-gray-600 py-2">Contact</a>
        <a href="{{ path('shop_index') }}" class="block text-sm text-kitsco-accent font-medium py-2"><i class="bi bi-cart3 mr-1"></i>Shop Online</a>
    </div>
</nav>

<!-- Hero Section -->
<section class="hero-gradient pt-32 pb-20 md:pt-40 md:pb-32 relative overflow-hidden">
    <div class="absolute inset-0 opacity-10">
        <div class="absolute top-20 left-10 w-72 h-72 bg-white rounded-full blur-3xl"></div>
        <div class="absolute bottom-10 right-20 w-96 h-96 bg-cyan-300 rounded-full blur-3xl"></div>
    </div>
    <div class="max-w-7xl mx-auto px-4 sm:px-6 relative z-10">
        <div class="grid md:grid-cols-2 gap-12 items-center">
            <div>
                {{ cms('hero', 'badge', 'Eco Toolkit Solutions', 'span') }}
                <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold text-white leading-tight mb-6">
                    {{ cms('hero', 'title_line1', 'Protecting People.', 'span') }}<br>
                    <span class="text-cyan-300">{{ cms('hero', 'title_line2', 'Preserving Wildlife.', 'span') }}</span>
                </h1>
                <div class="text-lg text-white/70 mb-8 max-w-lg">
                    {{ cms('hero', 'description', 'We supply efficient and affordable solutions to Human-Wildlife Conflict. A suite of low-cost tools bundled under one store to safely deter wildlife from communities.', 'div') }}
                </div>
                <div class="flex flex-wrap gap-4">
                    <a href="#products" class="bg-white text-kitsco-dark font-semibold px-6 py-3 rounded-lg hover:bg-gray-100 transition-colors inline-flex items-center gap-2">
                        <i class="bi bi-box-seam"></i> View Products
                    </a>
                    <a href="#contact" class="border border-white/30 text-white font-semibold px-6 py-3 rounded-lg hover:bg-white/10 transition-colors inline-flex items-center gap-2">
                        <i class="bi bi-envelope"></i> Get In Touch
                    </a>
                </div>
            </div>
            <div class="hidden md:block">
                <div class="max-w-md mx-auto h-80 drop-shadow-2xl rounded-lg overflow-hidden">
                    {{ cms_carousel('hero', 'carousel_slides', [
                        {'image': asset('images/products/flashlight-label.png'), 'alt': 'LED Flashlight'},
                        {'image': asset('images/products/silver-crackers.jpg'), 'alt': 'Silver Crackers'},
                        {'image': asset('images/products/air-horn.jpg'), 'alt': 'Air Horn'}
                    ]) }}
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Stats Bar -->
<section class="stat-counter py-8">
    <div class="max-w-7xl mx-auto px-4 sm:px-6">
        <div class="grid grid-cols-2 md:grid-cols-4 gap-6 text-center text-white">
            <div>
                <p class="text-3xl font-bold">{{ cms('stats', 'invoices', '60+', 'span') }}</p>
                <p class="text-sm text-white/60 mt-1">{{ cms('stats', 'invoices_label', 'Invoices Delivered', 'span') }}</p>
            </div>
            <div>
                <p class="text-3xl font-bold">{{ cms('stats', 'products', '5+', 'span') }}</p>
                <p class="text-sm text-white/60 mt-1">{{ cms('stats', 'products_label', 'Product Categories', 'span') }}</p>
            </div>
            <div>
                <p class="text-3xl font-bold">{{ cms('stats', 'partners', '20+', 'span') }}</p>
                <p class="text-sm text-white/60 mt-1">{{ cms('stats', 'partners_label', 'Partner Organizations', 'span') }}</p>
            </div>
            <div>
                <p class="text-3xl font-bold">{{ cms('stats', 'years', '3+', 'span') }}</p>
                <p class="text-sm text-white/60 mt-1">{{ cms('stats', 'years_label', 'Years of Operations', 'span') }}</p>
            </div>
        </div>
    </div>
</section>

<!-- About Section -->
<section id="about" class="py-20 bg-white">
    <div class="max-w-7xl mx-auto px-4 sm:px-6">
        <div class="grid md:grid-cols-2 gap-16 items-center">
            <div>
                <span class="text-xs font-semibold text-kitsco-accent uppercase tracking-wide">About KitsCo</span>
                <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mt-2 mb-6">{{ cms('about', 'heading', 'Dedicated to the HWC Solution, No Distractions', 'span') }}</h2>
                <div class="text-gray-600 leading-relaxed mb-6">{{ cms('about', 'description', 'Our company\'s main business goal is to develop innovative mitigation tools for Human-Wildlife Conflicts, using technology and data to inspire proven, efficient and affordable solutions.', 'div') }}</div>
                <div class="space-y-4">
                    <div class="flex items-start gap-3">
                        <div class="w-10 h-10 rounded-lg bg-cyan-50 flex items-center justify-center shrink-0 mt-0.5"><i class="bi bi-eye text-kitsco-accent"></i></div>
                        <div>
                            <h4 class="font-semibold text-gray-800">Vision</h4>
                            <p class="text-sm text-gray-500">{{ cms('about', 'vision', 'An environment in which people and wildlife are benefiting from each other\'s existence for generations.', 'span') }}</p>
                        </div>
                    </div>
                    <div class="flex items-start gap-3">
                        <div class="w-10 h-10 rounded-lg bg-cyan-50 flex items-center justify-center shrink-0 mt-0.5"><i class="bi bi-bullseye text-kitsco-accent"></i></div>
                        <div>
                            <h4 class="font-semibold text-gray-800">Mission</h4>
                            <p class="text-sm text-gray-500">{{ cms('about', 'mission', 'Using technology and data to inspire and develop efficient and affordable solutions to the HWC problem.', 'span') }}</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="grid grid-cols-2 gap-4">
                <div class="space-y-4">
                    <div class="bg-kitsco-light rounded-2xl p-6 text-center">
                        <i class="bi bi-shield-check text-3xl text-kitsco-accent"></i>
                        <p class="text-sm font-semibold text-gray-700 mt-3">Locally Owned & Operated</p>
                    </div>
                    <div class="bg-gray-50 rounded-2xl p-6 text-center">
                        <i class="bi bi-box-seam text-3xl text-kitsco-accent"></i>
                        <p class="text-sm font-semibold text-gray-700 mt-3">5+ Products Bundled Under One Store</p>
                    </div>
                </div>
                <div class="space-y-4 mt-8">
                    <div class="bg-gray-50 rounded-2xl p-6 text-center">
                        <i class="bi bi-currency-exchange text-3xl text-kitsco-accent"></i>
                        <p class="text-sm font-semibold text-gray-700 mt-3">Affordable Pricing</p>
                    </div>
                    <div class="bg-kitsco-light rounded-2xl p-6 text-center">
                        <i class="bi bi-globe-africa text-3xl text-kitsco-accent"></i>
                        <p class="text-sm font-semibold text-gray-700 mt-3">Based in Arusha, Tanzania</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Products Section -->
<section id="products" class="py-20 bg-gray-50">
    <div class="max-w-7xl mx-auto px-4 sm:px-6">
        <div class="text-center mb-14">
            <span class="text-xs font-semibold text-kitsco-accent uppercase tracking-wide">Our Products</span>
            <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mt-2">{{ cms('products', 'heading', 'A Suite of Low-Cost Tools', 'span') }}</h2>
            <div class="text-gray-500 mt-3 max-w-2xl mx-auto">{{ cms('products', 'description', 'To safely scare wildlife away from people, with various options for different wildlife species, efficiency, pricing and use cases.', 'div') }}</div>
        </div>

        <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
            {% set product_items = [
                {section: 'product_flashlight', image: 'images/products/flashlight-label.png', default_name: 'LED Flashlights', default_desc: 'NEBO Luxtreme 500-Lumen.', default_price: 'TZS 250,000'},
                {section: 'product_crackers', image: 'images/products/silver-crackers.jpg', default_name: 'Silver Crackers (Baruti)', default_desc: 'Packs of 50 pieces, 3-power.', default_price: 'TZS 260,000'},
                {section: 'product_airhorn', image: 'images/products/air-horn.jpg', default_name: 'Air Horn (Vuvuzela)', default_desc: 'Hand-held, pump-action air horn.', default_price: 'TZS 50,000'},
                {section: 'product_romancandle', image: 'images/products/roman-candle.png', default_name: 'Roman Candles', default_desc: '10 shots, 1 inch diameter.', default_price: 'From TZS 60,000'},
                {section: 'product_chilli', image: 'images/products/chilli-powder.png', default_name: 'Dry Chilli Powder', default_desc: 'Half-kilo bags of red hot pepper.', default_price: 'TZS 15,000'},
                {section: 'product_toolkit', image: '', default_name: 'Custom Toolkit Packages', default_desc: 'Bundled HEC toolkits for your needs.', default_price: 'From TZS 500,000'}
            ] %}

            {% for item in product_items %}
            <div class="bg-white rounded-2xl overflow-hidden shadow-sm border border-gray-100 product-card transition-all duration-300 {{ loop.last ? 'bg-gradient-to-br from-kitsco-light to-white' : '' }}">
                <div class="h-48 bg-gray-50 flex items-center justify-center p-4">
                    {% if item.image %}
                        {{ cms_image(item.section, 'image', asset(item.image), item.default_name, 'max-h-full object-contain') }}
                    {% else %}
                        <div class="text-center">
                            <i class="bi bi-toolbox text-5xl text-kitsco-accent"></i>
                            <p class="text-sm font-semibold text-kitsco-accent mt-2">Bundled Set</p>
                        </div>
                    {% endif %}
                </div>
                <div class="p-5">
                    <h3 class="font-bold text-gray-800 text-lg">{{ cms(item.section, 'name', item.default_name, 'span') }}</h3>
                    <p class="text-sm text-gray-500 mt-1">{{ cms(item.section, 'description', item.default_desc, 'span') }}</p>
                    <p class="text-kitsco-accent font-bold mt-3">{{ cms(item.section, 'price', item.default_price, 'span') }}</p>
                </div>
            </div>
            {% endfor %}
        </div>
    </div>
</section>

<!-- Toolkit Bundles Section -->
<section id="toolkits" class="py-20 bg-white">
    <div class="max-w-7xl mx-auto px-4 sm:px-6">
        <div class="text-center mb-14">
            <span class="text-xs font-semibold text-kitsco-accent uppercase tracking-wide">Bundled Tool Sets</span>
            <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mt-2">{{ cms('toolkits', 'heading', 'Ready-Made HEC Toolkits', 'span') }}</h2>
            <div class="text-gray-500 mt-3 max-w-2xl mx-auto">{{ cms('toolkits', 'description', 'Pre-configured packages designed for different community sizes and wildlife challenges.', 'div') }}</div>
        </div>

        <div class="grid md:grid-cols-3 gap-6">
            {% set tiers = [
                {label: 'MiniSet', price: 'TZS 500,000', border: 'border border-gray-200 hover:border-kitsco-accent', btn: 'border border-kitsco-accent text-kitsco-accent hover:bg-kitsco-accent hover:text-white', popular: false,
                 items: ['1 x LED Flashlight', '1 x Horn', '0.5 x Packs of 50pcs \'baruti\'', '1 x Roman Candle'],
                 extras: ['+0.5 kg dry chili', '+1 box condoms'],
                 note: 'Recommended for demonstration purposes only.'},
                {label: 'MidiSet', price: 'TZS 750,000', border: 'border-2 border-kitsco-accent', btn: 'bg-kitsco-accent text-white hover:bg-kitsco-dark', popular: true,
                 items: ['1 x LED Flashlight', '2 x Horns', '1 x Pack of 50pcs \'baruti\'', '2 x Roman Candles'],
                 extras: ['+0.5 kg dry chili', '+1 box condoms'],
                 note: 'Recommended for a HEC mitigation response team of 5 to 8 persons for 3-month period at an average of 3-5 response incidents weekly.'},
                {label: 'MaxiSet', price: 'TZS 1,200,000', border: 'border border-gray-200 hover:border-kitsco-accent', btn: 'border border-kitsco-accent text-kitsco-accent hover:bg-kitsco-accent hover:text-white', popular: false,
                 items: ['1 x LED Flashlight', '3 x Horns', '2 x Packs of 50pcs \'baruti\'', '4 x Roman Candles'],
                 extras: ['+1 kg dry chili', '+2 boxes condoms'],
                 note: 'Recommended for a HEC mitigation response team of 10 to 15 persons for 3-month period at an average of 5-10 response incidents weekly.'}
            ] %}
            {% for tier in tiers %}
            <div class="toolkit-card rounded-2xl p-8 {{ tier.border }} transition-colors {{ tier.popular ? 'relative' : '' }} flex flex-col">
                {% if tier.popular %}<span class="absolute top-0 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-kitsco-accent text-white text-xs font-bold px-4 py-1 rounded-full">Popular</span>{% endif %}
                <div class="text-center mb-6">
                    <span class="text-xs uppercase tracking-wide text-gray-400 font-semibold">{{ tier.label }}</span>
                    <h3 class="font-bold text-2xl text-gray-800 mt-1">HEC Toolkit</h3>
                    <p class="text-3xl font-bold text-kitsco-accent mt-2">{{ tier.price }}</p>
                </div>
                <ul class="space-y-3 text-sm text-gray-600">
                    {% for li in tier.items %}
                    <li class="flex items-center gap-2"><i class="bi bi-check-circle-fill text-green-500"></i> {{ li }}</li>
                    {% endfor %}
                </ul>
                <div class="mt-4 pt-4 border-t border-gray-100">
                    <p class="text-xs text-gray-400 uppercase font-semibold mb-2">Sold separately</p>
                    <ul class="space-y-2 text-sm text-gray-500">
                        {% for extra in tier.extras %}
                        <li class="flex items-center gap-2"><i class="bi bi-plus-circle text-gray-400"></i> {{ extra }}</li>
                        {% endfor %}
                    </ul>
                </div>
                <p class="mt-4 mb-8 text-xs text-kitsco-accent italic">{{ tier.note }}</p>
                <a href="#contact" class="toolkit-quote-btn flex items-center justify-center mt-auto h-12 {{ tier.btn }} font-medium rounded-lg transition-colors text-sm" data-toolkit="HEC Toolkit - {{ tier.label }} ({{ tier.price }})" data-items="{{ tier.items|join(', ') }}">Request Quote</a>
            </div>
            {% endfor %}
        </div>
    </div>
</section>

<!-- Services Section -->
<section id="services" class="py-20 bg-gray-50">
    <div class="max-w-7xl mx-auto px-4 sm:px-6">
        <div class="text-center mb-14">
            <span class="text-xs font-semibold text-kitsco-accent uppercase tracking-wide">Our Services</span>
            <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mt-2">{{ cms('services', 'heading', 'Beyond Products', 'span') }}</h2>
        </div>

        {% set services = [
            {section: 'service_rd', icon: 'bi-lightbulb', default_name: 'R&D', default_desc: 'Research and development of new HWC mitigation tools and technologies.'},
            {section: 'service_sales', icon: 'bi-cart-check', default_name: 'Toolkit Sales', default_desc: 'Individual products and bundled kits tailored to your specific needs.'},
            {section: 'service_rental', icon: 'bi-tools', default_name: 'Equipment Rental', default_desc: 'Short-term equipment rental for seasonal wildlife conflict situations.'},
            {section: 'service_consult', icon: 'bi-mortarboard', default_name: 'Consultancy', default_desc: 'Expert advice on HWC mitigation strategies and toolkit deployment.'}
        ] %}
        <div class="grid sm:grid-cols-2 lg:grid-cols-4 gap-6">
            {% for svc in services %}
            <div class="bg-white rounded-2xl p-6 text-center shadow-sm border border-gray-100 hover:-translate-y-1 transition-transform">
                <div class="w-14 h-14 rounded-xl bg-kitsco-light flex items-center justify-center mx-auto mb-4">
                    <i class="bi {{ svc.icon }} text-2xl text-kitsco-accent"></i>
                </div>
                <h3 class="font-bold text-gray-800 mb-2">{{ cms(svc.section, 'name', svc.default_name, 'span') }}</h3>
                <p class="text-sm text-gray-500">{{ cms(svc.section, 'description', svc.default_desc, 'span') }}</p>
            </div>
            {% endfor %}
        </div>
    </div>
</section>

<!-- Partners Section -->
<section class="py-16 bg-white border-y border-gray-100">
    <div class="max-w-7xl mx-auto px-4 sm:px-6">
        <p class="text-center text-xs uppercase tracking-wide text-gray-400 font-semibold mb-8">{{ cms('partners', 'heading', 'Trusted By Conservation Organizations Across East Africa', 'span') }}</p>
        <div class="flex flex-wrap justify-center items-center gap-8 md:gap-14 text-gray-400">
            <span class="text-sm font-semibold">Tanzania People & Wildlife</span>
            <span class="text-sm font-semibold">Honeyguide Foundation</span>
            <span class="text-sm font-semibold">Burunge WMA</span>
            <span class="text-sm font-semibold">Grumeti Fund</span>
            <span class="text-sm font-semibold">WWF</span>
            <span class="text-sm font-semibold">TAWIRI</span>
            <span class="text-sm font-semibold">WCS</span>
            <span class="text-sm font-semibold">IFAW</span>
        </div>
    </div>
</section>

<!-- Contact Section -->
<section id="contact" class="py-20 bg-gray-50">
    <div class="max-w-7xl mx-auto px-4 sm:px-6">
        <div class="grid md:grid-cols-2 gap-12">
            <div>
                <span class="text-xs font-semibold text-kitsco-accent uppercase tracking-wide">Contact Us</span>
                <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mt-2 mb-6">{{ cms('contact', 'heading', 'Get In Touch', 'span') }}</h2>
                <div class="text-gray-500 mb-8">{{ cms('contact', 'description', 'Whether you need a single product or a full community toolkit deployment, we\'re here to help. Reach out and let\'s discuss your needs.', 'div') }}</div>

                <div class="space-y-5">
                    <div class="flex items-start gap-4">
                        <div class="w-10 h-10 rounded-lg bg-kitsco-light flex items-center justify-center shrink-0"><i class="bi bi-geo-alt text-kitsco-accent"></i></div>
                        <div>
                            <h4 class="font-semibold text-gray-800 text-sm">Address</h4>
                            <p class="text-sm text-gray-500">{{ cms('contact', 'address', 'P.O. Box 1689, Arusha, Tanzania', 'span') }}</p>
                        </div>
                    </div>
                    <div class="flex items-start gap-4">
                        <div class="w-10 h-10 rounded-lg bg-kitsco-light flex items-center justify-center shrink-0"><i class="bi bi-envelope text-kitsco-accent"></i></div>
                        <div>
                            <h4 class="font-semibold text-gray-800 text-sm">Email</h4>
                            <p class="text-sm text-gray-500"><a href="mailto:sales@kits.co.tz" class="text-kitsco-accent hover:underline">{{ cms('contact', 'email', 'sales@kits.co.tz', 'span') }}</a></p>
                        </div>
                    </div>
                    <div class="flex items-start gap-4">
                        <div class="w-10 h-10 rounded-lg bg-kitsco-light flex items-center justify-center shrink-0"><i class="bi bi-telephone text-kitsco-accent"></i></div>
                        <div>
                            <h4 class="font-semibold text-gray-800 text-sm">Phone</h4>
                            <p class="text-sm text-gray-500"><a href="tel:+255746543459" class="text-kitsco-accent hover:underline">{{ cms('contact', 'phone', '+255 746 543 459', 'span') }}</a></p>
                        </div>
                    </div>
                </div>
            </div>

            <div>
                {% for label, messages in app.flashes %}
                    {% for message in messages %}
                        <div class="mb-4 px-4 py-3 rounded-lg bg-green-50 text-green-800 border border-green-200 text-sm">
                            <i class="bi bi-check-circle mr-1"></i> {{ message }}
                        </div>
                    {% endfor %}
                {% endfor %}

                <form method="post" action="{{ path('website_contact_submit') }}" class="bg-white rounded-2xl shadow-sm border border-gray-100 p-6 space-y-4">
                    <div class="grid grid-cols-2 gap-4">
                        <div><label for="contact_name">Full Name</label><input type="text" id="contact_name" name="name" required placeholder="Your name"></div>
                        <div><label for="contact_org">Organization</label><input type="text" id="contact_org" name="organization" placeholder="Company/Village"></div>
                    </div>
                    <div><label for="contact_email">Email</label><input type="email" id="contact_email" name="email" required placeholder="you@example.com"></div>
                    <div><label for="contact_phone">Phone</label><input type="text" id="contact_phone" name="phone" placeholder="+255 7XX XXX XXX"></div>
                    <div><label for="contact_message">Message</label><textarea id="contact_message" name="message" rows="4" required placeholder="Tell us about your needs..."></textarea></div>
                    <button type="submit" class="w-full bg-kitsco-accent hover:bg-kitsco-dark text-white font-semibold py-3 rounded-lg transition-colors inline-flex items-center justify-center gap-2">
                        <i class="bi bi-send"></i> Send Message
                    </button>
                </form>
            </div>
        </div>
    </div>
</section>

<!-- Footer -->
<footer class="bg-kitsco-dark py-12">
    <div class="max-w-7xl mx-auto px-4 sm:px-6">
        <div class="grid md:grid-cols-3 gap-8">
            <div>
                <img src="{{ asset('images/logo-white.png') }}" alt="KitsCo" class="h-28 mb-4">
                <p class="text-sm text-white/50 leading-relaxed">{{ cms('footer', 'tagline', 'Eco Toolkit Solutions for Human-Wildlife Conflict. Protecting people, preserving wildlife.', 'span') }}</p>
            </div>
            <div>
                <h4 class="text-white font-semibold mb-4">Quick Links</h4>
                <ul class="space-y-2 text-sm text-white/50">
                    <li><a href="#about" class="hover:text-white transition-colors">About Us</a></li>
                    <li><a href="#products" class="hover:text-white transition-colors">Products</a></li>
                    <li><a href="#toolkits" class="hover:text-white transition-colors">Toolkit Bundles</a></li>
                    <li><a href="#services" class="hover:text-white transition-colors">Services</a></li>
                    <li><a href="#contact" class="hover:text-white transition-colors">Contact</a></li>
                </ul>
            </div>
            <div>
                <h4 class="text-white font-semibold mb-4">Contact</h4>
                <ul class="space-y-2 text-sm text-white/50">
                    <li><i class="bi bi-geo-alt mr-2"></i>P.O. Box 1689, Arusha, Tanzania</li>
                    <li><i class="bi bi-envelope mr-2"></i><a href="mailto:sales@kits.co.tz" class="hover:text-white transition-colors">sales@kits.co.tz</a></li>
                    <li><i class="bi bi-telephone mr-2"></i><a href="tel:+255746543459" class="hover:text-white transition-colors">+255 746 543 459</a></li>
                </ul>
            </div>
        </div>
        <div class="border-t border-white/10 mt-10 pt-6 flex flex-col sm:flex-row justify-between items-center gap-4">
            <p class="text-xs text-white/30">&copy; {{ 'now'|date('Y') }} KitsCo Company Limited. All rights reserved.</p>
            <a href="{{ path('portal_dashboard') }}" class="text-xs text-white/40 hover:text-white transition-colors inline-flex items-center gap-1">
                <i class="bi bi-box-arrow-in-right"></i> Client Portal
            </a>
        </div>
    </div>
</footer>

<script>
document.getElementById('mobileMenuBtn').addEventListener('click', function() {
    document.getElementById('mobileMenu').classList.toggle('hidden');
});
document.querySelectorAll('#mobileMenu a').forEach(link => {
    link.addEventListener('click', () => document.getElementById('mobileMenu').classList.add('hidden'));
});
window.addEventListener('scroll', function() {
    const nav = document.getElementById('navbar');
    nav.classList.toggle('shadow-sm', window.scrollY > 50);
});

// Carousel initialization (for non-edit mode)
{% if not is_granted('ROLE_ADMIN') or app.request.query.get('edit') != '1' %}
document.querySelectorAll('.cms-carousel').forEach(carousel => {
    const slides = carousel.querySelectorAll('.cms-carousel-slide');
    const dots = carousel.querySelectorAll('.cms-carousel-dot');
    const prevBtn = carousel.querySelector('.cms-carousel-prev');
    const nextBtn = carousel.querySelector('.cms-carousel-next');

    if (slides.length === 0) return;

    let currentIndex = 0;
    let autoAdvanceTimer = null;
    let isPaused = false;

    function updateSlides(newIndex) {
        slides.forEach((slide, i) => {
            if (i === newIndex) {
                slide.style.transform = 'translateX(0)';
            } else if (i < newIndex) {
                slide.style.transform = 'translateX(-100%)';
            } else {
                slide.style.transform = 'translateX(100%)';
            }
        });

        dots.forEach((dot, i) => {
            dot.classList.toggle('bg-white', i === newIndex);
            dot.classList.toggle('bg-white/50', i !== newIndex);
        });

        currentIndex = newIndex;
    }

    function nextSlide() {
        const newIndex = (currentIndex + 1) % slides.length;
        updateSlides(newIndex);
    }

    function prevSlide() {
        const newIndex = (currentIndex - 1 + slides.length) % slides.length;
        updateSlides(newIndex);
    }

    function startAutoAdvance() {
        if (autoAdvanceTimer) clearInterval(autoAdvanceTimer);
        autoAdvanceTimer = setInterval(() => {
            if (!isPaused) nextSlide();
        }, 5000);
    }

    prevBtn?.addEventListener('click', () => { prevSlide(); startAutoAdvance(); });
    nextBtn?.addEventListener('click', () => { nextSlide(); startAutoAdvance(); });
    dots.forEach((dot, i) => {
        dot.addEventListener('click', () => { updateSlides(i); startAutoAdvance(); });
    });

    carousel.addEventListener('mouseenter', () => { isPaused = true; });
    carousel.addEventListener('mouseleave', () => { isPaused = false; });

    updateSlides(0);
    startAutoAdvance();
});
{% endif %}

// Toolkit quote pre-fill
document.querySelectorAll('.toolkit-quote-btn').forEach(btn => {
    btn.addEventListener('click', function(e) {
        e.preventDefault();
        const toolkit = this.dataset.toolkit;
        const items = this.dataset.items;
        const msg = document.getElementById('contact_message');
        if (msg) {
            msg.value = `I am interested in the ${toolkit}.\n\nBundle includes: ${items}\n\nPlease send me a quote.`;
        }
        document.getElementById('contact').scrollIntoView({ behavior: 'smooth' });
    });
});
</script>
{% endblock %}