/* ===================================================================
   Girişimci Yatırımcı Okulu — Ön Kayıt · UI parts
   Built on the GY design system (colors_and_type.css).
   Exports components to window for app.jsx.
   =================================================================== */

const ASSET = "./assets/";
const YT = "https://www.youtube.com/@girisimciyatirimci";

/* ---------- shared bits ---------- */
const overline = { fontFamily: "var(--font-ui)", fontWeight: 600, fontSize: 13,
  letterSpacing: ".14em", textTransform: "uppercase", color: "var(--gy-teal)" };
function glow(left, top, color, size) {
  return { position: "absolute", left, top, width: size, height: size,
    background: `radial-gradient(circle, ${color}, transparent 68%)`, filter: "blur(8px)", pointerEvents: "none" };
}
const btnAccent = { fontFamily: "var(--font-ui)", fontWeight: 600, fontSize: 16, border: 0,
  borderRadius: "var(--r-pill)", padding: "15px 28px", cursor: "pointer",
  background: "var(--gy-teal)", color: "var(--gy-ink)", whiteSpace: "nowrap",
  transition: "transform .12s var(--ease-out), filter .2s" };

function GYLogo({ height = 38, onDark = true }) {
  return (
    <div style={{ display: "flex", alignItems: "center", gap: 11 }}>
      <img src={ASSET + "gy-mark.png"} alt="Girişimci Yatırımcı"
        style={{ height, width: height, borderRadius: height * 0.24, display: "block" }} />
      <span style={{ fontFamily: "var(--font-impact)", fontWeight: 800, fontSize: height * 0.42,
        lineHeight: 1, letterSpacing: "-.01em" }}>
        <span style={{ color: onDark ? "#fff" : "var(--gy-ink)" }}>girişimci </span>
        <span style={{ color: "var(--gy-teal)" }}>yatırımcı</span>
      </span>
    </div>
  );
}

/* ---------- top nav ---------- */
function Nav({ onCTA }) {
  return (
    <header style={{ position: "sticky", top: 0, zIndex: 50, background: "rgba(20,10,55,.72)",
      backdropFilter: "blur(14px)", borderBottom: "1px solid rgba(255,255,255,.08)" }}>
      <div style={{ maxWidth: 1120, margin: "0 auto", padding: "13px 26px", display: "flex",
        alignItems: "center", justifyContent: "space-between" }}>
        <GYLogo height={36} />
        <div style={{ display: "flex", alignItems: "center", gap: 18 }}>
          <a href={YT} target="_blank" rel="noopener" style={{ fontFamily: "var(--font-ui)",
            fontWeight: 500, fontSize: 14.5, color: "rgba(255,255,255,.8)", textDecoration: "none",
            display: "none" }} className="nav-yt">YouTube</a>
          <button onClick={onCTA} style={{ ...btnAccent, fontSize: 14.5, padding: "10px 20px" }}>
            Ön kayıt ol
          </button>
        </div>
      </div>
    </header>
  );
}

