function Hero({ layout = "split" }) {
  // layout: "split" | "centered" | "fullbleed"
  if (layout === "centered") return <HeroCentered />;
  if (layout === "fullbleed") return <HeroFullbleed />;
  return <HeroSplit />;
}

function HeroSplit() {
  const mobile = useMobile();
  return (
    <section style={{ padding: mobile ? "32px 0 56px" : "48px 0 80px" }} className="reveal">
      <div className="container" style={{
        display: "grid",
        gridTemplateColumns: mobile ? "1fr" : "1.1fr 1fr",
        gap: mobile ? 40 : 64,
        alignItems: "center",
      }}>
        <div>
          <div style={{ display: "flex", alignItems: "center", gap: 14, marginBottom: 28 }}>
            <div style={{ width: 48, height: 1, background: "var(--ocra)" }} />
            <Eyebrow>Numero di primavera · 2026</Eyebrow>
          </div>
          <h1 style={{
            fontFamily: "var(--font-display)",
            fontSize: "clamp(52px, 7vw, 108px)",
            fontWeight: 400,
            lineHeight: 0.98,
            letterSpacing: "-0.025em",
            margin: 0,
          }}>
            Una terra <em style={{ color: "var(--ocra)" }}>antichissima</em>,
            <br/>raccontata<br/>giorno per giorno.
          </h1>
          <p style={{
            marginTop: 36,
            fontSize: 19,
            lineHeight: 1.55,
            maxWidth: 520,
            color: "var(--ink)",
            opacity: 0.85,
          }}>
            Reportage dalle cinque province, itinerari scritti a piedi,
            inchieste sul patrimonio. Ogni settimana un pezzo di Calabria
            che non trovi sulle guide.
          </p>
          <div style={{ display: "flex", gap: 16, marginTop: 40, flexWrap: "wrap" }}>
            <a href="#featured" style={{
              background: "var(--ink)", color: "var(--paper)",
              padding: "14px 28px", borderRadius: 2,
              fontSize: 14, letterSpacing: "0.08em", textTransform: "uppercase",
              display: "inline-flex", alignItems: "center", gap: 10,
            }}>Leggi l'editoriale <IconArrow /></a>
            <a href="#mappa" style={{
              border: "1px solid var(--ink)", color: "var(--ink)",
              padding: "14px 28px", borderRadius: 2,
              fontSize: 14, letterSpacing: "0.08em", textTransform: "uppercase",
            }}>Esplora la mappa</a>
          </div>

          <div style={{
            display: "grid",
            gridTemplateColumns: "repeat(3, 1fr)",
            gap: 0,
            marginTop: 72,
            paddingTop: 32,
            borderTop: "1px solid var(--line)",
          }}>
            {[
              { n: String(MAP_POINTS.length), l: "luoghi in mappa" },
              { n: String(EVENTS.length),     l: "eventi in agenda" },
              { n: String(STORIES.length),    l: "articoli pubblicati" },
            ].map(s => (
              <div key={s.l}>
                <div style={{
                  fontFamily: "var(--font-display)", fontSize: 44, fontWeight: 500,
                  letterSpacing: "-0.02em", lineHeight: 1,
                }}>{s.n}</div>
                <div style={{
                  fontSize: 11, marginTop: 8, textTransform: "uppercase",
                  letterSpacing: "0.12em", color: "var(--muted)",
                  fontFamily: "var(--font-mono)",
                }}>{s.l}</div>
              </div>
            ))}
          </div>
        </div>

        {!mobile && <div style={{ position: "relative", aspectRatio: "4/5" }}>
          <Placeholder label="Pentedattilo all'alba" src={IMG.pentedat} className="no-sel" style={{ width: "100%", height: "100%" }}>
            <div style={{
              position: "absolute", inset: 0, display: "flex",
              flexDirection: "column", justifyContent: "flex-end", padding: 28,
              background: "linear-gradient(180deg, transparent 50%, color-mix(in oklab, var(--ink) 70%, transparent) 100%)",
              color: "var(--paper)",
            }}>
              <Eyebrow style={{ color: "var(--paper)", opacity: .8 }}>Copertina</Eyebrow>
              <div style={{
                fontFamily: "var(--font-display)", fontSize: 28, fontWeight: 500, marginTop: 8, fontStyle: "italic",
              }}>Pentedattilo, il paese della mano di pietra</div>
            </div>
          </Placeholder>
          <div style={{
            position: "absolute", top: -18, left: -18,
            background: "var(--ocra)", color: "var(--paper)",
            padding: "10px 18px", fontSize: 11, letterSpacing: "0.14em",
            fontFamily: "var(--font-mono)", textTransform: "uppercase",
          }}>Nuovo</div>
          <div style={{
            position: "absolute", bottom: -20, right: -20, background: "var(--paper)",
            padding: "14px 18px", border: "1px solid var(--line)",
            fontFamily: "var(--font-mono)", fontSize: 10, letterSpacing: "0.12em", textTransform: "uppercase",
            color: "var(--muted)",
          }}>Reportage fotografico · 24 scatti</div>
        </div>}
      </div>
    </section>
  );
}

