<?php
define('JORNADA_SECURE', true);
require_once __DIR__ . '/config.php';

session_start();
if (empty($_SESSION['csrf_token'])) {
    $_SESSION['csrf_token'] = bin2hex(random_bytes(32));
}
$csrf  = $_SESSION['csrf_token'];
$ftime = time();

// Estado de cada palestra (inscrições fecham às 0h; "já decorreu" após a hora de fim;
// esgotadas são bloqueadas manualmente em config.php)
$encerradas = []; $decorridas = []; $esgotadas = []; $bloqueadas = [];
foreach (array_keys(PALESTRAS_DATAS) as $pid) {
    $pid = (string)$pid;
    $encerradas[$pid] = palestraEncerrada($pid);
    $decorridas[$pid] = palestraDecorrida($pid);
    $esgotadas[$pid]  = palestraEsgotada($pid);
    $bloqueadas[$pid] = $encerradas[$pid] || $esgotadas[$pid];
}
$ciclo_disponivel = count(palestrasDisponiveis()) === count(PALESTRAS_DATAS);

// Classe e preço de cada sessão na lista "O Programa"
function sessionClass(string $id): string {
    global $decorridas, $esgotadas;
    if ($decorridas[$id]) return ' past';
    if ($esgotadas[$id])  return ' sold-out';
    return '';
}
function sessionPrice(string $id): string {
    global $decorridas, $esgotadas;
    if ($decorridas[$id]) return 'Já decorreu';
    if ($esgotadas[$id])  return 'Esgotada';
    return '10€';
}

// Badge da opção no formulário
function pickBadge(string $id): string {
    global $encerradas, $decorridas, $esgotadas;
    if ($decorridas[$id]) return '<span class="pick-past">Já decorreu</span>';
    if ($esgotadas[$id])  return '<span class="pick-sold">Esgotada</span>';
    if ($encerradas[$id]) return '<span class="pick-past">Inscrições encerradas</span>';
    return '<span class="pick-price">10€</span>';
}
?>
<!DOCTYPE html>
<html lang="pt">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>A Jornada do Patudo — Inscrições | HOLI.PET &amp; FAMILY</title>
<meta name="description" content="5 domingos. 5 capítulos de vida. Ciclo de palestras para celebrar 5 anos da HOLI.PET & FAMILY.">
<link rel="icon" type="image/png" href="images/logo_selo.png">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&display=swap" rel="stylesheet">
<style>
:root {
  --cream:        #F7F0E6;
  --cream-light:  #FBF7F2;
  --orange:       #C96B24;
  --orange-mid:   #D97C38;
  --orange-light: #E8935A;
  --orange-pale:  #F5E0CC;
  --dark:         #2C2C2C;
  --mid:          #666;
  --border:       #DDD0BB;
  --white:        #fff;
  --radius:       14px;
  --shadow:       0 2px 24px rgba(44,28,8,.08);
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Nunito', sans-serif;
  background: var(--cream);
  color: var(--dark);
  line-height: 1.65;
  min-height: 100vh;
}

/* ── Blobs decorativos ─────────────────────────────────────────────────── */
.blob {
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  opacity: .18;
}
.blob-tr {
  width: 340px; height: 340px;
  background: var(--orange-light);
  top: -80px; right: -80px;
}
.blob-bl {
  width: 260px; height: 260px;
  background: #A8C5A0;
  bottom: -60px; left: -60px;
}

/* ── Container ─────────────────────────────────────────────────────────── */
.wrap {
  position: relative;
  z-index: 1;
  max-width: 700px;
  margin: 0 auto;
  padding: 0 20px 60px;
}

/* ── Hero ──────────────────────────────────────────────────────────────── */
.hero {
  text-align: center;
  padding: 52px 20px 40px;
}
.hero .logo {
  width: 110px;
  height: 110px;
  object-fit: contain;
  margin-bottom: 16px;
}
.badge {
  display: inline-block;
  background: var(--orange);
  color: #fff;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: 100px;
  margin-bottom: 18px;
}
.hero h1 {
  font-size: clamp(1.8rem, 5vw, 2.6rem);
  font-weight: 900;
  line-height: 1.18;
  color: var(--dark);
  margin-bottom: 14px;
}
.hero h1 span { color: var(--orange); }
.hero .tagline {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 10px;
}
.hero .desc {
  font-size: .95rem;
  color: var(--mid);
  max-width: 480px;
  margin: 0 auto;
}
.hero .location {
  display: inline-block;
  margin-top: 16px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 22px;
  font-size: .85rem;
  font-weight: 700;
  line-height: 1.7;
}
.hero .location a { color: var(--orange); text-decoration: none; }
.hero .location a:hover { text-decoration: underline; }
.hero .location span { color: var(--mid); font-weight: 600; }

