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

// Horizontal semester ticker — milestones as nodes on a timeline
function Timeline() {
  const ref = _tmRef(null);
  const p = useInViewProgress(ref, { enterAt: 0.85, exitAt: 0.15 });
  const t = easeOut(clamp(p * 1.1, 0, 1));

  const weeks = 15;
  const milestones = [
    { w: 1, label: 'Arc draft', kind: 'done' },
    { w: 3, label: 'Lit review', kind: 'done' },
    { w: 6, label: 'Ch. 1 outline', kind: 'done' },
    { w: 8, label: 'Training block', kind: 'done' },
    { w: 11, label: 'Ch. 1 draft', kind: 'now' },
    { w: 13, label: 'Lab apps due', kind: 'future' },
    { w: 15, label: 'Finals', kind: 'future' },
  ];

  return (
    <section className="sec page" id="macro" ref={ref}>
      <div className="phase-num" style={{ top: '8%', left: '-3%', transform: `translateY(${p*60}px)` }}>04</div>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 48 }}>
        <div className="section-label">
          <span className="dot"></span>
          <span className="mono">Phase / 03 · Macro</span>
        </div>
        <div className="mono mono-sm">SEMESTER VIEW · FALL 2026</div>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 48, marginBottom: 56, alignItems: 'end' }}>
        <h2 className="display" style={{ fontSize: 'clamp(36px, 4.5vw, 64px)', margin: 0, lineHeight: 1.02 }}>
          Zoom <span className="serif-it" style={{ color: 'var(--olive)' }}>out</span>.<br/>
          Plan the arc.
        </h2>
        <div style={{ justifySelf: 'end', display: 'flex', gap: 28 }}>
          <div className="mini-stat"><span className="mono mono-sm">Weeks</span><span className="mini-v">15</span></div>
          <div className="mini-stat"><span className="mono mono-sm">Milestones</span><span className="mini-v" style={{ color: 'var(--olive)' }}>{milestones.length}</span></div>
          <div className="mini-stat"><span className="mono mono-sm">On track</span><span className="mini-v" style={{ color: 'var(--olive)' }}>100%</span></div>
        </div>
      </div>

      <div className="timeline-stage">
        {/* week ticks */}
        <div className="tl-axis" style={{ display: 'grid', gridTemplateColumns: 'repeat(15, 1fr)', alignItems: 'end', height: 80, marginBottom: 4 }}>
          {Array.from({ length: weeks }, (_, i) => (
            <div key={i} className="tl-tick" style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8 }}>
              <div className="tl-bar" style={{ width: 2, height: 60, transformOrigin: 'bottom', transition: 'transform 500ms, background 500ms', transform: `scaleY(${i+1 <= Math.round(t*11) ? 1 : 0.3})`, background: i+1 <= Math.round(t*11) ? 'var(--accent)' : 'var(--line-strong)' }}/>
              <div className="tl-wk">W{String(i+1).padStart(2,'0')}</div>
            </div>
          ))}
        </div>

        {/* connecting line */}
        <div className="tl-line">
          <div className="tl-line-fill" style={{ width: `${t * (11/15) * 100}%` }} />
        </div>

        {/* milestones */}
        <div className="tl-milestones">
          {milestones.map((m, i) => {
            const left = ((m.w - 0.5) / weeks) * 100;
            const reveal = clamp(t * 1.3 - i * 0.08, 0, 1);
            return (
              <div key={i} className={`tl-milestone ${m.kind}`} style={{ left: `${left}%`, opacity: reveal, transform: `translateX(-50%) translateY(${(1-reveal)*8}px)` }}>
                <div className="tl-dot" />
                <div className="tl-ms-label">
                  <div className="mono mono-sm">W{String(m.w).padStart(2,'0')}</div>
                  <div className="tl-ms-title">{m.label}</div>
                </div>
              </div>
            );
          })}
        </div>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', marginTop: 48, borderTop: '1px solid var(--line)' }}>
        {[
          ['Week unit', '7 days'],
          ['Arc unit', '15 weeks'],
          ['Cadence', 'Sun 18:00'],
          ['Reveal', 'Public to cohort'],
        ].map(([k, v], i) => (
          <div key={i} style={{ padding: '20px 24px 0', borderRight: i < 3 ? '1px solid var(--line)' : 'none' }}>
            <div className="mono mono-sm" style={{ marginBottom: 8 }}>{k}</div>
            <div style={{ fontFamily: 'Inter Tight', fontWeight: 600, fontSize: 20, letterSpacing: '-0.02em' }}>{v}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

Object.assign(window, { Timeline });