// Act XII — TIERS + UNIT ECONOMICS
// God-mode redesign 2026-04-28: beat-swap, 4 panels.
// Old version was 5 beats and ~1434px tall — clipped on projector.
//   b0  Three tier cards (General · Pro · Institutional)
//   b1  Unit economics · 5-chip strip
//   b2  Improves with scale · 3-stage trajectory grid
//   b3  Bridge to The Ask

const TIERS_DATA = [
  {
    name: 'General',
    price: '$9.99',
    unit: '/ mo',
    anchor: 'Aunt Augusta · Leningrad · 1960',
    bullets: [
      'Browse by era, style, designer',
      'Standard-res archive access',
      'Basic metadata + citations',
      'Mood-board builder (5 boards)',
    ],
    tint: 'var(--sage)',
  },
  {
    name: 'Pro',
    price: '$14.99',
    unit: '/ mo',
    anchor: 'Lenglen · Patou · 1921',
    bullets: [
      'Hi-res 360° garment scans',
      'Pattern + construction details',
      'Full technical metadata',
      'Unlimited boards · AI styling · annotation',
    ],
    tint: 'var(--gold)',
    featured: true,
  },
  {
    name: 'Institutional',
    price: '$12K — $24K',
    unit: '/ yr',
    anchor: 'FIT · Parsons · SCAD · TJU',
    bullets: [
      'Campus-wide access (students + faculty)',
      'Curriculum-mapped collections',
      'Educator dashboard + analytics',
      'API access for LMS integration',
    ],
    tint: 'var(--parchment)',
  },
];

const TIERS_UNIT_ECON = [
  { k: 'Blended margin',   v: '72%',     foot: '75% inst + 85% student + 65% modules' },
  { k: 'LTV : CAC',        v: '24×',     foot: '$78K LTV ÷ $3,200 CAC · 8× benchmark' },
  { k: 'CAC payback',      v: '8',       unit: 'mo · Y5', foot: 'Down from 18 mo at Y1 · cohort mix matures' },
  { k: 'Y3 ARR',           v: '$3.93M',  foot: '80 institutions · 96K students' },
  { k: 'Breakeven',        v: 'mid-Yr 3', foot: 'Rev covers Y1 opex + amortization' },
];

const TIERS_SCALE_STAGES = [
  { label: 'Y1 · 50 inst',  margin: '68%', ltv: '12×',  payback: '18 mo', amort: '$4,200' },
  { label: 'Y3 · 300 inst', margin: '72%', ltv: '24×',  payback: '12 mo', amort: '$1,400' },
  { label: 'Y5 · 800 inst', margin: '78%', ltv: '38×',  payback: '8 mo',  amort: '$580'   },
];
const TIERS_SCALE_METRICS = [
  { k: 'Blended gross margin',  f: 'margin',  trend: 'up',   delta: '+10 pts'  },
  { k: 'LTV : CAC',             f: 'ltv',     trend: 'up',   delta: '3.2×'     },
  { k: 'CAC payback',           f: 'payback', trend: 'down', delta: '-10 mo'   },
  { k: 'Content amort / asset', f: 'amort',   trend: 'down', delta: '-86%'     },
];

