<?php
$this->assign('title', 'Home');

$landingImg = function (string $name) {
    return $this->Url->build('/img/landing/' . $name);
};

$heroCarouselSlides = [
    [
        'file' => 'home-workshop-classroom.png',
        'alt' => 'Warm workshop room with individual stations and soft lighting',
    ],
    [
        'file' => 'home-pottery-ceramics.png',
        'alt' => 'Hand glazed ceramics and pottery pieces on the studio shelf',
    ],
    [
        'file' => 'home-knitting-pink.png',
        'alt' => 'Hands knitting pink ribbed fabric with yarn and wooden needles on the table',
    ],
    [
        'file' => 'home-yarn-crochet-display.png',
        'alt' => 'Crocheted yarn character and soft fibres on display in the studio',
    ],
];

$studioTestimonials = [
    [
        'quote' => 'I walked in nervous about hot wax and walked out with three scented candles I gave as gifts. The safety tips and pacing were perfect for a total beginner.',
        'name' => 'Priya N.',
        'role' => 'Intro to candle making, March 2026',
        'tags' => ['Great for beginners', 'Relaxing atmosphere'],
    ],
    [
        'quote' => 'Centering clay felt impossible until the instructor broke it into tiny steps. I finally understood what “even pressure” means, and my first mug actually stands upright.',
        'name' => 'Leo K.',
        'role' => 'Beginner pottery, February 2026',
        'tags' => ['Hands on', 'Beautiful studio'],
    ],
    [
        'quote' => 'The knitting circle fixed my uneven edges in one afternoon. I loved that we could slow down, rip back, and try again without anyone sighing at the clock.',
        'name' => 'Hannah W.',
        'role' => 'Knitting fundamentals, January 2026',
        'tags' => ['Social', 'Beginner friendly'],
    ],
];
?>

