// Anasayfa — "Siz kimsiniz?" framing, ücretsiz odaklı

function HomeHero() {
  return (
    <section style={{ padding: "64px 0 48px", borderBottom: "1px solid var(--ink)" }}>
      <div className="container">
        <div className="grid grid-12" style={{ gap: 32, alignItems: "end" }}>
          <div style={{ gridColumn: "span 8" }}>
            <div className="eyebrow accent" style={{ marginBottom: 16 }}>
              SAYI 042 · NİSAN 2026 · KOBİ İHRACAT REHBERİ
            </div>
            <h1 className="h-display">
              İhracat dünyasında <span style={{ fontStyle: "italic", fontFamily: "var(--f-serif)", fontWeight: 400 }}>yolunuzu bulmak</span> için tarafsız bir başlangıç noktası.
            </h1>
            <p className="lede" style={{ marginTop: 24, maxWidth: 720 }}>
              Akreditiften Eximbank'a, devlet desteklerinden kur riskine — devlet kurumlarından,
              bankalardan ve danışmanlardan bağımsız, doğrudan tarayıcınızda çalışan ücretsiz hesap araçları.
              Login yok, ücret yok, dış API yok. Tüm hesaplamalar bilgisayarınızda kalır.
            </p>
            <div style={{ display: "flex", gap: 12, marginTop: 32, flexWrap: "wrap" }}>
              <Link to="araclar" className="btn lg">
                Araçları gör →
              </Link>
              <Link to="rehber" className="btn ghost lg">
                Rehberleri oku
              </Link>
            </div>
            <div className="caption" style={{ marginTop: 20, fontFamily: "var(--f-mono)", fontSize: 11, letterSpacing: "0.04em" }}>
              KAYNAK: TÜİK, TİM, TCMB · Veri seti haftalık güncellenir · Tüm araçlar ücretsizdir
            </div>
          </div>
          <div style={{ gridColumn: "span 4" }}>
            <div className="card-pad" style={{ borderTop: "2px solid var(--ink)", borderBottom: "1px solid var(--rule)", paddingLeft: 0, paddingRight: 0 }}>
              <div className="eyebrow" style={{ marginBottom: 16 }}>BU HAFTA TÜRKİYE</div>
              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 20 }}>
                <div className="kpi">
                  <div className="kpi-label">2024 İHRACAT</div>
                  <div className="kpi-value">261,9<span style={{ fontSize: 14, color: "var(--ink-3)" }}> mlr $</span></div>
                  <div className="kpi-delta">+3,2% YoY</div>
                </div>
                <div className="kpi">
                  <div className="kpi-label">İHRACATÇI FİRMA</div>
                  <div className="kpi-value">139.830</div>
                  <div className="kpi-delta">+15.106 yeni</div>
                </div>
                <div className="kpi">
                  <div className="kpi-label">KOBİ PAYI</div>
                  <div className="kpi-value">%29,6</div>
                  <div className="kpi-delta neg">−0,4 pp</div>
                </div>
                <div className="kpi">
                  <div className="kpi-label">E-İHRACAT</div>
                  <div className="kpi-value">6,4<span style={{ fontSize: 14, color: "var(--ink-3)" }}> mlr $</span></div>
                  <div className="kpi-delta">+%28 YoY</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function HomeWhoAreYou() {
  const [active, setActive] = useState(1);
  const profiles = [
    {
      id: 0,
      tag: "Kurulu ihracatçı",
      name: "Orta-büyük ölçekli KOBİ ekibi",
      city: "50-250 çalışan · Bursa, Kocaeli, İstanbul",
      problem: "Eximbank kredileri arasında kayboldunuz. KDV iadesi neden 6-8 ay sürüyor? Devletten daha fazla destek alabilir misiniz?",
      solution: "Eximbank Simülatörü + Destek Bulucu",
      cta: "araclar/eximbank",
      kpi: { l: "Tipik tasarruf", v: "%18", d: "Ticari banka faizine kıyasla" },
    },
    {
      id: 1,
      tag: "İhracata yeni başlayan",
      name: "Küçük ölçekli işletme sahibi",
      city: "10-50 çalışan · Konya, Kayseri, Denizli",
      problem: "İhracat yapma yolculuğunuz ilk adımda. Hangi belgeler, nasıl ödenir, devlet desteği var mı — tüm soruların cevapları burada.",
      solution: "Destek Bulucu → Rehber → Hemen hesapla",
      cta: "araclar/destek",
      kpi: { l: "Cevaplandırılan adım", v: "4", d: "Baştan sona" },
    },
    {
      id: 2,
      tag: "E-ticaret girişimcisi",
      name: "Etsy / Amazon Global / Trendyol International",
      city: "1-10 kişi · İstanbul, Ankara",
      problem: "Pazaryeri komisyonu, kur farkları, nakliye bedeli — gerçek kârınız ne? Öğrenin ve optimizasyona başlayın.",
      solution: "E-İhracat Kârlılığı + Pazaryeri Analizi",
      cta: "araclar/eihracat-karlilik",
      kpi: { l: "Net marj keşfi", v: "+8,4 pp", d: "Optimize edildikçe" },
    },
    {
      id: 3,
      tag: "Deneyimli ihracatçı",
      name: "Düzenli sevkiyat yapan KOBİ",
      city: "Çoklu ülke · Tekstil, mobilya, gıda",
      problem: "Akreditif problemleri, kur riskinin yönetimi, KDV gecikmeleri — bu sorunları çözmek için doğru araçlar lazım.",
      solution: "Akreditif Tarayıcı → Kur Riski → İleri araçlar",
      cta: "araclar/akreditif",
      kpi: { l: "Sık sorun maliyeti", v: "150-500 $", d: "Başına kaçınılabilir" },
    },
  ];
  const p = profiles[active];
  return (
    <section className="section" style={{ paddingTop: 80, paddingBottom: 80 }}>
      <div className="container">
        <SectionHead
          kicker="Hangi adımdasınız?"
          title="Sizi beklemeyen yol yoktur."
          lede="İhracat başladığınız yerden başlar. Aşağıdaki dört başlangıç noktasından sizinkine tıklayıp, hemen hazırlanan araçlarını ve kişiselleştirilmiş rehberleri keşfedin."
        />

        <div style={{ display: "grid", gridTemplateColumns: "260px 1fr", gap: 48 }}>
          <div style={{ display: "flex", flexDirection: "column" }}>
            {profiles.map((per) => (
              <button
                key={per.id}
                onClick={() => setActive(per.id)}
                style={{
                  textAlign: "left",
                  padding: "16px 0",
                  background: "transparent",
                  border: 0,
                  borderTop: "1px solid var(--rule)",
                  borderLeft: active === per.id ? "3px solid var(--accent)" : "3px solid transparent",
                  paddingLeft: 16,
                  cursor: "pointer",
                  color: active === per.id ? "var(--ink)" : "var(--ink-3)",
                }}
              >
                <div className="eyebrow" style={{ color: active === per.id ? "var(--accent-2)" : "var(--ink-3)" }}>
                  Profil 0{per.id + 1}
                </div>
                <div style={{ fontWeight: 600, marginTop: 4 }}>{per.tag}</div>
              </button>
            ))}
            <div style={{ borderTop: "1px solid var(--rule)" }} />
          </div>

          <div>
            <div className="eyebrow primary">PROFİL · {p.tag}</div>
            <h3 className="h-2" style={{ marginTop: 8, marginBottom: 4 }}>{p.name}</h3>
            <div className="caption">{p.city}</div>

            <div className="persona-quote" style={{ marginTop: 24 }}>
              "{p.problem}"
            </div>

            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 32, marginTop: 32 }}>
              <div>
                <div className="eyebrow" style={{ marginBottom: 8 }}>ihracathub'da bulacağınız</div>
                <h4 className="h-3" style={{ margin: "0 0 12px" }}>{p.solution}</h4>
                <Link to={p.cta} className="btn">İncele →</Link>
              </div>
              <div className="kpi" style={{ borderTopColor: "var(--accent)" }}>
                <div className="kpi-label">{p.kpi.l}</div>
                <div className="kpi-value" style={{ color: "var(--accent-2)" }}>{p.kpi.v}</div>
                <div className="caption">{p.kpi.d}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function HomeTools() {
  const tools = [
    { to: "araclar/karlilik", n: "01", t: "Kârlılık & Landed Cost", d: "Çıkış + navlun + varış vergisi + KDV — tek sayfada net marj.", tag: "ÜCRETSİZ" },
    { to: "araclar/eximbank", n: "02", t: "Eximbank Simülatörü", d: "Eximbank kredi ürünleri için ödeme planı ve ticari banka kıyası.", tag: "ÜCRETSİZ" },
    { to: "araclar/akreditif", n: "03", t: "Akreditif Tarayıcı", d: "UCP 600 ihlali tespit listesi, 12 sık rezerv, banka maliyeti.", tag: "ÜCRETSİZ" },
    { to: "araclar/destek", n: "04", t: "Destek Bulucu", d: "KOSGEB, Ticaret Bakanlığı, Eximbank, TÜBİTAK destek programları.", tag: "ÜCRETSİZ" },
    { to: "araclar/kur", n: "05", t: "Kur Riski Tarayıcı", d: "Açık döviz pozisyonu için senaryo + forward karşılaştırma.", tag: "ÜCRETSİZ" },
    { to: "rehber", n: "06", t: "Rehber kütüphanesi", d: "Akreditif, INCOTERMS, A.TR vs EUR.1 — KOBİ diline indirgenmiş.", tag: "ÜCRETSİZ" },
  ];
  return (
    <section className="section cream" style={{ borderTop: "1px solid var(--rule)" }}>
      <div className="container">
        <SectionHead
          kicker="Araç kütüphanesi"
          title="Ücretsiz hesap araçları. Hiçbiri login istemez."
          lede="Hepsi tarayıcınızda çalışır. Veriler resmi kaynaklardan kürate edilir, dış API çağrısı yapılmaz, hesaplamalarınız sunucuya gitmez."
          action={<Link to="araclar" className="btn ghost">Tümünü gör →</Link>}
        />

        <div className="grid grid-3">
          {tools.map((tool) => (
            <Link to={tool.to} key={tool.n} className="tool-card">
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
                <span className="mono" style={{ fontSize: 11, color: "var(--ink-3)", letterSpacing: "0.1em" }}>{tool.n}</span>
                <span className="tag pos">{tool.tag}</span>
              </div>
              <div className="h-3" style={{ marginTop: 4 }}>{tool.t}</div>
              <div className="caption">{tool.d}</div>
              <span className="arrow">→</span>
            </Link>
          ))}
        </div>
      </div>
    </section>
  );
}

