// Animated WipeAway app mockup — auto-cycles Select → Review → Delete → Done.
(function () {
  if (document.getElementById('wa-mock-styles')) return;
  const s = document.createElement('style');
  s.id = 'wa-mock-styles';
  s.textContent = `
  .wa-frame{width:100%;max-width:640px;background:#0f172a;border:1px solid rgba(255,255,255,.09);
    border-radius:18px;overflow:hidden;box-shadow:0 40px 120px -30px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.02);}
  .wa-bar{display:flex;align-items:center;gap:8px;padding:13px 16px;border-bottom:1px solid rgba(255,255,255,.07);background:#100b1e;}
  .wa-dot{width:11px;height:11px;border-radius:50%;}
  .wa-url{flex:1;margin-left:10px;text-align:center;font-family:'JetBrains Mono',monospace;font-size:11.5px;
    color:#8a8198;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);border-radius:7px;padding:5px 12px;}
  .wa-body{display:flex;min-height:330px;}
  .wa-side{width:180px;flex-shrink:0;padding:18px 14px;border-right:1px solid rgba(255,255,255,.07);background:#0c0818;}
  .wa-brand{font-family:'Gabarito';font-weight:800;font-size:14px;display:flex;align-items:center;gap:8px;margin-bottom:3px;}
  .wa-brand .m{width:20px;height:20px;border-radius:6px;background:var(--grad-primary);}
  .wa-brand-sub{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.12em;color:#6e667e;text-transform:uppercase;margin-bottom:20px;padding-left:28px;}
  .wa-step{display:flex;align-items:center;gap:10px;padding:8px 9px;border-radius:9px;font-size:12.5px;color:#7c7488;margin-bottom:3px;transition:all .3s;}
  .wa-step .n{width:19px;height:19px;border-radius:6px;background:rgba(255,255,255,.06);display:grid;place-items:center;font-size:10px;font-weight:700;font-family:'JetBrains Mono';flex-shrink:0;}
  .wa-step.done{color:#cbd5e1;}
  .wa-step.done .n{background:rgba(59,130,246,.16);color:var(--pink);}
  .wa-step.active{background:rgba(59,130,246,.10);color:#fff;}
  .wa-step.active .n{background:var(--grad-primary);color:#fff;}
  .wa-user{margin-top:auto;display:flex;align-items:center;gap:9px;padding-top:16px;}
  .wa-av{width:28px;height:28px;border-radius:8px;background:linear-gradient(135deg,#6366f1,#4f46e5);display:grid;place-items:center;font-size:11px;font-weight:700;}
  .wa-main{flex:1;padding:20px 22px;display:flex;flex-direction:column;min-width:0;}
  .wa-h{font-family:'Gabarito';font-weight:800;font-size:18px;margin-bottom:4px;}
  .wa-sub{font-size:12px;color:#9b93a8;margin-bottom:16px;line-height:1.4;}
  .wa-datebar{display:flex;align-items:center;gap:8px;margin-bottom:14px;}
  .wa-date{font-family:'JetBrains Mono',monospace;font-size:12px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:8px;padding:7px 11px;color:#cbd5e1;}
  .wa-count{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--pink);background:rgba(59,130,246,.10);border:1px solid rgba(59,130,246,.25);border-radius:8px;padding:7px 11px;}
  .wa-cal{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:10px;background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.06);margin-bottom:7px;font-size:13px;}
  .wa-cal .sw{width:14px;height:14px;border-radius:4px;flex-shrink:0;}
  .wa-cal .nm{flex:1;}
  .wa-cal .ct{font-family:'JetBrains Mono',monospace;font-size:11.5px;color:#9b93a8;}
  .wa-check{width:16px;height:16px;border-radius:5px;border:1.5px solid rgba(255,255,255,.2);display:grid;place-items:center;flex-shrink:0;transition:all .25s;}
  .wa-check.on{background:var(--grad-primary);border-color:transparent;}
  .wa-cal.view{opacity:.5;}
  .wa-cal.view .tag{font-family:'JetBrains Mono';font-size:9px;color:#6e667e;}
  .wa-total{margin-top:auto;padding-top:14px;display:flex;align-items:center;justify-content:space-between;}
  .wa-total .lbl{font-size:12px;color:#9b93a8;}
  .wa-total .big{font-family:'Gabarito';font-weight:800;font-size:20px;}
  .wa-go{width:100%;margin-top:12px;background:var(--grad-primary);color:#fff;font-weight:700;font-size:13.5px;
    padding:11px;border-radius:11px;box-shadow:var(--glow-pink);letter-spacing:.02em;}
  .wa-prog-track{height:7px;border-radius:99px;background:rgba(255,255,255,.07);overflow:hidden;margin:4px 0 16px;}
  .wa-prog-fill{height:100%;background:var(--grad-primary);border-radius:99px;transition:width .25s linear;}
  .wa-prow{display:flex;align-items:center;gap:10px;font-size:12.5px;margin-bottom:8px;}
  .wa-prow .nm{flex:1;}
  .wa-prow .st{font-family:'JetBrains Mono';font-size:10px;color:#6e667e;}
  .wa-prow .st.busy{color:var(--amber);}
  .wa-prow .st.ok{color:#8e24aa;}
  .wa-done-ico{width:46px;height:46px;border-radius:14px;background:rgba(70,211,154,.14);display:grid;place-items:center;margin:6px 0 14px;}
  .wa-stat{display:flex;gap:10px;margin-bottom:14px;}
  .wa-stat .box{flex:1;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);border-radius:11px;padding:11px 13px;}
  .wa-stat .v{font-family:'Gabarito';font-weight:800;font-size:22px;}
  .wa-stat .k{font-size:10.5px;color:#9b93a8;font-family:'JetBrains Mono';letter-spacing:.06em;text-transform:uppercase;}

  /* calendar-wipe month grid */
  .cw{margin-top:6px;}
  .cw-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;}
  .cw-title{font-family:'Gabarito';font-weight:800;font-size:13px;color:#fff;}
  .cw-wipe{font-family:'JetBrains Mono';font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--pink);display:flex;align-items:center;gap:6px;}
  .cw-pulse{width:6px;height:6px;border-radius:50%;background:var(--pink);animation:cwpulse 1.1s infinite;}
  @keyframes cwpulse{0%,100%{opacity:1;}50%{opacity:.25;}}
  .cw-dow{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-bottom:4px;}
  .cw-dow span{font-family:'JetBrains Mono';font-size:7.5px;color:#6e667e;text-align:center;}
  .cw-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;}
  .cw-cell{height:26px;border-radius:5px;background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.05);position:relative;}
  .cw-cell.out{background:rgba(255,255,255,.015);}
  .cw-day{position:absolute;top:2px;left:4px;font-size:7px;color:#6e667e;font-family:'JetBrains Mono';}
  .cw-cell.out .cw-day{color:#3a3447;}
  .cw-ev{position:absolute;left:3px;right:3px;height:4px;border-radius:2px;transition:opacity .45s ease,transform .45s ease;transform-origin:left center;}
  .cw-ev.gone{opacity:0;transform:scaleX(0);}
  `;
  document.head.appendChild(s);
})();

