/* global React */
const { useState, useEffect, useRef } = React;

const BOOKING_URL = "https://www.vagaro.com/cryoempresswellness/services";
const openBooking = () => window.open(BOOKING_URL, "_blank", "noopener");

// ============================================================
// Shared design tokens / atoms
// ============================================================

const SERVICES = [
  {
    name: "Laser Lipo",
    blurb: "Non-invasive light therapy that melts inches from waist, arms, and thighs. Zero downtime.",
    duration: "50 min",
  },
  {
    name: "Radio Frequency",
    blurb: "Skin-tightening warmth that stimulates collagen and lifts naturally — neck to knees.",
    duration: "45 min",
  },
  {
    name: "Cavitation",
    blurb: "Sonic waves dissolve fat cells so the body can flush them out — smoother, slimmer lines.",
    duration: "60 min",
  },
  {
    name: "Wood Therapy / Sculpting",
    blurb: "Hand-sculpted lymphatic drainage with anatomical wood tools — drain, tone, refine.",
    duration: "60 min",
  },
  {
    name: "CryoEmpress Treatment",
    blurb: "Our signature cryotherapy protocol — targeted sub-zero therapy that destroys stubborn fat without surgery.",
    duration: "45 min",
  },
  {
    name: "CryoEmpress Facial",
    blurb: "A cooling, lifting facial that tightens, brightens, and reduces puffiness in a single session.",
    duration: "45 min",
  },
];

const TESTIMONIALS = [
  {
    quote:
      "After four sessions my waistline shrank and my cellulite was visibly smoother. The Empress Method actually works — and the studio feels like a sanctuary.",
    name: "Sarah M.",
    detail: "Pearland, TX · Cryo Slimming + Wood Therapy",
  },
  {
    quote:
      "This is the only studio in Houston that treats body sculpting like self-care, not a sales pitch. I leave feeling held, not hustled.",
    name: "Marisol R.",
    detail: "Member since 2024",
  },
  {
    quote:
      "Refined, science-backed, and beautifully run. The Empress Method gave me results no gym had touched in years.",
    name: "Adaeze O.",
    detail: "Monthly member",
  },
];

const STATS = [
  { value: "500+", label: "Sessions Completed" },
  { value: "5.0★", label: "Avg. Member Rating" },
  { value: "1:1", label: "Private Studio" },
  { value: "6", label: "Signature Treatments" },
];

const NAV_ITEMS = ["Studio", "Services", "The Empress Method", "Reviews", "Contact"];

// ============================================================
// Reusable photo placeholder (warm spa tones, no fake imagery)
// ============================================================

function Photo({ label, ratio = "4 / 3", tone = "warm", src, className = "", style = {}, focal = "50% 50%" }) {
  const tones = {
    warm: "linear-gradient(135deg, #2a221b 0%, #3d2f24 40%, #5a4632 100%)",
    cream: "linear-gradient(135deg, #e8dcc8 0%, #d4c2a3 100%)",
    char: "linear-gradient(135deg, #1a1410 0%, #2a221b 100%)",
    gold: "linear-gradient(135deg, #8a6a3a 0%, #c9a660 100%)",
  };
  return (
    <div
      className={`photo ${src ? "photo-real" : ""} ${className}`}
      style={{
        aspectRatio: ratio,
        background: tones[tone],
        ...style,
      }}
    >
      {src ? (
        <img src={(window.__resources && window.__resources[src]) || src} alt={label} className="photo-img" style={{ objectPosition: focal }} />
      ) : (
        <>
          <div className="photo-stripes" />
          <div className="photo-label">{label}</div>
        </>
      )}
    </div>
  );
}

// ============================================================
// Top navigation
// ============================================================

