<?php
declare(strict_types=1);

use Milestones\Token;

require __DIR__ . '/../src/Token.php';

$config = require __DIR__ . '/config.php';

$rawToken = $_GET['token'] ?? null;
$payload = Token::decode(is_string($rawToken) ? $rawToken : null, $config['jwt_secret']);

// Only fields that survived signature verification ever reach the page —
// nothing from $_GET is trusted directly. If $payload is null (missing,
// tampered, malformed, or expired token) $personalization stays null and
// the page below renders exactly as the generic, non-personalized version.
$personalization = null;
if ($payload !== null) {
    $personalization = [
        'childName' => isset($payload['childName']) ? (string) $payload['childName'] : null,
        'lastAward' => $payload['lastAward'] ?? null,
        'nextAward' => $payload['nextAward'] ?? null,
    ];
}

$personalizationJson = json_encode(
    $personalization,
    JSON_HEX_TAG | JSON_HEX_AMP | JSON_HEX_APOS | JSON_HEX_QUOT
);
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Baby Squids Journey</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=Figtree:wght@400;500;600;700;800&display=swap">
<style>
  :root{
    --bg: #F0FAF9;
    --surface: #FFFFFF;
    --surface-2: #E1F3F1;
    --surface-3: #D3EEEA;
    --ink: #0B3B46;
    --ink-soft: #4E7580;
    --ink-faint: #7C9CA4;
    --water: #0092D2;
    --water-deep: #075E86;
    --aqua: #5FD0EE;
    --coral: #E8317D;
    --coral-ink: #7A0F3F;
    --sun: #F2C230;
    --line: rgba(7,94,134,0.16);
    --shadow: 0 1px 2px rgba(11,59,70,.06), 0 8px 24px -12px rgba(11,79,108,.28);
    --radius-lg: 28px;
    --radius-md: 18px;
    --radius-sm: 12px;
    --font-display: "Fredoka", ui-rounded, "Segoe UI", sans-serif;
    --font-body: "Figtree", "Segoe UI", system-ui, sans-serif;
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --bg: #072229;
      --surface: #0D323C;
      --surface-2: #113C46;
      --surface-3: #164753;
      --ink: #EAF7F5;
      --ink-soft: #A9CBD0;
      --ink-faint: #6F98A0;
      --water: #4DB8ED;
      --water-deep: #6FD8EE;
      --aqua: #2E96A8;
      --coral: #FF6FAE;
      --coral-ink: #FFDCEC;
      --sun: #FFD166;
      --line: rgba(234,247,245,0.14);
      --shadow: 0 1px 2px rgba(0,0,0,.3), 0 10px 30px -14px rgba(0,0,0,.55);
    }
  }
  :root[data-theme="dark"]{
    --bg: #072229;
    --surface: #0D323C;
    --surface-2: #113C46;
    --surface-3: #164753;
    --ink: #EAF7F5;
    --ink-soft: #A9CBD0;
    --ink-faint: #6F98A0;
    --water: #4DB8ED;
    --water-deep: #6FD8EE;
    --aqua: #2E96A8;
    --coral: #FF6FAE;
    --coral-ink: #FFDCEC;
    --sun: #FFD166;
    --line: rgba(234,247,245,0.14);
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 10px 30px -14px rgba(0,0,0,.55);
  }

  *{ box-sizing:border-box; }
  html{ scroll-behavior:smooth; }
  @media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; } }

  body{
    margin:0;
    background:var(--bg);
    color:var(--ink);
    font-family:var(--font-body);
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3{ font-family:var(--font-display); font-weight:600; text-wrap:balance; margin:0; }
  p{ margin:0; }
  .wrap{ max-width:920px; margin-inline:auto; padding-inline:16px; }
  ::selection{ background:var(--coral); color:#fff; }

  a{ color:var(--water); }

  /* ---------- topbar ---------- */
  .topbar{
    position:sticky; top:0; z-index:40;
    background:color-mix(in srgb, var(--bg) 86%, transparent);
    backdrop-filter: blur(10px);
    border-bottom:1px solid var(--line);
  }
  .topbar-inner{ max-width:920px; margin-inline:auto; padding-inline:16px; display:flex; align-items:center; gap:1rem; padding-block:.7rem; }
  .brand{ display:flex; align-items:center; gap:.4rem; font-family:var(--font-display); font-weight:600; font-size:1.08rem; white-space:nowrap; text-decoration:none; }
  .brand-logo{ height:30px; width:auto; display:block; }
  .jumpnav{ display:flex; gap:.35rem; overflow-x:auto; scrollbar-width:none; margin-left:auto; }
  .jumpnav::-webkit-scrollbar{ display:none; }
  .jumpnav button{
    font:inherit; font-family:var(--font-body); font-weight:700; font-size:.78rem; letter-spacing:.02em;
    border:1px solid var(--line); background:var(--surface); color:var(--ink-soft);
    padding:.42rem .8rem; border-radius:999px; cursor:pointer; white-space:nowrap;
    transition:background .15s ease, color .15s ease, border-color .15s ease;
  }
  .jumpnav button:hover{ border-color:var(--water); color:var(--water); }
  .jumpnav button[aria-current="true"]{ background:var(--water); border-color:var(--water); color:#fff; }

  /* ---------- hero ---------- */
  .hero{ position:relative; padding-block: 3.2rem 2.4rem; }
  .hero-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:2rem; align-items:center; }
  .eyebrow{ font-family:var(--font-body); font-weight:800; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--coral); }
  .hero h1{ font-size:clamp(2.1rem, 4.2vw, 3.1rem); line-height:1.05; margin-block:.5rem .9rem; }
  .hero h1 em{ font-style:normal; color:var(--water); }
  .hero p.lead{ font-size:1.08rem; line-height:1.6; color:var(--ink-soft); max-width:46ch; }
  .hero-ctas{ display:flex; gap:.7rem; margin-top:1.4rem; flex-wrap:wrap; }
  .btn{
    font-family:var(--font-body); font-weight:700; font-size:.92rem; border-radius:999px; cursor:pointer;
    padding:.8rem 1.4rem; border:1px solid transparent; text-decoration:none; display:inline-flex; align-items:center; gap:.4rem;
    transition: transform .12s ease, box-shadow .12s ease, background .15s ease;
  }
  .btn:active{ transform: translateY(1px); }
  .btn-primary{ background:var(--coral); color:#fff; box-shadow:0 10px 22px -10px color-mix(in srgb, var(--coral) 70%, transparent); }
  .btn-primary:hover{ background:color-mix(in srgb, var(--coral) 88%, black 0%); }
  .btn-ghost{ background:var(--surface); color:var(--ink); border-color:var(--line); }
  .btn-ghost:hover{ border-color:var(--water); color:var(--water); }

  .stage-strip{ display:flex; gap:.5rem; margin-top:1.6rem; flex-wrap:wrap; }
  .strip-chip{ display:flex; align-items:center; gap:.4rem; background:var(--surface); border:1px solid var(--line); border-radius:999px; padding:.3rem .7rem .3rem .3rem; font-size:.76rem; font-weight:700; color:var(--ink-soft); }
  .strip-chip .dot{ width:20px; height:20px; border-radius:50%; }

  .hero-art{ position:relative; aspect-ratio:1/1; }
  .pool{ position:absolute; inset:0; border-radius:50%; background:var(--water); box-shadow: var(--shadow); overflow:hidden; }
  .hero-photo{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
  .hero-squid{ position:absolute; left:66%; bottom:-27%; width:48%; transform:translateX(-50%); z-index:3; }

  /* ---------- section heads ---------- */
  .section-head{ padding-block: 2.2rem .4rem; text-align:center; }
  .section-head h2{ font-size:clamp(1.5rem,3vw,2rem); }
  .section-head p{ color:var(--ink-soft); max-width:56ch; margin:.6rem auto 0; line-height:1.6; }

  /* ---------- path/timeline ---------- */
  .path-section{ padding-block:1.5rem 1rem; }
  .stages{ position:relative; display:flex; flex-direction:column; gap:2.4rem; list-style:none; margin:2rem 0 0; padding:0; }
  .path-line{ position:absolute; top:6px; bottom:6px; left:50%; width:4px; transform:translateX(-50%); border-radius:999px;
    background:linear-gradient(#F25B1A, #D82760, #7044A6, #2C79B8); opacity:.45; }

  .stage{ position:relative; display:grid; grid-template-columns:1fr 84px 1fr; column-gap:1.2rem; align-items:start; }
  .stage:nth-of-type(odd) .stage-card{ grid-column:1; grid-row:1; }
  .stage:nth-of-type(even) .stage-card{ grid-column:3; grid-row:1; }
  .stage-node{ grid-column:2; grid-row:1; justify-self:center; z-index:2; }

  .node-btn{ all:unset; box-sizing:border-box; cursor:pointer; position:relative; display:block; width:78px;
    transition:transform .15s ease, filter .15s ease; filter:drop-shadow(0 6px 14px rgba(11,59,70,.22)); }
  .node-badge{ position:relative; z-index:2; display:block; width:100%; height:auto; transition:transform .3s cubic-bezier(.34,1.56,.64,1); }
  .node-peek{ position:absolute; left:50%; top:-2px; width:60%; z-index:1; opacity:0; transform:translate(-50%,15%) scale(.5); transition:transform .3s cubic-bezier(.34,1.56,.64,1), opacity .25s ease; pointer-events:none; }
  .node-btn:hover{ transform:scale(1.06); }
  .node-btn:hover .node-peek, .node-btn:focus-visible .node-peek, .node-btn.peek-flash .node-peek{ opacity:1; transform:translate(-50%,-62%) scale(.9); }
  .node-btn:hover .node-badge, .node-btn:focus-visible .node-badge, .node-btn.peek-flash .node-badge{ transform:rotate(-6deg); }
  .node-btn:focus-visible{ outline:3px solid var(--water); outline-offset:5px; border-radius:14px; }
  .node-btn[aria-expanded="true"]{ transform:scale(1.1); filter:drop-shadow(0 8px 18px color-mix(in srgb, var(--stage-color, var(--water)) 60%, transparent)); }

  .stage-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--shadow); overflow:hidden; }
  .stage-head{ all:unset; box-sizing:border-box; cursor:pointer; display:flex; align-items:center; width:100%; gap:.9rem; padding:1.6rem 1.3rem; }
  .stage:nth-of-type(even) .stage-head{ flex-direction:row-reverse; text-align:right; }
  .stage-head-text{ flex:1; min-width:0; }
  .stage-age{ font-size:.74rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--stage-color, var(--water)); }
  .stage-name{ font-family:var(--font-display); font-size:1.28rem; margin-top:.1rem; color:var(--stage-color, var(--water)); }
  .chevron{ width:20px; height:20px; flex:none; color:var(--ink-faint); transition:transform .2s ease; }
  .stage-head[aria-expanded="true"] .chevron{ transform:rotate(180deg); }

  .stage-panel{ max-height:0; overflow:hidden; transition:max-height .32s ease; }
  .stage-panel-inner{ padding: 0 1.3rem 1.4rem; }
  .stage-intro{ color:var(--ink-soft); line-height:1.6; font-size:.95rem; padding-bottom:1rem; border-bottom:1px solid var(--line); margin-bottom:1rem; }

  .level-tabs{ display:flex; gap:.4rem; margin-bottom:1rem; }
  .level-tabs button{ all:unset; box-sizing:border-box; cursor:pointer; flex:1; text-align:center; font-family:var(--font-body); font-weight:700; font-size:.82rem;
    padding:.5rem .4rem; border-radius:999px; background:var(--surface-2); color:var(--ink-soft); }
  .level-tabs button[aria-selected="true"]{ background:var(--stage-color, var(--water)); color:#fff; }

  .milestone-list{ list-style:none; margin:0; padding:0; display:grid; gap:.5rem; }
  .milestone-list[hidden]{ display:none; }
  .milestone-list li{ display:flex; align-items:flex-start; gap:.65rem; padding:.5rem .6rem; }
  .box{ flex:none; width:22px; height:22px; border-radius:7px; border:2px solid var(--line); margin-top:.1rem; }
  .txt{ font-size:.92rem; line-height:1.45; color:var(--ink); }

  /* ---------- swim bag ---------- */
  .swimbag{ padding-block:2.5rem 1rem; }
  .bag-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(210px,1fr)); gap:1rem; margin-top:1.6rem; }
  .bag-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-md); padding:1.1rem; box-shadow:var(--shadow); }
  .bag-card label{ display:flex; gap:.7rem; align-items:flex-start; cursor:pointer; }
  .bag-icon{ flex:none; width:48px; height:48px; border-radius:50%; overflow:hidden; transition:transform .15s ease, box-shadow .15s ease; }
  .bag-icon img{ display:block; width:100%; height:100%; object-fit:cover; }
  .bag-title{ font-weight:800; font-size:.94rem; margin-bottom:.25rem; }
  .bag-desc{ font-size:.82rem; color:var(--ink-soft); line-height:1.45; }
  input:checked ~ .bag-icon{ opacity:.5; transform:scale(.92); }
  input:checked ~ .bag-body .bag-title{ color:var(--ink-faint); text-decoration:line-through; }

  /* ---------- footer ---------- */
  footer{ margin-top:3rem; padding-block:2.2rem 3rem; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; gap:1rem; align-items:center; justify-content:space-between; color:var(--ink-soft); font-size:.86rem; }
  footer .fbrand{ margin-bottom:.6rem; }
  footer .fbrand img{ height:26px; width:auto; display:block; }
  footer a{ color:var(--ink-soft); text-decoration:none; }
  footer a:hover{ color:var(--water); }
  .fcontact{ display:flex; gap:1.1rem; flex-wrap:wrap; }

  .note{ font-size:.78rem; color:var(--ink-faint); text-align:center; padding-top:.6rem; }

  /* ---------- personalization (only appears when a valid token is present) ---------- */
  .personal-banner{
    display:flex; align-items:center; gap:.6rem;
    background:var(--surface); border:1px solid var(--line); border-radius:999px;
    padding:.5rem .9rem .5rem .5rem; margin-bottom:1.2rem; width:fit-content;
    font-weight:700; font-size:.92rem; box-shadow:var(--shadow);
  }
  .personal-banner .wave{ font-size:1.2rem; }
  .personal-quote{
    background:var(--surface); border:1px solid var(--line); border-left:4px solid var(--coral);
    border-radius:var(--radius-md); padding:1rem 1.2rem; margin-top:1.4rem; box-shadow:var(--shadow);
  }
  .personal-quote .pq-title{ font-family:var(--font-display); font-weight:600; font-size:1.05rem; color:var(--ink); }
  .personal-quote .pq-note{ font-style:italic; color:var(--ink-soft); line-height:1.55; margin-top:.4rem; }
  .personal-quote .pq-meta{ font-size:.78rem; color:var(--ink-faint); margin-top:.5rem; }

  @media (max-width:700px){
    .hero-grid{ grid-template-columns:1fr; }
    .hero-art{ max-width:280px; margin-inline:auto; }
    .stage{ grid-template-columns:60px 1fr; }
    .stage-node{ grid-column:1; justify-self:start; }
    .stage-card{ grid-column:2 !important; }
    .stage:nth-of-type(even) .stage-head{ flex-direction:row; text-align:left; }
    .path-line{ left:28px; }
    .node-btn{ width:56px; }
    .topbar-inner{ flex-wrap:wrap; }
  }
