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

<?= $this->section('styles') ?>
<style>
    /* Custom styles for home page specific elements */
    .hero-section {
        background: linear-gradient(to right, rgba(251, 253, 251, 0.98), rgba(251, 253, 251, 0.7)), url('<?= base_url("assets/images/hero_flask_bg.png") ?>') no-repeat center center/cover;
        min-height: 100vh;
        display: flex;
        align-items: center;
        padding: 80px 0;
        position: relative;
        overflow: hidden;
    }
    
    .hero-content {
        max-width: 600px;
        position: relative;
        z-index: 2;
    }

    .hero-image-wrapper {
        position: relative;
        z-index: 2;
        perspective: 1000px;
    }
    
    .hero-image {
        width: 100%;
        max-width: 480px;
        height: auto;
        border: 1px solid var(--glass-highlight);
        border-radius: 20px;
        box-shadow: 0 30px 60px rgba(0,0,0,0.6);
        transform: rotateY(-5deg) rotateX(5deg);
        transition: transform 0.5s ease;
    }
    .hero-image:hover {
        transform: rotateY(0) rotateX(0);
    }

    .stat-card {
        padding: 20px 30px;
        position: absolute;
        z-index: 3;
        border-radius: 16px;
    }
    .stat-card-1 { bottom: -30px; left: -40px; animation-delay: 0.5s; }
    .stat-card-2 { top: -20px; right: -40px; animation-delay: 1.5s; }

    /* New About Section Styles */
    .about-premium {
        background: radial-gradient(circle at top right, rgba(212, 175, 55, 0.08), transparent 50%), var(--bg-surface);
        padding: 120px 0;
        position: relative;
        overflow: hidden;
    }
    .arch-image {
        width: 100%;
        height: 600px;
        object-fit: cover;
        border-radius: 300px 300px 20px 20px;
        border: 2px solid var(--glass-highlight);
        box-shadow: 0 40px 80px rgba(0,0,0,0.5);
    }
    .address-card {
        margin-top: 40px;
        padding: 35px;
    }
    .address-card h6 {
        color: var(--accent-gold);
        font-family: 'Playfair Display', serif;
        font-size: 1.2rem;
        margin-bottom: 15px;
        letter-spacing: 1px;
    }
    .address-card p {
        color: var(--text-secondary);
        font-size: 0.95rem;
        margin-bottom: 25px;
    }

    /* New Products Layout Styles */
    .products-premium-box {
        background: linear-gradient(145deg, var(--bg-surface-elevated), var(--bg-main));
        border: 1px solid var(--glass-highlight);
        padding: 80px 50px;
        position: relative;
    }
    .products-premium-box h3 {
        color: var(--accent-gold);
        font-family: 'Playfair Display', serif;
        margin-bottom: 30px;
        font-size: 1.8rem;
    }
    .products-list {
        list-style-type: none;
        padding-left: 0;
    }
    .products-list li {
        margin-bottom: 15px;
        font-size: 1rem;
        color: var(--text-secondary);
        position: relative;
        padding-left: 25px;
        transition: all 0.3s ease;
        cursor: pointer;
    }
    .products-list li::before {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 8px;
        height: 8px;
        background-color: var(--accent-gold);
        border-radius: 50%;
        box-shadow: 0 0 10px var(--accent-glow);
        transition: all 0.3s ease;
    }
    .products-list li:hover {
        color: var(--text-primary);
        transform: translateX(10px);
    }
    .products-list li:hover::before {
        width: 12px;
        border-radius: 4px;
    }
    
    .center-circle-wrapper {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 5;
        width: 350px;
        height: 350px;
    }
    .center-circle-img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        object-fit: cover;
        border: 4px solid var(--accent-gold);
        padding: 10px;
        animation: spin 40s linear infinite;
        box-shadow: 0 0 50px rgba(0,0,0,0.5), inset 0 0 20px rgba(212, 175, 55, 0.3);
    }
    @keyframes spin {
        100% { transform: rotate(360deg); }
    }
    
    /* Decorative glowing orbs */
    .glow-orb {
        position: absolute;
        border-radius: 50%;
        filter: blur(80px);
        z-index: 0;
        pointer-events: none;
    }
    .orb-1 {
        width: 300px; height: 300px;
        background: rgba(212, 175, 55, 0.2);
        top: -100px; right: -50px;
    }
    .orb-2 {
        width: 400px; height: 400px;
        background: rgba(16, 185, 129, 0.15);
        bottom: -150px; left: -100px;
    }

    .mission-section {
        padding: 120px 0;
        background: var(--bg-main);
        position: relative;
    }

    .standards-card, .mission-card {
        padding: 50px;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .mission-card {
        flex-direction: row;
        align-items: center;
        padding: 0;
    }
    .mission-image {
        width: 45%;
        height: 100%;
        object-fit: cover;
        opacity: 0.8;
    }
    .mission-content {
        padding: 50px;
        width: 55%;
    }
</style>
<?= $this->endSection() ?>

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

<!-- Hero Section -->
<section class="hero-section">
    <div class="glow-orb orb-1"></div>
    <div class="glow-orb orb-2"></div>
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-6 mb-5 mb-lg-0" data-aos="fade-right" data-aos-duration="1200">
                <div class="hero-content">
                    <p class="text-gold mb-3 d-flex align-items-center">
                        <span style="width: 40px; height: 2px; background: var(--accent-gold); display: inline-block; margin-right: 15px;"></span>
                        B2B PROFESSIONAL EXCELLENCE
                    </p>
                    <h1 class="display-3 font-serif fw-bold mb-4" style="line-height: 1.15;">
                        <span class="text-gradient-gold">Precision Nature.</span><br>
                        Clinical Science.
                    </h1>
                    <p class="text-secondary mb-5" style="font-size: 1.15rem;">
                        Bridging the gap between ancient botanical wisdom and modern laboratory rigor. JASPER PHYTOEXTRACTS delivers the purest forms of herbal extracts for global health industries.
                    </p>
                    <div class="d-flex flex-wrap gap-4">
                        <a href="<?= base_url('products') ?>" class="btn btn-primary-custom d-flex align-items-center gap-2">
                            Explore Catalog <i class="bi bi-arrow-right"></i>
                        </a>
                        <a href="#" class="btn btn-outline-dark">View Lab Specs</a>
                    </div>
                </div>
            </div>
            <div class="col-lg-5 offset-lg-1 position-relative" data-aos="zoom-in" data-aos-duration="1200" data-aos-delay="200">
                <div class="hero-image-wrapper">
                    <img src="<?= base_url('assets/images/hero_flatlay.png') ?>" alt="Botanical flatlay" class="hero-image anim-float">
                    
                    <div class="stat-card stat-card-1 glass-panel d-none d-md-block anim-float">
                        <h4 class="mb-1 font-serif text-gradient-gold" style="font-size: 1.5rem;">99.9%</h4>
                        <p class="mb-0 text-secondary" style="font-size: 0.8rem; letter-spacing: 1px; text-transform: uppercase;">Purity Guaranteed</p>
                    </div>
                    
                    <div class="stat-card stat-card-2 glass-panel d-none d-md-block anim-float">
                        <h4 class="mb-1 font-serif text-gradient-gold" style="font-size: 1.5rem;">150+</h4>
                        <p class="mb-0 text-secondary" style="font-size: 0.8rem; letter-spacing: 1px; text-transform: uppercase;">Active Extracts</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- About Section -->
<section class="about-premium">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-6 pe-lg-5 mb-5 mb-lg-0" data-aos="fade-right">
                <h2 class="font-serif fw-bold mb-4" style="font-size: 3rem;">
                    About <span class="text-gradient-gold">us</span>
                </h2>
                <p class="text-secondary" style="font-size: 1.1rem; line-height: 1.9;">
                    JASPER PHYTOEXTRACTS are here to cater our prestigious clients with purest form of extracts, essential oils, spice oleoresins, herbs and spices. We ourselves take up the challenge of processing the natural products to serve the world with uncompromised quality.
                </p>
                
                <div class="address-card glass-panel hover-lift">
                    <h6>Head Office</h6>
                    <p><i class="bi bi-geo-alt-fill me-2" style="color: var(--accent-gold);"></i> V4/109, VALLIKADA, BUILDING,<br>Arakuzha Rd, Muvattupuzha,<br>Kerala 686673</p>
                    
                    <h6 class="mt-4">Factory</h6>
                    <p class="mb-0"><i class="bi bi-building-fill me-2" style="color: var(--accent-gold);"></i> PLOT NO. 84, KINFRA SMALL INDUSTRIAL PARK,<br>NELLAD POST OFFICE, MAZHUVANNUR,<br>ERNAKULAM, KERALA, PIN-686721</p>
                </div>
            </div>
            <div class="col-lg-6 text-center" data-aos="fade-left" data-aos-delay="200">
                <div class="position-relative">
                    <div class="glow-orb" style="width: 100%; height: 100%; background: rgba(16, 185, 129, 0.2); top: 0; left: 0;"></div>
                    <img src="<?= base_url('assets/images/essential_oil_bg.png') ?>" alt="Essential Oils" class="arch-image position-relative z-1">
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Products Section -->
<section class="section-padding" style="background-color: var(--bg-main);">
    <div class="container">
        <div class="text-center mb-5" data-aos="fade-up">
            <span class="text-gold mb-2 d-block">Premium Collection</span>
            <h2 style="font-size: 3.5rem;" class="font-serif fw-bold">Our <span class="text-gradient-gold">Products</span></h2>
        </div>
        
        <div class="products-premium-box glass-panel hover-lift" data-aos="zoom-in" data-aos-duration="1000">
            <div class="row position-relative" style="min-height: 500px;">
                
                <!-- Center Circular Image -->
                <div class="d-none d-lg-block center-circle-wrapper">
                    <img src="<?= base_url('assets/images/hero_flatlay.png') ?>" alt="Botanicals" class="center-circle-img">
                </div>

                <!-- Left Column -->
                <div class="col-lg-4 position-relative" style="z-index: 10;">
                    <h3>Oleoresin</h3>
                    <ul class="products-list">
                        <li>Cardamom Oleoresin</li>
                        <li>Nutmeg Oleoresin</li>
                        <li>Ginger Oleoresin</li>
                        <li>Turmeric Oleoresin</li>
                        <li>Clove Oleoresin</li>
                        <li>Black pepper Oleoresin</li>
                        <li>Celery Oleoresin</li>
                        <li>Paparika Oleoresin</li>
                        <li>Capsicum Oleoresin</li>
                        <li>Fenugreek Oleoresin</li>
                        <li>Bromelian</li>
                    </ul>
                </div>
                
                <!-- Spacer -->
                <div class="col-lg-4 d-none d-lg-block"></div>

                <!-- Right Column -->
                <div class="col-lg-4 position-relative mt-5 mt-lg-0 text-lg-end" style="z-index: 10;">
                    <h3 class="mb-4">Essential Oil</h3>
                    <ul class="products-list mb-5 d-inline-block text-start">
                        <li>Nutmeg oil</li>
                        <li>Ginger oil</li>
                        <li>Turmeric oil</li>
                        <li>Clove bud oil</li>
                        <li>Cardamom oil</li>
                    </ul>
                    
                    <h3 class="mb-4 mt-2">Herbal extract</h3>
                    <ul class="products-list d-inline-block text-start">
                        <li>Curcumin 95</li>
                    </ul>
                </div>

                <!-- Mobile image display -->
                <div class="col-12 mt-5 text-center d-lg-none">
                    <img src="<?= base_url('assets/images/hero_flatlay.png') ?>" alt="Botanicals" style="width: 280px; height: 280px; border-radius: 50%; object-fit: cover; border: 3px solid var(--accent-gold); padding: 5px;">
                </div>
            </div>
        </div>
        
        <div class="text-center mt-5 pt-4">
            <a href="<?= base_url('products') ?>" class="btn btn-primary-custom" style="padding: 16px 40px; font-size: 1.1rem;">View Full Catalog</a>
        </div>
    </div>
</section>

<!-- Mission & Standards -->
<section id="standards" class="mission-section">
    <div class="container">
        <div class="row g-5 align-items-stretch">
            <div class="col-lg-4" data-aos="fade-up" data-aos-delay="100">
                <div class="standards-card glass-panel text-center hover-lift">
                    <div style="background: rgba(212, 175, 55, 0.1); width: 80px; height: 80px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 30px;">
                        <i class="bi bi-shield-check" style="font-size: 2.5rem; color: var(--accent-gold);"></i>
                    </div>
                    <h4 class="font-serif mb-3">Global Standards</h4>
                    <p class="text-secondary small mb-4" style="line-height: 1.8;">ISO 22000, FSSAI, and GMP Certified state-of-the-art manufacturing facilities ensuring uncompromising quality control.</p>
                    
                    <div class="d-flex justify-content-center gap-3 mt-auto">
                        <div style="width: 45px; height: 45px; background: rgba(255,255,255,0.05); border: 1px solid var(--glass-border); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 0.7rem; color: var(--accent-gold);">ISO</div>
                        <div style="width: 45px; height: 45px; background: rgba(255,255,255,0.05); border: 1px solid var(--glass-border); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 0.7rem; color: var(--accent-gold);">GMP</div>
                        <div style="width: 45px; height: 45px; background: rgba(255,255,255,0.05); border: 1px solid var(--glass-border); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 0.7rem; color: var(--accent-gold);">HALAL</div>
                    </div>
                </div>
            </div>
            
            <div id="mission" class="col-lg-8" data-aos="fade-up" data-aos-delay="200">
                <div class="mission-card glass-panel hover-lift">
                    <img src="<?= base_url('assets/images/mission_dropper.png') ?>" alt="Laboratory" class="mission-image d-none d-md-block border-end border-secondary border-opacity-25">
                    <div class="mission-content">
                        <span class="text-gold mb-2 d-block">Vision & Purpose</span>
                        <h3 class="font-serif mb-4 text-gradient-gold" style="font-size: 2.2rem;">Our Mission</h3>
                        <p class="text-secondary font-italic mb-0" style="line-height: 1.9; font-size: 1.1rem;">
                            "Through constant business technology innovation, product upgrading, and standardisation, we seek to offer our customers the far more natural and pure extracts possibly can."
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

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