/* global React */
const { useState: _mUse } = React;

function Model({ onHover }) {
  const [active, setActive] = _mUse(null);
  const pillars = [
    { id: 'structure', num: '01', title: 'Structure', bullets: ['Long-arc goals', 'Milestones', 'Reverse plan'], hi: 'progress bar' },
    { id: 'habits', num: '02', title: 'Habits', bullets: ['Grid, not streak', 'Hit rate', 'Patterns'], hi: 'habit grid' },
    { id: 'accountability', num: '03', title: 'Accountability', bullets: ['Closed cohort', 'Weekly review', 'Ship or explain'], hi: 'stats row' },
  ];

  return (
    <section className="sec page" id="model">
      <div className="phase-num" style={{ top: '10%', right: '-3%' }}>05</div>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 48 }}>
        <div className="section-label"><span className="dot"></span><span className="mono">Phase / 05 · System</span></div>
        <div className="mono mono-sm">{active ? `↑ HIGHLIGHTING ${active.toUpperCase()}` : 'HOVER A PILLAR'}</div>
      </div>

      <h2 className="display" style={{ fontSize: 'clamp(36px, 4.2vw, 56px)', margin: '0 0 56px', maxWidth: '20ch' }}>
        Three pillars. One <span className="serif-it" style={{ color: 'var(--olive)' }}>system</span>.
      </h2>

      <div className="pillars">
        {pillars.map((p) => (
          <div key={p.id} className={`pillar ${active === p.id ? 'active' : ''}`}
            onMouseEnter={() => { setActive(p.id); onHover && onHover(p.id); }}
            onMouseLeave={() => { setActive(null); onHover && onHover(null); }}
          >
            <div className="p-index"><span className="dotm"></span>{p.num}</div>
            <h3>{p.title}</h3>
            <div className="p-bullets">
              {p.bullets.map((b, i) => <div key={i}>— {b}</div>)}
            </div>
            <div className="mono mono-sm" style={{ marginTop: 22, color: active === p.id ? 'var(--olive)' : 'var(--muted-2)', transition: 'color 200ms' }}>
              ↑ {p.hi}
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

Object.assign(window, { Model });