// Sections: nav, hero (3 directions), strip, stats, how-it-works, features, benefits, use cases, CTA, footer, modals.
(function () {
  if (document.getElementById('wa-sec-styles')) return;
  const s = document.createElement('style');
  s.id = 'wa-sec-styles';
  s.textContent = `
  /* hero */
  .hero{position:relative;overflow:hidden;padding:72px 0 100px;}
  .hero-grid{display:grid;grid-template-columns:1.02fr 1.1fr;gap:56px;align-items:center;}
  .hero.centered .hero-grid{grid-template-columns:1fr;text-align:center;justify-items:center;gap:44px;}
  .hero h1{font-size:clamp(40px,6.4vw,82px);font-weight:800;}
  .hero .lede{font-size:clamp(17px,1.6vw,21px);color:var(--muted);max-width:520px;margin-top:22px;line-height:1.5;}
  .hero.centered .lede{margin-left:auto;margin-right:auto;}
  .hero-cta{display:flex;gap:14px;margin-top:34px;flex-wrap:wrap;}
  .hero.centered .hero-cta{justify-content:center;}
  .rating{display:flex;align-items:center;gap:12px;margin-top:30px;}
  .rating .stars{color:var(--amber);letter-spacing:2px;font-size:15px;}
  .rating .txt{font-size:13.5px;color:var(--muted);}
  .price-tag{font-family:'JetBrains Mono';font-size:12px;opacity:.85;margin-left:4px;}

  /* calendar before/after viz */
  .ba-wrap{display:grid;grid-template-columns:1fr 1fr;gap:16px;width:100%;max-width:640px;}
  .ba-card{background:var(--surface);border:1px solid var(--border-soft);border-radius:16px;padding:16px;}
  .ba-card.after{box-shadow:var(--glow-pink);border-color:rgba(45,140,255,.35);}
  .ba-label{font-family:'JetBrains Mono';font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:12px;display:flex;justify-content:space-between;}
  .ba-card.after .ba-label{color:var(--pink);}
  .ba-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;}
  .ba-cell{aspect-ratio:1;border-radius:5px;background:rgba(255,255,255,.05);position:relative;}
  .ba-cell.ev::after{content:'';position:absolute;left:3px;right:3px;bottom:3px;height:3px;border-radius:2px;background:var(--ev,#0f9d58);}
  .ba-cell.ev2::before{content:'';position:absolute;left:3px;right:3px;bottom:8px;height:3px;border-radius:2px;background:#2d8cff;}

  /* strip */
  .strip{border-top:1px solid var(--border-soft);border-bottom:1px solid var(--border-soft);padding:30px 0;overflow:hidden;}
  .strip-lbl{text-align:center;font-family:'JetBrains Mono';font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);margin-bottom:20px;}
  .marquee{display:flex;width:max-content;animation:marquee 60s linear infinite;}
  .mq-set{display:flex;gap:16px;padding-right:16px;flex-shrink:0;}
  .chip{display:inline-flex;align-items:center;gap:11px;font-size:17px;color:var(--text);background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:14px 28px;white-space:nowrap;font-weight:600;box-shadow:0 2px 10px -4px rgba(0,0,0,.5);}
  .chip .sw{width:12px;height:12px;border-radius:4px;}

  /* stats */
  .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;}
  .stat .v{font-family:'Gabarito';font-weight:800;font-size:clamp(34px,4vw,52px);line-height:1;}
  .stat .k{color:var(--muted);font-size:14px;margin-top:8px;line-height:1.35;}

  /* how it works */
  .hiw-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:54px;}
  .hiw-card{position:relative;background:var(--surface);border:1px solid var(--border-soft);border-radius:var(--radius);padding:28px;overflow:hidden;}
  .hiw-idx{font-family:'JetBrains Mono';font-size:12px;color:var(--dim);letter-spacing:.1em;}
  .hiw-card h3{font-size:23px;margin:14px 0 10px;}
  .hiw-card p{color:var(--muted);font-size:15px;}
  .hiw-ico{width:46px;height:46px;border-radius:13px;background:rgba(45,140,255,.12);border:1px solid rgba(45,140,255,.25);display:grid;place-items:center;color:var(--pink);margin-top:18px;}

  /* section heads */
  .sh{text-align:center;max-width:740px;margin:0 auto;}
  .sh h2{font-size:clamp(32px,4.6vw,54px);margin-top:18px;}
  .sh p{color:var(--muted);font-size:18px;margin-top:18px;}
  .lt .sh h2{color:var(--lt-text);} .lt .sh p{color:var(--lt-muted);}

  /* light region */
  .lt{background:var(--lt-bg);color:var(--lt-text);position:relative;}
  .lt-top{height:0;}
  .lt-bot{height:0;}

  /* features */
  .feat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:54px;}
  .feat{display:flex;gap:18px;background:var(--lt-surface);border:1px solid var(--lt-border);border-radius:var(--radius);padding:26px;}
  .feat .ico{width:48px;height:48px;border-radius:13px;flex-shrink:0;background:linear-gradient(135deg,rgba(45,140,255,.14),rgba(29,78,216,.14));display:grid;place-items:center;color:var(--pink);}
  .feat h3{font-size:20px;color:var(--lt-text);margin-bottom:7px;}
  .feat p{color:var(--lt-muted);font-size:15px;}

  /* benefits */
  .ben-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:54px;}
  .ben{padding:8px 0;}
  .ben .ico{width:42px;height:42px;border-radius:12px;background:var(--lt-surface);border:1px solid var(--lt-border);display:grid;place-items:center;color:var(--pink);margin-bottom:16px;box-shadow:0 8px 22px -12px rgba(0,0,0,.6);}
  .ben h3{font-size:18px;color:var(--lt-text);margin-bottom:7px;}
  .ben p{color:var(--lt-muted);font-size:14.5px;}

  /* use cases */
  .uc-tabs{display:flex;flex-wrap:wrap;gap:11px;justify-content:center;margin:40px 0 30px;}
  .uc-tab{font-weight:600;font-size:15px;padding:11px 20px;border-radius:999px;background:var(--lt-surface);border:1px solid var(--lt-border);color:var(--lt-text);transition:all .2s;}
  .uc-tab:hover{transform:translateY(-1px);}
  .uc-tab.on{background:var(--grad-primary);color:#fff;border-color:transparent;box-shadow:var(--glow-pink);}
  .uc-panel{max-width:720px;margin:0 auto;background:var(--lt-surface);border:1px solid var(--lt-border);border-radius:var(--radius);padding:34px 38px;text-align:center;}
  .uc-panel h3{font-size:24px;color:var(--lt-text);margin-bottom:10px;}
  .uc-panel p{color:var(--lt-muted);font-size:16.5px;line-height:1.55;}

  /* final cta */
  .cta-box{position:relative;text-align:center;padding:84px 32px;border-radius:30px;overflow:hidden;
    background:radial-gradient(120% 140% at 50% 0%,rgba(45,140,255,.32),transparent 60%),var(--surface);
    border:1px solid var(--border);}
  .cta-box h2{font-size:clamp(34px,5vw,60px);}
  .cta-box p{color:var(--muted);font-size:18px;margin:18px auto 32px;max-width:520px;}

  /* footer */
  .foot{border-top:1px solid var(--border-soft);padding:30px 0 22px;}
  .foot-grid{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap;align-items:flex-start;}
  .foot a{color:var(--muted);font-size:14.5px;transition:color .15s;}
  .foot a:hover{color:var(--text);}
  .foot-links{display:flex;gap:26px;flex-wrap:wrap;}
  .foot-right{display:flex;flex-direction:column;align-items:flex-end;text-align:right;}
  .foot-copy{font-family:'JetBrains Mono';font-size:11px;color:#eef2fb;margin-top:14px;letter-spacing:.02em;}

  /* modals */
  .modal-bg{position:fixed;inset:0;z-index:100;background:rgba(3,5,11,.66);backdrop-filter:blur(8px);display:grid;place-items:center;padding:20px;animation:fade .2s ease;}
  @keyframes fade{from{opacity:0;}to{opacity:1;}}
  .modal{width:100%;max-width:440px;background:var(--surface);border:1px solid var(--border);border-radius:22px;padding:32px;position:relative;box-shadow:0 40px 120px -20px rgba(0,0,0,.7);}
  .modal .x{position:absolute;top:18px;right:18px;width:32px;height:32px;border-radius:9px;background:rgba(255,255,255,.06);color:var(--muted);display:grid;place-items:center;font-size:16px;}
  .modal .x:hover{background:rgba(255,255,255,.12);color:var(--text);}
  .modal h3{font-size:24px;margin-bottom:8px;}
  .modal .msub{color:var(--muted);font-size:15px;margin-bottom:22px;}
  .field{margin-bottom:14px;}
  .field label{display:block;font-size:12.5px;color:var(--muted);margin-bottom:6px;font-weight:600;}
  .field input,.field textarea{width:100%;background:var(--surface-2);border:1px solid var(--border);border-radius:11px;padding:12px 14px;color:var(--text);font-family:inherit;font-size:15px;}
  .field input:focus,.field textarea:focus{outline:none;border-color:var(--pink);}
  .modal-note{font-size:12px;color:var(--dim);margin-top:6px;text-align:center;}
  .ok-ico{width:54px;height:54px;border-radius:16px;background:rgba(70,211,154,.14);display:grid;place-items:center;margin:0 auto 16px;}

  /* logo lockup */
  .logo{align-items:center;}
  .logo-lock{display:flex;flex-direction:column;line-height:1;}
  .logo-name{font-family:'Gabarito';font-weight:800;font-size:20px;letter-spacing:-.01em;}
  .logo-sub{font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:3px;}
  /* hero trademark */
  .hero h1 sup{font-size:.26em;font-weight:700;vertical-align:baseline;top:-2.45em;left:-0.28em;margin-right:-0.6em;position:relative;letter-spacing:0;color:var(--text);}

  /* how it works — alternating rows: text + compact supporting visual */
  .hiw2{display:flex;flex-direction:column;gap:34px;margin-top:60px;}
  .hiw-row{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;}
  .hiw-row.flip .hiw-text{order:2;}
  .hiw-text{max-width:440px;}
  .hiw-num{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;font-family:'Gabarito';font-weight:800;font-size:18px;background:var(--grad-primary);color:#fff;box-shadow:var(--glow-pink);margin-bottom:18px;}
  .hiw-text .lbl{font-family:'JetBrains Mono';font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);margin-bottom:8px;}
  .hiw-text h3{font-size:26px;color:var(--text);margin-bottom:10px;letter-spacing:-.015em;}
  .hiw-text p{color:var(--muted);font-size:16px;line-height:1.55;}
  .hiw-vis{display:flex;justify-content:center;}

  /* how it works — alternating rows: step text + the real tool UI screen */
  .hiw-frame{width:100%;max-width:500px;height:444px;border:none;display:block;background:transparent;}

  /* use cases — compact icon card grid (3 featured + two rows of five) */
  .uc-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin:40px 0 0;}
  .uc-grid.row1{margin-bottom:12px;}
  .uc-grid.row1 > *:first-child{grid-column-start:2;}
  .uc-card{text-align:center;background:var(--lt-surface);border:1px solid var(--lt-border);border-radius:14px;padding:16px 10px;cursor:pointer;transition:transform .18s,box-shadow .22s,border-color .18s;display:flex;flex-direction:column;align-items:center;gap:9px;min-height:104px;justify-content:center;}
  .uc-card:hover{transform:translateY(-3px);box-shadow:0 16px 38px -22px rgba(0,0,0,.6);}
  .uc-card.on{border-color:var(--pink);box-shadow:var(--glow-pink);}
  .uc-card .uc-ico{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;color:var(--pink);background:linear-gradient(135deg,rgba(45,140,255,.14),rgba(29,78,216,.14));flex-shrink:0;}
  .uc-card.on .uc-ico{background:var(--grad-primary);color:#fff;}
  .uc-card .uc-nm{font-family:'Gabarito';font-weight:700;font-size:13px;color:var(--lt-text);line-height:1.18;letter-spacing:-.01em;text-wrap:balance;}
  .uc-detail{margin-top:22px;background:var(--lt-surface);border:1px solid var(--lt-border);border-radius:var(--radius);padding:28px 32px;display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:flex-start;}
  .uc-detail .uc-ico{width:50px;height:50px;border-radius:14px;display:grid;place-items:center;color:#fff;background:var(--grad-primary);box-shadow:var(--glow-pink);flex-shrink:0;}
  .uc-detail h3{font-size:22px;color:var(--lt-text);margin-bottom:8px;}
  .uc-detail p{color:var(--lt-muted);font-size:15.5px;line-height:1.55;}

  /* trademark attribution */
  .legal-tm{font-family:'JetBrains Mono';font-size:11px;color:#eef2fb;letter-spacing:.02em;margin-top:5px;}

  /* brand logo accent */
  .logo-name .brand-away{color:var(--pink);font-weight:500;}

  /* trust badges */
  .trust-badges{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px;}
  .trust-badges.center{justify-content:center;}
  .trust-badge{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;color:var(--text);background:var(--surface-2);border:1px solid var(--border);border-radius:999px;padding:8px 14px;letter-spacing:-.005em;line-height:1;}
  .trust-badge svg{color:var(--pink);flex-shrink:0;}
  .trust-badge.gold svg{color:var(--amber);}

  /* testimonials marquee */
  .tmq-rows{display:flex;flex-direction:column;gap:18px;margin-top:50px;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
    mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);}
  .tmq-row{display:flex;width:max-content;animation:marquee 95s linear infinite;}
  .tmq-row.rev{animation-direction:reverse;}
  .tmq-rows:hover .tmq-row{animation-play-state:paused;}
  .tmq-set{display:flex;gap:18px;padding-right:18px;flex-shrink:0;}
  .tcard{width:360px;flex-shrink:0;background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:22px 24px;display:flex;flex-direction:column;gap:12px;box-shadow:0 2px 14px -8px rgba(0,0,0,.6);}
  .tcard-stars{color:var(--amber);font-size:13px;letter-spacing:3px;}
  .tcard-q{color:var(--text);font-size:15.5px;line-height:1.5;flex:1;}
  .tcard-attr{display:flex;align-items:baseline;gap:8px;}
  .tcard-name{font-family:'Gabarito';font-weight:700;font-size:14px;color:var(--text);}
  .tcard-city{font-size:12.5px;color:var(--muted);}

  @media(max-width:900px){
    .hiw-row{grid-template-columns:1fr;gap:26px;}
    .hiw-row.flip .hiw-text{order:0;}
    .hiw-cards{grid-template-columns:1fr;}
    .uc-grid,.uc-grid.row1{grid-template-columns:repeat(2,1fr);}
    .uc-grid.row1 > *:first-child{grid-column-start:auto;}
    .uc-detail{grid-template-columns:1fr;}
  }

  .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1);}
  .reveal.in{opacity:1;transform:none;}

  @media(max-width:900px){
    .hero-grid,.hero.centered .hero-grid{grid-template-columns:1fr;text-align:left;gap:38px;}
    .hero .lede{margin-left:0;}
    .hiw-grid,.feat-grid,.ben-grid,.stats{grid-template-columns:1fr;}
    .stats{grid-template-columns:repeat(2,1fr);}
    .ba-wrap{max-width:none;}
  }
  `;
  document.head.appendChild(s);
})();