function TiersCardsPanel({ 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' }}>Three tiers · one product</span>
          <div style={{ flex: 1, height: 1, background: 'rgba(143,166,143,0.22)' }} />
          <span className="label-text" style={{ color: 'var(--gold)' }}>
            ◆ Pro is the anchor tier
          </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',
        }}>
          Three doors. <span style={{ color: 'var(--gold)', fontStyle: 'italic' }}>One archive.</span>
        </h3>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 22 }}>
          {TIERS_DATA.map((t) => (
            <div key={t.name} style={{
              position: 'relative',
              padding: '34px 28px 28px',
              background: t.featured ? 'rgba(201,168,76,0.08)' : 'rgba(7,50,66,0.55)',
              border: `1px solid ${t.featured ? 'rgba(201,168,76,0.4)' : 'rgba(143,166,143,0.18)'}`,
              borderTop: `2px solid ${t.tint}`,
            }}>
              {t.featured && (
                <div style={{
                  position: 'absolute', top: -10, right: 22,
                  padding: '3px 12px',
                  background: 'var(--petrol)',
                  border: '1px solid rgba(201,168,76,0.5)',
                }}>
                  <span className="label-text" style={{ color: 'var(--gold)' }}>◆ Anchor tier</span>
                </div>
              )}
              <div className="label-text" style={{ color: 'var(--taupe)' }}>{t.name} subscription</div>
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 10, marginTop: 12 }}>
                <span className="font-display" style={{
                  fontSize: 56, color: 'var(--parchment)',
                  lineHeight: 1, letterSpacing: '-0.02em', fontStyle: 'italic',
                }}>{t.price}</span>
                <span className="font-editorial" style={{ fontSize: 16, color: 'var(--taupe)', fontStyle: 'italic' }}>
                  {t.unit}
                </span>
              </div>
              <div style={{ margin: '22px 0 18px', height: 1, background: 'rgba(143,166,143,0.22)' }} />
              <ul style={{ margin: 0, padding: 0, listStyle: 'none' }}>
                {t.bullets.map((b) => (
                  <li key={b} style={{
                    display: 'flex', gap: 10, padding: '7px 0',
                    fontFamily: 'var(--font-editorial)', fontSize: 14,
                    lineHeight: 1.5, color: 'rgba(240,238,233,0.62)',
                  }}>
                    <span style={{ color: t.tint, fontFamily: 'var(--font-display)' }}>▸</span>
                    <span>{b}</span>
                  </li>
                ))}
              </ul>
              <div style={{ marginTop: 22, paddingTop: 16, borderTop: '1px dotted rgba(143,166,143,0.3)' }}>
                <span className="label-text" style={{ color: 'var(--sage)' }}>Anchor object</span>
                <div className="font-editorial" style={{
                  fontSize: 13, color: 'var(--parchment-dim)', fontStyle: 'italic', marginTop: 6,
                }}>{t.anchor}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

function TiersUnitEconPanel({ 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, textAlign: 'center' }}>
        <span className="label-text" style={{ color: 'var(--sage)', letterSpacing: '0.36em' }}>Unit economics</span>
        <h3 className="font-display" style={{
          fontSize: 'clamp(48px, 5vw, 78px)',
          lineHeight: 0.98, letterSpacing: '-0.02em',
          color: 'var(--parchment)', margin: '14px 0 56px', textTransform: 'uppercase',
        }}>
          One <span style={{ color: 'var(--gold)', fontStyle: 'italic' }}>economic engine</span>.
        </h3>
        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)',
          alignItems: 'flex-start',
        }}>
          {TIERS_UNIT_ECON.map((u, i) => (
            <div key={u.k} style={{
              padding: '0 24px',
              borderRight: i < 4 ? '1px solid rgba(143,166,143,0.18)' : 'none',
            }}>
              <div className="label-text" style={{ color: 'var(--taupe)', marginBottom: 18 }}>{u.k}</div>
              <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'center', gap: 6 }}>
                <span className="font-display" style={{
                  fontSize: 'clamp(48px, 4.6vw, 72px)',
                  color: 'var(--sage)', fontStyle: 'italic', lineHeight: 1,
                }}>{u.v}</span>
                {u.unit && (
                  <span className="font-editorial" style={{ fontSize: 14, color: 'var(--taupe)', fontStyle: 'italic' }}>
                    {u.unit}
                  </span>
                )}
              </div>
              <div className="font-editorial" style={{
                fontSize: 12, color: 'var(--parchment-dim)',
                marginTop: 16, fontStyle: 'italic', lineHeight: 1.5,
              }}>{u.foot}</div>
            </div>
          ))}
        </div>
        <div style={{ marginTop: 56 }} className="label-text">
          <span style={{ color: 'var(--gold)' }}>◆</span>
          <span style={{ color: 'var(--parchment-dim)', marginLeft: 12, letterSpacing: '0.26em' }}>
            24× LTV:CAC drives the ask
          </span>
        </div>
      </div>
    </div>
  );
}

