// IndexOfIssue — newspaper-style table of contents, repurposed as "who I work with"
const TOC = [
  { tag: "C.01", title: "Brands losing sales to abandoned carts and slow follow-ups", kicker: "ECOMMERCE" },
  { tag: "C.02", title: "Marketing teams drowning in repetitive client work",         kicker: "AGENCY" },
  { tag: "C.03", title: "Sales teams chasing leads that should close themselves",     kicker: "SAAS" },
  { tag: "C.04", title: "Solopreneurs who need a system, not more hours",             kicker: "COACH" },
  { tag: "C.05", title: "Early-stage teams that can't afford to hire but need to move fast", kicker: "STARTUP" },
];

function IndexOfIssue() {
  return (
    <ColorBlock id="who-i-work-with" bg="#FBF6EF" grain={false}>
      <div className="pov-shell" style={{ maxWidth: 1240, margin: "0 auto", padding: "60px 32px 60px" }}>
        <div className="pov-toc-grid" style={{
          display: "grid", gridTemplateColumns: "200px 1fr",
          gap: 40, borderTop: "1px solid #1A1714", paddingTop: 26,
        }}>
          <div>
            <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.24em", textTransform: "uppercase", color: "#DD6B3A", marginBottom: 8 }}>INSIDE</div>
            <Headline size={64} color="#1A1714" className="pov-toc-headline" style={{ letterSpacing: "-0.02em" }}>
              Who I<br/>work with.
            </Headline>
            <div className="pov-toc-intro-copy" style={{ fontFamily: "var(--font-body)", fontSize: 14, lineHeight: 1.6, color: "#3A332C", marginTop: 18, maxWidth: 220 }}>
              AI systems for businesses that want more revenue without more headcount.
            </div>
          </div>

          <div>
            {TOC.map((row, i) => (
              <div key={row.tag} className="pov-toc-row" style={{
                display: "grid", gridTemplateColumns: "70px 110px 1fr",
                gap: 22, alignItems: "baseline",
                padding: "20px 0",
                borderTop: i === 0 ? "1px solid #1A1714" : "none",
                borderBottom: "1px solid #E6DFD3",
                cursor: "pointer",
              }}
              onMouseEnter={(e)=>e.currentTarget.style.background = "rgba(221,107,58,0.06)"}
              onMouseLeave={(e)=>e.currentTarget.style.background = "transparent"}>
                <div style={{ fontFamily: "var(--font-mono)", fontSize: 13, color: "#DD6B3A", letterSpacing: "0.1em" }}>{row.tag}</div>
                <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.2em", textTransform: "uppercase", color: "#8E867A" }}>{row.kicker}</div>
                <div className="pov-toc-title" style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 26, lineHeight: 1.15, color: "#1A1714" }}>{row.title}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </ColorBlock>
  );
}

Object.assign(window, { IndexOfIssue });