/* ───── Extras: Booking process, Testimonials, FAQ ───── */

const PROCESS_STEPS = [
  {
    num: "01",
    title: "Send a message",
    body: "WhatsApp Annie at +91 81789 73198. Share your name, date of birth, and what you're sitting with — love, career, family, anything. No formality. Just a hello.",
    action: { label: "Open WhatsApp", href: "https://wa.me/918178973198?text=Namaste%20Annie%20Ji%2C%20I%20would%20like%20to%20book%20a%20reading" },
  },
  {
    num: "02",
    title: "Pick a slot",
    body: "Annie replies within a few hours — usually the same day. Pick a morning, afternoon, or evening that suits you. Sessions run six days a week.",
  },
  {
    num: "03",
    title: "Sit at the table",
    body: "Join over WhatsApp call (voice or video) — or visit the Chattarpur studio in person if you're in Delhi. Bring your questions. Bring a notebook. Hindi or English, whatever's closer to you.",
  },
  {
    num: "04",
    title: "Walk away clearer",
    body: "You leave with the reading written down, the remedies prescribed, and a sense of what to do next. Not vague predictions — practical guidance for the next thirty days.",
  },
];

const TESTIMONIALS = [
  {
    name: "Priya S.",
    city: "Gurgaon",
    rating: 5,
    body: "Annie ji ne mujhe ek bahut bada wrong decision lene se bacha liya. Aapse baat karke aisa laga jaise kisi apne se baat kar rahi hu — calm, honest, no drama. The Lal Kitab remedies actually worked.",
    topic: "Career change",
  },
  {
    name: "Rahul M.",
    city: "Mumbai",
    rating: 5,
    body: "Came in stressed about a business decision. Annie ji patiently listened to every question, no rushing. Her tarot read was specific — she named the partner's first letter and the month it would resolve. Both happened.",
    topic: "Business & partnership",
  },
  {
    name: "Sunita K.",
    city: "Jaipur",
    rating: 5,
    body: "Har baar Annie ji se baat karke saari paresani halki ho jaati hai. She is the kind of reader who tells you the truth gently. Numerology session ne mere bete ka naam suggest kiya — woh ab bahut acche se settle ho gaya hai.",
    topic: "Numerology · Family",
  },
  {
    name: "Vikram & Nandini",
    city: "New Delhi",
    rating: 5,
    body: "Booked the couple compatibility session before our wedding. She didn't sugar-coat — pointed out the friction patterns and what to watch for. Two years in, every single thing she said has been useful. Honest reading.",
    topic: "Love & marriage",
  },
  {
    name: "Anita R.",
    city: "Lucknow",
    rating: 5,
    body: "I joined the tarot card course online. Small batch, real practice on real spreads, and Annie ji answers every question — even after class is over. Six months later I'm reading for friends and family with confidence.",
    topic: "Tarot course",
  },
  {
    name: "Karan B.",
    city: "London",
    rating: 5,
    body: "Booked online from London for a full life-path session. 90 minutes felt like 30. She traced patterns in my life I'd never connected. The vastu adjustments she suggested for the new flat have made a noticeable difference.",
    topic: "Life-path · Vastu",
  },
];

const FAQS = [
  {
    q: "Who is Astro Annie and why should I trust her?",
    a: "Anjlina Singh Marwaha — known to her clients as Astro Annie — is a Delhi-based numerologist, tarot reader, vastu expert and Lal Kitab specialist with twenty-two years of practice. She has read for hundreds of clients across India and abroad, and received the Jyotish Star Award in 2026. She's known for honest, practical readings — never the kind that scare you into booking again.",
  },
  {
    q: "What's the difference between tarot, numerology, Lal Kitab and vastu?",
    a: "Tarot is a listening tool — drawn from the question you bring. Numerology reads the energy in your name and birth date. Lal Kitab works from your kundali and prescribes small, low-cost remedies (an iron ring, a fistful of rice in flowing water, that sort of thing). Vastu addresses the physical space you live or work in. Annie often weaves two or three together in a single sitting.",
  },
  {
    q: "Do I have to be in Delhi for a reading?",
    a: "No. Most sessions happen on WhatsApp voice or video call — that's how clients in Mumbai, Bangalore, Dubai, London and Toronto sit with Annie. If you're in Delhi NCR and prefer to come in person, the Chattarpur studio is open by appointment six days a week.",
  },
  {
    q: "Is the reading available in Hindi?",
    a: "Haan, bilkul. Annie ji reads fluently in Hindi and English and switches between the two as the conversation needs. Many clients prefer to talk about personal matters in their mother tongue — that's encouraged.",
  },
  {
    q: "How long is a typical session, and what does it cost?",
    a: "A single tarot question starts at ₹251; a full 60-minute audio session is ₹2100 and video is ₹4100. Numerology, Vastu and Lal Kitab readings are listed too. Every price is on the Services & Pricing section of this page — nothing is hidden. Annie does not watch the clock; sittings often run long when the cards open up something important.",
  },
  {
    q: "Is everything confidential?",
    a: "Always. What you share at the table stays at the table. No recordings are kept beyond what you receive, no client details are shared anywhere — many people bring their most personal matters here, and that trust is the foundation of the practice.",
  },
  {
    q: "Can I learn this from her? Are there courses?",
    a: "Yes — Annie ji runs small-batch courses (six students) in tarot (12 weeks), numerology (8 weeks), and vastu (10 weeks), plus a weekend Lal Kitab intensive. Classes happen in person at the Chattarpur studio or live on video. You finish with a certificate and entry to a private circle of practitioners.",
  },
  {
    q: "How do I actually book?",
    a: "Pick a service from the Services & Pricing section, pay the listed amount by UPI QR or Paytm, then send a screenshot of the payment on WhatsApp to confirm — the booking button pre-fills your message with the service and price. Prefer to talk first? WhatsApp Annie with your name, date of birth, and a one-line note about what you'd like to discuss, and the studio replies the same day.",
  },
];

