// sw-about.jsx — the refined About page (6 Nov 2026, approved by Krish the same day).
// Stage 1 of the site-wide consistency work: the copy is unchanged (pages-copy.js), only the presentation differs.
// Nothing here touches any other page. Remove this file and its script tag in index.html to go back to the original.

const aCream = TOK.cream;

// ── The corporate years: the photo runs to the right-hand edge, mirroring "How it began" ──
// so the story zigzags (edge left, edge right, inset, landscape) instead of repeating one template
function BleedRight({ s }) {
  const g = GROUNDS[s.bg] || GROUNDS.black;
  return (
    <section className="g2 edge-photo-r" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', background: g.bg }}>
      <div style={{ alignSelf: 'center', justifySelf: 'end', maxWidth: 660, width: '100%', padding: 'clamp(48px,6vw,96px) clamp(24px,6vw,96px) clamp(48px,6vw,96px) clamp(24px, 8vw, 120px)' }}>
        <Heading s={s}>{s.heading}</Heading>
        <Paras s={s} paras={s.paras} />
      </div>
      <GreenPhoto warm src={s.image} style={{ height: 'clamp(360px, 46vw, 680px)' }} imgStyle={{ objectPosition: s.imagePos || 'center' }} />
    </section>
  );
}

// ── What I believe, then the Manifesto as the page's philosophical heart ──
// The prose stays readable at the shared measure; the manifesto lines get large serif type and room to breathe,
// centred over the wheel, which stays still with no travelling ember (Krish, 6 Nov 2026). No rules or numbers cut across it.
function BeliefAndManifesto({ s }) {
  return (
    <section className="pad" style={{ position: 'relative', overflow: 'hidden', background: C.parchment, padding: 'clamp(96px, 10vw, 136px) 0' }}>
      <div style={{ ...maxW, position: 'relative' }}>
        <div className="g2" style={{ display: 'grid', gridTemplateColumns: '4fr 8fr', gap: 'clamp(32px,5vw,80px)', alignItems: 'start' }}>
          <SectionHeading color={C.ink}>{s.heading}</SectionHeading>
          <div>
            {s.paras.map((p, i) => <p key={i} style={{ fontSize: 18, lineHeight: 1.8, color: C.ink, fontFamily: T.font, marginBottom: 20, maxWidth: '34em' }}>{p}</p>)}
          </div>
        </div>
      </div>
      <div style={{ position: 'relative', marginTop: 'clamp(72px, 9vw, 120px)', padding: 'clamp(48px, 6vw, 88px) 0' }}>
        <div className="wheel-still" aria-hidden="true" style={{ position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%,-50%)', pointerEvents: 'none' }}>
          <Wheel size={760} opacity={0.12} color={C.ink} />
        </div>
        <div style={{ ...maxW, position: 'relative', textAlign: 'center' }}>
          <SectionLabel color={C.emberDeep}>Manifesto</SectionLabel>
          <ol style={{ listStyle: 'none', marginTop: 28 }}>
            {MANIFESTO.map(l => (
              <li key={l} style={{ fontFamily: T.serif, fontStyle: T.serifStyle, fontSize: 'clamp(28px, 3.05vw, 40px)', lineHeight: 1.25, color: C.ink, padding: 'clamp(6px, 0.9vw, 12px) 0', maxWidth: 900, margin: '0 auto', textWrap: 'balance' }}>{l}</li>
            ))}
          </ol>
        </div>
      </div>
    </section>
  );
}

// ── The short version: the two worlds as matching columns of rows, both left-aligned, meeting at the logomark ──
// Same row convention as the gates and the six changes: hairline dividers, comfortable type, nothing right-aligned
function WorldsRows({ s }) {
  const sides = ['boardroom', 'grove'].map(k => ({ ...s.worlds[k], rows: s.worlds[k].rows.filter(r => !(s.drop || []).includes(r)).concat((s.extra && s.extra[k]) || []) }));
  const side = (w) => (
    <div>
      <span style={{ display: 'block', fontFamily: T.serif, fontStyle: T.serifStyle, fontSize: 22, color: C.ember, marginBottom: 12 }}>{w.title}</span>
      <p style={{ fontSize: 'clamp(26px, 2.6vw, 34px)', fontWeight: 300, lineHeight: 1.15, color: C.white, fontFamily: T.font }}>{w.lead}</p>
      <p style={{ fontSize: 17, color: aCream, fontFamily: T.font, marginTop: 8, marginBottom: 24 }}>{w.sub}</p>
      <ul style={{ listStyle: 'none', borderTop: `1px solid ${C.line}` }}>
        {w.rows.map(r => <li key={r} style={{ fontSize: 17, lineHeight: 1.6, color: C.grey4, fontFamily: T.font, padding: '16px 0', borderBottom: `1px solid ${C.line}` }}>{r}</li>)}
      </ul>
    </div>
  );
  return (
    <Section s={s} style={{ padding: 'clamp(88px,9vw,120px) 0' }}>
      <Heading s={s}>{s.heading}</Heading>
      <div className="worlds" style={{ display: 'grid', gridTemplateColumns: '1fr auto 1fr', gap: 'clamp(28px,4vw,56px)', marginTop: 24, alignItems: 'stretch' }}>
        {side(sides[0])}
        <div className="worlds-meet" aria-hidden="true" style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 16 }}>
          <div className="worlds-line" style={{ flex: 1, width: 1, background: C.line }} />
          <Logomark size={40} color={C.ember} />
          <div className="worlds-line" style={{ flex: 1, width: 1, background: C.line }} />
        </div>
        {side(sides[1])}
      </div>
    </Section>
  );
}

const ABOUT_PROPOSED = {
  text: ({ s }) => {
    if (s.heading === 'The corporate years') return <BleedRight s={s} />;
    if (s.heading === 'What I believe') return <BeliefAndManifesto s={s} />;
    return KIT.text({ s });
  },
  credentials: ({ s }) => <WorldsRows s={s} />,
};

// About draws with these layouts (approved by Krish, 6 Nov 2026); every other page passes straight through
const PrevPageView = window.PageView;
function AboutPageView({ id, navigate }) {
  if (id !== 'about') return <PrevPageView id={id} navigate={navigate} />;
  return window.PAGES.about.sections.map((s, i) => {
    const Comp = ABOUT_PROPOSED[s.type] || KIT[s.type];
    return Comp ? <Comp key={i} s={s} navigate={navigate} /> : null;
  });
}
window.PageView = AboutPageView;
PageView = AboutPageView;