// iso-page.jsx
// The rest of the page, reskinned into the bright toy-city world:
// nav, pricing "plots", question types, closer, footer.

function CubeMark() {
  // tiny CSS-free SVG iso cube for the wordmark
  return (
    <svg className="cube-mark" viewBox="0 0 28 30" aria-hidden="true">
      <polygon points="14,1 27,8.5 14,16 1,8.5" fill="var(--c-amber)" stroke="var(--c-ink)" strokeWidth="1.4" strokeLinejoin="round" />
      <polygon points="1,8.5 14,16 14,29 1,21.5" fill="var(--c-primary)" stroke="var(--c-ink)" strokeWidth="1.4" strokeLinejoin="round" />
      <polygon points="27,8.5 14,16 14,29 27,21.5" fill="var(--c-blue)" stroke="var(--c-ink)" strokeWidth="1.4" strokeLinejoin="round" />
    </svg>);
}

// Coffee Break toggles persist across in-tab navigation but reset on a refresh.
const CB_KEY = { crt: 'doppio-crt', midi: 'doppio-midi' };
try {
  const _nav = performance.getEntriesByType('navigation')[0];
  if (!_nav || _nav.type === 'reload') {sessionStorage.removeItem(CB_KEY.crt);sessionStorage.removeItem(CB_KEY.midi);}
} catch (e) {}
function cbRead(k) {try {return sessionStorage.getItem(CB_KEY[k]) === '1';} catch (e) {return false;}}
function cbWrite(k, v) {try {sessionStorage.setItem(CB_KEY[k], v ? '1' : '0');} catch (e) {}}

