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

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

<!-- Hero Section -->
<section class="position-relative d-flex align-items-center justify-content-center overflow-hidden" style="min-height: 350px;">
    <!-- Background Image -->
    <img src="https://images.unsplash.com/photo-1596040033229-a9821ebd058d?auto=format&fit=crop&q=80&w=1920" class="position-absolute w-100 h-100" style="object-fit: cover; z-index: 1;" alt="Products Banner">
    
    <!-- Dark Green Overlay -->
    <div class="position-absolute w-100 h-100" style="background-color: var(--primary-green); opacity: 0.8; z-index: 2;"></div>
    
    <!-- Content -->
    <div class="position-relative text-center text-white" style="z-index: 3;" data-aos="zoom-in">
        <h1 class="display-4 font-serif fw-bold drop-shadow-lg mb-3">Our Global Catalog</h1>
        <p class="lead opacity-75 max-w-xl mx-auto">Sourcing the world's finest agricultural treasures with unwavering integrity.</p>
    </div>
</section>

<!-- Product Catalog Section -->
<section class="section-padding bg-light mt-5">
    <div class="container">
        <div class="row">
            
            <!-- Sidebar -->
            <aside class="col-lg-3 mb-5 mb-lg-0" data-aos="fade-right">
                <div class="sticky-top" style="top: 100px;">
                    <h3 class="h4 font-serif fw-bold mb-4" style="color: var(--primary-green);">Categories</h3>
                    
                    <ul class="list-unstyled mb-5">
                        <li class="mb-3">
                            <?php $isAllActive = empty(request()->getGet('category')) && empty($current_category_slug); ?>
                            <a href="<?= base_url('products') ?>" class="text-decoration-none fw-bold <?= $isAllActive ? 'text-accent border-start border-2 border-accent ps-3' : 'text-muted' ?>" style="<?= $isAllActive ? 'color: var(--text-primary) !important; border-color: var(--text-primary) !important;' : '' ?>">
                                All Products
                            </a>
                        </li>
                        <?php foreach($categories as $cat): ?>
                            <?php $isActive = (request()->getGet('category') == $cat['id']) || (!empty($current_category_slug) && $current_category_slug === $cat['slug']); ?>
                            <li class="mb-3 ps-3">
                                <a href="<?= base_url('products/category/'.$cat['slug']) ?>" class="text-decoration-none <?= $isActive ? 'fw-bold' : 'text-muted hover-accent' ?>" style="<?= $isActive ? 'color: var(--text-primary) !important;' : '' ?>">
                                    <?= esc($cat['name']) ?>
                                </a>
                            </li>
                        <?php endforeach; ?>
                    </ul>

                    <div class="p-4 bg-white rounded shadow-sm border border-light">
                        <h4 class="h6 fw-bold mb-3" style="color: var(--primary-green);">Quality Filters</h4>
                        <div class="form-check mb-2">
                            <input class="form-check-input" type="checkbox" value="" id="filterOrganic" style="cursor: pointer;">
                            <label class="form-check-label text-muted small" for="filterOrganic" style="cursor: pointer;">
                                Organic Certified
                            </label>
                        </div>
                        <div class="form-check mb-2">
                            <input class="form-check-input" type="checkbox" value="" id="filterGradeA" style="cursor: pointer;">
                            <label class="form-check-label text-muted small" for="filterGradeA" style="cursor: pointer;">
                                Export Grade A
                            </label>
                        </div>
                    </div>
                </div>
            </aside>

            <!-- Product Grid -->
            <div class="col-lg-9">
                <div class="row g-4">
                    <?php if(!empty($products)): ?>
                        <?php foreach($products as $prod): ?>
                            <div class="col-md-6 col-xl-4 d-flex" data-aos="fade-up" data-aos-delay="100">
                                <div class="card w-100 border-0 shadow-sm rounded-3 overflow-hidden d-flex flex-column" style="transition: all 0.3s ease; cursor: pointer;" onmouseover="this.style.boxShadow='0 .5rem 1rem rgba(0,0,0,.15)'; this.style.transform='translateY(-5px)';" onmouseout="this.style.boxShadow='0 .125rem .25rem rgba(0,0,0,.075)'; this.style.transform='translateY(0)';">
                                    
                                    <div class="overflow-hidden bg-white" style="height: 240px; position: relative;">
                                        <?php 
                                            $imgSrc = base_url('assets/images/placeholder.jpg');
                                            if (!empty($prod['featured_image'])) {
                                                if (filter_var($prod['featured_image'], FILTER_VALIDATE_URL)) {
                                                    $imgSrc = $prod['featured_image'];
                                                } else {
                                                    $imgSrc = base_url('uploads/products/'.$prod['featured_image']);
                                                }
                                            }
                                        ?>
                                        <img src="<?= $imgSrc ?>" class="w-100 h-100" style="object-fit: cover; transition: transform 0.7s ease;" onmouseover="this.style.transform='scale(1.1)';" onmouseout="this.style.transform='scale(1)';" alt="<?= esc($prod['name']) ?>">
                                    </div>
                                    
                                    <div class="card-body d-flex flex-column p-4 bg-white">
                                        <div class="mb-3">
                                            <span class="badge rounded-pill" style="background-color: var(--accent-gold); color: #fff; font-size: 0.65rem; padding: 0.4em 0.8em; letter-spacing: 1px;">
                                                <?= $prod['is_featured'] ? 'PREMIUM GRADE' : 'STANDARD' ?>
                                            </span>
                                        </div>
                                        <h4 class="card-title font-serif fw-bold mb-2" style="color: var(--primary-green);"><?= esc($prod['name']) ?></h4>
                                        <p class="card-text text-muted small mb-4 flex-grow-1" style="display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;">
                                            <?= esc($prod['short_description'] ?? 'High quality agricultural product.') ?>
                                        </p>
                                        
                                        <a href="<?= base_url('product/'.$prod['slug']) ?>" class="btn btn-outline-success w-100 mt-auto" style="border-color: var(--text-primary); color: var(--text-primary);">
                                            View Details
                                        </a>
                                    </div>
                                    <div style="height: 3px; background-color: var(--accent-gold); width: 0%; transition: width 0.3s ease;" class="card-bottom-border"></div>
                                </div>
                            </div>
                        <?php endforeach; ?>
                    <?php else: ?>
                        <div class="col-12 py-5 text-center text-muted">
                            <p class="lead">No products found in this category.</p>
                        </div>
                    <?php endif; ?>
                </div>

                <div class="mt-5 text-center">
                    <a href="<?= base_url('products') ?>" class="btn px-4 py-2 fw-bold" style="border: 2px solid var(--primary-green); color: var(--primary-green); background: transparent;" onmouseover="this.style.backgroundColor='var(--primary-green)'; this.style.color='white';" onmouseout="this.style.backgroundColor='transparent'; this.style.color='var(--primary-green)';">
                        View All Varieties
                    </a>
                </div>
            </div>

        </div>
    </div>
