// ─────────────────────────────────────────────────────────────────────────
// Standalone sub-pages for the multi-page site.
//
// Every HTML file loads the same script bundle (icons / motion / tweaks-panel /
// femme-app / pages). femme-app.jsx renders the full home App only when
// #root[data-page] is 'home' (or absent); this file renders one of the sub-pages
// for every other data-page value. The two render guards are mutually exclusive,
// so exactly one owns #root.
//
// All section components (FServices, FWhy, FCTA, …) and the shared chrome
// (FGiftBar, FNav, FFooter, ScrollProgress, usePageChrome) come from the already
// loaded femme-app.jsx / motion.jsx globals — nothing is redefined here.
// ─────────────────────────────────────────────────────────────────────────

function PageHero({ eyebrow, title, sub, img, pos, short }) {
  return (
    <header className={"page-hero" + (short ? " page-hero--short" : "")}>
      {img && <div className="page-hero-bg" style={{ backgroundImage: `url('${img}')`, backgroundPosition: pos || 'center' }} aria-hidden="true"></div>}
      <div className="container page-hero-inner">
        <span className="eyebrow page-hero-eyebrow">{eyebrow}</span>
        <h1 className="page-hero-title h-display">{title}</h1>
        {sub && <p className="page-hero-sub">{sub}</p>}
      </div>
    </header>);
}

// The client's aesthetic side is intentionally small on their live site: two named
// offerings, no published prices. Kept honest here — descriptions from the service
// names, a consultation CTA, and no invented pricing.
function AestheticServices() {
  const items = [
    { t: 'Advanced Laser Tightening Facials',
      body: "Non-invasive laser facials that gently warm the deeper layers of the skin to stimulate collagen — firmer, brighter, more even skin, with no downtime." },
    { t: 'Forever Smooth Maintenance',
      body: "Once your laser hair removal course is complete, occasional maintenance sessions keep your results looking their best — season after season." },
  ];
  return (
    <section id="aesthetic" className="aesthetic">
      <div className="container">
        <div className="section-head aesthetic-head">
          <span className="eyebrow">What we offer</span>
          <h2 className="h-display">Considered <span className="i">aesthetic</span> care.</h2>
        </div>
        <div className="aesthetic-grid">
          {items.map((it, i) =>
          <article key={i} className="aesthetic-card">
              <span className="aesthetic-n">{String(i + 1).padStart(2, '0')}</span>
              <h3 className="aesthetic-title h-display">{it.t}</h3>
              <p className="aesthetic-body">{it.body}</p>
              <a href="contact-us.html" className="btn aesthetic-cta" onClick={(e) => { e.preventDefault(); openBooking(); }}>Book a consultation</a>
            </article>
          )}
        </div>
      </div>
    </section>);
}

// Laser Hair Removal intro — the studio's own page copy (de-duplicated: their live
// text repeats its closing paragraph twice). Script accent + serif headline + photo.
function LaserIntro() {
  return (
    <section id="laser-intro" className="laser-intro">
      <div className="container laser-intro-grid">
        <div className="laser-intro-l">
          <div className="laser-intro-head">
            <span className="laser-intro-script">Smooth</span>
            <h2 className="laser-intro-title h-display">Laser Hair Removal</h2>
          </div>
          <div className="laser-intro-body">
            <p>Experience the pinnacle of laser hair removal at Daniéle Laser + Aesthetics, where we redefine perfection in skincare. Our advanced laser technology, paired with the expertise of our highly trained specialists, ensures the most effective and comfortable hair-removal experience available.</p>
            <p>We prioritize safety, efficacy, and client satisfaction — employing state-of-the-art equipment and techniques to deliver exceptional results tailored to your unique skin type and hair color. Say goodbye to the hassle of shaving, waxing, or plucking, and embrace the freedom of silky-smooth skin.</p>
            <p>Trust Daniéle Laser + Aesthetics for the best in precision, luxury, and lasting results.</p>
          </div>
          <ul className="laser-intro-features">
            <li>Safe on every skin tone</li>
            <li>FDA-approved technology</li>
            <li>Virtually no downtime</li>
          </ul>
          <a href="contact-us.html" className="btn laser-intro-cta" onClick={(e) => { e.preventDefault(); openBooking(); }}>Book a free consultation</a>
        </div>
        <div className="laser-intro-media">
          <img src="images/daniele/laser-treatment.jpg" alt="Laser hair removal on the legs with the Candela GentleMax Pro at Daniéle" loading="lazy" />
          <span className="laser-intro-badge">Candela GentleMax Pro</span>
        </div>
      </div>
    </section>);
}