function TopNav() {
  const [crt, setCrt] = React.useState(() => cbRead('crt'));
  React.useEffect(() => {
    document.documentElement.classList.toggle('crt', crt);
    cbWrite('crt', crt);
  }, [crt]);

  const [midi, setMidi] = React.useState(() => cbRead('midi'));
  const ctxRef = React.useRef(null);
  const bufRef = React.useRef(null);
  const loadRef = React.useRef(null);
  const srcRef = React.useRef(null);
  const getCtx = () => {
    if (!ctxRef.current) ctxRef.current = new (window.AudioContext || window.webkitAudioContext)();
    return ctxRef.current;
  };
  const loadBuffer = () => {
    if (bufRef.current) return Promise.resolve(bufRef.current);
    if (loadRef.current) return loadRef.current;
    const ctx = getCtx();
    loadRef.current = fetch('assets/coffee-break.mp3').
    then((r) => r.arrayBuffer()).
    then((b) => ctx.decodeAudioData(b)).
    then((buf) => {bufRef.current = buf;return buf;});
    return loadRef.current;
  };
  const playMidi = () => {
    const ctx = getCtx();
    if (ctx.state === 'suspended') ctx.resume();
    loadBuffer().then((buf) => {
      if (srcRef.current) {try {srcRef.current.stop();} catch (e) {}}
      const src = ctx.createBufferSource();
      src.buffer = buf;
      src.loop = true;
      const gain = ctx.createGain();
      gain.gain.value = 0.55;
      src.connect(gain).connect(ctx.destination);
      src.start(0);
      srcRef.current = src;
      setMidi(true);
    }).catch(() => setMidi(false));
  };
  const stopMidi = () => {
    if (srcRef.current) {try {srcRef.current.stop();} catch (e) {}srcRef.current = null;}
    setMidi(false);
  };
  const toggleMidi = () => {midi ? stopMidi() : playMidi();};
  React.useEffect(() => {cbWrite('midi', midi);}, [midi]);
  React.useEffect(() => {
    if (!midi) return;
    const kick = () => {playMidi();window.removeEventListener('pointerdown', kick);window.removeEventListener('keydown', kick);};
    window.addEventListener('pointerdown', kick);
    window.addEventListener('keydown', kick);
    return () => {window.removeEventListener('pointerdown', kick);window.removeEventListener('keydown', kick);};
  }, []);

  return (
    <React.Fragment>
    <header className="top-nav" data-screen-label="00 Nav">
      <div className="nav-inner">
        <a href="#" className="wordmark" style={{ fontFamily: "Poppins", fontWeight: "700" }}>Doppio</a>
        <nav className="nav-links">
          <a href="#plans"><img className="nav-ic" src="assets/nav-dollar.png" alt="" /> Pricing</a>
          <a href="#"><img className="nav-ic" src="assets/nav-book.png" alt="" /> Docs</a>
          <div className="nav-dd">
            <span className="nav-dd-trigger" tabIndex={0} role="button" aria-haspopup="true"><img src="assets/coffee-icon.png" alt="" style={{ width: '22px', height: '22px', objectFit: 'contain', verticalAlign: 'middle', filter: 'drop-shadow(1px 1px 0 rgba(43,38,32,0.2))' }} /> Coffee Break <span className="dd-caret" aria-hidden="true">▾</span></span>
            <div className="nav-dd-menu" role="menu">
              <div className="dd-head">FUN STUFF FOR BUSY PEEPS</div>
              <button type="button" className={'dd-item' + (crt ? ' on' : '')} role="menuitemcheckbox" aria-checked={crt} onClick={() => setCrt((c) => !c)}>
                <span className="dd-ic" aria-hidden="true">▤</span>
                <span className="dd-label">CRT mode</span>
                <span className="dd-toggle"><span className="dd-knob" /></span>
              </button>
              <button type="button" className={'dd-item' + (midi ? ' on' : '')} role="menuitemcheckbox" aria-checked={midi} onClick={toggleMidi}>
                <span className="dd-ic" aria-hidden="true">♪</span>
                <span className="dd-label">90s MIDI Soundtrack</span>
                <span className="dd-toggle"><span className="dd-knob" /></span>
              </button>
            </div>
          </div>
        </nav>
        <div className="nav-actions">
          <a href="#" className="nav-login" style={{ fontFamily: "Poppins" }}><img src="assets/login-key.png" alt="" style={{ width: '22px', height: '22px', objectFit: 'contain', filter: 'drop-shadow(1px 1px 0 rgba(43,38,32,0.2))' }} /> Log in</a>
          <a href="#" className="nav-install"><img src="assets/cdrom.png" alt="" style={{ width: '22px', height: '22px', objectFit: 'contain', filter: 'drop-shadow(1px 1px 0 rgba(43,38,32,0.2))' }} /> Install for Slides</a>
        </div>
      </div>
    </header>
    {midi &&
      <div className="np-chip" role="status">
        <span className="np-eq" aria-hidden="true"><i></i><i></i><i></i><i></i></span>
        <span className="np-label">90s MIDI</span>
        <button type="button" className="np-stop" onClick={stopMidi} aria-label="Stop music">■</button>
      </div>
      }
    </React.Fragment>);
}

function ValueBeat() {
  return (
    <section className="beat twocol-beat" data-screen-label="Value">
      <div className="twocol-grid" style={{ textAlign: "left" }}>
        <div className="twocol">
          <h3 style={{ fontFamily: "Poppins", fontWeight: 700, textAlign: "left" }}>Doppio <img src="assets/heart.png" alt="loves" className="inline-heart" /> Google Slides.</h3>
          <p style={{ textAlign: "left", fontFamily: "Poppins" }}>Your live content lives inside your slide, exactly where you put it. No third-party presenting app, no exporting your content. Present normally with your notes and branding. Results appear as the votes come in.</p>
        </div>
        <div className="twocol">
          <h3 style={{ fontFamily: "Poppins", fontWeight: 700, textAlign: "left" }}>Scan once. Vote. Done.</h3>
          <div className="scan-row">
            <p style={{ fontFamily: "Poppins" }}>No apps, no accounts, no fuss. Your audience just points their phone at the screen and they're in.<br />Their phone stays with your presentation. When you move slides, they move too.<br /></p>
            <img src="assets/phone.png" alt="" className="scan-phone" />
          </div>
        </div>
      </div>
    </section>);
}

