function Featured({ onOpen }) {
  const mobile = useMobile();
  return (
    <section id="featured" style={{ padding: "var(--section-pad) 0", borderTop: "1px solid var(--line)" }} className="reveal">
      <div className="container">
        <div style={{ display: "grid", gridTemplateColumns: mobile ? "1fr" : "1fr 1fr", gap: mobile ? 40 : 80, alignItems: "center" }}>
          <div style={{ position: "relative" }}>
          <Placeholder label={FEATURED.imgCaption} src={FEATURED.img} style={{ aspectRatio: "4/5", width: "100%" }} />
            <div style={{ position: "absolute", top: 20, right: 20 }}>
              <FavoriteButton id="scilla" />
            </div>
            <div style={{
              position: "absolute", bottom: -28, left: -28,
              background: "var(--paper)", border: "1px solid var(--line)",
              padding: "18px 22px", maxWidth: 260,
            }}>
              <div style={{ fontFamily: "var(--font-mono)", fontSize: 10, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--ocra)" }}>
                38°15′N · 15°43′E
              </div>
              <div style={{ fontFamily: "var(--font-display)", fontStyle: "italic", fontSize: 18, marginTop: 6, lineHeight: 1.2 }}>
                "Scylla ululat, et caeruleis canibus resonantia saxa"
              </div>
              <div style={{ fontSize: 11, color: "var(--muted)", marginTop: 6, fontFamily: "var(--font-mono)" }}>— Virgilio, Eneide III</div>
            </div>
          </div>
          <div>
            <Eyebrow>{FEATURED.kicker}</Eyebrow>
            <h2 style={{
              fontFamily: "var(--font-display)",
              fontSize: "clamp(40px, 5vw, 72px)",
              fontWeight: 500, lineHeight: 1, letterSpacing: "-0.02em",
              margin: "20px 0 28px",
            }}>{FEATURED.title}</h2>
            <p style={{ fontSize: 18, lineHeight: 1.6, color: "var(--ink)", opacity: 0.9, maxWidth: 540 }}>
              <span style={{
                fontFamily: "var(--font-display)", fontSize: 64, fontWeight: 500,
                float: "left", lineHeight: 0.85, marginRight: 10, marginTop: 6, color: "var(--ocra)",
              }}>F</span>
              {FEATURED.dek}
            </p>
            <div style={{
              display: "flex", gap: 20, marginTop: 36, paddingTop: 24,
              borderTop: "1px solid var(--line)", alignItems: "center", flexWrap: "wrap",
            }}>
              <div style={{ fontSize: 13 }}>
                <strong style={{ fontWeight: 600 }}>{FEATURED.author}</strong>
                <div style={{ color: "var(--muted)", fontSize: 12, marginTop: 2 }}>{FEATURED.date} · {FEATURED.readTime} di lettura</div>
              </div>
              <a href="#" onClick={(e) => { e.preventDefault(); onOpen && onOpen(FEATURED); }} style={{
                marginLeft: "auto",
                display: "inline-flex", alignItems: "center", gap: 10,
                fontSize: 13, letterSpacing: "0.08em", textTransform: "uppercase",
                paddingBottom: 4, borderBottom: "1px solid currentColor",
              }}>Leggi l'articolo <IconArrow /></a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}
window.Featured = Featured;