/* global React, useInViewProgress, clamp, lerp, easeOut */
const { useRef: _hRef } = React;

function HeroDash({ p, highlight }) {
  const progressPct = Math.round(lerp(12, 63, easeOut(clamp(p / 0.85, 0, 1))));
  const cellsRevealed = Math.floor(lerp(3, 11, easeOut(clamp(p / 0.9, 0, 1))));

  const habitRowData = [
    { kind: 'on' }, { kind: 'on' }, { kind: 'on' }, { kind: 'miss' },
    { kind: 'on' }, { kind: 'on' }, { kind: 'on' }, { kind: 'on' },
    { kind: 'on' }, { kind: 'on' }, { kind: 'on' }, { kind: 'now' },
    { kind: 'future' }, { kind: 'future' }, { kind: 'future' },
  ];

  const elapsed = Math.round(lerp(6, 11, easeOut(clamp(p / 0.9, 0, 1))));
  const completed = Math.round(lerp(18, 29, easeOut(clamp(p / 0.9, 0, 1))));
  const streak = Math.round(lerp(0, 2, easeOut(clamp(p / 0.9, 0, 1))));

  return (
    <div className="dash" style={{ transform: `translateY(${lerp(30, 0, easeOut(clamp(p*1.4,0,1)))}px)`, opacity: clamp(p*2.2, 0.3, 1) }}>
      <div className="dash-toolbar">
        <div className="dash-dots"><span/><span/><span/></div>
        <div className="mono mono-sm">beboosted.app · fall '26</div>
        <div className="mono mono-sm" style={{ color: 'var(--olive)' }}>● LIVE</div>
      </div>

      <div style={{ padding: '18px 22px', borderBottom: '1px solid var(--line)', display: 'grid', gridTemplateColumns: '1fr auto', alignItems: 'end', gap: 24, background: 'var(--surface)'}}>
        <div>
          <div className="mono mono-sm" style={{ marginBottom: 6 }}>LONG-ARC · THESIS DRAFT</div>
          <div style={{ fontFamily: 'Inter Tight', fontWeight: 600, fontSize: 18, letterSpacing: '-0.02em' }}>Chapter 1 — final submission</div>
        </div>
        <div style={{ textAlign: 'right' }}>
          <div className="mono mono-sm">Progress</div>
          <div style={{ fontFamily: 'Inter Tight', fontWeight: 700, fontSize: 28, letterSpacing: '-0.02em', color: 'var(--olive)' }}>{progressPct}%</div>
        </div>
      </div>

      <div style={{ padding: '14px 22px', borderBottom: '1px solid var(--line)', background: highlight === 'structure' ? 'rgba(203,255,61,0.10)' : 'transparent', transition: 'background 250ms' }}>
        <div className="progress lg">
          <div className="fill" style={{ width: `${progressPct}%` }}></div>
        </div>
      </div>

      <div style={{ padding: '18px 22px', borderBottom: '1px solid var(--line)', background: highlight === 'habits' ? 'rgba(203,255,61,0.10)' : 'transparent', transition: 'background 250ms' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 10 }}>
          <div className="mono mono-sm">HABITS — 15 WEEKS</div>
          <div className="mono mono-sm">Hit rate <span style={{ color: 'var(--olive)' }}>{Math.round(lerp(60, 88, easeOut(clamp(p/0.9,0,1))))}%</span></div>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(15, 1fr)', gap: 4 }}>
          {habitRowData.map((c, i) => {
            const shown = i <= cellsRevealed;
            let cls = 'hcell';
            if (!shown) cls += ' future';
            else if (c.kind === 'on') cls += ' on';
            else if (c.kind === 'miss') cls += ' miss';
            else if (c.kind === 'now') cls += ' on now';
            else if (c.kind === 'future') cls += ' future';
            return (
              <div key={i} className={cls} style={{ aspectRatio: '1 / 1.1', transitionDelay: `${i*20}ms` }}>
                <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 8.5, color: shown ? 'var(--olive)' : 'var(--muted)', padding: 2 }}>W{i+1}</div>
              </div>
            );
          })}
        </div>
      </div>

      <div className="stats" style={{ border: 'none', background: highlight === 'accountability' ? 'rgba(203,255,61,0.10)' : 'transparent', transition: 'background 250ms' }}>
        <div className="stat"><div className="k">Elapsed</div><div className="v">{elapsed}<span className="u">wk</span></div></div>
        <div className="stat accent"><div className="k">Done</div><div className="v">{completed}</div></div>
        <div className="stat warn"><div className="k">Missed</div><div className="v">1</div></div>
        <div className="stat"><div className="k">Streak</div><div className="v">{streak}<span className="u">wk</span></div></div>
      </div>
    </div>
  );
}