// ---- tiny line-icon set ----
function Icon({ name, size = 22 }) {
  const p = {
    repeat: 'M17 2l4 4-4 4 M3 11V9a4 4 0 0 1 4-4h14 M7 22l-4-4 4-4 M21 13v2a4 4 0 0 1-4 4H3',
    layers: 'M12 2 2 7l10 5 10-5-10-5z M2 17l10 5 10-5 M2 12l10 5 10-5',
    gauge: 'M12 14l4-4 M3.34 19a10 10 0 1 1 17.32 0',
    shield: 'M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z',
    clock: 'M12 6v6l4 2 M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20z',
    sliders: 'M4 21v-7 M4 10V3 M12 21v-9 M12 8V3 M20 21v-5 M20 12V3 M1 14h6 M9 8h6 M17 16h6',
    hd: 'M22 12H2 M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z M6 16h.01 M10 16h.01',
    calendar: 'M8 2v4 M16 2v4 M3 10h18 M21 6a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6z',
    cursor: 'M3 3l7 18 2-7 7-2L3 3z',
    sparkle: 'M12 3l1.9 5.6L19.5 10l-5.6 1.9L12 17l-1.9-5.6L4.5 10l5.6-1.4L12 3z',
    briefcase: 'M3 8a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z M9 6V5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v1 M3 12h18',
    lock: 'M5 11h14v10H5z M8 11V7a4 4 0 0 1 8 0v4',
    users: 'M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2 M9 11a4 4 0 0 0 0-8 4 4 0 0 0 0 8z M22 21v-2a4 4 0 0 0-3-3.87 M16 3.13a4 4 0 0 1 0 7.75',
    graduation: 'M22 10 12 5 2 10l10 5 10-5z M6 12v5c3 3 9 3 12 0v-5',
    building: 'M3 21h18 M5 21V7l8-4v18 M19 21V11l-6-4 M9 9v.01 M9 12v.01 M9 15v.01',
    plane: 'M17.8 19.2 16 11l3.5-3.5C21 6 21.5 4 21 3c-1-.5-3 0-4.5 1.5L13 8 4.8 6.2c-.5-.1-.9.1-1.1.5l-.3.5c-.2.5-.1 1 .3 1.3L9 12l-2 3H4l-1 1 3 2 2 3 1-1v-3l3-2 3.5 5.3c.3.4.8.5 1.3.3l.5-.2c.4-.3.6-.7.5-1.2z',
    heart: 'M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.29 1.51 4.04 3 5.5l7 7z',
    mail: 'M4 4h16v16H4z M22 6 12 13 2 6',
    trash: 'M3 6h18 M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2 M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6'
  }[name] || '';
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
      {p.split(' M').map((d, i) => <path key={i} d={(i ? 'M' : '') + d} />)}
    </svg>);

}

