<!DOCTYPE html>
<html class="light" lang="en">
<head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title><?= esc($settings['seo_meta_title'] ?? 'Aura Harvest') ?></title>
<link rel="icon" type="image/png" href="<?= base_url('assets/images/logo.png') ?>">
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&amp;family=Playfair+Display:wght@500;600;700&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<script id="tailwind-config">
        tailwind.config = {
          darkMode: "class",
          theme: {
            extend: {
              "colors": {
                      "tertiary": "#735c00",
                      "on-secondary-fixed": "#321200",
                      "on-error": "#ffffff",
                      "on-tertiary-fixed": "#241a00",
                      "surface-variant": "#e4e3d7",
                      "surface-container-highest": "#e4e3d7",
                      "on-secondary": "#ffffff",
                      "on-tertiary-container": "#4e3d00",
                      "surface-container-low": "#f5f4e8",
                      "error": "#ba1a1a",
                      "error-container": "#ffdad6",
                      "on-tertiary-fixed-variant": "#574500",
                      "tertiary-fixed": "#ffe088",
                      "surface-container-lowest": "#ffffff",
                      "outline": "#717973",
                      "inverse-primary": "#a5d0b9",
                      "on-background": "#1b1c15",
                      "surface-container": "#efeee3",
                      "on-primary-fixed-variant": "#274e3d",
                      "surface-bright": "#fbfaee",
                      "primary-fixed": "#c1ecd4",
                      "primary": "#012d1d",
                      "tertiary-fixed-dim": "#e9c349",
                      "on-primary-fixed": "#002114",
                      "on-primary-container": "#86af99",
                      "on-primary": "#ffffff",
                      "inverse-surface": "#303129",
                      "secondary-fixed-dim": "#ffb68c",
                      "primary-fixed-dim": "#a5d0b9",
                      "secondary-fixed": "#ffdbc9",
                      "inverse-on-surface": "#f2f1e5",
                      "secondary": "#934b19",
                      "on-error-container": "#93000a",
                      "outline-variant": "#c1c8c2",
                      "on-tertiary": "#ffffff",
                      "surface-dim": "#dbdbcf",
                      "tertiary-container": "#cba72f",
                      "on-secondary-container": "#783603",
                      "surface-tint": "#3f6653",
                      "surface-container-high": "#e9e9dd",
                      "background": "#fbfaee",
                      "secondary-container": "#ffa26a",
                      "on-surface-variant": "#414844",
                      "on-surface": "#1b1c15",
                      "primary-container": "#1b4332",
                      "surface": "#fbfaee",
                      "on-secondary-fixed-variant": "#753401"
              },
              "borderRadius": {
                      "DEFAULT": "0.125rem",
                      "lg": "0.25rem",
                      "xl": "0.5rem",
                      "full": "0.75rem"
              },
              "spacing": {
                      "container-max": "1280px",
                      "margin-desktop": "64px",
                      "gutter": "24px",
                      "section-gap": "120px",
                      "margin-mobile": "20px",
                      "base": "8px"
              },
              "fontFamily": {
                      "display-lg": ["Playfair Display"],
                      "body-lg": ["Montserrat"],
                      "headline-lg": ["Playfair Display"],
                      "label-sm": ["Montserrat"],
                      "label-md": ["Montserrat"],
                      "body-md": ["Montserrat"],
                      "headline-md": ["Playfair Display"],
                      "headline-lg-mobile": ["Playfair Display"],
                      "display-lg-mobile": ["Playfair Display"]
              },
              "fontSize": {
                      "display-lg": ["64px", {"lineHeight": "1.1", "letterSpacing": "-0.02em", "fontWeight": "700"}],
                      "body-lg": ["18px", {"lineHeight": "1.6", "fontWeight": "400"}],
                      "headline-lg": ["48px", {"lineHeight": "1.2", "fontWeight": "600"}],
                      "label-sm": ["12px", {"lineHeight": "1.2", "fontWeight": "500"}],
                      "label-md": ["14px", {"lineHeight": "1.2", "letterSpacing": "0.05em", "fontWeight": "600"}],
                      "body-md": ["16px", {"lineHeight": "1.6", "fontWeight": "400"}],
                      "headline-md": ["32px", {"lineHeight": "1.4", "fontWeight": "500"}],
                      "headline-lg-mobile": ["32px", {"lineHeight": "1.3", "fontWeight": "600"}],
                      "display-lg-mobile": ["40px", {"lineHeight": "1.2", "fontWeight": "700"}]
              }
            },
          },
        }
    </script>
<style>
        .material-symbols-outlined {
            font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
            display: inline-block;
            vertical-align: middle;
        }
        .active-filter {
            color: #934b19;
            font-weight: 700;
            border-left: 2px solid #934b19;
            padding-left: 12px;
        }
    </style>
</head>
<body class="bg-surface text-on-surface font-body-md overflow-x-hidden">
<!-- Top Navigation Bar -->
<header class="fixed top-0 left-0 w-full z-50 flex justify-between items-center px-margin-desktop py-base max-w-container-max mx-auto bg-surface/90 backdrop-blur-md shadow-[0_12px_32px_rgba(27,67,50,0.08)]">
<div class="flex items-center">
<h1 class="font-display-lg text-headline-md text-primary tracking-tight">
    <a href="<?= base_url() ?>"><?= esc($settings['site_name'] ?? 'Aura Harvest') ?></a>