function Hero({ tweaks, highlight }) {
  const ref = _hRef(null);
  const p = useInViewProgress(ref, { enterAt: 0.9, exitAt: -0.2 });
  const motion = (tweaks && tweaks.motionIntensity) || 1;
  const adjP = clamp(p * motion, 0, 1);

  return (
    <section className="sec hero page" id="hero" ref={ref} style={{ borderTop: 'none' }}>
      <div className="ghost-bg" aria-hidden="true">
        <div className="ghost-word" style={{ top: '8%', left: '-4%', transform: `translateX(${-p*60}px)` }}>semester</div>
        <div className="ghost-word" style={{ top: '55%', left: '30%', transform: `translateX(${p*80}px)`, fontSize: '18vw' }}>compound</div>
      </div>
      <div className="phase-num" style={{ top: '40%', right: '-4%', transform: `translateY(${-p*120}px)` }}>01</div>

      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 28, position: 'relative', zIndex: 1 }}>
        <div className="section-label">
          <span className="dot"></span>
          <span className="mono">Phase / 01 · Signature</span>
        </div>
        <div className="week-counter"><span className="n" style={{ fontSize: 18, color: 'var(--olive)' }}>11</span> / 15</div>
      </div>

      <div className="hero-grid" style={{ position: 'relative', zIndex: 1 }}>
        <div>
          <h1 className="display hero-title">
            Structure<br/>
            what <span className="serif-it" style={{ color: 'var(--olive)' }}>compounds</span>.
          </h1>
          <div style={{ marginTop: 32, display: 'flex', flexDirection: 'column', gap: 4, borderLeft: '2px solid var(--accent)', paddingLeft: 18 }}>
            <div style={{ fontFamily: 'Inter Tight', fontWeight: 600, fontSize: 22, letterSpacing: '-0.02em' }}>Built for semesters. Not weeks.</div>
            <div style={{ fontFamily: 'Inter Tight', fontWeight: 500, fontSize: 19, letterSpacing: '-0.015em', color: 'var(--ink-2)' }}>One scroll. One semester.</div>
            <div style={{ fontFamily: 'Inter Tight', fontWeight: 500, fontSize: 19, letterSpacing: '-0.015em', color: 'var(--ink-2)' }}>Consistency, witnessed.</div>
          </div>
          <div className="hero-meta">
            <span className="pill">v0.4 · Active build</span>
            <span className="pill accent">● Early access · cohort 42</span>
          </div>
        </div>
        <div style={{ position: 'sticky', top: 90 }}>
          <HeroDash p={adjP} highlight={highlight} />
          <div style={{ marginTop: 10, display: 'flex', justifyContent: 'space-between' }}>
            <div className="mono mono-sm">Maya R. · Fall '26 · Week 11</div>
            <div className="mono mono-sm">↓ Scroll</div>
          </div>
        </div>
      </div>

      {/* Unfolding semester ribbon */}
      <div className="hero-ribbon">
        <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 12 }}>
          <div className="mono mono-sm">FALL 2026 · 15 WEEKS · UNFOLDING</div>
          <div className="mono mono-sm" style={{ color: 'var(--olive)' }}>W{String(Math.max(1, Math.round(adjP*11))).padStart(2,'0')} / 15</div>
        </div>
        <div className="hero-ribbon-bar">
          <div className="hero-ribbon-fill" style={{ width: `${(adjP * 11/15) * 100}%` }} />
        </div>
        <div className="hero-ribbon-dots">
          {Array.from({ length: 15 }, (_, i) => {
            const reveal = adjP * 15;
            const cls = i + 1 < reveal ? 'hit' : i + 1 === Math.round(reveal) ? 'now' : '';
            return <div key={i} className={`hero-ribbon-dot ${cls}`} style={{ transitionDelay: `${i*30}ms` }} />;
          })}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Hero, HeroDash });