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

/** @var array<string, int|null> $workshopLessonIds */
$workshopLessonIds = $workshopLessonIds ?? [];

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

$workshops = [
    [
        'id' => 'candle',
        'title' => 'Candle making experience',
        'line' => 'Scent, wax, and calm focus, leaving with pieces you are proud to gift.',
        'label' => 'Most popular',
        'image' => $wimg('home-candle-workspace.png'),
        'imageAlt' => 'Candle making supplies: wax in jars, wicks and tools on a wooden table',
        'moods' => ['relaxing', 'beginner', 'social'],
        'hover' => ['Typical session' => '2 to 2.5 hrs', 'Level' => 'Beginner welcome', 'Includes' => 'Wax, wicks, vessels and guidance'],
        'featured' => true,
    ],
    [
        'id' => 'pottery',
        'title' => 'Pottery studio session',
        'line' => 'Hand building and wheel demos, bisque to glaze, with steps you can actually follow.',
        'label' => 'Slow paced',
        'image' => $wimg('home-pottery-ceramics.png'),
        'imageAlt' => 'Hand glazed ceramics and pottery pieces on shelves in the studio',
        'moods' => ['handson', 'beginner', 'social'],
        'hover' => ['Typical session' => '2.5 to 3 hrs', 'Level' => 'No experience needed', 'Includes' => 'Clay, tools and firing prep'],
        'featured' => false,
    ],
    [
        'id' => 'knitting',
        'title' => 'Knitting workshop',
        'line' => 'Stitches, tension, and patterns in a low pressure circle.',
        'label' => 'Flexible option',
        'image' => $wimg('home-knitting-pink.png'),
        'imageAlt' => 'Hands knitting pink ribbed fabric with yarn on a wooden table',
        'moods' => ['relaxing', 'social', 'beginner'],
        'hover' => ['Typical session' => '2 hrs', 'Level' => 'True beginners ok', 'Includes' => 'Yarn and needles to use in studio'],
        'featured' => false,
    ],
];

$featured = null;
$others = [];
foreach ($workshops as $w) {
    if (!empty($w['featured'])) {
        $featured = $w;
    } else {
        $others[] = $w;
    }
}
$ordered = $featured !== null ? array_merge([$featured], $others) : $workshops;
?>