</h1>
</div>
<nav class="hidden md:flex gap-gutter items-center">
<a class="font-body-md text-label-md text-on-surface-variant hover:text-secondary transition-colors duration-300" href="<?= base_url() ?>">Home</a>
<a class="font-body-md text-label-md <?= url_is('products*') ? 'text-primary border-b-2 border-secondary' : 'text-on-surface-variant' ?> hover:text-secondary transition-colors duration-300" href="<?= base_url('products') ?>">Catalog</a>
<a class="font-body-md text-label-md text-on-surface-variant hover:text-secondary transition-colors duration-300" href="<?= base_url('about') ?>">About</a>
<a class="font-body-md text-label-md text-on-surface-variant hover:text-secondary transition-colors duration-300" href="<?= base_url('gallery') ?>">Gallery</a>
<a class="font-body-md text-label-md <?= url_is('certification') ? 'text-primary border-b-2 border-secondary' : 'text-on-surface-variant' ?> hover:text-secondary transition-colors duration-300" href="<?= base_url('certification') ?>">Certifications</a>
<a class="font-body-md text-label-md <?= url_is('contact') ? 'text-primary border-b-2 border-secondary' : 'text-on-surface-variant' ?> hover:text-secondary transition-colors duration-300" href="<?= base_url('contact') ?>">Contact</a>
</nav>
<div class="flex items-center gap-6">
<span class="material-symbols-outlined text-on-surface-variant cursor-pointer">language</span>
<a href="<?= base_url('contact') ?>" class="bg-primary text-on-primary px-6 py-2 rounded-lg font-label-md hover:scale-105 active:scale-95 transition-all duration-300 inline-block">
                Send Enquiry
</a>
</div>
</header>

<main class="pt-[100px]">
    <?= $this->renderSection('content') ?>
</main>

<!-- Footer -->
<footer class="w-full px-margin-desktop py-section-gap grid grid-cols-1 md:grid-cols-12 gap-gutter bg-primary text-on-primary mt-12">
<div class="md:col-span-4">
<h2 class="font-display-lg text-headline-lg text-on-primary mb-6"><?= esc($settings['site_name'] ?? 'Aura Harvest') ?></h2>
<p class="font-body-md text-on-primary/70 max-w-sm"><?= esc($settings['seo_meta_description'] ?? 'Premium exporters of raw agricultural excellence.') ?></p>
</div>
<div class="md:col-span-2">
<h4 class="font-label-md text-tertiary-fixed mb-6 uppercase tracking-widest">Resources</h4>
<ul class="space-y-4">
<li><a class="text-on-primary/80 hover:text-secondary-fixed transition-all duration-300" href="<?= base_url('about') ?>">About Us</a></li>
<li><a class="text-on-primary/80 hover:text-secondary-fixed transition-all duration-300" href="<?= base_url('products') ?>">Products</a></li>
<li><a class="text-on-primary/80 hover:text-secondary-fixed transition-all duration-300" href="<?= base_url('gallery') ?>">Gallery</a></li>
</ul>
</div>
<div class="md:col-span-2">
<h4 class="font-label-md text-tertiary-fixed mb-6 uppercase tracking-widest">Contact Info</h4>
<ul class="space-y-4">
<li><a class="text-on-primary/80 hover:text-secondary-fixed transition-all duration-300" href="mailto:<?= esc($settings['contact_email'] ?? '') ?>"><?= esc($settings['contact_email'] ?? '') ?></a></li>
<li><a class="text-on-primary/80 hover:text-secondary-fixed transition-all duration-300" href="tel:<?= esc($settings['phone'] ?? '') ?>"><?= esc($settings['phone'] ?? '') ?></a></li>
</ul>
</div>
<div class="md:col-span-4">
<h4 class="font-label-md text-tertiary-fixed mb-6 uppercase tracking-widest">Newsletter</h4>
<p class="text-on-primary/70 text-label-sm mb-4">Get monthly market reports and harvest updates.</p>
<div class="flex border-b border-on-primary/30 py-2">
<input class="bg-transparent border-none focus:ring-0 text-on-primary placeholder:text-on-primary/40 flex-grow" placeholder="Email Address" type="email"/>
<button class="material-symbols-outlined text-secondary-fixed">arrow_forward</button>
</div>
</div>
<div class="md:col-span-12 pt-12 mt-12 border-t border-on-primary/10 flex flex-col md:flex-row justify-between items-center gap-4">
<p class="text-label-sm opacity-50">© <?= date('Y') ?> <?= esc($settings['site_name'] ?? 'Aura Harvest') ?>. All Rights Reserved.</p>
<div class="flex gap-6">
<a href="<?= esc($settings['facebook_link'] ?? '#') ?>" class="text-on-primary"><span class="material-symbols-outlined opacity-50 cursor-pointer hover:opacity-100 transition-opacity">face_nod</span></a>
<a href="<?= esc($settings['instagram_link'] ?? '#') ?>" class="text-on-primary"><span class="material-symbols-outlined opacity-50 cursor-pointer hover:opacity-100 transition-opacity">share</span></a>
<a href="<?= esc($settings['linkedin_link'] ?? '#') ?>" class="text-on-primary"><span class="material-symbols-outlined opacity-50 cursor-pointer hover:opacity-100 transition-opacity">mail</span></a>
</div>
</div>
</footer>
<script>
        // Simple micro-interaction for filter highlighting
        const filters = document.querySelectorAll('aside a');
        filters.forEach(filter => {
            filter.addEventListener('click', (e) => {
                // e.preventDefault();
                filters.forEach(f => f.classList.remove('active-filter', 'text-secondary'));
                filter.classList.add('active-filter');
            });
        });

        // Sticky Header scroll effect
        window.addEventListener('scroll', () => {
            const header = document.querySelector('header');
            if (window.scrollY > 50) {
                header.classList.add('py-4', 'bg-surface/100');
                header.classList.remove('py-base');
            } else {
                header.classList.remove('py-4', 'bg-surface/100');
                header.classList.add('py-base');
            }
        });
</script>
</body>
</html>