function Reveal({ children, delay = 0, tag = 'div', className = '', style, ...rest }) {
  const ref = React.useRef(null);
  const [shown, setShown] = React.useState(false);
  React.useEffect(() => {
    if (shown) return;
    const el = ref.current;
    if (!el) return;
    // immediate check: already in (or near) the viewport on mount
    const r = el.getBoundingClientRect();
    if (r.top < (window.innerHeight || 800) * 0.92) {setShown(true);return;}
    let done = false;
    const reveal = () => {if (!done) {done = true;setShown(true);}};
    const io = new IntersectionObserver((es) => es.forEach((e) => {if (e.isIntersecting) {reveal();io.disconnect();}}), { threshold: 0.06 });
    io.observe(el);
    // safety fallback in environments where IO never fires
    const onScroll = () => {
      const rr = el.getBoundingClientRect();
      if (rr.top < (window.innerHeight || 800) * 0.92) {reveal();io.disconnect();window.removeEventListener('scroll', onScroll);}
    };
    window.addEventListener('scroll', onScroll, { passive: true });
    const fb = setTimeout(reveal, 1600);
    return () => {io.disconnect();window.removeEventListener('scroll', onScroll);clearTimeout(fb);};
  }, [shown]);
  const Tag = tag;
  return <Tag ref={ref} className={'reveal ' + (shown ? 'in ' : '') + className} style={{ ...style, transitionDelay: delay + 'ms' }} {...rest}>{children}</Tag>;
}

