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

<?= $this->section('styles') ?>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css"/>
<style>
    .cert-hero {
        background: linear-gradient(to right, rgba(251, 253, 251, 0.98), rgba(251, 253, 251, 0.8)), url('<?= base_url("assets/images/hero_flask_bg.png") ?>') no-repeat center center/cover;
        padding: 100px 0 60px;
        position: relative;
        overflow: hidden;
    }
    
    .cert-slider {
        padding: 20px 40px;
    }
    
    .item-cert {
        padding: 20px;
        margin: 15px;
        background: #fff;
        border-radius: 15px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.05);
        text-align: center;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        border: 1px solid var(--glass-highlight);
    }
    
    .item-cert:hover {
        transform: translateY(-5px);
        box-shadow: 0 15px 40px rgba(0,0,0,0.1);
    }
    
    .item-cert img {
        max-width: 100%;
        height: 150px;
        object-fit: contain;
        margin: 0 auto;
        filter: grayscale(20%);
        transition: filter 0.3s ease;
    }
    
    .item-cert:hover img {
        filter: grayscale(0%);
    }

    .slick-prev:before, .slick-next:before {
        color: var(--accent-gold);
        font-size: 30px;
    }
    
    .slick-prev {
        left: -15px;
        z-index: 10;
    }
    
    .slick-next {
        right: 0px;
        z-index: 10;
    }

    .cert-title {
        font-family: 'Playfair Display', serif;
        font-size: 1.2rem;
        color: var(--primary-color);
        font-weight: 600;
        margin-top: 15px;
        margin-bottom: 0;
    }
</style>
<?= $this->endSection() ?>

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

<!-- Hero Section -->
<section class="cert-hero">
    <div class="container text-center position-relative z-2">
        <span class="text-gold mb-3 d-block font-weight-bold letter-spacing-1">GLOBAL STANDARDS</span>
        <h1 class="display-4 font-serif fw-bold mb-4">Our <span class="text-gradient-gold">Certifications</span></h1>
        <p class="text-secondary mx-auto" style="max-width: 700px; font-size: 1.15rem; line-height: 1.8;">
            The certifications which we have in order to ensure the quality standards of our valuable clients are as follows
        </p>
    </div>
</section>

<!-- Certifications Slider -->
<section class="section-padding bg-main" style="background-color: var(--bg-main); padding: 80px 0 120px;">
    <div class="container">
        <?php if (!empty($certifications)): ?>
            <div class="cert-slider" id="proSlider">
                <?php foreach ($certifications as $index => $cert): ?>
                    <div class="item-cert" data-aos="fade-up" data-aos-delay="<?= $index * 50 ?>">
                        <?php if ($cert['image']): ?>
                            <img src="<?= base_url('uploads/certifications/' . $cert['image']) ?>" alt="<?= esc($cert['title'] ?? 'Certification') ?>">
                        <?php else: ?>
                            <i class="bi bi-patch-check" style="font-size: 4rem; color: rgba(43, 83, 41, 0.2);"></i>
                        <?php endif; ?>
                        
                        <?php if ($cert['title']): ?>
                            <h3 class="cert-title"><?= esc($cert['title']) ?></h3>
                        <?php endif; ?>
                    </div>
                <?php endforeach; ?>
            </div>
        <?php else: ?>
            <div class="text-center py-5 glass-panel" style="max-width: 600px; margin: 0 auto;">
                <i class="bi bi-info-circle" style="font-size: 3rem; color: var(--accent-gold); opacity: 0.5;"></i>
                <h3 class="font-serif mt-4 mb-2">No Certifications Yet</h3>
                <p class="text-secondary">Check back later for our updated quality standards.</p>
            </div>
        <?php endif; ?>
    </div>
</section>

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

<?= $this->section('scripts') ?>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
<script>
    $(document).ready(function(){
      $('#proSlider').slick({
        dots: true,
        infinite: true,
        speed: 600,
        slidesToShow: 4,
        slidesToScroll: 1,
        autoplay: true,
        autoplaySpeed: 3000,
        cssEase: 'ease-in-out',
        arrows: true,
        responsive: [
          {
            breakpoint: 1024,
            settings: {
              slidesToShow: 3,
              slidesToScroll: 1
            }
          },
          {
            breakpoint: 768,
            settings: {
              slidesToShow: 2,
              slidesToScroll: 1
            }
          },
          {
            breakpoint: 480,
            settings: {
              slidesToShow: 1,
              slidesToScroll: 1
            }
          }
        ]
      });
    });
</script>
<?= $this->endSection() ?>
