// Act XIV — THE ASK
// God-mode redesign 2026-04-28: beat-swap, 5 panels.
// Old version was 7 beats and ~1608px tall — clipped on projector.
//   b0  $1.5M punctum (Mood)
//   b1  Allocation · 4-slice breakdown + S&M discipline footer
//   b2  Year-One roadmap · Q1–Q4
//   b3  Target investors · 6 chips
//   b4  Bridge to The Numbers
//
// Marketing detail panel removed (was redundant with Customer V.b acquisition
// channels). Cat 5 marketing-spend discipline carried by Customer + the
// allocation footer here.

const ASK_ALLOCATION = [
  { pct: 40, label: 'Product & Engineering', amount: '$600K', sub: 'Platform build · CDN · mobile-responsive', tint: 'var(--gold)' },
  { pct: 25, label: 'Sales & Marketing',     amount: '$375K', sub: 'Direct sales · NASAD · CRM',              tint: 'var(--sage)' },
  { pct: 20, label: 'Content Partnerships',  amount: '$300K', sub: 'Museum agreements · digitization',        tint: 'var(--rust)' },
  { pct: 15, label: 'Operations & Legal',    amount: '$225K', sub: 'IP counsel · G&A · 18-mo runway',         tint: 'var(--parchment-dim)' },
];

const ASK_ROADMAP = [
  { q: 'Q1 2027', title: 'Foundation', beats: ['Close $1.5M seed', 'Hire CTO + Content Lead', 'Sign 3 museum LOIs', 'FIT pilot'] },
  { q: 'Q2 2027', title: 'Build',      beats: ['MVP beta launch', 'Onboard 3 beta schools', 'Digitize 1,000 assets', 'NASAD'] },
  { q: 'Q3 2027', title: 'Launch',     beats: ['Commercial launch', '3 paying institutions', 'Student tier live', 'BoF feature'] },
  { q: 'Q4 2027', title: 'Scale',      beats: ['5 institutions closed', 'EU outreach', 'Series A prep', 'Pipeline: 5'] },
];

const ASK_INVESTORS = [
  { name: 'Reach Capital',         thesis: 'EdTech VC',                 note: 'Newsela · Handshake',            tint: 'var(--gold)' },
  { name: 'Owl Ventures',          thesis: '$1.2B EdTech specialist',   note: 'Coursera · Duolingo · Quizlet',  tint: 'var(--sage)' },
  { name: 'LVMH Luxury Ventures',  thesis: 'Luxury & fashion CVC',      note: 'Strategic fashion-heritage interest', tint: 'var(--rust)' },
  { name: 'CAA Media Finance',     thesis: 'Arts & culture',            note: 'Culture × education seam',       tint: 'var(--ochre)' },
  { name: 'GSV Ventures',          thesis: 'EdTech & talent',           note: 'ASU+GSV · Coursera',             tint: 'var(--sage-deep)' },
  { name: 'Forerunner Ventures',   thesis: 'Consumer & commerce',       note: 'Glossier · Warby',                tint: 'var(--parchment-dim)' },
];

function AskPunctumPanel({ vis }) {
  const eased = 1 - Math.pow(1 - vis, 3);
  return (
    <div style={{
      position: 'absolute', inset: 0,
      opacity: eased, transform: `translateY(${(1 - eased) * 24}px)`,
      transition: 'opacity 0.7s ease, transform 0.7s ease',
      pointerEvents: vis > 0.05 ? 'auto' : 'none',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      padding: '0 80px',
    }}>
      <div style={{ textAlign: 'center', maxWidth: 1100 }}>
        <span className="label-text" style={{
          color: 'var(--sage)', fontSize: 11, letterSpacing: '0.36em',
        }}>The Ask</span>
        <div className="font-display" style={{
          fontSize: 'clamp(120px, 14vw, 220px)',
          lineHeight: 0.9, letterSpacing: '-0.04em',
          color: 'var(--gold)', fontStyle: 'italic',
          margin: '32px 0 18px',
        }}>$1.5M</div>
        <div className="font-display" style={{
          fontSize: 'clamp(28px, 3vw, 44px)',
          lineHeight: 1.1, letterSpacing: '-0.01em',
          color: 'var(--parchment)', fontStyle: 'italic',
        }}>Seed · 18-month runway.</div>
        <p className="font-editorial" style={{
          marginTop: 32, fontSize: 18, lineHeight: 1.55,
          color: 'var(--parchment-dim)', maxWidth: 720, margin: '32px auto 0',
          fontStyle: 'italic', textWrap: 'pretty',
        }}>
          To MVP. To FIT pilot conversion. To five paying institutions. <br />
          Then a $3M Series A in Year 2.
        </p>
      </div>
    </div>
  );
}