function HomeRehberler() {
  const articles = (window.IH_DATA?.rehberler || []).filter(a => !["cbam-2026"].includes(a.id)).slice(0, 4);
  return (
    <section className="section" style={{ borderTop: "1px solid var(--rule)" }}>
      <div className="container">
        <SectionHead
          kicker="Rehber kütüphanesi"
          title="KOBİ diline indirgenmiş ihracat rehberleri."
          lede="Mevzuat dili düzeltilir, sade Türkçeyle yazılır. Her rehber bir hesap aracıyla birlikte gelir."
          action={<Link to="rehber" className="btn ghost">Tümü →</Link>}
        />
        <div className="grid grid-4">
          {articles.map((a) => (
            <Link to={"rehber/" + a.id} key={a.id} className="tool-card">
              <div className="eyebrow accent">{a.cat}</div>
              <div className="h-3" style={{ marginTop: 4 }}>{a.title}</div>
              <div className="caption">{a.excerpt}</div>
              <div style={{ display: "flex", justifyContent: "space-between", marginTop: 8, fontFamily: "var(--f-mono)", fontSize: 11, color: "var(--ink-3)" }}>
                <span>{a.date}</span>
                <span>{a.time} dk okuma</span>
              </div>
            </Link>
          ))}
        </div>
      </div>
    </section>
  );
}