/* ────────── How-it-works section ────────── */
const BookingProcess = () => (
  <section className="booking" data-screen-label="05 How It Works">
    <div className="section-head">
      <div className="rp-eyebrow">How a sitting works</div>
      <h2 className="section-title">
        Simple. Private. <span className="serif-italic">By appointment.</span>
      </h2>
      <p className="section-sub">
        Four steps from the message you send to the answers you walk away with.
      </p>
    </div>

    <ol className="step-grid">
      {PROCESS_STEPS.map((s, i) => (
        <li key={i} className="step">
          <div className="step-num">{s.num}</div>
          <div className="step-thread" aria-hidden="true"/>
          <h3 className="step-title">{s.title}</h3>
          <p className="step-body">{s.body}</p>
          {s.action && (
            <a className="step-action" href={s.action.href} target="_blank" rel="noopener">
              {s.action.label} <span aria-hidden="true">→</span>
            </a>
          )}
        </li>
      ))}
    </ol>
  </section>
);

/* ────────── Testimonials section ────────── */
const Testimonials = () => (
  <section className="testimonials" data-screen-label="06 Testimonials">
    <div className="section-head">
      <div className="rp-eyebrow">What clients say</div>
      <h2 className="section-title">
        Real voices.<br/>
        <span className="serif-italic">Read theirs.</span>
      </h2>
      <p className="section-sub">
        Notes from clients across India and abroad — names changed where asked, words unedited.
      </p>
    </div>

    <div className="testi-grid">
      {TESTIMONIALS.map((t, i) => (
        <figure key={i} className="testi" style={{'--rot': `${((i * 1.7) % 3 - 1) * 0.6}deg`}}>
          <div className="testi-stars" aria-label={`${t.rating} stars`}>
            {Array.from({length: t.rating}).map((_, j) => <span key={j}>★</span>)}
          </div>
          <blockquote className="testi-body">{t.body}</blockquote>
          <figcaption className="testi-caption">
            <div className="testi-name">{t.name}</div>
            <div className="testi-meta">{t.city} · {t.topic}</div>
          </figcaption>
        </figure>
      ))}
    </div>

    <div className="testi-footer">
      <div className="testi-stat">
        <div className="stat-num">22<span>yrs</span></div>
        <div className="stat-label">Practice</div>
      </div>
      <div className="testi-stat">
        <div className="stat-num">600<span>+</span></div>
        <div className="stat-label">Sittings</div>
      </div>
      <div className="testi-stat">
        <div className="stat-num">4.9<span>★</span></div>
        <div className="stat-label">Average</div>
      </div>
      <div className="testi-stat">
        <div className="stat-num">9<span>countries</span></div>
        <div className="stat-label">Clients in</div>
      </div>
    </div>
  </section>
);

/* ────────── FAQ section ────────── */
const FAQ = () => {
  const [open, setOpen] = React.useState(0);
  return (
    <section className="faq" data-screen-label="07 FAQ" id="faq">
      <div className="section-head">
        <div className="rp-eyebrow">Questions before you sit down</div>
        <h2 className="section-title">
          Things people ask <span className="serif-italic">before they book.</span>
        </h2>
      </div>

      <div className="faq-list">
        {FAQS.map((f, i) => (
          <div key={i} className={`faq-item ${open === i ? "faq-open" : ""}`}>
            <button
              type="button"
              className="faq-q"
              onClick={() => setOpen(open === i ? -1 : i)}
              aria-expanded={open === i}
            >
              <span className="faq-q-text">{f.q}</span>
              <span className="faq-toggle" aria-hidden="true">{open === i ? "−" : "+"}</span>
            </button>
            <div className="faq-a-wrap" style={{
              maxHeight: open === i ? "320px" : "0",
              opacity: open === i ? 1 : 0,
            }}>
              <p className="faq-a">{f.a}</p>
            </div>
          </div>
        ))}
      </div>

      <div className="faq-cta">
        <p>Still wondering? <a href="https://wa.me/918178973198?text=Namaste%20Annie%20Ji%2C%20I%20have%20a%20question%20before%20booking" >WhatsApp Annie ji directly</a> — no obligation.</p>
      </div>
    </section>
  );
};

Object.assign(window, { BookingProcess, Testimonials, FAQ });