<div class="bg-studio-ivory text-ink-900">

    <!-- Split editorial hero -->
    <section
        class="relative -mt-[4.75rem] pt-[4.75rem] sm:-mt-20 sm:pt-20 md:-mt-[5.25rem] md:pt-[5.25rem] min-h-[min(82vh,840px)] overflow-hidden border-b border-neutral-200/60"
        aria-labelledby="hero-heading"
    >
        <div class="pointer-events-none absolute inset-0 bg-[radial-gradient(ellipse_70%_50%_at_100%_0%,rgba(117,47,63,0.09),transparent_55%)]" aria-hidden="true"></div>
        <div class="pointer-events-none absolute -left-24 top-1/3 h-72 w-72 rounded-full bg-sage-100/50 blur-3xl" aria-hidden="true"></div>
        <div class="pointer-events-none absolute right-0 bottom-0 h-96 w-96 rounded-full bg-primary-100/40 blur-3xl" aria-hidden="true"></div>

        <div class="relative z-10 mx-auto grid max-w-7xl gap-10 px-6 py-10 lg:grid-cols-2 lg:items-center lg:gap-14 lg:px-8 lg:py-12">
            <div class="animate-fade-in-up max-w-xl">
                <p class="text-[0.6875rem] font-semibold uppercase tracking-[0.28em] text-primary-600">
                    Creative studio experiences
                </p>
                <h1 id="hero-heading" class="mt-4 font-serif text-4xl font-semibold leading-[1.08] tracking-tight text-ink-900 sm:text-5xl lg:text-[3.25rem]">
                    Make something meaningful with your hands
                </h1>
                <p class="mt-6 text-base leading-relaxed text-neutral-600 sm:text-lg">
                    Discover candle making, pottery and knitting workshops designed for beginners, hobbyists and anyone wanting a slower, more creative way to spend time.
                </p>
                <div class="mt-8 flex flex-wrap items-center gap-3">
                    <?= $this->Html->link(
                        '<span class="inline-flex items-center gap-2">Book a class' . $this->element('ui_icon', ['name' => 'calendar_days', 'class' => 'h-4 w-4']) . '</span>',
                        '/booking',
                        ['class' => 'inline-flex items-center justify-center rounded-full bg-primary-600 px-7 py-3 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 focus-visible:ring-offset-studio-ivory', 'escape' => false]
                    ) ?>
                    <?= $this->Html->link(
                        'Explore workshops',
                        '/workshops',
                        ['class' => 'inline-flex items-center justify-center rounded-full border border-neutral-300/90 bg-white/70 px-7 py-3 text-sm font-semibold text-ink-900 backdrop-blur-sm transition hover:border-primary-300 hover:bg-white']
                    ) ?>
                </div>
            </div>

            <div class="relative mx-auto w-full max-w-lg animate-fade-in lg:max-w-none lg:justify-self-end" style="animation-delay: 0.12s">
                <div class="absolute -right-4 top-8 z-20 hidden rounded-2xl border border-white/60 bg-white/90 px-4 py-2 text-xs font-semibold uppercase tracking-wider text-primary-700 shadow-soft backdrop-blur-md sm:block">
                    Beginner friendly
                </div>
                <div class="absolute -left-6 bottom-16 z-20 hidden max-w-[9rem] rounded-2xl border border-white/50 bg-white/85 p-3 text-[0.7rem] font-medium leading-snug text-neutral-700 shadow-soft backdrop-blur-md sm:block">
                    Materials included for every session
                </div>
                <div
                    id="hero-image-carousel"
                    class="relative aspect-[4/5] overflow-hidden rounded-3xl border border-neutral-200/80 shadow-lift"
                    data-hero-carousel
                    aria-roledescription="carousel"
                    aria-label="Studio photos"
                >
                    <p id="hero-carousel-status" class="sr-only" aria-live="polite"></p>
                    <div class="relative h-full min-h-0 w-full">
                        <?php foreach ($heroCarouselSlides as $i => $slide): ?>
                            <img
                                data-hero-slide="<?= (int)$i ?>"
                                src="<?= h($landingImg($slide['file'])) ?>"
                                alt="<?= h($slide['alt']) ?>"
                                aria-hidden="<?= $i === 0 ? 'false' : 'true' ?>"
                                class="absolute inset-0 h-full w-full object-cover transition-opacity duration-700 ease-out <?= $i === 0
                                    ? 'z-10 opacity-100'
                                    : 'z-0 opacity-0 pointer-events-none' ?>"
                                loading="<?= $i === 0 ? 'eager' : 'lazy' ?>"
                                decoding="async"
                            >
                        <?php endforeach; ?>
                    </div>
                    <div class="pointer-events-none absolute inset-0 z-[1] bg-gradient-to-t from-ink-900/20 via-transparent to-transparent" aria-hidden="true"></div>
                </div>
                <div class="absolute -bottom-6 right-0 z-10 w-[52%] overflow-hidden rounded-2xl border border-white/70 shadow-lift sm:-right-4 sm:w-[46%]">
                    <div class="aspect-[4/3] bg-neutral-100">
                        <img
                            src="<?= h($landingImg('home-candle-workspace.png')) ?>"
                            alt="Candle jars, melted wax, and wicking tools arranged on the craft bench"
                            class="h-full w-full object-cover transition duration-700 hover:scale-105"
                            loading="lazy"
                            decoding="async"
                        >
                    </div>
                </div>
                <div class="pointer-events-none absolute -top-6 left-1/4 h-24 w-24 rounded-full bg-sage-200/30 blur-2xl" aria-hidden="true"></div>
            </div>
        </div>

        <a href="#studio-intro" class="absolute bottom-5 left-1/2 z-10 flex -translate-x-1/2 flex-col items-center gap-1 text-[0.65rem] font-semibold uppercase tracking-[0.2em] text-neutral-400 transition hover:text-primary-600" aria-label="Scroll to studio intro">
            <span class="hidden sm:inline">Scroll</span>
            <svg class="h-5 w-5 animate-float opacity-70" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"/>
            </svg>
        </a>
    </section>

    <!-- Brand intro -->
    <section id="studio-intro" class="border-b border-neutral-200/50 py-16 md:py-20" aria-labelledby="intro-heading">
        <div class="mx-auto grid max-w-7xl gap-12 px-6 lg:grid-cols-2 lg:items-center lg:gap-16 lg:px-8">
            <div>
                <h2 id="intro-heading" class="font-serif text-3xl font-semibold tracking-tight text-ink-900 md:text-4xl">
                    A calm, tactile studio for modern makers
                </h2>
                <p class="mt-5 max-w-prose text-neutral-600 leading-relaxed">
                    CandleCraft Academy is a warm, small group space where you learn by doing, guided and unhurried, and designed so you never feel lost at the bench.
                </p>
            </div>
            <div class="space-y-6">
                <ul class="grid gap-4 sm:grid-cols-3 lg:grid-cols-1 lg:gap-5">
                    <li class="rounded-2xl border border-neutral-200/70 bg-white/80 px-5 py-4 shadow-sm backdrop-blur-sm">
                        <span class="text-sm font-semibold text-ink-900">Small group sessions</span>
                        <p class="mt-1 text-sm text-neutral-600">Room to ask questions and get hands on help.</p>
                    </li>
                    <li class="rounded-2xl border border-neutral-200/70 bg-white/80 px-5 py-4 shadow-sm backdrop-blur-sm">
                        <span class="text-sm font-semibold text-ink-900">All materials included</span>
                        <p class="mt-1 text-sm text-neutral-600">Arrive ready to make, and we supply what you need.</p>
                    </li>
                    <li class="rounded-2xl border border-neutral-200/70 bg-white/80 px-5 py-4 shadow-sm backdrop-blur-sm">
                        <span class="text-sm font-semibold text-ink-900">Beginner friendly guidance</span>
                        <p class="mt-1 text-sm text-neutral-600">Pace and demos built for first timers and returners.</p>
                    </li>
                </ul>
                <div class="grid grid-cols-2 gap-3 sm:max-w-md sm:mx-auto lg:mx-0 lg:max-w-none">
                    <div class="overflow-hidden rounded-2xl border border-neutral-200/80 shadow-sm">
                        <img src="<?= h($landingImg('home-yarn-amigurumi.png')) ?>" alt="Handmade yarn doll with buttons and craft supplies on the table" class="aspect-square h-full w-full object-cover" loading="lazy" decoding="async">
                    </div>
                    <div class="overflow-hidden rounded-2xl border border-neutral-200/80 shadow-sm">
                        <img src="<?= h($landingImg('home-yarn-crochet-display.png')) ?>" alt="Crocheted yarn character among soft studio lighting" class="aspect-square h-full w-full object-cover" loading="lazy" decoding="async">
                    </div>
                </div>
                <p class="text-xs text-neutral-500 sm:max-w-md sm:mx-auto lg:mx-0">Yarn lovers often move from flat knitting into playful amigurumi, all welcome in the same unhurried circle.</p>
            </div>
        </div>
    </section>

    <!-- Workshops teaser -->
    <section class="border-b border-neutral-200/50 py-14 md:py-16" aria-labelledby="workshops-teaser-heading">
        <div class="mx-auto flex max-w-7xl flex-col items-start justify-between gap-8 px-6 md:flex-row md:items-center lg:px-8">
            <div class="max-w-xl">
                <h2 id="workshops-teaser-heading" class="font-serif text-2xl font-semibold tracking-tight text-ink-900 md:text-3xl">
                    Candle making, pottery and knitting
                </h2>
                <p class="mt-3 text-neutral-600 leading-relaxed">
                    Browse our full lineup: mood filters, session details, and multi class passes on the workshops page.
                </p>
            </div>
            <?= $this->Html->link(
                '<span class="inline-flex items-center gap-2">View all workshops' . $this->element('ui_icon', ['name' => 'chevron_right', 'class' => 'h-5 w-5']) . '</span>',
                '/workshops',
                ['class' => 'inline-flex shrink-0 items-center justify-center rounded-full bg-primary-600 px-7 py-3 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', 'escape' => false]
            ) ?>
        </div>
        <div class="mx-auto mt-10 max-w-7xl px-6 lg:px-8">
            <p class="text-[0.65rem] font-semibold uppercase tracking-[0.22em] text-primary-600">At a glance</p>
            <div class="mt-4 grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
                <a href="<?= h($this->Url->build('/workshops#workshop-candle')) ?>" class="group overflow-hidden rounded-2xl border border-neutral-200/80 bg-white shadow-sm transition hover:border-primary-200 hover:shadow-md">
                    <div class="aspect-[4/3] overflow-hidden bg-neutral-100">
                        <img src="<?= h($landingImg('home-candle-workspace.png')) ?>" alt="" class="h-full w-full object-cover transition duration-500 group-hover:scale-[1.03]" loading="lazy">
                    </div>
                    <p class="px-4 py-3 text-sm font-semibold text-ink-900">Candle making</p>
                </a>
                <a href="<?= h($this->Url->build('/workshops#workshop-pottery')) ?>" class="group overflow-hidden rounded-2xl border border-neutral-200/80 bg-white shadow-sm transition hover:border-primary-200 hover:shadow-md">
                    <div class="aspect-[4/3] overflow-hidden bg-neutral-100">
                        <img src="<?= h($landingImg('home-pottery-ceramics.png')) ?>" alt="" class="h-full w-full object-cover transition duration-500 group-hover:scale-[1.03]" loading="lazy">
                    </div>
                    <p class="px-4 py-3 text-sm font-semibold text-ink-900">Pottery</p>
                </a>
                <a href="<?= h($this->Url->build('/workshops#workshop-knitting')) ?>" class="group overflow-hidden rounded-2xl border border-neutral-200/80 bg-white shadow-sm transition hover:border-primary-200 hover:shadow-md">
                    <div class="aspect-[4/3] overflow-hidden bg-neutral-100">
                        <img src="<?= h($landingImg('home-knitting-pink.png')) ?>" alt="" class="h-full w-full object-cover transition duration-500 group-hover:scale-[1.03]" loading="lazy">
                    </div>
                    <p class="px-4 py-3 text-sm font-semibold text-ink-900">Knitting</p>
                </a>
                <div class="overflow-hidden rounded-2xl border border-neutral-200/80 bg-white shadow-sm">
                    <div class="aspect-[4/3] overflow-hidden bg-neutral-100">
                        <img src="<?= h($landingImg('home-workshop-classroom.png')) ?>" alt="Warm workshop room with individual stations and soft lighting" class="h-full w-full object-cover" loading="lazy">
                    </div>
                    <p class="px-4 py-3 text-sm font-semibold text-ink-900">Your own station</p>
                    <p class="px-4 pb-3 text-xs leading-snug text-neutral-500">Bench space set before you arrive so you can settle in and start.</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Value strip -->
    <section class="border-y border-neutral-200/60 bg-white py-14 md:py-16" aria-labelledby="value-heading">
        <div class="mx-auto max-w-7xl px-6 lg:px-8">
            <h2 id="value-heading" class="sr-only">Why makers choose us</h2>
            <div class="grid gap-px overflow-hidden rounded-3xl border border-neutral-200/80 bg-neutral-200/60 shadow-sm md:grid-cols-2 lg:grid-cols-4">
                <?php
                $values = [
                    ['Guided by experienced instructors', 'Patient demos, real craft knowledge, and space to ask anything.'],
                    ['Materials and tools included', 'Clay, wax, yarn, glazes: we kit the bench so you can focus on making.'],
                    ['Beginner friendly formats', 'Sessions paced for first timers without talking down to anyone.'],
                    ['Warm, welcoming studio atmosphere', 'Soft light, unhurried energy, and a room that feels like a retreat.'],
                ];
                foreach ($values as $pair):
                ?>
                    <div class="bg-white px-6 py-8 md:px-8">
                        <div class="h-px w-10 bg-primary-400/70" aria-hidden="true"></div>
                        <h3 class="mt-5 font-serif text-lg font-semibold text-ink-900"><?= h($pair[0]) ?></h3>
                        <p class="mt-3 text-sm leading-relaxed text-neutral-600"><?= h($pair[1]) ?></p>
                    </div>
                <?php endforeach; ?>
            </div>
        </div>
    </section>

    <!-- Booking journey: interactive diagram -->
    <section class="py-16 md:py-24" aria-labelledby="journey-heading">
        <style>
            #booking-journey-diagram .journey-tab-active {
                transform: scale(1.02);
                box-shadow: 0 10px 26px -8px rgba(15, 23, 42, 0.16);
            }
            @media (min-width: 768px) {
                #booking-journey-diagram .journey-tab {
                    border-left-width: 3px;
                    border-left-style: solid;
                    border-left-color: transparent;
                }
                #booking-journey-diagram .journey-tab.journey-tab-active {
                    transform: translateX(2px) scale(1.01);
                    border-left-color: #752f3f;
                }
            }
            @media (prefers-reduced-motion: reduce) {
                #booking-journey-diagram .journey-tab-active { transform: none; }
                #booking-journey-diagram .journey-tab { animation: none !important; opacity: 1 !important; }
                #booking-journey-diagram [data-journey-visual],
                #booking-journey-diagram [data-journey-copy] { transition-duration: 0.01ms !important; }
            }
        </style>
        <div class="mx-auto max-w-7xl px-6 lg:px-8">
            <h2 id="journey-heading" class="font-serif text-3xl font-semibold tracking-tight text-ink-900 md:text-4xl">
                From booking to making
            </h2>
            <p class="mt-3 max-w-2xl text-neutral-600">
                A straightforward path from curiosity to clay (wax or yarn) in your hands.
            </p>

            <?php
            $journeySteps = [
                ['Choose your workshop', 'Browse classes by craft and pace.', '01'],
                ['Reserve your session', 'Select your preferred session and confirm online.', '02'],
                ['Arrive and create', 'Walk into a ready to use studio and enjoy the experience.', '03'],
            ];
            $journeyImages = [
                $landingImg('home-pottery-painted-cup.png'),
                $landingImg('home-knitting-cozy.png'),
                $landingImg('home-workshop-classroom.png'),
            ];
            $journeyAlts = [
                'Hand painted ceramic cup among bisque pieces in the studio',
                'Hands knitting ribbed fabric with yarn on a wooden table',
                'Workshop room with individual benches ready for a guided class',
            ];
            ?>

            <div id="booking-journey-diagram" class="mx-auto mt-8 max-w-3xl lg:max-w-4xl" data-journey-root>
                <div class="grid items-start gap-6 md:grid-cols-[minmax(0,11.5rem)_1fr] md:gap-8 lg:grid-cols-[minmax(0,13rem)_1fr]">
                    <!-- Image left -->
                    <div class="mx-auto w-full max-w-[200px] md:mx-0 md:max-w-none">
                        <div class="relative aspect-[4/5] w-full overflow-hidden rounded-2xl border border-neutral-200/90 bg-neutral-200 shadow-md ring-1 ring-black/[0.04]">
                            <?php foreach ($journeyImages as $i => $src): ?>
                                <img
                                    src="<?= h($src) ?>"
                                    alt="<?= h($journeyAlts[$i]) ?>"
                                    width="520"
                                    height="650"
                                    loading="<?= $i === 0 ? 'eager' : 'lazy' ?>"
                                    decoding="async"
                                    data-journey-visual="<?= (int)$i ?>"
                                    class="absolute inset-0 h-full w-full object-cover transition-[opacity,transform] duration-700 ease-out <?= $i === 0 ? 'opacity-100 scale-100' : 'opacity-0 scale-[1.03]' ?>"
                                >
                            <?php endforeach; ?>
                            <div class="pointer-events-none absolute inset-x-0 bottom-0 h-1/3 bg-gradient-to-t from-ink-950/35 to-transparent" aria-hidden="true"></div>
                        </div>
                    </div>

                    <!-- Steps + copy right -->
                    <div class="min-w-0 md:pt-0.5">
                        <div
                            class="mb-4 flex flex-wrap gap-2 md:mb-3 md:flex-col md:flex-nowrap md:gap-1.5"
                            role="tablist"
                            aria-label="Steps from booking to making"
                        >
                            <?php foreach ($journeySteps as $i => $s): ?>
                                <button
                                    type="button"
                                    id="journey-tab-<?= (int)$i ?>"
                                    role="tab"
                                    aria-selected="<?= $i === 0 ? 'true' : 'false' ?>"
                                    aria-controls="journey-panel-<?= (int)$i ?>"
                                    tabindex="<?= $i === 0 ? '0' : '-1' ?>"
                                    data-journey-tab="<?= (int)$i ?>"
                                    style="animation: fadeIn 0.55s cubic-bezier(0.22, 1, 0.36, 1) <?= (int)$i * 120 ?>ms both;"
                                    class="journey-tab group relative z-10 flex w-full min-w-0 flex-col items-start gap-0.5 rounded-xl border border-neutral-200/80 bg-white/80 px-3 py-2 text-left shadow-sm transition-all duration-500 ease-[cubic-bezier(0.22,1,0.36,1)] hover:border-primary-200/50 hover:bg-white <?= $i === 0
                                        ? 'border-primary-200/90 bg-white journey-tab-active'
                                        : '' ?>"
                                >
                                    <span class="text-[0.6rem] font-bold uppercase tracking-[0.24em] text-primary-600"><?= h($s[2]) ?></span>
                                    <span class="text-xs font-semibold leading-snug text-ink-900 sm:text-[0.8125rem]"><?= h($s[0]) ?></span>
                                </button>
                            <?php endforeach; ?>
                        </div>

                        <div class="relative min-h-[7.5rem]" aria-live="polite">
                            <?php foreach ($journeySteps as $i => $s): ?>
                                <div
                                    id="journey-panel-<?= (int)$i ?>"
                                    role="tabpanel"
                                    aria-labelledby="journey-tab-<?= (int)$i ?>"
                                    data-journey-copy="<?= (int)$i ?>"
                                    aria-hidden="<?= $i === 0 ? 'false' : 'true' ?>"
                                    class="absolute inset-x-0 top-0 transition-all duration-500 ease-[cubic-bezier(0.22,1,0.36,1)] <?= $i === 0
                                        ? 'z-10 translate-y-0 opacity-100'
                                        : 'z-0 translate-y-5 opacity-0 pointer-events-none' ?>"
                                >
                                    <p class="text-[0.6rem] font-semibold uppercase leading-snug tracking-[0.18em] text-primary-600">
                                        <?= h($journeyAlts[$i]) ?>
                                    </p>
                                    <h3 class="mt-1.5 font-serif text-lg font-semibold tracking-tight text-ink-900 sm:text-xl">
                                        <?= h($s[0]) ?>
                                    </h3>
                                    <p class="mt-2 text-xs leading-relaxed text-neutral-600 sm:text-sm">
                                        <?= h($s[1]) ?>
                                    </p>
                                </div>
                            <?php endforeach; ?>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Studio atmosphere -->
    <section class="border-t border-neutral-200/60 bg-studio-mist/50 py-16 md:py-24" aria-labelledby="atmosphere-heading">
        <div class="mx-auto grid max-w-7xl items-center gap-12 px-6 lg:grid-cols-2 lg:gap-16 lg:px-8">
            <div>
                <h2 id="atmosphere-heading" class="font-serif text-3xl font-semibold tracking-tight text-ink-900 md:text-4xl">
                    More than a class, it’s a creative reset
                </h2>
                <p class="mt-6 text-neutral-600 leading-relaxed">
                    Step away from screens and notifications for a few hours. Work with your hands, share a table with people who are learning too, and settle into a slower rhythm. Our studio is comfortable and social without feeling crowded, made for tactile creativity and real conversation.
                </p>
            </div>
            <div class="relative grid grid-cols-12 gap-3">
                <div class="col-span-7 overflow-hidden rounded-3xl border border-neutral-200/80 shadow-soft">
                    <img src="<?= h($landingImg('home-pottery-painted-cup.png')) ?>" alt="Hand painted ceramic cup with colourful glaze details on the bench" class="aspect-[4/5] h-full w-full object-cover" loading="lazy">
                </div>
                <div class="col-span-5 flex flex-col gap-3 pt-8">
                    <div class="overflow-hidden rounded-2xl border border-neutral-200/80 shadow-sm">
                        <img src="<?= h($landingImg('home-knitting-cozy.png')) ?>" alt="Knitting with wooden needles, yarn and wool on a soft blanket" class="aspect-square w-full object-cover" loading="lazy">
                    </div>
                    <div class="overflow-hidden rounded-2xl border border-neutral-200/80 shadow-sm">
                        <img src="<?= h($landingImg('home-candle-workspace.png')) ?>" alt="Candle jars, wax and wicking supplies on a craft table" class="aspect-[5/4] w-full object-cover" loading="lazy">
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Testimonials: rotating carousel -->
    <section class="py-16 md:py-24" aria-labelledby="testimonials-heading">
        <div class="mx-auto max-w-7xl px-6 lg:px-8">
            <h2 id="testimonials-heading" class="font-serif text-3xl font-semibold tracking-tight text-ink-900 md:text-4xl">
                Voices from the studio
            </h2>
            <p class="mt-3 max-w-xl text-neutral-600">
                Honest words from people who sat at our benches, shared for anyone still deciding.
            </p>

            <div
                class="mx-auto mt-10 max-w-3xl"
                data-testimonial-carousel
            >
                <p id="testimonial-carousel-status" class="sr-only" aria-live="polite"></p>
                <div class="relative min-h-[22rem] md:min-h-[21rem]">
                    <?php foreach ($studioTestimonials as $i => $t): ?>
                        <?php
                        $first = preg_split('/\s+/u', trim((string) $t['name']), 2)[0] ?? '';
                        $initial = $first !== '' ? mb_strtoupper(mb_substr($first, 0, 1)) : '?';
                        ?>
                        <figure
                            data-testimonial-slide="<?= (int)$i ?>"
                            aria-hidden="<?= $i === 0 ? 'false' : 'true' ?>"
                            class="absolute inset-0 flex flex-col rounded-3xl border border-neutral-200/80 bg-white p-7 shadow-soft transition-all duration-700 ease-out md:p-10 <?= $i === 0
                                ? 'z-10 translate-y-0 opacity-100'
                                : 'z-0 translate-y-4 opacity-0 pointer-events-none' ?>"
                        >
                            <blockquote class="font-serif text-xl font-normal leading-snug text-ink-900 md:text-2xl md:leading-tight">
                                “<?= h($t['quote']) ?>”
                            </blockquote>
                            <figcaption class="mt-6 flex flex-wrap items-center gap-3 border-t border-neutral-100 pt-6 md:mt-8">
                                <span class="flex h-11 w-11 shrink-0 items-center justify-center rounded-full bg-primary-100 text-sm font-bold text-primary-800 ring-2 ring-white shadow-sm" aria-hidden="true"><?= h($initial) ?></span>
                                <div class="min-w-0">
                                    <cite class="not-italic text-sm font-semibold text-ink-900"><?= h($t['name']) ?></cite>
                                    <p class="text-xs text-neutral-500"><?= h($t['role']) ?></p>
                                </div>
                            </figcaption>
                            <?php if (!empty($t['tags'])): ?>
                                <div class="mt-4 flex flex-wrap gap-2">
                                    <?php foreach ($t['tags'] as $tag): ?>
                                        <span class="rounded-full bg-studio-mist px-3 py-1 text-xs font-medium text-neutral-600"><?= h($tag) ?></span>
                                    <?php endforeach; ?>
                                </div>
                            <?php endif; ?>
                        </figure>
                    <?php endforeach; ?>
                </div>

                <div class="mt-8 flex justify-center" role="group" aria-label="Choose testimonial">
                    <div class="flex items-center justify-center gap-2">
                        <?php foreach ($studioTestimonials as $i => $t): ?>
                            <button
                                type="button"
                                data-testimonial-dot="<?= (int)$i ?>"
                                aria-label="Show quote from <?= h($t['name']) ?>"
                                <?= $i === 0 ? 'aria-current="true"' : '' ?>
                                class="testimonial-dot h-2 rounded-full transition-all duration-300 ease-out focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2 <?= $i === 0
                                    ? 'w-8 bg-primary-600'
                                    : 'w-2 bg-neutral-300 hover:bg-neutral-400' ?>"
                            ></button>
                        <?php endforeach; ?>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- FAQ -->
    <section class="border-t border-neutral-200/60 bg-white py-16 md:py-24" id="faq" aria-labelledby="faq-heading">
        <div class="mx-auto max-w-7xl px-6 lg:px-8">
            <div class="grid gap-12 lg:grid-cols-12 lg:gap-16">
                <div class="lg:col-span-4">
                    <h2 id="faq-heading" class="font-serif text-3xl font-semibold tracking-tight text-ink-900 md:text-4xl">
                        Questions, answered
                    </h2>
                    <p class="mt-4 text-neutral-600 leading-relaxed">
                        Booking, materials, timing: the essentials, without the jargon.
                    </p>
                    <?= $this->Html->link(
                        'View all FAQs',
                        '/faqs',
                        ['class' => 'mt-8 inline-flex items-center justify-center rounded-full border border-neutral-300 bg-studio-ivory px-6 py-2.5 text-sm font-semibold text-ink-900 transition hover:border-primary-400 hover:bg-white']
                    ) ?>
                </div>
                <div class="lg:col-span-8">
                    <div class="space-y-3" id="faq-accordion">
                        <?php if (!empty($featuredFaqs)): ?>
                            <?php foreach ($featuredFaqs as $faq): ?>
                                <div class="faq-item overflow-hidden rounded-2xl border border-neutral-200/80 bg-studio-ivory/60">
                                    <button
                                        type="button"
                                        onclick="toggleFaq(this)"
                                        class="faq-question flex w-full items-center justify-between gap-4 px-5 py-5 text-left transition hover:bg-white/80 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-400 md:px-6"
                                    >
                                        <span class="font-medium text-ink-900"><?= h($faq->question) ?></span>
                                        <span class="faq-icon inline-flex shrink-0 text-neutral-400">
                                            <?= $this->element('ui_icon', ['name' => 'chevron_down', 'class' => 'h-5 w-5 transition-transform duration-300 ease-out']) ?>
                                        </span>
                                    </button>
                                    <div class="faq-answer max-h-0 overflow-hidden transition-all duration-300 ease-out px-5 md:px-6">
                                        <div class="border-t border-neutral-200/80 pb-5 pt-4 text-sm leading-relaxed text-neutral-600 md:pb-6">
                                            <?= nl2br(h($faq->answer)) ?>
                                        </div>
                                    </div>
                                </div>
                            <?php endforeach; ?>
                        <?php else: ?>
                            <p class="text-sm text-neutral-500">No FAQs available yet.</p>
                        <?php endif; ?>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Footer -->
    <footer class="border-t border-neutral-200/80 bg-ink-900 text-neutral-300" role="contentinfo">
        <div class="mx-auto max-w-7xl px-6 py-14 lg:px-8 lg:py-16">
            <div class="grid gap-12 sm:grid-cols-2 lg:grid-cols-4">
                <div>
                    <p class="font-script text-2xl text-primary-400">CandleCraft</p>
                    <p class="font-serif text-lg font-semibold text-white">Academy</p>
                    <p class="mt-4 max-w-xs text-sm leading-relaxed text-neutral-400">
                        Creative workshops in Melbourne: candle making, pottery, and knitting in a warm, small group studio.
                    </p>
                </div>
                <div>
                    <h3 class="text-[0.65rem] font-semibold uppercase tracking-[0.2em] text-neutral-500">Explore</h3>
                    <ul class="mt-5 space-y-3 text-sm">
                        <li><?= $this->Html->link('Home', '/', ['class' => 'hover:text-white transition-colors']) ?></li>
                        <li><?= $this->Html->link('About', '/pages/about', ['class' => 'hover:text-white transition-colors']) ?></li>
                        <li><?= $this->Html->link('Workshops', '/workshops', ['class' => 'hover:text-white transition-colors']) ?></li>
                        <li><?= $this->Html->link('FAQs', '/faqs', ['class' => 'hover:text-white transition-colors']) ?></li>
                    </ul>
                </div>
                <div>
                    <h3 class="text-[0.65rem] font-semibold uppercase tracking-[0.2em] text-neutral-500">Workshops</h3>
                    <ul class="mt-5 space-y-3 text-sm">
                        <li><?= $this->Html->link('Candle making', '/workshops#workshop-candle', ['class' => 'hover:text-white transition-colors']) ?></li>
                        <li><?= $this->Html->link('Pottery', '/workshops#workshop-pottery', ['class' => 'hover:text-white transition-colors']) ?></li>
                        <li><?= $this->Html->link('Knitting', '/workshops#workshop-knitting', ['class' => 'hover:text-white transition-colors']) ?></li>
                        <li><?= $this->Html->link('Multi class passes', '/workshops', ['class' => 'hover:text-white transition-colors']) ?></li>
                    </ul>
                </div>
                <div>
                    <h3 class="text-[0.65rem] font-semibold uppercase tracking-[0.2em] text-neutral-500">Contact</h3>
                    <ul class="mt-5 space-y-4 text-sm">
                        <li>
                            <a href="mailto:CandleCraftAcademy@gmail.com" class="font-medium text-white hover:text-primary-300 transition-colors">CandleCraftAcademy@gmail.com</a>
                        </li>
                        <li>
                            <a href="tel:+61412345678" class="hover:text-white transition-colors">+61 412 345 678</a>
                        </li>
                        <li>
                            <button type="button" onclick="openContactModal()" class="text-left text-primary-400 hover:text-primary-300 transition-colors">
                                Send a message
                            </button>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="mt-12 flex flex-col items-center justify-between gap-4 border-t border-neutral-800 pt-8 text-xs text-neutral-500 md:flex-row">
                <p>&copy; <?= date('Y') ?> CandleCraft Academy. All rights reserved.</p>
                <div class="flex flex-wrap items-center justify-center gap-6">
                    <button type="button" onclick="openPrivacyModal()" class="font-inherit cursor-pointer border-0 bg-transparent p-0 hover:text-neutral-300">Privacy Policy</button>
                    <button type="button" onclick="openTermsModal()" class="font-inherit cursor-pointer border-0 bg-transparent p-0 hover:text-neutral-300">Terms of Service</button>
                    <a href="mailto:CandleCraftAcademy@gmail.com" class="hover:text-neutral-300">Email</a>
                </div>
                <p class="text-neutral-600">Made by Nexify (Team 112)</p>
            </div>
        </div>
    </footer>
