/* ===================================================================
   Girişimci Yatırımcı Okulu — Ön Kayıt · UI parts 2
   Sections: GiftBand, Curriculum, Benefits, Community, FAQ, FinalCTA, Footer
   =================================================================== */

/* ---------- the gift / promise band ---------- */
function GiftBand() {
  return (
    <section style={{ background: "var(--gy-ink)", color: "#fff", padding: "78px 26px", position: "relative", overflow: "hidden" }}>
      <div style={glow("50%", "-60%", "rgba(65,0,153,.5)", 620)} />
      <div style={{ position: "relative", maxWidth: 880, margin: "0 auto", textAlign: "center" }}>
        <span style={overline}>Bir hediye</span>
        <p style={{ fontFamily: "var(--font-ui)", fontWeight: 600, fontSize: "clamp(26px,3.4vw,42px)",
          lineHeight: 1.32, letterSpacing: "-.01em", margin: "20px 0 0", textWrap: "balance" }}>
          Okul ileride <span style={{ color: "var(--gy-teal)" }}>aylık ücretli</span> bir platform
          olacak. Ama şimdi ön kayıt yapan herkese
          <span style={{ color: "var(--gy-teal)" }}> ömür boyu ücretsiz</span> kalacak — bizi
          baştan beri destekleyen topluluğumuza teşekkürümüz.
        </p>
        <p style={{ fontFamily: "var(--font-ui)", fontSize: 16, color: "rgba(255,255,255,.6)",
          marginTop: 22, lineHeight: 1.6 }}>
          Şimdi kaydol, sonsuza dek ücretsiz eriş. Kart bilgisi istemiyoruz, gizli bir koşul yok.
        </p>
      </div>
    </section>
  );
}

/* ---------- curriculum ---------- */
const MODULES = [
  { no: "01", t: "Yapay Zeka Temelleri", d: "AI araçları nasıl çalışır, nereden başlamalı ve günlük işine nasıl katarsın.", c: "var(--gy-violet)" },
  { no: "02", t: "Claude Code ile Geliştirme", d: "Az kodla — hatta kod yazmadan — uygulama, araç ve sistem kurmayı öğren.", c: "var(--ext-magenta)" },
  { no: "03", t: "İçerik Üretim Sistemleri", d: "AI ile ölçeklenebilir içerik ve marka üretimi: metin, görsel, video.", c: "var(--ext-blue)" },
  { no: "04", t: "AI Otomasyonu", d: "Tekrar eden iş süreçlerini uçtan uca otomatikleştiren sistemler kur.", c: "var(--ext-sky)" },
  { no: "05", t: "Kendi Sektörüne Entegrasyon", d: "Yapay zekayı kendi işine ve sektörüne uyarla; nereden başlayacağını gör.", c: "var(--gy-teal)" },
  { no: "06", t: "AI Otomasyon Şirketi Kurmak", d: "Sıfırdan iş modeli, ilk müşteriler ve büyüme — kendi girişimini kur.", c: "var(--gy-violet)" },
];
function Curriculum() {
  return (
    <section style={{ background: "#fff", padding: "82px 26px" }}>
      <div style={{ maxWidth: 1120, margin: "0 auto" }}>
        <div style={{ textAlign: "center", marginBottom: 44 }}>
          <span style={{ ...overline, color: "var(--gy-violet)" }}>Müfredat</span>
          <h2 style={{ fontFamily: "var(--font-impact)", fontWeight: 800, fontSize: "clamp(34px,4.4vw,52px)",
            color: "var(--gy-ink)", margin: "10px 0 0", letterSpacing: "-.015em" }}>Neler öğreneceksin?</h2>
          <p style={{ fontFamily: "var(--font-ui)", fontSize: 17, color: "var(--fg-2)", maxWidth: 580,
            margin: "14px auto 0", lineHeight: 1.6 }}>
            Yapay zekayı iş hayatına entegre etmekten kendi AI girişimini kurmaya kadar —
            sıfırdan, uygulamalı ve sade. Müfredat sürekli güncellenir.
          </p>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 18 }}>
          {MODULES.map((m) => <ModuleCard key={m.no} m={m} />)}
        </div>
      </div>
    </section>
  );
}
function ModuleCard({ m }) {
  const [h, setH] = React.useState(false);
  return (
    <div onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)}
      style={{ background: "#fff", border: "1px solid var(--line)", borderRadius: "var(--r-lg)",
        padding: "24px 22px 26px", transition: "box-shadow .2s, transform .2s",
        boxShadow: h ? "var(--shadow-md)" : "none", transform: h ? "translateY(-3px)" : "none" }}>
      <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 14 }}>
        <span style={{ fontFamily: "var(--font-display)", fontWeight: 600, fontSize: 40, lineHeight: .8,
          color: m.c }}>{m.no}</span>
        <span style={{ flex: 1, height: 2, background: "var(--line)", borderRadius: 2 }} />
      </div>
      <h3 style={{ fontFamily: "var(--font-ui)", fontWeight: 700, fontSize: 19, color: "var(--gy-ink)",
        margin: "0 0 8px" }}>{m.t}</h3>
      <p style={{ fontFamily: "var(--font-ui)", fontSize: 14.5, color: "var(--fg-2)", lineHeight: 1.55, margin: 0 }}>{m.d}</p>
    </div>
  );
}