function PlansBeat() {
  const CURRENCIES = [
  { id: 'US', label: 'USD', flag: 'assets/flag-us.png' },
  { id: 'UK', label: 'GBP', flag: 'assets/flag-uk.png' },
  { id: 'AU', label: 'AUD', flag: 'assets/flag-au.png' }];
  const [cur, setCur] = React.useState('US');
  const plans = [
  { name: 'Free Forever for Early Birds',
    tag:
    <React.Fragment>
        <span style={{ display: 'block', color: 'rgba(43,38,32,0.72)' }}>Our special launch pricing.</span>
        <span style={{ display: 'block', color: 'rgba(43,38,32,0.72)' }}>This won't last forever!</span>
        <span style={{ display: 'block', color: 'rgba(43,38,32,0.72)' }}>For classrooms and small/ medium events.</span>
        Unlimited decks, up to 25 votes per poll.
      </React.Fragment>,
    price: { US: '$0', UK: '£0', AU: 'A$0' }, unit: 'forever', unitStyle: { fontFamily: 'Poppins' },
    billing: { US: 'No card required', UK: 'No card required', AU: 'No card required' },
    cta: 'Install for Slides', kind: 'outline',
    feats: ['Up to 50 voters per poll', 'Multiple choice + word cloud*', 'Multiple poll styles', 'Doppio branding on voting screens', "Participant's devices follow your slides"] },
  { name: 'Pro - Endless Refills', featured: true,
    tag:
    <span style={{ color: '#2b2620b8' }}>
        For bigger events.<br />
        All features of Free + more!<br />
        Unlimited decks and votes.<br />
        All current and future Pro features.
      </span>,
    price: { US: '$12', UK: '£10', AU: 'A$18' }, unit: 'per month',
    billing: { US: 'Billed annually · $15 monthly', UK: 'Billed annually · £12 monthly', AU: 'Billed annually · A$22 monthly' },
    cta: 'Get Started', kind: 'primary',
    feats: ['Unlimited voters per poll', 'All interaction types', 'Custom styles', 'Custom branding', 'Advanced analytics & export options'] }];

  return (
    <section className="beat plans-beat" id="plans" data-screen-label="Plans">
      <h2 style={{ fontFamily: "Poppins", fontWeight: "700" }}><em style={{ fontFamily: "Poppins", fontWeight: "700" }}>Super simple</em> pricing.</h2>
      <p className="deck" style={{ fontFamily: "Poppins", whiteSpace: "nowrap" }}>A ridiculously generous free tier &amp; one simple monthly price.</p>
      <div className="cur-toggle" role="tablist" aria-label="Currency">
        {CURRENCIES.map((c) =>
        <button key={c.id} role="tab" aria-selected={cur === c.id} className={'cur-opt' + (cur === c.id ? ' on' : '')} onClick={() => setCur(c.id)}>
            <img className="cur-flag" src={c.flag} alt="" />{c.label}
          </button>
        )}
      </div>
      <div className="plans-grid">
        {plans.map((p) =>
        <div className={'plan-card' + (p.featured ? ' featured' : '')} key={p.name} style={{ alignItems: "stretch" }}>
            {p.featured && <div className="plan-flag">Most popular</div>}
            <div className="plan-name" style={{ fontFamily: "Poppins", fontWeight: "700" }}>{p.name}</div>
            <p className="plan-tag" style={{ fontFamily: "Poppins" }}>{p.tag}</p>
            <div className="plan-price"><span className="num" style={{ fontFamily: "Poppins", fontWeight: "700" }}>{p.price[cur]}</span><span className="unit" style={p.unitStyle}>{p.unit}</span></div>
            <div className="plan-billing">{p.billing[cur]}</div>
            <a href="#" className={'plan-cta ' + p.kind}>{p.cta}</a>
            <ul className="plan-feats" style={{ fontFamily: "Poppins" }}>{p.feats.map((f) => <li key={f} style={{ fontFamily: "Poppins" }}>{f}</li>)}</ul>
          </div>
        )}
      </div>
    </section>);
}