function AskAllocationPanel({ vis }) {
  const eased = 1 - Math.pow(1 - vis, 3);
  return (
    <div style={{
      position: 'absolute', inset: 0,
      opacity: eased, transform: `translateY(${(1 - eased) * 24}px)`,
      transition: 'opacity 0.7s ease, transform 0.7s ease',
      pointerEvents: vis > 0.05 ? 'auto' : 'none',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      padding: '0 80px',
    }}>
      <div style={{ width: '100%', maxWidth: 1480 }}>
        <div style={{ display: 'flex', alignItems: 'baseline', gap: 16, marginBottom: 18 }}>
          <span className="label-text" style={{ color: 'var(--sage)', letterSpacing: '0.32em' }}>Allocation · $1.5M seed</span>
          <div style={{ flex: 1, height: 1, background: 'rgba(143,166,143,0.25)' }} />
          <span className="label-text" style={{ color: 'var(--gold)' }}>
            ◆ 18-month runway · breakeven mid-Yr 3
          </span>
        </div>
        <h3 className="font-display" style={{
          fontSize: 'clamp(40px, 4.4vw, 64px)',
          lineHeight: 0.98, letterSpacing: '-0.02em',
          color: 'var(--parchment)', margin: '0 0 36px', textTransform: 'uppercase',
        }}>
          Where the <span style={{ color: 'var(--gold)', fontStyle: 'italic' }}>capital</span> goes.
        </h3>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 18 }}>
          {ASK_ALLOCATION.map((s) => (
            <div key={s.label} style={{
              padding: '28px 24px',
              borderLeft: `3px solid ${s.tint}`,
              background: 'rgba(7,50,66,0.55)',
            }}>
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 10 }}>
                <span className="font-display" style={{
                  fontSize: 64, color: s.tint, lineHeight: 1,
                  letterSpacing: '-0.02em', fontStyle: 'italic',
                }}>{s.pct}<span style={{ fontSize: 28 }}>%</span></span>
                <span className="font-editorial" style={{
                  fontSize: 17, color: 'var(--parchment)', fontStyle: 'italic',
                }}>{s.amount}</span>
              </div>
              <div className="font-display" style={{
                fontSize: 17, color: 'var(--parchment)',
                marginTop: 14, textTransform: 'uppercase', letterSpacing: '0.005em',
              }}>{s.label}</div>
              <div className="font-editorial" style={{
                fontSize: 13, color: 'rgba(240,238,233,0.72)',
                marginTop: 8, lineHeight: 1.5, fontStyle: 'italic',
              }}>{s.sub}</div>
            </div>
          ))}
        </div>
        <div style={{
          marginTop: 22, padding: '14px 22px',
          background: 'rgba(143,166,143,0.05)',
          borderLeft: '2px solid var(--sage)',
          display: 'flex', alignItems: 'center', gap: 24,
        }}>
          <span className="label-text" style={{ color: 'var(--sage)' }}>Spend discipline</span>
          <span className="font-editorial" style={{
            fontSize: 14, color: 'var(--parchment-dim)', fontStyle: 'italic',
          }}>
            S&amp;M · $375K over 18 months · blended CAC $1,840 · 24× LTV:CAC carries forward
          </span>
        </div>
      </div>
    </div>
  );
}