function Eyebrow({ children, lt }) {
  return <span className={'eyebrow' + (lt ? ' lt' : '')}><span className="dot"></span>{children}</span>;
}
function SectionHead({ eyebrow, title, sub, lt }) {
  return (
    <Reveal className="sh">
      <Eyebrow lt={lt}>{eyebrow}</Eyebrow>
      <h2>{title}</h2>
      {sub && <p>{sub}</p>}
    </Reveal>);

}

// ---------- NAV ----------
function Nav({ onBuy, onTrial, onKey }) {
  return (
    <nav className="nav">
      <div className="wrap nav-inner">
        <a className="logo" href="#top">
          <span className="mark"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><path d="M8 2v4M16 2v4M3 10h18M21 6a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6z" /></svg></span>
          <span className="logo-lock"><span className="logo-name">Wipe<span className="brand-away">Away</span></span><span className="logo-sub">for Google Calendar</span></span>
        </a>
        <div className="nav-links">
          <a href="#how">How it works</a>
          <a href="#features">Features</a>
          <a href="#usecases">Use cases</a>
          <a href="#pricing">Pricing</a>
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
          <a href="#" onClick={(e) => {e.preventDefault();onKey();}} style={{ fontSize: 15, color: 'var(--muted)', fontWeight: 500 }}>Already a customer?</a>
          <button className="btn btn-primary btn-sm" onClick={onBuy}>Buy Now <span className="arrow">→</span></button>
        </div>
      </div>
    </nav>);

}