function DesktopNav({ onBook, scrolled }) {
  return (
    <header className={`nav nav-desktop ${scrolled ? "is-scrolled" : ""}`}>
      <div className="nav-inner">
        <a href="#" className="brand">
          <img src={(window.__resources && window.__resources.logo) || "logo.jpg"} alt="CryoEmpress Wellness" className="brand-logo" />
          <span className="brand-text">
            <span className="brand-name">CryoEmpress</span>
            <span className="brand-sub">CryoEmpress Wellness</span>
          </span>
        </a>
        <nav className="nav-links">
          {NAV_ITEMS.map((item) => (
            <a key={item} href={`#${item.toLowerCase()}`}>{item}</a>
          ))}
        </nav>
        <div className="nav-cta">
          <span className="nav-phone">832 · 336 · 3680</span>
          <button className="btn btn-gold" onClick={onBook}>Book Now</button>
        </div>
      </div>
    </header>
  );
}

function MobileNav({ onBook, menuOpen, setMenuOpen }) {
  return (
    <>
      <header className="nav nav-mobile">
        <button className="nav-burger" onClick={() => setMenuOpen(!menuOpen)} aria-label="Menu">
          <span /><span /><span />
        </button>
        <a href="#" className="brand brand-mobile">
          <img src={(window.__resources && window.__resources.logo) || "logo.jpg"} alt="CryoEmpress Wellness" className="brand-logo brand-logo-sm" />
          <span className="brand-name">CryoEmpress</span>
        </a>
        <button className="btn btn-gold btn-sm" onClick={onBook}>Book</button>
      </header>
      <div className={`nav-drawer ${menuOpen ? "is-open" : ""}`} onClick={() => setMenuOpen(false)}>
        <div className="nav-drawer-inner" onClick={(e) => e.stopPropagation()}>
          <div className="nav-drawer-head">
            <span className="brand-name" style={{ color: "var(--gold)" }}>CryoEmpress</span>
            <button className="nav-close" onClick={() => setMenuOpen(false)}>✕</button>
          </div>
          {NAV_ITEMS.map((item) => (
            <a key={item} href={`#${item.toLowerCase()}`} onClick={() => setMenuOpen(false)}>
              {item}
            </a>
          ))}
          <div className="nav-drawer-foot">
            <div>Salon by JC · 2650 Pearland Pkwy #23</div>
            <div>832 · 336 · 3680</div>
            <div>info@cryoempresswellness.com</div>
          </div>
        </div>
      </div>
    </>
  );
}

// ============================================================
// Hero — editorial split with image right, content left
// ============================================================

function Hero({ onBook, mobile = false }) {
  return (
    <section className={`hero ${mobile ? "hero-m" : ""}`} id="studio">
      <div className="hero-grid">
        <div className="hero-left">
          <div className="hero-rail">
            <span className="rail-mark">CE</span>
            <span className="rail-line" />
            <span className="rail-text">Vol. 01 · The Empress Method</span>
          </div>
          <div className="hero-content">
            <span className="eyebrow">Boutique Cryotherapy Studio</span>
            <h1 className="hero-title">
              <span>Refined</span>
              <span className="hero-title-gold"><em>Wellness.</em></span>
              <span>Real Results.</span>
            </h1>
            <p className="hero-sub">
              The Empress Method — a private studio of cryotherapy and
              non-invasive sculpting, shaped one woman at a time. No
              surgery. No downtime. No pressure.
            </p>
            <div className="hero-actions">
              <button className="btn btn-gold btn-lg" onClick={onBook}>Reserve Your Session</button>
              <a className="btn btn-line-gold btn-lg" href="#services">Explore the Method →</a>
            </div>
            <div className="hero-meta">
              <div><strong>1:1</strong>Private Suite, Always</div>
              <div><strong>6</strong>Signature Protocols</div>
              <div><strong>5.0★</strong>Member Rating</div>
            </div>
          </div>
        </div>
        <div className="hero-right">
          <Photo
            label="Cryo facial in our private studio"
            src="images/hero.jpg"
            focal="55% 35%"
            ratio="auto"
            tone="warm"
            className="hero-photo"
          />
          <div className="hero-cap">
            <span>Plate I.</span>
            <span>Cryo Facial · Suite 23</span>
          </div>
        </div>
      </div>
    </section>
  );
}

// ============================================================
// About — editorial spread with Roman numeral, asymmetric photos
// ============================================================

