// Testimonials, FAQ, Booking, Footer
const { useState: useState_e, useMemo: useMemo_e, useEffect: useEffect_a, useRef: useRef_a } = React;

function Testimonials() {
  const t = [
    {
      quote: "Six months in and I finally know what calm feels like. Dr. Hartwell has a way of making the hardest conversations feel safe — and somehow useful.",
      name: "Mara K.", role: "Client · 8 months", initials: "MK",
      bg: "linear-gradient(160deg, #F1ECFF 0%, #FFE8E1 100%)",
      rot: "-1.2deg",
    },
    {
      quote: "I came in for anxiety and left with a whole new relationship with myself. Worth every single session — and then some.",
      name: "Jordan T.", role: "Client · 1 year", initials: "JT",
      bg: "linear-gradient(160deg, #E6F7F3 0%, #FFF5DA 100%)",
      rot: "0.6deg",
    },
    {
      quote: "She gets it. After years of bouncing between therapists, Dr. Hartwell is the first one who actually listened — and gave me real tools that work.",
      name: "Priya S.", role: "Client · 6 months", initials: "PS",
      bg: "linear-gradient(160deg, #FFE8E1 0%, #F1ECFF 100%)",
      rot: "-0.6deg",
    },
  ];
  return (
    <section className="s-pad" data-screen-label="06 Testimonials">
      <div className="blob blob-yellow" style={{ width: 240, height: 240, top: 80, right: "12%", opacity: .4 }}/>
      <div className="wrap-wide">
        <div style={{ textAlign: "center", marginBottom: 56 }}>
          <span className="eyebrow eyebrow-c" style={{ justifyContent: "center" }}>Kind Words</span>
          <h2 className="h-section" style={{ marginTop: 16 }}>
            Real growth. <span className="script">Real people.</span>
          </h2>
        </div>

        <div className="test-grid">
          {t.map((tc, i) => (
            <div key={i} className="test-card" style={{ "--tc-bg": tc.bg, "--tc-rot": tc.rot, transform: `rotate(${tc.rot})` }}>
              <span className="quote-mark">"</span>
              <div className="test-stars">
                {[0,1,2,3,4].map(j => <Icon key={j} name="star" size={15}/>)}
              </div>
              <p>{tc.quote}</p>
              <div className="test-meta">
                <div className="test-avatar" style={{
                  display: "grid", placeItems: "center",
                  background: ["#E2D3FF","#C6EBE4","#FFD0C5"][i],
                  color: "var(--ink)", fontWeight: 800, fontSize: 16,
                }}>
                  {tc.initials}
                </div>
                <div>
                  <div className="test-name">{tc.name}</div>
                  <div className="test-role">{tc.role}</div>
                </div>
              </div>
            </div>
          ))}
        </div>

        <div style={{ display: "flex", justifyContent: "center", marginTop: 40, gap: 24, flexWrap: "wrap" }}>
          <div style={{ display: "flex", alignItems: "center", gap: 10, fontSize: 14, fontWeight: 700 }}>
            <span style={{ display: "flex", gap: 2, color: "var(--yellow)" }}>
              {[0,1,2,3,4].map(i => <Icon key={i} name="star" size={16}/>)}
            </span>
            <span>4.9 average on Psychology Today</span>
          </div>
          <span style={{ color: "var(--line)" }}>·</span>
          <div style={{ fontSize: 14, fontWeight: 700, color: "var(--ink-soft)" }}>240+ five-star reviews</div>
        </div>
      </div>
    </section>
  );
}