// ---------- TRUST BADGES ----------
function TrustBadges({ center, hidePrivacy }) {
  let items = [
  ['shield', 'Privacy-first', false],
  ['lock', 'Google OAuth verified', true],
  ['hd', 'No calendar data stored', false]];
  if (hidePrivacy) items = items.filter((b) => b[1] !== 'Privacy-first');
  return (
    <div className={'trust-badges' + (center ? ' center' : '')}>
      {items.map((b) =>
      <span className={'trust-badge' + (b[2] ? ' gold' : '')} key={b[1]}><Icon name={b[0]} size={15} />{b[1]}</span>
      )}
    </div>);

}

// ---------- HERO ----------
function CalendarViz() {
  const before = [0, 2, 1, 3, 1, 0, 2, 1, 2, 3, 0, 1, 2, 1, 3, 2, 1, 0, 2, 3, 1, 2, 1, 3, 2, 1, 2, 0, 3, 1, 2, 1, 3, 2, 1];
  const after = before.map((v, i) => i > 27 ? i % 3 === 0 ? 1 : 0 : 0);
  const render = (arr, isAfter) => arr.map((v, i) =>
  <div key={i} className={'ba-cell' + (v >= 1 ? ' ev' : '') + (v >= 2 ? ' ev2' : '')} style={{ '--ev': isAfter ? '#2d8cff' : ['#0f9d58', '#8e24aa', '#e67e22'][i % 3] }}></div>
  );
  return (
    <div className="ba-wrap">
      <div className="ba-card">
        <div className="ba-label"><span>Before</span><span>4 yrs history</span></div>
        <div className="ba-grid">{render(before, false)}</div>
      </div>
      <div className="ba-card after">
        <div className="ba-label"><span>After ✓</span><span>cleaned</span></div>
        <div className="ba-grid">{render(after, true)}</div>
      </div>
    </div>);

}

function HeroCarousel() {
  return (
    <div style={{ width: '100%', maxWidth: 680 }}>
      <iframe
        src="WipeAway%20Carousel.html?embed&biz=1"
        title="WipeAway demo"
        scrolling="no"
        loading="lazy"
        style={{ width: '100%', height: 474, border: 'none', display: 'block', background: 'transparent' }}>
      </iframe>
    </div>);

}

function Hero({ variant, onBuy, onTrial }) {
  const centered = variant === 'centered';
  const art = variant === 'beforeafter' ? <CalendarViz /> : <HeroCarousel />;
  return (
    <header className="hero" id="top">
      <div className="glow" style={{ width: 620, height: 620, left: -160, top: -120, background: 'radial-gradient(circle,rgba(29,78,216,.30),transparent 70%)' }}></div>
      <div className="glow" style={{ width: 520, height: 520, right: -120, top: 40, background: 'radial-gradient(circle,rgba(45,140,255,.22),transparent 70%)' }}></div>
      <div className={'wrap hero-grid' + (centered ? '' : '')} style={centered ? { display: 'grid', gridTemplateColumns: '1fr', textAlign: 'center', justifyItems: 'center', gap: 44 } : {}}>
        <Reveal style={{ position: 'relative', zIndex: 2 }}>
          <Eyebrow>Google Calendar Cleaner</Eyebrow>
          <h1 style={{ marginTop: 22 }}>Clean your Google<br />Calendar<sup>™</sup> <span className="grad-text">in minutes.</span></h1>
          <p className="lede">Permanently delete thousands of old calendar events across all your calendars — including recurring events — in just a few clicks. No technical knowledge required.</p>
          <div className="hero-cta">
            <button className="btn btn-primary" onClick={onBuy}>Buy Now <span className="price-tag">FROM $9.99</span> <span className="arrow">→</span></button>
            <button className="btn btn-ghost" onClick={onTrial}>Try Free</button>
          </div>
          <div className="rating" style={centered ? { justifyContent: 'center' } : {}}>
            <span className="stars">★★★★★</span>
            <span className="txt">Trusted by calendar hoarders everywhere</span>
          </div>
          <TrustBadges center={centered} hidePrivacy />
        </Reveal>
        <Reveal delay={120} style={{ position: 'relative', zIndex: 2, justifySelf: centered ? 'center' : 'end', width: '100%', display: 'flex', justifyContent: centered ? 'center' : 'flex-end' }}>
          {art}
        </Reveal>
      </div>
    </header>);

}