function TypeThumb({ kind }) {
  if (kind === 'poll') return (
    <div className="tt">
      <div className="tt-k"><i /> live · 214</div>
      <div className="tt-q">What got us here?</div>
      {[['Vision', 62, 'primary'], ['Team', 24, 'blue'], ['Timing', 14, 'amber']].map(([l, w, c]) =>
      <div className="tt-opt" key={l}><span>{l}</span><span className="tt-tk"><i className={'c-' + c} style={{ width: w + '%' }} /></span></div>
      )}
    </div>);

  if (kind === 'cloud') return (
    <div className="tt">
      <div className="tt-k"><i /> live · 188</div>
      <div className="tt-q">One word for Q4</div>
      <div className="tt-cloud">
        <span className="w1">focus</span><span className="w2">ship</span><span className="w2">listen</span>
        <span className="w3">depth</span><span className="w3">simplify</span><span className="w4">trust</span>
      </div>
    </div>);

  if (kind === 'rating') return (
    <div className="tt">
      <div className="tt-k"><i /> live · 96</div>
      <div className="tt-q">How was last quarter?</div>
      <div className="tt-rate"><span className="s on">★</span><span className="s on">★</span><span className="s on">★</span><span className="s on">★</span><span className="s">★</span><b>4.2</b></div>
    </div>);

  if (kind === 'qa') return (
    <div className="tt">
      <div className="tt-k"><i /> live · 11</div>
      <div className="tt-q">Ask me anything</div>
      <div className="tt-qa"><div className="q">When does the new editor ship?</div><div className="q">How do we price for teams?</div></div>
    </div>);

  if (kind === 'open') return (
    <div className="tt">
      <div className="tt-k"><i /> live · 64</div>
      <div className="tt-q">What should we keep?</div>
      <div className="tt-open"><span className="chip on">Shipping Fridays</span><span className="chip">Office hours</span><span className="chip">In-person reviews</span></div>
    </div>);

  return (
    <div className="tt">
      <div className="tt-k"><i /> live · 142</div>
      <div className="tt-q">Our oldest customer?</div>
      <div className="tt-quiz"><div className="a">Acme Co.</div><div className="a right">Cooper &amp; Cabot ✓</div><div className="a">Northwind</div></div>
    </div>);
}

function TypesBeat() {
  const ROWS = [
  { left: { h: 'Serious about your slides', b: 'Doppio never copies, saves, or reads your slide content. Sensitive material stays in Google Drive. Live interactions happen on top of your presentation.' },
    right: { h: 'Next-level interactivity', b: "Participants scan once and stay connected — their device follows your slides. You can even send content directly back to their device, slide-by-slide." } },
  { left: { h: 'Results you can see', b: 'Turn audience moments into useful takeaways. Doppio includes an insights dashboard with every pricing tier.' },
    right: { h: 'Beautiful polling', b: 'Polls look great out-of-the-box and fit right in to your flow. Pro unlocks deeper branding and styling controls.' } },
  { left: { h: 'Built for the main stage', b: 'When everyone votes at once, Doppio keeps up. It can handle hundreds of audience interactions per second, so live results and follow-along devices stay responsive.' },
    right: { h: 'Start simple, grow into more', b: 'Start with live polls. Add word clouds, ratings, open responses, and more as your sessions grow.' } }];

  const Cell = ({ h, b }) =>
  <div className="feat-cell">
      <span style={{ display: 'block', fontFamily: 'Poppins', fontWeight: 600, fontSize: '17px', lineHeight: '1.2', marginBottom: '7px' }}>{h}</span>
      <span style={{ display: 'block', fontWeight: 300, fontSize: '14px', lineHeight: '1.4', color: 'rgb(46,40,34)' }}>{b}</span>
    </div>;

  return (
    <section className="beat types-beat" id="types" data-screen-label="Question types">
      <h2 style={{ fontFamily: "Poppins", fontWeight: "700" }}>Serious. <em style={{ fontFamily: "Poppins", fontWeight: "700" }}>Fun.</em></h2>
      <p className="deck" style={{ fontFamily: "Poppins" }}>Powerful features to bring your presentations to life.</p>
      <div className="feat-grid">
        {ROWS.map((r, i) =>
        <React.Fragment key={i}>
            <Cell {...r.left} />
            <Cell {...r.right} />
          </React.Fragment>
        )}
      </div>
    </section>);
}