<div class="min-h-screen bg-neutral-100 text-ink-900">
    <!-- Catalog hero: image + gradient overlay, distinct from home split hero -->
    <div id="workshops" class="relative scroll-mt-20 overflow-hidden border-b border-neutral-800/20 bg-ink-950 text-white">
        <div class="pointer-events-none absolute inset-0" aria-hidden="true">
            <img
                src="<?= h($wimg('home-pottery-painted-cup.png')) ?>"
                alt=""
                class="h-full w-full object-cover object-center scale-105 sm:scale-100"
                loading="eager"
                fetchpriority="high"
                decoding="async"
            >
            <div class="absolute inset-0 bg-ink-950/32"></div>
            <div class="absolute inset-0 bg-gradient-to-br from-ink-950/90 via-ink-900/82 to-primary-950/86"></div>
            <div class="absolute inset-0 bg-[radial-gradient(ellipse_110%_90%_at_0%_0%,rgba(15,23,42,0.55),transparent_55%)]"></div>
            <div class="absolute inset-0 bg-[radial-gradient(ellipse_80%_60%_at_70%_20%,rgba(169,102,120,0.14),transparent_55%)]"></div>
        </div>
        <div class="relative z-10 mx-auto max-w-7xl px-6 py-10 md:px-8 md:py-14">
            <nav class="text-xs font-medium text-white/62" aria-label="Breadcrumb">
                <?= $this->Html->link('Home', '/', ['class' => 'transition hover:text-white']) ?>
                <span class="mx-2 text-white/35" aria-hidden="true">/</span>
                <span class="text-white/90">Workshops</span>
            </nav>
            <h1 class="mt-5 max-w-3xl font-serif text-3xl font-semibold leading-tight tracking-tight md:text-4xl lg:text-[2.65rem]">
                Workshop catalogue
            </h1>
            <p class="mt-4 max-w-2xl text-sm leading-relaxed text-white/80 md:text-base">
                Compare sessions side by side, filter by how you like to make, then book or send a quick enquiry. Everything is beginner friendly with materials provided.
            </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-lg bg-primary-400 px-6 py-2.5 text-sm font-semibold text-ink-950 transition hover:bg-primary-300 focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-offset-2 focus-visible:ring-offset-ink-900', 'escape' => false]
                ) ?>
                <span class="inline-flex items-center gap-2 rounded-lg border border-white/20 bg-white/5 px-4 py-2 text-xs font-medium text-white/80">
                    <span class="h-1.5 w-1.5 rounded-full bg-primary-400" aria-hidden="true"></span>
                    Next spots this weekend
                </span>
            </div>
        </div>
    </div>

    <div class="mx-auto max-w-7xl px-6 pb-16 pt-10 md:px-8 md:pb-20 md:pt-12">
        <div class="lg:grid lg:grid-cols-12 lg:gap-10 xl:gap-14">
            <!-- Sidebar: filters + anchors (catalog UX, not on home) -->
            <aside class="mb-10 lg:col-span-3 lg:mb-0" aria-label="Workshop filters">
                <div class="space-y-8 lg:sticky lg:top-24">
                    <div>
                        <p class="text-[0.65rem] font-bold uppercase tracking-[0.2em] text-neutral-500">Mood</p>
                        <div class="mt-3 flex flex-col gap-2" role="group" aria-label="Filter workshops by mood">
                            <button type="button" data-mood="all" class="mood-chip w-full rounded-lg border border-primary-600 bg-primary-50 px-4 py-2.5 text-left text-sm font-semibold text-primary-900 transition hover:border-primary-500">
                                All workshops
                            </button>
                            <button type="button" data-mood="relaxing" class="mood-chip w-full rounded-lg border border-neutral-200 bg-white px-4 py-2.5 text-left text-sm font-medium text-neutral-700 transition hover:border-primary-300">
                                Relaxing
                            </button>
                            <button type="button" data-mood="handson" class="mood-chip w-full rounded-lg border border-neutral-200 bg-white px-4 py-2.5 text-left text-sm font-medium text-neutral-700 transition hover:border-primary-300">
                                Hands on
                            </button>
                            <button type="button" data-mood="social" class="mood-chip w-full rounded-lg border border-neutral-200 bg-white px-4 py-2.5 text-left text-sm font-medium text-neutral-700 transition hover:border-primary-300">
                                Social
                            </button>
                            <button type="button" data-mood="beginner" class="mood-chip w-full rounded-lg border border-neutral-200 bg-white px-4 py-2.5 text-left text-sm font-medium text-neutral-700 transition hover:border-primary-300">
                                Beginner friendly
                            </button>
                        </div>
                    </div>
                    <div class="border-t border-neutral-200 pt-6">
                        <p class="text-[0.65rem] font-bold uppercase tracking-[0.2em] text-neutral-500">Jump to</p>
                        <ul class="mt-3 space-y-1 text-sm">
                            <?php foreach ($ordered as $jw): ?>
                                <li>
                                    <a href="#workshop-<?= h($jw['id']) ?>" class="text-primary-700 underline-offset-2 transition hover:text-primary-900 hover:underline"><?= h($jw['title']) ?></a>
                                </li>
                            <?php endforeach; ?>
                            <li>
                                <a href="#passes" class="text-neutral-600 underline-offset-2 transition hover:text-ink-900 hover:underline">Multi class passes</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </aside>

            <!-- Main list: horizontal catalog rows -->
            <div class="lg:col-span-9">
                <div class="mb-6 flex flex-wrap gap-2 lg:hidden" role="group" aria-label="Filter workshops by mood">
                    <button type="button" data-mood="all" class="mood-chip rounded-full border border-primary-500 bg-primary-50 px-3 py-1.5 text-xs font-semibold text-primary-800">All</button>
                    <button type="button" data-mood="relaxing" class="mood-chip rounded-full border border-neutral-200 bg-white px-3 py-1.5 text-xs font-medium text-neutral-700">Relaxing</button>
                    <button type="button" data-mood="handson" class="mood-chip rounded-full border border-neutral-200 bg-white px-3 py-1.5 text-xs font-medium text-neutral-700">Hands on</button>
                    <button type="button" data-mood="social" class="mood-chip rounded-full border border-neutral-200 bg-white px-3 py-1.5 text-xs font-medium text-neutral-700">Social</button>
                    <button type="button" data-mood="beginner" class="mood-chip rounded-full border border-neutral-200 bg-white px-3 py-1.5 text-xs font-medium text-neutral-700">Beginner</button>
                </div>

                <div class="space-y-5">
                    <?php foreach ($ordered as $w): ?>
                        <?php
                        $moodsAttr = h(implode(' ', $w['moods']));
                        ?>
                        <article
                            id="workshop-<?= h($w['id']) ?>"
                            data-workshop-card
                            data-moods="<?= $moodsAttr ?>"
                            class="group overflow-hidden rounded-xl border border-neutral-200/90 bg-white shadow-sm transition hover:border-primary-200/80 hover:shadow-md"
                        >
                            <div class="flex flex-col md:flex-row md:items-stretch md:min-h-[15rem]">
                                <div class="relative w-full shrink-0 overflow-hidden bg-neutral-200 md:w-[40%] md:self-stretch">
                                    <img
                                        src="<?= h($w['image']) ?>"
                                        alt="<?= h($w['imageAlt']) ?>"
                                        class="h-52 w-full object-cover transition duration-500 group-hover:scale-[1.03] md:h-full md:min-h-[15rem]"
                                        loading="lazy"
                                    >
                                    <span class="absolute left-3 top-3 rounded-md bg-white/95 px-2.5 py-1 text-[0.65rem] font-bold uppercase tracking-wide text-primary-800 shadow-sm">
                                        <?= h($w['label']) ?>
                                    </span>
                                </div>
                                <div class="flex min-w-0 flex-1 flex-col justify-between p-6 md:p-8">
                                    <div class="min-w-0 space-y-5">
                                        <h2 class="font-serif text-xl font-semibold text-ink-900 md:text-2xl"><?= h($w['title']) ?></h2>
                                        <p class="text-sm leading-relaxed text-neutral-600 md:text-[0.9375rem]"><?= h($w['line']) ?></p>
                                        <dl class="grid grid-cols-1 items-start gap-x-6 gap-y-3 border-t border-neutral-100 pt-4 text-sm sm:grid-cols-3">
                                            <?php foreach ($w['hover'] as $k => $v): ?>
                                                <div class="min-w-0">
                                                    <dt class="text-xs font-medium uppercase tracking-wider text-neutral-400"><?= h($k) ?></dt>
                                                    <dd class="mt-0.5 font-medium leading-snug text-ink-900"><?= $v ?></dd>
                                                </div>
                                            <?php endforeach; ?>
                                        </dl>
                                    </div>
                                    <div class="flex flex-wrap items-center gap-x-3 gap-y-2 border-t border-neutral-100 pt-5">
                                        <?php
                                        $lessonId = $workshopLessonIds[$w['id']] ?? null;
                                        $bookUrl = $lessonId !== null
                                            ? ['controller' => 'Bookings', 'action' => 'add', '?' => ['lesson_id' => $lessonId]]
                                            : '/booking';
                                        ?>
                                        <?= $this->Html->link(
                                            'Book now',
                                            $bookUrl,
                                            ['class' => 'inline-flex shrink-0 items-center justify-center rounded-lg bg-primary-600 px-5 py-2.5 text-sm font-semibold leading-none text-white transition hover:bg-primary-700 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-400']
                                        ) ?>
                                        <span class="inline-flex items-center text-xs font-medium leading-none text-neutral-500">Materials included · Small groups</span>
                                    </div>
                                </div>
                            </div>
                        </article>
                    <?php endforeach; ?>
                </div>

                <div id="passes" class="mt-8 scroll-mt-24">
                    <?= $this->Html->link(
                        '<div class="flex flex-col gap-1 sm:flex-row sm:items-center sm:justify-between sm:gap-6">'
                        . '<div><p class="text-[0.65rem] font-bold uppercase tracking-[0.2em] text-sage-600">Bundle</p><p class="mt-1 font-serif text-lg font-semibold text-ink-900">Multi class passes</p><p class="mt-1 text-sm text-neutral-600">Mix candle making, pottery, and knitting across several visits at a better rate.</p></div>'
                        . '<span class="inline-flex shrink-0 items-center gap-1 text-sm font-semibold text-primary-700">' . 'View in booking' . $this->element('ui_icon', ['name' => 'chevron_right', 'class' => 'h-5 w-5']) . '</span></div>',
                        '/booking',
                        ['class' => 'block rounded-xl border border-dashed border-primary-300/80 bg-gradient-to-br from-white to-primary-50/40 p-6 transition hover:border-primary-400 hover:shadow-sm md:p-8', 'escape' => false]
                    ) ?>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