// ---------- TRUST STRIP ----------
function TrustStrip() {
  const items = [
  ['Personal', '#3b82f6'], ['Work', '#0f9d58'], ['Exercise', '#8e24aa'], ['Family', '#e67e22'],
  ['Shared calendars', '#0ea5e9'], ['Birthdays', '#6366f1'], ['Holidays', '#a855f7'], ['Recurring series', '#3b82f6']];

  const set = (k) =>
  <div className="mq-set" key={k} aria-hidden={k > 0 ? 'true' : undefined}>
      {items.concat(items).map((c, i) =>
    <span className="chip" key={i}><span className="sw" style={{ background: c[1] }}></span>{c[0]}</span>
    )}
    </div>;

  return (
    <section className="strip">
      <div className="strip-lbl">Works across every calendar on your account</div>
      <div className="marquee">
        {set(0)}{set(1)}
      </div>
    </section>);

}

// ---------- STATS ----------
function Stats() {
  const data = [
  ['Thousands', 'of events deleted in a single session'],
  ['Minutes', 'not hours of one-by-one deleting'],
  ['All', 'calendars on your account supported'],
  ['$0', 'of your data ever stored or shared']];

  return (
    <section className="section" style={{ paddingTop: 90, paddingBottom: 90 }}>
      <div className="wrap">
        <Reveal className="stats">
          {data.map((d, i) =>
          <div className="stat" key={i}>
              <div className="v grad-text">{d[0]}</div>
              <div className="k">{d[1]}</div>
            </div>
          )}
        </Reveal>
      </div>
    </section>);

}

// ---------- HOW IT WORKS ----------
// Alternating rows: step text beside the real tool UI screen (locked carousel screens).
function HiwScreen({ screen }) {
  return (
    <iframe
      className="hiw-frame"
      src={'WipeAway%20Carousel.html?embed&biz=1&screen=' + screen}
      title="WipeAway step"
      scrolling="no"
      loading="lazy">
    </iframe>);

}

function HowItWorks() {
  const steps = [
  ['Select your calendars', 'Wipe Away finds every calendar on your Google account. Tick the ones you want to clean — leave the rest untouched.', 1],
  ['Set a date', 'Choose how far back to go. Delete everything before a specific date, or wipe your entire history in one go.', 2],
  ['Sit back', 'Hit delete and watch the progress. Wipe Away handles everything — including recurring series — automatically.', 3]];

  return (
    <section className="section" id="how">
      <div className="wrap">
        <SectionHead eyebrow="How it works" title="Three steps to a clean calendar." sub="No spreadsheets, no scripts, no clicking delete a thousand times. Just three steps." />
        <div className="hiw2">
          {steps.map((s, i) =>
          <Reveal key={s[0]} delay={i * 80} className={'hiw-row' + (i % 2 ? ' flip' : '')}>
              <div className="hiw-text">
                <span className="hiw-num">{i + 1}</span>
                <div className="lbl">Step {i + 1}</div>
                <h3>{s[0]}</h3>
                <p>{s[1]}</p>
              </div>
              <div className="hiw-vis"><HiwScreen screen={s[2]} /></div>
            </Reveal>
          )}
        </div>
      </div>
    </section>);

}