/* ── Section headings ──────────────────────────────────────────────────── */
.section-title {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--dark);
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.section-title::before {
  content: '';
  display: block;
  width: 4px;
  height: 22px;
  background: var(--orange);
  border-radius: 2px;
  flex-shrink: 0;
}

/* ── Program cards ─────────────────────────────────────────────────────── */
.program { margin-bottom: 32px; }

.session {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
  margin-bottom: 8px;
  box-shadow: var(--shadow);
}
.s-num {
  font-size: 1.4rem;
  font-weight: 900;
  color: var(--border);
  min-width: 28px;
  text-align: center;
  line-height: 1;
  padding-top: 3px;
}
.s-body { flex: 1; }
.s-date {
  font-size: .78rem;
  font-weight: 800;
  color: var(--orange);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 3px;
}
.s-title {
  font-size: .97rem;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 2px;
}
.s-sub {
  font-size: .84rem;
  color: var(--mid);
  font-style: italic;
}
.s-price {
  font-size: .95rem;
  font-weight: 800;
  color: var(--orange);
  white-space: nowrap;
  padding-top: 4px;
}

/* ── Pricing banner ────────────────────────────────────────────────────── */
.pricing-banner {
  background: var(--orange);
  color: #fff;
  border-radius: var(--radius);
  padding: 18px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 32px;
  gap: 12px;
}
.pricing-banner .label {
  font-size: .93rem;
  opacity: .85;
}
.pricing-banner .amount {
  font-size: 1.4rem;
  font-weight: 900;
}
.pricing-sep {
  width: 1px;
  height: 36px;
  background: rgba(255,255,255,.3);
  flex-shrink: 0;
}

/* ── Form ──────────────────────────────────────────────────────────────── */
.form-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px 26px;
  box-shadow: var(--shadow);
  margin-bottom: 12px;
}
.form-note {
  font-size: .84rem;
  color: var(--mid);
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.field { margin-bottom: 18px; }
.field label {
  display: block;
  font-size: .85rem;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 6px;
}
.field input[type="text"],
.field input[type="email"],
.field input[type="tel"] {
  width: 100%;
  padding: 11px 14px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  font-family: inherit;
  font-size: .95rem;
  color: var(--dark);
  background: var(--cream-light);
  transition: border-color .18s, box-shadow .18s;
  outline: none;
}
.field input:focus {
  border-color: var(--orange);
  box-shadow: 0 0 0 3px var(--orange-pale);
  background: #fff;
}

/* ── Radio pills (tipo animal) ─────────────────────────────────────────── */
.radio-group {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.radio-pill input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; }
.radio-pill label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  border: 1.5px solid var(--border);
  border-radius: 100px;
  font-size: .88rem;
  font-weight: 700;
  color: var(--mid);
  background: var(--cream-light);
  cursor: pointer;
  transition: all .18s;
  user-select: none;
}
.radio-pill input:checked + label {
  border-color: var(--orange);
  background: var(--orange-pale);
  color: var(--orange);
}
.radio-pill label:hover {
  border-color: var(--orange-mid);
  color: var(--orange);
}

/* ── Session checkboxes ────────────────────────────────────────────────── */
.session-picks { margin-bottom: 4px; }

