// Sister content blocks for the Bureau hub.
// Manifesto excerpt · Founder rail · Dispatches strip.
//
// All consume window.SUEDE_DATA. Tokens passed in from the host so they
// stay in lockstep with light/dark mode + accent tweak.

const BureauContent = (() => {
  const FONTS = {
    mono:  '"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace',
    serif: '"Cormorant Garamond", "EB Garamond", Georgia, serif',
    sans:  '"Inter Tight", "Helvetica Neue", Arial, sans-serif',
  };

  // ─── Manifesto excerpt ─────────────────────────────────────
  function Manifesto({ t, useSerif = true }) {
    const data = window.SUEDE_DATA.manifesto;
    const displayFont = useSerif ? FONTS.serif : FONTS.sans;
    return (
      <section style={{
        padding: '52px 24px 56px', borderTop: `1px solid ${t.rule}`, borderBottom: `1px solid ${t.rule}`,
        background: t.bgPaper, position:'relative',
      }}>
        {/* big quote marks */}
        <div aria-hidden="true" style={{
          position:'absolute', top: 14, left: 36, fontFamily: FONTS.serif, fontStyle:'italic',
          fontSize: 200, lineHeight: 0.7, color: t.rule, pointerEvents:'none',
        }}>“</div>
        <div data-bureau-manifesto style={{ display:'grid', gridTemplateColumns:'1fr 280px', gap: 56, alignItems:'flex-start', position:'relative' }}>
          <div>
            <div style={{ fontFamily: FONTS.mono, fontSize: 10, letterSpacing:'0.28em', color: t.fgSoft, marginBottom: 22 }}>
              {data.eyebrow}
            </div>
            <h2 style={{
              fontFamily: displayFont, fontSize: 54, lineHeight: 1.04, margin: 0,
              letterSpacing: useSerif ? '-0.018em' : '-0.02em', color: t.fg, fontWeight: 400,
              fontStyle: useSerif ? 'italic' : 'normal',
              textTransform: useSerif ? 'none' : 'none',
            }}>
              {data.title}
            </h2>
            <div data-bureau-manifesto-body style={{
              marginTop: 24, display:'grid', gridTemplateColumns:'1fr 1fr', gap: 36,
              fontFamily: FONTS.serif, fontSize: 16, fontStyle:'italic', color: t.fg, lineHeight: 1.55,
            }}>
              {data.body.map((p, i) => <p key={i} style={{ margin: 0 }}>{p}</p>)}
            </div>
            <a href={data.cta.href} target="_blank" rel="noreferrer" style={{
              display:'inline-flex', alignItems:'center', gap: 10, marginTop: 30,
              fontFamily: FONTS.mono, fontSize: 11, letterSpacing:'0.18em', color: t.accent, textDecoration:'none',
              borderBottom: `1px solid ${t.accent}`, paddingBottom: 3,
            }}>
              {data.cta.label.toUpperCase()} <span>↗</span>
            </a>
          </div>
          <aside style={{
            border: `1px solid ${t.rule}`, padding: '18px 18px 20px', background: t.bg,
            fontFamily: FONTS.mono, fontSize: 11, color: t.fgSoft,
          }}>
            <div style={{ fontSize: 9, letterSpacing:'0.26em', color: t.fgMute, marginBottom: 10 }}>FILING NOTE</div>
            <div style={{ fontFamily: FONTS.serif, fontSize: 15, fontStyle:'italic', color: t.fg, lineHeight: 1.5 }}>
              The manifesto is filed under the public-domain license. It may be reproduced, quoted,
              annotated, or rebutted without permission.
            </div>
            <div style={{
              marginTop: 18, paddingTop: 14, borderTop: `1px dashed ${t.ruleSoft}`,
              display:'grid', gridTemplateColumns:'1fr 1fr', gap: 12,
            }}>
              <div>
                <div style={{ fontSize: 9, letterSpacing:'0.22em', color: t.fgMute }}>VERSION</div>
                <div style={{ fontFamily: FONTS.serif, fontStyle:'italic', fontSize: 18, color: t.fg, marginTop: 2 }}>v2</div>
              </div>
              <div>
                <div style={{ fontSize: 9, letterSpacing:'0.22em', color: t.fgMute }}>FILED</div>
                <div style={{ fontFamily: FONTS.serif, fontStyle:'italic', fontSize: 18, color: t.fg, marginTop: 2 }}>2026.03.04</div>
              </div>
            </div>
          </aside>
        </div>
      </section>
    );
  }

  // ─── Founder rail ──────────────────────────────────────────
  function Founder({ t, useSerif = true }) {
    const f = window.SUEDE_DATA.founder;
    return (
      <section style={{ padding: '40px 24px', borderBottom: `1px solid ${t.rule}` }}>
        <div data-bureau-founder style={{ display:'grid', gridTemplateColumns:'200px 1fr auto', gap: 36, alignItems:'center' }}>
          {/* portrait placeholder card */}
          <div style={{
            width: 200, aspectRatio: '4/5', border: `1px solid ${t.rule}`, position:'relative',
            background: `repeating-linear-gradient(45deg, ${t.bg}, ${t.bg} 6px, ${t.ruleSoft} 6px, ${t.ruleSoft} 7px)`,
            fontFamily: FONTS.mono, color: t.fgSoft, overflow:'hidden',
          }}>
            <div style={{ position:'absolute', inset: 8, border: `1px dashed ${t.ruleSoft}` }} />
            <div style={{ position:'absolute', top: 8, left: 8, right: 8, fontSize: 8, letterSpacing:'0.24em' }}>PORTRAIT</div>
            <div style={{ position:'absolute', bottom: 8, left: 8, right: 8, fontSize: 8, letterSpacing:'0.24em' }}>OFFICE · FOUNDER</div>
            <div style={{
              position:'absolute', inset: 0, display:'flex', alignItems:'center', justifyContent:'center',
              fontFamily: FONTS.serif, fontSize: 88, fontStyle:'italic', color: t.fgMute, letterSpacing:'-0.02em',
            }}>J</div>
          </div>
          <div>
            <div style={{ fontFamily: FONTS.mono, fontSize: 10, letterSpacing:'0.26em', color: t.fgSoft, marginBottom: 12 }}>
              {f.eyebrow}
            </div>
            <div style={{ fontFamily: FONTS.serif, fontSize: 46, fontStyle:'italic', color: t.fg, lineHeight: 1, letterSpacing:'-0.02em' }}>
              {f.name}
            </div>
            <div style={{ fontFamily: FONTS.mono, fontSize: 11, letterSpacing:'0.18em', color: t.fgSoft, marginTop: 6 }}>
              {f.role.toUpperCase()}
            </div>
            <div style={{ fontFamily: FONTS.serif, fontStyle:'italic', fontSize: 16, color: t.fg, marginTop: 16, maxWidth: 560, lineHeight: 1.5 }}>
              {f.bio}
            </div>
            <div style={{ display:'flex', gap: 8, marginTop: 18, flexWrap:'wrap' }}>
              {f.links.map((l) => (
                <a key={l.href} href={l.href} target="_blank" rel="noreferrer" style={{
                  fontFamily: FONTS.mono, fontSize: 10, letterSpacing:'0.18em', color: t.fg,
                  border: `1px solid ${t.rule}`, padding: '6px 12px', textDecoration:'none', borderRadius: 2, background: t.bg,
                }}>{l.label.toUpperCase()} ↗</a>
              ))}
            </div>
          </div>
          <div style={{
            border: `2px solid ${t.seal}`, padding: '12px 16px', transform:'rotate(-3deg)',
            fontFamily: FONTS.mono, fontSize: 10, letterSpacing:'0.22em', color: t.seal, textAlign:'center',
          }}>
            <div style={{ fontFamily: FONTS.serif, fontSize: 22, fontStyle:'italic', letterSpacing:'-0.01em', lineHeight: 1 }}>⌒ J.S.</div>
            <div style={{ marginTop: 6 }}>BUREAU CHAIR</div>
          </div>
        </div>
      </section>
    );
  }

  // ─── Dispatches strip ──────────────────────────────────────
  function Dispatches({ t }) {
    const d = window.SUEDE_DATA.dispatches;
    return (
      <section style={{ padding: '36px 24px 44px', borderBottom: `1px solid ${t.rule}` }}>
        <div style={{ display:'flex', justifyContent:'space-between', alignItems:'baseline', marginBottom: 18 }}>
          <div>
            <div style={{ fontFamily: FONTS.mono, fontSize: 10, letterSpacing:'0.26em', color: t.fgSoft }}>RECENT DISPATCHES</div>
            <div style={{ fontFamily: FONTS.serif, fontSize: 30, fontStyle:'italic', color: t.fg, letterSpacing:'-0.015em', marginTop: 4 }}>
              From the wire
            </div>
          </div>
          <a href="https://suedeai.ai/blog" target="_blank" rel="noreferrer" style={{
            fontFamily: FONTS.mono, fontSize: 10, letterSpacing:'0.2em', color: t.accent, textDecoration:'none',
            borderBottom: `1px solid ${t.accent}`, paddingBottom: 2,
          }}>READ THE BLOG ↗</a>
        </div>
        <div style={{ display:'grid', gridTemplateColumns:'repeat(auto-fit, minmax(230px, 1fr))', gap: 12 }}>
          {d.map((x) => (
            <a key={x.href + x.date} href={x.href} target="_blank" rel="noreferrer" style={{
              display:'block', textDecoration:'none', color: t.fg,
              border: `1px solid ${t.rule}`, padding: '14px 16px 16px', background: t.bg, position:'relative',
              transition:'transform .14s, background .14s',
            }}
              onMouseOver={(e) => { e.currentTarget.style.background = t.bgPaper; e.currentTarget.style.transform = 'translateY(-2px)'; }}
              onMouseOut={(e) => { e.currentTarget.style.background = t.bg; e.currentTarget.style.transform = 'none'; }}
            >
              <div style={{ display:'flex', justifyContent:'space-between', fontFamily: FONTS.mono, fontSize: 9, letterSpacing:'0.2em', color: t.fgSoft, marginBottom: 10 }}>
                <span>{x.date}</span>
                <span style={{ color: t.accent }}>{x.kind}</span>
              </div>
              <div style={{ fontFamily: FONTS.serif, fontSize: 22, fontStyle:'italic', lineHeight: 1.05, letterSpacing:'-0.01em' }}>{x.label}</div>
              <div style={{ fontFamily: FONTS.serif, fontStyle:'italic', fontSize: 13, color: t.fgSoft, marginTop: 6, lineHeight: 1.45 }}>{x.note}</div>
              <div style={{ position:'absolute', right: 14, bottom: 12, fontFamily: FONTS.mono, fontSize: 11, color: t.fgSoft }}>↗</div>
            </a>
          ))}
        </div>
      </section>
    );
  }

  // ─── Audience filter pills ─────────────────────────────────
  function AudiencePills({ t, value, onChange }) {
    const auds = window.SUEDE_DATA.audiences;
    const current = auds.find((a) => a.id === value) || auds[0];
    return (
      <div style={{ position:'relative', borderBottom: `1px solid ${t.rule}`, background: t.bgPaper }}>
        <div style={{ padding: '14px 24px 0', display:'flex', flexWrap:'wrap', gap: 6 }}>
          {auds.map((a) => {
            const active = a.id === value;
            return (
              <button key={a.id} onClick={() => onChange(a.id)} style={{
                fontFamily: FONTS.mono, fontSize: 10, letterSpacing:'0.22em',
                background: active ? t.accent : 'transparent',
                color: active ? (t.bg === '#0a0a08' ? '#1a1610' : '#fbf8f0') : t.fg,
                border: `1px solid ${active ? t.accent : t.rule}`,
                padding: '8px 14px', cursor:'pointer', borderRadius: 2, transition:'all .14s',
              }}>{a.label}</button>
            );
          })}
        </div>
        <div style={{ padding: '12px 24px 16px' }}>
          <span style={{ fontFamily: FONTS.serif, fontSize: 22, fontStyle:'italic', color: t.fg, letterSpacing:'-0.01em' }}>
            {current.title}
          </span>
          <span style={{ fontFamily: FONTS.serif, fontStyle:'italic', fontSize: 14, color: t.fgSoft, marginLeft: 12 }}>
            {current.sub}
          </span>
        </div>
      </div>
    );
  }

  return { Manifesto, Founder, Dispatches, AudiencePills };
})();

window.BureauContent = BureauContent;