{{include "header.html"}}
{{include "nav.html"}}

{{$slides := HomeSlides}}
{{if $slides}}
<section class="relative h-[600px] overflow-hidden">
    {{range $slides}}
    <div class="absolute inset-0 bg-cover bg-center" style="background-image: url('{{.Img}}');">
        <div class="absolute inset-0 bg-gradient-to-r from-primary/90 to-primary/40"></div>
        <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-full flex items-center">
            <div class="max-w-2xl text-white">
                <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-6 leading-tight">
                    {{.Title}}
                </h1>
                <p class="text-lg md:text-xl mb-8 text-gray-200">
                    {{.SubTitle}}
                </p>
                <div class="flex flex-wrap gap-4">
                    <a href="{{.URL}}" class="bg-accent hover:bg-accent-hover text-white px-8 py-3 rounded-lg font-semibold transition inline-block">
                        View Products
                    </a>
                    <a href="/contact" class="bg-white/20 hover:bg-white/30 text-white px-8 py-3 rounded-lg font-semibold transition inline-block backdrop-blur-sm">
                        Request Quote
                    </a>
                </div>
            </div>
        </div>
    </div>
    {{end}}
</section>
{{else}}
<section class="relative h-[600px] bg-primary">
    <div class="absolute inset-0 bg-gradient-to-br from-primary via-primary to-gray-900"></div>
    <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-full flex items-center">
        <div class="max-w-2xl text-white">
            <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-6 leading-tight">
                Reliable Tricycle Solutions<br>for Global Markets
            </h1>
            <p class="text-lg md:text-xl mb-8 text-gray-200">
                Professional manufacturer of electric, fuel, and hybrid tricycles. CE, EEC, and COC certified products for cargo, passenger, and agricultural applications.
            </p>
            <div class="flex flex-wrap gap-4">
                <a href="/products" class="bg-accent hover:bg-accent-hover text-white px-8 py-3 rounded-lg font-semibold transition inline-block">
                    View Products
                </a>
                <a href="/contact" class="bg-white/20 hover:bg-white/30 text-white px-8 py-3 rounded-lg font-semibold transition inline-block backdrop-blur-sm">
                    Request Quote
                </a>
            </div>
        </div>
    </div>
</section>
{{end}}

<section class="py-16 bg-white">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-12">
            <h2 class="text-3xl font-bold text-gray-900 mb-4">Product Categories</h2>
            <p class="text-lg text-gray-600 max-w-2xl mx-auto">
                Comprehensive range of tricycles designed for diverse applications and markets
            </p>
        </div>
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
            <a href="/cargo-electric" class="group relative h-80 rounded-xl overflow-hidden shadow-lg">
                <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/40 to-transparent z-10"></div>
                <img src="https://images.unsplash.com/photo-1580674285054-bed31e145f59?w=600&q=80" alt="Cargo Electric" class="absolute inset-0 w-full h-full object-cover group-hover:scale-105 transition duration-500">
                <div class="relative z-20 h-full flex flex-col justify-end p-6">
                    <span class="inline-block bg-green-500 text-white text-xs px-2 py-1 rounded mb-2 w-fit">Electric</span>
                    <h3 class="text-xl font-bold text-white mb-2">Cargo Electric</h3>
                    <p class="text-gray-300 text-sm">High-capacity electric cargo tricycles for urban logistics and delivery</p>
                </div>
            </a>
            <a href="/cargo-fuel" class="group relative h-80 rounded-xl overflow-hidden shadow-lg">
                <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/40 to-transparent z-10"></div>
                <img src="https://images.unsplash.com/photo-1565193566173-7a0ee3dbe261?w=600&q=80" alt="Cargo Fuel" class="absolute inset-0 w-full h-full object-cover group-hover:scale-105 transition duration-500">
                <div class="relative z-20 h-full flex flex-col justify-end p-6">
                    <span class="inline-block bg-blue-500 text-white text-xs px-2 py-1 rounded mb-2 w-fit">Fuel</span>
                    <h3 class="text-xl font-bold text-white mb-2">Cargo Fuel</h3>
                    <p class="text-gray-300 text-sm">Powerful fuel-powered cargo solutions for heavy-duty transport</p>
                </div>
            </a>
            <a href="/agri-electric" class="group relative h-80 rounded-xl overflow-hidden shadow-lg">
                <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/40 to-transparent z-10"></div>
                <img src="https://images.unsplash.com/photo-1500382017468-9049fed747ef?w=600&q=80" alt="Agricultural Electric" class="absolute inset-0 w-full h-full object-cover group-hover:scale-105 transition duration-500">
                <div class="relative z-20 h-full flex flex-col justify-end p-6">
                    <span class="inline-block bg-green-500 text-white text-xs px-2 py-1 rounded mb-2 w-fit">Electric</span>
                    <h3 class="text-xl font-bold text-white mb-2">Agricultural Electric</h3>
                    <p class="text-gray-300 text-sm">Eco-friendly electric tricycles for modern farming operations</p>
                </div>
            </a>
            <a href="/hybrid" class="group relative h-80 rounded-xl overflow-hidden shadow-lg">
                <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/40 to-transparent z-10"></div>
                <img src="https://images.unsplash.com/photo-1595246140625-573b715d11dc?w=600&q=80" alt="Hybrid Models" class="absolute inset-0 w-full h-full object-cover group-hover:scale-105 transition duration-500">
                <div class="relative z-20 h-full flex flex-col justify-end p-6">
                    <span class="inline-block bg-accent text-white text-xs px-2 py-1 rounded mb-2 w-fit">Hybrid</span>
                    <h3 class="text-xl font-bold text-white mb-2">Hybrid Models</h3>
                    <p class="text-gray-300 text-sm">Versatile hybrid tricycles combining efficiency and power</p>
                </div>
            </a>
        </div>
    </div>