</style>
</head>
<body>
<script>window.__PERSONALIZATION__ = <?php echo $personalizationJson; ?>;</script>

<div class="topbar">
  <div class="topbar-inner">
    <a class="brand" href="#top">
      <img class="brand-logo" src="brand/wordmark.png" alt="Baby Squids">
    </a>
    <nav class="jumpnav" id="jumpnav" aria-label="Jump to stage">
      <button data-target="stage-splashers">Splashers</button>
      <button data-target="stage-paddlers">Paddlers</button>
      <button data-target="stage-kickers">Kickers</button>
      <button data-target="stage-swimmers">Swimmers</button>
      <button data-target="swimbag">Swim bag</button>
    </nav>
  </div>
</div>

<div id="top"></div>
<main class="wrap">

  <section class="hero">
    <div class="hero-grid">
      <div>
        <p class="eyebrow">The Milestones Programme</p>
        <h1>Every splash is a <em>step forward</em>.</h1>
        <p class="lead">From your baby's very first dip to confident, independent swimming — explore the four stages of the Baby Squids journey and see exactly what your child will learn at every level.</p>
        <div class="hero-ctas">
          <button class="btn btn-primary" id="startBtn">Start the journey ↓</button>
          <button class="btn btn-ghost" data-target="swimbag">What to pack →</button>
        </div>
        <div class="stage-strip">
          <span class="strip-chip"><span class="dot" style="background:#F25B1A"></span>Splashers · 0–12mo</span>
          <span class="strip-chip"><span class="dot" style="background:#D82760"></span>Paddlers · 12–24mo</span>
          <span class="strip-chip"><span class="dot" style="background:#7044A6"></span>Kickers · 2–3yr</span>
          <span class="strip-chip"><span class="dot" style="background:#2C79B8"></span>Swimmers · 3–4yr</span>
        </div>
      </div>
      <div class="hero-art">
        <div class="pool">
          <img class="hero-photo" src="photos/hero-babies.jpg" alt="Babies and parents enjoying a Baby Squids swim class">
        </div>
        <img class="hero-squid" src="brand/squid.png" alt="The Baby Squids mascot">
      </div>
    </div>
  </section>

  <section class="path-section" id="journey">
    <div class="section-head">
      <h2><span style="color:#F25B1A">Splashers</span> → <span style="color:#D82760">Paddlers</span> → <span style="color:#7044A6">Kickers</span> → <span style="color:#2C79B8">Swimmers</span></h2>
      <p>Each stage runs for a full term. Tap a stop on the path to see the milestones your child will work towards — physical, water confidence and personal development, all in one place.</p>
    </div>

    <ol class="stages">
      <div class="path-line" aria-hidden="true"></div>

      <!-- SPLASHERS -->
      <li class="stage" style="--stage-color:#F25B1A" id="stage-splashers">
        <span class="stage-node">
          <button class="node-btn" aria-expanded="true" aria-controls="panel-splashers" data-node>
            <img class="node-peek" src="characters/splashers.png" alt="">
            <img class="node-badge" src="badges/splashers.png" alt="">
          </button>
        </span>
        <div class="stage-card">
          <button class="stage-head" aria-expanded="true" aria-controls="panel-splashers" data-head>
            <div class="stage-head-text">
              <div class="stage-age">0–12 months</div>
              <h3 class="stage-name">Splashers</h3>
            </div>
            <svg class="chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg>
          </button>
          <div class="stage-panel" id="panel-splashers" data-panel>
            <div class="stage-panel-inner">
              <p class="stage-intro">Splashers is designed for fun, as well as building you and your child's confidence in the water. This stage is all about helping your child learn to have fun in the water in a safe environment — and it's designed with parents in mind too, so you'll learn how to hold your child and how to safely introduce them to going underwater.</p>
              <div class="level-tabs" role="tablist" data-tabs>
                <button role="tab" aria-selected="true">Level 1</button>
                <button role="tab" aria-selected="false">Level 2</button>
                <button role="tab" aria-selected="false">Level 3</button>
              </div>
              <ul class="milestone-list" data-level="1" data-stage="splashers">
                <li><span class="box"></span><span class="txt">Adult safely entering the water</span></li>
                <li><span class="box"></span><span class="txt">Holding your baby</span></li>
                <li><span class="box"></span><span class="txt">Introducing underwater swimming</span></li>
                <li><span class="box"></span><span class="txt">Holding in back float</span></li>
                <li><span class="box"></span><span class="txt">Front swimming with encouraging kicking legs</span></li>
                <li><span class="box"></span><span class="txt">Bouncing up and down in the water, encouraging splashes</span></li>
                <li><span class="box"></span><span class="txt">Responding to gentle sounds</span></li>
                <li><span class="box"></span><span class="txt">Lifting their head when on tummy</span></li>
                <li><span class="box"></span><span class="txt">Eye contact, focus on black/white toys</span></li>
              </ul>
              <ul class="milestone-list" data-level="2" data-stage="splashers" hidden>
                <li><span class="box"></span><span class="txt">Safe swimming — babies reaching and holding bar and float</span></li>
                <li><span class="box"></span><span class="txt">Holding your baby in changing holds to give them more independence</span></li>
                <li><span class="box"></span><span class="txt">Underwater swimming with parent</span></li>
                <li><span class="box"></span><span class="txt">Rolling over, shoulder roll onto tummy</span></li>
                <li><span class="box"></span><span class="txt">Backfloat with parent, using woggles</span></li>
                <li><span class="box"></span><span class="txt">Making independent splashes</span></li>
                <li><span class="box"></span><span class="txt">Making sounds in classes</span></li>
                <li><span class="box"></span><span class="txt">Reaching out for toys</span></li>
                <li><span class="box"></span><span class="txt">Enjoys exploring the water and different textures</span></li>
                <li><span class="box"></span><span class="txt">Shows interest in faces and mirrors</span></li>
              </ul>
              <ul class="milestone-list" data-level="3" data-stage="splashers" hidden>
                <li><span class="box"></span><span class="txt">Adult gentle "throw" — baby up and catch on surface</span></li>
                <li><span class="box"></span><span class="txt">Baby begins to wave and splash</span></li>
                <li><span class="box"></span><span class="txt">Roll from chest and into tummy swim</span></li>
                <li><span class="box"></span><span class="txt">Teacher to adult / adult to teacher submersions</span></li>
                <li><span class="box"></span><span class="txt">Baby cheek dips</span></li>
                <li><span class="box"></span><span class="txt">Shared backfloat, adult fully floating with woggles to support</span></li>
                <li><span class="box"></span><span class="txt">Encourage natural seated jump into the water, with adult aid</span></li>
                <li><span class="box"></span><span class="txt">Makes movement with arms and legs when swimming</span></li>
                <li><span class="box"></span><span class="txt">Sits without support on poolside/float</span></li>
                <li><span class="box"></span><span class="txt">Baby tries to mimic bubble blowing</span></li>
                <li><span class="box"></span><span class="txt">Passing toys from hand to hand, or hand to mouth</span></li>
                <li><span class="box"></span><span class="txt">Enjoys songs and shows some participation</span></li>
              </ul>
            </div>
          </div>
        </div>
      </li>

      <!-- PADDLERS -->
      <li class="stage" style="--stage-color:#D82760" id="stage-paddlers">
        <span class="stage-node">
          <button class="node-btn" aria-expanded="false" aria-controls="panel-paddlers" data-node>
            <img class="node-peek" src="characters/paddlers.png" alt="">
            <img class="node-badge" src="badges/paddlers.png" alt="">
          </button>
        </span>
        <div class="stage-card">
          <button class="stage-head" aria-expanded="false" aria-controls="panel-paddlers" data-head>
            <div class="stage-head-text">
              <div class="stage-age">12–24 months</div>
              <h3 class="stage-name">Paddlers</h3>
            </div>
            <svg class="chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg>
          </button>
          <div class="stage-panel" id="panel-paddlers" data-panel>
            <div class="stage-panel-inner">
              <p class="stage-intro">As you progress to Paddlers, not only will you see your child grow in confidence, you'll start to notice their independence around the water develop — from holding onto the hand rail by themselves to blowing bubbles in the water.</p>
              <div class="level-tabs" role="tablist" data-tabs>
                <button role="tab" aria-selected="true">Level 1</button>
                <button role="tab" aria-selected="false">Level 2</button>
                <button role="tab" aria-selected="false">Level 3</button>
              </div>
              <ul class="milestone-list" data-level="1" data-stage="paddlers">
                <li><span class="box"></span><span class="txt">Child holds onto poolside/rail with no support</span></li>
                <li><span class="box"></span><span class="txt">Side hold "Rocket" — push away from wall, with support</span></li>
                <li><span class="box"></span><span class="txt">Child independent bubble blowing</span></li>
                <li><span class="box"></span><span class="txt">Into reach and hold for poolside/rail</span></li>
                <li><span class="box"></span><span class="txt">Jumping in and self submerge</span></li>
                <li><span class="box"></span><span class="txt">Backfloat, head resting on adult's shoulder</span></li>
                <li><span class="box"></span><span class="txt">Sitting jump, without adult assistance</span></li>
                <li><span class="box"></span><span class="txt">Paddling arms with cue / kicking legs with cue</span></li>
                <li><span class="box"></span><span class="txt">Adult and baby sitting upright on a "seahorse"</span></li>
                <li><span class="box"></span><span class="txt">Rolling over with encouragement on big float</span></li>
                <li><span class="box"></span><span class="txt">Understanding body — can locate hands/feet/fingers</span></li>
                <li><span class="box"></span><span class="txt">Recognises class teacher / friends</span></li>
              </ul>
              <ul class="milestone-list" data-level="2" data-stage="paddlers" hidden>
                <li><span class="box"></span><span class="txt">Can use rail/side to pull themselves up</span></li>
                <li><span class="box"></span><span class="txt">Holding and pushing a float with minimal support</span></li>
                <li><span class="box"></span><span class="txt">Adult facing child on woggle, paddling arms</span></li>
                <li><span class="box"></span><span class="txt">"Piggy back" swim — child on adult's back, adult swimming (if able)</span></li>
                <li><span class="box"></span><span class="txt">Side hold "Rocket" — push away from wall, with minimal support</span></li>
                <li><span class="box"></span><span class="txt">Child independently puts face into water</span></li>
                <li><span class="box"></span><span class="txt">Adult and child blowing a toy across the pool</span></li>
                <li><span class="box"></span><span class="txt">Submerge and rotate 180 degrees before surfacing</span></li>
                <li><span class="box"></span><span class="txt">Independent seated jumping on cue</span></li>
                <li><span class="box"></span><span class="txt">Rolling over on big float</span></li>
                <li><span class="box"></span><span class="txt">Says small words and can join in some actions</span></li>
                <li><span class="box"></span><span class="txt">Responds to simple instructions, e.g. waving</span></li>
                <li><span class="box"></span><span class="txt">Picking up and throwing toys</span></li>
              </ul>
              <ul class="milestone-list" data-level="3" data-stage="paddlers" hidden>
                <li><span class="box"></span><span class="txt">Can "monkey" with adult support, around the pool edge</span></li>
                <li><span class="box"></span><span class="txt">Side hold rocket push away from wall</span></li>
                <li><span class="box"></span><span class="txt">Child independent self submersion</span></li>
                <li><span class="box"></span><span class="txt">Two "duckling dives" with 5 second breathe in between</span></li>
                <li><span class="box"></span><span class="txt">Child blowing a toy across the pool</span></li>
                <li><span class="box"></span><span class="txt">Jump from standing, with adult's support</span></li>
                <li><span class="box"></span><span class="txt">Using arms to move / change direction of travel</span></li>
                <li><span class="box"></span><span class="txt">Kick a ball in the water (backfloat)</span></li>
                <li><span class="box"></span><span class="txt">Can say some words and copy actions to songs</span></li>
                <li><span class="box"></span><span class="txt">Can hand a toy back to teacher/adult</span></li>
                <li><span class="box"></span><span class="txt">Can stack toys/blocks</span></li>
                <li><span class="box"></span><span class="txt">Can walk (holding hands) across big float</span></li>
                <li><span class="box"></span><span class="txt">Can pour, fill and empty containers</span></li>
                <li><span class="box"></span><span class="txt">Enjoys some music making</span></li>
                <li><span class="box"></span><span class="txt">Able to reach and retrieve submerged toys</span></li>
              </ul>
            </div>
          </div>
        </div>
      </li>

      <!-- KICKERS -->
      <li class="stage" style="--stage-color:#7044A6" id="stage-kickers">
        <span class="stage-node">
          <button class="node-btn" aria-expanded="false" aria-controls="panel-kickers" data-node>
            <img class="node-peek" src="characters/kickers.png" alt="">
            <img class="node-badge" src="badges/kickers.png" alt="">
          </button>
        </span>
        <div class="stage-card">
          <button class="stage-head" aria-expanded="false" aria-controls="panel-kickers" data-head>
            <div class="stage-head-text">
              <div class="stage-age">2–3 years</div>
              <h3 class="stage-name">Kickers</h3>
            </div>
            <svg class="chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg>
          </button>
          <div class="stage-panel" id="panel-kickers" data-panel>
            <div class="stage-panel-inner">
              <p class="stage-intro">Our little Kickers really start to show their independent skills. They'll be able to walk and enter the pool safely, unaided, and confidently jump into the water from the large float, waiting for you to catch them. The fun continues as they join in singing songs, tackling puzzles and playing games.</p>
              <div class="level-tabs" role="tablist" data-tabs>
                <button role="tab" aria-selected="true">Level 1</button>
                <button role="tab" aria-selected="false">Level 2</button>
                <button role="tab" aria-selected="false">Level 3</button>
              </div>
              <ul class="milestone-list" data-level="1" data-stage="kickers">
                <li><span class="box"></span><span class="txt">Waits to enter the pool, after adult has entered</span></li>
                <li><span class="box"></span><span class="txt">Jump into a submersion</span></li>
                <li><span class="box"></span><span class="txt">Blowing a toy across the pool, supporting self in woggle hold</span></li>
                <li><span class="box"></span><span class="txt">Pencil / star float shapes</span></li>
                <li><span class="box"></span><span class="txt">Jump into pool from standing, with adult's cue</span></li>
                <li><span class="box"></span><span class="txt">Kicking legs independently when moving</span></li>
                <li><span class="box"></span><span class="txt">Walking across big float independently</span></li>
                <li><span class="box"></span><span class="txt">Participate in group games/teams</span></li>
                <li><span class="box"></span><span class="txt">Throwing a ball into the water from poolside</span></li>
                <li><span class="box"></span><span class="txt">Child seems happy to be in class</span></li>
                <li><span class="box"></span><span class="txt">Independent self submersion with bubbles</span></li>
                <li><span class="box"></span><span class="txt">Can stack or build with blocks</span></li>
                <li><span class="box"></span><span class="txt">Independently can put ears in the water and "listen"</span></li>
                <li><span class="box"></span><span class="txt">Able to reach and retrieve submerged items in shallow water</span></li>
              </ul>
              <ul class="milestone-list" data-level="2" data-stage="kickers" hidden>
                <li><span class="box"></span><span class="txt">Can monkey without support, around the pool edge</span></li>
                <li><span class="box"></span><span class="txt">Swim on woggle with no adult support, swimming towards adult</span></li>
                <li><span class="box"></span><span class="txt">Adult supporting child under body with two hands</span></li>
                <li><span class="box"></span><span class="txt">Jump into the water & turn to poolside with adult support, reach and hold back to poolside</span></li>
                <li><span class="box"></span><span class="txt">Kicking and paddling independently to swim, with adult hold</span></li>
                <li><span class="box"></span><span class="txt">Lays down on big mat on back and can roll over onto tummy</span></li>
                <li><span class="box"></span><span class="txt">Putting together a simple puzzle/stacking game</span></li>
                <li><span class="box"></span><span class="txt">Kicking a ball in a backfloat position</span></li>
                <li><span class="box"></span><span class="txt">Takes turns in games when prompted</span></li>
                <li><span class="box"></span><span class="txt">Can push/submerge a ball or toy</span></li>
                <li><span class="box"></span><span class="txt">Can make purposeful and varied noises</span></li>
              </ul>
              <ul class="milestone-list" data-level="3" data-stage="kickers" hidden>
                <li><span class="box"></span><span class="txt">Begins to learn safe entry, with adult support</span></li>
                <li><span class="box"></span><span class="txt">Turn to adult and push away from poolside to reach adult</span></li>
                <li><span class="box"></span><span class="txt">Using a woggle, kicking and paddling independently</span></li>
                <li><span class="box"></span><span class="txt">Pick up a toy from below the surface, by fully self submerging</span></li>
                <li><span class="box"></span><span class="txt">Star float on front facing adult (face in and blowing bubbles)</span></li>
                <li><span class="box"></span><span class="txt">Standing jumps from big float into pool, with adult's cue</span></li>
                <li><span class="box"></span><span class="txt">Swim independently on woggle with no adult support</span></li>
                <li><span class="box"></span><span class="txt">Sitting on steps/poolside, fast kicking legs</span></li>
                <li><span class="box"></span><span class="txt">Lay down on big mat, roll over to parent who catches child on the surface of the water</span></li>
                <li><span class="box"></span><span class="txt">Walk across big float and wait for adult cue to jump</span></li>
                <li><span class="box"></span><span class="txt">Sorting by colour or shape in a group game</span></li>
                <li><span class="box"></span><span class="txt">Recognises and participates in class welcome and goodbye songs</span></li>
              </ul>
            </div>
          </div>
        </div>
      </li>

      <!-- SWIMMERS -->
      <li class="stage" style="--stage-color:#2C79B8" id="stage-swimmers">
        <span class="stage-node">
          <button class="node-btn" aria-expanded="false" aria-controls="panel-swimmers" data-node>
            <img class="node-peek" src="characters/swimmers.png" alt="">
            <img class="node-badge" src="badges/swimmers.png" alt="">
          </button>
        </span>
        <div class="stage-card">
          <button class="stage-head" aria-expanded="false" aria-controls="panel-swimmers" data-head>
            <div class="stage-head-text">
              <div class="stage-age">3–4 years</div>
              <h3 class="stage-name">Swimmers</h3>
            </div>
            <svg class="chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg>
          </button>
          <div class="stage-panel" id="panel-swimmers" data-panel>
            <div class="stage-panel-inner">
              <p class="stage-intro">In our final Milestone, you'll see how far your child has grown and developed. They'll confidently dive from the poolside, go underwater to retrieve toys and walk through the water unaided — holding their breath underwater and swimming through the water with the support of the teacher.</p>
              <div class="level-tabs" role="tablist" data-tabs>
                <button role="tab" aria-selected="true">Level 1</button>
                <button role="tab" aria-selected="false">Level 2</button>
                <button role="tab" aria-selected="false">Level 3</button>
              </div>
              <ul class="milestone-list" data-level="1" data-stage="swimmers">
                <li><span class="box"></span><span class="txt">Can sit and wait for a turn or activity</span></li>
                <li><span class="box"></span><span class="txt">Can move through the water 2–5 metres with aid</span></li>
                <li><span class="box"></span><span class="txt">Front — kicking feet on water surface, holding rail</span></li>
                <li><span class="box"></span><span class="txt">Walk through the water</span></li>
                <li><span class="box"></span><span class="txt">Sculling hands with woggle</span></li>
                <li><span class="box"></span><span class="txt">Front — push and glide with support</span></li>
                <li><span class="box"></span><span class="txt">Back — push and glide with support</span></li>
                <li><span class="box"></span><span class="txt">Knows teacher's name and the names of some equipment</span></li>
                <li><span class="box"></span><span class="txt">Teacher holding woggle, blowing to "flip" toy</span></li>
                <li><span class="box"></span><span class="txt">Mushroom float, tuck shape, on steps/poolside</span></li>
                <li><span class="box"></span><span class="txt">Star shape backfloat, with woggle around back</span></li>
                <li><span class="box"></span><span class="txt">Backfloat holding a large kickboard</span></li>
                <li><span class="box"></span><span class="txt">Will answer simple questions and is able to choose toys or equipment</span></li>
              </ul>
              <ul class="milestone-list" data-level="2" data-stage="swimmers" hidden>
                <li><span class="box"></span><span class="txt">Can walk safely around the pool area</span></li>
                <li><span class="box"></span><span class="txt">Regain feet using aids (on steps or shallow water)</span></li>
                <li><span class="box"></span><span class="txt">Sculling hands and cycling legs with woggle support</span></li>
                <li><span class="box"></span><span class="txt">Knows the name of most equipment and basic instructions</span></li>
                <li><span class="box"></span><span class="txt">Pick up a toy from deeper water</span></li>
                <li><span class="box"></span><span class="txt">Teacher to assist with reaching the pool floor</span></li>
                <li><span class="box"></span><span class="txt">Mushroom float, practise shape in water</span></li>
                <li><span class="box"></span><span class="txt">Star shape backfloat</span></li>
                <li><span class="box"></span><span class="txt">Backfloat holding a small kickboard</span></li>
                <li><span class="box"></span><span class="txt">Jump in, swim one metre, turn and swim back to side</span></li>
                <li><span class="box"></span><span class="txt">Hold on to a big float when it is moved around the pool</span></li>
                <li><span class="box"></span><span class="txt">Kick a ball in the water, supported by a woggle or teacher</span></li>
                <li><span class="box"></span><span class="txt">Participates with singing and actions</span></li>
              </ul>
              <ul class="milestone-list" data-level="3" data-stage="swimmers" hidden>
                <li><span class="box"></span><span class="txt">Safe entry from mat, without support, and climb back up onto mat</span></li>
                <li><span class="box"></span><span class="txt">Can follow all safety instructions</span></li>
                <li><span class="box"></span><span class="txt">Can move 2 metres with no support</span></li>
                <li><span class="box"></span><span class="txt">Front and back — kicking feet using kickboard</span></li>
                <li><span class="box"></span><span class="txt">Treading water</span></li>
                <li><span class="box"></span><span class="txt">Front, using rings, demonstrating front crawl arms</span></li>
                <li><span class="box"></span><span class="txt">Back swim with one small float on chest</span></li>
                <li><span class="box"></span><span class="txt">Jump into the pool to collect sinkers</span></li>
                <li><span class="box"></span><span class="txt">Independent swim on woggle, blowing to "flip" toy</span></li>
                <li><span class="box"></span><span class="txt">Float without support</span></li>
                <li><span class="box"></span><span class="txt">Complete a puzzle/counting game</span></li>
              </ul>
            </div>
          </div>
        </div>
      </li>
    </ol>
  </section>

  <section class="swimbag" id="swimbag">
    <div class="section-head">
      <h2>Packing your swim bag</h2>
      <p>The right kit makes for a hassle-free swim. Here's our list of essentials — tick them off as you pack.</p>
    </div>
    <div class="bag-grid">

      <div class="bag-card">
        <label>
          <input type="checkbox" data-key="bag-0" style="position:absolute;opacity:0">
          <span class="bag-icon"><img src="bag/nappies.webp" alt=""></span>
          <span class="bag-body">
            <div class="bag-title">Nappies &amp; swim nappies</div>
            <div class="bag-desc">A couple of pairs of swim nappies plus regular nappies for after. We ask for a double system — a happy nappy over a disposable one. Some babies want a wetsuit too if they feel the cold.</div>
          </span>
        </label>
      </div>

      <div class="bag-card">
        <label>
          <input type="checkbox" data-key="bag-1" style="position:absolute;opacity:0">
          <span class="bag-icon"><img src="bag/swimwear.webp" alt=""></span>
          <span class="bag-body">
            <div class="bag-title">Baby swimwear</div>
            <div class="bag-desc">Public pools require a swim nappy; an infant swimming costume over the top is optional but cute — plenty of styles for little ones who like to match.</div>
          </span>
        </label>
      </div>

      <div class="bag-card">
        <label>
          <input type="checkbox" data-key="bag-2" style="position:absolute;opacity:0">
          <span class="bag-icon"><img src="bag/towels.png" alt=""></span>
          <span class="bag-body">
            <div class="bag-title">Towels</div>
            <div class="bag-desc">Pack a couple if you have space, to wrap baby up when you leave the water. Hooded towels are great for keeping little ones cosy.</div>
          </span>
        </label>
      </div>

      <div class="bag-card">
        <label>
          <input type="checkbox" data-key="bag-3" style="position:absolute;opacity:0">
          <span class="bag-icon"><img src="bag/snacks.webp" alt=""></span>
          <span class="bag-body">
            <div class="bag-title">Snacks &amp; a drink</div>
            <div class="bag-desc">All that kicking works up an appetite — pack a drink and a snack like a banana or yoghurt. Not on solids yet? Find a quiet spot for a feed once you're both changed.</div>
          </span>
        </label>
      </div>

      <div class="bag-card">
        <label>
          <input type="checkbox" data-key="bag-4" style="position:absolute;opacity:0">
          <span class="bag-icon"><img src="bag/wipes.webp" alt=""></span>
          <span class="bag-body">
            <div class="bag-title">Wet wipes &amp; cream</div>
            <div class="bag-desc">A pack of wet wipes is a must for change times, plus your usual barrier cream.</div>
          </span>
        </label>
      </div>

      <div class="bag-card">
        <label>
          <input type="checkbox" data-key="bag-5" style="position:absolute;opacity:0">
          <span class="bag-icon"><img src="bag/lockers.webp" alt=""></span>
          <span class="bag-body">
            <div class="bag-title">Coin for lockers</div>
            <div class="bag-desc">Have some change handy for the locker, or check with pool staff whether you'll need a token instead.</div>
          </span>
        </label>
      </div>

      <div class="bag-card">
        <label>
          <input type="checkbox" data-key="bag-6" style="position:absolute;opacity:0">
          <span class="bag-icon"><img src="bag/outfit.webp" alt=""></span>
          <span class="bag-body">
            <div class="bag-title">Change of outfit</div>
            <div class="bag-desc">Warm clothes to keep baby snug after a swim, plus a couple of spares just in case. A hat is a good idea too — babies lose heat through their heads.</div>
          </span>
        </label>
      </div>

      <div class="bag-card">
        <label>
          <input type="checkbox" data-key="bag-7" style="position:absolute;opacity:0">
          <span class="bag-icon"><img src="bag/swimsuit.webp" alt=""></span>
          <span class="bag-body">
            <div class="bag-title">Your swimsuit</div>
            <div class="bag-desc">Don't forget your own kit. For a speedier change, put your swimsuit on at home under your clothes and pack underwear for after.</div>
          </span>
        </label>
      </div>

    </div>
  </section>

  <footer>
    <div>
      <div class="fbrand"><img src="brand/wordmark.png" alt="Baby Squids"></div>
      <div><span style="color:#F25B1A; font-weight:700">Splashers</span> · <span style="color:#D82760; font-weight:700">Paddlers</span> · <span style="color:#7044A6; font-weight:700">Kickers</span> · <span style="color:#2C79B8; font-weight:700">Swimmers</span></div>
    </div>
    <div class="fcontact">
      <a href="https://babysquids.co.uk">babysquids.co.uk</a>
    </div>
  </footer>
  <p class="note">Milestone wording follows the current Milestones brochure, and the mascot, stage badges and colours are pulled from your real Baby Squids brand assets.</p>