// ---------- FEATURES ----------
function Features() {
  const f = [
  ['repeat', 'Recurring events handled', 'Deletes every instance of a recurring event up to your chosen date — without touching future ones.'],
  ['layers', 'All calendars supported', 'Works across every calendar on your account — personal, work, shared, and more — in one session.'],
  ['gauge', 'Handles thousands of events', 'Built to delete years of history without timing out. Automatically resumes if interrupted — until the job is done.'],
  ['shield', 'Private and secure', 'Your calendar data is never stored, shared, or seen by anyone. Wipe Away only ever deletes what you tell it to.']];

  return (
    <section className="section" id="features">
      <div className="wrap">
        <SectionHead lt eyebrow="Features" title={<>Everything you need. <span className="grad-text">Nothing you don't.</span></>} sub="Purpose-built for one job — clearing out your calendar — and it does it properly." />
        <div className="feat-grid">
          {f.map((x, i) =>
          <Reveal key={x[1]} delay={i * 70} className="feat">
              <div className="ico"><Icon name={x[0]} /></div>
              <div><h3>{x[1]}</h3><p>{x[2]}</p></div>
            </Reveal>
          )}
        </div>
      </div>
    </section>);

}

// ---------- BENEFITS ----------
function Benefits() {
  const b = [
  ['clock', 'Save hours of cleanup', 'Remove years of old calendar events in minutes instead of deleting them one by one.'],
  ['sliders', 'Take back control', 'Start fresh with a cleaner, more organised calendar that\'s easier to navigate.'],
  ['hd', 'Free up Google storage', 'Reclaim space in your Google account by permanently removing years of unwanted history.'],
  ['gauge', 'Improve sync performance', 'Large histories can slow syncing on phones and laptops. Deleting old events keeps things responsive.']];

  return (
    <section className="section" style={{ paddingTop: 40 }}>
      <div className="wrap">
        <SectionHead lt eyebrow="Benefits" title={<>Less clutter. More control. <span className="grad-text">Better performance.</span></>} />
        <div className="ben-grid">
          {b.map((x, i) =>
          <Reveal key={x[1]} delay={i * 70} className="ben">
              <div className="ico"><Icon name={x[0]} size={20} /></div>
              <h3>{x[1]}</h3><p>{x[2]}</p>
            </Reveal>
          )}
        </div>
      </div>
    </section>);

}

// ---------- USE CASES ----------
function UseCases() {
  // Row 1 — kept groups (per Charlie's note)
  const kept = [
  ['briefcase', 'Job switchers', 'Moving on from a role? Strip out years of standups, 1:1s and recurring syncs from a previous job in a single pass.'],
  ['shield', 'Privacy-conscious users', 'Permanently remove the detailed history of where you\'ve been and who you\'ve met — nothing stored, nothing shared.'],
  ['clock', 'Long-time Google users', 'A decade of birthdays, reminders and events adds up. Reclaim storage and speed up sync across all your devices.']];

  // Rows 2–3 — the ten groups from the donor site (wipeaway.app).
  const donor = [
  ['graduation', 'Students & Educators', 'Clear out old semesters, timetables, and academic schedules. Archive years of completed classes, deadlines, and office hours to make room for the term ahead.'],
  ['users', 'Parents & Families', 'Simplify busy family calendars. Remove old appointments, school events, and extracurricular schedules so it\'s easier to focus on what matters now.'],
  ['building', 'Businesses & Organizations', 'Remove years of outdated meetings and sensitive scheduling data. Keep company calendars lean, organised, and free from old meetings, project schedules, and internal planning records that no longer serve a purpose.'],
  ['layers', 'Freelancers & Contractors', 'Start every year with a clean planning workspace. Delete completed projects, client meetings, and time-blocked schedules to stay focused on current work.'],
  ['heart', 'Healthcare Providers', 'Reduce clutter from years of appointment history. Keep scheduling calendars efficient by removing outdated bookings, rosters, and administrative events.'],
  ['sparkle', 'Marketers & Social Media', 'Clear away old campaigns and content schedules. Remove completed launches, promotions, and editorial calendars to make future planning easier.'],
  ['calendar', 'Event Planners & Entertainment', 'Reset after every event season. Delete old itineraries, rehearsals, vendor schedules, and production timelines once the event is complete.'],
  ['mail', 'Recruiters & HR', 'Keep hiring calendars focused on active recruitment. Remove completed interviews, onboarding sessions, and training schedules to reduce noise and improve visibility.'],
  ['cursor', 'Content Creators & Influencers', 'Stay organised across every content cycle. Clear out old publishing schedules, filming plans, and launch calendars to focus on upcoming content.'],
  ['hd', 'Local Service Providers', 'Maintain a cleaner booking calendar. Remove years of completed appointments and client bookings to keep scheduling fast, organised, and easy to manage.']];

  const groups = donor;
  const [sel, setSel] = React.useState(0);
  const active = groups[sel];

  const card = (g, idx) =>
  <div key={g[1]} className={'uc-card' + (idx === sel ? ' on' : '')} onClick={() => setSel(idx)} role="button" tabIndex={0}>
      <span className="uc-ico"><Icon name={g[0]} size={18} /></span>
      <span className="uc-nm">{g[1]}</span>
    </div>;

  return (
    <section className="section" id="usecases" style={{ paddingTop: 40 }}>
      <div className="wrap">
        <SectionHead lt eyebrow="Use cases" title="Who is Wipe Away for?" sub="Anyone who wants a less cluttered Google Calendar — and it's proven especially handy for the groups below. Tap any group to see how." />
        <div className="uc-grid">{groups.map((g, i) => card(g, i))}</div>
        <Reveal className="uc-detail">
          <span className="uc-ico"><Icon name={active[0]} size={24} /></span>
          <div><h3>{active[1]}</h3><p>{active[2]}</p></div>
        </Reveal>
      </div>
    </section>);

}

// ---------- TESTIMONIALS ----------
function Testimonials() {
  const rowA = [
  { name: 'Bashar M.', city: 'Dubai, UAE', q: 'Ingenius. Such a timesaver.' },
  { name: 'James T.', city: 'Manchester, UK', q: 'Wiped every old standup and 1:1 from my last job in a single pass. Worth ten times the price.' },
  { name: 'Priya R.', city: 'London, UK', q: 'Recurring events used to be impossible to clear. WipeAway handled them without breaking a sweat.' },
  { name: 'Michael B.', city: 'Denver, CO', q: 'My calendar finally syncs instantly on my phone again. Should have done this years ago.' },
  { name: 'Anh S.', city: 'Da Nang, VI', q: 'Under ten quid to get a decade of my life off Google’s servers? Absolute no-brainer.' },
  { name: 'Sofia G.', city: 'Dublin, IE', q: 'I dreaded this cleanup for months. It was done before my coffee had gone cold.' },
  { name: 'David K.', city: 'Toronto, CA', q: 'Cleaned three shared work calendars in an afternoon. Saved me an entire week.' },
  { name: 'Aisha N.', city: 'Birmingham, UK', q: 'Nothing is stored anywhere. Privacy was my biggest worry and they completely nailed it.' }];

  const rowB = [
  { name: 'Carmen J.', city: 'Seville, ES', q: 'No subscription, no nonsense. Paid once and my calendar is finally mine again.' },
  { name: 'Hannah W.', city: 'Leeds, UK', q: 'The cleanest, simplest tool I have used in years. Did exactly what it promised.' },
  { name: 'Carlos D.', city: 'Miami, FL', q: 'Thousands of events, zero timeouts. It just kept going until the whole job was done.' },
  { name: 'Olivia H.', city: 'Portland, OR', q: 'Solves a real, genuinely annoying problem that Google should have fixed years ago.' },
  { name: 'Marcus J.', city: 'Edinburgh, UK', q: 'Cheapest hour I have ever saved myself. Already recommending it to my whole team.' },
  { name: 'Chloe S.', city: 'Glasgow, UK', q: 'Finally reclaimed my Google storage. Worth every single penny and then some.' },
  { name: 'Daniel O.', city: 'Sydney, AU', q: 'Set a cut-off date, hit go, walked away. Came back to a completely spotless calendar.' },
  { name: 'Janelle P.', city: 'Chicago, IL', q: 'Amazing!' }];

  const card = (t, i) =>
  <div className="tcard" key={t.name + i}>
      <div className="tcard-stars">★★★★★</div>
      <p className="tcard-q">“{t.q}”</p>
      <div className="tcard-attr"><span className="tcard-name">{t.name}</span><span className="tcard-city">{t.city}</span></div>
    </div>;

  const setOf = (arr, k) =>
  <div className="tmq-set" key={k} aria-hidden={k > 0 ? 'true' : undefined}>{arr.map((t, i) => card(t, i))}</div>;

  return (
    <section className="section" id="reviews" style={{ paddingTop: 30 }}>
      <div className="wrap">
        <SectionHead eyebrow="Loved by users" title="Thousands of cleaner calendars." sub="Real words from people who got their time — and their storage — back." />
      </div>
      <div className="tmq-rows">
        <div className="tmq-row">{setOf(rowA, 0)}{setOf(rowA, 1)}</div>
        <div className="tmq-row rev">{setOf(rowB, 0)}{setOf(rowB, 1)}</div>
      </div>
    </section>);

}

// ---------- FINAL CTA ----------
function FinalCTA({ onBuy }) {
  return (
    <section className="section" style={{ paddingTop: 30 }}>
      <div className="wrap">
        <Reveal className="cta-box">
          <Eyebrow>Ready when you are</Eyebrow>
          <h2 style={{ marginTop: 20 }}>Clean up your calendar<br />in the next few minutes.</h2>
          <p>No subscriptions. No renewals. One payment, and your calendar is yours again.</p>
          <button className="btn btn-primary" onClick={onBuy} style={{ fontSize: 17, padding: '17px 30px' }}>Buy Now <span className="arrow">→</span></button>
        </Reveal>
      </div>
    </section>);

}

// ---------- FOOTER ----------
function Footer({ onContact }) {
  return (
    <footer className="foot">
      <div className="wrap">
        <div className="foot-grid">
          <div style={{ maxWidth: 320 }}>
            <a className="logo" href="#top" style={{ marginBottom: 14 }}>
              <span className="mark"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><path d="M8 2v4M16 2v4M3 10h18M21 6a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6z" /></svg></span>
              <span className="logo-lock"><span className="logo-name">Wipe<span className="brand-away">Away</span></span><span className="logo-sub">for Google Calendar</span></span>
            </a>
            <p className="muted" style={{ fontSize: 14.5, marginTop: 12 }}>Your calendar. Cleaned.</p>
          </div>
          <div className="foot-right">
            <div className="foot-links">
              <a href="#" onClick={(e) => {e.preventDefault();onContact();}}>Contact</a>
              <a href="/terms.html">Terms &amp; Conditions</a>
              <a href="/privacy.html">Privacy Policy</a>
            </div>
            <div className="foot-copy">© 2026 EjoGo! Labs. All rights reserved.</div>
            <div className="legal-tm">Google Calendar is a trademark of Google LLC.</div>
          </div>
        </div>
      </div>
    </footer>);

}

Object.assign(window, { Icon, Reveal, Eyebrow, SectionHead, TrustBadges, Nav, Hero, TrustStrip, Stats, HowItWorks, Features, Benefits, UseCases, Testimonials, FinalCTA, Footer });