const RITUAL = [
  { day: "Tuesday",        time: "09:00",     what: "Menu drops",      note: "Sent to The Table via WhatsApp." },
  { day: "Tuesday",        time: "Midnight",  what: "Order closes",    note: "No late orders. Discipline is the point." },
  { day: "Wednesday",      time: "All day",   what: "Sourcing",        note: "Halal butchers. Day-boat fish. Market produce." },
  { day: "Thursday — Sat", time: "In kitchen",what: "Prep",            note: "Cooked across three days. Never frozen." },
  { day: "Sunday",         time: "All day",   what: "On your table",   note: "Delivered at a time that suits you. Wax-sealed." },
];
window.RITUAL = RITUAL;

function Ritual() {
  const ref = React.useRef(null);
  const [played, setPlayed] = React.useState(false);

  React.useEffect(() => {
    if (!ref.current || played) return;
    const io = new IntersectionObserver(([entry]) => {
      if (entry.isIntersecting) {
        setPlayed(true);
        io.disconnect();
      }
    }, { threshold: 0.25 });
    io.observe(ref.current);
    return () => io.disconnect();
  }, [played]);

  return (
    <section className="section section--forest">
      <div className="section__inner">
        <div className="stack gap-4" style={{maxWidth: 720, marginBottom: 56}}>
          <h2 className="h-display">Every week.<br/>Without exception.</h2>
          <p className="lede lede--cream">From Tuesday's menu drop to Sunday's delivery, the week has a shape.</p>
        </div>

        <div ref={ref} className={`ritual ${played ? "ritual--in" : ""}`}>
          <div className="ritual__line" aria-hidden="true"/>
          {RITUAL.map((r, i) => (
            <div className="ritual-step" key={i} style={{"--step-i": i}}>
              <span className="ritual-step__dot" aria-hidden="true"/>
              <span className="ritual-step__day">{r.day}<br/><span style={{opacity:.5}}>{r.time}</span></span>
              <div className="ritual-step__what">{r.what}</div>
              <div className="ritual-step__note">{r.note}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
window.Ritual = Ritual;