function FAQ() {
  const [open, setOpen] = useState_e(0);
  const qs = [
    { q: "What is CBT and how does it work?",
      a: "Cognitive Behavioural Therapy is a structured, evidence-based talking therapy. We look at how your thoughts, feelings, and behaviours interact — and gently test out new ways of responding that move you closer to the life you want. It's collaborative, practical, and time-limited." },
    { q: "Do you accept private health insurance?",
      a: "Yes — I'm recognised by Bupa, Cigna, Aviva, Vitality Health, Healix, AXA PPP and several other major UK insurers. Cover and session limits vary by policy, so it's worth confirming CBT cover with your provider before our first session." },
    { q: "How many sessions will I need?",
      a: "Most CBT courses run between 8 and 20 weekly sessions, depending on the issue and your goals. We'll review progress together every few sessions so you always know where we are — and you're never locked in." },
    { q: "Do you offer online sessions?",
      a: "Yes — fully online via Zoom, or in person at Lumina Mind Studio in Kensington, London. About half of my clients see me online and find it just as effective. You can switch between formats as needed." },
    { q: "Can we have sessions in Cantonese?",
      a: "Absolutely. I offer CBT in both English and Cantonese (粵語), and many of my clients move comfortably between the two depending on the topic. Please let me know your preference when we book the intro call." },
    { q: "What does the first session look like?",
      a: "We start with a free 15-minute call to make sure I'm the right fit. The first full session is an assessment — mostly listening, mapping out what's brought you in, and agreeing realistic goals together. No homework, no pressure." },
    { q: "Is everything we talk about confidential?",
      a: "Yes, with very few exceptions required by law and BABCP ethical guidelines (imminent risk of harm to self or others, safeguarding concerns). I'll walk you through those exceptions in our first session so nothing feels uncertain." },
  ];
  return (
    <section id="faq" className="s-pad" data-screen-label="07 FAQ">
      <div className="wrap" style={{ maxWidth: 820 }}>
        <div style={{ textAlign: "center", marginBottom: 48 }}>
          <span className="eyebrow eyebrow-c" style={{ justifyContent: "center" }}>FAQ</span>
          <h2 className="h-section" style={{ marginTop: 16 }}>
            Questions, <span className="script">answered.</span>
          </h2>
        </div>

        <div className="faq-list">
          {qs.map((item, i) => (
            <div key={i} className={`faq-item ${open === i ? "open" : ""}`}>
              <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)} aria-expanded={open === i}>
                <span>{item.q}</span>
                <span className="faq-toggle"><Icon name="plus" size={16}/></span>
              </button>
              <div className="faq-a"><p>{item.a}</p></div>
            </div>
          ))}
        </div>

        <p style={{ textAlign: "center", marginTop: 32, color: "var(--ink-mute)", fontSize: 14 }}>
          Have another question? <a href="#contact" style={{ color: "var(--purple-deep)", fontWeight: 700 }}>Send me a message →</a>
        </p>
      </div>
    </section>
  );
}

// ─────────── Booking calendar ───────────
const MONTHS = ["January","February","March","April","May","June","July","August","September","October","November","December"];
const DOW = ["S","M","T","W","T","F","S"];

