function CTA() {
  return (
    <section className="sfy-cta" style={{
      background: "var(--ember)", color: "#fff",
      padding: "120px 32px", borderTop: "1px solid var(--ink)",
      position: "relative", overflow: "hidden",
    }}>
      {/* Decorative giant typographic background */}
      <div aria-hidden className="sfy-cta-bigword" style={{
        position: "absolute", left: -20, bottom: -80,
        fontFamily: "var(--serif)", fontStyle: "italic",
        fontSize: "clamp(280px, 36vw, 540px)",
        fontWeight: 300, lineHeight: 0.85,
        color: "rgba(255,255,255,0.08)",
        pointerEvents: "none",
        whiteSpace: "nowrap",
      }}>study</div>

      <div style={{maxWidth: 1400, margin: "0 auto", position: "relative"}}>
        <div style={{
          display: "grid", gridTemplateColumns: "1.5fr 1fr",
          gap: 64, alignItems: "center",
        }} className="sfy-cta-grid">
          <div>
            <div className="sfy-cta-eyebrow" style={{
              fontFamily: "var(--mono)", fontSize: 11.5,
              letterSpacing: "0.22em", marginBottom: 28,
              opacity: 0.85,
            }}>08 — ΞΕΚΊΝΗΣΕ ΣΉΜΕΡΑ</div>
            <h2 className="sfy-cta-h2" style={{
              fontFamily: "var(--serif)", fontWeight: 350,
              fontSize: "clamp(56px, 7vw, 112px)",
              lineHeight: 0.95, letterSpacing: "-0.03em",
              marginBottom: 28, textWrap: "balance",
              fontVariationSettings: '"opsz" 144',
            }}>
              Η μελέτη που σου<br/>
              αξίζει — <em style={{fontWeight: 350}}>τώρα.</em>
            </h2>
            <p className="sfy-cta-lead" style={{
              fontFamily: "var(--serif)", fontSize: 21,
              lineHeight: 1.5, opacity: 0.92, maxWidth: 540,
              textWrap: "pretty",
            }}>
              Δωρεάν εγγραφή. Καμία πιστωτική, καμία δέσμευση. Μόνο μελέτη
              σχεδιασμένη με σεβασμό στον χρόνο σου.
            </p>
          </div>

          <form method="post" action="register.php" className="sfy-cta-form" style={{
            background: "var(--paper)", color: "var(--ink)",
            padding: 32, borderRadius: 4,
            boxShadow: "0 30px 60px -20px rgba(0,0,0,0.35)",
          }}>
            <div style={{
              fontFamily: "var(--mono)", fontSize: 10.5,
              letterSpacing: "0.2em", color: "var(--ember)",
              marginBottom: 16,
            }}>★ ΕΓΓΡΑΦΉ — 30 ΔΕΥΤΕΡΌΛΕΠΤΑ</div>
            <input type="email" name="email" required placeholder="email@σχολείο.gr" style={{
              width: "100%", padding: "16px 18px", marginBottom: 12,
              border: "1.5px solid var(--ink)", borderRadius: 4,
              fontFamily: "var(--serif)", fontSize: 17,
              background: "transparent", color: "var(--ink)",
              outline: "none",
            }} />
            <select name="grade" style={{
              width: "100%", padding: "16px 18px", marginBottom: 16,
              border: "1.5px solid var(--ink)", borderRadius: 4,
              fontFamily: "var(--sans)", fontSize: 14.5,
              background: "transparent", color: "var(--ink)",
              outline: "none",
            }}>
              <option>Διάλεξε τάξη...</option>
              <option>Α' Γυμνασίου</option>
              <option>Β' Γυμνασίου</option>
              <option>Γ' Γυμνασίου</option>
              <option>Α' Λυκείου</option>
              <option>Β' Λυκείου</option>
              <option>Γ' Λυκείου</option>
            </select>
            <button type="submit" style={{
              width: "100%", padding: "18px 24px",
              background: "var(--forest)", color: "#fff",
              border: 0, borderRadius: 4, cursor: "pointer",
              fontFamily: "var(--sans)", fontSize: 15, fontWeight: 600,
              letterSpacing: "0.02em",
            }}>Ξεκίνα δωρεάν →</button>
            <div style={{
              marginTop: 14, fontSize: 12, color: "var(--muted)",
              textAlign: "center",
            }}>
              Με την εγγραφή αποδέχεσαι τους όρους χρήσης.
            </div>
          </form>
        </div>
        <style>{`
          @media (max-width: 980px) {
            .sfy-cta-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
          }
          /* ── Mobile ────────────────────────────────────────── */
          @media (max-width: 640px) {
            .sfy-cta { padding: 64px 20px !important; }
            .sfy-cta-grid { gap: 32px !important; }
            .sfy-cta-eyebrow { font-size: 10.5px !important; letter-spacing: 0.18em !important; margin-bottom: 18px !important; }
            .sfy-cta-h2 { font-size: clamp(40px, 11vw, 60px) !important; margin-bottom: 20px !important; }
            .sfy-cta-lead { font-size: 17px !important; }
            .sfy-cta-form { padding: 22px !important; }
            .sfy-cta-bigword { font-size: 220px !important; bottom: -40px !important; left: -16px !important; }
          }
        `}</style>
      </div>
    </section>
  );
}
window.CTA = CTA;