function About({ mobile = false }) {
  return (
    <section className="about" id="about">
      <div className={`about-inner ${mobile ? "is-mobile" : ""}`}>
        <header className="about-head">
          <span className="roman">I.</span>
          <span className="eyebrow eyebrow-dark">The Studio</span>
          <h2 className="about-headline">
            A boutique sanctuary for the woman who takes her wellness <em>personally.</em>
          </h2>
        </header>
        <div className="about-spread">
          <div className="about-photos">
            <Photo
              label="Studio interior"
              src="images/about-main.jpg"
              focal="50% 55%"
              ratio="3 / 4"
              tone="cream"
              className="about-photo-main"
            />
            <figcaption className="about-cap about-cap-main">
              <span>Plate II.</span>
              <span>The Suite, Pearland Parkway</span>
            </figcaption>
            <Photo
              label="Editorial detail"
              src="images/about-inset.jpg"
              focal="60% 40%"
              ratio="1 / 1"
              tone="warm"
              className="about-photo-inset"
            />
            <figcaption className="about-cap about-cap-inset">
              <span>Plate III.</span>
              <span>Hand-blended serums</span>
            </figcaption>
          </div>
          <div className="about-copy">
            <p className="about-lede">
              CryoEmpress was built on a quiet belief: that real results
              shouldn't cost you your peace.
            </p>
            <p>
              Tucked inside Salon by JC on Pearland Parkway, our suite is
              intentionally private — one practitioner, one client at a
              time, every protocol shaped around you.
            </p>
            <p>
              <strong>The Empress Method</strong> pairs clinical-grade
              cryotherapy and sculpting technology with the warmth of a
              five-star spa. Non-invasive. Science-backed. Designed for the
              woman who wants visible change without surrendering her calm.
            </p>
            <div className="about-sign">
              <div className="sign-line" />
              <div>
                <div className="sign-name">The Empress Team</div>
                <div className="sign-title">Certified Sculpting Specialists</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ============================================================
// Services — alternating editorial "spreads", one per treatment
// ============================================================

const SVC_IMAGES = ["svc-laser","svc-rf","svc-cav","svc-wood","svc-cryo","svc-facial"];

function Services({ onBook, mobile = false }) {
  return (
    <section className="services" id="services">
      <header className="services-head">
        <span className="roman">II.</span>
        <span className="eyebrow eyebrow-dark">The Treatments</span>
        <h2 className="services-headline">
          Six signature protocols.<br/>
          <em>One method.</em>
        </h2>
        <p className="services-lede">
          Every journey begins with a private consultation. We build a
          tailored rhythm of cryotherapy and sculpting around your body,
          your calendar, and your goals.
        </p>
      </header>
      <div className={`services-list ${mobile ? "is-mobile" : ""}`}>
        {SERVICES.map((s, i) => (
          <article key={s.name} className={`svc-row svc-row-${i % 2 === 0 ? "l" : "r"}`}>
            <div className="svc-figure">
              <Photo
                label={s.name}
                src={`images/${SVC_IMAGES[i]}.jpg`}
                focal="50% 45%"
                ratio="4 / 5"
                tone={i % 2 === 0 ? "warm" : "char"}
                className="svc-photo"
              />
              <span className="svc-num">№ {String(i + 1).padStart(2, "0")}</span>
            </div>
            <div className="svc-body">
              <span className="svc-kicker">Protocol {String(i + 1).padStart(2, "0")}</span>
              <h3 className="svc-name">{s.name}</h3>
              <p className="svc-blurb">{s.blurb}</p>
              <dl className="svc-meta">
                <div><dt>Duration</dt><dd>{s.duration}</dd></div>
                <div><dt>Downtime</dt><dd>None</dd></div>
                <div><dt>Setting</dt><dd>Private Suite</dd></div>
              </dl>
              <button className="svc-cta" onClick={onBook}>
                Reserve {s.name} <span className="arrow">→</span>
              </button>
            </div>
          </article>
        ))}
      </div>
    </section>
  );
}

// ============================================================
// Trust — single oversized quote with refined stat strip
// ============================================================

function Trust({ mobile = false }) {
  const [active, setActive] = useState(0);
  return (
    <section className="trust">
      <div className="trust-head">
        <span className="roman">III.</span>
        <span className="eyebrow eyebrow-gold">Members Say</span>
      </div>
      <div className="trust-quotes">
        <blockquote className="quote">
          <span className="quote-mark">&ldquo;</span>
          <p>{TESTIMONIALS[active].quote}</p>
          <footer>
            <strong>{TESTIMONIALS[active].name}</strong>
            <span>{TESTIMONIALS[active].detail}</span>
          </footer>
        </blockquote>
        <div className="quote-dots">
          {TESTIMONIALS.map((_, i) => (
            <button
              key={i}
              className={`quote-dot ${active === i ? "is-active" : ""}`}
              onClick={() => setActive(i)}
              aria-label={`Testimonial ${i + 1}`}
            />
          ))}
        </div>
      </div>
      <div className="trust-stats">
        {STATS.map((s) => (
          <div key={s.label} className="stat">
            <div className="stat-value">{s.value}</div>
            <div className="stat-label">{s.label}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

// ============================================================
// Online Consultation — split editorial section, light bg
// ============================================================

function OnlineConsult({ mobile = false }) {
  const items = [
    { n: "01", t: "45-Minute Video Call", d: "One-on-one with a CryoEmpress specialist — face to face, screen to screen." },
    { n: "02", t: "Body Goals Assessment", d: "We map your concerns, lifestyle, and timeline against the right protocols." },
    { n: "03", t: "Personalized Plan", d: "A written treatment recommendation with rhythm, pairings, and at-home care." },
    { n: "04", t: "Priority Booking", d: "Reserve your first in-studio visit ahead of public availability." },
  ];
  return (
    <section className={`online-consult ${mobile ? "is-mobile" : ""}`} id="online">
      <div className="online-inner">
        <div className="online-left">
          <span className="roman">IV.</span>
          <span className="eyebrow eyebrow-dark">Wherever You Are</span>
          <h2 className="online-title">
            The Online<br/>
            <em>Consultation.</em>
          </h2>
          <p className="online-sub">
            For guests outside Pearland — or those quietly considering the
            method before stepping into the studio. A private virtual
            session with our specialist, designed around your goals.
          </p>
          <div className="online-actions">
            <button className="btn btn-ink btn-lg" onClick={openBooking}>Schedule Online Visit</button>
            <a className="btn btn-line-ink btn-lg" href={`tel:8323363680`}>Call to Discuss</a>
          </div>
          <p className="online-note">By appointment · Available evenings &amp; Saturdays</p>
        </div>
        <div className="online-right">
          <div className="online-card">
            <header>
              <span className="online-card-mark">CE</span>
              <span className="online-card-meta">What's Included</span>
            </header>
            <ol className="online-list">
              {items.map((it) => (
                <li key={it.n}>
                  <span className="online-num">{it.n}</span>
                  <div>
                    <h4>{it.t}</h4>
                    <p>{it.d}</p>
                  </div>
                </li>
              ))}
            </ol>
            <footer>
              <span>Plate IV.</span>
              <span>Virtual Suite</span>
            </footer>
          </div>
        </div>
      </div>
    </section>
  );
}

// ============================================================
// CTA banner — dark editorial with thin gold rules
// ============================================================

function CtaBanner({ onBook }) {
  return (
    <section className="cta-banner">
      <div className="cta-rule cta-rule-top" />
      <div className="cta-inner">
        <span className="roman">V.</span>
        <span className="eyebrow eyebrow-gold">The Empress Intro Experience</span>
        <h2 className="cta-title">
          Step into<br/>
          <em>the Empress Method.</em>
        </h2>
        <p className="cta-sub">
          A curated 90-minute introduction — private consultation, body
          assessment, and a signature treatment of your choice. Reserved
          for first-time guests.
        </p>
        <div className="cta-actions">
          <button className="btn btn-gold btn-lg" onClick={onBook}>Book Appointment</button>
          <a className="btn btn-line-gold btn-lg" href="tel:8323363680">Call 832 · 336 · 3680</a>
        </div>
      </div>
      <div className="cta-rule cta-rule-bot" />
    </section>
  );
}

// ============================================================
// Footer
// ============================================================

function Footer({ mobile = false, onOpenPolicies }) {
  return (
    <footer className="footer" id="contact">
      <div className={`footer-inner ${mobile ? "is-mobile" : ""}`}>
        <div className="footer-brand">
          <div className="brand">
            <img src={(window.__resources && window.__resources.logo) || "logo.jpg"} alt="CryoEmpress Wellness" className="brand-logo" />
            <span className="brand-name" style={{ color: "var(--gold)" }}>CryoEmpress</span>
          </div>
          <p>
            The Empress Method — boutique cryotherapy and body sculpting,
            designed for the woman who wants results without the noise.
          </p>
          <div className="socials">
            <a href="https://www.instagram.com/cryoempresswellness/" target="_blank" rel="noopener" aria-label="Instagram">IG</a>
            <a href="mailto:info@cryoempresswellness.com" aria-label="Email">@</a>
            <a href="tel:8323363680" aria-label="Phone">☎</a>
          </div>
        </div>
        <div className="footer-col">
          <h4>Visit</h4>
          <p>Salon by JC<br/>2650 Pearland Parkway, Ste #23<br/>Pearland, TX 77581</p>
        </div>
        <div className="footer-col">
          <h4>Contact</h4>
          <p>832 · 336 · 3680<br/>info@cryoempresswellness.com<br/><a href="https://www.instagram.com/cryoempresswellness/" target="_blank" rel="noopener" style={{color:"var(--gold)",textDecoration:"none"}}>@cryoempresswellness</a></p>
          <h4 style={{marginTop:"22px"}}>Hours</h4>
          <p>Mon – Thu · 6 pm – 9:30 pm<br/>Sat · 9 am – 8 pm<br/>Fri & Sun · Closed</p>
        </div>
        <div className="footer-col">
          <h4>Policies</h4>
          <p><button onClick={onOpenPolicies} className="policies-link">Privacy &amp; Terms of Service →</button><br/>24-hour cancellation required.<br/>All sessions non-transferable.<br/>All sales final.</p>
        </div>
      </div>
      <div className={`footer-accred ${mobile ? "is-mobile" : ""}`}>
        <div className="footer-accred-label">
          <span className="footer-accred-roman">§</span>
          <div>
            <span className="footer-accred-eyebrow">Insured &amp; Accredited</span>
            <span className="footer-accred-sub">Member of national professional associations</span>
          </div>
        </div>
        <div className="footer-accred-badges">
          <a
            className="footer-accred-badge"
            href="https://elitebeautysociety.com/"
            target="_blank"
            rel="noopener noreferrer"
            aria-label="Elite Beauty Society — Official Insurance Provider"
            title="Elite Beauty Society — Official Insurance Provider"
          >
            <img src={(window.__resources && window.__resources.eliteBadge) || "images/elite-beauty-society.jpg"} alt="Elite Beauty Society — Official Insurance Provider" />
          </a>
          <span
            className="footer-accred-badge"
            aria-label="International Association of Professional Weight Loss Center Owners — Member"
            title="IAPO — International Association of Professional Weight Loss Center Owners"
          >
            <img src={(window.__resources && window.__resources.iapoBadge) || "images/iapo-badge.jpg"} alt="International Association of Professional Weight Loss Center Owners — Member" />
          </span>
        </div>
      </div>
      <div className="footer-base">
        <span>© 2026 CryoEmpress Wellness</span>
        <span>The Empress Method™ · Designed with care</span>
      </div>
    </footer>
  );
}

// ============================================================
// Policies Modal
// ============================================================

const POLICIES_SECTIONS = [
  {
    roman: "I.",
    title: "No Refund",
    em: "Policy.",
    intro: "All packages, sessions, memberships, and promotional offers at CryoEmpress Wellness are final sale and non-refundable. This applies without exception to:",
    list: [
      "Unused sessions within a purchased package",
      "Missed appointments, late cancellations, and no-shows",
      "Discontinued packages or promotional offerings",
      "Memberships, gift cards, and pre-paid balances",
    ],
    callout: {
      label: "Please Note",
      body: "By completing a purchase, clients agree that all transactions are final and acknowledge that no monetary refunds will be issued under any circumstance.",
    },
  },
  {
    roman: "II.",
    title: "Package",
    em: "Policy.",
    intro: "Our packages are designed to support the long-term rhythm of your chosen protocol. Once purchased, the following terms apply:",
    list: [
      "Packages are non-transferable between clients.",
      "Results vary from person to person.",
      "Multiple sessions are recommended for best results.",
      "CryoEmpress Wellness does not guarantee specific outcomes.",
    ],
    outro: "We work closely with each client to design realistic expectations and a tailored treatment cadence, but individual response remains unique to body type, lifestyle, and consistency.",
  },
  {
    roman: "III.",
    title: "Wellness",
    em: "Disclaimer.",
    italicLead: "CryoEmpress Wellness provides wellness services only.",
    body: [
      "We do not diagnose, treat, or cure medical conditions of any kind. Our services are intended for aesthetic and wellness support — they are not a substitute for licensed medical care, physical therapy, or psychological treatment.",
      "By booking a service, clients acknowledge and agree to these policies and confirm they have read this disclaimer in full.",
    ],
  },
  {
    roman: "IV.",
    title: "Medical",
    em: "Non-Affiliation.",
    body: [
      "Although CryoEmpress Wellness is nurse-owned, the services offered within the studio are non-clinical and do not replace care from a licensed healthcare provider.",
      "No medical diagnosis, prescription, or treatment is provided at any point during a visit. Clients with existing medical conditions are encouraged to consult their physician before beginning any non-invasive wellness protocol.",
    ],
  },
  {
    roman: "V.",
    title: "Terms of",
    em: "Service.",
    list: [
      "All services are by appointment only.",
      "Clients must complete the required intake and consent forms prior to service.",
      "CryoEmpress Wellness reserves the right to refuse service if safety concerns arise — including, but not limited to, signs of illness, recent surgery, or undisclosed medical conditions.",
    ],
    outro: "These terms exist to protect the wellbeing of every guest who steps into the studio. We appreciate your understanding.",
  },
  {
    roman: "VI.",
    title: "Privacy",
    em: "Policy.",
    intro: "Your privacy is treated with the same care as your time in the studio. Here is how we handle the information you share with us.",
    list: [
      "Client information is collected solely for wellness service delivery and scheduling.",
      "Personal data is never sold or shared with third parties.",
      "Reasonable administrative and physical measures are taken to protect client privacy at all times.",
    ],
    outro: "For questions about your data or to request a copy of the information we hold on file, please contact us directly using the details below.",
  },
];

function PoliciesModal({ open, onClose }) {
  useEffect(() => {
    if (!open) return;
    const onKey = (e) => { if (e.key === "Escape") onClose(); };
    window.addEventListener("keydown", onKey);
    document.body.style.overflow = "hidden";
    return () => {
      window.removeEventListener("keydown", onKey);
      document.body.style.overflow = "";
    };
  }, [open, onClose]);

  if (!open) return null;

  return (
    <div className="pol-backdrop" onClick={onClose}>
      <div className="pol-modal" onClick={(e) => e.stopPropagation()}>
        <header className="pol-topbar">
          <div className="pol-brand">
            <img src={(window.__resources && window.__resources.logo) || "logo.jpg"} alt="CryoEmpress Wellness" />
            <span>
              <span className="pol-brand-name">CryoEmpress</span>
              <span className="pol-brand-sub">Wellness Studio</span>
            </span>
          </div>
          <button className="pol-close" onClick={onClose} aria-label="Close policies">
            <span>Close</span>
            <span className="pol-close-x">✕</span>
          </button>
        </header>

        <div className="pol-scroll">
          <section className="pol-masthead">
            <span className="pol-roman">Vol. 01 · Policies</span>
            <span className="pol-eyebrow">Terms of Service · Privacy · Disclaimers</span>
            <h1>The fine print, <em>made graceful.</em></h1>
            <p className="pol-lede">
              CryoEmpress Wellness provides non-invasive wellness services designed to
              support body contouring, recovery, and aesthetic confidence. The sections
              below outline how we work together — what to expect, what we promise,
              and what we don't.
            </p>
            <p className="pol-effective">Effective May 11, 2026</p>
          </section>

          <article className="pol-body">
            {POLICIES_SECTIONS.map((s, idx) => (
              <section key={s.roman} className="pol-section">
                <span className="pol-sec-roman">{s.roman}</span>
                <h2>{s.title} <em>{s.em}</em></h2>
                {s.italicLead && <p className="pol-italic">{s.italicLead}</p>}
                {s.intro && <p>{s.intro}</p>}
                {s.body && s.body.map((p, i) => <p key={i}>{p}</p>)}
                {s.list && (
                  <ul>
                    {s.list.map((li, i) => <li key={i}>{li}</li>)}
                  </ul>
                )}
                {s.outro && <p>{s.outro}</p>}
                {s.callout && (
                  <div className="pol-callout">
                    <strong>{s.callout.label}</strong>
                    {s.callout.body}
                  </div>
                )}
              </section>
            ))}
            <div className="pol-end">
              <span className="pol-end-mark">§</span>
              <p>Questions? Reach us at <a href="tel:8323363680">832 · 336 · 3680</a> or <a href="mailto:info@cryoempresswellness.com">info@cryoempresswellness.com</a>.</p>
            </div>
          </article>
        </div>
      </div>
    </div>
  );
}

// ============================================================
// Booking Modal (interactive)
// ============================================================

function BookingModal({ open, onClose }) {
  const [step, setStep] = useState(1);
  const [data, setData] = useState({ service: "", date: "", time: "", name: "", phone: "" });
  const slots = ["10:00 AM", "11:30 AM", "1:00 PM", "2:30 PM", "4:00 PM", "5:30 PM"];

  useEffect(() => {
    if (open) {
      setStep(1);
      setData({ service: "", date: "", time: "", name: "", phone: "" });
    }
  }, [open]);

  if (!open) return null;

  const canNext =
    (step === 1 && data.service) ||
    (step === 2 && data.date && data.time) ||
    (step === 3 && data.name && data.phone);

  return (
    <div className="modal-backdrop" onClick={onClose}>
      <div className="modal" onClick={(e) => e.stopPropagation()}>
        <button className="modal-close" onClick={onClose}>✕</button>
        <div className="modal-progress">
          {[1, 2, 3, 4].map((n) => (
            <div key={n} className={`mp-step ${step >= n ? "is-done" : ""}`} />
          ))}
        </div>

        {step === 1 && (
          <>
            <span className="eyebrow eyebrow-dark">Step 01 · Select a treatment</span>
            <h3 className="modal-title">What brings you in?</h3>
            <div className="modal-services">
              {SERVICES.map((s) => (
                <button
                  key={s.name}
                  className={`modal-service ${data.service === s.name ? "is-selected" : ""}`}
                  onClick={() => setData({ ...data, service: s.name })}
                >
                  <span className="ms-name">{s.name}</span>
                  <span className="ms-meta">{s.duration} · Private Suite</span>
                </button>
              ))}
            </div>
          </>
        )}

        {step === 2 && (
          <>
            <span className="eyebrow eyebrow-dark">Step 02 · Choose a time</span>
            <h3 className="modal-title">When works for you?</h3>
            <div className="modal-dates">
              {["Tue 28", "Wed 29", "Thu 30", "Fri 01", "Sat 02"].map((d) => (
                <button
                  key={d}
                  className={`modal-date ${data.date === d ? "is-selected" : ""}`}
                  onClick={() => setData({ ...data, date: d })}
                >
                  <span>{d.split(" ")[0]}</span>
                  <strong>{d.split(" ")[1]}</strong>
                </button>
              ))}
            </div>
            <div className="modal-times">
              {slots.map((t) => (
                <button
                  key={t}
                  className={`modal-time ${data.time === t ? "is-selected" : ""}`}
                  onClick={() => setData({ ...data, time: t })}
                  disabled={!data.date}
                >
                  {t}
                </button>
              ))}
            </div>
          </>
        )}

        {step === 3 && (
          <>
            <span className="eyebrow eyebrow-dark">Step 03 · A few details</span>
            <h3 className="modal-title">Tell us a little about you.</h3>
            <div className="modal-form">
              <label>
                Full name
                <input
                  type="text"
                  value={data.name}
                  onChange={(e) => setData({ ...data, name: e.target.value })}
                  placeholder="Sarah Martinez"
                />
              </label>
              <label>
                Phone
                <input
                  type="tel"
                  value={data.phone}
                  onChange={(e) => setData({ ...data, phone: e.target.value })}
                  placeholder="(832) 336-3680"
                />
              </label>
              <label>
                Anything we should know? <span className="opt">Optional</span>
                <textarea placeholder="Goals, sensitivities, preferred practitioner…" />
              </label>
            </div>
          </>
        )}

        {step === 4 && (
          <div className="modal-confirm">
            <div className="confirm-mark">✓</div>
            <h3 className="modal-title">You're on the books.</h3>
            <p>
              We've held <strong>{data.service}</strong> for{" "}
              <strong>{data.name || "you"}</strong> on{" "}
              <strong>{data.date}</strong> at <strong>{data.time}</strong>.
            </p>
            <p className="confirm-fine">
              A confirmation text is on its way to {data.phone || "your phone"}.
              Please arrive 10 minutes early — tea's already steeping.
            </p>
            <button className="btn btn-gold btn-lg" onClick={onClose}>Lovely</button>
          </div>
        )}

        {step < 4 && (
          <div className="modal-actions">
            {step > 1 && (
              <button className="btn btn-ghost-dark" onClick={() => setStep(step - 1)}>
                ← Back
              </button>
            )}
            <button
              className="btn btn-gold"
              disabled={!canNext}
              onClick={() => setStep(step + 1)}
              style={{ marginLeft: "auto" }}
            >
              {step === 3 ? "Confirm Booking" : "Continue →"}
            </button>
          </div>
        )}
      </div>
    </div>
  );
}

// ============================================================
// Desktop site (full assembled)
// ============================================================

function DesktopSite() {
  const [scrolled, setScrolled] = useState(false);
  const [policiesOpen, setPoliciesOpen] = useState(false);
  const scrollRef = useRef(null);

  useEffect(() => {
    const el = scrollRef.current;
    if (!el) return;
    const onScroll = () => setScrolled(el.scrollTop > 40);
    el.addEventListener("scroll", onScroll);
    return () => el.removeEventListener("scroll", onScroll);
  }, []);

  return (
    <div className="site site-desktop" ref={scrollRef}>
      <DesktopNav onBook={openBooking} scrolled={scrolled} />
      <Hero onBook={openBooking} />
      <About />
      <Services onBook={openBooking} />
      <Trust />
      <OnlineConsult />
      <CtaBanner onBook={openBooking} />
      <Footer onOpenPolicies={() => setPoliciesOpen(true)} />
      <PoliciesModal open={policiesOpen} onClose={() => setPoliciesOpen(false)} />
      <Chatbot />
    </div>
  );
}

// ============================================================
// Mobile site
// ============================================================

function MobileSite() {
  const [menuOpen, setMenuOpen] = useState(false);
  const [policiesOpen, setPoliciesOpen] = useState(false);

  return (
    <div className="site site-mobile">
      <MobileNav onBook={openBooking} menuOpen={menuOpen} setMenuOpen={setMenuOpen} />
      <Hero onBook={openBooking} mobile />
      <About mobile />
      <Services onBook={openBooking} mobile />
      <Trust mobile />
      <OnlineConsult mobile />
      <CtaBanner onBook={openBooking} />
      <Footer mobile onOpenPolicies={() => setPoliciesOpen(true)} />
      <PoliciesModal open={policiesOpen} onClose={() => setPoliciesOpen(false)} />
      <Chatbot />
    </div>
  );
}

Object.assign(window, { DesktopSite, MobileSite });