function ProvincesSection() {
  const mobile = useMobile();
  return (
    <section id="province" style={{ padding: "var(--section-pad) 0", borderTop: "1px solid var(--line)" }}>
      <div className="container">
        <SectionHeader kicker="Le cinque province" title="Scegli da dove cominciare" />
        <div style={{ height: 24 }} />
        <div style={{ display: "grid", gridTemplateColumns: mobile ? "1fr 1fr" : "repeat(5, 1fr)", gap: 0, borderTop: "1px solid var(--ink)" }}>
          {PROVINCES.map((p, i) => <ProvinceCol key={p.code} p={p} i={i} />)}
        </div>
      </div>
    </section>
  );
}

function ProvinceCol({ p, i }) {
  const [hover, setHover] = useState(false);
  const notes = {
    CS: "Sila, Pollino, l'Arberia, la Valle del Crati",
    CZ: "Il capoluogo, Roccelletta, il golfo di Squillace",
    RC: "Aspromonte, Area Grecanica, Costa Viola",
    KR: "Capo Rizzuto, la Magna Grecia, Santa Severina",
    VV: "Costa degli Dei, Serre, Tropea e Pizzo",
  };
  return (
    <a href={"#" + p.code}
      onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      style={{
        padding: "40px 24px 32px",
        borderRight: "1px solid var(--line)",
      borderBottom: "1px solid var(--line)",
        position: "relative", display: "block", minHeight: 300,
        background: hover ? "var(--paper-2)" : "transparent",
        transition: "background .25s",
      }}>
      <div style={{
        fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.2em",
        color: "var(--muted)",
      }}>0{i + 1} / 05</div>
      <div style={{
        fontFamily: "var(--font-display)",
        fontSize: 96, fontWeight: 500, letterSpacing: "-0.04em", lineHeight: 0.9,
        marginTop: 12, color: hover ? "var(--ocra)" : "var(--ink)",
        transition: "color .25s",
      }}>{p.code}</div>
      <div style={{
        fontFamily: "var(--font-display)", fontStyle: "italic", fontSize: 22, fontWeight: 400,
        marginTop: 4,
      }}>{p.name}</div>
      <p style={{
        fontSize: 13, lineHeight: 1.55, color: "var(--muted)", marginTop: 20, minHeight: 60,
      }}>{notes[p.code]}</p>
      <div style={{
        position: "absolute", bottom: 24, left: 24, right: 24,
        display: "flex", justifyContent: "space-between", alignItems: "end",
        paddingTop: 12, borderTop: "1px solid var(--line)",
      }}>
        <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.1em", color: "var(--muted)" }}>
          {p.count} luoghi
        </div>
        <div style={{
          transform: hover ? "translateX(4px)" : "none", transition: "transform .2s",
          color: hover ? "var(--ocra)" : "var(--ink)",
        }}><IconArrow /></div>
      </div>
    </a>
  );
}
window.ProvincesSection = ProvincesSection;
