@extends('layouts.frontend')

@section('content')
    <!-- Hero Section -->
    <section class="hero-section py-5">
        <div class="container position-relative">
            <div class="row align-items-center min-vh-80">
                <div class="col-lg-6 animate-on-scroll">
                    <h1 class="display-4 fw-bold mb-4 animate__animated animate__fadeInLeft">
                        Africa's Integrated Farm-to-Market Powerhouse
                    </h1>
                    <p class="lead mb-4 animate__animated animate__fadeInLeft animate__delay-1s">
                        Empowering Africa's Agriculture through Technology, Traceability, and Global Connectivity. 
                        Connecting 6.4M farmers to the world.
                    </p>
                    <div class="d-flex gap-3 animate__animated animate__fadeInUp animate__delay-2s">
                        <a href="{{ route('register') }}" class="btn btn-light btn-lg px-4 py-2 fw-bold">
                            Get Started
                        </a>
                        <a href="/about" class="btn btn-outline-light btn-lg px-4 py-2">
                            Learn More
                        </a>
                    </div>
                </div>
                <div class="col-lg-6 animate-on-scroll">
                    <div class="text-center animate__animated animate__fadeInRight">
                        <img src="https://placehold.co/600x400/28a745/ffffff?text=AMAC+Global+Trade" 
                             alt="AMAC Global Agriculture" 
                             class="img-fluid hero-image">
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Stats Section -->
    <section class="py-5 bg-white">
        <div class="container">
            <div class="row g-4">
                <div class="col-md-4 animate-on-scroll">
                    <div class="stat-card">
                        <h2 class="display-4 fw-bold">+246%</h2>
                        <p class="mb-0">Share Price Growth Post-rebrand</p>
                    </div>
                </div>
                <div class="col-md-4 animate-on-scroll">
                    <div class="stat-card">
                        <h2 class="display-4 fw-bold">SH 1.17B</h2>
                        <p class="mb-0">Current Market Cap</p>
                    </div>
                </div>
                <div class="col-md-4 animate-on-scroll">
                    <div class="stat-card">
                        <h2 class="display-4 fw-bold">47</h2>
                        <p class="mb-0">Export Countries Worldwide</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Features Section -->
    <section class="py-5 bg-light">
        <div class="container">
            <h2 class="text-center section-title animate-on-scroll">Our Competitive Advantage</h2>
            <div class="row g-4">
                <div class="col-md-4 animate-on-scroll">
                    <div class="card product-card h-100 text-center p-4">
                        <img src="https://placehold.co/400x300/28a745/ffffff?text=Verification" 
                             alt="Onboarding & Accreditation" 
                             class="card-img-top product-image">
                        <div class="feature-icon mx-auto text-white mt-3">
                            <i class="bi bi-check-circle-fill fs-4"></i>
                        </div>
                        <h5>Onboarding & Accreditation</h5>
                        <p class="text-muted">Exporters register with export profiles, quality certifications, and traceability compliance.</p>
                    </div>
                </div>
                <div class="col-md-4 animate-on-scroll">
                    <div class="card product-card h-100 text-center p-4">
                        <img src="https://placehold.co/400x300/28a745/ffffff?text=Digital+Listings" 
                             alt="Digital Product Listings" 
                             class="card-img-top product-image">
                        <div class="feature-icon mx-auto text-white mt-3">
                            <i class="bi bi-list-check fs-4"></i>
                        </div>
                        <h5>Digital Product Listings</h5>
                        <p class="text-muted">Export-ready consignments listed with auto-verified paperwork.</p>
                    </div>
                </div>
                <div class="col-md-4 animate-on-scroll">
                    <div class="card product-card h-100 text-center p-4">
                        <img src="https://placehold.co/400x300/28a745/ffffff?text=Secure+Payments" 
                             alt="Secure Transactions" 
                             class="card-img-top product-image">
                        <div class="feature-icon mx-auto text-white mt-3">
                            <i class="bi bi-shield-check fs-4"></i>
                        </div>
                        <h5>Secure Transactions</h5>
                        <p class="text-muted">Escrow & payment security with Dubai-based financial protection.</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Value Proposition -->
    <section class="py-5">
        <div class="container">
            <h2 class="text-center section-title animate-on-scroll">Value Proposition</h2>
            <div class="row g-4">
                <div class="col-md-4 animate-on-scroll">
                    <div class="card border-success h-100">
                        <div class="card-header bg-success text-white text-center">
                            <h5 class="mb-0">For Exporters</h5>
                        </div>
                        <div class="card-body text-center">
                            <img src="https://placehold.co/400x200/28a745/ffffff?text=Exporters" 
                                 alt="For Exporters" 
                                 class="img-fluid mb-3 rounded">
                            <ul class="list-unstyled text-start">
                                <li class="mb-2">✓ Instant access to high-value buyers</li>
                                <li class="mb-2">✓ Automated compliance</li>
                                <li class="mb-2">✓ Risk-free payment</li>
                                <li class="mb-2">✓ Global market access</li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 animate-on-scroll">
                    <div class="card border-primary h-100">
                        <div class="card-header bg-primary text-white text-center">
                            <h5 class="mb-0">For Buyers</h5>
                        </div>
                        <div class="card-body text-center">
                            <img src="https://placehold.co/400x200/007bff/ffffff?text=International+Buyers" 
                                 alt="For Buyers" 
                                 class="img-fluid mb-3 rounded">
                            <ul class="list-unstyled text-start">
                                <li class="mb-2">✓ Validated quality & produce</li>
                                <li class="mb-2">✓ Full traceability</li>
                                <li class="mb-2">✓ Secure payment & escrow</li>
                                <li class="mb-2">✓ Streamlined logistics</li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 animate-on-scroll">
                    <div class="card border-warning h-100">
                        <div class="card-header bg-warning text-white text-center">
                            <h5 class="mb-0">For AMAC PLC</h5>
                        </div>
                        <div class="card-body text-center">
                            <img src="https://placehold.co/400x200/ffc107/000000?text=AMAC+Platform" 
                                 alt="For AMAC PLC" 
                                 class="img-fluid mb-3 rounded">
                            <ul class="list-unstyled text-start">
                                <li class="mb-2">✓ Best-in-class standards</li>
                                <li class="mb-2">✓ Transparency & compliance</li>
                                <li class="mb-2">✓ Strong vetted ecosystem</li>
                                <li class="mb-2">✓ Premium market positioning</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Partners Section -->
    <section class="py-5 bg-light">
        <div class="container">
            <h2 class="text-center section-title animate-on-scroll">Our Strategic Partners</h2>
            <p class="text-center mb-5">Trusted by industry leaders worldwide</p>
            <div class="row g-4 justify-content-center align-items-center">
                <div class="col-6 col-md-3 col-lg-2 text-center animate-on-scroll">
                    <div class="bg-white rounded-3 p-3 shadow-sm h-100 d-flex align-items-center justify-content-center">
                        <img src="https://placehold.co/150x80/ffffff/28a745?text=DHL" 
                             alt="DHL Logistics" 
                             class="partner-logo img-fluid">
                    </div>
                </div>
                <div class="col-6 col-md-3 col-lg-2 text-center animate-on-scroll">
                    <div class="bg-white rounded-3 p-3 shadow-sm h-100 d-flex align-items-center justify-content-center">
                        <img src="https://placehold.co/150x80/ffffff/28a745?text=DMCC" 
                             alt="DMCC Dubai" 
                             class="partner-logo img-fluid">
                    </div>
                </div>
                <div class="col-6 col-md-3 col-lg-2 text-center animate-on-scroll">
                    <div class="bg-white rounded-3 p-3 shadow-sm h-100 d-flex align-items-center justify-content-center">
                        <img src="https://placehold.co/150x80/ffffff/28a745?text=Nawiri+Bank" 
                             alt="Nawiri Digital Bank" 
                             class="partner-logo img-fluid">
                    </div>
                </div>
                <div class="col-6 col-md-3 col-lg-2 text-center animate-on-scroll">
                    <div class="bg-white rounded-3 p-3 shadow-sm h-100 d-flex align-items-center justify-content-center">
                        <img src="https://placehold.co/150x80/ffffff/28a745?text=KTDA" 
                             alt="KTDA Tea" 
                             class="partner-logo img-fluid">
                    </div>
                </div>
                <div class="col-6 col-md-3 col-lg-2 text-center animate-on-scroll">
                    <div class="bg-white rounded-3 p-3 shadow-sm h-100 d-flex align-items-center justify-content-center">
                        <img src="https://placehold.co/150x80/ffffff/28a745?text=WRSC" 
                             alt="WRSC Certification" 
                             class="partner-logo img-fluid">
                    </div>
                </div>
                <div class="col-6 col-md-3 col-lg-2 text-center animate-on-scroll">
                    <div class="bg-white rounded-3 p-3 shadow-sm h-100 d-flex align-items-center justify-content-center">
                        <img src="https://placehold.co/150x80/ffffff/28a745?text=KEBS" 
                             alt="KEBS Standards" 
                             class="partner-logo img-fluid">
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- CTA Section -->
    <section class="py-5 bg-success text-white">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-lg-8 animate-on-scroll">
                    <h3 class="display-5 fw-bold mb-3">Ready to Transform African Agriculture?</h3>
                    <p class="lead mb-4">Join thousands of exporters and buyers already using our platform.</p>
                </div>
                <div class="col-lg-4 animate-on-scroll text-lg-end">
                    <a href="{{ route('register') }}" class="btn btn-light btn-lg px-5 py-3 fw-bold">
                        Start Trading Today
                    </a>
                </div>
            </div>
        </div>
    </section>
@endsection