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

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

<!-- Product Detail Header -->
<section class="pt-5 pb-3" style="background: linear-gradient(180deg, var(--bg-surface-elevated) 0%, var(--bg-main) 100%);">
    <div class="container pt-4">
        <nav aria-label="breadcrumb" data-aos="fade-down">
            <ol class="breadcrumb mb-0 px-3 py-2 d-inline-flex glass-panel" style="border-radius: 20px; font-size: 0.85rem; letter-spacing: 0.5px;">
                <li class="breadcrumb-item"><a href="<?= base_url() ?>" class="text-decoration-none text-muted transition-colors hover:text-primary">Home</a></li>
                <li class="breadcrumb-item"><a href="<?= base_url('products') ?>" class="text-decoration-none text-muted transition-colors hover:text-primary">Products</a></li>
                <li class="breadcrumb-item active" aria-current="page" style="color: var(--primary-green); font-weight: 600;"><?= esc($product['name']) ?></li>
            </ol>
        </nav>
    </div>
</section>

<!-- Product Section -->
<section class="section-padding pt-4">
    <div class="container">
        <div class="row align-items-center">
            <!-- Product Image -->
            <div class="col-lg-6 mb-5 mb-lg-0" data-aos="fade-right" data-aos-duration="1000">
                <div class="position-relative p-3 p-md-4 glass-panel hover-lift" style="border-radius: 30px; border: 1px solid rgba(63, 176, 73, 0.1);">
                    <!-- Decorative Background Element -->
                    <div class="position-absolute" style="top: -5%; left: -5%; width: 30%; height: 30%; background: radial-gradient(circle, var(--accent-glow) 0%, transparent 70%); z-index: -1;"></div>
                    
                    <?php 
                        $imgSrc = base_url('assets/images/placeholder.jpg');
                        if (!empty($product['featured_image'])) {
                            if (filter_var($product['featured_image'], FILTER_VALIDATE_URL)) {
                                $imgSrc = $product['featured_image'];
                            } else {
                                $imgSrc = base_url('uploads/products/'.$product['featured_image']);
                            }
                        }
                    ?>
                    <div class="overflow-hidden" style="border-radius: 20px;">
                        <img src="<?= $imgSrc ?>" class="img-fluid w-100 object-fit-cover anim-float" alt="<?= esc($product['name']) ?>" style="border-radius: 20px; box-shadow: 0 15px 35px rgba(0,0,0,0.06); transition: transform 0.5s ease; animation-duration: 8s;">
                    </div>
                </div>
            </div>
            
            <!-- Product Info -->
            <div class="col-lg-6 ps-lg-5" data-aos="fade-left" data-aos-duration="1000" data-aos-delay="200">
                <div class="mb-3">
                    <span class="text-gold"><i class="bi bi-stars me-1"></i> Premium Extract</span>
                </div>
                
                <h1 class="font-serif mb-4 fw-bold" style="color: var(--text-primary); font-size: 3.5rem; line-height: 1.1; letter-spacing: -1px;">
                    <?= esc($product['name']) ?>
                </h1>
                
                <?php if(!empty($product['short_description'])): ?>
                    <p class="fs-5 mb-5" style="color: var(--text-secondary); line-height: 1.8; font-weight: 300;">
                        <?= esc($product['short_description']) ?>
                    </p>
                <?php endif; ?>
                
                <div class="glass-panel p-4 p-md-5 mb-5" style="border-radius: 24px; border-left: 4px solid var(--primary-green);">
                    <h4 class="font-serif mb-4 fw-semibold" style="color: var(--text-primary); font-size: 1.5rem;">
                        <i class="bi bi-journal-text me-2" style="color: var(--primary-green);"></i> Specifications & Details
                    </h4>
                    
                    <div class="specifications-content" style="color: var(--text-secondary); line-height: 1.7; font-size: 0.95rem;">
                        <?php if(!empty($product['specifications'])): ?>
                            <div class="prose prose-sm max-w-none">
                                <?= $product['specifications'] ?>
                            </div>
                        <?php else: ?>
                            <p class="mb-0 fst-italic">Detailed specifications are available upon request.</p>
                        <?php endif; ?>
                    </div>
                </div>
                
                <div class="d-flex flex-column flex-sm-row gap-3 mt-4">
                    <a href="<?= base_url('contact?product=' . $product['id']) ?>" class="btn btn-gold px-5 py-3 d-inline-flex align-items-center justify-content-center text-decoration-none w-100 w-sm-auto shadow-lg" style="font-size: 1.05rem;">
                        <i class="bi bi-envelope-paper me-2"></i> Enquire Now
                    </a>
                    <button type="button" class="btn btn-outline-dark px-5 py-3 d-inline-flex align-items-center justify-content-center w-100 w-sm-auto" onclick="document.getElementById('sampleEmail').focus(); window.scrollTo({top: document.body.scrollHeight, behavior: 'smooth'});">
                        Request Sample <i class="bi bi-arrow-down-short ms-1"></i>
                    </button>
                </div>
                
                <div class="mt-4 pt-4 border-top" style="border-color: var(--border-color) !important;">
                    <p class="text-muted mb-0" style="font-size: 0.85rem;"><i class="bi bi-shield-check me-1 text-success"></i> Laboratory Certified • GMP Compliant • 100% Pure Botanical</p>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Additional Aesthetic Element -->
<div class="position-absolute" style="top: 20%; right: -10%; width: 300px; height: 300px; background: radial-gradient(circle, var(--accent-glow) 0%, transparent 60%); z-index: -1; pointer-events: none;"></div>

<style>
/* Scoped styles for specifications content if it contains lists/tables from rich text */
.specifications-content ul, .specifications-content ol {
    padding-left: 1.2rem;
    margin-bottom: 1rem;
}
.specifications-content li {
    margin-bottom: 0.5rem;
}
.specifications-content p {
    margin-bottom: 1rem;
}
.specifications-content p:last-child {
    margin-bottom: 0;
}
</style>

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