</div>

<script>
(function () {
    const root = document.getElementById('booking-journey-diagram');
    if (!root) {
        return;
    }
    const tabs = Array.from(root.querySelectorAll('[data-journey-tab]'));
    const imgs = Array.from(root.querySelectorAll('[data-journey-visual]'));
    const panels = Array.from(root.querySelectorAll('[data-journey-copy]'));

    function applyJourneyStep(idx) {
        const i = Math.max(0, Math.min(idx, tabs.length - 1));
        tabs.forEach((tab, j) => {
            const on = j === i;
            tab.setAttribute('aria-selected', on ? 'true' : 'false');
            tab.tabIndex = on ? 0 : -1;
            tab.classList.toggle('journey-tab-active', on);
            tab.classList.toggle('border-primary-200/90', on);
            tab.classList.toggle('bg-white', on);
            tab.classList.toggle('border-neutral-200/80', !on);
            tab.classList.toggle('bg-white/80', !on);
        });
        imgs.forEach((img, j) => {
            const on = j === i;
            img.classList.toggle('opacity-100', on);
            img.classList.toggle('opacity-0', !on);
            img.classList.toggle('scale-100', on);
            img.classList.toggle('scale-[1.03]', !on);
        });
        panels.forEach((panel, j) => {
            const on = j === i;
            panel.setAttribute('aria-hidden', on ? 'false' : 'true');
            panel.classList.toggle('z-10', on);
            panel.classList.toggle('z-0', !on);
            panel.classList.toggle('opacity-100', on);
            panel.classList.toggle('opacity-0', !on);
            panel.classList.toggle('translate-y-0', on);
            panel.classList.toggle('translate-y-5', !on);
            panel.classList.toggle('pointer-events-none', !on);
        });
    }

    tabs.forEach((tab, i) => {
        tab.addEventListener('click', () => applyJourneyStep(i));
        tab.addEventListener('keydown', (e) => {
            let next = i;
            if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {
                e.preventDefault();
                next = (i + 1) % tabs.length;
            } else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {
                e.preventDefault();
                next = (i - 1 + tabs.length) % tabs.length;
            } else if (e.key === 'Home') {
                e.preventDefault();
                next = 0;
            } else if (e.key === 'End') {
                e.preventDefault();
                next = tabs.length - 1;
            } else {
                return;
            }
            applyJourneyStep(next);
            tabs[next].focus();
        });
    });
})();

