/* ───── Reading content — three sections that scroll into view ───── */

const READINGS = [
  {
    roman: "I",
    position: "Past",
    title: "The Beginning",
    kicker: "About the Reader",
    portrait: true,
    lede: "Three decades at the velvet table. Twenty-two years of practice. The cards have a long memory, and so does Anjlina.",
  },
  {
    roman: "II",
    position: "Present",
    title: "The Reading",
    kicker: "What is offered",
    lede: "What you bring to the table is heard. What the cards say is honest. From a single tarot question to a full sixty-minute sitting, numerology, Vastu and Lal Kitab.",
    footnote: "See the full menu and prices below — pick a service, pay, and confirm on WhatsApp. ↓",
  },
  {
    roman: "III",
    position: "Future",
    title: "The Teaching",
    kicker: "Courses Available",
    lede: "What was given to you must be passed on. Become the reader. Small batches, taught at the table.",
    courses: [
      { name: "Tarot Card Course", desc: "Two months · three classes a week. The 78 cards, the major spreads, and the ethics of reading — with live practice throughout.", tag: "₹5000" },
      { name: "Numerology Course", desc: "Four months · three classes a week. Pythagorean and Chaldean systems — read names, dates, and life-paths fluently.",          tag: "₹6000" },
      { name: "Lal Kitab Course",  desc: <>Six months · three classes a week. Chart reading and the Red Book's remedies.<br/><span className="free-badge">✦ Money Magnet course included free</span></>, tag: "₹6000" },
    ],
    footnote: "One-to-one or small group sessions — taught at the Chattarpur studio or live on video. Certificate provided. WhatsApp Annie for the next batch dates.",
  },
];

const Credentials = () => (
  <ul className="creds">
    <li><span className="dot"/> Numerologist · 22+ years</li>
    <li><span className="dot"/> Certified Tarot Card Reader</li>
    <li><span className="dot"/> Lal Kitab Specialist</li>
    <li><span className="dot"/> Vastu Expert</li>
    <li><span className="dot"/> Birth-chart astrology</li>
    <li><span className="dot"/> Jyotish Star Award — 2026</li>
  </ul>
);

// Single reading panel — full viewport, card on left, content on right
const ReadingPanel = ({ idx, cardBack }) => {
  const r = READINGS[idx];
  const FaceComp = [CardFacePast, CardFacePresent, CardFaceFuture][idx];
  const sectionRef = React.useRef(null);
  const [inView, setInView] = React.useState(false);

  React.useEffect(() => {
    const obs = new IntersectionObserver(
      entries => entries.forEach(e => e.isIntersecting && setInView(true)),
      { threshold: 0.15, rootMargin: "-10% 0px" }
    );
    if (sectionRef.current) obs.observe(sectionRef.current);
    return () => obs.disconnect();
  }, []);

  const id = ["past","present","future"][idx];
  return (
    <section
      ref={sectionRef}
      id={id}
      data-screen-label={`0${idx+2} ${r.position}`}
      className={`rp ${inView ? "rp-in" : ""}`}
    >
      <div className="rp-card-wrap">
        <div className="rp-card" style={{perspective: 1600}}>
          <div className="rp-card-flip">
            <div className="rp-card-back"><CardBack variant={cardBack}/></div>
            <div className="rp-card-face"><FaceComp/></div>
          </div>
        </div>
        <div className="rp-card-label">
          <div className="rp-roman">{r.roman}</div>
          <div className="rp-pos">{r.position}</div>
        </div>
      </div>

      <div className="rp-body">
        <div className="rp-eyebrow">{r.kicker}</div>
        <h2 className="rp-title">{r.title}</h2>
        <p className="rp-lede">{r.lede}</p>

        {r.portrait && (
          <div className="rp-portrait-row">
            <div className="portrait-wrap">
              <img src="assets/annie-portrait.jpg" alt="Anjlina Singh Marwaha"/>
            </div>
            <div className="rp-bio">
              <p>Anjlina Singh Marwaha — known to her clients as <em>Astro Annie</em> — has read for hundreds of seekers from her practice in Rajpur Khurd, New Delhi. She works in the lineage of Lal Kitab and the language of numerology, with the tarot as her listening tool.</p>
              <p style={{marginTop: 12}}>Quiet. Practical. Direct. The reading you came for, with the remedy you didn't know to ask for.</p>
            </div>
          </div>
        )}

        {r.portrait && <Credentials/>}

        {(r.services || r.courses) && (
          <div className="item-list">
            {(r.services || r.courses).map((s, i) => (
              <div className="item" key={i}>
                <div className="item-num">{String(i+1).padStart(2,'0')}</div>
                <div>
                  <div className="item-head">{s.name}</div>
                  <div className="item-desc">{s.desc}</div>
                </div>
                <div className="item-tag">{s.tag}</div>
              </div>
            ))}
          </div>
        )}

        {r.footnote && (
          <p className="rp-footnote">{r.footnote}</p>
        )}

        <div className="cta-row">
          {idx === 2 ? (
            <a className="btn-primary" href={`https://wa.me/918178973198?text=${encodeURIComponent("Namaste Annie Ji, I'd like to join one of your courses.")}`} target="_blank" rel="noopener">Enrol — Message Annie</a>
          ) : idx === 1 ? (
            <a className="btn-primary" href="#pricing">View Pricing &amp; Book</a>
          ) : (
            <a className="btn-primary" href="#pricing">Book a Sitting</a>
          )}
          {idx < 2 && (
            <a className="btn-ghost" href={`#${["present","future"][idx]}`}>
              Next card →
            </a>
          )}
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { ReadingPanel, READINGS, Credentials });