// ============================================================
// StatLeaders - data-led impact section
// ============================================================

function StatLeaders() {
  const stats = [
    {
      value: "500K+",
      label: "Gündüz nüfusu",
      note: "Merter ve çevresinin günlük hareket hacmi",
    },
    {
      value: "3.700+",
      label: "Şirket",
      note: "Kulübün kurumsal temas potansiyeli",
    },
    {
      value: "2021",
      label: "Kuruluş",
      note: "Hazırlık döneminin başladığı tarih",
    },
    {
      value: "4 Katman",
      label: "Kulüp yapısı",
      note: "Program, topluluk, yayın ve ortaklık omurgası",
    },
  ];

  const proofs = [
    "Yerel nüfus ve ticari hareket kulübün doğal görünürlük alanını büyütüyor.",
    "Kurumsal çevre, sürdürülebilir iş birlikleri için güçlü potansiyel sunuyor.",
    "Veri altyapısı ve düzenli organizasyon kulübün profesyonel standardını destekliyor.",
  ];

  return (
    <section id="etki" style={sl.wrap}>
      <div style={sl.overlay}></div>
      <div style={sl.inner}>
        <div style={sl.top}>
          <div style={sl.copy}>
            <div style={sl.eyebrow}>Etki Alanı / Merter ve Çevresi</div>
            <h2 style={sl.title}>
              Semtte güçlü bağ,
              <span style={sl.accent}> sahada net hedef.</span>
            </h2>
          </div>

          <div style={sl.statement}>
            Merter Akademi'nin dayandığı zemin nettir: hareketli bir bölge, güçlü yerel ağ ve
            büyümeye açık bir basketbol kültürü. Kulübün hedefi bu zemini düzenli organizasyon ve
            sürdürülebilir gelişimle kalıcı hale getirmektir.
            <a href="/etki/" style={sl.statementLink}>Tam etki sayfasını aç</a>
          </div>
        </div>

        <div style={sl.metricGrid}>
          {stats.map((item) => (
            <div key={item.label} style={sl.metric}>
              <div style={sl.metricLabel}>{item.label}</div>
              <div style={sl.metricValue}>{item.value}</div>
              <div style={sl.metricNote}>{item.note}</div>
            </div>
          ))}
        </div>

        <div style={sl.proofBand}>
          <div style={sl.proofLead}>
            <div style={sl.proofLeadLabel}>Kulübün Dayanakları</div>
            <div style={sl.proofLeadTitle}>Merter Akademi'nin büyüme alanı yalnızca saha çizgileriyle sınırlı değil.</div>
          </div>

          <div style={sl.proofList}>
            {proofs.map((item, index) => (
              <div key={item} style={sl.proofItem}>
                <div style={sl.proofIndex}>{String(index + 1).padStart(2, "0")}</div>
                <div style={sl.proofText}>{item}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

const sl = {
  wrap: {
    position: "relative",
    padding: "132px 0",
    background: "linear-gradient(180deg, #03140a 0%, #062513 100%)",
    overflow: "hidden",
    borderTop: "1px solid rgba(255,255,255,0.06)",
    borderBottom: "1px solid rgba(255,255,255,0.06)",
  },
  overlay: {
    position: "absolute",
    inset: 0,
    background:
      "radial-gradient(circle at 14% 28%, rgba(31,176,87,0.16) 0%, transparent 24%), radial-gradient(circle at 85% 20%, rgba(240,122,24,0.14) 0%, transparent 26%)",
    pointerEvents: "none",
  },
  inner: {
    position: "relative",
    zIndex: 2,
    maxWidth: 1480,
    margin: "0 auto",
    padding: "0 28px",
  },
  top: {
    display: "grid",
    gridTemplateColumns: "repeat(auto-fit, minmax(320px, 1fr))",
    gap: 30,
    alignItems: "end",
    marginBottom: 46,
  },
  copy: {
    maxWidth: 840,
  },
  eyebrow: {
    fontFamily: "var(--font-display)",
    fontWeight: 600,
    fontSize: 12,
    letterSpacing: "0.28em",
    textTransform: "uppercase",
    color: "var(--ma-orange-400)",
    marginBottom: 16,
  },
  title: {
    margin: 0,
    fontFamily: "var(--font-display)",
    fontWeight: 800,
    fontSize: "clamp(50px, 6.2vw, 92px)",
    lineHeight: 1.14,
    letterSpacing: "-0.03em",
    textTransform: "uppercase",
    color: "#fff",
    maxWidth: 860,
  },
  accent: {
    color: "var(--ma-green-400)",
  },
  statement: {
    marginLeft: "auto",
    maxWidth: 420,
    paddingTop: 16,
    borderTop: "1px solid rgba(255,255,255,0.14)",
    fontFamily: "var(--font-body)",
    fontSize: 17,
    lineHeight: 1.72,
    color: "rgba(255,255,255,0.76)",
    textWrap: "pretty",
  },
  statementLink: {
    display: "inline-block",
    marginTop: 18,
    color: "var(--ma-orange-300)",
    textDecoration: "none",
    fontFamily: "var(--font-display)",
    fontWeight: 700,
    fontSize: 12,
    letterSpacing: "0.16em",
    textTransform: "uppercase",
    borderBottom: "1px solid rgba(255,183,116,0.34)",
    paddingBottom: 4,
  },
  metricGrid: {
    display: "grid",
    gridTemplateColumns: "repeat(auto-fit, minmax(220px, 1fr))",
    gap: 22,
  },
  metric: {
    paddingTop: 18,
    minHeight: 210,
    borderTop: "1px solid rgba(255,255,255,0.14)",
    display: "flex",
    flexDirection: "column",
    justifyContent: "space-between",
  },
  metricLabel: {
    fontFamily: "var(--font-display)",
    fontWeight: 700,
    fontSize: 11,
    letterSpacing: "0.22em",
    textTransform: "uppercase",
    color: "var(--ma-green-300)",
  },
  metricValue: {
    marginTop: 20,
    fontFamily: "var(--font-stat)",
    fontWeight: 700,
    fontSize: "clamp(52px, 5vw, 76px)",
    lineHeight: 0.9,
    color: "#fff",
    letterSpacing: "-0.03em",
  },
  metricNote: {
    marginTop: 18,
    maxWidth: 250,
    fontFamily: "var(--font-body)",
    fontSize: 15,
    lineHeight: 1.62,
    color: "rgba(255,255,255,0.68)",
  },
  proofBand: {
    marginTop: 42,
    paddingTop: 28,
    borderTop: "1px solid rgba(255,255,255,0.1)",
    display: "grid",
    gridTemplateColumns: "repeat(auto-fit, minmax(280px, 1fr))",
    gap: 26,
    alignItems: "start",
  },
  proofLead: {
    maxWidth: 420,
  },
  proofLeadLabel: {
    fontFamily: "var(--font-display)",
    fontWeight: 700,
    fontSize: 11,
    letterSpacing: "0.22em",
    textTransform: "uppercase",
    color: "var(--ma-orange-300)",
    marginBottom: 10,
  },
  proofLeadTitle: {
    fontFamily: "var(--font-display)",
    fontWeight: 700,
    fontSize: "clamp(30px, 3.2vw, 46px)",
    lineHeight: 1.12,
    textTransform: "uppercase",
    color: "#fff",
  },
  proofList: {
    display: "grid",
    gridTemplateColumns: "repeat(auto-fit, minmax(220px, 1fr))",
    gap: 18,
  },
  proofItem: {
    paddingTop: 14,
    borderTop: "1px solid rgba(255,255,255,0.12)",
  },
  proofIndex: {
    fontFamily: "var(--font-stat)",
    fontWeight: 700,
    fontSize: 18,
    lineHeight: 1,
    color: "var(--ma-orange-400)",
    marginBottom: 10,
  },
  proofText: {
    fontFamily: "var(--font-body)",
    fontSize: 15,
    lineHeight: 1.62,
    color: "rgba(255,255,255,0.74)",
  },
};