(function () {
    const root = document.querySelector('[data-hero-carousel]');
    if (!root) {
        return;
    }
    const slides = Array.from(root.querySelectorAll('[data-hero-slide]'));
    const dots = Array.from(root.querySelectorAll('[data-hero-dot]'));
    const statusEl = document.getElementById('hero-carousel-status');
    const reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
    let idx = 0;
    let timer = null;
    const everyMs = 5000;

    function announce() {
        if (!statusEl || !slides[idx]) {
            return;
        }
        const alt = slides[idx].getAttribute('alt') || '';
        statusEl.textContent = 'Studio image ' + (idx + 1) + ' of ' + slides.length + (alt ? ': ' + alt : '');
    }

    function show(i) {
        idx = (i + slides.length) % slides.length;
        slides.forEach((el, j) => {
            const on = j === idx;
            el.setAttribute('aria-hidden', on ? 'false' : 'true');
            el.classList.toggle('z-10', on);
            el.classList.toggle('opacity-100', on);
            el.classList.toggle('pointer-events-none', !on);
            el.classList.toggle('z-0', !on);
            el.classList.toggle('opacity-0', !on);
        });
        dots.forEach((d, j) => {
            const on = j === idx;
            if (on) {
                d.setAttribute('aria-current', 'true');
            } else {
                d.removeAttribute('aria-current');
            }
            d.classList.toggle('w-8', on);
            d.classList.toggle('bg-white', on);
            d.classList.toggle('w-2', !on);
            d.classList.toggle('bg-white/50', !on);
            d.classList.toggle('hover:bg-white/80', !on);
        });
        announce();
    }

    function stop() {
        if (timer !== null) {
            clearInterval(timer);
            timer = null;
        }
    }

    function start() {
        stop();
        if (reduceMotion || slides.length < 2) {
            return;
        }
        timer = window.setInterval(() => show(idx + 1), everyMs);
    }

    dots.forEach((d, i) => {
        d.addEventListener('click', () => {
            show(i);
            start();
        });
    });

    root.addEventListener('mouseenter', stop);
    root.addEventListener('mouseleave', start);
    root.addEventListener('focusin', stop);
    root.addEventListener('focusout', () => {
        window.setTimeout(() => {
            if (!root.contains(document.activeElement)) {
                start();
            }
        }, 0);
    });

    document.addEventListener('visibilitychange', () => {
        if (document.hidden) {
            stop();
        } else {
            start();
        }
    });

    show(0);
    start();
})();

