// ============================================================
// AboutBrief - club identity and founders
// ClubPrograms - year-round programming bands
// SeasonRhythm - homepage publishing logic
// NewsGrid - editorial flexible content area
// SponsorContact - premium partnership CTA
// SiteFooter - closing footer
// ============================================================

function AboutBrief() {
  const founders = [
    {
      name: "Yiğit Ünel",
      role: "Spor yönetimi / operasyon",
      note: "Saha düzeni, maç günü akışı ve kulüp işleyişinin operasyon omurgası.",
      photo: "../assets/founder-yigit.png",
    },
    {
      name: "Süheyl Arvas",
      role: "Kulüp yönetimi / iş ortaklıkları",
      note: "Kurumsal ilişki, bütçe ve sponsorluk modelinin iş geliştirme tarafı.",
      photo: "../assets/founder-hakan.png",
    },
    {
      name: "Hakan Ergün",
      role: "Veri bilimi / yapay zeka",
      note: "Ölçümleme, raporlama ve veri odaklı kulüp altyapısının teknoloji katmanı.",
      photo: "../assets/founder-suheyl.png",
    },
  ];

  const facts = [
    { label: "3 kurucu alan", text: "spor yönetimi, iş geliştirme ve veri altyapısı aynı kulüp omurgasında birleşiyor." },
    { label: "1 semt odağı", text: "Merter'in basketbol kültürü ile yerel ilişki ağı aynı hedefte buluşuyor." },
    { label: "Uzun vadeli yapı", text: "kulüp, günübirlik heyecandan değil düzenli gelişim ve sürdürülebilirlikten besleniyor." },
  ];

  return (
    <section id="kulup" style={ab.wrap}>
      <div style={ab.inner}>
        <div style={ab.top}>
          <div style={ab.copy}>
            <div style={ab.eyebrow}>Kulüp / Hakkımızda</div>
            <h2 style={ab.title}>
              Merter'de kurulan,
              <span style={ab.accent}> gelişime odaklanan basketbol kulübü.</span>
            </h2>
          </div>

          <div style={ab.manifesto}>
            Merter Akademi; rekabetçi basketbolu, disiplinli organizasyonu ve yerel aidiyeti aynı
            çatı altında bir araya getiren genç bir kulüptür. Kurucu ekip, sportif hedefleri
            kurumsal ciddiyet ve veri desteğiyle birlikte büyütmeyi amaçlar.
          </div>
        </div>

        <div style={ab.peopleRow}>
          {founders.map((founder) => (
            <article key={founder.name} style={ab.person}>
              <div
                style={{
                  ...ab.photo,
                  backgroundImage:
                    `linear-gradient(180deg, rgba(12,18,14,0.04) 0%, rgba(12,18,14,0.24) 40%, rgba(12,18,14,0.02) 100%), url('${founder.photo}')`,
                }}
              ></div>
              <div style={ab.personMeta}>
                <div style={ab.role}>{founder.role}</div>
                <div style={ab.name}>{founder.name}</div>
                <div style={ab.note}>{founder.note}</div>
              </div>
            </article>
          ))}
        </div>

        <div style={ab.factBand}>
          {facts.map((item) => (
            <div key={item.label} style={ab.fact}>
              <div style={ab.factLabel}>{item.label}</div>
              <div style={ab.factText}>{item.text}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

const ab = {
  wrap: {
    padding: "128px 0",
    background: "linear-gradient(180deg, #f4efe7 0%, #ece5db 100%)",
    color: "var(--fg-light-1)",
  },
  inner: {
    maxWidth: 1480,
    margin: "0 auto",
    padding: "0 28px",
  },
  top: {
    display: "grid",
    gridTemplateColumns: "repeat(auto-fit, minmax(320px, 1fr))",
    gap: 28,
    alignItems: "end",
    marginBottom: 42,
  },
  copy: {
    maxWidth: 840,
  },
  eyebrow: {
    fontFamily: "var(--font-display)",
    fontWeight: 600,
    fontSize: 12,
    letterSpacing: "0.28em",
    textTransform: "uppercase",
    color: "var(--ma-orange-600)",
    marginBottom: 16,
  },
  title: {
    margin: 0,
    fontFamily: "var(--font-display)",
    fontWeight: 800,
    fontSize: "clamp(52px, 6.2vw, 96px)",
    lineHeight: 1.14,
    letterSpacing: "-0.03em",
    textTransform: "uppercase",
    color: "var(--fg-light-1)",
  },
  accent: {
    color: "var(--ma-green-800)",
  },
  manifesto: {
    marginLeft: "auto",
    maxWidth: 430,
    paddingTop: 18,
    borderTop: "1px solid rgba(7,26,14,0.18)",
    fontFamily: "var(--font-body)",
    fontSize: 18,
    lineHeight: 1.72,
    color: "var(--fg-light-2)",
    textWrap: "pretty",
  },
  peopleRow: {
    display: "grid",
    gridTemplateColumns: "repeat(auto-fit, minmax(220px, 280px))",
    gap: 24,
    justifyContent: "space-between",
  },
  person: {
    display: "flex",
    flexDirection: "column",
    gap: 14,
  },
  photo: {
    width: "100%",
    maxWidth: 260,
    aspectRatio: "4 / 3.55",
    backgroundSize: "cover",
    backgroundPosition: "center",
    borderRadius: 4,
    boxShadow: "0 18px 30px rgba(0,0,0,0.08)",
  },
  personMeta: {
    maxWidth: 260,
    paddingTop: 16,
    borderTop: "1px solid rgba(7,26,14,0.14)",
  },
  role: {
    fontFamily: "var(--font-display)",
    fontWeight: 700,
    fontSize: 11,
    letterSpacing: "0.22em",
    textTransform: "uppercase",
    color: "var(--ma-green-800)",
    marginBottom: 10,
  },
  name: {
    fontFamily: "var(--font-display)",
    fontWeight: 800,
    fontSize: "clamp(30px, 3vw, 42px)",
    lineHeight: 1.12,
    textTransform: "uppercase",
    color: "var(--fg-light-1)",
  },
  note: {
    marginTop: 10,
    fontFamily: "var(--font-body)",
    fontSize: 15,
    lineHeight: 1.66,
    color: "var(--fg-light-2)",
  },
  factBand: {
    marginTop: 38,
    paddingTop: 24,
    borderTop: "1px solid rgba(7,26,14,0.16)",
    display: "grid",
    gridTemplateColumns: "repeat(auto-fit, minmax(220px, 1fr))",
    gap: 22,
  },
  fact: {
    paddingTop: 12,
    borderTop: "1px solid rgba(7,26,14,0.12)",
  },
  factLabel: {
    fontFamily: "var(--font-display)",
    fontWeight: 700,
    fontSize: 11,
    letterSpacing: "0.22em",
    textTransform: "uppercase",
    color: "var(--ma-orange-600)",
    marginBottom: 10,
  },
  factText: {
    fontFamily: "var(--font-body)",
    fontSize: 15,
    lineHeight: 1.62,
    color: "var(--fg-light-2)",
  },
};

// ============================================================

function ClubPrograms() {
  const lanes = [
    {
      eyebrow: "Oyuncu gelişimi",
      title: "Antrenman kültürü her haftanın temelidir.",
      body:
        "Takımın gelişimi düzenli çalışma, tekrar ve teknik takip ile ilerler. Hazırlık dönemi de maç dönemi kadar ciddi ve planlı biçimde ele alınır.",
      details: ["bireysel gelişim", "haftalık antrenman planı", "hazırlık süreci"],
      image: "../assets/street-day.png",
    },
    {
      eyebrow: "Semt ilişkisi",
      title: "Kulüp, Merter'in sosyal dokusu içinde yer alır.",
      body:
        "Yerel etkinlikler, okul temasları ve açık basketbol kültürü kulübün çevresiyle bağını güçlendirir. Böylece kulüp yalnızca salonla sınırlı bir yapı olarak kalmaz.",
      details: ["yerel iş birlikleri", "etkinlik katılımı", "topluluk bağı"],
      image: "../assets/street-night.png",
      reverse: true,
    },
    {
      eyebrow: "Kurucu ortaklık",
      title: "Marka ortaklıklarını uzun vadeli ve ölçülebilir bir yapıda kuruyoruz.",
      body:
        "Sponsorluk yaklaşımı yalnızca logo görünürlüğüne dayanmaz. Dijital içerik, saha deneyimi ve düzenli geri bildirim birlikte planlanan bir iş birliği modeli oluşturur.",
      details: ["dijital görünürlük", "saha içi temas", "geri bildirim ve raporlama"],
      image: "../assets/team-photo.png",
    },
  ];

  return (
    <section id="programlar" style={cp.wrap}>
      <div style={cp.inner}>
        <div style={cp.head}>
          <div style={cp.eyebrow}>Programlar / Kulüp Yapısı</div>
          <h2 style={cp.title}>
            Sahada, semtte ve ortaklıklarda
            <span style={cp.accent}> aynı ciddiyet.</span>
          </h2>
          <p style={cp.lead}>
            Merter Akademi'nin yapısı yalnızca maç takviminden ibaret değil. Oyuncu gelişimi,
            topluluk kültürü ve kurumsal iş birlikleri sezon boyunca aynı disiplinle ilerliyor.
          </p>
        </div>

        <div style={cp.rows}>
          {lanes.map((lane) => (
            <article key={lane.title} style={cp.row}>
              <div style={{ ...cp.media, ...(lane.reverse ? cp.mediaReverse : {}) }}>
                <div
                  style={{
                    ...cp.mediaImage,
                    backgroundImage:
                      `linear-gradient(180deg, rgba(4,33,15,0.08) 0%, rgba(4,33,15,0.42) 56%, rgba(4,33,15,0.82) 100%), url('${lane.image}')`,
                  }}
                ></div>
              </div>

              <div style={{ ...cp.content, ...(lane.reverse ? cp.contentReverse : {}) }}>
                <div style={cp.rowEyebrow}>{lane.eyebrow}</div>
                <h3 style={cp.rowTitle}>{lane.title}</h3>
                <p style={cp.rowBody}>{lane.body}</p>
                <div style={cp.detailList}>
                  {lane.details.map((item) => (
                    <div key={item} style={cp.detailItem}>
                      {item}
                    </div>
                  ))}
                </div>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

const cp = {
  wrap: {
    padding: "132px 0",
    background: "linear-gradient(180deg, #04180c 0%, #082715 100%)",
  },
  inner: {
    maxWidth: 1480,
    margin: "0 auto",
    padding: "0 28px",
  },
  head: {
    maxWidth: 860,
    marginBottom: 44,
  },
  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, 6vw, 92px)",
    lineHeight: 1.14,
    letterSpacing: "-0.03em",
    textTransform: "uppercase",
    color: "#fff",
  },
  accent: {
    color: "var(--ma-green-400)",
  },
  lead: {
    marginTop: 18,
    maxWidth: 760,
    fontFamily: "var(--font-body)",
    fontSize: 17,
    lineHeight: 1.7,
    color: "rgba(255,255,255,0.76)",
  },
  rows: {
    display: "grid",
    gap: 22,
  },
  row: {
    display: "grid",
    gridTemplateColumns: "repeat(auto-fit, minmax(320px, 1fr))",
    alignItems: "stretch",
    gap: 24,
    padding: "26px 0",
    borderTop: "1px solid rgba(255,255,255,0.08)",
  },
  media: {
    minHeight: 420,
    order: 1,
  },
  mediaReverse: {
    order: 2,
  },
  mediaImage: {
    width: "100%",
    height: "100%",
    minHeight: 420,
    borderRadius: 4,
    backgroundSize: "cover",
    backgroundPosition: "center",
    boxShadow: "0 30px 50px rgba(0,0,0,0.18)",
  },
  content: {
    order: 2,
    display: "flex",
    flexDirection: "column",
    justifyContent: "center",
    minWidth: 0,
    maxWidth: 560,
  },
  contentReverse: {
    order: 1,
  },
  rowEyebrow: {
    fontFamily: "var(--font-display)",
    fontWeight: 700,
    fontSize: 11,
    letterSpacing: "0.22em",
    textTransform: "uppercase",
    color: "var(--ma-orange-300)",
    marginBottom: 12,
  },
  rowTitle: {
    margin: 0,
    fontFamily: "var(--font-display)",
    fontWeight: 800,
    fontSize: "clamp(34px, 4vw, 58px)",
    lineHeight: 1.12,
    textTransform: "uppercase",
    color: "#fff",
  },
  rowBody: {
    margin: "16px 0 0",
    fontFamily: "var(--font-body)",
    fontSize: 17,
    lineHeight: 1.72,
    color: "rgba(255,255,255,0.78)",
  },
  detailList: {
    marginTop: 22,
    display: "grid",
    gap: 10,
  },
  detailItem: {
    paddingTop: 10,
    borderTop: "1px solid rgba(255,255,255,0.12)",
    fontFamily: "var(--font-display)",
    fontWeight: 600,
    fontSize: 13,
    letterSpacing: "0.12em",
    textTransform: "uppercase",
    color: "rgba(255,255,255,0.76)",
  },
};

// ============================================================

function SeasonRhythm() {
  const steps = [
    {
      mode: "Hazırlık",
      title: "Sezon öncesinde fiziksel ve teknik temel kurulur.",
      body: "Oyuncu grubu, antrenman düzeni ve takım disiplini bu dönemde şekillenir. Kulübün sezon içi standardı hazırlık aşamasında belirlenir.",
    },
    {
      mode: "Rekabet",
      title: "Lig dönemi boyunca performans ve takım standardı korunur.",
      body: "Maç haftaları kulübün rekabet yüzünü öne çıkarır; antrenman, hazırlık ve teknik takip ise bu dönemin arka planını oluşturur.",
    },
    {
      mode: "Topluluk",
      title: "Sezon içinde kulüp semtle bağını canlı tutar.",
      body: "Etkinlikler, açık basketbol kültürü ve yerel temas kulübün Merter içindeki aidiyetini güçlendirir.",
    },
    {
      mode: "Değerlendirme",
      title: "Sezon sonunda performans ve iş birlikleri yeniden gözden geçirilir.",
      body: "Sportif çıktı, organizasyon kalitesi ve ortaklık geri dönüşleri birlikte değerlendirilerek bir sonraki dönemin planı hazırlanır.",
    },
  ];

  const modules = ["hazırlık kampı", "lig dönemi", "topluluk etkinliği", "oyuncu takibi", "sponsor buluşmaları"];

  return (
    <section id="ritim" style={sr.wrap}>
      <div style={sr.overlay}></div>
      <div style={sr.inner}>
        <div style={sr.left}>
          <div style={sr.eyebrow}>Sezon Planı / Kulüp Takvimi</div>
          <h2 style={sr.title}>
            Hazırlık, rekabet, topluluk;
            <span style={sr.accent}> aynı döngünün parçaları.</span>
          </h2>
          <p style={sr.lead}>
            Merter Akademi'nin yılı tek bir maç takvimine değil; hazırlık, rekabet ve sürdürülebilir
            gelişim döngüsüne dayanır. Kulübün temposu bu ana başlıklar üzerinden ilerler.
          </p>

          <div style={sr.moduleBand}>
            {modules.map((item) => (
              <span key={item} style={sr.module}>
                {item}
              </span>
            ))}
          </div>
        </div>

        <div style={sr.timeline}>
          {steps.map((item, index) => (
            <div key={item.mode} style={sr.step}>
              <div style={sr.stepIndex}>{String(index + 1).padStart(2, "0")}</div>
              <div style={sr.stepBody}>
                <div style={sr.stepMode}>{item.mode}</div>
                <div style={sr.stepTitle}>{item.title}</div>
                <div style={sr.stepText}>{item.body}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

const sr = {
  wrap: {
    position: "relative",
    padding: "128px 0",
    background: "linear-gradient(180deg, #082d17 0%, #04170b 100%)",
    overflow: "hidden",
  },
  overlay: {
    position: "absolute",
    inset: 0,
    background:
      "linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px), linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px)",
    backgroundSize: "84px 84px",
    opacity: 0.18,
    pointerEvents: "none",
  },
  inner: {
    position: "relative",
    zIndex: 2,
    maxWidth: 1480,
    margin: "0 auto",
    padding: "0 28px",
    display: "grid",
    gridTemplateColumns: "repeat(auto-fit, minmax(320px, 1fr))",
    gap: 36,
    alignItems: "start",
  },
  left: {
    maxWidth: 440,
  },
  eyebrow: {
    fontFamily: "var(--font-display)",
    fontWeight: 600,
    fontSize: 12,
    letterSpacing: "0.28em",
    textTransform: "uppercase",
    color: "var(--ma-green-300)",
    marginBottom: 16,
  },
  title: {
    margin: 0,
    fontFamily: "var(--font-display)",
    fontWeight: 800,
    fontSize: "clamp(48px, 5.8vw, 86px)",
    lineHeight: 1.14,
    letterSpacing: "-0.03em",
    textTransform: "uppercase",
    color: "#fff",
  },
  accent: {
    color: "var(--ma-orange-500)",
  },
  lead: {
    marginTop: 18,
    fontFamily: "var(--font-body)",
    fontSize: 17,
    lineHeight: 1.72,
    color: "rgba(255,255,255,0.76)",
  },
  moduleBand: {
    marginTop: 26,
    display: "flex",
    gap: 10,
    flexWrap: "wrap",
  },
  module: {
    padding: "8px 12px",
    borderRadius: 999,
    border: "1px solid rgba(255,255,255,0.12)",
    background: "rgba(255,255,255,0.04)",
    color: "rgba(255,255,255,0.82)",
    fontFamily: "var(--font-display)",
    fontWeight: 600,
    fontSize: 11,
    letterSpacing: "0.16em",
    textTransform: "uppercase",
  },
  timeline: {
    display: "grid",
    gap: 14,
  },
  step: {
    display: "grid",
    gridTemplateColumns: "auto 1fr",
    gap: 16,
    padding: "18px 0",
    borderTop: "1px solid rgba(255,255,255,0.12)",
  },
  stepIndex: {
    fontFamily: "var(--font-stat)",
    fontWeight: 700,
    fontSize: 24,
    lineHeight: 1,
    color: "var(--ma-orange-400)",
    minWidth: 38,
  },
  stepBody: {
    minWidth: 0,
  },
  stepMode: {
    fontFamily: "var(--font-display)",
    fontWeight: 700,
    fontSize: 11,
    letterSpacing: "0.22em",
    textTransform: "uppercase",
    color: "var(--ma-green-300)",
    marginBottom: 10,
  },
  stepTitle: {
    fontFamily: "var(--font-display)",
    fontWeight: 700,
    fontSize: "clamp(26px, 3vw, 38px)",
    lineHeight: 1.12,
    textTransform: "uppercase",
    color: "#fff",
    maxWidth: 780,
  },
  stepText: {
    marginTop: 10,
    maxWidth: 720,
    fontFamily: "var(--font-body)",
    fontSize: 15,
    lineHeight: 1.68,
    color: "rgba(255,255,255,0.72)",
  },
};

// ============================================================

function NewsGrid() {
  const items = [
    {
      tag: "Program",
      title: "Açık antrenman günleri ve hazırlık notları",
      body: "Takımın çalışma düzeni ve oyuncu gelişimi hakkında düzenli bilgi veren içerik hattı.",
    },
    {
      tag: "Topluluk",
      title: "Semt görünürlüğü ve yerel etkinlik penceresi",
      body: "Kulübün Merter ile bağını güçlendiren sosyal ve yerel temas başlıklarını öne çıkarır.",
    },
    {
      tag: "Maç Haftası",
      title: "Fikstür ve maç notları öne çıkar",
      body: "Karşılaşma dönemlerinde maç bilgisi, sonuç ve öne çıkan notlar burada yer alır.",
    },
    {
      tag: "Ortaklık",
      title: "Sponsor anlatısı dosya ve raporlarla derinleşir",
      body: "İş birliklerinin kapsamı, görünürlük alanı ve geri dönüşü bu başlık altında netleşir.",
    },
  ];

  return (
    <section id="haberler" style={ng.wrap}>
      <div style={ng.inner}>
        <div style={ng.head}>
          <div style={ng.eyebrow}>Gündem / Duyurular</div>
          <h2 style={ng.title}>
            Kulüpte öne çıkan
            <span style={ng.accent}> başlıklar.</span>
          </h2>
          <p style={ng.lead}>
            Duyurular, program notları, maç haftaları ve iş birlikleri sezon boyunca bu alanda öne çıkar.
          </p>
        </div>

        <div style={ng.layout}>
          <article style={ng.feature}>
            <div style={ng.featureImage}></div>
            <div style={ng.featureBody}>
              <div style={ng.featureTag}>Bu ay öne çıkan</div>
              <h3 style={ng.featureTitle}>Merter Akademi, sahadaki rekabeti semt kültürüyle birlikte büyütüyor.</h3>
              <p style={ng.featureText}>
                Kulübün hikayesi yalnızca maç sonucundan ibaret değil. Antrenman kültürü, topluluk
                bağı ve kurumsal iş birlikleri aynı marka kimliğini besleyen başlıklar olarak ilerliyor.
              </p>
              <a
                href="/gundem/"
                style={ng.featureLink}
              >
                Gündem sayfasını aç
              </a>
            </div>
          </article>

          <div style={ng.rail}>
            {items.map((item, index) => (
              <article key={item.title} style={ng.row}>
                <div style={ng.rowMeta}>
                  <div style={ng.rowIndex}>{String(index + 1).padStart(2, "0")}</div>
                  <div style={ng.rowTag}>{item.tag}</div>
                </div>
                <div style={ng.rowCopy}>
                  <div style={ng.rowTitle}>{item.title}</div>
                  <div style={ng.rowText}>{item.body}</div>
                </div>
              </article>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

const ng = {
  wrap: {
    padding: "128px 0",
    background: "linear-gradient(180deg, #f6f2eb 0%, #efe7dc 100%)",
    color: "var(--fg-light-1)",
  },
  inner: {
    maxWidth: 1480,
    margin: "0 auto",
    padding: "0 28px",
  },
  head: {
    maxWidth: 840,
    marginBottom: 38,
  },
  eyebrow: {
    fontFamily: "var(--font-display)",
    fontWeight: 600,
    fontSize: 12,
    letterSpacing: "0.28em",
    textTransform: "uppercase",
    color: "var(--ma-green-800)",
    marginBottom: 16,
  },
  title: {
    margin: 0,
    fontFamily: "var(--font-display)",
    fontWeight: 800,
    fontSize: "clamp(48px, 5.8vw, 90px)",
    lineHeight: 1.14,
    letterSpacing: "-0.03em",
    textTransform: "uppercase",
    color: "var(--fg-light-1)",
  },
  accent: {
    color: "var(--ma-orange-600)",
  },
  lead: {
    marginTop: 18,
    maxWidth: 720,
    fontFamily: "var(--font-body)",
    fontSize: 17,
    lineHeight: 1.7,
    color: "var(--fg-light-2)",
  },
  layout: {
    display: "grid",
    gridTemplateColumns: "repeat(auto-fit, minmax(320px, 1fr))",
    gap: 28,
    alignItems: "start",
  },
  feature: {
    display: "grid",
    gap: 20,
  },
  featureImage: {
    minHeight: 500,
    borderRadius: 4,
    backgroundImage:
      "linear-gradient(180deg, rgba(4,33,15,0.08) 0%, rgba(4,33,15,0.36) 50%, rgba(4,33,15,0.72) 100%), url('../assets/street-night.png')",
    backgroundSize: "cover",
    backgroundPosition: "center",
    boxShadow: "0 24px 44px rgba(0,0,0,0.1)",
  },
  featureBody: {
    paddingTop: 16,
    borderTop: "1px solid rgba(7,26,14,0.16)",
    maxWidth: 620,
  },
  featureTag: {
    fontFamily: "var(--font-display)",
    fontWeight: 700,
    fontSize: 11,
    letterSpacing: "0.22em",
    textTransform: "uppercase",
    color: "var(--ma-orange-600)",
    marginBottom: 12,
  },
  featureTitle: {
    margin: 0,
    fontFamily: "var(--font-display)",
    fontWeight: 800,
    fontSize: "clamp(34px, 4vw, 56px)",
    lineHeight: 1.12,
    textTransform: "uppercase",
    color: "var(--fg-light-1)",
  },
  featureText: {
    marginTop: 14,
    fontFamily: "var(--font-body)",
    fontSize: 16,
    lineHeight: 1.68,
    color: "var(--fg-light-2)",
  },
  featureLink: {
    display: "inline-block",
    marginTop: 18,
    color: "var(--ma-green-800)",
    textDecoration: "none",
    fontFamily: "var(--font-display)",
    fontWeight: 700,
    fontSize: 13,
    letterSpacing: "0.14em",
    textTransform: "uppercase",
    borderBottom: "1px solid rgba(11,90,42,0.35)",
    paddingBottom: 4,
  },
  rail: {
    display: "grid",
    gap: 0,
  },
  row: {
    display: "grid",
    gridTemplateColumns: "auto 1fr",
    gap: 18,
    padding: "20px 0",
    borderTop: "1px solid rgba(7,26,14,0.14)",
  },
  rowMeta: {
    minWidth: 84,
  },
  rowIndex: {
    fontFamily: "var(--font-stat)",
    fontWeight: 700,
    fontSize: 18,
    lineHeight: 1,
    color: "var(--ma-orange-600)",
    marginBottom: 10,
  },
  rowTag: {
    fontFamily: "var(--font-display)",
    fontWeight: 700,
    fontSize: 11,
    letterSpacing: "0.22em",
    textTransform: "uppercase",
    color: "var(--ma-green-800)",
  },
  rowCopy: {
    minWidth: 0,
  },
  rowTitle: {
    fontFamily: "var(--font-display)",
    fontWeight: 700,
    fontSize: "clamp(24px, 2.8vw, 34px)",
    lineHeight: 1.12,
    textTransform: "uppercase",
    color: "var(--fg-light-1)",
  },
  rowText: {
    marginTop: 10,
    fontFamily: "var(--font-body)",
    fontSize: 15,
    lineHeight: 1.66,
    color: "var(--fg-light-2)",
  },
};

// ============================================================

function SponsorContact() {
  return (
    <section style={sc.wrap}>
      <div style={sc.inner}>
        <div style={sc.copy}>
          <div style={sc.eyebrow}>Kurucu Ortaklık</div>
          <h3 style={sc.title}>Merter Akademi ile uzun vadeli iş birliği kurmak isteyen markalar için.</h3>
          <p style={sc.text}>
            Sponsorluk modeli; görünürlük, saha içi deneyim ve düzenli geri bildirim başlıklarını
            birlikte ele alır. Hedefimiz kısa süreli görünürlük değil, karşılıklı değer üreten kalıcı
            ortaklıklar kurmaktır.
          </p>
        </div>

        <div style={sc.side}>
          <div style={sc.contactStack}>
            <a href="mailto:info@merterakademi.com" style={sc.contactRow}>
              <span style={sc.contactLabel}>E-posta</span>
              <span style={sc.contactValue}>info@merterakademi.com</span>
            </a>
            <a
              href="https://www.instagram.com/merterakademisporkulubu/"
              target="_blank"
              rel="noreferrer"
              style={sc.contactRow}
            >
              <span style={sc.contactLabel}>Instagram</span>
              <span style={sc.contactValue}>@merterakademisporkulubu</span>
            </a>
          </div>
          <a
            href="../uploads/Merter_Akademi_Kurucu_Sponsor_Tanitim_2026.pdf"
            target="_blank"
            rel="noreferrer"
            style={sc.bookLink}
          >
            <div style={sc.bookShadow}></div>
            <div style={sc.bookSpine}></div>
            <div style={sc.bookCover}>
              <div style={sc.bookTopLine}>
                <span style={sc.bookBadge}>PDF</span>
                <span style={sc.bookTopMeta}>Kurucu Sponsor Tanıtım 2026</span>
              </div>
              <div style={sc.bookLogoWrap}>
                <img src="../assets/logo-share.png" alt="Merter Akademi logo" style={sc.bookLogo} />
              </div>
              <div style={sc.bookBrand}>Merter Akademi</div>
              <div style={sc.bookName}>Kurucu Sponsor Tanıtım Dosyası</div>
              <div style={sc.bookDivider}></div>
              <div style={sc.bookMeta}>Merter / İstanbul / Sponsorluk Sunumu</div>
            </div>
          </a>
          <a
            href="../uploads/Merter_Akademi_Kurucu_Sponsor_Tanitim_2026.pdf"
            target="_blank"
            rel="noreferrer"
            style={sc.primary}
          >
            Dosyayı Aç
          </a>
          <div style={sc.note}>Kulüp dosyası / sponsorluk anlatısı / raporlama omurgası</div>
        </div>
      </div>
    </section>
  );
}

const sc = {
  wrap: {
    padding: "88px 0 96px",
    background: "var(--bg-0)",
  },
  inner: {
    maxWidth: 1480,
    margin: "0 auto",
    padding: "0 28px",
    display: "grid",
    gridTemplateColumns: "repeat(auto-fit, minmax(280px, 1fr))",
    gap: 30,
    alignItems: "end",
    paddingTop: 28,
    borderTop: "1px solid rgba(255,255,255,0.12)",
  },
  copy: {
    maxWidth: 760,
  },
  eyebrow: {
    fontFamily: "var(--font-display)",
    fontWeight: 600,
    fontSize: 12,
    letterSpacing: "0.28em",
    textTransform: "uppercase",
    color: "var(--ma-green-300)",
    marginBottom: 14,
  },
  title: {
    margin: 0,
    fontFamily: "var(--font-display)",
    fontWeight: 800,
    fontSize: "clamp(40px, 5vw, 76px)",
    lineHeight: 1.14,
    textTransform: "uppercase",
    letterSpacing: "-0.03em",
    color: "#fff",
    maxWidth: 820,
  },
  text: {
    marginTop: 16,
    maxWidth: 620,
    fontFamily: "var(--font-body)",
    fontSize: 17,
    lineHeight: 1.7,
    color: "rgba(255,255,255,0.74)",
  },
  side: {
    display: "flex",
    flexDirection: "column",
    gap: 16,
    alignItems: "flex-start",
    justifySelf: "end",
    width: "min(100%, 340px)",
  },
  contactStack: {
    width: "100%",
    display: "grid",
    gap: 2,
  },
  contactRow: {
    display: "grid",
    gridTemplateColumns: "92px minmax(0, 1fr)",
    gap: 16,
    alignItems: "baseline",
    padding: "8px 0",
    textDecoration: "none",
    borderBottom: "1px solid rgba(255,183,116,0.22)",
  },
  contactLabel: {
    fontFamily: "var(--font-display)",
    fontWeight: 700,
    fontSize: 10,
    letterSpacing: "0.18em",
    textTransform: "uppercase",
    color: "rgba(255,255,255,0.52)",
  },
  contactValue: {
    color: "var(--ma-orange-300)",
    textDecoration: "none",
    fontFamily: "var(--font-mono)",
    fontSize: 15,
    lineHeight: 1.45,
  },
  bookLink: {
    position: "relative",
    width: "clamp(228px, 30vw, 318px)",
    aspectRatio: "0.72",
    display: "block",
    textDecoration: "none",
    alignSelf: "flex-start",
    marginTop: 2,
  },
  bookShadow: {
    position: "absolute",
    inset: "18px 6px -10px 18px",
    borderRadius: 28,
    background: "rgba(0,0,0,0.48)",
    filter: "blur(24px)",
    transform: "translateZ(0)",
  },
  bookSpine: {
    position: "absolute",
    left: 2,
    top: 14,
    bottom: 20,
    width: 18,
    borderRadius: "18px 0 0 18px",
    background: "linear-gradient(180deg, #93501a 0%, #603008 48%, #2b1204 100%)",
    boxShadow: "inset -1px 0 0 rgba(255,255,255,0.16), inset 3px 0 0 rgba(255,255,255,0.08)",
    transform: "perspective(900px) rotateY(44deg)",
    transformOrigin: "left center",
  },
  bookCover: {
    position: "relative",
    zIndex: 1,
    height: "100%",
    borderRadius: 24,
    overflow: "hidden",
    padding: "22px 22px 24px 28px",
    background:
      "radial-gradient(circle at top left, rgba(255,183,116,0.18) 0%, rgba(255,183,116,0) 34%), linear-gradient(180deg, #0b2918 0%, #072111 52%, #04140a 100%)",
    border: "1px solid rgba(255,255,255,0.12)",
    boxShadow: "0 28px 50px rgba(0,0,0,0.34), inset 0 1px 0 rgba(255,255,255,0.08)",
    display: "flex",
    flexDirection: "column",
    justifyContent: "space-between",
    transform: "perspective(1400px) rotateY(-16deg) rotateX(8deg)",
    transformOrigin: "left center",
  },
  bookTopLine: {
    display: "flex",
    alignItems: "center",
    justifyContent: "space-between",
    gap: 12,
  },
  bookBadge: {
    display: "inline-flex",
    alignItems: "center",
    justifyContent: "center",
    padding: "6px 10px",
    borderRadius: 999,
    background: "rgba(255,255,255,0.08)",
    border: "1px solid rgba(255,255,255,0.12)",
    fontFamily: "var(--font-display)",
    fontWeight: 700,
    fontSize: 10,
    letterSpacing: "0.18em",
    textTransform: "uppercase",
    color: "#fff",
  },
  bookTopMeta: {
    fontFamily: "var(--font-display)",
    fontWeight: 600,
    fontSize: 10,
    letterSpacing: "0.16em",
    textTransform: "uppercase",
    color: "rgba(255,255,255,0.6)",
    textAlign: "right",
  },
  bookLogoWrap: {
    width: 86,
    height: 86,
    borderRadius: 22,
    background: "rgba(255,255,255,0.07)",
    border: "1px solid rgba(255,255,255,0.1)",
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    backdropFilter: "blur(10px)",
  },
  bookLogo: {
    width: 58,
    height: 58,
    objectFit: "contain",
  },
  bookBrand: {
    fontFamily: "var(--font-display)",
    fontWeight: 700,
    fontSize: 12,
    letterSpacing: "0.24em",
    textTransform: "uppercase",
    color: "var(--ma-green-300)",
  },
  bookName: {
    fontFamily: "var(--font-display)",
    fontWeight: 800,
    fontSize: "clamp(28px, 3vw, 36px)",
    lineHeight: 1.08,
    letterSpacing: "-0.03em",
    textTransform: "uppercase",
    color: "#fff",
    maxWidth: 220,
  },
  bookDivider: {
    width: "100%",
    height: 1,
    background: "linear-gradient(90deg, rgba(255,183,116,0.8) 0%, rgba(255,183,116,0.12) 100%)",
  },
  bookMeta: {
    fontFamily: "var(--font-display)",
    fontWeight: 600,
    fontSize: 10,
    letterSpacing: "0.18em",
    textTransform: "uppercase",
    color: "rgba(255,255,255,0.6)",
  },
  primary: {
    display: "inline-flex",
    alignItems: "center",
    justifyContent: "center",
    padding: "15px 24px",
    borderRadius: 999,
    textDecoration: "none",
    background: "linear-gradient(135deg, #ff9a42 0%, var(--ma-orange-500) 58%, #d66000 100%)",
    color: "var(--ma-green-950)",
    fontFamily: "var(--font-display)",
    fontWeight: 800,
    fontSize: 13,
    letterSpacing: "0.14em",
    textTransform: "uppercase",
    boxShadow: "0 16px 30px rgba(240,122,24,0.22)",
  },
  note: {
    fontFamily: "var(--font-display)",
    fontWeight: 600,
    fontSize: 11,
    letterSpacing: "0.18em",
    textTransform: "uppercase",
    color: "rgba(255,255,255,0.52)",
  },
};

// ============================================================

function SiteFooter() {
  return (
    <footer id="iletisim" style={ft.wrap}>
      <div style={ft.inner}>
        <div style={ft.brandCol}>
          <div style={ft.brandRow}>
            <div style={ft.logoShell}>
              <img src="../assets/logo.png" alt="Merter Akademi logosu" style={ft.logo} />
            </div>
            <div>
              <div style={ft.brandName}>Merter Akademi</div>
              <div style={ft.brandSub}>Spor Kulübü / İstanbul</div>
            </div>
          </div>

          <p style={ft.tagline}>
            Merter'in ticaret ritmiyle basketbol kültürünü aynı kulüp omurgasında birleştiren yeni nesil yapı.
          </p>
        </div>

        <div style={ft.col}>
          <div style={ft.colHead}>Site</div>
          <a style={ft.colLink} href="/">Ana Sayfa</a>
          <a style={ft.colLink} href="/kulup/">Kulüp</a>
          <a style={ft.colLink} href="/programlar/">Programlar</a>
          <a style={ft.colLink} href="/etki/">Etki</a>
          <a style={ft.colLink} href="/gundem/">Gündem</a>
          <a style={ft.colLink} href="/sponsorluk/">Sponsorluk</a>
          <a style={ft.colLink} href="/iletisim/">İletişim</a>
        </div>

        <div style={ft.col}>
          <div style={ft.colHead}>Dosyalar</div>
          <a style={ft.colLink} href="../uploads/Merter_Akademi_Kurucu_Sponsor_Tanitim_2026.pdf" target="_blank" rel="noreferrer">
            Kulüp Dosyası
          </a>
          <a style={ft.colLink} href="/etki/">Etki Sayfası</a>
          <a style={ft.colLink} href="/programlar/">Yıllık Program</a>
        </div>

        <div style={ft.col}>
          <div style={ft.colHead}>İletişim</div>
          <div style={ft.colText}>Güngören / İstanbul</div>
          <a style={ft.colLink} href="/iletisim/">
            İletişim sayfası
          </a>
          <a style={ft.colLink} href="mailto:info@merterakademi.com">
            info@merterakademi.com
          </a>
          <a
            style={ft.colLink}
            href="https://www.instagram.com/merterakademisporkulubu/"
            target="_blank"
            rel="noreferrer"
          >
            Instagram / @merterakademisporkulubu
          </a>
        </div>
      </div>

      <div style={ft.bottom}>
        <div style={ft.bottomLeft}>© 2026 Merter Akademi Spor Kulübü / İstanbul</div>
        <div style={ft.bottomRight}>Oyuncu gelişimi, yerel aidiyet ve sürdürülebilir ortaklık odağında kurulan kulüp yapısı.</div>
      </div>
    </footer>
  );
}

const ft = {
  wrap: {
    background: "linear-gradient(180deg, #020b05 0%, #010603 100%)",
    color: "#fff",
    padding: "30px 0 28px",
    borderTop: "1px solid rgba(255,255,255,0.06)",
  },
  inner: {
    maxWidth: 1480,
    margin: "0 auto",
    padding: "0 28px 36px",
    display: "grid",
    gridTemplateColumns: "repeat(auto-fit, minmax(220px, 1fr))",
    gap: 30,
    borderBottom: "1px solid rgba(255,255,255,0.08)",
  },
  brandCol: {
    maxWidth: 380,
  },
  brandRow: {
    display: "flex",
    alignItems: "center",
    gap: 14,
    marginBottom: 18,
  },
  logoShell: {
    width: 60,
    height: 60,
    borderRadius: "50%",
    padding: 3,
    background: "linear-gradient(180deg, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0.03) 100%)",
  },
  logo: {
    width: "100%",
    height: "100%",
    objectFit: "cover",
    borderRadius: "50%",
  },
  brandName: {
    fontFamily: "var(--font-display)",
    fontWeight: 800,
    fontSize: 20,
    letterSpacing: "0.06em",
    textTransform: "uppercase",
  },
  brandSub: {
    fontFamily: "var(--font-display)",
    fontWeight: 500,
    fontSize: 10,
    letterSpacing: "0.22em",
    textTransform: "uppercase",
    color: "var(--ma-green-400)",
    marginTop: 4,
  },
  tagline: {
    margin: 0,
    fontFamily: "var(--font-body)",
    fontSize: 14,
    lineHeight: 1.65,
    color: "rgba(255,255,255,0.68)",
  },
  col: {
    display: "flex",
    flexDirection: "column",
    gap: 10,
  },
  colHead: {
    fontFamily: "var(--font-display)",
    fontWeight: 700,
    fontSize: 11,
    letterSpacing: "0.24em",
    textTransform: "uppercase",
    color: "var(--ma-orange-400)",
    marginBottom: 8,
  },
  colLink: {
    color: "rgba(255,255,255,0.78)",
    textDecoration: "none",
    fontFamily: "var(--font-body)",
    fontSize: 14,
  },
  colText: {
    color: "rgba(255,255,255,0.58)",
    fontFamily: "var(--font-body)",
    fontSize: 14,
  },
  bottom: {
    maxWidth: 1480,
    margin: "0 auto",
    padding: "24px 28px 0",
    display: "flex",
    justifyContent: "space-between",
    alignItems: "center",
    gap: 18,
    flexWrap: "wrap",
  },
  bottomLeft: {
    fontFamily: "var(--font-display)",
    fontWeight: 500,
    fontSize: 11,
    letterSpacing: "0.2em",
    textTransform: "uppercase",
    color: "rgba(255,255,255,0.42)",
  },
  bottomRight: {
    fontFamily: "var(--font-body)",
    fontSize: 13,
    color: "rgba(255,255,255,0.54)",
  },
};