function EventsSection() {
  const mobile = useMobile();
  const [view, setView] = useState("list");
  const [filter, setFilter] = useState("Tutti");
  const types = ["Tutti", ...new Set(EVENTS.map(e => e.type.split(" · ")[0]))];
  const shown = filter === "Tutti" ? EVENTS : EVENTS.filter(e => e.type.includes(filter));

  return (
    <section id="eventi" style={{ padding: "var(--section-pad) 0", borderTop: "1px solid var(--line)" }}>
      <div className="container">
        <div style={{ display: "flex", alignItems: "end", justifyContent: "space-between", gap: 24, marginBottom: 56, flexWrap: "wrap" }}>
          <div>
            <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 12 }}>
              <div style={{ width: 28, height: 1, background: "var(--ocra)" }} />
              <Eyebrow>Agenda · aprile – maggio</Eyebrow>
            </div>
            <h2 style={{
              fontFamily: "var(--font-display)", fontSize: "clamp(32px, 4vw, 56px)",
              fontWeight: 500, lineHeight: 1.1, margin: 0, paddingBottom: "0.15em", letterSpacing: "-0.01em",
            }}>Prossimi eventi in Calabria</h2>
          </div>
          <div style={{ display: "flex", gap: 4, padding: 4, border: "1px solid var(--line)", borderRadius: 999 }}>
            {[["list", "Elenco"], ["calendar", "Calendario"]].map(([k, l]) => (
              <button key={k} onClick={() => setView(k)} style={{
                padding: "8px 18px", borderRadius: 999, border: "none",
                background: view === k ? "var(--ink)" : "transparent",
                color: view === k ? "var(--paper)" : "var(--ink)",
                fontSize: 12, letterSpacing: "0.08em", textTransform: "uppercase",
              }}>{l}</button>
            ))}
          </div>
        </div>

        <div style={{ display: "flex", gap: 6, flexWrap: "wrap", marginBottom: 36 }}>
          {types.map(t => (
            <button key={t} onClick={() => setFilter(t)} style={{
              padding: "6px 14px", borderRadius: 999,
              border: "1px solid " + (filter === t ? "var(--ocra)" : "var(--line)"),
              background: filter === t ? "color-mix(in oklab, var(--ocra) 12%, transparent)" : "transparent",
              color: filter === t ? "var(--ocra)" : "var(--muted)",
              fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.1em", textTransform: "uppercase",
            }}>{t}</button>
          ))}
        </div>

        {(view === "list" || mobile) ? <EventsList items={shown} mobile={mobile} /> : <EventsCalendar items={shown} />}
      </div>
    </section>
  );
}

