/* Mesh website — hero with self-running accrual demo panel */

const HERO_ROWS = [
  { vendor: 'Ramp',       src: 'credit-card',      amt: 24500 },
  { vendor: 'AWS',        src: 'cloud',            amt: 88240 },
  { vendor: 'Gusto',      src: 'users',            amt: 16080 },
  { vendor: 'Notion',     src: 'file-text',        amt: 4200  },
  { vendor: 'Slack ↗ IT', src: 'message-square',   amt: 9600  },
];

function fmt(n) { return '$' + n.toLocaleString('en-US'); }

function AccrualPanel() {
  const [count, setCount] = React.useState(0);
  const total = HERO_ROWS.slice(0, count).reduce((s, r) => s + r.amt, 0);

  React.useEffect(() => {
    if (count >= HERO_ROWS.length) {
      const t = setTimeout(() => setCount(0), 2600);
      return () => clearTimeout(t);
    }
    const t = setTimeout(() => setCount(c => c + 1), count === 0 ? 700 : 560);
    return () => clearTimeout(t);
  }, [count]);

  return (
    <div className="panel" style={{ width: '100%' }}>
      <div className="panel-bar">
        <span className="dot" style={{ background: '#E0564A' }}></span>
        <span className="dot" style={{ background: '#E5B23A' }}></span>
        <span className="dot" style={{ background: '#3FB37F' }}></span>
        <span className="panel-title">accrual.mesh · May 2026</span>
        <span style={{ marginLeft: 'auto' }} className="pill">
          <Icon name="loader" className="ic" stroke={2} style={{ width: 13, height: 13 }} />
          {count < HERO_ROWS.length ? 'Reconciling…' : 'Closed'}
        </span>
      </div>
      <div className="panel-body" style={{ minHeight: 286 }}>
        {HERO_ROWS.map((r, i) => (
          <div
            key={r.vendor}
            className="ledger-row"
            style={{
              opacity: i < count ? 1 : 0.25,
              transform: i < count ? 'none' : 'translateY(4px)',
              transition: 'opacity .4s ease, transform .4s ease',
            }}
          >
            <div className="v">
              <span className="src"><Icon name={r.src} className="ic" /></span>
              <div>
                <div style={{ fontWeight: 600, fontSize: 14, color: 'var(--fg-1)' }}>{r.vendor}</div>
                <div style={{ fontSize: 11.5, color: 'var(--fg-4)', fontFamily: 'var(--font-mono)' }}>
                  {r.src.replace('-', ' ')} · ap-inbox
                </div>
              </div>
            </div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
              <span className="amt">{fmt(r.amt)}</span>
              {i < count && (
                <span style={{ display: 'inline-flex', width: 18, height: 18, color: 'var(--success)' }}>
                  <Icon name="check-circle-2" className="ic" />
                </span>
              )}
            </div>
          </div>
        ))}
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', paddingTop: 16, marginTop: 4, borderTop: '2px solid var(--ink-900)' }}>
          <span style={{ fontWeight: 600, fontSize: 14, color: 'var(--fg-1)' }}>Total accrued</span>
          <span className="amt" style={{ fontSize: 18, fontWeight: 600, color: 'var(--brand)' }}>{fmt(total)}</span>
        </div>
      </div>
    </div>
  );
}

/* The right-side hero visual is the isometric, multi-scene HeroScene canvas
   (defined in heroscene.jsx, exposed as window.HeroScene). It replaces the
   old wireframe globe + the static SVG flow with a dynamic, shape-driven
   story that changes scene-to-scene. */

/* Fill-in-the-blank headline word: the blue word reveals letter-by-letter
   left-to-right (each letter fades + rises + de-blurs), holds, softly fades
   out, then the next word reveals the same way. The blank resizes to fit
   each word's width. */
const BLANK_WORDS = ['messy spreadsheets', 'stress', 'late nights', 'guesswork', 'scramble'];

function RevealBlank({ words, holdMs = 2100, stepMs = 50 }) {
  const [wi, setWi] = React.useState(0);
  const [show, setShow] = React.useState(true);
  const [w, setW] = React.useState(null);
  const measureRef = React.useRef(null);
  const reduce = React.useRef(typeof window !== 'undefined' && window.matchMedia
    && window.matchMedia('(prefers-reduced-motion: reduce)').matches).current;

  React.useEffect(() => {
    if (reduce) return;
    if (show) {
      const t = setTimeout(() => setShow(false), holdMs);
      return () => clearTimeout(t);
    }
    const t = setTimeout(() => { setWi(p => (p + 1) % words.length); setShow(true); }, 260);
    return () => clearTimeout(t);
  }, [show, words.length, reduce, holdMs]);

  React.useLayoutEffect(() => {
    if (measureRef.current) setW(measureRef.current.offsetWidth);
  }, [wi]);

  const word = words[wi];
  return (
    <span className="blank" style={{ width: w != null ? w : 'auto', display: 'block' }}>
      <span className="blank-measure" ref={measureRef} aria-hidden="true">{word}</span>
      <span className={'blank-reveal hl' + (show ? '' : ' is-out')} key={wi}>
        {word.split('').map((ch, i) => (
          <span className="rl" key={i} style={{ animationDelay: (i * stepMs) + 'ms' }}>{ch === ' ' ? '\u00a0' : ch}</span>
        ))}
      </span>
    </span>
  );
}

function Hero({ onCta }) {
  return (
    <header className="hero" id="top">
      <div className="wrap hero-grid">
        <div className="hero-left">
          <h1>
            <div className="h1-line">Month-end without the</div>
            <RevealBlank words={BLANK_WORDS} />
          </h1>
          <div className="hero-foot">
            <div className="hero-foot-left">
              <p className="sub">
                Auditable accruals, automatically.
              </p>
              <div className="hero-backed">
                <span className="backed-label">Backed by</span>
                <img className="backed-logo" src={window.__assets("ycombinator.svg")} alt="Y Combinator" width="120" height="60" />
              </div>
            </div>
            <div className="hero-capture">
              <button className="btn btn-primary btn-capture" onClick={onCta}>Get started</button>
            </div>
          </div>
        </div>
        <div className="hero-stage">
          <PlatformUI />
        </div>
      </div>
    </header>
  );
}

Object.assign(window, { Hero, AccrualPanel, fmt, RevealBlank });