(function () {
    const chips = document.querySelectorAll('.mood-chip');
    const cards = document.querySelectorAll('[data-workshop-card]');
    if (!chips.length || !cards.length) return;

    function setMood(mood) {
        chips.forEach((c) => {
            const m = c.getAttribute('data-mood');
            const on = m === mood;
            const isSidebar = c.classList.contains('w-full');
            if (isSidebar) {
                c.classList.toggle('border-primary-600', on);
                c.classList.toggle('bg-primary-50', on);
                c.classList.toggle('font-semibold', on);
                c.classList.toggle('font-medium', !on);
                c.classList.toggle('text-primary-900', on);
                c.classList.toggle('border-neutral-200', !on);
                c.classList.toggle('bg-white', !on);
                c.classList.toggle('text-neutral-700', !on);
            } else {
                c.classList.toggle('border-primary-500', on);
                c.classList.toggle('bg-primary-50', on);
                c.classList.toggle('text-primary-800', on);
                c.classList.toggle('font-semibold', on);
                c.classList.toggle('font-medium', !on);
                c.classList.toggle('border-neutral-200', !on);
                c.classList.toggle('bg-white', !on);
                c.classList.toggle('text-neutral-700', !on);
            }
        });
        cards.forEach((card) => {
            const moods = (card.getAttribute('data-moods') || '').trim().split(/\s+/).filter(Boolean);
            const match = mood === 'all' || moods.includes(mood);
            card.style.opacity = match ? '1' : '0.3';
            card.style.filter = match ? '' : 'grayscale(0.35)';
            card.style.pointerEvents = match ? '' : 'none';
        });
    }

    chips.forEach((chip) => {
        chip.addEventListener('click', () => setMood(chip.getAttribute('data-mood') || 'all'));
    });
})();
</script>
