// Cover — editorial issue cover with massive vertical type and a featured pull
function Cover({ onCTA }) {
  return (
    <ColorBlock bg="#8E9BC8" style={{ color: "#FBF6EF" }}>
      <div className="pov-shell pov-cover-grid" style={{
        maxWidth: 1240, margin: "0 auto", padding: "56px 32px 80px",
        display: "grid", gridTemplateColumns: "140px 1fr 360px", gap: 36,
      }}>
        {/* Left rail — vertical issue label */}
        <div className="pov-cover-rail" style={{
          fontFamily: "var(--font-label)", fontWeight: 700, fontSize: 14, letterSpacing: "0.4em",
          textTransform: "uppercase", color: "#FBF6EF",
          writingMode: "vertical-rl", transform: "rotate(180deg)", height: 480,
        }}>
          AI AUTOMATION + CUSTOM AI AGENTS
        </div>

        {/* Center — feature headline */}
        <div style={{ minWidth: 0 }}>
          <div style={{ display: "flex", alignItems: "center", gap: 14, marginBottom: 22 }}>
            <span style={{ width: 60, height: 1, background: "#FBF6EF" }}/>
            <span style={{ fontFamily: "var(--font-mono)", fontSize: 12, letterSpacing: "0.24em", textTransform: "uppercase" }}>WHAT I DO</span>
          </div>
          <Headline size={108} color="#FBF6EF" className="pov-cover-headline" style={{ letterSpacing: "-0.025em", lineHeight: 0.94 }}>
            AI-Native Systems,<br/>
            Built for&nbsp;<Squiggle color="#F4E36A">Revenue</Squiggle>.
          </Headline>

          <div style={{ display: "flex", alignItems: "center", gap: 18, marginTop: 38, flexWrap: "wrap" }}>
            <BlockButton onClick={onCTA} bg="#FBF6EF" fg="#1A1714">Book a call</BlockButton>
            <div style={{ fontFamily: "var(--font-mono)", fontSize: 12, letterSpacing: "0.2em", textTransform: "uppercase", color: "#FBF6EF", opacity: 0.85 }}>
              · A FREE 30-MIN CALL &nbsp;·&nbsp; NO SALES PITCH
            </div>
          </div>
        </div>

        {/* Right column — pulled byline + stamp */}
        <div className="pov-cover-side" style={{ display: "flex", flexDirection: "column", justifyContent: "space-between", alignItems: "flex-end" }}>
          <div className="pov-cover-side-text" style={{ textAlign: "right" }}>
            <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.24em", textTransform: "uppercase", color: "#FBF6EF", opacity: 0.7, marginBottom: 8 }}>
              BUILT, RUN &amp;<br/>OWNED BY
            </div>
            <div className="pov-cover-byline" style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 32, lineHeight: 1, color: "#FBF6EF" }}>
              Swathy Sreekumar
            </div>
            <div className="pov-cover-quote" style={{
              marginTop: 22, padding: "16px 18px", background: "#F4E36A", color: "#1A1714",
              fontFamily: "var(--font-script)", fontSize: 28, lineHeight: 0.95,
              transform: "rotate(2deg)", maxWidth: 260, textAlign: "left",
            }}>
              "the automation is the easy part. the strategy is why it works."
            </div>
          </div>
          <Stamp size={120} ring="#FBF6EF" center="#F4E36A" className="pov-cover-stamp"/>
        </div>
      </div>
    </ColorBlock>
  );
}

Object.assign(window, { Cover });