// The 12 Pillars — three layout variants togglable via Tweaks.

function PillarsSection({ layout = 'grid' }) {
  const [active, setActive] = React.useState(0);

  return (
    <section className="pillars" id="framework">
      <RuleHeavy left="N°03" right="THE FRAMEWORK · 12 PILLARS" />
      <div className="pillars-head">
        <h2 className="section-h">The<br/>Framework</h2>
        <p className="section-sub">
          Twelve domains. Each a build site. Each tested by use.
        </p>
      </div>

      {layout === 'grid' && <PillarsGrid active={active} setActive={setActive} />}
      {layout === 'index' && <PillarsIndex active={active} setActive={setActive} />}
      {layout === 'pinned' && <PillarsPinned active={active} setActive={setActive} />}
    </section>
  );
}

function PillarsGrid({ active, setActive }) {
  return (
    <div className="p-grid">
      {PILLARS.map((p, i) => {
        const open = active === i;
        return (
          <button
            key={p.n}
            className={`p-card ${open ? 'p-card--open' : ''}`}
            onClick={() => setActive(open ? -1 : i)}
          >
            <div className="p-card-hd">
              <span className="p-card-n">{p.n}</span>
              <span className="p-card-cross" aria-hidden="true">{open ? '−' : '+'}</span>
            </div>
            <div className="p-card-title">{p.title}</div>
            <div className="p-card-hed">{p.hed}</div>
            <div className="p-card-body">
              <p>{p.body}</p>
            </div>
          </button>
        );
      })}
    </div>
  );
}

function PillarsIndex({ active, setActive }) {
  const p = PILLARS[active >= 0 ? active : 0];
  return (
    <div className="p-index">
      <ol className="p-index-list">
        {PILLARS.map((row, i) => (
          <li
            key={row.n}
            className={`p-index-row ${i === active ? 'p-index-row--on' : ''}`}
            onMouseEnter={() => setActive(i)}
            onClick={() => setActive(i)}
          >
            <span className="p-index-n">{row.n}</span>
            <span className="p-index-t">{row.title}</span>
            <span className="p-index-hed">{row.hed}</span>
            <span className="p-index-arrow" aria-hidden="true">→</span>
          </li>
        ))}
      </ol>
      <aside className="p-index-detail">
        <VideoPlate label={`PILLAR ${p.n} · ${p.title.toUpperCase()} · 0:08`} tone="dark" />
        <div className="p-index-detail-body">
          <span className="p-index-detail-n">{p.n}</span>
          <h3>{p.title}</h3>
          <p className="p-index-detail-hed">{p.hed}</p>
          <p>{p.body}</p>
        </div>
      </aside>
    </div>
  );
}

function PillarsPinned({ active, setActive }) {
  // Click the strip on the left to advance; show one big card at a time.
  const p = PILLARS[active >= 0 ? active : 0];
  const i = active >= 0 ? active : 0;
  const go = (delta) => setActive(Math.max(0, Math.min(11, i + delta)));
  return (
    <div className="p-pinned">
      <div className="p-pinned-rail">
        {PILLARS.map((row, idx) => (
          <button
            key={row.n}
            className={`p-rail-tick ${idx === i ? 'p-rail-tick--on' : ''} ${idx < i ? 'p-rail-tick--past' : ''}`}
            onClick={() => setActive(idx)}
          >
            <span className="p-rail-n">{row.n}</span>
            <span className="p-rail-bar" />
            <span className="p-rail-t">{row.title}</span>
          </button>
        ))}
      </div>
      <div className="p-pinned-stage">
        <VideoPlate label={`PILLAR ${p.n} · ${p.title.toUpperCase()} · 0:08`} tone="dark">
          <div className="p-pinned-overlay">
            <div className="p-pinned-meta">
              <span>{p.n} / 12</span>
              <span>SFMENS · FRAMEWORK</span>
            </div>
            <div className="p-pinned-body">
              <span className="p-pinned-n">{p.n}</span>
              <h3 className="p-pinned-title">{p.title}</h3>
              <p className="p-pinned-hed">{p.hed}</p>
              <p className="p-pinned-text">{p.body}</p>
            </div>
            <div className="p-pinned-nav">
              <button onClick={() => go(-1)} disabled={i === 0}>← Prev</button>
              <span className="p-pinned-prog">
                <span className="p-pinned-prog-fill" style={{ width: `${((i + 1) / 12) * 100}%` }} />
              </span>
              <button onClick={() => go(1)} disabled={i === 11}>Next →</button>
            </div>
          </div>
        </VideoPlate>
      </div>
    </div>
  );
}

Object.assign(window, { PillarsSection });