<?php
$cakeDescription = 'CandleCraft Academy';
$navPage = $page ?? null;
$isHome = ($navPage === 'home' || $navPage === null);
$isBooking = $this->request->getParam('controller') === 'Bookings' && $this->request->getParam('action') === 'add';
$isAbout = rtrim($this->request->getUri()->getPath(), '/') === '/pages/about';
$isVisit = rtrim($this->request->getUri()->getPath(), '/') === '/visit';
$user = $this->request->getAttribute('identity');

// Studio assistant (AI chat FAB): Home, About, Booking, FAQs only
$studioAssistantPath = rtrim($this->request->getUri()->getPath(), '/') ?: '/';
$showStudioAssistant = (
    ($this->request->getParam('controller') === 'Bookings' && $this->request->getParam('action') === 'add')
    || $studioAssistantPath === '/'
    || $studioAssistantPath === '/pages/about'
    || $studioAssistantPath === '/workshops'
    || $studioAssistantPath === '/visit'
    || $studioAssistantPath === '/faqs'
);
?>
<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
<head>
    <?= $this->Html->charset() ?>

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        /* Render the UI at 90% scale while the browser stays at 100% zoom */
        html {
            zoom: 0.9;
        }
    </style>
    <?php $csrf = $this->request->getAttribute('csrfToken'); ?>
    <?php if ($csrf !== null): ?>
    <meta name="csrf-token" content="<?= h($csrf) ?>">
    <?php endif; ?>
    <meta name="description" content="CandleCraft Academy: premium creative workshops in pottery and knitting. Expert led classes, small groups, all materials included.">

    <title><?= $cakeDescription ?>: <?= $this->fetch('title') ?></title>

    <?= $this->Html->meta('icon', '/favicon.svg', ['type' => 'image/svg+xml']) ?>

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Dancing+Script:wght@500;600;700&family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400&family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap" rel="stylesheet">

    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    fontFamily: {
                        sans: ['"Plus Jakarta Sans"', 'system-ui', 'sans-serif'],
                        serif: ['"Playfair Display"', 'Georgia', 'serif'],
                        script: ['"Dancing Script"', 'cursive'],
                    },
                    colors: {
                        primary: {
                            50:  '#f7f1f2',
                            100: '#ede0e3',
                            200: '#dcc3ca',
                            300: '#c598a5',
                            400: '#a96678',
                            500: '#8e4458',
                            600: '#752f3f',
                            700: '#5f2734',
                            800: '#4f202a',
                            900: '#3b181f',
                            950: '#1f0c10',
                        },
                        ink: {
                            950: '#0c0f0e',
                            900: '#141a18',
                            800: '#1c2421',
                        },
                        sage: {
                            50:  '#f4f6f2',
                            100: '#e4e9df',
                            400: '#8a9a7a',
                            500: '#6f8062',
                            600: '#5a6a50',
                        },
                        studio: {
                            ivory: '#f7f5f0',
                            stone: '#e8e4dc',
                            mist: '#efede8',
                        },
                    },
                    boxShadow: {
                        'soft': '0 2px 15px -3px rgba(15, 23, 42, 0.08), 0 4px 6px -4px rgba(15, 23, 42, 0.06)',
                        'lift': '0 20px 50px -12px rgba(15, 23, 42, 0.15)',
                        'glow': '0 0 40px -10px rgba(117, 47, 63, 0.38)',
                    },
                    animation: {
                        'fade-in': 'fadeIn 0.85s ease-out forwards',
                        'fade-in-up': 'fadeInUp 0.7s ease-out forwards',
                        'float': 'float 6s ease-in-out infinite',
                    },
                    keyframes: {
                        fadeIn: {
                            '0%': { opacity: '0' },
                            '100%': { opacity: '1' },
                        },
                        fadeInUp: {
                            '0%': { opacity: '0', transform: 'translateY(20px)' },
                            '100%': { opacity: '1', transform: 'translateY(0)' },
                        },
                        float: {
                            '0%, 100%': { transform: 'translateY(0)' },
                            '50%': { transform: 'translateY(8px)' },
                        },
                    },
                }
            }
        }
    </script>

    <script>
        document.addEventListener('DOMContentLoaded', () => {
            let lastScrollTop = 0;
            const navbar = document.querySelector('[data-site-nav]');
            if (!navbar) return;

            window.addEventListener('scroll', () => {
                const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
                if (scrollTop > lastScrollTop && scrollTop > 160) {
                    navbar.style.transform = 'translateY(-130%)';
                    navbar.style.opacity = '0';
                } else {
                    navbar.style.transform = 'translateY(0)';
                    navbar.style.opacity = '1';
                }
                lastScrollTop = scrollTop <= 0 ? 0 : scrollTop;
            });

            const btn = document.getElementById('mobile-menu-btn');
            const panel = document.getElementById('mobile-menu-panel');
            if (btn && panel) {
                btn.addEventListener('click', () => {
                    panel.classList.toggle('hidden');
                    const isOpen = !panel.classList.contains('hidden');
                    btn.setAttribute('aria-expanded', isOpen ? 'true' : 'false');
                });
                const closePanel = () => {
                    panel.classList.add('hidden');
                    btn.setAttribute('aria-expanded', 'false');
                };
                panel.querySelectorAll('a').forEach((a) => {
                    a.addEventListener('click', closePanel);
                });
                panel.querySelectorAll('button').forEach((b) => {
                    b.addEventListener('click', closePanel);
                });
            }
        });
    </script>

    <?= $this->Html->css('flash-toast') ?>

    <?= $this->fetch('meta') ?>
    <?= $this->fetch('css') ?>
    <?= $this->fetch('script') ?>
    <?= $this->Html->script('flash-toast', ['defer' => true]) ?>
