@extends('layouts.frontend')

@section('content')
    <!-- Page Header -->
    <section class="bg-success py-5 text-white">
        <div class="container">
            <div class="row">
                <div class="col-12 text-center animate-on-scroll">
                    <h1 class="display-4 fw-bold">Our Products</h1>
                    <p class="lead">Premium African Agricultural Exports</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Products Grid -->
    <section class="py-5">
        <div class="container">
            <div class="row g-4">
                <!-- Coffee -->
                <div class="col-md-6 col-lg-4 animate-on-scroll">
                    <div class="card product-card h-100">
                        <img src="https://placehold.co/600x400/8B4513/ffffff?text=Premium+Coffee" 
                             alt="Kenyan Coffee" 
                             class="card-img-top product-image">
                        <div class="card-body">
                            <h5 class="card-title">Coffee</h5>
                            <p class="card-text">Kenya is Africa's third-largest coffee exporter with vibrant flavors and exceptional quality Arabica beans.</p>
                            <ul class="list-unstyled">
                                <li><strong>Annual Export:</strong> 45,000 MT</li>
                                <li><strong>Value:</strong> $200M+</li>
                                <li><strong>Main Buyers:</strong> EU, USA, GCC</li>
                            </ul>
                            <div class="text-center">
                                <span class="badge bg-success">In Season</span>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Fruits & Vegetables -->
                <div class="col-md-6 col-lg-4 animate-on-scroll">
                    <div class="card product-card h-100">
                        <img src="https://placehold.co/600x400/28a745/ffffff?text=Fresh+Produce" 
                             alt="Fresh Fruits & Vegetables" 
                             class="card-img-top product-image">
                        <div class="card-body">
                            <h5 class="card-title">Fruits & Vegetables</h5>
                            <p class="card-text">Fresh, high-quality produce including mangoes, pineapples, baby corn, and fine beans.</p>
                            <ul class="list-unstyled">
                                <li>✓ Mangoes</li>
                                <li>✓ Pineapples</li>
                                <li>✓ Baby Corn</li>
                                <li>✓ Fine Beans & French Beans</li>
                                <li>✓ Broccoli & Herbs</li>
                            </ul>
                            <div class="text-center">
                                <span class="badge bg-success">Multiple Varieties</span>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Tea -->
                <div class="col-md-6 col-lg-4 animate-on-scroll">
                    <div class="card product-card h-100">
                        <img src="https://placehold.co/600x400/008080/ffffff?text=Kenyan+Tea" 
                             alt="Kenyan Tea" 
                             class="card-img-top product-image">
                        <div class="card-body">
                            <h5 class="card-title">Tea</h5>
                            <p class="card-text">Kenya is the world's leading black tea exporter with premium varieties including green, purple, and white teas.</p>
                            <ul class="list-unstyled">
                                <li><strong>Annual Export:</strong> 500,000 MT</li>
                                <li><strong>Value:</strong> $1B+</li>
                                <li><strong>Varieties:</strong> Black, Green, Purple, White</li>
                            </ul>
                            <div class="text-center">
                                <span class="badge bg-warning text-dark">World Leader</span>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Nuts -->
                <div class="col-md-6 col-lg-4 animate-on-scroll">
                    <div class="card product-card h-100">
                        <img src="https://placehold.co/600x400/8B4513/ffffff?text=Premium+Nuts" 
                             alt="African Nuts" 
                             class="card-img-top product-image">
                        <div class="card-body">
                            <h5 class="card-title">Nuts</h5>
                            <p class="card-text">Premium nuts including macadamia, cashew, peanuts, and groundnuts from key African regions.</p>
                            <ul class="list-unstyled">
                                <li>✓ Macadamia</li>
                                <li>✓ Cashew</li>
                                <li>✓ Peanuts</li>
                                <li>✓ Shea Nuts</li>
                                <li>✓ Groundnuts</li>
                            </ul>
                            <div class="text-center">
                                <span class="badge bg-success">High Demand</span>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Meats -->
                <div class="col-md-6 col-lg-4 animate-on-scroll">
                    <div class="card product-card h-100">
                        <img src="https://placehold.co/600x400/DC143C/ffffff?text=Premium+Meats" 
                             alt="African Meats" 
                             class="card-img-top product-image">
                        <div class="card-body">
                            <h5 class="card-title">Meats</h5>
                            <p class="card-text">Premium protein exports with quality assurance from farm to global markets.</p>
                            <ul class="list-unstyled">
                                <li>✓ Beef</li>
                                <li>✓ Poultry</li>
                                <li>✓ Fish</li>
                                <li>✓ Mutton</li>
                                <li>✓ Goat Meat</li>
                            </ul>
                            <div class="text-center">
                                <span class="badge bg-info">Halal Certified</span>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Herbs -->
                <div class="col-md-6 col-lg-4 animate-on-scroll">
                    <div class="card product-card h-100">
                        <img src="https://placehold.co/600x400/6B8E23/ffffff?text=Fresh+Herbs" 
                             alt="Fresh Herbs" 
                             class="card-img-top product-image">
                        <div class="card-body">
                            <h5 class="card-title">Herbs & Spices</h5>
                            <p class="card-text">Rich variety of herbs known for vibrant flavors and aromatic qualities.</p>
                            <ul class="list-unstyled">
                                <li>✓ Rosemary</li>
                                <li>✓ Mint Leaves</li>
                                <li>✓ Oregano</li>
                                <li>✓ Basil</li>
                                <li>✓ Thyme & Sage</li>
                            </ul>
                            <div class="text-center">
                                <span class="badge bg-success">Organic Available</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Product Details -->
    <section class="py-5 bg-light">
        <div class="container">
            <h2 class="text-center section-title mb-5">Product Highlights</h2>
            
            <!-- Mango -->
            <div class="row align-items-center mb-5 animate-on-scroll">
                <div class="col-md-4">
                    <div class="card border-success">
                        <img src="https://placehold.co/400x300/FFD700/000000?text=Kenyan+Mangoes" 
                             alt="Kenyan Mangoes" 
                             class="card-img-top">
                        <div class="card-body text-center">
                            <h5 class="text-success">Mango</h5>
                        </div>
                    </div>
                </div>
                <div class="col-md-8">
                    <h4>Kenyan Mangoes</h4>
                    <p>Known for producing some of the most flavorful and aromatic mangoes in the world. Grown in tropical climate, celebrated for sweetness, rich texture, and vibrant color.</p>
                    <ul>
                        <li><strong>Export Seasons:</strong> June-August & November-February</li>
                        <li><strong>Packaging:</strong> 4kg crates/cartons</li>
                        <li><strong>Varieties:</strong> Multiple premium varieties available</li>
                        <li><strong>Quality:</strong> Grade A export quality</li>
                    </ul>
                    <div class="mt-3">
                        <span class="badge bg-success me-2">Sweet</span>
                        <span class="badge bg-warning me-2 text-dark">Aromatic</span>
                        <span class="badge bg-info me-2">Premium</span>
                    </div>
                </div>
            </div>

            <!-- Pineapple -->
            <div class="row align-items-center mb-5 animate-on-scroll">
                <div class="col-md-8">
                    <h4>Kenyan Pineapples</h4>
                    <p>Prized for sweet tropical flavor and juiciness. Notable varieties include MD2 and Smooth Cayenne.</p>
                    <ul>
                        <li><strong>Growth:</strong> Year-round with peak exports</li>
                        <li><strong>Peak Seasons:</strong> May-August and November-January</li>
                        <li><strong>Packaging:</strong> 10-12kg cartons for export freshness</li>
                        <li><strong>Varieties:</strong> MD2, Smooth Cayenne</li>
                    </ul>
                    <div class="mt-3">
                        <span class="badge bg-success me-2">Juicy</span>
                        <span class="badge bg-warning me-2 text-dark">Sweet</span>
                        <span class="badge bg-info me-2">Tropical</span>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="card border-warning">
                        <img src="https://placehold.co/400x300/FFA500/000000?text=Kenyan+Pineapples" 
                             alt="Kenyan Pineapples" 
                             class="card-img-top">
                        <div class="card-body text-center">
                            <h5 class="text-warning">Pineapple</h5>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Coffee Deep Dive -->
            <div class="row align-items-center mb-5 animate-on-scroll">
                <div class="col-md-4">
                    <div class="card bg-brown text-white">
                        <img src="https://placehold.co/400x300/8B4513/ffffff?text=Arabica+Coffee" 
                             alt="Kenyan Coffee Beans" 
                             class="card-img-top">
                        <div class="card-body text-center">
                            <h5>Kenyan Arabica</h5>
                        </div>
                    </div>
                </div>
                <div class="col-md-8">
                    <h4>Premium Kenyan Coffee</h4>
                    <p>Grown at high altitudes on rich volcanic soils, Kenyan Arabica beans are known for bright acidity, full-bodied richness, and complex flavor profiles with notes of fruit, citrus, and wine-like undertones.</p>
                    <div class="row mt-4">
                        <div class="col-6">
                            <h6 class="text-success">Production Network</h6>
                            <ul class="list-unstyled">
                                <li>✓ 300+ Millers</li>
                                <li>✓ 800+ Cooperatives</li>
                                <li>✓ 100+ Factories</li>
                                <li>✓ 2000+ Farmers</li>
                            </ul>
                        </div>
                        <div class="col-6">
                            <h6 class="text-success">Export Markets</h6>
                            <ul class="list-unstyled">
                                <li>✓ European Union</li>
                                <li>✓ United States</li>
                                <li>✓ GCC Countries</li>
                                <li>✓ Asian Markets</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- CTA Section -->
    <section class="py-5 bg-success text-white">
        <div class="container text-center">
            <h3 class="display-5 fw-bold mb-3">Interested in Our Products?</h3>
            <p class="lead mb-4">Contact us for pricing, availability, and export requirements.</p>
            <a href="/contact" class="btn btn-light btn-lg px-5 py-3 fw-bold">
                Contact Sales Team
            </a>
        </div>
    </section>
@endsection