<?php
declare(strict_types=1);

$this->assign('title', 'Your visit');
$c = $company ?? null;
$address = h($c?->address ?? '123 Craft Lane, Creative City');
$email = h((string)($c?->email ?? 'CandleCraftAcademy@gmail.com'));
$phoneDisplay = h((string)($c?->phone ?? '+61 412 345 678'));
$addressRaw = (string)($c?->address ?? '123 Craft Lane, Creative City');
$mapsUrl = 'https://www.google.com/maps/search/?api=1&query=' . rawurlencode($addressRaw);

$visitImg = fn (string $file): string => h($this->Url->build('/img/landing/' . $file));
?>

<div class="bg-studio-ivory text-ink-900">
    <div id="visit-hero" class="relative scroll-mt-20 overflow-hidden border-b border-neutral-800/20 bg-ink-950 text-white" aria-labelledby="visit-hero-heading">
        <div class="pointer-events-none absolute inset-0" aria-hidden="true">
            <img
                src="<?= $visitImg('home-pottery-ceramics.png') ?>"
                alt=""
                class="h-full w-full min-h-[260px] object-cover object-center scale-105 sm:scale-100 sm:min-h-0"
                loading="eager"
                fetchpriority="high"
                decoding="async"
            >
            <div class="absolute inset-0 bg-ink-950/40"></div>
            <div class="absolute inset-0 bg-gradient-to-br from-ink-950/92 via-ink-900/85 to-primary-950/88"></div>
            <div class="absolute inset-0 bg-[radial-gradient(ellipse_100%_80%_at_100%_0%,rgba(169,102,120,0.12),transparent_50%)]"></div>
        </div>
        <div class="relative z-10 mx-auto max-w-7xl px-6 py-12 md:px-8 md:py-16">
            <p class="text-[0.65rem] font-semibold uppercase tracking-[0.22em] text-primary-200/90">Visitor information</p>
            <h1 id="visit-hero-heading" class="mt-3 max-w-2xl font-serif text-3xl font-semibold leading-tight tracking-tight text-white md:text-4xl lg:text-[2.65rem]">
                Before you arrive
            </h1>
            <p class="mt-4 max-w-xl text-sm leading-relaxed text-white/85 md:text-base">
                Directions, what to wear, and how sessions run. For policies and refunds, use our
                <?= $this->Html->link('FAQs', '/faqs', ['class' => 'font-medium text-primary-200 underline decoration-primary-400/50 underline-offset-2 hover:text-white']) ?>.
            </p>
            <a
                href="#visit-practical"
                class="mt-8 inline-flex items-center gap-2 rounded-lg border border-white/25 bg-white/10 px-4 py-2.5 text-sm font-medium text-white/95 backdrop-blur-sm transition hover:border-white/40 hover:bg-white/15 focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-offset-2 focus-visible:ring-offset-ink-900"
            >
                <?= $this->element('ui_icon', ['name' => 'chevron_down', 'class' => 'h-4 w-4 text-primary-200']) ?>
                See practical details
            </a>
        </div>
    </div>

    <section class="py-12 md:py-16 lg:py-20" id="visit-practical" aria-labelledby="visit-practical-heading">
        <div class="mx-auto max-w-6xl px-6 lg:px-8">
            <h2 id="visit-practical-heading" class="sr-only">Practical details for your visit</h2>
            <div class="grid gap-5 md:grid-cols-2 lg:gap-6">
                <div class="rounded-2xl border border-neutral-200/80 bg-white p-6 shadow-sm md:p-7">
                    <div class="flex gap-4">
                        <span class="flex h-11 w-11 shrink-0 items-center justify-center rounded-xl bg-primary-50 text-primary-700" aria-hidden="true">
                            <?= $this->element('ui_icon', ['name' => 'building_office_2', 'class' => 'h-5 w-5']) ?>
                        </span>
                        <div>
                            <h3 class="text-base font-semibold text-ink-900">Find us</h3>
                            <p class="mt-2 text-sm font-medium leading-snug text-ink-900"><?= $address ?></p>
                            <p class="mt-3 text-sm text-neutral-600">
                                <span class="font-medium text-ink-800"><?= $phoneDisplay ?></span>
                                <span class="text-neutral-400" aria-hidden="true"> · </span>
                                <?= $email ?>
                            </p>
                            <p class="mt-4">
                                <a href="<?= h($mapsUrl) ?>" rel="noopener noreferrer" target="_blank" class="inline-flex items-center gap-1.5 text-sm font-semibold text-primary-700 hover:text-primary-800">
                                    Open in Maps
                                    <?= $this->element('ui_icon', ['name' => 'chevron_right', 'class' => 'h-4 w-4']) ?>
                                </a>
                            </p>
                        </div>
                    </div>
                </div>

                <div class="rounded-2xl border border-neutral-200/80 bg-white p-6 shadow-sm md:p-7">
                    <div class="flex gap-4">
                        <span class="flex h-11 w-11 shrink-0 items-center justify-center rounded-xl bg-sage-50 text-sage-600" aria-hidden="true">
                            <?= $this->element('ui_icon', ['name' => 'calendar_days', 'class' => 'h-5 w-5']) ?>
                        </span>
                        <div>
                            <h3 class="text-base font-semibold text-ink-900">Arrive on time</h3>
                            <p class="mt-2 text-sm leading-relaxed text-neutral-600">
                                Aim for about <strong class="font-semibold text-ink-800">10 minutes early</strong> so we can check you in and show you where to put your things before we start.
                            </p>
                            <p class="mt-3 text-sm leading-relaxed text-neutral-600">
                                Running late? Use
                                <button type="button" onclick="openContactModal()" class="font-medium text-primary-700 underline decoration-primary-300 underline-offset-2 hover:text-primary-800">Contact</button>
                                in the top menu to reach us.
                            </p>
                        </div>
                    </div>
                </div>

                <div class="rounded-2xl border border-neutral-200/80 bg-white p-6 shadow-sm md:p-7">
                    <div class="flex gap-4">
                        <span class="flex h-11 w-11 shrink-0 items-center justify-center rounded-xl bg-primary-50 text-primary-700" aria-hidden="true">
                            <?= $this->element('ui_icon', ['name' => 'cube', 'class' => 'h-5 w-5']) ?>
                        </span>
                        <div>
                            <h3 class="text-base font-semibold text-ink-900">What to bring</h3>
                            <p class="mt-2 text-sm leading-relaxed text-neutral-600">
                                Materials and tools are included for candle, pottery, and knitting sessions. Wear clothes you are fine getting dusty or splashed; closed toe shoes work best around clay and hot wax.
                            </p>
                            <p class="mt-3 text-sm leading-relaxed text-neutral-600">
                                A water bottle and a light layer for our air conditioned studio are good ideas.
                            </p>
                        </div>
                    </div>
                </div>

                <div class="rounded-2xl border border-neutral-200/80 bg-white p-6 shadow-sm md:p-7">
                    <div class="flex gap-4">
                        <span class="flex h-11 w-11 shrink-0 items-center justify-center rounded-xl bg-sage-50 text-sage-600" aria-hidden="true">
                            <?= $this->element('ui_icon', ['name' => 'users', 'class' => 'h-5 w-5']) ?>
                        </span>
                        <div>
                            <h3 class="text-base font-semibold text-ink-900">In the room</h3>
                            <p class="mt-2 text-sm leading-relaxed text-neutral-600">
                                Groups stay small so instructors can give everyone attention. Photos are fine when they respect other guests; ask if you are unsure.
                            </p>
                            <p class="mt-3 text-sm leading-relaxed text-neutral-600">
                                Some work (such as pottery) may need firing or cooling; your teacher will explain pickup or shipping when it applies.
                            </p>
                        </div>
                    </div>
                </div>
            </div>

            <p class="mx-auto mt-12 max-w-lg border-t border-neutral-200/80 pt-8 text-center text-sm leading-relaxed text-neutral-600">
                When you have picked a workshop, choose a date and pay in
                <?= $this->Html->link('the booking flow', '/booking', ['class' => 'font-medium text-primary-700 underline decoration-primary-300 underline-offset-2 hover:text-primary-900']) ?>.
            </p>
        </div>
    </section>
</div>