// Zones & packages — the studio's real pricing model: packages only (never single
// sessions), a flat price per size category covering up to F_MAX_PER_TIER areas, plus
// a mix-&-match option across categories. All numbers come from the shared F_TIERS /
// F_AREAS / F_MIX data so this stays in sync with the home calculator.
function LaserZones() {
  const groups = F_TIERS.map((t) => ({
    id: t.id,
    label: t.label,
    price: t.price,
    areas: F_AREAS.filter((a) => a.tier === t.id).map((a) => a.name),
  }));
  return (
    <section id="zones" className="zones">
      <div className="container">
        <div className="section-head zones-head">
          <span className="eyebrow">Zones &amp; packages</span>
          <h2 className="h-display">Every area, <span className="i">one honest price</span>.</h2>
          <p className="zones-intro">
            We only sell packages — never single sessions. Each package is a full course covering up
            to {F_MAX_PER_TIER} areas from one size category at a flat price. Want a custom set? Mix &amp;
            match any areas across categories below.
          </p>
        </div>
        <div className="zones-list">
          {groups.map((g) =>
          <article key={g.id} className="zone-row">
              <div className="zone-row-head">
                <h3 className="zone-row-label">{g.label}</h3>
                <span className="zone-row-price"><small>from</small>${g.price}</span>
                <span className="zone-row-count">{g.areas.length} areas</span>
              </div>
              <div className="zone-pills">
                {g.areas.map((name) => <span key={name} className="zone-pill">{name}</span>)}
              </div>
            </article>
          )}
        </div>
        <div className="zones-mix">
          <div className="zones-mix-head">
            <h3 className="zones-mix-h h-display">Mix &amp; <span className="i">match</span></h3>
            <p className="zones-mix-note">Any areas from any category — priced by how many you choose. Full-body and bespoke courses are confirmed at your free consultation.</p>
          </div>
          <div className="zones-mix-row">
            {F_MIX.map((m) =>
            <div key={m.count} className="zones-mix-item">
                <span className="zones-mix-count">{m.count} areas</span>
                <span className="zones-mix-price">${m.price}</span>
              </div>
            )}
          </div>
        </div>
      </div>
    </section>);
}

function ZonesCta() {
  return (
    <section className="zones-cta">
      <div className="zones-cta-text">
        <span className="eyebrow">Not sure which areas?</span>
        <h3 className="zones-cta-h h-display">Build your course with us, <span className="i">free</span>.</h3>
        <p className="zones-cta-sub">Bring the areas you have in mind. In a quick, no-pressure consultation we map your plan and quote your exact price — before anything's booked.</p>
      </div>
      <a href="contact-us.html" className="btn zones-cta-btn" onClick={(e) => { e.preventDefault(); openBooking(); }}>Book a free consultation</a>
    </section>);
}

function LaserPage() {
  usePageChrome();
  return (
    <>
      <ScrollProgress />
      <FGiftBar />
      <FNav />
      <PageHero
        eyebrow="Laser hair removal"
        title={<>Smoother skin, <span className="i">session by session</span>.</>}
        sub="Calibrated, unhurried laser hair removal on the newest Candela GentleMax Pro — safe and effective for every skin tone, by licensed specialists."
        img="images/daniele/bikini.jpg"
        pos="center 40%" />
      <LaserIntro />
      <FServices />
      <LaserZones />
      <ZonesCta />
      <FCalculator />
      <FBeforeAfter />
      <FFAQ />
      <FFooter />
    </>);
}