function Booking() {
  // Anchor "today" to May 14 2026 (consistent regardless of real date)
  const today = new Date(2026, 4, 14);
  const [view, setView] = useState_e({ y: 2026, m: 4 }); // May 2026
  const [selDate, setSelDate] = useState_e(new Date(2026, 4, 21));
  const [selSlot, setSelSlot] = useState_e("2:00 PM");
  const [booked, setBooked] = useState_e(false);

  const days = useMemo_e(() => {
    const first = new Date(view.y, view.m, 1);
    const lead = first.getDay();
    const dim = new Date(view.y, view.m + 1, 0).getDate();
    const arr = [];
    for (let i = 0; i < lead; i++) {
      const d = new Date(view.y, view.m, -lead + i + 1);
      arr.push({ d, muted: true });
    }
    for (let i = 1; i <= dim; i++) arr.push({ d: new Date(view.y, view.m, i), muted: false });
    while (arr.length % 7) {
      const last = arr[arr.length - 1].d;
      arr.push({ d: new Date(last.getFullYear(), last.getMonth(), last.getDate() + 1), muted: true });
    }
    return arr;
  }, [view]);

  const slots = ["9:00 AM","10:30 AM","12:00 PM","2:00 PM","3:30 PM","5:00 PM"];
  const taken = useMemo_e(() => {
    if (!selDate) return new Set();
    const seed = selDate.getDate() * 7;
    const set = new Set();
    if ((seed) % 3 === 0) set.add("9:00 AM");
    if ((seed) % 5 === 0) set.add("3:30 PM");
    if ((seed) % 4 === 0) set.add("12:00 PM");
    return set;
  }, [selDate]);

  const isAvailable = (d) => {
    if (d < today) return false;
    const dow = d.getDay();
    if (dow === 0 || dow === 6) return false;
    return true;
  };
  const sameDay = (a, b) => a && b && a.toDateString() === b.toDateString();
  const onPickDate = (d) => { if (!isAvailable(d)) return; setSelDate(d); setBooked(false); setSelSlot(null); };
  const onPickSlot = (s) => { if (!taken.has(s)) { setSelSlot(s); setBooked(false); } };
  const onBook = () => { if (selDate && selSlot && !taken.has(selSlot)) setBooked(true); };
  const prevMonth = () => setView(v => v.m === 0 ? { y: v.y - 1, m: 11 } : { y: v.y, m: v.m - 1 });
  const nextMonth = () => setView(v => v.m === 11 ? { y: v.y + 1, m: 0 } : { y: v.y, m: v.m + 1 });

  return (
    <section id="booking" className="s-pad" data-screen-label="08 Booking">
      <div className="wrap-wide">
        <div className="booking">
          <div className="blob blob-yellow" style={{ width: 280, height: 280, top: -60, right: -40, opacity: .4 }}/>
          <SparkleDoodle style={{ top: 36, left: 36, color: "rgba(255,210,94,.6)" }}/>
          <HeartDoodle style={{ bottom: 36, right: 36, color: "rgba(255,181,168,.7)", transform: "rotate(-12deg)" }}/>

          <div className="booking-grid">
            <div>
              <span className="eyebrow" style={{ color: "var(--yellow)" }}>
                <span style={{ background: "var(--yellow)", height: 2, width: 28, borderRadius: 2, display: "inline-block", marginRight: 2 }}></span>
                Ready when you are
              </span>
              <h2 className="h-section" style={{ marginTop: 18 }}>
                You don't have to do <span className="script">this alone.</span>
              </h2>
              <p className="lede" style={{ marginTop: 20, maxWidth: 460 }}>
                Pick a time that fits your week. The first 15-minute intro call is free — no commitment, just a conversation to see if we're the right fit.
              </p>

              <div style={{ display: "flex", gap: 24, marginTop: 32, flexWrap: "wrap" }}>
                {[
                  { ico: "video", label: "Online or in person" },
                  { ico: "globe", label: "English & Cantonese" },
                  { ico: "clock", label: "50-min · £110" },
                ].map(x => (
                  <div key={x.label} style={{ display: "flex", alignItems: "center", gap: 10, fontSize: 14, fontWeight: 600 }}>
                    <span style={{ width: 36, height: 36, borderRadius: 12, background: "rgba(255,255,255,.14)", color: "var(--yellow)", display: "grid", placeItems: "center" }}>
                      <Icon name={x.ico} size={16}/>
                    </span>
                    {x.label}
                  </div>
                ))}
              </div>

              <div style={{ display: "flex", gap: 14, marginTop: 36, alignItems: "center", flexWrap: "wrap" }}>
                <button className="btn btn-white" onClick={onBook} style={{
                  boxShadow: "0 0 0 8px rgba(255,255,255,.14), 0 14px 32px -8px rgba(0,0,0,.3)",
                  pointerEvents: booked ? "none" : "auto",
                }}>
                  <span className="btn-icon-l" style={{ color: "var(--purple-deep)" }}>
                    <Icon name={booked ? "check" : "calendar"} size={16}/>
                  </span>
                  {booked ? "Session Booked ♡" : "Book Session"}
                  {!booked && <span className="btn-icon-r" style={{ background: "rgba(91,63,214,.14)", color: "var(--purple-deep)" }}>
                    <Icon name="arrow-right" size={14}/>
                  </span>}
                </button>
                <span style={{ fontFamily: "var(--ff-script)", color: "var(--yellow)", fontSize: 22 }}>
                  ♡ first call is free
                </span>
              </div>

              <div style={{ marginTop: 28, fontSize: 13, color: "rgba(255,255,255,.65)", display: "flex", gap: 18, flexWrap: "wrap" }}>
                <span style={{ display: "inline-flex", alignItems: "center", gap: 6 }}>
                  <Icon name="phone" size={13}/> +44 7700 483921
                </span>
                <span style={{ display: "inline-flex", alignItems: "center", gap: 6 }}>
                  <Icon name="mail" size={13}/> hello@luminamindstudio.com
                </span>
              </div>
            </div>

            <div className="cal">
              <div className="cal-head">
                <b>{MONTHS[view.m]} {view.y}</b>
                <div className="cal-nav">
                  <button onClick={prevMonth} aria-label="Previous month"><Icon name="chevron-left" size={16}/></button>
                  <button onClick={nextMonth} aria-label="Next month"><Icon name="chevron-right" size={16}/></button>
                </div>
              </div>
              <div className="cal-dow">{DOW.map((d,i) => <span key={i}>{d}</span>)}</div>
              <div className="cal-grid">
                {days.map(({ d, muted }, i) => {
                  const avail = !muted && isAvailable(d);
                  const sel = sameDay(d, selDate);
                  const isToday = sameDay(d, today);
                  return (
                    <button
                      key={i}
                      className={`cal-day ${muted ? "muted" : avail ? "avail" : "unavail"} ${sel ? "sel" : ""} ${isToday ? "today" : ""}`}
                      onClick={() => onPickDate(d)}
                      disabled={!avail}
                    >{d.getDate()}</button>
                  );
                })}
              </div>

              {selDate && (
                <>
                  <div style={{ marginTop: 18, paddingTop: 18, borderTop: "1px solid var(--line)" }}>
                    <div style={{ fontSize: 12.5, fontWeight: 700, letterSpacing: ".06em", textTransform: "uppercase", color: "var(--ink-mute)", marginBottom: 10 }}>
                      Available times — {selDate.toLocaleDateString("en-GB", { weekday: "long", month: "short", day: "numeric" })}
                    </div>
                    <div style={{ display: "flex", flexWrap: "wrap", gap: 8 }}>
                      {slots.map(s => (
                        <button
                          key={s}
                          className={`slot ${taken.has(s) ? "taken" : ""} ${selSlot === s ? "sel" : ""}`}
                          onClick={() => onPickSlot(s)}
                          disabled={taken.has(s)}
                        >{s} <span style={{ opacity: .55, fontSize: 11, marginLeft: 2 }}>GMT</span></button>
                      ))}
                    </div>
                  </div>
                  <div className="cal-foot">
                    <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
                      <Icon name="map" size={14}/>
                      <span>Kensington, London · Online</span>
                    </div>
                    <div style={{ fontWeight: 700, color: "var(--ink)" }}>
                      {selSlot ? `${selSlot} · 50 min · £110` : "Pick a time"}
                    </div>
                  </div>
                </>
              )}
            </div>
          </div>

          {booked && (
            <div style={{
              position: "absolute", inset: 0, background: "rgba(27,19,64,.6)",
              WebkitBackdropFilter: "blur(8px)", backdropFilter: "blur(8px)",
              display: "grid", placeItems: "center", borderRadius: "var(--radius-xl)",
              zIndex: 5, animation: "rise-in .4s both"
            }}>
              <div className="card" style={{ maxWidth: 440, textAlign: "center", padding: 36 }}>
                <div style={{ width: 64, height: 64, borderRadius: "50%", background: "var(--teal-50)", color: "var(--teal)", display: "grid", placeItems: "center", margin: "0 auto 16px" }}>
                  <Icon name="check" size={32}/>
                </div>
                <h3 style={{ margin: 0, fontSize: 24, fontWeight: 800 }}>Request received ♡</h3>
                <p style={{ color: "var(--ink-soft)", margin: "12px 0 20px" }}>
                  Thanks for choosing <b>{selDate.toLocaleDateString("en-GB", { weekday: "long", month: "long", day: "numeric" })}</b> at <b>{selSlot}</b>. I'll confirm your appointment shortly.
                </p>
                <button className="btn btn-secondary" onClick={() => setBooked(false)}>Close</button>
              </div>
            </div>
          )}
        </div>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer id="contact" data-screen-label="09 Footer">
      <SwirlDoodle style={{ top: 40, left: "8%", opacity: .25 }} color="#FFD25E"/>
      <div className="wrap-wide">
        <div className="f-grid">
          <div className="f-col">
            <Logo inverted />
            <p style={{ marginTop: 18, maxWidth: 320, color: "rgba(255,255,255,.6)" }}>
              Lumina Mind Studio — BABCP-accredited Cognitive Behavioural Therapy in Kensington, London, and online across the UK. With Dr. Amelia Hartwell, in English and Cantonese.
            </p>
            <div className="f-social">
              <a href="#" aria-label="Instagram"><Icon name="instagram" size={18}/></a>
              <a href="#" aria-label="LinkedIn"><Icon name="linkedin" size={18}/></a>
              <a href="mailto:hello@luminamindstudio.com" aria-label="Email"><Icon name="mail" size={18}/></a>
            </div>
          </div>

          <div className="f-col">
            <h5>Visit</h5>
            <p>
              28 Willow Crescent<br/>
              Kensington Green<br/>
              London W8 4LA
            </p>
            <p style={{ marginTop: 12, display: "flex", alignItems: "center", gap: 8 }}>
              <Icon name="phone" size={14}/> +44 7700 483921
            </p>
            <p style={{ display: "flex", alignItems: "center", gap: 8 }}>
              <Icon name="mail" size={14}/> hello@luminamindstudio.com
            </p>
          </div>

          <div className="f-col">
            <h5>Clinic Hours</h5>
            <p>Monday – Thursday<br/>9:00 – 18:00</p>
            <p style={{ marginTop: 12 }}>Friday<br/>9:00 – 14:00</p>
            <p style={{ marginTop: 12, color: "var(--coral-2)" }}>Closed weekends</p>
          </div>

          <div className="f-col">
            <h5>Sitemap</h5>
            <p>
              <a href="#home">Home</a><br/>
              <a href="#about">About Dr. Hartwell</a><br/>
              <a href="#services">What CBT Helps</a><br/>
              <a href="#process">How It Works</a><br/>
              <a href="#fees">Fees &amp; Insurance</a><br/>
              <a href="#faq">FAQ</a><br/>
              <a href="#booking">Book a Session</a>
            </p>
          </div>
        </div>

        <div className="f-quote">
          Be patient with yourself. Nothing in nature blooms all year.
        </div>
        <div className="f-legal">
          © 2026 Lumina Mind Studio · Dr. Amelia Hartwell, BABCP-accredited CBT Therapist · Privacy · GDPR
        </div>
      </div>
    </footer>
  );
}

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