</section>

<section class="py-16 bg-gray-50">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-12">
            <h2 class="text-3xl font-bold text-gray-900 mb-4">Why Choose Us</h2>
            <p class="text-lg text-gray-600 max-w-2xl mx-auto">
                Decades of manufacturing excellence and global export experience
            </p>
        </div>
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
            <div class="bg-white rounded-xl p-6 shadow-md text-center">
                <div class="w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center mx-auto mb-4">
                    <svg class="w-8 h-8 text-primary" 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>
                <h3 class="text-lg font-semibold mb-2">Certified Quality</h3>
                <p class="text-gray-600 text-sm">CE, EEC, COC, and ISO 9001 certified manufacturing standards</p>
            </div>
            <div class="bg-white rounded-xl p-6 shadow-md text-center">
                <div class="w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center mx-auto mb-4">
                    <svg class="w-8 h-8 text-primary" 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>
                <h3 class="text-lg font-semibold mb-2">Modern Factory</h3>
                <p class="text-gray-600 text-sm">50,000+ sqm facility with automated production lines</p>
            </div>
            <div class="bg-white rounded-xl p-6 shadow-md text-center">
                <div class="w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center mx-auto mb-4">
                    <svg class="w-8 h-8 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/>
                    </svg>
                </div>
                <h3 class="text-lg font-semibold mb-2">OEM/ODM Ready</h3>
                <p class="text-gray-600 text-sm">Full customization support from design to production</p>
            </div>
            <div class="bg-white rounded-xl p-6 shadow-md text-center">
                <div class="w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center mx-auto mb-4">
                    <svg class="w-8 h-8 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 5.636l-3.536 3.536m0 5.656l3.536 3.536M9.172 9.172L5.636 5.636m3.536 9.192l-3.536 3.536M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-5 0a4 4 0 11-8 0 4 4 0 018 0z"/>
                    </svg>
                </div>
                <h3 class="text-lg font-semibold mb-2">Global Support</h3>
                <p class="text-gray-600 text-sm">After-sales service and spare parts supply worldwide</p>
            </div>
        </div>
    </div>
</section>

<section class="py-12 bg-primary">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex flex-wrap justify-center items-center gap-8 md:gap-16">
            <div class="text-center">
                <div class="text-4xl font-bold text-white">CE</div>
                <div class="text-sm text-gray-300 mt-1">Certified</div>
            </div>
            <div class="text-center">
                <div class="text-4xl font-bold text-white">EEC</div>
                <div class="text-sm text-gray-300 mt-1">Approved</div>
            </div>
            <div class="text-center">
                <div class="text-4xl font-bold text-white">COC</div>
                <div class="text-sm text-gray-300 mt-1">Compliant</div>
            </div>
            <div class="text-center">
                <div class="text-4xl font-bold text-white">ISO</div>
                <div class="text-sm text-gray-300 mt-1">9001:2015</div>
            </div>
        </div>
    </div>
</section>

<section class="py-16 bg-white">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
            <div>
                <h2 class="text-3xl font-bold text-gray-900 mb-6">
                    Ready to Start Your Project?
                </h2>
                <p class="text-lg text-gray-600 mb-8">
                    Get a customized quote for your tricycle needs. Our team will respond within 24 hours with detailed specifications, pricing, and delivery timelines.
                </p>
                <div class="space-y-4">
                    <div class="flex items-center">
                        <svg class="w-5 h-5 text-accent mr-3" fill="currentColor" viewBox="0 0 20 20">
                            <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
                        </svg>
                        <span class="text-gray-700">Free consultation and sample development</span>
                    </div>
                    <div class="flex items-center">
                        <svg class="w-5 h-5 text-accent mr-3" fill="currentColor" viewBox="0 0 20 20">
                            <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
                        </svg>
                        <span class="text-gray-700">Flexible MOQ and payment terms</span>
                    </div>
                    <div class="flex items-center">
                        <svg class="w-5 h-5 text-accent mr-3" fill="currentColor" viewBox="0 0 20 20">
                            <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
                        </svg>
                        <span class="text-gray-700">Full technical support and documentation</span>
                    </div>
                </div>
            </div>
            <div class="text-center lg:text-right">
                <a href="/contact" class="inline-block bg-accent hover:bg-accent-hover text-white px-12 py-4 rounded-lg font-bold text-lg transition shadow-lg hover:shadow-xl">
                    Request a Quote
                    <svg class="w-5 h-5 inline-block ml-2" 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>
                <p class="text-sm text-gray-500 mt-4">Response within 24 hours</p>
            </div>
        </div>
    </div>
</section>

{{include "footer.html"}}
{{include "js.html"}}