/* ---------- benefits ---------- */
const BENEFITS = [
  { t: "Ömür boyu ücretsiz erişim", d: "Okul ileride aylık ücretli olacak; şimdi kaydolana sonsuza dek ücretsiz." },
  { t: "Canlı dersler & soru-cevap", d: "Furkan ve Doğancan ile düzenli canlı oturumlar ve birebir geri bildirim." },
  { t: "Özel topluluk", d: "Yapay zeka ile iş kuran girişimcilerle öğren, paylaş, büyü." },
  { t: "AI araç kütüphanesi", d: "Hazır prompt, otomasyon akışı ve şablonlarına erken erişim." },
  { t: "Erken erişim önceliği", d: "Yeni modüller ve araçlar önce ön kayıt olanlara açılır." },
  { t: "Reklamsız, sade içerik", d: "Dikkatini dağıtan hiçbir şey yok — sadece uygulanabilir bilgi." },
];
function Benefits() {
  return (
    <section style={{ background: "var(--surface-2)", padding: "82px 26px" }}>
      <div style={{ maxWidth: 1120, margin: "0 auto" }}>
        <div style={{ textAlign: "center", marginBottom: 42 }}>
          <span style={{ ...overline, color: "var(--gy-violet)" }}>Ne kazanırsın</span>
          <h2 style={{ fontFamily: "var(--font-impact)", fontWeight: 800, fontSize: "clamp(34px,4.4vw,52px)",
            color: "var(--gy-ink)", margin: "10px 0 0", letterSpacing: "-.015em" }}>Topluluğun bir parçası ol</h2>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 18 }}>
          {BENEFITS.map((b) => (
            <div key={b.t} style={{ background: "#fff", borderRadius: "var(--r-lg)", padding: "24px 22px",
              boxShadow: "var(--shadow-sm)" }}>
              <div style={{ width: 42, height: 42, borderRadius: "var(--r-sm)", background: "var(--violet-050)",
                display: "flex", alignItems: "center", justifyContent: "center", marginBottom: 14 }}>
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="var(--gy-violet)"
                  strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"><path d="M20 6L9 17l-5-5"/></svg>
              </div>
              <h3 style={{ fontFamily: "var(--font-ui)", fontWeight: 700, fontSize: 17.5, color: "var(--gy-ink)",
                margin: "0 0 7px" }}>{b.t}</h3>
              <p style={{ fontFamily: "var(--font-ui)", fontSize: 14.5, color: "var(--fg-2)", lineHeight: 1.55, margin: 0 }}>{b.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- community / YouTube ---------- */
function Community() {
  return (
    <section style={{ background: "var(--gy-violet)", color: "#fff", padding: "78px 26px",
      position: "relative", overflow: "hidden" }}>
      <div style={glow("80%", "-40%", "rgba(0,196,179,.3)", 480)} />
      <div style={{ position: "relative", maxWidth: 1120, margin: "0 auto", display: "grid",
        gridTemplateColumns: "1fr 1fr", gap: 48, alignItems: "center" }}>
        <div>
          <span style={overline}>Topluluk</span>
          <h2 style={{ fontFamily: "var(--font-display)", fontWeight: 600, fontSize: "clamp(40px,5vw,72px)",
            lineHeight: .85, textTransform: "uppercase", margin: "12px 0 0" }}>
            Her şey<br/><span style={{ color: "var(--gy-teal)" }}>YouTube'da</span> başladı
          </h2>
          <p style={{ fontFamily: "var(--font-ui)", fontSize: 18, color: "rgba(255,255,255,.82)",
            marginTop: 20, maxWidth: 460, lineHeight: 1.6 }}>
            Yıllardır her hafta yatırımı, ekonomiyi ve geleceği konuşuyoruz. Okul,
            bu yolculuğun bir sonraki adımı — ve onu seninle birlikte kuruyoruz.
          </p>
          <a href={YT} target="_blank" rel="noopener" style={{ display: "inline-flex", alignItems: "center",
            gap: 10, marginTop: 26, ...btnAccent, textDecoration: "none" }}>
            <YTGlyph /> Kanalı ziyaret et
          </a>
        </div>
        <div style={{ background: "rgba(255,255,255,.06)", border: "1px solid rgba(255,255,255,.14)",
          borderRadius: "var(--r-lg)", padding: 26, backdropFilter: "blur(8px)" }}>
          <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 20 }}>
            <span style={{ width: 52, height: 52, borderRadius: "50%", background: "#FF0000",
              display: "flex", alignItems: "center", justifyContent: "center" }}><YTGlyph w={26} /></span>
            <div>
              <div style={{ fontFamily: "var(--font-ui)", fontWeight: 700, fontSize: 17 }}>Girişimci Yatırımcı</div>
              <div style={{ fontFamily: "var(--font-ui)", fontSize: 13.5, color: "rgba(255,255,255,.6)" }}>@girisimciyatirimci</div>
            </div>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 12 }}>
            <MiniStat n="Haftalık" l="Yeni içerik" />
            <MiniStat n="240K+" l="Topluluk" />
            <MiniStat n="Yıllardır" l="Yayında" />
          </div>
        </div>
      </div>
    </section>
  );
}
function MiniStat({ n, l }) {
  return (
    <div style={{ background: "rgba(255,255,255,.06)", borderRadius: "var(--r-md)", padding: "14px 12px", textAlign: "center" }}>
      <div style={{ fontFamily: "var(--font-ui)", fontWeight: 700, fontSize: 18, color: "var(--gy-teal)" }}>{n}</div>
      <div style={{ fontFamily: "var(--font-ui)", fontSize: 12, color: "rgba(255,255,255,.62)", marginTop: 2 }}>{l}</div>
    </div>
  );
}
function YTGlyph({ w = 20 }) {
  return <svg width={w} height={w * 0.7} viewBox="0 0 24 17" fill="currentColor" style={{ color: "#fff" }}>
    <path d="M23.5 2.6a3 3 0 00-2.1-2.1C19.5 0 12 0 12 0S4.5 0 2.6.5A3 3 0 00.5 2.6 31 31 0 000 8.5a31 31 0 00.5 5.9 3 3 0 002.1 2.1C4.5 17 12 17 12 17s7.5 0 9.4-.5a3 3 0 002.1-2.1 31 31 0 00.5-5.9 31 31 0 00-.5-5.9zM9.6 12.1V4.9l6.3 3.6-6.3 3.6z"/>
  </svg>;
}

