<?= $this->extend('front/layout') ?>

<?= $this->section('styles') ?>
<style>
    .about-hero {
        background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('<?= base_url('assets/images/about_bg.png') ?>');
        background-size: cover;
        background-position: center;
        color: white;
        padding: 120px 0;
        text-align: center;
        position: relative;
        overflow: hidden;
    }
    .about-hero h1 {
        font-size: 3.5rem;
        color: white;
        margin-bottom: 20px;
    }
    .about-hero p {
        font-size: 1.2rem;
        max-width: 600px;
        margin: 0 auto;
        opacity: 0.9;
    }
    .hero-pattern {
        position: absolute;
        top: -50px;
        right: -50px;
        width: 300px;
        height: 300px;
        background-color: var(--accent-gold);
        border-radius: 50%;
        opacity: 0.2;
    }
    .hero-pattern-2 {
        position: absolute;
        bottom: -100px;
        left: -50px;
        width: 250px;
        height: 250px;
        background-color: var(--primary-dark);
        border-radius: 50%;
        opacity: 0.1;
    }
    
    .story-section {
        padding: 100px 0;
        background-color: white;
    }
    .story-image {
        width: 100%;
        height: 500px;
        object-fit: cover;
        border-radius: 20px;
        box-shadow: 0 20px 50px rgba(0,0,0,0.1);
    }
    .story-content h2 {
        font-size: 2.5rem;
        color: var(--primary-dark);
        margin-bottom: 30px;
    }
    .story-content p {
        color: var(--text-muted);
        font-size: 1.05rem;
        line-height: 1.8;
        margin-bottom: 20px;
    }
    
    .features-grid {
        background-color: var(--bg-light);
        padding: 100px 0;
    }
    .feature-card-large {
        background: white;
        padding: 40px;
        border-radius: 12px;
        height: 100%;
        border: 1px solid var(--border-color);
        transition: transform 0.3s;
    }
    .feature-card-large:hover {
        transform: translateY(-5px);
        box-shadow: 0 15px 30px rgba(0,0,0,0.05);
    }
    .feature-card-large i {
        font-size: 3rem;
        color: var(--accent-gold);
        margin-bottom: 20px;
        display: inline-block;
    }
    .feature-card-large h4 {
        color: var(--primary-dark);
        margin-bottom: 15px;
    }
    
    .contact-banner {
        background-color: var(--accent-gold);
        padding: 80px 0;
        text-align: center;
    }
    .contact-banner h2 {
        color: var(--primary-dark);
        margin-bottom: 20px;
    }
    .contact-banner .btn {
        background-color: var(--primary-dark);
        color: white;
        border: none;
        padding: 12px 35px;
        font-size: 1.1rem;
    }
</style>
<?= $this->endSection() ?>

<?= $this->section('content') ?>

<!-- Hero Section -->
<section class="about-hero">
    <div class="hero-pattern"></div>
    <div class="hero-pattern-2"></div>
    <div class="container position-relative z-10" data-aos="fade-up">
        <h1 class="font-serif fw-bold">Our Story</h1>
        <p>Discover the passion and science behind Jasper Phytoextracts. We are committed to delivering the purest natural extracts to the world.</p>
    </div>
</section>

<!-- Story Section -->
<section class="story-section">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-6 mb-5 mb-lg-0" data-aos="fade-right">
                <img src="<?= base_url('assets/images/about_farm.png') ?>" alt="Lush Tea Plantation" class="story-image">
            </div>
            <div class="col-lg-5 offset-lg-1 story-content" data-aos="fade-left">
                <p class="text-gold mb-2 d-flex align-items-center">
                    <span style="width: 30px; height: 1px; background: var(--accent-gold); display: inline-block; margin-right: 10px;"></span>
                    A LEGACY OF EXCELLENCE
                </p>
                <h2 class="font-serif fw-bold">Rooted in Nature.<br>Refined by Science.</h2>
                <p>
                    Jasper Phytoextracts was founded with a singular vision: to bridge the gap between ancient botanical wisdom and modern laboratory rigor. We understand that the foundation of any great product is the purity of its ingredients.
                </p>
                <p>
                    We cater to our prestigious clients with the purest forms of extracts, essential oils, spice oleoresins, herbs, and spices. We take upon ourselves the challenge of processing natural products to serve global industries, from food and beverage to cosmetics and pharmaceuticals.
                </p>
                <div class="mt-5 d-flex gap-4">
                    <div>
                        <h3 class="font-serif" style="color: var(--primary-bright);">150+</h3>
                        <p class="text-muted small text-uppercase">Active Extracts</p>
                    </div>
                    <div>
                        <h3 class="font-serif" style="color: var(--primary-bright);">99.9%</h3>
                        <p class="text-muted small text-uppercase">Purity Standard</p>
                    </div>
                    <div>
                        <h3 class="font-serif" style="color: var(--primary-bright);">24/7</h3>
                        <p class="text-muted small text-uppercase">Global Support</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Features Grid -->
<section class="features-grid">
    <div class="container">
        <div class="text-center mb-5" data-aos="fade-up">
            <h2 class="font-serif fw-bold" style="color: var(--primary-dark);">Why Choose Jasper</h2>
            <p class="text-muted mx-auto" style="max-width: 600px;">Our commitment to quality, sustainability, and technological innovation sets us apart in the global botanical market.</p>
        </div>
        <div class="row g-4">
            <div class="col-md-4" data-aos="fade-up" data-aos-delay="100">
                <div class="feature-card-large">
                    <i class="bi bi-shield-check"></i>
                    <h4 class="font-serif fw-bold">Uncompromising Quality</h4>
                    <p class="text-muted">Every batch undergoes rigorous HPLC and GC-MS testing in our advanced laboratories to ensure absolute molecular purity and consistency.</p>
                </div>
            </div>
            <div class="col-md-4" data-aos="fade-up" data-aos-delay="200">
                <div class="feature-card-large">
                    <i class="bi bi-globe-americas"></i>
                    <h4 class="font-serif fw-bold">Sustainable Sourcing</h4>
                    <p class="text-muted">We partner directly with farmers, promoting ethical agricultural practices and ensuring farm-to-table traceability for every extract.</p>
                </div>
            </div>
            <div class="col-md-4" data-aos="fade-up" data-aos-delay="300">
                <div class="feature-card-large">
                    <i class="bi bi-award"></i>
                    <h4 class="font-serif fw-bold">Global Certifications</h4>
                    <p class="text-muted">Manufactured in world-class facilities proudly certified by ISO 22000, FSSAI, HALAL, and GMP standards.</p>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Contact Banner -->
<section class="contact-banner">
    <div class="container" data-aos="zoom-in">
        <h2 class="font-serif fw-bold">Ready to Elevate Your Products?</h2>
        <p class="mb-4" style="color: var(--primary-dark); opacity: 0.8;">Connect with our procurement specialists today for custom technical specifications and volume pricing.</p>
        <a href="<?= base_url('contact') ?>" class="btn shadow">Get in Touch <i class="bi bi-arrow-right ms-2"></i></a>
    </div>
</section>

<?= $this->endSection() ?>