function AskRoadmapPanel({ vis }) {
  const eased = 1 - Math.pow(1 - vis, 3);
  return (
    <div style={{
      position: 'absolute', inset: 0,
      opacity: eased, transform: `translateY(${(1 - eased) * 24}px)`,
      transition: 'opacity 0.7s ease, transform 0.7s ease',
      pointerEvents: vis > 0.05 ? 'auto' : 'none',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      padding: '0 80px',
    }}>
      <div style={{ width: '100%', maxWidth: 1480 }}>
        <div style={{ display: 'flex', alignItems: 'baseline', gap: 16, marginBottom: 18 }}>
          <span className="label-text" style={{ color: 'var(--sage)', letterSpacing: '0.32em' }}>Year One Roadmap · 2027</span>
          <div style={{ flex: 1, height: 1, background: 'rgba(201,168,76,0.25)' }} />
          <span className="label-text" style={{ color: 'var(--gold)' }}>◆ breakeven mid-Yr 3</span>
        </div>
        <h3 className="font-display" style={{
          fontSize: 'clamp(40px, 4.4vw, 64px)',
          lineHeight: 0.98, letterSpacing: '-0.02em',
          color: 'var(--parchment)', margin: '0 0 36px', textTransform: 'uppercase',
        }}>
          Twelve months. <span style={{ color: 'var(--gold)', fontStyle: 'italic' }}>Four moves.</span>
        </h3>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 22 }}>
          {ASK_ROADMAP.map((q) => (
            <div key={q.q} style={{
              position: 'relative',
              padding: '32px 22px 26px',
              borderTop: '2px solid rgba(201,168,76,0.35)',
            }}>
              <span style={{
                position: 'absolute', top: -8, left: 0,
                width: 14, height: 14, borderRadius: '50%',
                background: 'var(--gold)',
                boxShadow: '0 0 16px rgba(201,168,76,0.6)',
              }} />
              <div className="label-text" style={{ color: 'var(--taupe)' }}>{q.q}</div>
              <div className="font-display" style={{
                fontSize: 28, color: 'var(--parchment)',
                marginTop: 10, letterSpacing: '-0.01em', textTransform: 'uppercase',
              }}>{q.title}</div>
              <ul style={{ margin: '18px 0 0', padding: 0, listStyle: 'none' }}>
                {q.beats.map((b) => (
                  <li key={b} style={{
                    display: 'flex', gap: 10, padding: '5px 0',
                    fontFamily: 'var(--font-editorial)', fontSize: 14,
                    color: 'rgba(255,255,255,0.82)', lineHeight: 1.5,
                  }}>
                    <span style={{ color: 'var(--sage)', fontFamily: 'var(--font-display)' }}>·</span>
                    <span>{b}</span>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

function AskInvestorsPanel({ vis }) {
  const eased = 1 - Math.pow(1 - vis, 3);
  return (
    <div style={{
      position: 'absolute', inset: 0,
      opacity: eased, transform: `translateY(${(1 - eased) * 24}px)`,
      transition: 'opacity 0.7s ease, transform 0.7s ease',
      pointerEvents: vis > 0.05 ? 'auto' : 'none',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      padding: '0 80px',
    }}>
      <div style={{ width: '100%', maxWidth: 1480 }}>
        <div style={{ display: 'flex', alignItems: 'baseline', gap: 16, marginBottom: 18 }}>
          <span className="label-text" style={{ color: 'var(--gold)', letterSpacing: '0.32em' }}>Target investors</span>
          <div style={{ flex: 1, height: 1, background: 'rgba(143,166,143,0.22)' }} />
          <span className="label-text" style={{ color: 'var(--taupe)' }}>Six funds · staged outreach</span>
        </div>
        <h3 className="font-display" style={{
          fontSize: 'clamp(40px, 4.4vw, 64px)',
          lineHeight: 0.98, letterSpacing: '-0.02em',
          color: 'var(--parchment)', margin: '0 0 32px', textTransform: 'uppercase',
        }}>
          Funds whose <span style={{ color: 'var(--gold)', fontStyle: 'italic' }}>thesis</span> is ours.
        </h3>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 18 }}>
          {ASK_INVESTORS.map((inv) => (
            <div key={inv.name} style={{
              padding: '22px 22px 20px',
              background: 'rgba(7,50,66,0.55)',
              borderTop: `2px solid ${inv.tint}`,
            }}>
              <div className="font-display" style={{
                fontSize: 22, lineHeight: 1.1, letterSpacing: '-0.005em',
                color: 'var(--parchment)', textTransform: 'uppercase',
              }}>{inv.name}</div>
              <div className="font-editorial" style={{
                fontSize: 14, color: inv.tint, marginTop: 8,
                fontStyle: 'italic',
              }}>{inv.thesis}</div>
              <div className="font-editorial" style={{
                fontSize: 13, color: 'rgba(240,238,233,0.7)',
                marginTop: 12, lineHeight: 1.5, textWrap: 'pretty',
              }}>{inv.note}</div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

function AskBridgePanel({ vis }) {
  const eased = 1 - Math.pow(1 - vis, 3);
  return (
    <div style={{
      position: 'absolute', inset: 0,
      opacity: eased, transform: `translateY(${(1 - eased) * 24}px)`,
      transition: 'opacity 0.7s ease, transform 0.7s ease',
      pointerEvents: vis > 0.05 ? 'auto' : 'none',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      padding: '0 80px',
    }}>
      <div style={{ width: '100%', maxWidth: 1100, textAlign: 'center' }}>
        <span className="label-text" style={{
          color: 'var(--sage)', fontSize: 11, letterSpacing: '0.36em',
        }}>The bridge</span>
        <PullQuote align="center" size="clamp(44px, 5vw, 76px)" italic>
          The ask is the beginning. <span style={{ color: 'var(--gold)' }}>Not the end.</span>
        </PullQuote>
        <p className="font-editorial" style={{
          marginTop: 28, fontSize: 18, lineHeight: 1.55,
          color: 'var(--parchment-dim)', maxWidth: 760, margin: '28px auto 0',
          fontStyle: 'italic', textWrap: 'pretty',
        }}>
          Eighteen months to prove the motion. Five institutions to anchor the floor.
          Five museum partnerships to seed the archive.
        </p>
        <div style={{ marginTop: 40 }}>
          <span className="label-text" style={{ color: 'var(--gold)' }}>Next · the numbers</span>
          <div className="font-display" style={{
            fontSize: 28, color: 'var(--parchment)',
            marginTop: 6, letterSpacing: '-0.01em', fontStyle: 'italic',
          }}>
            5-yr P&amp;L · risks →
          </div>
        </div>
      </div>
    </div>
  );
}

function ActAskInner({ index, total, act }) {
  const p0 = useBeatProgress(0);
  const p1 = useBeatProgress(1);
  const p2 = useBeatProgress(2);
  const p3 = useBeatProgress(3);

  // Bridge panel cut 2026-04-29 — Investors panel ("Funds whose thesis is
  // ours") is a strong closer; the bridge's "ask is the beginning" line
  // didn't add new info.
  const visAsk         = panelVis(p0, p1);
  const visAllocation  = panelVis(p1, p2);
  const visRoadmap     = panelVis(p2, p3);
  const visInvestors   = p3;  // last panel holds

  return (
    <ActFrame act={act} index={index} total={total} bg="var(--petrol-deep)" bleed>
      <div style={{ position: 'absolute', inset: 0, zIndex: 4 }}>
        <AskPunctumPanel vis={visAsk} />
        <AskAllocationPanel vis={visAllocation} />
        <AskRoadmapPanel vis={visRoadmap} />
        <AskInvestorsPanel vis={visInvestors} />
      </div>
    </ActFrame>
  );
}

function ActAsk({ index, total, act }) {
  return (
    <ScrollBeats beats={4} bg="var(--petrol-deep)">
      <ActAskInner index={index} total={total} act={act} />
    </ScrollBeats>
  );
}

window.ActAsk = ActAsk;