// ============================================================
// HeroHome - poster-like premium homepage hero
// ============================================================

function HeroHome() {
  const width = useViewportWidth();
  const isMobile = width < 768;
  const isTablet = width < 1100;

  const proofRail = [
    "Disiplinli antrenman ve oyuncu gelişimi.",
    "Merter'le güçlü bağ kuran topluluk kültürü.",
    "Uzun vadeli ve ölçülebilir marka ortaklıkları.",
  ];

  const stats = [
    { value: "500K+", label: "Gündüz nüfusu" },
    { value: "3.700+", label: "Şirket erişim alanı" },
    { value: "2021", label: "Kuruluş temeli" },
  ];

  return (
    <section
      style={{
        ...hero.wrap,
        ...(isMobile ? hero.wrapMobile : {}),
      }}
    >
      <style>{`
        @keyframes maHeroReveal {
          from { opacity: 0; transform: translateY(22px); }
          to { opacity: 1; transform: translateY(0); }
        }
        @keyframes maHeroZoom {
          from { transform: scale(1); }
          to { transform: scale(1.08); }
        }
        .ma-hero-reveal-1 { animation: maHeroReveal 780ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }
        .ma-hero-reveal-2 { animation: maHeroReveal 860ms cubic-bezier(0.2, 0.8, 0.2, 1) 90ms both; }
        .ma-hero-reveal-3 { animation: maHeroReveal 860ms cubic-bezier(0.2, 0.8, 0.2, 1) 180ms both; }
        .ma-hero-reveal-4 { animation: maHeroReveal 860ms cubic-bezier(0.2, 0.8, 0.2, 1) 260ms both; }
        .ma-hero-zoom { animation: maHeroZoom 16s ease-out both; }
      `}</style>

      <div
        style={{
          ...hero.imageLayer,
          ...(isTablet ? hero.imageLayerTablet : {}),
          ...(isMobile ? hero.imageLayerMobile : {}),
        }}
        className={isMobile ? "" : "ma-hero-zoom"}
      ></div>
      <div
        style={{
          ...hero.darkWash,
          ...(isMobile ? hero.darkWashMobile : {}),
        }}
      ></div>
      <div style={hero.orangeGlow}></div>
      {!isMobile && <div style={hero.greenGlow}></div>}
      <div style={hero.grid}></div>

      <div
        style={{
          ...hero.inner,
          ...(isMobile ? hero.innerMobile : {}),
        }}
      >
        <div
          style={{
            ...hero.copyCol,
            ...(isMobile ? hero.copyColMobile : {}),
          }}
        >
          <div style={hero.kickerRow} className={isMobile ? "" : "ma-hero-reveal-1"}>
            <span style={hero.kickerDot}></span>
            <span
              style={{
                ...hero.kickerText,
                ...(isMobile ? hero.kickerTextMobile : {}),
              }}
            >
              Merter Akademi / İstanbul / Kuruluş Sezonu
            </span>
          </div>

          <div
            style={{
              ...hero.brandLine,
              ...(isMobile ? hero.brandLineMobile : {}),
            }}
            className={isMobile ? "" : "ma-hero-reveal-1"}
          >
            Merter Akademi Spor Kulübü
          </div>

          <h1
            style={{
              ...hero.title,
              ...(isTablet ? hero.titleTablet : {}),
              ...(isMobile ? hero.titleMobile : {}),
            }}
            className={isMobile ? "" : "ma-hero-reveal-2"}
          >
            {isMobile ? (
              <>
                Merter'de büyüyen
                <span style={hero.titleAccent}> disiplinli basketbol kulübü.</span>
              </>
            ) : (
              <>
                Merter'de büyüyen
                <span style={hero.titleAccent}> disiplinli ve modern basketbol kulübü.</span>
              </>
            )}
          </h1>

          <p
            style={{
              ...hero.lead,
              ...(isMobile ? hero.leadMobile : {}),
            }}
            className={isMobile ? "" : "ma-hero-reveal-3"}
          >
            {isMobile
              ? "Oyuncu gelişimi, güçlü antrenman kültürü ve semtle kurduğu bağla büyüyen genç bir kulüp."
              : "Merter Akademi; oyuncu gelişimini, güçlü antrenman kültürünü ve semtle kurduğu bağı aynı yapı içinde büyütür. Kurucu ekip, sportif hedeflerle kurumsal disiplini bir araya getirerek sürdürülebilir bir kulüp modeli kurmayı hedefler."}
          </p>

          <div
            style={{
              ...hero.ctaRow,
              ...(isMobile ? hero.ctaRowMobile : {}),
            }}
            className={isMobile ? "" : "ma-hero-reveal-4"}
          >
            <a
              href="#kulup"
              style={{
                ...hero.primary,
                ...(isMobile ? hero.ctaMobile : {}),
              }}
            >
              Kulübü Keşfet
            </a>
            {!isMobile && (
              <a
                href="../uploads/Merter_Akademi_Kurucu_Sponsor_Tanitim_2026.pdf"
                target="_blank"
                rel="noreferrer"
                style={{
                  ...hero.secondary,
                  ...(isMobile ? hero.ctaMobile : {}),
                }}
              >
                Kulüp Dosyası
              </a>
            )}
          </div>

          {!isMobile && (
            <div style={hero.noteRow} className="ma-hero-reveal-4">
              <div style={hero.noteLabel}>Kulüp Yaklaşımı</div>
              <div style={hero.noteText}>
                Rekabetçi basketbolu, düzenli organizasyonu ve yerel aidiyeti aynı çatı altında
                topluyoruz.
              </div>
            </div>
          )}
        </div>

        {!isMobile && (
          <div style={hero.sideCol}>
            <div style={hero.dossier} className="ma-hero-reveal-3">
              <div style={hero.dossierLabel}>Kulüp Profili</div>
              <div style={hero.dossierTitle}>Gelişime, düzene ve aidiyete dayanan kulüp modeli.</div>
              <div style={hero.dossierText}>
                Saha içi gelişim, yerel topluluk kültürü ve iş birlikleri birbirinden ayrı başlıklar
                değil; kulübün büyümesini destekleyen tek bir omurganın parçaları olarak ele alınıyor.
              </div>
            </div>

            <div style={hero.rail} className="ma-hero-reveal-4">
              <div style={hero.railLabel}>Kulübün Omurgası</div>
              {proofRail.map((item, index) => (
                <div key={item} style={hero.railItem}>
                  <div style={hero.railIndex}>{String(index + 1).padStart(2, "0")}</div>
                  <div style={hero.railText}>{item}</div>
                </div>
              ))}
            </div>
          </div>
        )}
      </div>

      <div
        style={{
          ...hero.bottomBand,
          ...(isMobile ? hero.bottomBandMobile : {}),
        }}
      >
        <div
          style={{
            ...hero.bottomInner,
            ...(isMobile ? hero.bottomInnerMobile : {}),
          }}
        >
          <div style={hero.bandLead}>
            <div style={hero.bandEyebrow}>Kulübün Temeli</div>
            <div
              style={{
                ...hero.bandTitle,
                ...(isMobile ? hero.bandTitleMobile : {}),
              }}
            >
              Antrenman disiplini, yerel bağ ve uzun vadeli yapı aynı hedefte buluşur.
            </div>
          </div>

          <div
            style={{
              ...hero.statGrid,
              ...(isMobile ? hero.statGridMobile : {}),
            }}
          >
            {stats.map((item) => (
              <div key={item.label} style={hero.statItem}>
                <div
                  style={{
                    ...hero.statValue,
                    ...(isMobile ? hero.statValueMobile : {}),
                  }}
                >
                  {item.value}
                </div>
                <div
                  style={{
                    ...hero.statLabel,
                    ...(isMobile ? hero.statLabelMobile : {}),
                  }}
                >
                  {item.label}
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>

      {isMobile && (
        <div style={hero.mobileSupportShell}>
          <div style={hero.mobileSupportCard}>
            <div style={hero.mobileSupportLabel}>Kulüp Profili</div>
            <div style={hero.mobileSupportTitle}>Gelişime, düzene ve aidiyete dayanan kulüp modeli.</div>
            <div style={hero.mobileSupportText}>
              Saha içi gelişim, topluluk kültürü ve iş birlikleri kulübün büyümesini destekleyen tek
              bir yapının parçaları olarak ele alınıyor.
            </div>
          </div>
        </div>
      )}
    </section>
  );
}

const hero = {
  wrap: {
    position: "relative",
    overflow: "hidden",
    background: "linear-gradient(180deg, #031308 0%, #041a0b 100%)",
    minHeight: "calc(100svh - 92px)",
  },
  wrapMobile: {
    minHeight: "auto",
  },
  imageLayer: {
    position: "absolute",
    inset: 0,
    backgroundImage:
      "linear-gradient(90deg, rgba(3,19,10,0.9) 0%, rgba(3,19,10,0.72) 42%, rgba(3,19,10,0.22) 100%), url('../assets/team-photo.png')",
    backgroundSize: "cover",
    backgroundPosition: "center",
    transformOrigin: "center center",
  },
  imageLayerTablet: {
    backgroundPosition: "62% center",
  },
  imageLayerMobile: {
    backgroundPosition: "64% center",
  },
  darkWash: {
    position: "absolute",
    inset: 0,
    background:
      "linear-gradient(180deg, rgba(3,19,10,0.18) 0%, rgba(3,19,10,0.46) 56%, rgba(3,19,10,0.92) 100%), radial-gradient(circle at 72% 28%, rgba(255,255,255,0.08) 0%, transparent 24%)",
    pointerEvents: "none",
  },
  darkWashMobile: {
    background:
      "linear-gradient(180deg, rgba(3,19,10,0.34) 0%, rgba(3,19,10,0.62) 42%, rgba(3,19,10,0.96) 100%), radial-gradient(circle at 78% 34%, rgba(255,255,255,0.05) 0%, transparent 24%)",
  },
  orangeGlow: {
    position: "absolute",
    right: "-4%",
    top: 80,
    width: 520,
    height: 520,
    borderRadius: "50%",
    background: "radial-gradient(circle, rgba(240,122,24,0.2) 0%, rgba(240,122,24,0) 72%)",
    pointerEvents: "none",
  },
  greenGlow: {
    position: "absolute",
    left: "-6%",
    bottom: 80,
    width: 420,
    height: 420,
    borderRadius: "50%",
    background: "radial-gradient(circle, rgba(31,176,87,0.18) 0%, rgba(31,176,87,0) 72%)",
    pointerEvents: "none",
  },
  grid: {
    position: "absolute",
    inset: 0,
    backgroundImage:
      "linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px), url('../assets/court-lines.svg')",
    backgroundSize: "88px 88px, 88px 88px, 110% auto",
    backgroundPosition: "center, center, center",
    opacity: 0.12,
    pointerEvents: "none",
  },
  inner: {
    position: "relative",
    zIndex: 2,
    maxWidth: 1480,
    margin: "0 auto",
    padding: "88px 28px 64px",
    display: "grid",
    gridTemplateColumns: "repeat(auto-fit, minmax(320px, 1fr))",
    gap: 32,
    alignItems: "end",
  },
  innerMobile: {
    padding: "36px 18px 22px",
    gap: 18,
  },
  copyCol: {
    maxWidth: 760,
    display: "flex",
    flexDirection: "column",
    gap: 18,
    paddingTop: 24,
  },
  copyColMobile: {
    maxWidth: "100%",
    gap: 14,
    paddingTop: 0,
  },
  kickerRow: {
    display: "inline-flex",
    alignItems: "center",
    gap: 10,
  },
  kickerDot: {
    width: 9,
    height: 9,
    borderRadius: "50%",
    background: "var(--ma-orange-400)",
    boxShadow: "0 0 18px rgba(255,148,54,0.8)",
  },
  kickerText: {
    fontFamily: "var(--font-display)",
    fontWeight: 600,
    fontSize: 12,
    letterSpacing: "0.26em",
    textTransform: "uppercase",
    color: "var(--ma-green-300)",
  },
  kickerTextMobile: {
    fontSize: 10,
    letterSpacing: "0.18em",
  },
  brandLine: {
    width: "fit-content",
    padding: "8px 14px",
    borderRadius: 999,
    background: "rgba(255,255,255,0.05)",
    border: "1px solid rgba(255,255,255,0.12)",
    color: "var(--ma-orange-300)",
    fontFamily: "var(--font-display)",
    fontWeight: 700,
    fontSize: 11,
    letterSpacing: "0.18em",
    textTransform: "uppercase",
  },
  brandLineMobile: {
    padding: "7px 12px",
    fontSize: 10,
    letterSpacing: "0.12em",
  },
  title: {
    margin: 0,
    fontFamily: "var(--font-display)",
    fontWeight: 800,
    fontSize: "clamp(48px, 9vw, 148px)",
    lineHeight: 0.88,
    letterSpacing: "-0.04em",
    textTransform: "uppercase",
    color: "#fff",
    maxWidth: 860,
    textWrap: "balance",
  },
  titleTablet: {
    maxWidth: 720,
  },
  titleMobile: {
    fontSize: "clamp(36px, 11vw, 48px)",
    lineHeight: 0.92,
    maxWidth: "100%",
  },
  titleAccent: {
    color: "var(--ma-orange-500)",
  },
  lead: {
    margin: 0,
    maxWidth: 620,
    fontFamily: "var(--font-body)",
    fontSize: 18,
    lineHeight: 1.72,
    color: "rgba(255,255,255,0.82)",
    textWrap: "pretty",
  },
  leadMobile: {
    maxWidth: "100%",
    fontSize: 15,
    lineHeight: 1.55,
    color: "rgba(255,255,255,0.8)",
  },
  ctaRow: {
    display: "flex",
    gap: 14,
    flexWrap: "wrap",
    marginTop: 6,
  },
  ctaRowMobile: {
    flexDirection: "column",
    alignItems: "stretch",
    gap: 10,
  },
  ctaMobile: {
    width: "100%",
  },
  primary: {
    display: "inline-flex",
    alignItems: "center",
    justifyContent: "center",
    padding: "16px 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: 14,
    letterSpacing: "0.14em",
    textTransform: "uppercase",
    boxShadow: "0 18px 34px rgba(240,122,24,0.28), inset 0 1px 0 rgba(255,255,255,0.2)",
  },
  secondary: {
    display: "inline-flex",
    alignItems: "center",
    justifyContent: "center",
    padding: "16px 24px",
    borderRadius: 999,
    textDecoration: "none",
    background: "rgba(255,255,255,0.04)",
    color: "#fff",
    border: "1px solid rgba(255,255,255,0.16)",
    fontFamily: "var(--font-display)",
    fontWeight: 700,
    fontSize: 14,
    letterSpacing: "0.14em",
    textTransform: "uppercase",
  },
  noteRow: {
    display: "grid",
    gridTemplateColumns: "minmax(120px, 170px) minmax(0, 1fr)",
    gap: 18,
    alignItems: "start",
    paddingTop: 18,
    borderTop: "1px solid rgba(255,255,255,0.12)",
    maxWidth: 700,
  },
  noteLabel: {
    fontFamily: "var(--font-display)",
    fontWeight: 700,
    fontSize: 11,
    letterSpacing: "0.22em",
    textTransform: "uppercase",
    color: "var(--ma-green-300)",
  },
  noteText: {
    fontFamily: "var(--font-body)",
    fontSize: 15,
    lineHeight: 1.65,
    color: "rgba(255,255,255,0.72)",
  },
  sideCol: {
    display: "flex",
    flexDirection: "column",
    gap: 20,
    alignSelf: "stretch",
    justifyContent: "flex-end",
    minWidth: 0,
  },
  dossier: {
    marginLeft: "auto",
    width: "min(420px, 100%)",
    padding: "28px 26px 30px",
    background: "linear-gradient(180deg, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0.04) 100%)",
    border: "1px solid rgba(255,255,255,0.14)",
    boxShadow: "0 28px 60px rgba(0,0,0,0.24)",
    backdropFilter: "blur(10px)",
  },
  dossierLabel: {
    fontFamily: "var(--font-display)",
    fontWeight: 700,
    fontSize: 11,
    letterSpacing: "0.24em",
    textTransform: "uppercase",
    color: "var(--ma-orange-300)",
    marginBottom: 14,
  },
  dossierTitle: {
    fontFamily: "var(--font-display)",
    fontWeight: 800,
    fontSize: "clamp(32px, 4vw, 54px)",
    lineHeight: 0.94,
    textTransform: "uppercase",
    color: "#fff",
    maxWidth: 380,
  },
  dossierText: {
    marginTop: 14,
    fontFamily: "var(--font-body)",
    fontSize: 15,
    lineHeight: 1.68,
    color: "rgba(255,255,255,0.76)",
    textWrap: "pretty",
  },
  rail: {
    marginLeft: "auto",
    width: "min(420px, 100%)",
    paddingTop: 18,
    borderTop: "1px solid rgba(255,255,255,0.14)",
  },
  railLabel: {
    fontFamily: "var(--font-display)",
    fontWeight: 700,
    fontSize: 11,
    letterSpacing: "0.24em",
    textTransform: "uppercase",
    color: "var(--ma-green-300)",
    marginBottom: 12,
  },
  railItem: {
    display: "grid",
    gridTemplateColumns: "auto 1fr",
    gap: 14,
    alignItems: "start",
    padding: "14px 0",
    borderBottom: "1px solid rgba(255,255,255,0.08)",
  },
  railIndex: {
    fontFamily: "var(--font-stat)",
    fontWeight: 700,
    fontSize: 18,
    lineHeight: 1,
    color: "var(--ma-orange-400)",
    minWidth: 28,
  },
  railText: {
    fontFamily: "var(--font-body)",
    fontSize: 15,
    lineHeight: 1.65,
    color: "rgba(255,255,255,0.78)",
  },
  bottomBand: {
    position: "relative",
    zIndex: 3,
    padding: "0 28px 30px",
  },
  bottomBandMobile: {
    padding: "0 18px 18px",
  },
  bottomInner: {
    maxWidth: 1480,
    margin: "0 auto",
    padding: "24px 0 0",
    display: "grid",
    gridTemplateColumns: "repeat(auto-fit, minmax(280px, 1fr))",
    gap: 24,
    alignItems: "end",
    borderTop: "1px solid rgba(255,255,255,0.12)",
  },
  bottomInnerMobile: {
    gap: 18,
    padding: "18px 0 0",
  },
  bandLead: {
    maxWidth: 520,
  },
  bandEyebrow: {
    fontFamily: "var(--font-display)",
    fontWeight: 700,
    fontSize: 11,
    letterSpacing: "0.22em",
    textTransform: "uppercase",
    color: "var(--ma-orange-300)",
    marginBottom: 10,
  },
  bandTitle: {
    fontFamily: "var(--font-display)",
    fontWeight: 700,
    fontSize: "clamp(28px, 3.3vw, 44px)",
    lineHeight: 0.95,
    textTransform: "uppercase",
    color: "#fff",
  },
  bandTitleMobile: {
    fontSize: 24,
    lineHeight: 1,
    maxWidth: "100%",
  },
  statGrid: {
    display: "grid",
    gridTemplateColumns: "repeat(auto-fit, minmax(140px, 1fr))",
    gap: 18,
  },
  statGridMobile: {
    gridTemplateColumns: "repeat(3, minmax(0, 1fr))",
    gap: 12,
  },
  statItem: {
    paddingTop: 8,
    borderTop: "1px solid rgba(255,255,255,0.14)",
  },
  statValue: {
    fontFamily: "var(--font-stat)",
    fontWeight: 700,
    fontSize: "clamp(40px, 4.6vw, 60px)",
    lineHeight: 0.92,
    letterSpacing: "-0.03em",
    color: "#fff",
  },
  statValueMobile: {
    fontSize: 34,
  },
  statLabel: {
    marginTop: 8,
    fontFamily: "var(--font-display)",
    fontWeight: 600,
    fontSize: 12,
    letterSpacing: "0.18em",
    textTransform: "uppercase",
    color: "rgba(255,255,255,0.66)",
  },
  statLabelMobile: {
    fontSize: 10,
    letterSpacing: "0.1em",
    lineHeight: 1.35,
  },
  mobileSupportShell: {
    position: "relative",
    zIndex: 4,
    padding: "0 18px 22px",
  },
  mobileSupportCard: {
    maxWidth: 1480,
    margin: "0 auto",
    padding: "18px 18px 20px",
    borderRadius: 18,
    background: "linear-gradient(180deg, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0.04) 100%)",
    border: "1px solid rgba(255,255,255,0.12)",
    backdropFilter: "blur(10px)",
    boxShadow: "0 18px 36px rgba(0,0,0,0.16)",
  },
  mobileSupportLabel: {
    fontFamily: "var(--font-display)",
    fontWeight: 700,
    fontSize: 10,
    letterSpacing: "0.22em",
    textTransform: "uppercase",
    color: "var(--ma-orange-300)",
    marginBottom: 10,
  },
  mobileSupportTitle: {
    fontFamily: "var(--font-display)",
    fontWeight: 800,
    fontSize: 28,
    lineHeight: 0.96,
    textTransform: "uppercase",
    color: "#fff",
  },
  mobileSupportText: {
    marginTop: 10,
    fontFamily: "var(--font-body)",
    fontSize: 14,
    lineHeight: 1.58,
    color: "rgba(255,255,255,0.76)",
  },
};