function EventsList({ items, mobile }) {
  const [hoverIdx, setHoverIdx] = useState(null);
  return (
    <div style={{ borderTop: "1px solid var(--line)" }}>
      {items.map((e, i) => (
        <a key={i} href="#"
          onMouseEnter={() => setHoverIdx(i)}
          onMouseLeave={() => setHoverIdx(null)}
          style={{
            display: "grid",
            gridTemplateColumns: mobile ? "64px 1fr" : "100px 1fr auto 40px",
            alignItems: "center", gap: mobile ? 16 : 32,
            padding: mobile ? "20px 8px" : "28px 12px",
            borderBottom: "1px solid var(--line)",
            background: hoverIdx === i ? "var(--paper-2)" : "transparent",
            transition: "background .25s",
          }}>
          <div style={{ textAlign: "center" }}>
            <div style={{
              fontFamily: "var(--font-display)", fontSize: 48, fontWeight: 500,
              lineHeight: 1, letterSpacing: "-0.02em",
              color: hoverIdx === i ? "var(--ocra)" : "var(--ink)",
              transition: "color .2s",
            }}>{String(e.day).padStart(2, "0")}</div>
            <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.2em", color: "var(--muted)", marginTop: 4 }}>{e.month}</div>
          </div>
          <div>
            <div style={{ fontFamily: "var(--font-mono)", fontSize: 10, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--ocra)", marginBottom: 6 }}>
              {e.type}
            </div>
            <h3 style={{
              fontFamily: "var(--font-display)", fontSize: 28, fontWeight: 500,
              lineHeight: 1.1, margin: 0, letterSpacing: "-0.01em",
            }}>{e.title}</h3>
            <div style={{ fontSize: 14, color: "var(--muted)", marginTop: 6 }}>{e.place}</div>
          </div>
          {!mobile && <div style={{
            maxWidth: 320, fontSize: 14, color: "var(--ink)", opacity: 0.8,
            borderLeft: "1px solid var(--line)", paddingLeft: 24, lineHeight: 1.5,
          }}>{e.dek}</div>}
          {!mobile && <div style={{
            transform: hoverIdx === i ? "translateX(6px)" : "none",
            transition: "transform .25s", color: hoverIdx === i ? "var(--ocra)" : "var(--ink)",
          }}>
            <IconArrow />
          </div>}
        </a>
      ))}
    </div>
  );
}

function EventsCalendar({ items }) {
  // Mini calendario aprile+maggio 2026 marcato con eventi
  const months = [
    { name: "Aprile", short: "APR", days: 30, startDow: 3 }, // 1 apr 2026 mercoledì
    { name: "Maggio", short: "MAG", days: 31, startDow: 5 }, // 1 mag 2026 venerdì
  ];
  const dayMap = {};
  items.forEach(e => { dayMap[`${e.month}-${e.day}`] = e; });
  const dow = ["L", "M", "M", "G", "V", "S", "D"];
  const [hoverEv, setHoverEv] = useState(null);

  return (
    <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1.2fr", gap: 48, alignItems: "start" }}>
      {months.map(m => {
        const cells = [];
        for (let i = 1; i < m.startDow; i++) cells.push(null);
        for (let d = 1; d <= m.days; d++) cells.push(d);
        while (cells.length % 7 !== 0) cells.push(null);
        return (
          <div key={m.short}>
            <div style={{
              display: "flex", alignItems: "baseline", justifyContent: "space-between",
              marginBottom: 16, paddingBottom: 12, borderBottom: "1px solid var(--ink)",
            }}>
              <div style={{ fontFamily: "var(--font-display)", fontSize: 28, fontWeight: 500 }}>{m.name}</div>
              <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--muted)", letterSpacing: "0.12em" }}>2026</div>
            </div>
            <div style={{ display: "grid", gridTemplateColumns: "repeat(7, 1fr)", gap: 2 }}>
              {dow.map((d, i) => (
                <div key={i} style={{
                  textAlign: "center", padding: "6px 0",
                  fontFamily: "var(--font-mono)", fontSize: 10, letterSpacing: "0.1em",
                  color: "var(--muted)",
                }}>{d}</div>
              ))}
              {cells.map((d, i) => {
                const ev = d ? dayMap[`${m.short}-${d}`] : null;
                return (
                  <div key={i}
                    onMouseEnter={() => ev && setHoverEv(ev)}
                    onMouseLeave={() => setHoverEv(null)}
                    style={{
                      aspectRatio: "1/1", display: "flex", alignItems: "center", justifyContent: "center",
                      position: "relative", fontSize: 13, fontFamily: "var(--font-mono)",
                      color: d ? "var(--ink)" : "transparent",
                      background: ev ? "var(--ocra)" : "transparent",
                      border: ev ? "none" : "1px solid transparent",
                      cursor: ev ? "pointer" : "default",
                    }}>
                    {d || "."}
                    {ev && <div style={{
                      position: "absolute", bottom: 4, width: 4, height: 4, borderRadius: 999, background: "var(--paper)",
                    }} />}
                  </div>
                );
              })}
            </div>
          </div>
        );
      })}

      <div style={{ padding: 28, background: "var(--paper-2)", border: "1px solid var(--line)", minHeight: 320 }}>
        {hoverEv ? (
          <>
            <div style={{ display: "flex", alignItems: "baseline", gap: 20, paddingBottom: 16, borderBottom: "1px solid var(--line)" }}>
              <div>
                <div style={{ fontFamily: "var(--font-display)", fontSize: 56, lineHeight: 1, fontWeight: 500, color: "var(--ocra)" }}>
                  {String(hoverEv.day).padStart(2, "0")}
                </div>
                <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.2em", color: "var(--muted)" }}>{hoverEv.month}</div>
              </div>
              <div>
                <Eyebrow>{hoverEv.type}</Eyebrow>
                <h3 style={{ fontFamily: "var(--font-display)", fontSize: 26, fontWeight: 500, margin: "8px 0 0", lineHeight: 1.1 }}>{hoverEv.title}</h3>
              </div>
            </div>
            <div style={{ fontSize: 14, color: "var(--muted)", marginTop: 14 }}>{hoverEv.place}</div>
            <p style={{ fontSize: 15, lineHeight: 1.6, marginTop: 14 }}>{hoverEv.dek}</p>
          </>
        ) : (
          <>
            <Eyebrow>{items.length} eventi in agenda</Eyebrow>
            <h3 style={{ fontFamily: "var(--font-display)", fontSize: 32, fontWeight: 500, margin: "14px 0", lineHeight: 1.1 }}>
              Passa sopra un giorno evidenziato per vedere l'evento.
            </h3>
            <p style={{ fontSize: 14, color: "var(--muted)", lineHeight: 1.6 }}>
              I giorni in ocra segnalano eventi in programma. Clicca per consultare la scheda completa.
            </p>
          </>
        )}
      </div>
    </div>
  );
}

window.EventsSection = EventsSection;