const SPELLS = [
  { n: "I",   t: "No Phones",                            g: "☎︎", d: "We do not use phones, unless we use them for taking photos. The outside world can wait." },
  { n: "II",  t: "Honesty",                              g: "☉", d: "We are honest with each other and with ourselves, even when it feels a little uncomfortable." },
  { n: "III", t: "Consent Is Sacred",                    g: "♁", d: "We do not judge each other. Everyone has their own madness, magic, and story." },
  { n: "IV",  t: "Silence Is Welcome",                   g: "✦", d: "We respect our own boundaries and the boundaries of others. And when needed, we protect them, even if it means saying “fuck you.” We respect that too, because here we say it from love and with love." },
  { n: "V",   t: "Witness, Don't Pose",                  g: "◉", d: "No fixing, no preaching, no spiritual ego show." },
  { n: "VI",  t: "Fuck You, Thank You, I Love You",      g: "❦", d: "We allow ourselves and others to feel, create, speak, stay silent, laugh, cry, scream into a pillow, or simply be." },
  { n: "VII", t: "What Happens In Neverland…",           g: "†", d: "We are here for freedom, expression and adventure, but also for care, responsibility and mutual respect." },
];

function TarotCard({ spell }) {
  const [flipped, setFlipped] = React.useState(false);
  const isTouch = typeof window !== "undefined" && window.matchMedia("(hover: none)").matches;
  return (
    <div
      className={"tarot" + (flipped ? " flipped" : "")}
      onClick={() => isTouch && setFlipped((f) => !f)}
      role="button" tabIndex={0}
      onKeyDown={(e) => { if (e.key === " " || e.key === "Enter") { e.preventDefault(); setFlipped((f) => !f); } }}
      aria-label={`Spell ${spell.n}: ${spell.t}. Activate to reveal.`}
    >
      <div className="tarot-inner">
        {/* FRONT */}
        <div className="tarot-face">
          <div className="tarot-corners" aria-hidden="true">
            <span></span><span></span><span></span><span></span>
          </div>
          <div className="tarot-roman">· {spell.n} ·</div>
          <div className="tarot-art">
            <div className="tarot-halo" aria-hidden="true"></div>
            <div className="tarot-rays" aria-hidden="true"></div>
            <span className="tarot-illus" aria-hidden="true">{spell.g}</span>
          </div>
          <div className="tarot-banner">
            <span className="tarot-banner__flourish" aria-hidden="true">✦</span>
            <span className="tarot-title">{spell.t}</span>
            <span className="tarot-banner__flourish" aria-hidden="true">✦</span>
          </div>
        </div>

        {/* BACK */}
        <div className="tarot-back">
          <div className="tarot-corners" aria-hidden="true">
            <span></span><span></span><span></span><span></span>
          </div>
          <div className="tarot-back-pattern" aria-hidden="true"></div>
          <div className="tarot-roman">· {spell.n} ·</div>
          <div className="tarot-back-art">
            <span className="tarot-back-glyph" aria-hidden="true">{spell.g}</span>
            <p className="tarot-desc">{spell.d}</p>
          </div>
          <div className="tarot-banner">
            <span className="tarot-banner__flourish" aria-hidden="true">✦</span>
            <span className="tarot-title tarot-title--small">{spell.t}</span>
            <span className="tarot-banner__flourish" aria-hidden="true">✦</span>
          </div>
        </div>
      </div>
    </div>
  );
}

function Spells() {
  return (
    <section id="spells">
      <div className="grain"></div>
      <div className="container">
        <SectionHead
          eyebrow="Spells · III"
          title="Rules of the Neverland"
          lede="To keep this place safe, honest, and beautifully wild. We follow a few simple rules."
          ornaments={["star-seven", "all-seeing-eye", "star-seven"]}
        />
        <div className="spells-grid">
          {SPELLS.map((s, i) => (
            <Reveal key={s.n} delay={i * 80}>
              <TarotCard spell={s} />
            </Reveal>
          ))}
          <div className="spell-alice" aria-hidden="true">
            <img src="./characters/alice.webp" alt="" />
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Spells, TarotCard, SPELLS });