function TiersScalePanel({ 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' }}>Improves with scale</span>
          <div style={{ flex: 1, height: 1, background: 'rgba(143,166,143,0.22)' }} />
          <span className="label-text" style={{ color: 'var(--gold)' }}>
            ◆ content amortization compresses 86%
          </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 28px', textTransform: 'uppercase',
        }}>
          It <span style={{ color: 'var(--gold)', fontStyle: 'italic' }}>compounds</span>.
        </h3>
        <div style={{
          display: 'grid', gridTemplateColumns: '180px repeat(3, 1fr) 110px',
          gap: 0,
          border: '1px solid rgba(143,166,143,0.18)',
          background: 'rgba(7,50,66,0.55)',
        }}>
          {/* header */}
          <div style={{ padding: '14px 16px', borderBottom: '1px solid rgba(143,166,143,0.2)' }}>
            <span className="label-text" style={{ color: 'var(--taupe)' }}>Metric</span>
          </div>
          {TIERS_SCALE_STAGES.map((s, i) => (
            <div key={s.label} style={{
              padding: '14px 16px',
              borderBottom: '1px solid rgba(143,166,143,0.2)',
              borderLeft: '1px solid rgba(143,166,143,0.12)',
              background: i === 2 ? 'rgba(201,168,76,0.06)' : 'transparent',
            }}>
              <span className="label-text" style={{ color: i === 2 ? 'var(--accent-key)' : 'var(--sage)' }}>
                {s.label}
              </span>
            </div>
          ))}
          <div style={{ padding: '14px 16px', borderBottom: '1px solid rgba(143,166,143,0.2)', borderLeft: '1px solid rgba(143,166,143,0.12)' }}>
            <span className="label-text" style={{ color: 'var(--taupe)' }}>Δ Y1→Y5</span>
          </div>
          {TIERS_SCALE_METRICS.map((m, ri) => (
            <React.Fragment key={m.k}>
              <div style={{
                padding: '14px 16px',
                borderBottom: ri < TIERS_SCALE_METRICS.length - 1 ? '1px dotted rgba(143,166,143,0.18)' : 'none',
              }}>
                <span className="font-editorial" style={{ fontSize: 14, color: 'var(--parchment)' }}>{m.k}</span>
              </div>
              {TIERS_SCALE_STAGES.map((s, ci) => (
                <div key={`${m.k}-${s.label}`} style={{
                  padding: '14px 16px',
                  borderLeft: '1px solid rgba(143,166,143,0.12)',
                  borderBottom: ri < TIERS_SCALE_METRICS.length - 1 ? '1px dotted rgba(143,166,143,0.18)' : 'none',
                  background: ci === 2 ? 'rgba(201,168,76,0.06)' : 'transparent',
                }}>
                  <span className="font-display" style={{
                    fontSize: 22, color: ci === 2 ? 'var(--accent-key)' : 'var(--parchment)',
                    lineHeight: 1, letterSpacing: '-0.005em',
                  }}>{s[m.f]}</span>
                </div>
              ))}
              <div style={{
                padding: '14px 16px',
                borderLeft: '1px solid rgba(143,166,143,0.12)',
                borderBottom: ri < TIERS_SCALE_METRICS.length - 1 ? '1px dotted rgba(143,166,143,0.18)' : 'none',
                display: 'flex', alignItems: 'center', gap: 6,
              }}>
                <span style={{
                  color: m.trend === 'up' ? 'var(--accent-key)' : 'var(--sage)',
                  fontFamily: 'var(--font-display)', fontSize: 16,
                }}>{m.trend === 'up' ? '↗' : '↘'}</span>
                <span className="font-editorial" style={{ fontSize: 12, color: 'var(--parchment-dim)', fontStyle: 'italic' }}>
                  {m.delta}
                </span>
              </div>
            </React.Fragment>
          ))}
        </div>
      </div>
    </div>
  );
}

function TiersBridgePanel({ 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>
          Three tiers. <span style={{ color: 'var(--gold)' }}>One unit economics.</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',
        }}>
          Breakeven mid-Year 3 on current plan. The capital that follows buys
          eighteen months to prove the Institutional-to-Pro funnel.
        </p>
        <div style={{ marginTop: 40 }}>
          <span className="label-text" style={{ color: 'var(--gold)' }}>Ahead · the ask</span>
          <div className="font-display" style={{
            fontSize: 28, color: 'var(--parchment)',
            marginTop: 6, letterSpacing: '-0.01em', fontStyle: 'italic',
          }}>
            $1.5M Seed →
          </div>
        </div>
      </div>
    </div>
  );
}

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

  // Bridge panel cut 2026-04-29 — was a "next → $1.5M" pointer; the Scale
  // panel's "It compounds." headline carries the close.
  const visTiers   = panelVis(p0, p1);
  const visEcon    = panelVis(p1, p2);
  const visScale   = p2;  // last panel holds

  return (
    <ActFrame act={act} index={index} total={total} bg="var(--petrol-deep)" bleed>
      <div style={{ position: 'absolute', inset: 0, zIndex: 4 }}>
        <TiersCardsPanel vis={visTiers} />
        <TiersUnitEconPanel vis={visEcon} />
        <TiersScalePanel vis={visScale} />
      </div>
    </ActFrame>
  );
}

function ActMarketTiers({ index, total, act }) {
  return (
    <ScrollBeats beats={3} bg="var(--petrol-deep)">
      <ActMarketTiersInner index={index} total={total} act={act} />
    </ScrollBeats>
  );
}

window.ActMarketTiers = ActMarketTiers;