(function () {
    const root = document.querySelector('[data-testimonial-carousel]');
    if (!root) {
        return;
    }
    const slides = Array.from(root.querySelectorAll('[data-testimonial-slide]'));
    const dots = Array.from(root.querySelectorAll('[data-testimonial-dot]'));
    const statusEl = document.getElementById('testimonial-carousel-status');
    const reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
    let idx = 0;
    let timer = null;
    const everyMs = 5000;

    function announce() {
        if (!statusEl || !slides[idx]) {
            return;
        }
        const name = slides[idx].querySelector('cite');
        const n = name ? name.textContent.trim() : '';
        statusEl.textContent = 'Showing testimonial ' + (idx + 1) + ' of ' + slides.length + (n ? ': ' + n : '');
    }

    function show(i) {
        idx = (i + slides.length) % slides.length;
        slides.forEach((el, j) => {
            const on = j === idx;
            el.setAttribute('aria-hidden', on ? 'false' : 'true');
            el.classList.toggle('z-10', on);
            el.classList.toggle('translate-y-0', on);
            el.classList.toggle('opacity-100', on);
            el.classList.toggle('pointer-events-none', !on);
            el.classList.toggle('z-0', !on);
            el.classList.toggle('translate-y-4', !on);
            el.classList.toggle('opacity-0', !on);
        });
        dots.forEach((d, j) => {
            const on = j === idx;
            if (on) {
                d.setAttribute('aria-current', 'true');
            } else {
                d.removeAttribute('aria-current');
            }
            d.classList.toggle('w-8', on);
            d.classList.toggle('bg-primary-600', on);
            d.classList.toggle('w-2', !on);
            d.classList.toggle('bg-neutral-300', !on);
            d.classList.toggle('hover:bg-neutral-400', !on);
        });
        announce();
    }

    function stop() {
        if (timer !== null) {
            clearInterval(timer);
            timer = null;
        }
    }

    function start() {
        stop();
        if (reduceMotion || slides.length < 2) {
            return;
        }
        timer = window.setInterval(() => show(idx + 1), everyMs);
    }

    dots.forEach((d, i) => {
        d.addEventListener('click', () => {
            show(i);
            start();
        });
    });

    root.addEventListener('mouseenter', stop);
    root.addEventListener('mouseleave', start);
    root.addEventListener('focusin', stop);
    root.addEventListener('focusout', () => {
        window.setTimeout(() => {
            if (!root.contains(document.activeElement)) {
                start();
            }
        }, 0);
    });

    document.addEventListener('visibilitychange', () => {
        if (document.hidden) {
            stop();
        } else {
            start();
        }
    });

    show(0);
    start();
})();

function toggleFaq(button) {
    const item = button.closest('.faq-item');
    const answer = item.querySelector('.faq-answer');
    const iconWrap = button.querySelector('.faq-icon');
    const chevron = iconWrap && iconWrap.querySelector('svg');
    const isOpen = answer.style.maxHeight && answer.style.maxHeight !== '0px';

    document.querySelectorAll('#faq-accordion .faq-answer').forEach((ans) => {
        if (ans !== answer) {
            ans.style.maxHeight = '0px';
            const otherChevron = ans.closest('.faq-item').querySelector('.faq-icon svg');
            if (otherChevron) otherChevron.classList.remove('rotate-180');
        }
    });

    if (isOpen) {
        answer.style.maxHeight = '0px';
        if (chevron) chevron.classList.remove('rotate-180');
    } else {
        answer.style.maxHeight = answer.scrollHeight + 'px';
        if (chevron) chevron.classList.add('rotate-180');
    }
}
</script>