function HomeManifesto() {
  return (
    <section className="section cream">
      <div className="container">
        <div className="grid grid-12" style={{ gap: 48, alignItems: "start" }}>
          <div style={{ gridColumn: "span 4" }}>
            <div className="eyebrow accent">MANIFESTO</div>
            <h2 className="h-1" style={{ marginTop: 16 }}>Bağımsız demek ne demek?</h2>
          </div>
          <div style={{ gridColumn: "span 8" }}>
            <div className="grid grid-2">
              {[
                { n: "01", t: "Hiçbir kurum bizi finanse etmiyor.", d: "Eximbank, KOSGEB veya bir banka ortağımız değil. Hesaplamalarımız ve yönlendirmelerimiz tarafsızdır." },
                { n: "02", t: "Veri kaynağı her zaman gösterilir.", d: "Her hesaplayıcı kullandığı verinin kaynağını ve son güncelleme tarihini açıkça bildirir. Hesap formülleri açıktır." },
                { n: "03", t: "Sonsuza kadar ücretsiz.", d: "Tüm araçlar ücretsizdir, login istemez. Hiçbir veriniz sunucuya gönderilmez." },
                { n: "04", t: "Türkçe ilk vatandaş.", d: "İçerik Türkçe yazılır, İngilizce çevrilmez. Mevzuat dili düzeltilir, KOBİ diline indirgenir." },
              ].map((m) => (
                <div key={m.n}>
                  <div className="mono caption" style={{ color: "var(--accent-2)", fontSize: 12 }}>{m.n}</div>
                  <div className="h-3" style={{ marginTop: 4, marginBottom: 8 }}>{m.t}</div>
                  <div className="body" style={{ fontSize: 14 }}>{m.d}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function HomeFinalCTA() {
  return (
    <section style={{ background: "var(--ink)", color: "var(--paper)", padding: "96px 0" }}>
      <div className="container">
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "end", gap: 32, flexWrap: "wrap" }}>
          <div style={{ flex: 1, minWidth: 320, maxWidth: 720 }}>
            <div className="eyebrow accent" style={{ color: "var(--accent)" }}>BAŞLAYIN</div>
            <h2 className="h-1" style={{ color: "var(--paper)", marginTop: 16 }}>
              Tüm araçlar ücretsiz. Üç dakikada ilk hesabınızı yapın.
            </h2>
            <p className="lede" style={{ color: "#C7BFB0", marginTop: 16 }}>
              Hesaplamalarınız tarayıcınızda kalır. Login yok, kayıt yok, dış API çağrısı yok.
            </p>
          </div>
          <Link to="araclar" className="btn accent lg">Araçları gör →</Link>
        </div>
      </div>
    </section>
  );
}

function HomePage() {
  return (
    <>
      <HomeHero />
      <HomeWhoAreYou />
      <HomeTools />
      <HomeRehberler />
      <HomeManifesto />
      <HomeFinalCTA />
    </>
  );
}

window.HomePage = HomePage;