// Subscriber — bound-postcard "email me" block. Yellow "stamp" + perforated edge.
function Subscriber() {
  return (
    <ColorBlock id="get-in-touch" bg="#C7DCE8" grain={false}>
      <div className="pov-shell" style={{ maxWidth: 1240, margin: "0 auto", padding: "80px 32px" }}>
        <div className="pov-subscriber-grid" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 0, alignItems: "stretch" }}>
          {/* Left side — copy */}
          <div className="pov-subscriber-left" style={{
            background: "#FBF6EF", padding: "44px 36px",
            border: "1px solid #1A1714", borderRight: "none",
          }}>
            <Eyebrow color="#DD6B3A" style={{ marginBottom: 8 }}>SECTION F · SAY HELLO</Eyebrow>
            <Headline size={56} color="#1A1714" className="pov-subscriber-headline" style={{ letterSpacing: "-0.02em", marginBottom: 18 }}>
              Got a build<br/>in mind?
            </Headline>
            <p style={{ fontFamily: "var(--font-body)", fontSize: 15, lineHeight: 1.65, color: "#3A332C", margin: 0, maxWidth: 460 }}>
              If something here's got you thinking about your own sales or marketing bottleneck, email me directly.
            </p>

            <div className="pov-subscriber-form" style={{ marginTop: 28 }}>
              <BlockButton bg="#1A1714" fg="#FBF6EF" onClick={()=>{ window.location.href = "mailto:hello@povswathy.com?subject=" + encodeURIComponent("Got a build in mind"); }}>Email me</BlockButton>
            </div>

            <div style={{ marginTop: 24, fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.2em", textTransform: "uppercase", color: "#8E867A" }}>
              JUST HIT SEND
            </div>
          </div>

          {/* Right side — the postcard "stamp" */}
          <div className="pov-subscriber-right" style={{
            background: "#F4E36A", border: "1px solid #1A1714", padding: 28,
            display: "flex", flexDirection: "column", justifyContent: "space-between",
            position: "relative",
          }}>
            {/* dotted perf line on the join */}
            <div className="pov-subscriber-perf" style={{
              position: "absolute", left: -1, top: 12, bottom: 12,
              borderLeft: "2px dashed #1A1714",
            }}/>

            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start" }}>
              <div style={{ border: "2px solid #1A1714", padding: "8px 12px", maxWidth: 140 }}>
                <div style={{ fontFamily: "var(--font-mono)", fontSize: 10, letterSpacing: "0.22em", textTransform: "uppercase", color: "#1A1714" }}>POVSWATHY DISPATCH</div>
                <div style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 22, lineHeight: 1, color: "#DD6B3A", marginTop: 4 }}>FILE № 001</div>
              </div>
              <Stamp size={88} ring="#1A1714" center="#FBF6EF" className="pov-subscriber-stamp" />
            </div>

            <div className="pov-subscriber-script" style={{ fontFamily: "var(--font-script)", fontSize: 36, lineHeight: 1, color: "#1A1714", transform: "rotate(-2deg)" }}>
              no pitch,<br/>just say hi.
            </div>

            <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase", color: "#1A1714" }}>
              TO: HELLO@POVSWATHY.COM<br/>
              RE: ____________________
            </div>
          </div>
        </div>
      </div>
    </ColorBlock>
  );
}

Object.assign(window, { Subscriber });