// site/programme.jsx — Section Programme du jour (format horizontal)
// Format "Stations sur ligne" — frise horizontale de dots, click pour
// déplier le détail. Beaucoup plus compact que la timeline verticale.

function ProgrammeSection() {
  const [active, setActive] = React.useState(0);
  const [headerRef, headerSeen] = useInView();
  const [trackRef, trackSeen] = useInView({ rootMargin: "0px 0px -12% 0px" });
  const item = DATA.programme[active];
  const color = item.place === "mairie" ? T.rouge : T.or;

  return (
    <Section id="section-programme" bg={T.white} washHue={120} washOpacity={0.28} paddingTop={100} paddingBottom={100}>
      <SectionHeader
        eyebrow="Le déroulé"
        title="Le programme du jour"
        subtitle="De la mairie au tiramisu — ouvert à toute modification d'horaire jusqu'au matin du grand jour. On vous tient au courant."
      />

      {/* Frise horizontale — stations */}
      <div ref={trackRef} style={{ position: "relative", padding: "32px 0 8px", marginTop: 8 }}>
        {/* Ligne qui se dessine au scroll */}
        <div style={{
          position: "absolute", top: "calc(32px + 9px)", left: "4%", right: "4%", height: 1,
          background: T.rule, transformOrigin: "left center",
          transform: trackSeen ? "scaleX(1)" : "scaleX(0)",
          transition: "transform .9s cubic-bezier(.4,0,.2,1) .25s",
        }} />

        <div style={{ position: "relative", display: "grid", gridTemplateColumns: `repeat(${DATA.programme.length}, 1fr)`, gap: 0 }}>
          {DATA.programme.map((p, i) => {
            const sel = i === active;
            const dotColor = p.place === "mairie" ? T.rouge : T.or;
            const palePair = p.place === "mairie" ? T.rougePale : T.orPale;
            return (
              <button
                key={i}
                onClick={() => setActive(i)}
                aria-label={`${p.time} — ${p.title}`}
                style={{
                  background: "transparent", border: "none", cursor: "pointer", padding: "4px 4px",
                  display: "flex", flexDirection: "column", alignItems: "center", gap: 10,
                  opacity: trackSeen ? 1 : 0, transform: trackSeen ? "translateY(0)" : "translateY(10px)",
                  transition: `opacity .45s ease ${0.3 + i * 0.08}s, transform .45s ease ${0.3 + i * 0.08}s`,
                }}
              >
                <span style={{
                  width: sel ? 22 : 12, height: sel ? 22 : 12, borderRadius: "50%",
                  background: sel ? dotColor : T.white,
                  border: `${sel ? 2 : 1.5}px solid ${dotColor}`,
                  boxShadow: sel ? `0 0 0 6px ${palePair}` : "none",
                  transition: "all .25s cubic-bezier(.2,.7,.3,1)",
                  display: "block",
                }} />
                <span style={{
                  fontFamily: T.mono, fontSize: 11, letterSpacing: 1,
                  color: sel ? T.ink : T.inkMute, fontWeight: sel ? 600 : 400,
                  transition: "color .2s",
                }}>{p.time}</span>
              </button>
            );
          })}
        </div>
      </div>

      {/* Panneau détail */}
      <div key={active} className="prog-panel" style={{
        marginTop: 22, padding: "24px 28px",
        background: T.paper, borderLeft: `3px solid ${color}`,
        animation: "prog-fade .35s cubic-bezier(.2,.7,.3,1) both",
        boxShadow: T.shadow,
      }}>
        <div style={{
          display: "flex", justifyContent: "space-between", alignItems: "baseline",
          gap: 14, flexWrap: "wrap",
        }}>
          <div style={{ display: "flex", alignItems: "baseline", gap: 14, flexWrap: "wrap" }}>
            <span style={{
              fontFamily: T.italic, fontStyle: "italic",
              fontSize: "clamp(32px, 5vw, 44px)", color: T.ink, lineHeight: 1, letterSpacing: -1,
            }}>
              {item.time}
            </span>
            <span style={{
              fontFamily: T.bold, fontWeight: 700,
              fontSize: "clamp(20px, 2.6vw, 26px)", color: T.ink, lineHeight: 1.1, letterSpacing: -0.3,
            }}>
              {item.title}
            </span>
          </div>
          <span style={{
            fontFamily: T.mono, fontSize: 10, letterSpacing: 2,
            padding: "4px 10px",
            background: item.place === "mairie" ? T.rougePale : T.orPale,
            color: item.place === "mairie" ? T.rougeDeep : T.orDeep,
            textTransform: "uppercase",
          }}>
            {item.place === "mairie" ? "Mairie de Mérignac" : "Château Sentout"}
          </span>
        </div>

        <div style={{
          marginTop: 12, fontFamily: T.sans, fontSize: 15, color: T.inkSoft, lineHeight: 1.55,
          maxWidth: 640,
        }}>
          {item.body}
        </div>

        <div style={{
          marginTop: 16, paddingTop: 12, borderTop: `1px dashed ${T.rule}`,
          display: "flex", justifyContent: "space-between", alignItems: "center", gap: 12,
          fontFamily: T.mono, fontSize: 10, letterSpacing: 2, color: T.inkMute, textTransform: "uppercase",
        }}>
          <span>
            Étape {String(active + 1).padStart(2, "0")} / {String(DATA.programme.length).padStart(2, "0")}
            {item.flex && <span style={{ marginLeft: 14, color: T.orDeep, fontStyle: "italic", textTransform: "none", letterSpacing: 0.5 }}>· {item.flex}</span>}
          </span>
          <span style={{ display: "flex", gap: 14 }}>
            <button onClick={() => setActive((a) => Math.max(0, a - 1))} disabled={active === 0}
              style={navBtnStyle(active === 0)}>← précédent</button>
            <button onClick={() => setActive((a) => Math.min(DATA.programme.length - 1, a + 1))}
              disabled={active === DATA.programme.length - 1}
              style={navBtnStyle(active === DATA.programme.length - 1)}>suivant →</button>
          </span>
        </div>
      </div>

      {/* Note flex */}
      <div style={{
        marginTop: 28, padding: "16px 20px", background: T.orPale,
        borderLeft: `3px solid ${T.or}`, fontFamily: T.italic, fontStyle: "italic",
        fontSize: 15, color: T.ink, lineHeight: 1.5,
      }}>
        Tous les horaires sont susceptibles d'être ajustés. Nous mettons cette page à jour dès qu'un changement est confirmé.
      </div>

      <style>{`
        @keyframes prog-fade {
          from { opacity: 0; transform: translateY(8px); }
          to   { opacity: 1; transform: translateY(0); }
        }
        @media (max-width: 600px) {
          .prog-panel { padding: 18px 18px !important; }
        }
      `}</style>
    </Section>
  );
}

function navBtnStyle(disabled) {
  return {
    background: "transparent", border: "none",
    fontFamily: T.mono, fontSize: 10, letterSpacing: 2, textTransform: "uppercase",
    color: disabled ? T.inkMute : T.ink,
    cursor: disabled ? "not-allowed" : "pointer",
    opacity: disabled ? 0.4 : 1,
    padding: 0,
  };
}

Object.assign(window, { ProgrammeSection });