@extends('layouts.frontend')

@section('content')
    <!-- Page Header -->
    <section class="bg-success py-5 text-white position-relative">
        <div class="container position-relative">
            <div class="row">
                <div class="col-12 text-center animate-on-scroll">
                    <h1 class="display-4 fw-bold">About AMAC PLC</h1>
                    <p class="lead">From Kenya Orchards to East Africa's Flagship Agri-Export Leader</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Company Story -->
    <section class="py-5">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-lg-6 animate-on-scroll">
                    <img src="https://placehold.co/600x400/28a745/ffffff?text=AMAC+Headquarters" 
                         alt="AMAC PLC Headquarters" 
                         class="img-fluid rounded shadow-lg">
                </div>
                <div class="col-lg-6 animate-on-scroll">
                    <h2 class="section-title">Our Journey</h2>
                    <p class="lead">
                        Founded as Kenya Orchards Ltd, AMAC PLC achieved a breakthrough transformation in 2024 
                        with a strategic rebrand and acquisition, becoming East Africa's flagship agri-export leader.
                    </p>
                    <p>
                        Headquartered in Westport Industrial City, Nairobi, we are listed on the Nairobi Securities Exchange, 
                        with governance led by an agricultural innovations board, and strategic alliances in finance, 
                        logistics, and compliance.
                    </p>
                    <div class="row mt-4">
                        <div class="col-4 text-center">
                            <h3 class="text-success fw-bold">+246%</h3>
                            <p class="small">Share Price Growth</p>
                        </div>
                        <div class="col-4 text-center">
                            <h3 class="text-success fw-bold">SH 1.17B</h3>
                            <p class="small">Market Cap</p>
                        </div>
                        <div class="col-4 text-center">
                            <h3 class="text-success fw-bold">47</h3>
                            <p class="small">Export Countries</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Vision Mission Values -->
    <section class="py-5 bg-light">
        <div class="container">
            <div class="row g-4">
                <div class="col-md-4 animate-on-scroll">
                    <div class="card border-success h-100 text-center">
                        <div class="card-body">
                            <img src="https://placehold.co/400x200/28a745/ffffff?text=Our+Vision" 
                                 alt="Our Vision" 
                                 class="img-fluid rounded mb-3">
                            <div class="feature-icon mx-auto text-white bg-success">
                                <i class="bi bi-eye-fill"></i>
                            </div>
                            <h4 class="text-success">Our Vision</h4>
                            <p>Africa's #1 end-to-end agricultural value chain platform, connecting 6.4M farmers to the world.</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 animate-on-scroll">
                    <div class="card border-primary h-100 text-center">
                        <div class="card-body">
                            <img src="https://placehold.co/400x200/007bff/ffffff?text=Our+Mission" 
                                 alt="Our Mission" 
                                 class="img-fluid rounded mb-3">
                            <div class="feature-icon mx-auto text-white bg-primary">
                                <i class="bi bi-bullseye"></i>
                            </div>
                            <h4 class="text-primary">Our Mission</h4>
                            <p>Transform Africa's agricultural assets into premium, traceable, and sustainable exports using digital marketplace, advanced cold chain, and instant payment systems.</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 animate-on-scroll">
                    <div class="card border-warning h-100 text-center">
                        <div class="card-body">
                            <img src="https://placehold.co/400x200/ffc107/000000?text=Core+Values" 
                                 alt="Core Values" 
                                 class="img-fluid rounded mb-3">
                            <div class="feature-icon mx-auto text-white bg-warning">
                                <i class="bi bi-heart-fill"></i>
                            </div>
                            <h4 class="text-warning">Core Values</h4>
                            <ul class="list-unstyled text-start">
                                <li>✓ Empowerment & Transparency</li>
                                <li>✓ Inclusion & Diversity</li>
                                <li>✓ Sustainability & Innovation</li>
                                <li>✓ Quality & Traceability</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Market Context -->
    <section class="py-5">
        <div class="container">
            <div class="row">
                <div class="col-12 text-center mb-5">
                    <h2 class="section-title animate-on-scroll">The $1.01 Trillion Opportunity</h2>
                </div>
            </div>
            <div class="row align-items-center">
                <div class="col-lg-6 animate-on-scroll">
                    <img src="https://placehold.co/600x400/28a745/ffffff?text=African+Agriculture" 
                         alt="African Agriculture Market" 
                         class="img-fluid rounded shadow-lg">
                </div>
                <div class="col-lg-6 animate-on-scroll">
                    <div class="card bg-success text-white">
                        <div class="card-body p-4">
                            <h3 class="card-title">Africa's Agricultural Potential</h3>
                            <p class="card-text">
                                Africa's agriculture is a <strong>$1.01 trillion market</strong> with compound annual growth 
                                (CAGR) <strong>upwards of 7.6%</strong>. Sub-Saharan Africa leads global fruit/vegetable, 
                                coffee, and tea supply.
                            </p>
                            <p class="card-text">
                                Buyers demand traceable, ethically sourced, climate-resilient produce—driven by ESG 
                                mandates and food safety standards in EU, GCC, and Asia.
                            </p>
                        </div>
                    </div>
                    <div class="card border-warning mt-4">
                        <div class="card-body p-4">
                            <h4 class="text-warning">The Digital Gap</h4>
                            <p>
                                Only <strong>18% of African exporters</strong> use integrated digital platforms. 
                                AMAC addresses this gap through full-stack technology and certified logistics partnership.
                            </p>
                            <div class="progress mb-3">
                                <div class="progress-bar bg-warning" style="width: 18%">18%</div>
                            </div>
                            <small class="text-muted">African exporters using digital platforms</small>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Team Section -->
    <section class="py-5 bg-light">
        <div class="container">
            <h2 class="text-center section-title animate-on-scroll">Our Global Reach</h2>
            <div class="row g-4">
                <div class="col-md-3 animate-on-scroll">
                    <div class="card text-center border-0">
                        <div class="card-body">
                            <img src="https://placehold.co/200x200/28a745/ffffff?text=EU+Market" 
                                 alt="European Market" 
                                 class="img-fluid rounded-circle mb-3">
                            <h5>European Union</h5>
                            <p class="text-muted">Premium markets in Germany, Belgium, Italy</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-3 animate-on-scroll">
                    <div class="card text-center border-0">
                        <div class="card-body">
                            <img src="https://placehold.co/200x200/28a745/ffffff?text=GCC+Market" 
                                 alt="GCC Market" 
                                 class="img-fluid rounded-circle mb-3">
                            <h5>GCC Countries</h5>
                            <p class="text-muted">Dubai, Saudi Arabia, UAE markets</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-3 animate-on-scroll">
                    <div class="card text-center border-0">
                        <div class="card-body">
                            <img src="https://placehold.co/200x200/28a745/ffffff?text=USA+Market" 
                                 alt="USA Market" 
                                 class="img-fluid rounded-circle mb-3">
                            <h5>United States</h5>
                            <p class="text-muted">North American export destinations</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-3 animate-on-scroll">
                    <div class="card text-center border-0">
                        <div class="card-body">
                            <img src="https://placehold.co/200x200/28a745/ffffff?text=Asia+Market" 
                                 alt="Asian Market" 
                                 class="img-fluid rounded-circle mb-3">
                            <h5>Asia Pacific</h5>
                            <p class="text-muted">Growing markets in China and beyond</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection