// Manifesto — founder's letter, signed, with a small portrait frame and background/credentials pinned beside
function Manifesto() {
  const notes = [
    { tag: "9 YEARS IN DATA", text: "before AI, it was dashboards, SQL, and A/B tests that had to tell the truth.", color: "#F4E36A" },
    { tag: "ML BEFORE IT WAS COOL", text: "automating reports and predicting patterns before generative AI went mainstream.", color: "#F2C3C5" },
    { tag: "STILL THINKS LIKE AN ANALYST", text: "every build starts with \"what's the ROI,\" not \"what's trending.\"", color: "#C7DCE8" },
  ];

  return (
    <ColorBlock id="manifesto" bg="#F2C3C5">
      <div className="pov-shell pov-manifesto-grid" style={{ maxWidth: 1240, margin: "0 auto", padding: "80px 32px", display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 60 }}>
        {/* Founder's letter */}
        <div style={{ borderTop: "1px solid #1A1714", paddingTop: 24 }}>
          <div style={{ display: "flex", alignItems: "center", gap: 14, marginBottom: 16 }}>
            <span style={{ fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.24em", textTransform: "uppercase", color: "#B85327" }}>FROM THE DESK · SECTION D</span>
          </div>
          <Headline size={64} color="#1A1714" className="pov-manifesto-headline" style={{ letterSpacing: "-0.02em", marginBottom: 22 }}>
            A letter,<br/>from the desk.
          </Headline>

          <p style={{ fontFamily: "var(--font-body)", fontSize: 17, lineHeight: 1.65, color: "#1A1714", margin: 0 }}>
            Hi, I'm Swathy. Before I ever touched a prompt, I spent nine years inside dashboards: tracking user behavior, marketing ROI, product metrics. When generative AI showed up, I already knew where the leverage points were.
          </p>
          <p style={{ fontFamily: "var(--font-body)", fontSize: 16, lineHeight: 1.7, color: "#3A332C", marginTop: 16 }}>
            What you'll find here is built around your actual gap — in sales, in marketing, or both — not a generic platform demo. I still think like an analyst: I ask what the ROI looks like, then I automate that.
          </p>

          <div style={{ marginTop: 30, display: "flex", alignItems: "center", gap: 18 }}>
            <div className="pov-manifesto-signature" style={{ fontFamily: "var(--font-script)", fontSize: 56, lineHeight: 0.9, color: "#1A1714", transform: "rotate(-4deg)" }}>Swathy</div>
          </div>

          <div style={{ marginTop: 20 }}>
            <PillButton variant="yellow" onClick={()=>window.open("https://www.linkedin.com/in/swathysreekumar/", "_blank", "noopener,noreferrer")}>Find out more about me on LinkedIn ↗</PillButton>
          </div>
        </div>

        {/* Right — portrait + background/credentials pinned */}
        <div style={{ display: "flex", flexDirection: "column", gap: 22 }}>
          <div style={{
            aspectRatio: "3/4", background: "linear-gradient(160deg,#ECA888,#B85327)",
            border: "8px solid #FBF6EF", boxShadow: "0 24px 60px -28px rgba(26,23,20,0.4)",
            position: "relative", overflow: "hidden",
            transform: "rotate(-2deg)",
          }}>
            <img src="swathy-newpic.png" alt="Swathy" style={{ position: "absolute", inset: 24, width: "calc(100% - 48px)", height: "calc(100% - 48px)", objectFit: "cover", objectPosition: "center" }} />
          </div>

          <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
            <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.24em", textTransform: "uppercase", color: "#1A1714" }}>BACKGROUND</div>
            {notes.map((n, i) => (
              <div key={n.tag} style={{
                background: n.color, padding: "12px 14px",
                transform: `rotate(${i % 2 === 0 ? -0.7 : 0.7}deg)`,
                fontFamily: "var(--font-mono)", fontSize: 12, lineHeight: 1.55, color: "#1A1714",
              }}>
                <span style={{ fontWeight: 700 }}>{n.tag}:</span> {n.text}
              </div>
            ))}
          </div>
        </div>
      </div>
    </ColorBlock>
  );
}

Object.assign(window, { Manifesto });