</main>

<script>
(function(){
  var STORAGE_KEY = 'bs-milestones-v1';
  var state = {};
  try { state = JSON.parse(localStorage.getItem(STORAGE_KEY) || '{}'); } catch(e) { state = {}; }
  function save(){ try { localStorage.setItem(STORAGE_KEY, JSON.stringify(state)); } catch(e){} }

  // restore swim-bag checklist state (the only remaining ticked checkboxes)
  document.querySelectorAll('input[type="checkbox"][data-key]').forEach(function(cb){
    if (state[cb.dataset.key]) cb.checked = true;
    cb.addEventListener('change', function(){
      state[cb.dataset.key] = cb.checked;
      save();
    });
  });

  // stage expand/collapse
  function recalcOpenPanels(){
    document.querySelectorAll('.stage').forEach(function(stageEl){
      var head = stageEl.querySelector('[data-head]');
      var panel = stageEl.querySelector('[data-panel]');
      if (head.getAttribute('aria-expanded') === 'true'){
        panel.style.maxHeight = panel.scrollHeight + 'px';
      }
    });
  }

  document.querySelectorAll('.stage').forEach(function(stageEl){
    var head = stageEl.querySelector('[data-head]');
    var node = stageEl.querySelector('[data-node]');
    var panel = stageEl.querySelector('[data-panel]');

    var peekTimer = null;
    function flashPeek(){
      clearTimeout(peekTimer);
      node.classList.add('peek-flash');
      peekTimer = setTimeout(function(){ node.classList.remove('peek-flash'); }, 1600);
    }

    function setOpen(open){
      head.setAttribute('aria-expanded', open);
      node.setAttribute('aria-expanded', open);
      if (open){
        panel.style.maxHeight = panel.scrollHeight + 'px';
        flashPeek();
      } else {
        panel.style.maxHeight = '0px';
      }
    }
    function toggle(){ setOpen(head.getAttribute('aria-expanded') !== 'true'); }
    head.addEventListener('click', toggle);
    node.addEventListener('click', toggle);

    // level tabs
    var tabs = stageEl.querySelectorAll('[data-tabs] [role="tab"]');
    var lists = stageEl.querySelectorAll('.milestone-list');
    tabs.forEach(function(tab, i){
      tab.addEventListener('click', function(){
        tabs.forEach(function(t){ t.setAttribute('aria-selected', 'false'); });
        tab.setAttribute('aria-selected', 'true');
        lists.forEach(function(l, j){ l.hidden = (j !== i); });
        if (head.getAttribute('aria-expanded') === 'true'){
          requestAnimationFrame(function(){ panel.style.maxHeight = panel.scrollHeight + 'px'; });
        }
      });
    });

    // open first stage by default, collapse rest (panel height set after layout)
    var startOpen = head.getAttribute('aria-expanded') === 'true';
    requestAnimationFrame(function(){ setOpen(startOpen); });
  });

  // recalc open panel height once web fonts swap in and on resize, so the
  // expanded panel (open by default) never ends up clipped by a stale height
  window.addEventListener('resize', recalcOpenPanels);
  window.addEventListener('load', recalcOpenPanels);
  if (document.fonts && document.fonts.ready){
    document.fonts.ready.then(recalcOpenPanels);
  }

  // jump nav
  var jumpButtons = document.querySelectorAll('.jumpnav [data-target]');
  jumpButtons.forEach(function(btn){
    btn.addEventListener('click', function(){
      var el = document.getElementById(btn.dataset.target);
      if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
    });
  });
  document.querySelectorAll('[data-target]').forEach(function(btn){
    if (btn.closest('.jumpnav')) return;
    btn.addEventListener('click', function(){
      var el = document.getElementById(btn.dataset.target);
      if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
    });
  });
  document.getElementById('startBtn').addEventListener('click', function(){
    document.getElementById('journey').scrollIntoView({ behavior:'smooth', block:'start' });
  });

  // highlight active jump pill via IntersectionObserver
  var sections = ['stage-splashers','stage-paddlers','stage-kickers','stage-swimmers','swimbag'].map(function(id){ return document.getElementById(id); });
  if ('IntersectionObserver' in window){
    var io = new IntersectionObserver(function(entries){
      entries.forEach(function(entry){
        if (entry.isIntersecting){
          jumpButtons.forEach(function(b){ b.removeAttribute('aria-current'); });
          var match = document.querySelector('.jumpnav [data-target="' + entry.target.id + '"]');
          if (match) match.setAttribute('aria-current', 'true');
        }
      });
    }, { rootMargin: '-40% 0px -50% 0px', threshold: 0 });
    sections.forEach(function(s){ if (s) io.observe(s); });
  }
})();
</script>