// The studio's Aesthetic Treatments page is really their "daniéle experience" —
// a four-step journey plus the aesthetic offerings. Mirrored here from their copy.
function ExperienceSteps() {
  const steps = [
    { n: '01', t: 'Personalized consultations', body: 'We start with a one-on-one consultation to understand your skin type, hair texture, and goals. Our certified specialists assess your suitability and build a custom treatment plan tailored to you.' },
    { n: '02', t: 'Safe, professional treatments', body: 'Using advanced, FDA-approved laser technology, we target hair at the root — safely and effectively. Treatments are quick, virtually painless, and require no downtime.' },
    { n: '03', t: 'Ongoing care + adjustments', body: 'As your body responds, we fine-tune your sessions for maximum results. We monitor progress, adjust settings as needed, and ensure your skin stays healthy and comfortable.' },
    { n: '04', t: 'Unlimited lifetime packages', body: "Enjoy smooth, hair-free skin for life — with our Unlimited Lifetime Warranty Packages. Need a touch-up months or even years later? It's on us. Your results are our commitment." },
  ];
  return (
    <section id="experience" className="experience">
      <div className="container">
        <div className="section-head experience-head">
          <span className="eyebrow">The daniéle experience</span>
          <h2 className="h-display">Every step designed for <span className="i">safety, comfort</span>, and smooth results.</h2>
        </div>
        <ol className="experience-steps">
          {steps.map((s) =>
          <li key={s.n} className="exp-step">
              <span className="exp-step-num h-display">{s.n}</span>
              <div className="exp-step-card">
                <h3 className="exp-step-t h-display">{s.t}</h3>
                <p className="exp-step-b">{s.body}</p>
              </div>
            </li>
          )}
        </ol>
      </div>
    </section>);
}

function AestheticPage() {
  usePageChrome();
  return (
    <>
      <ScrollProgress />
      <FGiftBar />
      <FNav />
      <PageHero
        eyebrow="Aesthetic treatments"
        title={<>Your smoothest decision, <span className="i">step by step</span>.</>}
        sub="Let's walk you through the smoothest decision you'll ever make — every step designed for safety, comfort, and lasting results."
        img="images/daniele/about-banner.png"
        pos="center 30%" />
      <AestheticServices />
      <ExperienceSteps />
      <FWhy />
      <FCTA />
      <FFooter />
    </>);
}

// "Who We Are" — mirrors the studio's own About page: luxury laser hair removal,
// the Candela GentleMax Pro dual-wavelength system, personalized care for every
// skin type. Copy stays faithful to their site (no invented founder/team/stats).
function AboutIntro() {
  return (
    <section id="who-we-are" className="about-intro">
      <div className="container about-intro-grid">
        <figure className="about-intro-media">
          <img src="images/daniele/ig-lounge.jpg" alt="The lounge inside a Daniéle Laser + Aesthetics studio" loading="lazy" />
        </figure>
        <div className="about-intro-r">
          <span className="eyebrow">Who we are</span>
          <h2 className="h-display about-intro-h">Luxury laser care, <span className="i">calibrated to you</span>.</h2>
          <p>Daniéle Laser + Aesthetics began with a quiet conviction — that laser hair removal should feel less like a clinic and more like a retreat. Every room is calm, every appointment is yours alone, and no one is ever rushed.</p>
          <p>The people who treat you are experienced, credentialed, and genuinely invested. They map each course to your skin and your goals, explain every step, and measure success in results, not upsells — the kind of care that keeps clients coming back for years.</p>
          <p>First visit or fifth, the feeling never changes: considered, discreet, and entirely about you. Come in for a complimentary consultation — there's never any pressure to book.</p>
          <a href="contact-us.html" className="btn about-intro-btn" onClick={(e) => { e.preventDefault(); openBooking(); }}>Book a free consultation</a>
        </div>
      </div>
      <div className="container about-feats">
        <span className="about-feats-label">Why the GentleMax Pro</span>
        <ul className="about-intro-feats">
          {[
            { Icon: IconLaser, t: 'Two wavelengths in one.', b: 'Alexandrite + Nd:YAG — safe on every skin tone.' },
            { Icon: IconDrop, t: 'Cooled with every pulse.', b: 'Contact cooling keeps every session comfortable.' },
            { Icon: IconCert, t: 'FDA-cleared platform.', b: 'The same laser used in medical dermatology.' },
            { Icon: IconClock, t: 'Fast, large coverage.', b: 'Big spot sizes clear large areas in minutes.' },
          ].map((f) =>
          <li key={f.t}>
            <span className="about-feat-icon"><f.Icon size={20} sw={1.5} /></span>
            <div className="about-feat-text"><strong>{f.t}</strong> {f.b}</div>
          </li>
          )}
        </ul>
      </div>
    </section>);
}