/* ---------- HERO with the pre-registration form ---------- */
function Hero({ form }) {
  return (
    <section style={{ position: "relative", overflow: "hidden", background: "var(--grad-hero)", color: "#fff" }}>
      <div style={glow("-10%", "-25%", "rgba(0,196,179,.34)", 600)} />
      <div style={glow("82%", "55%", "rgba(0,196,179,.16)", 480)} />
      <div style={{ position: "relative", maxWidth: 1120, margin: "0 auto", padding: "70px 26px 88px",
        display: "grid", gridTemplateColumns: "1.08fr .92fr", gap: 52, alignItems: "center" }}>
        <div>
          <div style={{ display: "inline-flex", alignItems: "center", gap: 9, padding: "7px 14px",
            borderRadius: "var(--r-pill)", background: "rgba(0,196,179,.16)", whiteSpace: "nowrap",
            border: "1px solid rgba(0,196,179,.4)", marginBottom: 22 }}>
            <span style={{ width: 7, height: 7, borderRadius: "50%", background: "var(--gy-teal)",
              animation: "gy-pulse 1.8s infinite" }} />
            <span style={{ fontFamily: "var(--font-ui)", fontWeight: 600, fontSize: 13,
              color: "var(--gy-teal)", letterSpacing: ".02em" }}>ÖN KAYDA ÖZEL · ÖMÜR BOYU ÜCRETSİZ</span>
          </div>
          <h1 style={{ fontFamily: "var(--font-display)", fontWeight: 600, fontSize: "clamp(56px,7vw,104px)",
            lineHeight: .82, textTransform: "uppercase", margin: 0 }}>
            Girişimci<br/>Yatırımcı<br/><span style={{ color: "var(--gy-teal)" }}>Okulu</span>
          </h1>
          <p style={{ fontFamily: "var(--font-ui)", fontSize: 19.5, lineHeight: 1.58,
            color: "rgba(255,255,255,.86)", maxWidth: 520, margin: "26px 0 0" }}>
            Yapay zeka ile <strong style={{ color: "#fff" }}>yeni gelir kaynakları</strong> kurmak
            isteyen herkes için bir okul. Claude Code, AI araçları, içerik ve otomasyon
            sistemleriyle kendi işini kurmayı öğren. İleride <strong style={{ color: "#fff" }}>aylık ücretli</strong>{" "}
            olacak — ama şimdi ön kayıt yapanlara okul
            <strong style={{ color: "var(--gy-teal)" }}> ömür boyu ücretsiz</strong>.
          </p>
          <div style={{ display: "flex", gap: 22, marginTop: 30, flexWrap: "wrap" }}>
            <HeroStat n="Ömür boyu" l="Ücretsiz erişim hakkı" />
            <HeroStat n="Sadece şimdi" l="Sonra aylık ücretli" />
            <HeroStat n="0 ₺" l="Ön kayıt olanlara" />
          </div>
        </div>
        <RegCard form={form} />
      </div>
    </section>
  );
}

function HeroStat({ n, l }) {
  return (
    <div>
      <div style={{ fontFamily: "var(--font-ui)", fontWeight: 700, fontSize: 19, color: "var(--gy-teal)" }}>{n}</div>
      <div style={{ fontFamily: "var(--font-ui)", fontSize: 13, color: "rgba(255,255,255,.65)", marginTop: 1 }}>{l}</div>
    </div>
  );
}

/* the glass registration card (hero) */
function RegCard({ form }) {
  const { submitted, count } = form;
  return (
    <div style={{ background: "rgba(255,255,255,.96)", borderRadius: "var(--r-lg)", padding: 28,
      boxShadow: "0 30px 70px rgba(20,5,60,.4)", position: "relative" }}>
      {!submitted ? (
        <React.Fragment>
          <h3 style={{ fontFamily: "var(--font-ui)", fontWeight: 700, fontSize: 21, color: "var(--gy-ink)",
            margin: "0 0 4px" }}>Ön kayıt başvurusu</h3>
          <p style={{ fontFamily: "var(--font-ui)", fontSize: 14, color: "var(--fg-2)", margin: "0 0 18px" }}>
            30 saniye sürer. Hiçbir ücret yok, kart istemiyoruz.
          </p>
          <RegForm form={form} idp="hero" />
          <div style={{ display: "flex", alignItems: "center", gap: 8, marginTop: 16 }}>
            <AvatarRow />
            <span style={{ fontFamily: "var(--font-ui)", fontSize: 13, color: "var(--fg-2)" }}>
              <strong style={{ color: "var(--gy-ink)" }}>{count.toLocaleString("tr-TR")}</strong> kişi ön kayıt oldu
            </span>
          </div>
        </React.Fragment>
      ) : <SuccessState count={count} />}
    </div>
  );
}