</head>

<body class="bg-neutral-100 text-ink-900 antialiased font-sans">

    <a href="#main-content" class="sr-only focus:fixed focus:left-4 focus:top-24 focus:z-[100] focus:inline-flex focus:h-auto focus:w-auto focus:overflow-visible focus:clip-auto focus:whitespace-normal focus:rounded-lg focus:bg-white focus:px-4 focus:py-2 focus:text-sm focus:font-semibold focus:text-primary-600 focus:shadow-lg focus:outline-none focus:ring-2 focus:ring-primary-400">Skip to content</a>

    <header class="fixed inset-x-0 top-0 z-50 border-b border-neutral-200/90 bg-white shadow-[0_1px_0_0_rgba(15,23,42,0.06)]">
        <div data-site-nav class="transition-all duration-300 ease-out opacity-100">
            <nav class="mx-auto flex max-w-7xl items-center justify-between gap-3 px-4 py-3.5 sm:px-6 sm:py-4 lg:px-8 md:min-h-[4.25rem]" aria-label="Primary">
                <div class="flex shrink-0 items-center gap-2 min-w-0 md:gap-3">
                    <?= $this->Html->link(
                        '<span class="flex items-center gap-2 min-h-0 md:gap-2.5">'
                        . $this->Html->image('candlecraft-mark.svg', [
                            'alt' => '',
                            'class' => 'h-10 w-10 shrink-0 md:h-11 md:w-11',
                            'width' => 44,
                            'height' => 44,
                        ])
                        . '<span class="font-script text-xl text-primary-600 tracking-wide leading-none md:text-2xl">CandleCraft</span>'
                        . '<span class="sr-only"> Academy, Home</span></span>',
                        '/',
                        ['class' => 'group flex items-center', 'escape' => false]
                    ) ?>
                </div>

                <div class="hidden min-w-0 flex-1 items-center justify-center md:flex">
                    <div class="flex flex-wrap items-center justify-center gap-x-8 gap-y-1 text-sm font-medium tracking-tight text-neutral-700 md:text-base">
                        <?= $this->Html->link('Home', '/', [
                            'class' => ($this->getRequest()->getPath() === '/' || $this->getRequest()->getParam('action') === 'home')
                                ? 'text-primary-600 font-semibold'
                                : 'hover:text-primary-600 transition-colors duration-200',
                        ]) ?>
                        <?= $this->Html->link('About', '/pages/about', [
                            'class' => $navPage === 'about' || $this->getRequest()->getParam('action') === 'about' || $isAbout
                                ? 'text-primary-600 font-semibold'
                                : 'hover:text-primary-600 transition-colors duration-200',
                        ]) ?>
                        <?= $this->Html->link('Workshops', '/workshops', [
                            'class' => ($navPage === 'workshops' || $this->getRequest()->getPath() === '/workshops')
                                ? 'text-primary-600 font-semibold'
                                : 'hover:text-primary-600 transition-colors duration-200',
                        ]) ?>
                        <?= $this->Html->link('Your visit', '/visit', [
                            'class' => ($navPage === 'visit' || $isVisit)
                                ? 'text-primary-600 font-semibold'
                                : 'hover:text-primary-600 transition-colors duration-200',
                        ]) ?>
                        <button
                            type="button"
                            onclick="openContactModal()"
                            class="rounded-sm text-sm font-medium tracking-tight text-neutral-700 transition-colors duration-200 hover:text-primary-600 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-400 focus-visible:ring-offset-2 focus-visible:ring-offset-white md:text-base"
                            aria-haspopup="dialog"
                        >
                            Contact
                        </button>
                        <?php if ($user && $user->role !== 'admin'): ?>
                            <?= $this->Html->link('Account', '/users/profile', [
                                'class' => $this->getRequest()->getPath() === '/users/profile'
                                    ? 'text-primary-600 font-semibold'
                                    : 'hover:text-primary-600 transition-colors duration-200',
                            ]) ?>
                        <?php endif; ?>
                        <?php if ($user && $user->role === 'admin'): ?>
                            <div class="relative group z-[60]">
                                <button type="button" class="flex items-center gap-1 hover:text-primary-600 transition-colors duration-200" aria-expanded="false" aria-haspopup="true">
                                    Admin
                                    <svg class="h-5 w-5 transition-transform duration-300 group-hover:rotate-180" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
                                    </svg>
                                </button>
                                <div class="absolute left-1/2 top-full z-[70] w-56 -translate-x-1/2 translate-y-1 rounded-2xl border border-neutral-200/80 bg-white py-2 opacity-0 shadow-lift pointer-events-none transition-all duration-200 invisible group-hover:visible group-hover:opacity-100 group-hover:pointer-events-auto">
                                    <?= $this->Html->link('Dashboard', '/admin', ['class' => 'block px-4 py-2.5 text-sm hover:bg-studio-mist hover:text-primary-700']) ?>
                                    <?= $this->Html->link('Users', '/admin/users', ['class' => 'block px-4 py-2.5 text-sm hover:bg-studio-mist hover:text-primary-700']) ?>
                                    <?= $this->Html->link('Enquiries', '/admin/enquiries', ['class' => 'block px-4 py-2.5 text-sm hover:bg-studio-mist hover:text-primary-700']) ?>
                                    <?= $this->Html->link('Teachers', '/admin/teachers', ['class' => 'block px-4 py-2.5 text-sm hover:bg-studio-mist hover:text-primary-700']) ?>
                                    <?= $this->Html->link('Lessons', '/admin/lessons', ['class' => 'block px-4 py-2.5 text-sm hover:bg-studio-mist hover:text-primary-700']) ?>
                                    <?= $this->Html->link('Materials', '/admin/materials', ['class' => 'block px-4 py-2.5 text-sm hover:bg-studio-mist hover:text-primary-700']) ?>
                                    <?= $this->Html->link('FAQs', '/admin/faqs', ['class' => 'block px-4 py-2.5 text-sm hover:bg-studio-mist hover:text-primary-700']) ?>
                                    <?= $this->Html->link('Company', '/admin/company', ['class' => 'block px-4 py-2.5 text-sm hover:bg-studio-mist hover:text-primary-700']) ?>
                                    <?= $this->Html->link('Bookings', '/admin/bookings', ['class' => 'block px-4 py-2.5 text-sm hover:bg-studio-mist hover:text-primary-700']) ?>
                                    <?= $this->Html->link('Teacher sessions', '/admin/teacher-availability', ['class' => 'block px-4 py-2.5 text-sm hover:bg-studio-mist hover:text-primary-700']) ?>
                                </div>
                            </div>
                        <?php endif; ?>
                    </div>
                </div>

                <div class="flex shrink-0 items-center gap-1.5 md:gap-2.5">
                    <?php if ($user): ?>
                        <span class="hidden max-w-[12rem] truncate text-sm text-neutral-600 lg:inline">
                            <?= h($user->email) ?>
                        </span>
                        <?= $this->Html->link('Logout', '/users/logout', [
                            'class' => 'hidden sm:inline-flex items-center rounded-full border border-neutral-200/90 bg-white/80 px-4 py-2 text-sm font-semibold text-neutral-800 transition-colors duration-200 hover:border-primary-300 hover:bg-primary-50 md:px-5 md:text-base',
                        ]) ?>
                    <?php else: ?>
                        <?= $this->Html->link('Login', '/pages/login', [
                            'class' => 'hidden sm:inline-flex items-center rounded-full border border-neutral-200/90 bg-white/80 px-4 py-2 text-sm font-semibold text-neutral-800 transition-colors duration-200 hover:border-sage-400/50 hover:bg-sage-50 md:px-5 md:text-base',
                        ]) ?>
                    <?php endif; ?>
                    <?= $this->Html->link(
                        'Book now',
                        '/booking',
                        [
                            'class' => 'inline-flex items-center rounded-full bg-primary-600 px-4 py-2 text-sm font-semibold text-white shadow-sm transition hover:bg-primary-700 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-400 focus-visible:ring-offset-2 md:px-6 md:py-2.5 md:text-base'
                                . ($isBooking ? ' ring-2 ring-primary-200 ring-offset-2 ring-offset-white' : ''),
                        ]
                    ) ?>
                    <button type="button" id="mobile-menu-btn" class="md:hidden inline-flex items-center justify-center rounded-lg border border-neutral-200 p-2.5 text-neutral-700 hover:bg-neutral-50 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-400" aria-expanded="false" aria-controls="mobile-menu-panel" aria-label="Open menu">
                        <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
                        </svg>
                    </button>
                </div>
            </nav>
        </div>

        <div id="mobile-menu-panel" class="hidden border-t border-neutral-200 bg-neutral-50/95 px-4 py-4 md:hidden">
            <div class="mx-auto flex max-w-lg flex-col gap-0.5 text-base font-medium">
                <?= $this->Html->link('Home', '/', ['class' => 'rounded-xl px-3 py-3 hover:bg-studio-mist ' . ($isHome ? 'text-primary-700 bg-primary-50/80' : 'text-neutral-800')]) ?>
                <?= $this->Html->link('About', '/pages/about', ['class' => 'rounded-xl px-3 py-3 hover:bg-studio-mist ' . ($navPage === 'about' || $isAbout ? 'text-primary-700 bg-primary-50/80 font-semibold' : 'text-neutral-800')]) ?>
                <?= $this->Html->link('Workshops', '/workshops', ['class' => 'rounded-xl px-3 py-3 hover:bg-studio-mist ' . ($navPage === 'workshops' || $this->getRequest()->getPath() === '/workshops' ? 'text-primary-700 bg-primary-50/80' : 'text-neutral-800')]) ?>
                <?= $this->Html->link('Your visit', '/visit', ['class' => 'rounded-xl px-3 py-3 hover:bg-studio-mist ' . ($navPage === 'visit' || $isVisit ? 'text-primary-700 bg-primary-50/80 font-semibold' : 'text-neutral-800')]) ?>
                <button type="button" onclick="openContactModal()" class="w-full rounded-xl px-3 py-3 text-left text-neutral-800 hover:bg-studio-mist" aria-haspopup="dialog">Contact</button>
                <?= $this->Html->link('Book now', '/booking', ['class' => 'rounded-xl px-3 py-3 ' . ($isBooking ? 'bg-primary-100 font-semibold text-primary-800' : 'text-primary-700 hover:bg-primary-50')]) ?>
                <?php if ($user && $user->role !== 'admin'): ?>
                    <?= $this->Html->link('Account', '/users/profile', ['class' => 'rounded-xl px-3 py-3 text-neutral-800 hover:bg-studio-mist']) ?>
                <?php endif; ?>
                <?php if ($user && $user->role === 'admin'): ?>
                    <span class="px-3 pt-2 text-xs font-semibold uppercase tracking-wider text-neutral-500">Admin</span>
                    <?= $this->Html->link('Dashboard', '/admin', ['class' => 'rounded-xl px-3 py-2.5 pl-5 text-neutral-800 hover:bg-studio-mist']) ?>
                    <?= $this->Html->link('Users', '/admin/users', ['class' => 'rounded-xl px-3 py-2.5 pl-5 text-neutral-800 hover:bg-studio-mist']) ?>
                    <?= $this->Html->link('Enquiries', '/admin/enquiries', ['class' => 'rounded-xl px-3 py-2.5 pl-5 text-neutral-800 hover:bg-studio-mist']) ?>
                    <?= $this->Html->link('Teachers', '/admin/teachers', ['class' => 'rounded-xl px-3 py-2.5 pl-5 text-neutral-800 hover:bg-studio-mist']) ?>
                    <?= $this->Html->link('Lessons', '/admin/lessons', ['class' => 'rounded-xl px-3 py-2.5 pl-5 text-neutral-800 hover:bg-studio-mist']) ?>
                    <?= $this->Html->link('Materials', '/admin/materials', ['class' => 'rounded-xl px-3 py-2.5 pl-5 text-neutral-800 hover:bg-studio-mist']) ?>
                    <?= $this->Html->link('FAQs', '/admin/faqs', ['class' => 'rounded-xl px-3 py-2.5 pl-5 text-neutral-800 hover:bg-studio-mist']) ?>
                    <?= $this->Html->link('Company', '/admin/company', ['class' => 'rounded-xl px-3 py-2.5 pl-5 text-neutral-800 hover:bg-studio-mist']) ?>
                    <?= $this->Html->link('Bookings', '/admin/bookings', ['class' => 'rounded-xl px-3 py-2.5 pl-5 text-neutral-800 hover:bg-studio-mist']) ?>
                    <?= $this->Html->link('Teacher sessions', '/admin/teacher-availability', ['class' => 'rounded-xl px-3 py-2.5 pl-5 text-neutral-800 hover:bg-studio-mist']) ?>
                <?php endif; ?>
                <div class="mt-2 flex flex-col gap-2 border-t border-neutral-200 pt-3">
                    <?php if ($user): ?>
                        <span class="truncate px-3 text-sm text-neutral-600"><?= h($user->email) ?></span>
                        <?= $this->Html->link('Logout', '/users/logout', ['class' => 'inline-flex justify-center rounded-full bg-primary-600 px-4 py-3 text-center text-base font-semibold text-white']) ?>
                    <?php else: ?>
                        <?= $this->Html->link('Login', '/pages/login', ['class' => 'inline-flex justify-center rounded-full border border-neutral-300 px-4 py-3 text-center text-base font-semibold text-neutral-800']) ?>
                    <?php endif; ?>
                </div>
            </div>
        </div>
    </header>

    <div id="flash-toast-region" class="flash-toast-region" aria-live="polite" aria-relevant="additions" aria-label="Notifications">
        <?= $this->Flash->render() ?>
    </div>

    <main id="main-content" class="min-h-screen animate-fade-in pt-[4.75rem] sm:pt-20 md:pt-[5.25rem]">
        <?= $this->fetch('content') ?>
    </main>

    <?= $this->element('contact_modal') ?>
    <?= $this->element('legal_modals') ?>
    <?php if (!empty($showStudioAssistant)) : ?>
        <?= $this->element('studio_assistant') ?>
    <?php endif; ?>

</body>
</html>