function AboutPage() {
  usePageChrome();
  return (
    <>
      <ScrollProgress />
      <FGiftBar />
      <FNav />
      <PageHero
        eyebrow="About us"
        title={<>Unveil your smoothest self, <span className="i">one pulse at a time</span>.</>}
        sub="Luxury laser hair removal on the newest Candela GentleMax Pro — licensed specialists, two Texas studios, over 20,000 treatments performed."
        img="images/daniele/faq-room.jpg"
        pos="center 62%" />
      <AboutIntro />
      <FWhy />
      <FTestimonials />
      <FWordMarquee tone="bronze" />
      <FCTA />
      <FFooter />
    </>);
}

// Contact / Hours / Visit — laid out like the studio's own Contact Us page. Phone,
// emails, hours and both studio addresses all come from the shared F_LOCATIONS /
// F_PHONE data (sourced from danielelaserandaesthetics.com/contact-us).
function ContactDetails() {
  const tel = '+1' + F_PHONE.replace(/\D/g, '');
  const [form, setForm] = React.useState({ name: '', email: '', phone: '', location: F_LOCATIONS[0].id, notes: '' });
  const [sent, setSent] = React.useState(false);
  const [error, setError] = React.useState(false);
  const upd = (k) => (e) => setForm({ ...form, [k]: e.target.value });
  // Route to the chosen studio's own inbox — same location-based routing as the booking popup.
  const onSubmit = async (e) => {
    e.preventDefault();
    const loc = F_LOCATIONS.find(l => l.id === form.location) || F_LOCATIONS[0];
    const message = `Name: ${form.name}\nEmail: ${form.email}\nPhone: ${form.phone || '—'}\nPreferred studio: ${loc.name}\n\n${form.notes}`;
    setError(false);
    try {
      await deliverBooking({ locationId: loc.id, name: form.name, email: form.email, phone: form.phone, subject: `Consultation request — ${loc.name}`, message });
      setSent(true);
    } catch (err) {
      setError(true);
    }
  };
  return (
    <section id="contact-details" className="contact-details">
      <div className="container contact-two">
        <div className="contact-panel">
          <h2 className="contact-panel-h h-display">Book a <span className="i">consultation</span></h2>
          <form className="contact-form" onSubmit={onSubmit}>
            <label className="field"><span>Full name</span><input type="text" value={form.name} onChange={upd('name')} placeholder="Inès Laurent" required /></label>
            <label className="field"><span>Email</span><input type="email" value={form.email} onChange={upd('email')} placeholder="ines@example.com" required /></label>
            <label className="field"><span>Phone</span><input type="tel" value={form.phone} onChange={upd('phone')} placeholder="(281) 000-0000" /></label>
            <label className="field">
              <span>Studio</span>
              <div className="field-select">
                <select value={form.location} onChange={upd('location')} required>
                  {F_LOCATIONS.map(l => <option key={l.id} value={l.id}>{l.name}{l.opening ? ` (${l.opening})` : ''}</option>)}
                </select>
                <IconArrowUpRight size={14} sw={1.5} style={{ transform: 'rotate(135deg)' }} />
              </div>
            </label>
            <label className="field"><span>Message</span><textarea rows={3} value={form.notes} onChange={upd('notes')} placeholder="The area you'd like to treat, a preferred time…" /></label>
            <button type="submit" className="btn contact-form-submit">Request consultation</button>
            {sent && <p className="cta-form-sent" role="status">Thank you — your request is on its way to our {F_LOCATIONS.find(l => l.id === form.location)?.name} studio. We'll reply within two hours.</p>}
            {error && <p className="cta-form-sent cta-form-error" role="alert">Something went wrong sending your request. Please call us at {F_PHONE} or try again.</p>}
          </form>
          <div className="contact-meta">
            <div className="contact-meta-block">
              <span className="contact-meta-h"><span className="contact-ico"><IconPhone size={16} /></span> Phone</span>
              <p><a href={'tel:' + tel}>{F_PHONE}</a></p>
            </div>
          </div>
        </div>
        <div className="contact-panel contact-panel--map">
          <div className="contact-panel-map">
            <iframe
              src={F_MAP_EMBED}
              title="Daniéle Friendswood studio location map"
              loading="lazy"
              referrerPolicy="no-referrer-when-downgrade"
              allowFullScreen
            ></iframe>
          </div>
          <div className="contact-locs">
            {F_LOCATIONS.map((l) =>
            <div key={l.id} className="contact-loc-card">
                <span className="contact-loc-name"><span className="contact-ico"><IconPin size={16} /></span> {l.name}{l.opening && <span className="soon-badge">{l.opening}</span>}</span>
                <span className="contact-loc-addr">{l.address}</span>
                <span className="contact-loc-addr">{l.hours}</span>
                <a className="contact-loc-link" href={l.mapUrl} target="_blank" rel="noopener">Get directions <IconArrowUpRight size={11} sw={1.6} /></a>
              </div>
            )}
          </div>
        </div>
      </div>
    </section>);
}

function ContactPage() {
  usePageChrome();
  return (
    <>
      <ScrollProgress />
      <FGiftBar />
      <FNav />
      <PageHero
        eyebrow="Contact us"
        title={<>Start your <span className="i">unforgettable</span> experience.</>}
        sub="Call or email your nearest studio — we'll help you pick a quiet slot and walk you through your course."
        img="images/daniele/contact-banner.jpg"
        pos="72% 38%" />
      <ContactDetails />
      <FFooter />
    </>);
}

// ─────────────────────────────────────────────────────────────────────────
// Legal / policy pages. Verbatim from the studio's own live site, rehosted here
// (they used to deep-link to the old danielelaserandaesthetics.com). One shared
// renderer; each policy is a plain array of typed blocks.
// ─────────────────────────────────────────────────────────────────────────
function LegalBlock({ b }) {
  if (b.h) return <h2 className="legal-h h-display">{b.h}</h2>;
  if (b.sub) return <h3 className="legal-sub">{b.sub}</h3>;
  if (b.ul) return <ul className="legal-list">{b.ul.map((t, i) => <li key={i}>{t}</li>)}</ul>;
  return <p className="legal-p">{b.p}</p>;
}

function LegalPage({ eyebrow, title, effective, blocks }) {
  usePageChrome();
  return (
    <>
      <ScrollProgress />
      <FGiftBar />
      <FNav />
      <PageHero short eyebrow={eyebrow} title={title} />
      <section className="legal">
        <div className="container legal-inner">
          {effective && <p className="legal-eff">{effective}</p>}
          {blocks.map((b, i) => <LegalBlock key={i} b={b} />)}
        </div>
      </section>
      <FFooter />
    </>);
}

const PRIVACY_BLOCKS = [
  { p: `Daniéle Laser and Aesthetics ("we," "our," "us") values your privacy and is committed to protecting your personal information. This Privacy Policy explains how we collect, use, and safeguard your data when you visit our website, book appointments online, or use our services.` },
  { h: `1. Information We Collect` },
  { p: `We collect various types of personal information when you interact with our website, including but not limited to:` },
  { ul: [
    `Personal Information: Name, email address, phone number, date of birth, and payment details.`,
    `Appointment Details: Services booked, appointment history, and preferences.`,
    `Device Information: IP address, browser type, operating system, and cookies.`,
    `Health Information (if provided): Any relevant medical history you choose to disclose that may affect your treatment.`,
  ] },
  { h: `2. How We Use Your Information` },
  { p: `We use the information collected for the following purposes:` },
  { ul: [
    `To schedule and confirm your appointments.`,
    `To process payments and issue receipts.`,
    `To send appointment reminders and promotional offers (with your consent).`,
    `To improve our website, services, and customer experience.`,
    `To comply with legal obligations and protect against fraudulent activities.`,
  ] },
  { h: `3. How We Protect Your Information` },
  { p: `We take appropriate security measures to safeguard your personal information, including:` },
  { ul: [
    `Encryption of payment details.`,
    `Secure servers and firewalls.`,
    `Limited access to personal information by authorized personnel only.`,
  ] },
  { p: `Despite these efforts, no method of transmission over the Internet or electronic storage is 100% secure. While we strive to protect your personal data, we cannot guarantee absolute security.` },
  { h: `4. Sharing Your Information` },
  { p: `We do not sell or rent your personal information. However, we may share your data with:` },
  { ul: [
    `Service Providers: Third-party vendors assisting with payment processing, scheduling, and website analytics.`,
    `Legal Authorities: If required by law or to protect our rights, property, or safety.`,
    `Business Transfers: In case of a merger, acquisition, or sale of assets.`,
  ] },
  { h: `5. Cookies and Tracking Technologies` },
  { p: `We use cookies and similar tracking technologies to enhance user experience and analyze website traffic. You can control cookie settings through your browser.` },
  { h: `6. Your Rights and Choices` },
  { p: `You have the right to:` },
  { ul: [
    `Access, update, or delete your personal information.`,
    `Opt-out of marketing communications.`,
    `Withdraw consent for data processing where applicable.`,
    `Request a copy of your personal data.`,
  ] },
  { p: `To exercise these rights, please contact us at corporate@danielefriendswood.com.` },
  { h: `7. Third-Party Links` },
  { p: `Our website may contain links to third-party websites. We are not responsible for their privacy practices and encourage you to review their policies.` },
  { h: `8. Children's Privacy` },
  { p: `Our services are not intended for individuals under 18. We do not knowingly collect personal information from minors.` },
  { h: `9. Updates to This Privacy Policy` },
  { p: `We may update this Privacy Policy from time to time. Changes will be posted on this page with an updated effective date.` },
  { h: `10. Contact Us` },
  { p: `If you have any questions about this Privacy Policy or how we handle your data, please contact us at Daniéle Laser + Aesthetics — corporate@danielefriendswood.com — 281-612-2073.` },
];

const CANCEL_BLOCKS = [
  { p: `At Daniéle Laser + Aesthetics, we take pride in offering a luxury experience with the highest level of care and service. To ensure fairness to all clients and to maintain an efficient scheduling system, we have implemented a strict cancellation and rescheduling policy.` },
  { h: `Cancellations & Rescheduling` },
  { p: `We understand that life happens, and unexpected situations may arise. However, to respect the time of both our clients and our team, we require a minimum of 24 hours' notice for any appointment cancellations or reschedules. If an appointment is canceled or rescheduled with less than 24 hours' notice, a cancellation fee equal to 50% of the scheduled service will be automatically charged to the card on file.` },
  { ul: [
    `Appointments canceled or rescheduled with less than 24 hours' notice will incur a 50% fee based on the original value of the service, not the promotional or sale price.`,
    `For full-body laser hair removal appointments, a cancellation or reschedule made within 24 hours of the appointment time will result in a $249.50 fee due to the extended treatment duration and preparation required.`,
  ] },
  { p: `To avoid these fees, we kindly ask that you cancel or reschedule your appointment online or by phone at least 24 hours in advance.` },
  { h: `No-Show Policy` },
  { p: `If you do not show up for your scheduled appointment without prior notice, you will be charged 50% of the original service price. Repeated no-shows may result in restrictions on future bookings.` },
  { h: `Refund Policy` },
  { p: `All sales are FINAL. We do not offer refunds on treatments, packages, or services purchased. Our commitment is to deliver high-quality results, and we encourage all clients to ensure they are fully committed before purchasing any services.` },
  { h: `Children in the Facility` },
  { p: `For safety and to maintain a relaxing environment, children under the age of 17 are not permitted in the facility while your appointment is in progress.` },
  { h: `Late Arrivals` },
  { p: `To provide all clients with the best possible experience, we kindly ask that you arrive on time for your appointment.` },
  { p: `Grace Period: A strict 15-minute grace period is enforced. If you are not checked in within this window, your appointment will be automatically rescheduled, and a 50% rescheduling fee will apply. Appointments must check in by their scheduled time. A 15-minute grace period is allowed, but not past business closing hours.` },
  { h: `Policy Acknowledgment` },
  { p: `By booking an appointment at Daniéle Laser + Aesthetics, you acknowledge and agree to the terms outlined in this policy.` },
  { p: `We appreciate your cooperation and look forward to helping you achieve your beauty goals with our top-tier laser hair removal services. Thank you for choosing Daniéle Laser + Aesthetics!` },
];

const CARE_BLOCKS = [
  { h: `Treatment Policies` },
  { p: `Clients cannot undergo treatment if they are pregnant, nursing, undergoing fertility treatments, or preparing to undergo fertility treatments.` },
  { p: `Please inform staff of any medical conditions or history, including heart disease, thyroid disorders, diabetes, cancer, skin conditions, or other relevant health concerns.` },
  { p: `Clients under 18 years old must arrive with a parent or legal guardian to receive laser hair removal or skin tightening services.` },
  { h: `Medications & Skin Condition` },
  { p: `Clients cannot undergo laser hair removal if they have taken isotretinoin (Accutane) or immunosuppressants within the past six months.` },
  { p: `The skin must be at its natural, untanned state during treatment. To maintain eligibility:` },
  { ul: [
    `Avoid direct sun exposure, tanning beds, sunless tanners, and self-tanning products for at least two weeks before and after each session.`,
    `Always apply broad-spectrum sunscreen (SPF 30+) on exposed areas when outdoors.`,
  ] },
  { h: `Hair Removal & Skincare` },
  { p: `Waxing, bleaching, tweezing, threading, and depilatory creams must be avoided for four weeks prior to treatment and throughout the treatment course.` },
  { p: `Exfoliating facial treatments, chemical peels, and microdermabrasion should not be performed for at least two weeks before and after laser treatment. On treatment day, ensure skin is free of makeup, lotions, deodorants, and topical products.` },
  { p: `Retinoids, alpha hydroxy acids, beta hydroxy acids, and exfoliating skincare products should be discontinued one week before and after treatment.` },
  { p: `The treatment area must be clean-shaven 24 to 48 hours prior to your appointment.` },
  { h: `Post-Treatment Care` },
  { sub: `Activities & Skincare` },
  { p: `Refrain from intense physical activity, hot showers, saunas, steam rooms, and jacuzzis for 24 to 72 hours post-treatment to prevent irritation.` },
  { p: `Deodorants and scented products should not be applied to the treated area for at least 24 hours.` },
];

function PrivacyPage() {
  return <LegalPage eyebrow="Privacy" title={<>Privacy <span className="i">policy</span>.</>} effective="Effective date: July 1, 2024" blocks={PRIVACY_BLOCKS} />;
}
function CancellationPage() {
  return <LegalPage eyebrow="Good to know" title={<>Cancellation &amp; <span className="i">refunds</span>.</>} blocks={CANCEL_BLOCKS} />;
}
function CarePage() {
  return <LegalPage eyebrow="Before &amp; after" title={<>Customer <span className="i">care</span>.</>} blocks={CARE_BLOCKS} />;
}

(function () {
  const rootEl = document.getElementById('root');
  const page = rootEl && rootEl.dataset.page;
  const map = { laser: LaserPage, aesthetic: AestheticPage, about: AboutPage, contact: ContactPage, privacy: PrivacyPage, cancellation: CancellationPage, care: CarePage };
  const Page = page && map[page];
  if (Page) {
    ReactDOM.createRoot(rootEl).render(<Page />);
  }
})();