<script>
// ---------- personalization layer ----------
// Purely additive: if window.__PERSONALIZATION__ is null (no token, an
// invalid/expired one, or anything malformed), this block does nothing and
// the page above is the plain, generic version. Nothing in here is required
// for the page to work.
(function(){
  var p = window.__PERSONALIZATION__;
  if (!p) return;

  var heroText = document.querySelector('.hero-grid > div:first-child');
  if (!heroText) return;

  // "Hi {name}!" banner
  if (p.childName){
    var banner = document.createElement('div');
    banner.className = 'personal-banner';

    var wave = document.createElement('span');
    wave.className = 'wave';
    wave.setAttribute('aria-hidden', 'true');
    wave.textContent = '👋';

    var msg = document.createElement('span');
    msg.textContent = 'Hi ' + p.childName + '! Here’s what’s next for you.';

    banner.appendChild(wave);
    banner.appendChild(msg);
    heroText.insertBefore(banner, heroText.firstChild);
  }

  // Last-completed-award quote card (teacher's note if there is one,
  // otherwise a generic congratulations line — notes are optional in
  // ClassEvo, so this always has to degrade gracefully)
  if (p.lastAward && p.lastAward.name){
    var card = document.createElement('div');
    card.className = 'personal-quote';

    var title = document.createElement('div');
    title.className = 'pq-title';
    title.textContent = (p.childName || 'Your little one') + ' just completed ' + p.lastAward.name + '! 🎉';
    card.appendChild(title);

    if (p.lastAward.note){
      var note = document.createElement('div');
      note.className = 'pq-note';
      note.textContent = '“' + p.lastAward.note + '”';
      card.appendChild(note);
    }

    var metaParts = [];
    if (p.lastAward.teacher) metaParts.push('— ' + p.lastAward.teacher);
    if (p.lastAward.date) metaParts.push(p.lastAward.date);
    if (metaParts.length){
      var meta = document.createElement('div');
      meta.className = 'pq-meta';
      meta.textContent = metaParts.join(', ');
      card.appendChild(meta);
    }

    heroText.appendChild(card);
  }

  // Auto-expand and scroll to what's next, reusing the existing click
  // handlers rather than duplicating the open/tab-switch logic
  if (p.nextAward && p.nextAward.stage){
    requestAnimationFrame(function(){
      var targetId = 'stage-' + p.nextAward.stage;
      var targetEl = document.getElementById(targetId);
      if (!targetEl) return; // unknown stage id — degrade to just the banner/quote above

      // collapse the default-open Splashers panel if it isn't the target,
      // so we don't end up with two panels open at once
      document.querySelectorAll('.stage').forEach(function(stageEl){
        var head = stageEl.querySelector('[data-head]');
        if (stageEl.id !== targetId && head.getAttribute('aria-expanded') === 'true'){
          head.click();
        }
      });

      var targetHead = targetEl.querySelector('[data-head]');
      if (targetHead.getAttribute('aria-expanded') !== 'true'){
        targetHead.click();
      }

      if (p.nextAward.level){
        var tabs = targetEl.querySelectorAll('[data-tabs] [role="tab"]');
        var idx = Math.max(0, Math.min(tabs.length - 1, p.nextAward.level - 1));
        if (tabs[idx]) tabs[idx].click();
      }

      setTimeout(function(){
        targetEl.scrollIntoView({ behavior: 'smooth', block: 'start' });
      }, 450);
    });
  }
})();
</script>
</body>
</html>