.pick-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  margin-bottom: 6px;
  cursor: pointer;
  background: var(--cream-light);
  transition: all .18s;
  user-select: none;
}
.pick-item:hover { border-color: var(--orange-mid); background: #fff; }
.pick-item.checked {
  border-color: var(--orange);
  background: var(--orange-pale);
}

.pick-item input[type="checkbox"] { display: none; }

.custom-check {
  width: 20px;
  height: 20px;
  border: 2px solid var(--border);
  border-radius: 5px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .18s;
  background: #fff;
}
.pick-item.checked .custom-check {
  background: var(--orange);
  border-color: var(--orange);
}
.custom-check svg { display: none; }
.pick-item.checked .custom-check svg { display: block; }

.pick-num {
  font-size: .78rem;
  font-weight: 900;
  color: var(--orange-light);
  min-width: 16px;
}
.pick-item.checked .pick-num { color: var(--orange); }

.pick-date {
  font-size: .78rem;
  font-weight: 800;
  color: var(--orange);
  text-transform: uppercase;
  letter-spacing: .04em;
  min-width: 44px;
}
.pick-title {
  flex: 1;
  font-size: .88rem;
  font-weight: 700;
  color: var(--dark);
}
.pick-price {
  font-size: .9rem;
  font-weight: 800;
  color: var(--orange);
  white-space: nowrap;
}

/* Ciclo completo item */
.pick-item.ciclo {
  border-style: dashed;
  border-color: var(--orange-light);
  background: #fff;
}
.pick-item.ciclo.checked {
  border-style: solid;
  border-color: var(--orange);
  background: var(--orange-pale);
}
.pick-item.ciclo .pick-title {
  color: var(--orange);
  font-weight: 800;
}

/* Palestra já decorrida / opção indisponível */
.session.past { opacity: .55; }
.session.past .s-price { color: var(--mid); }
.pick-item.disabled {
  opacity: .55;
  cursor: not-allowed;
  pointer-events: none;
  background: var(--cream-light);
}
.pick-past {
  font-size: .68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--mid);
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: 100px;
  padding: 3px 10px;
  white-space: nowrap;
}
.pick-sold {
  font-size: .68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #c0392b;
  background: #fdeceb;
  border: 1px solid #f2c4c0;
  border-radius: 100px;
  padding: 3px 10px;
  white-space: nowrap;
}
.session.sold-out .s-price { color: #c0392b; font-size: .82rem; text-transform: uppercase; letter-spacing: .04em; }

/* ── Coupon ────────────────────────────────────────────────────────────── */
.coupon-toggle {
  background: none;
  border: none;
  font-family: inherit;
  font-size: .84rem;
  font-weight: 700;
  color: var(--orange);
  cursor: pointer;
  padding: 0;
  margin-bottom: 10px;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 3px;
}
#coupon-field { display: none; }

/* ── Price summary ─────────────────────────────────────────────────────── */
.price-summary {
  background: var(--cream-light);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 20px;
  margin-bottom: 20px;
}
.price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 0;
}
.price-row + .price-row { border-top: 1px dashed var(--border); }
.ps-label { font-size: .88rem; font-weight: 600; color: var(--mid); }
.ps-label.bold { font-weight: 800; color: var(--dark); font-size: .9rem; }
.ps-val { font-size: .95rem; font-weight: 700; color: var(--dark); }
.ps-val.green { color: #16a34a; }
.ps-amount { font-size: 1.4rem; font-weight: 900; color: var(--orange); }
.ciclo-tag {
  font-size: .72rem;
  font-weight: 800;
  background: var(--orange);
  color: #fff;
  border-radius: 100px;
  padding: 2px 9px;
  margin-left: 8px;
  display: none;
}

/* ── Coupon status ─────────────────────────────────────────────────────── */
.cupon-status { font-size: .82rem; font-weight: 700; margin-top: 6px; min-height: 18px; }
.cupon-ok    { color: #16a34a; }
.cupon-error { color: #dc2626; }
.cupon-loading { color: var(--mid); }

/* ── Submit button ─────────────────────────────────────────────────────── */
.btn-submit {
  width: 100%;
  background: var(--orange);
  color: #fff;
  border: none;
  border-radius: 100px;
  padding: 15px 24px;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 800;
  cursor: pointer;
  transition: background .18s, transform .1s;
  letter-spacing: .01em;
}
.btn-submit:hover { background: var(--orange-mid); }
.btn-submit:active { transform: scale(.98); }
.btn-submit:disabled {
  background: var(--border);
  color: var(--mid);
  cursor: not-allowed;
  transform: none;
}

/* ── Error message ─────────────────────────────────────────────────────── */
.error-msg {
  display: none;
  background: #FEE2E2;
  border: 1px solid #FCA5A5;
  color: #B91C1C;
  border-radius: 10px;
  padding: 12px 16px;
  font-size: .88rem;
  font-weight: 700;
  margin-bottom: 14px;
}

/* ── Success screen ────────────────────────────────────────────────────── */
#success-section { display: none; }
.success-card {
  background: var(--white);
  border: 1.5px solid #86EFAC;
  border-radius: var(--radius);
  padding: 40px 28px;
  text-align: center;
  box-shadow: var(--shadow);
}
.success-icon {
  font-size: 3rem;
  margin-bottom: 16px;
}
.success-card h2 {
  font-size: 1.4rem;
  font-weight: 900;
  color: var(--dark);
  margin-bottom: 10px;
}
.success-card p {
  font-size: .93rem;
  color: var(--mid);
  max-width: 360px;
  margin: 0 auto 18px;
}
.success-total {
  display: inline-block;
  background: var(--orange-pale);
  color: var(--orange);
  font-size: 1.1rem;
  font-weight: 900;
  border-radius: 100px;
  padding: 8px 22px;
  margin-bottom: 20px;
}
.success-note {
  font-size: .82rem;
  color: var(--mid);
  background: var(--cream-light);
  border-radius: 10px;
  padding: 10px 16px;
  max-width: 380px;
  margin: 0 auto;
}

/* ── Footer ────────────────────────────────────────────────────────────── */
footer {
  text-align: center;
  font-size: .8rem;
  color: var(--border);
  padding: 24px 20px 12px;
  font-weight: 600;
  line-height: 1.8;
}
footer a { color: inherit; }

/* ── Responsivo ────────────────────────────────────────────────────────── */
@media (max-width: 500px) {
  .pricing-banner { flex-direction: column; text-align: center; gap: 6px; }
  .pricing-sep { display: none; }
  .form-card { padding: 20px 16px; }
  .pick-title { font-size: .82rem; }
}
</style>
</head>
<body>

<div class="blob blob-tr"></div>
<div class="blob blob-bl"></div>

<div class="wrap">

  <!-- ── Hero ───────────────────────────────────────────────────────────── -->
  <header class="hero">
    <img src="images/logo_selo.png" alt="HOLI.PET & FAMILY" class="logo">
    <div><span class="badge">Aniversário 5 anos</span></div>
    <h1>A Jornada do <span>Patudo</span><br>e do Tutor <span>Consciênte</span></h1>
    <p class="tagline">5 domingos. 5 capítulos de vida.</p>
    <p class="desc">Da chegada a casa até à despedida — um ciclo de palestras para celebrar os nossos 5 anos a acompanhar as famílias multiespécie.</p>
    <p class="location">
      📍 Palestras no <a href="https://maps.app.goo.gl/8zBEGtZf2xvv4sE97" target="_blank" rel="noopener">Centro Veterinário Holi.Pet &amp; Family</a><br>
      <span>Av. Maria Lamas 94B, 2775-123 Parede</span>
    </p>
  </header>

  <!-- ── Programa ────────────────────────────────────────────────────────── -->
  <section class="program">
    <h2 class="section-title">O Programa</h2>

    <div class="session<?= sessionClass('1') ?>">
      <div class="s-num">1</div>
      <div class="s-body">
        <div class="s-date">5 Jul · 10h30 – 13h</div>
        <div class="s-title">"Começar com o pé direito"</div>
        <div class="s-sub">O início de vida do cão e do gato</div>
      </div>
      <div class="s-price"><?= sessionPrice('1') ?></div>
    </div>

    <div class="session<?= sessionClass('2') ?>">
      <div class="s-num">2</div>
      <div class="s-body">
        <div class="s-date">12 Jul · 10h30 – 13h</div>
        <div class="s-title">"Compreender antes de educar"</div>
        <div class="s-sub">Comportamento consciente</div>
      </div>
      <div class="s-price"><?= sessionPrice('2') ?></div>
    </div>

    <div class="session<?= sessionClass('3') ?>">
      <div class="s-num">3</div>
      <div class="s-body">
        <div class="s-date">19 Jul · 10h30 – 13h</div>
        <div class="s-title">"O Essencial para uma Vida Equilibrada"</div>
        <div class="s-sub">Mais do que nutrição — um olhar holístico</div>
      </div>
      <div class="s-price"><?= sessionPrice('3') ?></div>
    </div>

    

    <div class="session<?= sessionClass('4') ?>">
      <div class="s-num">4</div>
      <div class="s-body">
        <div class="s-date">26 Jul · 10h30 – 13h</div>
        <div class="s-title">"Envelhecer com bem-estar, despedir em paz"</div>
        <div class="s-sub">Pacientes seniores, fim de vida e luto</div>
      </div>
      <div class="s-price"><?= sessionPrice('4') ?></div>
    </div>

    <div class="session<?= sessionClass('5') ?>">
      <div class="s-num">5</div>
      <div class="s-body">
        <div class="s-date">2 Ago · 10h30 – 13h</div>
        <div class="s-title">"Unidade familiar"</div>
        <div class="s-sub">A missão do patudo na família · Com Drª Raquel Ribeiro</div>
      </div>
      <div class="s-price"><?= sessionPrice('5') ?></div>
    </div>
  </section>

  <!-- ── Preços ──────────────────────────────────────────────────────────── -->
  <div class="pricing-banner">
    <div>
      <div class="label">Por palestra</div>
      <div class="amount">10€</div>
    </div>
    <div class="pricing-sep"></div>
    <div<?= $ciclo_disponivel ? '' : ' style="opacity:.55"' ?>>
      <div class="label">Ciclo completo (5 palestras)</div>
      <?php if ($ciclo_disponivel): ?>
      <div class="amount">40€</div>
      <?php else: ?>
      <div class="amount" style="font-size:1rem">Indisponível</div>
      <?php endif; ?>
    </div>
    <div class="pricing-sep"></div>
    <div style="text-align:center">
      <div class="label">Vagas</div>
      <div class="amount" style="font-size:1rem">Limitadas</div>
    </div>
  </div>

  <!-- ── Formulário ──────────────────────────────────────────────────────── -->
  <section id="form-section">
    <h2 class="section-title">Reserve o seu lugar</h2>
    <p class="form-note">🐾 Inscrições válidas até ao dia anterior de cada palestra</p>

    <div class="form-card">
      <div id="error-msg" class="error-msg" role="alert"></div>

      <form id="inscricao-form" novalidate>
        <input type="hidden" name="csrf_token" value="<?= htmlspecialchars($csrf, ENT_QUOTES) ?>">
        <input type="hidden" name="form_time"  value="<?= $ftime ?>">

        <!-- Honeypot — não mostrar ao utilizador -->
        <div aria-hidden="true" style="position:absolute;left:-9999px;top:-9999px;opacity:0;pointer-events:none;height:0;overflow:hidden">
          <input type="text" name="website" tabindex="-1" autocomplete="off" value="">
        </div>

        <!-- Nome -->
        <div class="field">
          <label for="nome">Nome completo <span style="color:var(--orange)">*</span></label>
          <input type="text" id="nome" name="nome" placeholder="O seu nome" autocomplete="name" required maxlength="100">
        </div>

        <!-- Email -->
        <div class="field">
          <label for="email">Email <span style="color:var(--orange)">*</span></label>
          <input type="email" id="email" name="email" placeholder="o.seu@email.com" autocomplete="email" required maxlength="200">
        </div>

        <!-- Telemóvel -->
        <div class="field">
          <label for="telemovel">Telemóvel <span style="color:var(--orange)">*</span></label>
          <input type="tel" id="telemovel" name="telemovel" placeholder="912 345 678" autocomplete="tel" required maxlength="20">
        </div>

        <!-- Tipo de animal -->
        <div class="field">
          <label>Sou tutor de... <span style="color:var(--orange)">*</span></label>
          <div class="radio-group">
            <div class="radio-pill">
              <input type="radio" id="tipo-cao"   name="tipo_animal" value="cao">
              <label for="tipo-cao">🐕 Cão</label>
            </div>
            <div class="radio-pill">
              <input type="radio" id="tipo-gato"  name="tipo_animal" value="gato">
              <label for="tipo-gato">🐈 Gato</label>
            </div>
            <div class="radio-pill">
              <input type="radio" id="tipo-ambos" name="tipo_animal" value="ambos">
              <label for="tipo-ambos">🐕🐈 Cão e Gato</label>
            </div>
          </div>
        </div>

        <!-- Palestras -->
        <div class="field">
          <label>Palestras <span style="color:var(--orange)">*</span></label>
          <div class="session-picks" id="session-picks">

            <!-- Ciclo completo (toggle) -->
            <label class="pick-item ciclo<?= $ciclo_disponivel ? '' : ' disabled' ?>" id="ciclo-label"<?= $ciclo_disponivel ? '' : ' aria-disabled="true"' ?>>
              <input type="checkbox" id="ciclo-all"<?= $ciclo_disponivel ? '' : ' disabled' ?>>
              <div class="custom-check">
                <svg width="11" height="9" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M1 4.5L4 7.5L10 1" stroke="white" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
              </div>
              <span class="pick-num">🐾</span>
              <span class="pick-date" style="min-width:auto">Ciclo&nbsp;Completo</span>
              <span class="pick-title">Todas as 5 palestras</span>
              <?= $ciclo_disponivel ? '<span class="pick-price">40€</span>' : '<span class="pick-past">Indisponível</span>' ?>
            </label>

            <!-- Palestras individuais -->
            <label class="pick-item<?= $bloqueadas['1'] ? ' disabled' : '' ?>" data-id="1"<?= $bloqueadas['1'] ? ' aria-disabled="true"' : '' ?>>
              <input type="checkbox" name="palestras[]" value="1"<?= $bloqueadas['1'] ? ' disabled' : '' ?>>
              <div class="custom-check">
                <svg width="11" height="9" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M1 4.5L4 7.5L10 1" stroke="white" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
              </div>
              <span class="pick-num">1</span>
              <span class="pick-date">5 Jul</span>
              <span class="pick-title">"Começar com o pé direito"</span>
              <?= pickBadge('1') ?>
            </label>

            <label class="pick-item<?= $bloqueadas['2'] ? ' disabled' : '' ?>" data-id="2"<?= $bloqueadas['2'] ? ' aria-disabled="true"' : '' ?>>
              <input type="checkbox" name="palestras[]" value="2"<?= $bloqueadas['2'] ? ' disabled' : '' ?>>
              <div class="custom-check">
                <svg width="11" height="9" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M1 4.5L4 7.5L10 1" stroke="white" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
              </div>
              <span class="pick-num">2</span>
              <span class="pick-date">12 Jul</span>
              <span class="pick-title">"Compreender antes de educar"</span>
              <?= pickBadge('2') ?>
            </label>

            <label class="pick-item<?= $bloqueadas['3'] ? ' disabled' : '' ?>" data-id="3"<?= $bloqueadas['3'] ? ' aria-disabled="true"' : '' ?>>
              <input type="checkbox" name="palestras[]" value="3"<?= $bloqueadas['3'] ? ' disabled' : '' ?>>
              <div class="custom-check">
                <svg width="11" height="9" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M1 4.5L4 7.5L10 1" stroke="white" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
              </div>
              <span class="pick-num">3</span>
              <span class="pick-date">19 Jul</span>
              <span class="pick-title">"O Essencial para uma Vida Equilibrada"</span>
              <?= pickBadge('3') ?>
            </label>

            

            <label class="pick-item<?= $bloqueadas['4'] ? ' disabled' : '' ?>" data-id="4"<?= $bloqueadas['4'] ? ' aria-disabled="true"' : '' ?>>
              <input type="checkbox" name="palestras[]" value="4"<?= $bloqueadas['4'] ? ' disabled' : '' ?>>
              <div class="custom-check">
                <svg width="11" height="9" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M1 4.5L4 7.5L10 1" stroke="white" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
              </div>
              <span class="pick-num">4</span>
              <span class="pick-date">26 Jul</span>
              <span class="pick-title">"Envelhecer com bem-estar, despedir em paz"</span>
              <?= pickBadge('4') ?>
            </label>

            <label class="pick-item<?= $bloqueadas['5'] ? ' disabled' : '' ?>" data-id="5"<?= $bloqueadas['5'] ? ' aria-disabled="true"' : '' ?>>
              <input type="checkbox" name="palestras[]" value="5"<?= $bloqueadas['5'] ? ' disabled' : '' ?>>
              <div class="custom-check">
                <svg width="11" height="9" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M1 4.5L4 7.5L10 1" stroke="white" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
              </div>
              <span class="pick-num">5</span>
              <span class="pick-date">2 Ago</span>
              <span class="pick-title">"Unidade familiar"</span>
              <?= pickBadge('5') ?>
            </label>

          </div>
        </div>

        <!-- Cupão -->
        <button type="button" class="coupon-toggle" id="coupon-toggle">Tenho um cupão de desconto</button>
        <div id="coupon-field" class="field">
          <label for="cupon">Código de cupão</label>
          <div style="display:flex;gap:8px;">
            <input type="text" id="cupon" name="cupon" placeholder="ex: HOLIPET5" maxlength="50" autocomplete="off" style="flex:1;min-width:0">
            <button type="button" id="cupon-btn" style="flex-shrink:0;padding:11px 16px;background:var(--orange-pale);border:1.5px solid var(--border);border-radius:10px;font-family:inherit;font-size:.85rem;font-weight:800;color:var(--orange);cursor:pointer;white-space:nowrap;transition:all .18s">Verificar</button>
          </div>
          <div id="cupon-status" class="cupon-status"></div>
        </div>

        <!-- Preço -->
        <div class="price-summary">
          <div id="subtotal-row" class="price-row" style="display:none">
            <span class="ps-label">Subtotal</span>
            <span class="ps-val" id="subtotal-display">0€</span>
          </div>
          <div id="discount-row" class="price-row" style="display:none">
            <span class="ps-label">Cupão — desconto</span>
            <span class="ps-val green" id="desconto-display">-0€</span>
          </div>
          <div class="price-row">
            <span class="ps-label bold">Total a pagar</span>
            <span>
              <span class="ps-amount" id="total-display">0€</span>
              <span class="ciclo-tag" id="ciclo-tag">Ciclo Completo</span>
            </span>
          </div>
        </div>

        <button type="submit" class="btn-submit" id="submit-btn">
          🐾 Reservar o meu lugar
        </button>
      </form>
    </div>

    <p style="font-size:.78rem;color:var(--mid);text-align:center;margin-top:10px">
      Após a inscrição receberá um email com os dados de pagamento.
    </p>
  </section>

  <!-- ── Sucesso ─────────────────────────────────────────────────────────── -->
  <section id="success-section">
    <div class="success-card">
      <div class="success-icon">🐾</div>
      <h2>Inscrição recebida!</h2>
      <p>Estamos muito felizes por o receber no ciclo de palestras.</p>
      <div class="success-total" id="success-total"></div>
      <p>Enviámos-lhe um email com os <strong>dados de pagamento</strong>.<br>A sua inscrição fica confirmada após o pagamento.</p>
      <div class="success-note" style="margin-top:14px">
        Não encontra o email? Verifique a pasta de spam ou <a href="mailto:geral@holipet.pt?subject=Inscrição%20Jornada%20do%20Patudo">contacte-nos</a>.
      </div>
    </div>
  </section>

</div><!-- /wrap -->

<footer>
  HOLI.PET &amp; FAMILY · Centro Veterinário Integrativo<br>
  <a href="https://maps.app.goo.gl/8zBEGtZf2xvv4sE97" target="_blank" rel="noopener">Av. Maria Lamas 94B, 2775-123 Parede</a>
</footer>

<script>
(function () {
  'use strict';

  // ── Referências ─────────────────────────────────────────────────────────────
  const form         = document.getElementById('inscricao-form');
  const submitBtn    = document.getElementById('submit-btn');
  const errorMsg     = document.getElementById('error-msg');
  const totalDisp    = document.getElementById('total-display');
  const cicloTag     = document.getElementById('ciclo-tag');
  const cicloAll     = document.getElementById('ciclo-all');
  const cicloLabel   = document.getElementById('ciclo-label');
  const checkboxes   = document.querySelectorAll('input[name="palestras[]"]');
  const couponBtn    = document.getElementById('coupon-toggle');
  const couponField  = document.getElementById('coupon-field');
  const cuponInput   = document.getElementById('cupon');
  const cuponStatusEl = document.getElementById('cupon-status');
  const subtotalRow  = document.getElementById('subtotal-row');
  const discountRow  = document.getElementById('discount-row');
  const subtotalDisp = document.getElementById('subtotal-display');
  const descontoDisp = document.getElementById('desconto-display');

  let cuponValidado = false; // cupão verificado e existe no PocketBase
  let cuponValor    = 0;    // percentagem de desconto (ex: 15 = 15%)

  // ── Cupão toggle ─────────────────────────────────────────────────────────────
  couponBtn.addEventListener('click', () => {
    const open = couponField.style.display === 'block';
    couponField.style.display = open ? 'none' : 'block';
    couponBtn.textContent = open ? 'Tenho um cupão de desconto' : 'Remover cupão';
    if (open) {
      // Ao fechar, limpar cupão
      cuponInput.value = '';
      cuponStatusEl.innerHTML = '';
      cuponValidado = false; cuponValor = 0;
      updatePrice();
    }
  });

  // ── Atualizar estado visual dos itens ────────────────────────────────────────
  function syncVisual() {
    checkboxes.forEach(cb => {
      const item = cb.closest('.pick-item');
      if (item) item.classList.toggle('checked', cb.checked);
    });
    cicloLabel.classList.toggle('checked', cicloAll.checked);
  }

  // ── Mensagem do cupão ────────────────────────────────────────────────────────
  function updateCuponStatus() {
    if (!cuponValidado) return;
    cuponStatusEl.innerHTML = `<span class="cupon-ok">✓ Cupão válido — ${cuponValor}% de desconto aplicado</span>`;
  }

  // ── Calcular preço (cupão só aplicável ao ciclo completo) ────────────────────
  function updatePrice() {
    const count   = [...checkboxes].filter(cb => cb.checked).length;
    const isCiclo = count === 5;
    const base    = isCiclo ? 40 : count * 10;
    const desconto = cuponValidado ? Math.round(base * (cuponValor / 100) * 100) / 100 : 0;
    const total   = Math.max(0, base - desconto);

    totalDisp.textContent = total + '€';
    cicloTag.style.display = isCiclo ? 'inline-block' : 'none';

    if (desconto > 0) {
      subtotalDisp.textContent = base + '€';
      descontoDisp.textContent = '-' + desconto + '€ (' + cuponValor + '%)';
      subtotalRow.style.display = 'flex';
      discountRow.style.display = 'flex';
    } else {
      subtotalRow.style.display = 'none';
      discountRow.style.display = 'none';
    }

    if (cuponValidado) updateCuponStatus();
    return total;
  }

  // ── Ciclo completo toggle ────────────────────────────────────────────────────
  cicloAll.addEventListener('change', function () {
    checkboxes.forEach(cb => { cb.checked = this.checked; });
    syncVisual();
    updatePrice();
  });

  // ── Palestras individuais ────────────────────────────────────────────────────
  checkboxes.forEach(cb => {
    cb.addEventListener('change', () => {
      const allChecked = [...checkboxes].every(c => c.checked);
      cicloAll.checked = allChecked;
      syncVisual();
      updatePrice();
    });
  });

  // ── Validação de cupão (debounced, server-side) ──────────────────────────────
  async function validateCupon(code) {
    if (!code || code.length < 2) {
      cuponStatusEl.innerHTML = '';
      cuponValidado = false; cuponValor = 0;
      updatePrice();
      return;
    }

    cuponValidado = false; cuponValor = 0;
    cuponStatusEl.innerHTML = '<span class="cupon-loading">A verificar…</span>';

    const fd = new FormData();
    fd.append('csrf_token', document.querySelector('[name="csrf_token"]').value);
    fd.append('cupon', code);

    try {
      const res  = await fetch('validate_cupon.php', { method: 'POST', body: fd });
      const data = await res.json();

      if (!data.success && data.error) {
        cuponStatusEl.innerHTML = `<span class="cupon-error">${data.error}</span>`;
        cuponValidado = false; cuponValor = 0;
      } else if (data.valid) {
        cuponValidado = true;
        cuponValor    = data.valor;
        // mensagem definida por updatePrice() → updateCuponStatus()
      } else {
        cuponValidado = false; cuponValor = 0;
        cuponStatusEl.innerHTML = '<span class="cupon-error">✗ Cupão inválido</span>';
      }
    } catch (_) {
      cuponStatusEl.innerHTML = '<span class="cupon-error">Erro ao verificar. Tente novamente.</span>';
      cuponValidado = false; cuponValor = 0;
    }
    updatePrice();
  }

  // Ao digitar: apenas limpar estado anterior (sem chamadas à API)
  cuponInput.addEventListener('input', function () {
    if (cuponValidado || cuponStatusEl.innerHTML) {
      cuponStatusEl.innerHTML = '';
      cuponValidado = false; cuponValor = 0;
      updatePrice();
    }
  });

  // Validar ao sair do campo
  cuponInput.addEventListener('blur', function () {
    if (this.value.trim()) validateCupon(this.value.trim());
  });

  // Validar ao clicar em "Verificar"
  document.getElementById('cupon-btn').addEventListener('click', function () {
    const code = cuponInput.value.trim();
    if (code) validateCupon(code);
    else cuponInput.focus();
  });

  // ── Submit ───────────────────────────────────────────────────────────────────
  form.addEventListener('submit', async function (e) {
    e.preventDefault();

    const nome      = form.nome.value.trim();
    const email     = form.email.value.trim();
    const telemovel = form.telemovel.value.trim();
    const tipo      = form.querySelector('input[name="tipo_animal"]:checked');
    const picked    = [...checkboxes].filter(cb => cb.checked);

    if (!nome || nome.length < 2)       { showError('Por favor, insira o seu nome.'); return; }
    if (!email || !email.includes('@')) { showError('Por favor, insira um email válido.'); return; }
    if (!telemovel)                      { showError('Por favor, insira o seu telemóvel.'); return; }
    if (!tipo)                           { showError('Por favor, indique se é tutor de cão, gato ou ambos.'); return; }
    if (picked.length === 0)             { showError('Selecione pelo menos uma palestra.'); return; }

    // Se o cupão foi preenchido mas não está validado, bloquear
    if (couponField.style.display === 'block' && cuponInput.value.trim() && !cuponValidado) {
      showError('O cupão introduzido é inválido. Corrija-o ou remova-o para continuar.');
      cuponInput.focus();
      return;
    }

    hideError();
    submitBtn.disabled = true;
    submitBtn.textContent = 'A processar…';

    try {
      const body = new FormData(form);
      const res  = await fetch('submit.php', { method: 'POST', body });
      const data = await res.json();

      if (data.success) {
        document.getElementById('success-total').textContent = 'Total: ' + data.total + '€';
        document.getElementById('form-section').style.display = 'none';
        const successEl = document.getElementById('success-section');
        successEl.style.display = 'block';
        successEl.scrollIntoView({ behavior: 'smooth', block: 'start' });
      } else {
        showError(data.message || 'Ocorreu um erro. Tente novamente.');
        submitBtn.disabled = false;
        submitBtn.textContent = '🐾 Reservar o meu lugar';
      }
    } catch (_) {
      showError('Erro de ligação. Verifique a sua internet e tente novamente.');
      submitBtn.disabled = false;
      submitBtn.textContent = '🐾 Reservar o meu lugar';
    }
  });

  function showError(msg) {
    errorMsg.textContent = msg;
    errorMsg.style.display = 'block';
    errorMsg.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
  }
  function hideError() {
    errorMsg.style.display = 'none';
    errorMsg.textContent = '';
  }

  // Init
  updatePrice();
})();
</script>
</body>
</html>