function HeroCentered() {
  return (
    <section style={{ padding: "60px 0 80px", textAlign: "center" }} className="reveal">
      <div className="container">
        <Eyebrow>Numero di primavera · 2026</Eyebrow>
        <h1 style={{
          fontFamily: "var(--font-display)",
          fontSize: "clamp(56px, 9vw, 140px)",
          fontWeight: 400, lineHeight: 0.95, letterSpacing: "-0.025em",
          margin: "24px auto 32px", maxWidth: 1100,
        }}>
          Una terra <em style={{ color: "var(--ocra)" }}>antichissima</em>,
          raccontata <br/>giorno per giorno.
        </h1>
        <p style={{
          fontSize: 19, lineHeight: 1.5, maxWidth: 600, margin: "0 auto",
          color: "var(--ink)", opacity: 0.85,
        }}>
          Reportage dalle cinque province, itinerari scritti a piedi, inchieste sul patrimonio.
        </p>
        <div style={{ marginTop: 48 }}>
          <Placeholder label="Pentedattilo all'alba" src={IMG.pentedat} className="no-sel" style={{ aspectRatio: "21/9", width: "100%" }} />
        </div>
      </div>
    </section>
  );
}

function HeroFullbleed() {
  return (
    <section style={{ position: "relative", height: "92vh", minHeight: 620, overflow: "hidden" }} className="reveal">
      <Placeholder label="Pentedattilo all'alba" src={IMG.pentedat} className="no-sel" style={{
        position: "absolute", inset: 0, width: "100%", height: "100%",
      }} />
      <div style={{
        position: "absolute", inset: 0,
        background: "linear-gradient(180deg, color-mix(in oklab, var(--ink) 20%, transparent) 0%, transparent 40%, color-mix(in oklab, var(--ink) 80%, transparent) 100%)",
      }} />
      <div className="container" style={{
        position: "absolute", inset: 0, display: "flex", flexDirection: "column", justifyContent: "flex-end",
        paddingBottom: 80, color: "var(--paper)",
      }}>
        <Eyebrow style={{ color: "var(--paper)", opacity: 0.85 }}>Numero di primavera · 2026</Eyebrow>
        <h1 style={{
          fontFamily: "var(--font-display)",
          fontSize: "clamp(56px, 9vw, 136px)",
          fontWeight: 400, lineHeight: 0.95, letterSpacing: "-0.025em",
          margin: "20px 0 0", maxWidth: 1100, color: "var(--paper)",
        }}>
          Una terra <em style={{ color: "#e9b977" }}>antichissima</em>,<br/>
          raccontata giorno per giorno.
        </h1>
      </div>
    </section>
  );
}

window.Hero = Hero;