</section>

<!-- Quality & Certification Section -->
<section class="py-5 text-white position-relative overflow-hidden" style="background-color: var(--primary-green);">
    <div class="container py-4 position-relative z-index-2">
        <div class="row align-items-center">
            <div class="col-lg-6 mb-5 mb-lg-0" data-aos="fade-right">
                <h2 class="display-5 font-serif fw-bold mb-4">Uncompromising Standards</h2>
                <p class="lead opacity-75 mb-5">Every batch undergoes rigorous multi-level testing in ISO-certified labs to ensure moisture levels, volatile oil content, and microbial purity meet international B2B standards.</p>
                
                <div class="row g-4">
                    <div class="col-sm-6">
                        <div class="d-flex">
                            <i class="bi bi-box-seam fs-2 me-3" style="color: var(--accent-gold);"></i>
                            <div>
                                <h5 class="mb-1" style="color: var(--accent-gold);">Vacuum Packaging</h5>
                                <p class="small opacity-75 mb-0">Ensures freshness retention during long-haul transit.</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-6">
                        <div class="d-flex">
                            <i class="bi bi-virus fs-2 me-3" style="color: var(--accent-gold);"></i>
                            <div>
                                <h5 class="mb-1" style="color: var(--accent-gold);">Lab Tested</h5>
                                <p class="small opacity-75 mb-0">HACCP, ISO 22000, and organic certificates.</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-6">
                        <div class="d-flex">
                            <i class="bi bi-clock-history fs-2 me-3" style="color: var(--accent-gold);"></i>
                            <div>
                                <h5 class="mb-1" style="color: var(--accent-gold);">Full Traceability</h5>
                                <p class="small opacity-75 mb-0">Track origin from farm-gate to warehouse.</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-6">
                        <div class="d-flex">
                            <i class="bi bi-globe fs-2 me-3" style="color: var(--accent-gold);"></i>
                            <div>
                                <h5 class="mb-1" style="color: var(--accent-gold);">Global Logistics</h5>
                                <p class="small opacity-75 mb-0">Door-to-door delivery across 40+ countries.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="col-lg-5 offset-lg-1" data-aos="fade-left">
                <div class="p-5 rounded-circle d-flex align-items-center justify-content-center" style="background: rgba(255,255,255,0.05); aspect-ratio: 1;">
                    <div class="row g-4 w-100">
                        <div class="col-6">
                            <div class="bg-white bg-opacity-10 rounded d-flex align-items-center justify-content-center p-4 border border-light border-opacity-25" style="aspect-ratio: 1; transition: all 0.3s;" onmouseover="this.style.background='rgba(255,255,255,0.2)';" onmouseout="this.style.background='rgba(255,255,255,0.1)';">
                                <span class="fs-4 fw-bold opacity-50">HACCP</span>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="bg-white bg-opacity-10 rounded d-flex align-items-center justify-content-center p-4 border border-light border-opacity-25" style="aspect-ratio: 1; transition: all 0.3s;" onmouseover="this.style.background='rgba(255,255,255,0.2)';" onmouseout="this.style.background='rgba(255,255,255,0.1)';">
                                <span class="fs-4 fw-bold opacity-50">USDA</span>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="bg-white bg-opacity-10 rounded d-flex align-items-center justify-content-center p-4 border border-light border-opacity-25" style="aspect-ratio: 1; transition: all 0.3s;" onmouseover="this.style.background='rgba(255,255,255,0.2)';" onmouseout="this.style.background='rgba(255,255,255,0.1)';">
                                <span class="fs-4 fw-bold opacity-50">ISO</span>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="bg-white bg-opacity-10 rounded d-flex align-items-center justify-content-center p-4 border border-light border-opacity-25" style="aspect-ratio: 1; transition: all 0.3s;" onmouseover="this.style.background='rgba(255,255,255,0.2)';" onmouseout="this.style.background='rgba(255,255,255,0.1)';">
                                <span class="fs-4 fw-bold opacity-50">HALAL</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<script>
    // Simple script to handle hover effects on card borders
    document.querySelectorAll('.card').forEach(card => {
        card.addEventListener('mouseenter', () => {
            const border = card.querySelector('.card-bottom-border');
            if(border) border.style.width = '100%';
            const btn = card.querySelector('.btn-outline-success');
            if(btn) {
                btn.style.backgroundColor = 'var(--text-primary)';
                btn.style.color = 'white';
            }
        });
        card.addEventListener('mouseleave', () => {
            const border = card.querySelector('.card-bottom-border');
            if(border) border.style.width = '0%';
            const btn = card.querySelector('.btn-outline-success');
            if(btn) {
                btn.style.backgroundColor = 'transparent';
                btn.style.color = 'var(--text-primary)';
            }
        });
    });
</script>

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