// ---- Calendar month view whose events get wiped away ----
const CW_EVENTS = [
{ c: 6, t: '#0f9d58', thr: 0.04 }, { c: 8, t: '#3b82f6', thr: 0.5, row: 1 },
{ c: 8, t: '#8e24aa', thr: 0.10 }, { c: 9, t: '#e67e22', thr: 0.16 },
{ c: 11, t: '#0f9d58', thr: 0.22 }, { c: 13, t: '#3b82f6', thr: 0.28 },
{ c: 14, t: '#8e24aa', thr: 0.34 }, { c: 14, t: '#0f9d58', thr: 0.62, row: 1 },
{ c: 16, t: '#e67e22', thr: 0.40 }, { c: 18, t: '#3b82f6', thr: 0.46 },
{ c: 20, t: '#0f9d58', thr: 0.52 }, { c: 21, t: '#8e24aa', thr: 0.58 },
{ c: 23, t: '#3b82f6', thr: 0.64 }, { c: 25, t: '#e67e22', thr: 0.70 },
{ c: 26, t: '#0f9d58', thr: 0.76 }, { c: 28, t: '#8e24aa', thr: 0.82 },
{ c: 30, t: '#3b82f6', thr: 0.88 }, { c: 33, t: '#0f9d58', thr: 0.94 }];