function CloserBeat({ onOpen }) {
  return (
    <section className="beat closer-beat" data-screen-label="Closer">
      <h2 style={{ fontFamily: "Poppins", fontWeight: "700" }}>You &amp; your audience <em style={{ fontFamily: "Poppins", fontWeight: "700" }}>side by slide.</em></h2>
      <div className="closer-actions">
        <a href="#" className="btn primary">Install for Slides →</a>
        <button type="button" className="btn outline" onClick={onOpen}>Try the live demo</button>
      </div>
      <div className="closer-foot">Free · No card required · 2-minute install</div>
    </section>);
}

function Footer() {
  const cols = [
  ['Product', ['Pricing', 'Question types', 'Integrations', 'Changelog']],
  ['Company', ['About', 'Customers', 'Blog', 'Careers']],
  ['Support', ['Help center', 'Status', 'Privacy', 'Terms']]];

  return (
    <footer className="ft" data-screen-label="Footer">
      <div className="ft-inner">
        <div className="ft-brand">
          <a href="#" className="wordmark" style={{ fontFamily: "Poppins", fontWeight: "700", fontSize: "20px" }}>Doppio</a>
          <p>Live polling for Google Slides. Bring your audience into the room.</p>
        </div>
        {cols.map(([h, links]) =>
        <div className="ft-col" key={h}>
            <h4>{h}</h4>
            <ul>{links.map((l) => <li key={l}><a href="#">{l}</a></li>)}</ul>
          </div>
        )}
      </div>
      <div className="ft-bottom">
        <span>© 2026 Doppio Labs</span>
        <span style={{ display: 'inline-flex', alignItems: 'center', gap: '7px' }}>
          Made with <img src="assets/heart.png" alt="love" style={{ width: '16px', height: '16px', objectFit: 'contain', verticalAlign: 'middle' }} /> in <img src="assets/flag-uk.png" alt="UK" style={{ width: '20px', height: '20px', objectFit: 'contain', verticalAlign: 'middle', filter: 'drop-shadow(1px 1px 0 rgba(43,38,32,0.2))' }} /> &amp; <img src="assets/flag-au.png" alt="AU" style={{ width: '20px', height: '20px', objectFit: 'contain', verticalAlign: 'middle', filter: 'drop-shadow(1px 1px 0 rgba(43,38,32,0.2))' }} />
        </span>
      </div>
    </footer>);
}

function App() {
  const [open, setOpen] = React.useState(false);
  return (
    <React.Fragment>
      <TopNav />
      <main className="sheet seam-hairline">
        <div className="cream-stage">
          <div className="stage-inner"><ValueBeat /></div>
          <div className="beat-break"></div>
        </div>
        {!false && <div className={"sheet seam-dissolve"}>
          <div className="stage-inner"><PlansBeat /></div>
        </div>}
        {!false && <div className={"sheet seam-dissolve"}>
          <div className="stage-inner"><TypesBeat /><CloserBeat onOpen={() => setOpen(true)} /></div>
        </div>}
      </main>
      <Footer />
    </React.Fragment>);
}