/* ---------- FAQ ---------- */
const FAQS = [
  { q: "Gerçekten ücretsiz mi?", a: "Ön kayıt yapanlar için evet — ömür boyu, koşulsuz ücretsiz. Okul ileride aylık ücretli bir platform olacak; ama şimdi kaydolursan senden hiçbir zaman ücret alınmaz. Kart bilgisi de istemiyoruz." },
  { q: "Şimdi kaydolmazsam ne olur?", a: "Okul açıldığında ücretli olacağı için sonradan katılmak aylık abonelik gerektirecek. Ön kayıt, ücretsiz erişimi ömür boyu garantilemenin tek yolu." },
  { q: "Ön kayıt beni bir şeye bağlar mı?", a: "Hayır. Ön kayıt sadece okul açıldığında öncelikli haberdar olmanı ve ücretsiz erişim hakkını güvence altına almanı sağlar. İstediğin an çıkabilirsin." },
  { q: "Okul ne zaman başlıyor?", a: "Hazırlıklar sürüyor. Kesin tarih, ön kayıt olanlara e-posta ve YouTube üzerinden ilk olarak duyurulacak." },
  { q: "Teknik bilgi ya da kodlama gerekiyor mu?", a: "Hayır. Sıfırdan başlayanlar için tasarlandı; kod bilmene gerek yok. Claude Code ve AI araçlarını adım adım, uygulamalı öğreneceksin." },
  { q: "Sonuç garantisi veriyor musunuz?", a: "Hayır. Okul sana araçları ve sistemi öğretir; ne kadar uygularsan o kadar sonuç alırsın. Sihirli bir kısa yol vaat etmiyoruz." },
];
function FAQ() {
  const [open, setOpen] = React.useState(0);
  return (
    <section style={{ background: "#fff", padding: "82px 26px" }}>
      <div style={{ maxWidth: 760, margin: "0 auto" }}>
        <div style={{ textAlign: "center", marginBottom: 38 }}>
          <span style={{ ...overline, color: "var(--gy-violet)" }}>SSS</span>
          <h2 style={{ fontFamily: "var(--font-impact)", fontWeight: 800, fontSize: "clamp(32px,4vw,48px)",
            color: "var(--gy-ink)", margin: "10px 0 0", letterSpacing: "-.015em" }}>Merak edilenler</h2>
        </div>
        <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
          {FAQS.map((f, i) => (
            <div key={i} style={{ border: "1px solid var(--line)", borderRadius: "var(--r-md)", overflow: "hidden",
              background: open === i ? "var(--violet-050)" : "#fff", transition: "background .2s" }}>
              <button onClick={() => setOpen(open === i ? -1 : i)} style={{ width: "100%", display: "flex",
                alignItems: "center", justifyContent: "space-between", gap: 16, padding: "18px 20px",
                background: "transparent", border: 0, cursor: "pointer", textAlign: "left",
                fontFamily: "var(--font-ui)", fontWeight: 600, fontSize: 16.5, color: "var(--gy-ink)" }}>
                {f.q}
                <span style={{ flexShrink: 0, width: 26, height: 26, borderRadius: "50%",
                  background: open === i ? "var(--gy-violet)" : "var(--surface-2)", color: open === i ? "#fff" : "var(--fg-2)",
                  display: "flex", alignItems: "center", justifyContent: "center", fontSize: 18, lineHeight: 1,
                  transition: "all .2s" }}>{open === i ? "−" : "+"}</span>
              </button>
              {open === i && (
                <p style={{ fontFamily: "var(--font-ui)", fontSize: 15, color: "var(--fg-2)", lineHeight: 1.6,
                  margin: 0, padding: "0 20px 20px" }}>{f.a}</p>
              )}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- final CTA ---------- */
function FinalCTA({ form, onScrollTop }) {
  return (
    <section style={{ background: "var(--grad-hero)", color: "#fff", padding: "80px 26px",
      position: "relative", overflow: "hidden", textAlign: "center" }}>
      <div style={glow("50%", "-50%", "rgba(0,196,179,.28)", 560)} />
      <div style={{ position: "relative", maxWidth: 720, margin: "0 auto" }}>
        <h2 style={{ fontFamily: "var(--font-display)", fontWeight: 600, fontSize: "clamp(44px,6vw,86px)",
          lineHeight: .84, textTransform: "uppercase", margin: 0 }}>
          Yerini<br/><span style={{ color: "var(--gy-teal)" }}>ayır</span>
        </h2>
        <p style={{ fontFamily: "var(--font-ui)", fontSize: 18.5, color: "rgba(255,255,255,.84)",
          margin: "20px auto 30px", maxWidth: 520, lineHeight: 1.6 }}>
          Ön kayıt birkaç saniye sürüyor. Okul açıldığında aylık ücretli olacak —
          ama şimdi kaydolursan erişimin ömür boyu ücretsiz kalacak.
        </p>
        {form.submitted ? (
          <div style={{ display: "inline-block", background: "rgba(255,255,255,.12)",
            border: "1px solid rgba(255,255,255,.25)", borderRadius: "var(--r-pill)", padding: "15px 30px",
            fontFamily: "var(--font-ui)", fontSize: 16, fontWeight: 600 }}>
            ✓ Ön kaydın tamamlandı — sırada {form.count.toLocaleString("tr-TR")}. kişisin
          </div>
        ) : (
          <button onClick={onScrollTop} style={{ ...btnAccent, fontSize: 17, padding: "17px 36px" }}>
            Ücretsiz ön kayıt ol →
          </button>
        )}
      </div>
    </section>
  );
}

/* ---------- footer ---------- */
function Footer() {
  return (
    <footer style={{ background: "var(--gy-ink)", color: "#fff", padding: "44px 26px 40px" }}>
      <div style={{ maxWidth: 1120, margin: "0 auto", display: "flex", flexWrap: "wrap", gap: 20,
        alignItems: "center", justifyContent: "space-between" }}>
        <GYLogo height={34} />
        <div style={{ display: "flex", gap: 22, alignItems: "center" }}>
          <a href={YT} target="_blank" rel="noopener" style={{ fontFamily: "var(--font-ui)", fontSize: 14,
            color: "rgba(255,255,255,.7)", textDecoration: "none" }}>YouTube</a>
          <span style={{ fontFamily: "var(--font-ui)", fontSize: 13, color: "rgba(255,255,255,.45)" }}>
            © 2026 Girişimci Yatırımcı
          </span>
        </div>
      </div>
      <p style={{ maxWidth: 1120, margin: "24px auto 0", paddingTop: 18, borderTop: "1px solid rgba(255,255,255,.1)",
        fontFamily: "var(--font-ui)", fontSize: 12.5, color: "rgba(255,255,255,.4)", lineHeight: 1.6 }}>
        Girişimci Yatırımcı Okulu eğitim amaçlıdır. Okul ileride aylık ücretli bir platform
        olacak; ön kayıt yapanlar ise ömür boyu ücretsiz erişir. Ön kayıt hiçbir ücret içermez.
      </p>
    </footer>
  );
}

Object.assign(window, { GiftBand, Curriculum, ModuleCard, Benefits, Community,
  MiniStat, YTGlyph, FAQ, FinalCTA, Footer, MODULES, BENEFITS, FAQS });