function CalendarWipe({ prog, loop }) {
  const [p, setP] = React.useState(prog != null ? prog : 0);
  React.useEffect(() => {
    if (prog != null) { setP(prog); return; }
    if (!loop) return;
    let raf, start;
    const dur = 3200, hold = 1100;
    const tick = (ts) => {
      if (!start) start = ts;
      const e = (ts - start) % (dur + hold);
      setP(e < dur ? e / dur : 1);
      raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, [prog, loop]);

  const cells = [];
  for (let i = 0; i < 42; i++) {
    const day = i - 5; // Oct 1 (2022) falls on a Saturday → index 6
    const out = day < 1 || day > 31;
    const label = out ? day < 1 ? 30 + day : day - 31 : day;
    const evs = CW_EVENTS.filter((e) => e.c === i);
    cells.push(
      <div key={i} className={'cw-cell' + (out ? ' out' : '')}>
        <span className="cw-day">{label}</span>
        {evs.map((e, k) =>
        <span key={k} className={'cw-ev' + (p > e.thr ? ' gone' : '')} style={{ background: e.t, bottom: (e.row ? 9 : 3) }}></span>
        )}
      </div>);

  }
  return (
    <div className="cw">
      <div className="cw-head">
        <span className="cw-title">October 2022</span>
        <span className="cw-wipe"><span className="cw-pulse"></span>Wiping away…</span>
      </div>
      <div className="cw-dow">{['S', 'M', 'T', 'W', 'T', 'F', 'S'].map((d, i) => <span key={i}>{d}</span>)}</div>
      <div className="cw-grid">{cells}</div>
    </div>);

}

const WA_CALS = [
{ name: 'Personal', count: 1842, color: '#3b82f6' },
{ name: 'Work', count: 3214, color: '#0f9d58' },
{ name: 'Exercise', count: 490, color: '#8e24aa' },
{ name: 'Family', count: 673, color: '#e67e22' }];

const WA_TOTAL = WA_CALS.reduce((a, c) => a + c.count, 0);
const fmt = (n) => Math.round(n).toLocaleString();

function WipeAwayApp() {
  // phase: 0 select, 1 review, 2 delete, 3 done
  const [phase, setPhase] = React.useState(0);
  const [prog, setProg] = React.useState(0); // 0..1 for delete

  React.useEffect(() => {
    let t;
    if (phase === 0) t = setTimeout(() => setPhase(1), 2600);else
    if (phase === 1) t = setTimeout(() => {setProg(0);setPhase(2);}, 2600);else
    if (phase === 3) t = setTimeout(() => setPhase(0), 3000);
    return () => clearTimeout(t);
  }, [phase]);

  React.useEffect(() => {
    if (phase !== 2) return;
    let raf, start;
    const dur = 2600;
    const tick = (ts) => {
      if (!start) start = ts;
      const p = Math.min(1, (ts - start) / dur);
      setProg(p);
      if (p < 1) raf = requestAnimationFrame(tick);else
      setTimeout(() => setPhase(3), 450);
    };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, [phase]);

  const steps = ['Licence', 'Authorise', 'Select calendars', 'Review & confirm', 'Delete'];
  // map phase -> active step index in sidebar
  const activeStep = phase === 0 ? 2 : phase === 1 ? 3 : 4;

  const deleted = prog * WA_TOTAL;
  // per-calendar progress (sequential)
  let acc = 0;
  const calState = WA_CALS.map((c) => {
    const startAt = acc,endAt = acc + c.count;
    acc = endAt;
    const local = Math.max(0, Math.min(1, (deleted - startAt) / c.count));
    return { ...c, local, status: local >= 1 ? 'ok' : local > 0 ? 'busy' : 'wait' };
  });

  return (
    <div className="wa-frame">
      <div className="wa-bar">
        <span className="wa-dot" style={{ background: '#ff5f57' }}></span>
        <span className="wa-dot" style={{ background: '#febc2e' }}></span>
        <span className="wa-dot" style={{ background: '#28c840' }}></span>
        <span className="wa-url">wipeaway.app / clean</span>
      </div>
      <div className="wa-body">
        <div className="wa-side">
          <div className="wa-brand"><span className="m"></span>WipeAway</div>
          <div className="wa-brand-sub">Google Calendar</div>
          {steps.map((st, i) =>
          <div key={st} className={'wa-step ' + (i < activeStep ? 'done' : i === activeStep ? 'active' : '')}>
              <span className="n">{i < activeStep ? '✓' : i + 1}</span>{st}
            </div>
          )}
          <div className="wa-user">
            <span className="wa-av">JD</span>
            <div style={{ minWidth: 0 }}>
              <div style={{ fontSize: 11.5, fontWeight: 600 }}>Jane Doe</div>
              <div style={{ fontSize: 10, color: '#6e667e', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>jane.doe@gmail.com</div>
            </div>
          </div>
        </div>

        <div className="wa-main">
          {phase === 0 && <>
            <div className="wa-h">Select calendars</div>
            <div className="wa-sub">Choose which calendars to clean, then set a cut-off date.</div>
            <div className="wa-datebar">
              <span style={{ fontSize: 11.5, color: '#9b93a8' }}>Delete before</span>
              <span className="wa-date">01 / 01 / 2026</span>
              <span className="wa-count">Count →</span>
            </div>
            {WA_CALS.map((c) =>
            <div key={c.name} className="wa-cal">
                <span className="sw" style={{ background: c.color }}></span>
                <span className="nm">{c.name}</span>
                <span className="ct">{fmt(c.count)}</span>
                <span className="wa-check on">✓</span>
              </div>
            )}
            <div className="wa-cal view">
              <span className="sw" style={{ background: '#5b5468' }}></span>
              <span className="nm">Holidays in UK</span>
              <span className="tag">View only</span>
            </div>
          </>}

          {phase === 1 && <>
            <div className="wa-h">Review &amp; confirm</div>
            <div className="wa-sub">Entries found before 01/01/2026. Confirm which calendars to wipe.</div>
            {WA_CALS.map((c) =>
            <div key={c.name} className="wa-cal">
                <span className="sw" style={{ background: c.color }}></span>
                <span className="nm">{c.name}</span>
                <span className="ct">{fmt(c.count)}</span>
                <span className="wa-check on">✓</span>
              </div>
            )}
            <div className="wa-total">
              <span className="lbl">Total selected for deletion</span>
              <span className="big grad-text">{fmt(WA_TOTAL)}</span>
            </div>
            <button className="wa-go">START DELETION →</button>
          </>}

          {phase === 2 && <>
            <div className="wa-h">Deleting events…</div>
            <div className="wa-sub">Please keep this window open. This may take a few minutes.</div>
            <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 12, marginBottom: 2 }}>
              <span style={{ color: '#9b93a8' }}>Progress</span>
              <span style={{ fontFamily: 'JetBrains Mono', fontWeight: 600 }}>{fmt(deleted)} / {fmt(WA_TOTAL)}</span>
            </div>
            <div className="wa-prog-track"><div className="wa-prog-fill" style={{ width: prog * 100 + '%' }}></div></div>
            {calState.map((c) =>
            <div key={c.name} className="wa-prow">
                <span className="sw" style={{ background: c.color, width: 12, height: 12, borderRadius: 4 }}></span>
                <span className="nm">{c.name}</span>
                <span className={'st ' + (c.status === 'ok' ? 'ok' : c.status === 'busy' ? 'busy' : '')}>
                  {c.status === 'ok' ? 'Done ✓' : c.status === 'busy' ? 'Wiping…' : 'Waiting'}
                </span>
              </div>
            )}
          </>}

          {phase === 3 && <>
            <div className="wa-done-ico">
              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#8e24aa" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><path d="M20 6 9 17l-5-5" /></svg>
            </div>
            <div className="wa-h">Calendar cleaned ✓</div>
            <div className="wa-sub">Your calendar has been cleaned successfully.</div>
            <div className="wa-stat">
              <div className="box"><div className="v grad-text">{fmt(WA_TOTAL)}</div><div className="k">Total deleted</div></div>
              <div className="box"><div className="v">4</div><div className="k">Calendars wiped</div></div>
            </div>
            {WA_CALS.map((c) =>
            <div key={c.name} className="wa-prow">
                <span className="sw" style={{ background: c.color, width: 12, height: 12, borderRadius: 4 }}></span>
                <span className="nm">{c.name}</span>
                <span className="st ok">{fmt(c.count)}</span>
              </div>
            )}
          </>}
        </div>
      </div>
    </div>);

}

window.WipeAwayApp = WipeAwayApp;
window.CalendarWipe = CalendarWipe;