function RegForm({ form, idp }) {
  const { name, setName, email, setEmail, submit, error, submitting } = form;
  return (
    <form onSubmit={(e) => { e.preventDefault(); submit(); }}
      style={{ display: "flex", flexDirection: "column", gap: 11 }}>
      <input id={idp + "-name"} value={name} onChange={(e) => setName(e.target.value)}
        placeholder="Adın" style={fieldStyle} />
      <input id={idp + "-email"} type="email" value={email} onChange={(e) => setEmail(e.target.value)}
        placeholder="E-posta adresin" style={{ ...fieldStyle, borderColor: error ? "var(--negative)" : "var(--line)" }} />
      {error && <span style={{ fontFamily: "var(--font-ui)", fontSize: 12.5, color: "var(--negative)" }}>{error}</span>}
      <button type="submit" disabled={submitting} style={{ ...btnAccent, width: "100%", padding: "15px", marginTop: 2,
        background: "var(--gy-violet)", color: "#fff", fontSize: 16,
        opacity: submitting ? .7 : 1, cursor: submitting ? "default" : "pointer" }}>
        {submitting ? "Gönderiliyor…" : "Ücretsiz ön kayıt ol →"}
      </button>
      <p style={{ fontFamily: "var(--font-ui)", fontSize: 11.5, color: "var(--fg-3)", margin: "2px 0 0",
        textAlign: "center", lineHeight: 1.5 }}>
        Kaydolarak okul duyurularını e-posta ile almayı kabul edersin. İstediğin an çıkabilirsin.
      </p>
    </form>
  );
}
const fieldStyle = { fontFamily: "var(--font-ui)", fontSize: 15.5, padding: "14px 16px",
  border: "1.5px solid var(--line)", borderRadius: "var(--r-sm)", color: "var(--gy-ink)", outline: "none",
  transition: "border-color .2s" };

function SuccessState({ count }) {
  return (
    <div style={{ textAlign: "center", padding: "14px 6px" }}>
      <div style={{ width: 66, height: 66, borderRadius: "50%", background: "var(--gy-teal)",
        display: "flex", alignItems: "center", justifyContent: "center", margin: "0 auto 18px" }}>
        <svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="var(--gy-ink)" strokeWidth="3"
          strokeLinecap="round" strokeLinejoin="round"><path d="M20 6L9 17l-5-5"/></svg>
      </div>
      <h3 style={{ fontFamily: "var(--font-impact)", fontWeight: 800, fontSize: 26, color: "var(--gy-ink)",
        margin: "0 0 8px" }}>Kaydın alındı! 🎉</h3>
      <p style={{ fontFamily: "var(--font-ui)", fontSize: 15, color: "var(--fg-2)", lineHeight: 1.6, margin: "0 0 16px" }}>
        Girişimci Yatırımcı Okulu açıldığında <strong style={{ color: "var(--gy-ink)" }}>ilk sen</strong> haberdar
        olacaksın — ve erişimin ömür boyu ücretsiz olacak.
      </p>
      <div style={{ background: "var(--violet-050)", borderRadius: "var(--r-md)", padding: "12px 16px",
        fontFamily: "var(--font-ui)", fontSize: 14, color: "var(--gy-violet)", fontWeight: 600 }}>
        Sırada {count.toLocaleString("tr-TR")}. kişisin
      </div>
      <a href={YT} target="_blank" rel="noopener" style={{ display: "inline-block", marginTop: 16,
        fontFamily: "var(--font-ui)", fontSize: 14, fontWeight: 600, color: "var(--gy-violet)" }}>
        Bu arada YouTube'da bize katıl →
      </a>
    </div>
  );
}

function AvatarRow() {
  const cs = ["var(--gy-teal)", "var(--ext-sky)", "var(--ext-magenta)", "var(--gy-violet)"];
  return (
    <div style={{ display: "flex" }}>
      {cs.map((c, i) => (
        <span key={i} style={{ width: 26, height: 26, borderRadius: "50%", background: c,
          border: "2px solid #fff", marginLeft: i ? -9 : 0 }} />
      ))}
    </div>
  );
}

Object.assign(window, { ASSET, YT, overline, glow, btnAccent, GYLogo, Nav, Hero,
  RegCard, RegForm, SuccessState, AvatarRow, HeroStat, fieldStyle });