// Colophon — typesetter's-mark style footer: ink black, masthead grid, hairlines
function Colophon() {
  return (
    <ColorBlock bg="#1A1714" style={{ color: "#FBF6EF" }} grain={false}>
      <div className="pov-shell" style={{ maxWidth: 1240, margin: "0 auto", padding: "70px 32px 36px" }}>
        {/* Masthead row */}
        <div className="pov-colophon-grid" style={{
          display: "grid", gridTemplateColumns: "1.5fr 1fr 1fr 1fr",
          gap: 40, borderBottom: "1px solid #FBF6EF", paddingBottom: 36, marginBottom: 30,
        }}>
          <div>
            <div className="pov-colophon-wordmark" style={{ display: "flex", alignItems: "baseline", gap: 8 }}>
              <span className="pov-colophon-wordmark-tag" style={{ fontFamily: "var(--font-label)", fontWeight: 700, fontSize: 26, letterSpacing: "0.14em", color: "#F4E36A" }}>POV</span>
              <span className="pov-colophon-wordmark-name" style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 48, lineHeight: 1, letterSpacing: "-0.025em" }}>
                Swathy<span style={{ color: "#F4E36A" }}>.</span>
              </span>
            </div>
            <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.24em", textTransform: "uppercase", marginTop: 10, opacity: 0.7 }}>
              AI AUTOMATION &amp; AGENTS FOR BUSINESS · EST. 2025
            </div>
            <div style={{ marginTop: 22, fontFamily: "var(--font-body)", fontSize: 14, lineHeight: 1.6, maxWidth: 360, opacity: 0.85 }}>
              Custom AI automation and agents, built around your business instead of sold off the shelf.
            </div>
          </div>

          <div>
            <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.24em", textTransform: "uppercase", color: "#F4E36A", marginBottom: 14 }}>WORK</div>
            <div style={{ display: "flex", flexDirection: "column", gap: 8, fontFamily: "var(--font-body)", fontSize: 15 }}>
              <a onClick={()=>scrollToId("who-i-work-with")} style={{ color: "#FBF6EF", textDecoration: "none", cursor: "pointer" }}>Who I work with</a>
              <a onClick={()=>scrollToId("the-process")} style={{ color: "#FBF6EF", textDecoration: "none", cursor: "pointer" }}>The process</a>
              <a onClick={()=>scrollToId("recent-builds")} style={{ color: "#FBF6EF", textDecoration: "none", cursor: "pointer" }}>Recent builds</a>
              <a href={CALENDLY_URL} target="_blank" rel="noopener noreferrer" style={{ color: "#FBF6EF", textDecoration: "none", cursor: "pointer" }}>Book a call</a>
            </div>
          </div>

          <div>
            <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.24em", textTransform: "uppercase", color: "#F4E36A", marginBottom: 14 }}>SERVICES</div>
            <div style={{ display: "flex", flexDirection: "column", gap: 8, fontFamily: "var(--font-body)", fontSize: 15 }}>
              <a onClick={()=>scrollToId("case-study-01")} style={{ color: "#FBF6EF", textDecoration: "none", cursor: "pointer" }}>Ecommerce</a>
              <a onClick={()=>scrollToId("case-study-02")} style={{ color: "#FBF6EF", textDecoration: "none", cursor: "pointer" }}>Agency</a>
              <a onClick={()=>scrollToId("case-study-03")} style={{ color: "#FBF6EF", textDecoration: "none", cursor: "pointer" }}>SaaS</a>
              <a onClick={()=>scrollToId("case-study-04")} style={{ color: "#FBF6EF", textDecoration: "none", cursor: "pointer" }}>Coaching</a>
            </div>
          </div>

          <div>
            <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.24em", textTransform: "uppercase", color: "#F4E36A", marginBottom: 14 }}>CONTACT</div>
            <div style={{ display: "flex", flexDirection: "column", gap: 8, fontFamily: "var(--font-mono)", fontSize: 13, color: "#FBF6EF", opacity: 0.9 }}>
              <div>hello@povswathy.com</div>
              <div style={{ marginTop: 10 }}>YouTube ↗</div>
              <a href="https://www.linkedin.com/in/swathysreekumar/" target="_blank" rel="noopener noreferrer" style={{ color: "#FBF6EF", textDecoration: "none", cursor: "pointer", display: "block" }}>LinkedIn ↗</a>
              <div>Instagram ↗</div>
            </div>
          </div>
        </div>

        {/* Colophon detail row */}
        <div style={{
          display: "flex", justifyContent: "space-between", alignItems: "center",
          fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase", opacity: 0.7,
        }}>
          <span>© POVSWATHY 2026</span>
        </div>
      </div>
    </ColorBlock>
  );
}

Object.assign(window, { Colophon });