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

/* ============================================================
   Scroll reveal
   ============================================================ */
function useReveal() {
  useEffect(() => {
    const els = document.querySelectorAll(".reveal");
    const io = new IntersectionObserver(
      (entries) => {
        entries.forEach((e) => {
          if (e.isIntersecting) {
            e.target.classList.add("in");
            io.unobserve(e.target);
          }
        });
      },
      { threshold: 0.12, rootMargin: "0px 0px -40px 0px" }
    );
    els.forEach((el) => io.observe(el));
    return () => io.disconnect();
  }, []);
}

const BOOK_URL = "https://www.massagebook.com/therapists/awaken-the-body-massage-bodywork-llc/services";
const GIFT_URL = "https://app.squareup.com/gift/ML77R6KY1ERE1/order";
const MAPS_URL = "https://www.google.com/maps/search/?api=1&query=223+N+Yakima+Ave+%2CTacoma%2C+WA+98403";
const PHONE_HREF = "tel:+12533203460";
const PHONE_DISPLAY = "(253) 320-3460";

/* ============================================================
   Icons
   ============================================================ */
const Icon = {
  Arrow: (p) => (
    <svg className="arrow" width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <path d="M2 7h10M8 3l4 4-4 4" />
    </svg>
  ),
  Mark: (p) => (
    <svg viewBox="0 0 32 32" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" {...p}>
      <path d="M6 22c4-1 6-4 6-9 0-3 1-5 4-5s4 2 4 5c0 5 2 8 6 9" />
      <path d="M16 8v22" strokeDasharray="1 3" />
      <circle cx="16" cy="6" r="2.2" />
    </svg>
  ),
  Pin: (p) => (
    <svg width="13" height="13" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.3" {...p}>
      <path d="M8 14s5-4.5 5-9a5 5 0 0 0-10 0c0 4.5 5 9 5 9z" />
      <circle cx="8" cy="5.5" r="1.8" />
    </svg>
  ),
  Wear: (p) => (
    <svg viewBox="0 0 32 32" fill="none" stroke="currentColor" strokeWidth="1.3" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <path d="M11 5l-6 4 3 5 3-2v15h14V12l3 2 3-5-6-4-4 3h-6z" />
    </svg>
  ),
  Park: (p) => (
    <svg viewBox="0 0 32 32" fill="none" stroke="currentColor" strokeWidth="1.3" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <rect x="6" y="6" width="20" height="20" rx="3" />
      <path d="M13 22V10h5a3.5 3.5 0 0 1 0 7h-5" />
    </svg>
  ),
  Clock: (p) => (
    <svg viewBox="0 0 32 32" fill="none" stroke="currentColor" strokeWidth="1.3" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <circle cx="16" cy="16" r="11" />
      <path d="M16 9v7l5 3" />
    </svg>
  ),
  Chat: (p) => (
    <svg viewBox="0 0 32 32" fill="none" stroke="currentColor" strokeWidth="1.3" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <path d="M6 8h20v14H14l-5 5v-5H6z" />
      <path d="M12 14h14M12 18h10" />
    </svg>
  ),
  Pause: (p) => (
    <svg width="10" height="12" viewBox="0 0 10 12" fill="currentColor" aria-hidden="true" {...p}>
      <rect x="0" y="0" width="3" height="12" rx="1.5" />
      <rect x="7" y="0" width="3" height="12" rx="1.5" />
    </svg>
  ),
  Play: (p) => (
    <svg width="10" height="12" viewBox="0 0 10 12" fill="currentColor" aria-hidden="true" {...p}>
      <path d="M1 1l8 5-8 5V1z" strokeLinejoin="round" />
    </svg>
  ),
};

/* ============================================================
   Nav
   ============================================================ */
function Nav() {
  const navRef = React.useRef(null);
  useEffect(() => {
    const el = navRef.current;
    if (!el) return;
    document.documentElement.style.setProperty('--nav-h', el.offsetHeight + 'px');
    const scrollEl = document.querySelector('.scroll-content');
    if (!scrollEl) return;
    const on = () => el.classList.toggle('scrolled', scrollEl.scrollTop > 8);
    on();
    scrollEl.addEventListener("scroll", on, { passive: true });
    return () => scrollEl.removeEventListener("scroll", on);
  }, []);
  return (
    <header ref={navRef} className="nav">
      <div className="container nav-inner">
        <a href="#top" className="brand">
          <img src="images/logo-black.png" className="brand-mark" alt="Awaken The Body logo" />
          <span>
            Awaken The Body
            <small>Massage &amp; Bodywork</small>
          </span>
        </a>
        <a href="#services" className="btn btn-primary">
          Book a Session <Icon.Arrow />
        </a>
      </div>
    </header>
  );
}

/* ============================================================
   Hero
   ============================================================ */
function Hero() {
  const hour = new Date().getHours();
  const timeGreeting = hour < 12
    ? <>Good morning.<br />Book your next session.</>
    : hour < 17
    ? <>Good afternoon.<br />Ready when you are.</>
    : <>Good evening.<br />Ready to unwind?</>;
  return (
    <section className="hero" id="top">
      <div className="container hero-grid">
        <div className="hero-copy">
          <span className="hero-eyebrow reveal">
            <span className="dot"></span> Now booking &middot; 1&ndash;2 wks out
          </span>
          <h1 className="reveal d1">
            Deep tissue and bodywork in Tacoma. <em>Let me take it from here.</em>
          </h1>
          <p className="lede reveal d2">
            Deep tissue, cupping, craniosacral, trigger point, relaxation, prenatal,
            and Reiki. Each session is built around what you actually walk in with that day.
          </p>
          <div className="hero-cta reveal d3">
            <a href="#services" className="btn btn-primary btn-lg">
              Book a Session <Icon.Arrow />
            </a>
            <a href="#about" className="btn btn-ghost">
              Meet Amanda
            </a>
          </div>
          <div className="hero-meta reveal d4">
            <span>9 years licensed</span>
            <span className="dotsep"></span>
            <span>WA LMT &middot; Reiki Master</span>
            <a className="hero-loc" href={MAPS_URL} target="_blank" rel="noreferrer">
              <Icon.Pin /> The Healing House, Tacoma
            </a>
          </div>
        </div>

        <div className="hero-visual-wrap reveal d2">
          <div
            className="hero-visual"
          >
            <img
              src="images/massage-work.jpg"
              className="photo"
              alt="Deep tissue massage on neck and shoulders at Awaken The Body in Tacoma, WA"
              style={{ objectPosition: "center 40%" }}
            />
          </div>
          <div className="hero-floating">
            <p className="hf-line"><em>{timeGreeting}</em></p>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   Trust — practitioner intro
   ============================================================ */
function Trust() {
  const creds = [
    { num: "9", suffix: "yrs", label: "Licensed in Washington State" },
    { num: "72", suffix: "hr+", label: "Advanced Zen Trigger Point training" },
    { num: "Reiki", suffix: "", label: "Master-level certified" },
  ];
  return (
    <section className="trust" id="about-amanda">
      <div className="container trust-grid">
        <div className="trust-portrait reveal">
          <div className="trust-portrait-img">
            <img
              src="images/amanda-portrait.jpg"
              alt="Amanda Ries, Licensed Massage Therapist and Reiki Master — Awaken The Body Massage &amp; Bodywork, Tacoma WA"
              style={{ objectPosition: "65% 25%" }}
            />
          </div>
          <div className="trust-portrait-cap">
            <div className="cap-name">Amanda Ries</div>
            <div className="cap-role">LMT &amp; Reiki Master &middot; Owner</div>
          </div>
        </div>

        <div className="trust-body">
          <span className="section-label reveal">Credentials</span>
          <h2 className="reveal d1">
            Nine years in, <em>still going deeper.</em>
          </h2>
          <p className="lede reveal d2">
            I'm a Washington State Licensed Massage Therapist and a Reiki Master.
            I do deep, structural bodywork — deep tissue, cupping, trigger point,
            craniosacral — and energy work through Reiki. Most sessions end up being
            some combination, depending on what's going on for you that day.
          </p>

          <ul className="cred-list reveal d3">
            {creds.map((c, i) => (
              <li key={i}>
                <div className="cred-num">{c.num}<em>{c.suffix}</em></div>
                <div className="cred-lbl">{c.label}</div>
              </li>
            ))}
          </ul>

          <figure className="lead-quote reveal d4">
            <blockquote>
              "I've been going to Amanda for the past few years. I find myself
              craving a massage every 4–6 weeks, and I always leave feeling a
              deep sense of relaxation. She is incredibly strong and thorough,
              and will find areas of your body you didn't even realize needed
              work."
            </blockquote>
            <figcaption>&mdash; Seija Emerson &middot; via Google</figcaption>
          </figure>
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   Services — menu-style pricing
   ============================================================ */
function Services() {
  const MB = id => `https://www.massagebook.com/business/32788026/booking/?service_id=${id}`;
  const services = [
    {
      name: "Deep Tissue",
      popular: true,
      desc: "Firm pressure for chronic tension. Back, neck, shoulders, hips, wherever it sits.",
      p30: null,    b30: null,
      p60: "$110",  b60: MB(1822476),
      p90: "$140",  b90: MB(1822488),
      p120: "$200", b120: MB(1822511),
    },
    {
      name: "Cupping Therapy",
      desc: "Silicone or plastic cups to lift the fascia and free up stuck layers underneath.",
      p30: null,    b30: null,
      p60: "$120",  b60: MB(1822482),
      p90: "$160",  b90: MB(1822486),
      p120: "$220", b120: MB(1822510),
    },
    {
      name: "Relaxation",
      desc: "Lighter pressure, full-body work. Good when you need to decompress more than dig in.",
      p30: null,   b30: null,
      p60: "$100", b60: MB(2005938),
      p90: "$130", b90: MB(1822493),
      p120: null,  b120: null,
    },
    {
      name: "Prenatal",
      desc: "Side-lying positioning and adapted pressure for pregnancy. Safe in all trimesters.",
      p30: null,   b30: null,
      p60: "$100", b60: MB(1822491),
      p90: "$135", b90: MB(1822495),
      p120: null,  b120: null,
    },
    {
      name: "Craniosacral",
      desc: "Gentle light touch along the spine and skull. Good for headaches, insomnia, jaw tension, and a nervous system stuck in overdrive.",
      p30: "$65",  b30: MB(1822498),
      p60: "$100", b60: MB(1822490),
      p90: null,   b90: null,
      p120: null,  b120: null,
    },
    {
      name: "Zen Trigger Point",
      desc: "Targeted pressure into the points that refer pain elsewhere. 90 minutes only — over 72 hours of advanced training behind it. Bring shorts and a sports bra.",
      p30: null,   b30: null,
      p60: null,   b60: null,
      p90: "$150", b90: MB(1822500),
      p120: null,  b120: null,
    },
    {
      name: "Reiki",
      desc: "Hands hovering or lightly touching. Good for stress, anxiety, and when you need to reset without being worked on.",
      p30: "$50",  b30: MB(1822497),
      p60: "$75",  b60: MB(1822492),
      p90: null,   b90: null,
      p120: null,  b120: null,
    },
    {
      name: "Energy Balancing",
      desc: "Reiki and massage woven together into a 90-minute session. Clears stuck energy and settles the nervous system — deeper than either alone.",
      p30: null,   b30: null,
      p60: null,   b60: null,
      p90: "$160", b90: MB(1822496),
      p120: null,  b120: null,
    },
  ];

  const FILTERS = [
    { label: "Chronic pain",  match: ["Deep Tissue", "Cupping Therapy", "Zen Trigger Point"] },
    { label: "Stress relief", match: ["Relaxation", "Reiki", "Energy Balancing", "Craniosacral"] },
    { label: "Headaches",     match: ["Craniosacral", "Zen Trigger Point"] },
    { label: "First timer",   match: ["Relaxation", "Craniosacral", "Reiki"] },
    { label: "Pregnancy",     match: ["Prenatal"] },
  ];

  const [activeFilter, setActiveFilter] = useState(null);
  const activeSet = activeFilter ? FILTERS.find(f => f.label === activeFilter)?.match : null;

  const onGlow = (e) => {
    const r = e.currentTarget.getBoundingClientRect();
    e.currentTarget.style.setProperty('--gx', `${((e.clientX - r.left) / r.width) * 100}%`);
    e.currentTarget.style.setProperty('--gy', `${((e.clientY - r.top) / r.height) * 100}%`);
  };

  const ServiceRow = ({ s }) => {
    const muted = activeSet && !activeSet.includes(s.name);
    const durations = [
      { label: "30 min", price: s.p30, href: s.b30 },
      { label: "60 min", price: s.p60, href: s.b60 },
      { label: "90 min", price: s.p90, href: s.b90 },
      { label: "120 min", price: s.p120, href: s.b120 },
    ].filter(d => d.price);

    return (
      <div className={`menu-row${muted ? ' muted' : ''}`} onMouseMove={onGlow}>
        <div className="menu-name">
          {s.name}{s.popular && <span className="popular-tag">Most booked</span>}
        </div>
        <div className="menu-content">
          <p className="menu-desc">{s.desc}</p>
          <div className="menu-durations" role="list">
            {durations.map((d, i) => (
              <a key={i} href={d.href} target="_blank" rel="noreferrer"
                 className="dur-pill" role="listitem"
                 aria-label={`Book ${d.label} ${s.name} – ${d.price}`}>
                <span className="dur-time">{d.label}</span>
                <span className="dur-sep" aria-hidden="true">·</span>
                <span className="dur-price">{d.price}</span>
                <Icon.Arrow />
              </a>
            ))}
          </div>
        </div>
      </div>
    );
  };

  return (
    <section className="section-pad services-sec" id="services">
      <div className="container">
        <div className="s-head reveal">
          <div>
            <span className="section-label">Pricing</span>
            <h2>Sessions and what <em>they cost.</em></h2>
          </div>
          <p className="lede">
            Most work runs 60 or 90 minutes. Deep tissue and cupping go up to two hours.
            Some modalities have their own formats — Zen Trigger Point is 90 minutes only,
            and Craniosacral and Reiki each have a 30-minute option.
          </p>
          <p className="booking-lead-time">Currently booking 1–2 weeks out.</p>
        </div>

        <div className="filter-bar reveal d1">
          <span className="filter-hint">What do you need?</span>
          {FILTERS.map((f, i) => (
            <button key={i}
              className={`filter-tag${activeFilter === f.label ? ' active' : ''}`}
              onClick={() => setActiveFilter(activeFilter === f.label ? null : f.label)}>
              {f.label}<span className="filter-x" aria-hidden="true"> ×</span>
            </button>
          ))}
        </div>

        <div className="menu-table reveal d2">
          {services.map((s, i) => <ServiceRow key={i} s={s} />)}

          <div className={`menu-row menu-row-gift${activeSet ? ' muted' : ''}`} onMouseMove={onGlow}>
            <div className="menu-name">Gift Certificates</div>
            <div className="menu-content">
              <p className="menu-desc">Digital gift certificates through Square. Any amount, no expiration — delivered by email instantly.</p>
              <div className="menu-durations">
                <a href={GIFT_URL} target="_blank" rel="noreferrer"
                   className="dur-pill dur-pill-gift"
                   aria-label="Buy a gift certificate starting at $65">
                  <span className="dur-time">from</span>
                  <span className="dur-sep" aria-hidden="true">·</span>
                  <span className="dur-price">$65</span>
                  <Icon.Arrow />
                </a>
              </div>
            </div>
          </div>
        </div>

        <p className="price-foot reveal d3">
          HSA and FSA receipts at checkout. Superbills available on request.
          Cancellations are free up to 24 hours before your appointment.
        </p>
      </div>
    </section>
  );
}

/* ============================================================
   What to Expect — concrete first-visit logistics
   ============================================================ */
function Expect() {
  const items = [
    {
      eyebrow: "01",
      Icon: Icon.Wear,
      title: "What to wear",
      titleEm: "wear",
      body: "Whatever's comfortable to come in. On the table, you undress to your comfort level under the sheet; some people keep underwear on, some don't. I only uncover the area I'm actively working on.",
    },
    {
      eyebrow: "02",
      Icon: Icon.Park,
      title: "Parking",
      titleEm: "Parking",
      body: "Free street parking on N Yakima Ave and the surrounding streets. The block can fill up around lunch, so give yourself a couple extra minutes if that's when you're coming.",
    },
    {
      eyebrow: "03",
      Icon: Icon.Clock,
      title: "Arriving",
      titleEm: "Arriving",
      body: "Try to show up about five minutes early. The Healing House has a secured entry, so once you're outside at 223 N Yakima, call or text me at " + PHONE_DISPLAY + " — I'll be right down.",
    },
    {
      eyebrow: "04",
      Icon: Icon.Chat,
      title: "The first five minutes",
      titleEm: "first",
      body: "A short intake at the front. I'll ask what's been bothering you, how firm you want me to go, and whether you'd rather have music or quiet. Then I step out, you get on the table under the sheet, and I knock before I come back in.",
    },
  ];

  return (
    <section className="expect section-pad" id="visit">
      <div className="container">
        <div className="s-head reveal">
          <div>
            <span className="section-label on-dark">First visit</span>
            <h2>What to expect, <em>in order.</em></h2>
          </div>
          <p className="lede">
            Most people are a little nervous before their first session. Here
            are the things people usually want to know up front, so you can
            stop wondering and just show up.
          </p>
        </div>

        <div className="expect-grid">
          {items.map((it, i) => {
            const I = it.Icon;
            const parts = it.title.split(it.titleEm);
            return (
              <div className={`expect-card reveal d${i}`} key={i}>
                <I className="ex-icon" />
                <span className="ex-num">{it.eyebrow}</span>
                <h4>{parts[0]}<em>{it.titleEm}</em>{parts[1]}</h4>
                <p>{it.body}</p>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   Photo band — moved after Expect so it doesn't break
   the pricing → logistics flow
   ============================================================ */
function PhotoBand() {
  const frames = [
    { img: "images/bodywork-shot.png", ttl: "Cupping", tag: "For what deep tissue alone can't reach.", pos: "center bottom" },
    { img: "images/cupping-real.jpg", ttl: "Bodywork", tag: "Finds what you didn't know needed work.", pos: "center bottom" },
  ];
  return (
    <section className="photo-band">
      <div className="container">
        <div className="photo-band-grid">
          {frames.map((f, i) => (
            <div className={`frame reveal d${i}`} key={i}>
              <img className="photo" src={f.img} alt={f.ttl + ' — ' + f.tag} style={{ objectPosition: f.pos }} />
              <div className="caption">
                <div className="ttl">{f.ttl}</div>
                <div className="tag">{f.tag}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   About — Amanda's story
   ============================================================ */
const REVIEWS = [
  { quote: "After just one session, the relief in my back was amazing. I'm already telling everyone I know. I'm officially a forever client!", name: "Vanessa Williams" },
  { quote: "I left feeling rejuvenated, relaxed, and like a brand new person. Her approach to cupping was equally exceptional.", name: "Ben N" },
  { quote: "I can't express how much this woman has helped me. I have referred a couple of people to her — all of them rave about how much they feel better.", name: "Leonia Coleman" },
  { quote: "She's highly skilled in her field and has helped me manage my low back and shoulder pain. I always leave my appointments feeling refreshed.", name: "Liliana Palacios" },
  { quote: "The most knowledgeable and skilled massage therapist I have encountered. She is a true healer and creates a cozy and inviting space.", name: "Dean Sakata" },
  { quote: "I left her table feeling rejuvenated, refreshed and revived — from the scents, the energy, the music and her aura. I nearly shed a tear of happiness.", name: "Chi Love" },
  { quote: "This was an amazing experience! I was so relaxed I was floaty feeling after for over an hour! 10/10 would recommend.", name: "Ashley Johnson" },
  { quote: "She has range: soothing and light when I need it, or a rejuvenating knot-busting session. She has an uncanny ability to find what needs the most attention.", name: "Megan Graves" },
];

function About() {
  const [idx, setIdx] = useState(0);
  const [visible, setVisible] = useState(true);
  const [paused, setPaused] = useState(false);
  const timerRef = React.useRef(null);
  const slideRef = React.useRef(null);
  const minHRef = React.useRef(0);

  const advance = () => {
    setVisible(false);
    setTimeout(() => {
      setIdx(i => (i + 1) % REVIEWS.length);
      setVisible(true);
    }, 380);
  };

  const startTimer = () => {
    clearInterval(timerRef.current);
    timerRef.current = setInterval(advance, 6500);
  };

  useEffect(() => {
    if (!paused) startTimer();
    else clearInterval(timerRef.current);
    return () => clearInterval(timerRef.current);
  }, [paused]);

  const goTo = (i) => {
    setIdx(i);
    setVisible(true);
    if (!paused) startTimer();
  };

  return (
    <section className="about section-pad" id="about">
      <div className="container about-grid">
        <div className="about-copy">
          <span className="section-label reveal">About Amanda</span>
          <h2 className="reveal d1">
            Meet <em>Amanda.</em>
          </h2>

          <div className="about-body">
            <p className="reveal d2">
              Hi, I'm Amanda Ries — Licensed Massage Therapist and founder of Awaken The Body Massage &amp; Bodywork.
            </p>
            <p className="reveal d2">
              Bodywork has been part of my life for as long as I can remember. Growing up, my father lived with chronic
              back pain, and long before I ever considered massage as a career, I found myself intuitively working on
              him, on friends and family. Even at a young age, I could see the difference therapeutic touch made — not
              only in relieving pain, but in helping people feel more comfortable and connected to their bodies. As I
              got older, pursuing massage therapy felt like a natural calling.
            </p>
            <p className="reveal d3">
              My approach combines deep therapeutic work, structural body awareness, and intuitive care. I specialize in
              deep tissue, trigger point, cupping therapy, craniosacral work, nervous system regulation, anxiety relief,
              and relaxation. Every session is built around what your body actually needs — whether you're working
              through chronic pain, processing stress, or simply need a moment to exhale. My goal is to help you feel
              supported and restored.
            </p>
            <p className="reveal d3">
              When I'm not in the treatment room, you'll find me practicing yoga or Pilates, hiking, getting near the
              ocean, dancing with friends, reading, traveling, spending time with my cat, or deepening my practice
              through continued education and new modalities.
            </p>
            <p className="reveal d4">
              It's truly an honor to be part of your wellness journey, and I look forward to welcoming you to my table.
            </p>
          </div>

          <div className="about-sign reveal d4">
            <div className="sig-line">&mdash; Amanda</div>
            <div className="sig-cred">Amanda Ries, LMT &middot; Reiki Master</div>
          </div>
        </div>

        <aside className="about-side reveal d2">
          <div className="about-card">
            <div className="ac-label">In their words</div>
            <figure className={`review-slide${visible ? '' : ' out'}`}
              aria-live="polite" aria-atomic="true"
              ref={el => {
                slideRef.current = el;
                if (el) {
                  const h = el.offsetHeight;
                  if (h > minHRef.current) {
                    minHRef.current = h;
                    el.parentElement.style.setProperty('--slide-min-h', h + 'px');
                  }
                }
              }}>
              <blockquote>"{REVIEWS[idx].quote}"</blockquote>
              <figcaption>&mdash; {REVIEWS[idx].name} &middot; via Google</figcaption>
            </figure>
            <div className="review-controls">
              <div className="review-dots" role="tablist" aria-label="Reviews">
                {REVIEWS.map((_, i) => (
                  <button key={i}
                    className={`rdot${i === idx ? ' active' : ''}`}
                    role="tab"
                    aria-selected={i === idx}
                    aria-label={`Review ${i + 1} of ${REVIEWS.length}`}
                    onClick={() => goTo(i)}
                  />
                ))}
              </div>
              <button
                className="review-pause"
                onClick={() => setPaused(p => !p)}
                aria-label={paused ? "Resume auto-advancing reviews" : "Pause auto-advancing reviews"}
              >
                {paused ? <Icon.Play /> : <Icon.Pause />}
              </button>
            </div>
          </div>
        </aside>
      </div>
    </section>
  );
}

/* ============================================================
   FAQ
   ============================================================ */
function FAQ() {
  const [openIdx, setOpenIdx] = useState(0);
  const items = [
    {
      q: "Do you take insurance or HSA / FSA?",
      qEm: "insurance",
      a: "Yes for HSA and FSA. I'll give you an itemized receipt at checkout, which most plans accept. I'm out of network for regular health insurance, but I can write you a superbill to submit if your plan reimburses for licensed massage therapy in Washington State.",
    },
    {
      q: "Should I tip?",
      qEm: "tip",
      a: "Tips are always welcome but never expected. If you'd like to add one, you can do it at checkout, in person, or through MassageBook. Otherwise rebooking and word of mouth are the best compliments.",
    },
    {
      q: "What's your cancellation policy?",
      qEm: "cancellation",
      a: "Free to reschedule or cancel up to 24 hours before. Inside 24 hours I ask for 50% of the session, and inside two hours, the full rate. That said, life happens, so if something genuinely comes up, text me and we'll figure it out.",
    },
    {
      q: "I've never had bodywork before. Where do I start?",
      qEm: "never",
      a: "If you've got a specific spot that hurts, book a 60-minute Deep Tissue. If you're more after rest and a quieter nervous system, go with Craniosacral — there's a 30-minute intro at $65 if you want to try it first. Either way, we'll talk it through at intake. You don't need to know what you want when you walk in.",
    },
    {
      q: "Can I request a gift certificate?",
      qEm: "gift",
      a: "Yes. You can buy them through Square — digital only, delivered by email instantly. Any amount, starting at $65, and they don't expire.",
    },
    {
      q: "Is it normal to feel sore afterward?",
      qEm: "sore",
      a: "Yes, especially after deep tissue or cupping. It usually feels like post-workout soreness and clears within a day or two. Drink water, take it easy, and let me know at your next session so I can adjust.",
    },
    {
      q: "What if I fall asleep?",
      qEm: "fall asleep",
      a: "It happens all the time — it means you're in good hands. I'll work right through it. Some of the best sessions end with a snore.",
    },
    {
      q: "Do you do couples or back-to-back sessions?",
      qEm: "couples",
      a: "I'm a solo practitioner, so I can only see one person at a time. If you and a partner both want sessions, I'm happy to schedule them back-to-back on the same day.",
    },
  ];
  return (
    <section className="section-pad faq-sec" id="faq">
      <div className="container">
        <div className="s-head reveal" style={{ marginBottom: 48 }}>
          <div>
            <span className="section-label">FAQ</span>
            <h2>The <em>practical</em> stuff.</h2>
          </div>
          <p className="lede">
            Insurance, tipping, cancellations, the stuff people usually ask about
            before they book. If your question isn't covered here, just text me
            at <a href={PHONE_HREF} className="inline-link">{PHONE_DISPLAY}</a>.
          </p>
        </div>

        <div className="faq-wrap reveal d1">
          {items.map((it, i) => {
            const parts = it.q.split(it.qEm);
            const isOpen = openIdx === i;
            return (
              <div className={"faq-item" + (isOpen ? " open" : "")} key={i}>
                <button className="faq-q" onClick={() => setOpenIdx(isOpen ? -1 : i)} aria-expanded={isOpen}>
                  <span>{parts[0]}<em>{it.qEm}</em>{parts[1]}</span>
                  <span className="faq-toggle" aria-hidden="true"></span>
                </button>
                <div className="faq-a">
                  <div><p>{it.a}</p></div>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   Contact / location
   ============================================================ */
function Contact() {
  return (
    <section className="contact" id="contact">
      <div className="container contact-grid">
        <div className="contact-copy">
          <span className="section-label on-dark">Visit</span>
          <h2>Come find me <em>at The Healing House.</em></h2>
          <p className="contact-lede">
            Small practice inside a shared wellness building in Tacoma's
            Stadium District. You can book any time on MassageBook;
            I'll see you when you get here.
          </p>
          <a href="#services" className="btn btn-on-dark btn-lg">
            Book a Session <Icon.Arrow />
          </a>
        </div>

        <div className="contact-info">
          <div className="ci-card">
            <div className="ci-row">
              <div className="ci-label">Address</div>
              <div className="ci-val">
                The Healing House<br />
                223 N Yakima Ave<br />
                Tacoma, WA 98403<br />
                <a className="ci-link" href={MAPS_URL} target="_blank" rel="noreferrer">Open in Maps &rarr;</a>
              </div>
            </div>
            <div className="ci-row">
              <div className="ci-label">Parking</div>
              <div className="ci-val">
                Free street parking on N Yakima Ave and the surrounding streets.
              </div>
            </div>
            <div className="ci-row">
              <div className="ci-label">Building access</div>
              <div className="ci-val">
                Secured-access building. Call or text <a className="ci-link" href={PHONE_HREF}>{PHONE_DISPLAY}</a> when you arrive and I'll come let you in.
              </div>
            </div>
            <div className="ci-row">
              <div className="ci-label">Hours</div>
              <div className="ci-val ci-hours">
                <div><span>Mon</span><span>Closed</span></div>
                <div><span>Tue&ndash;Fri</span><span>11am &ndash; 7pm</span></div>
                <div><span>Saturday</span><span>12pm &ndash; 5pm</span></div>
                <div><span>Sunday</span><span>Closed</span></div>
              </div>
            </div>
            <div className="ci-row">
              <div className="ci-label">Contact</div>
              <div className="ci-val">
                <a className="ci-link" href={PHONE_HREF}>{PHONE_DISPLAY}</a><br />
                <a className="ci-link" href="https://www.instagram.com/awakenthebodyllc" target="_blank" rel="noreferrer">@awakenthebodyllc</a>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div className="map-strip" aria-hidden="true">
        <svg viewBox="0 0 1600 220" preserveAspectRatio="none" className="map-svg">
          <defs>
            <pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse">
              <path d="M 40 0 L 0 0 0 40" fill="none" stroke="rgba(244,236,224,0.06)" strokeWidth="1" />
            </pattern>
          </defs>
          <rect width="1600" height="220" fill="url(#grid)" />
          <path d="M 0 80 L 1600 110" stroke="rgba(244,236,224,0.18)" strokeWidth="2" fill="none" />
          <path d="M 0 150 L 1600 130" stroke="rgba(244,236,224,0.12)" strokeWidth="1.5" fill="none" />
          <path d="M 200 0 L 240 220" stroke="rgba(244,236,224,0.12)" strokeWidth="1.5" fill="none" />
          <path d="M 700 0 L 720 220" stroke="rgba(244,236,224,0.18)" strokeWidth="2" fill="none" />
          <path d="M 1200 0 L 1180 220" stroke="rgba(244,236,224,0.12)" strokeWidth="1.5" fill="none" />
          <rect x="260" y="40" width="180" height="60" fill="rgba(244,236,224,0.04)" />
          <rect x="460" y="50" width="220" height="50" fill="rgba(244,236,224,0.04)" />
          <rect x="740" y="40" width="180" height="60" fill="rgba(244,236,224,0.04)" />
          <rect x="260" y="140" width="180" height="60" fill="rgba(244,236,224,0.04)" />
          <rect x="740" y="140" width="180" height="60" fill="rgba(244,236,224,0.04)" />
          <rect x="940" y="140" width="220" height="50" fill="rgba(244,236,224,0.04)" />
          <g transform="translate(720, 90)">
            <circle cx="0" cy="0" r="28" fill="rgba(194,107,77,0.15)" />
            <circle cx="0" cy="0" r="16" fill="rgba(194,107,77,0.3)" />
            <circle cx="0" cy="0" r="7" fill="#c26b4d" />
            <circle cx="0" cy="0" r="2.5" fill="#fff" />
          </g>
        </svg>
        <div className="map-pin-label">
          <Icon.Pin /> 223 N Yakima Ave
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   Footer
   ============================================================ */
function Footer() {
  return (
    <footer className="footer">
      <div className="container footer-inner">
        <a href="#top" className="brand">
          <img src="images/logo-white.png" className="brand-mark" alt="Awaken The Body logo" />
          <span>
            Awaken The Body
            <small>Massage &amp; Bodywork LLC</small>
          </span>
        </a>
        <div className="footer-meta">
          <span>&copy; 2026 Awaken The Body Massage &amp; Bodywork LLC</span>
          <span className="dotsep"></span>
          <span>Amanda Ries, LMT</span>
          <span className="dotsep"></span>
          <a href={GIFT_URL} target="_blank" rel="noreferrer">Gift certificates</a>
          <span className="dotsep"></span>
          <a href="https://www.instagram.com/awakenthebodyllc" target="_blank" rel="noreferrer">Instagram</a>
        </div>
      </div>
    </footer>
  );
}

/* ============================================================
   Back to top
   ============================================================ */
function BackToTop() {
  const [show, setShow] = useState(false);
  useEffect(() => {
    const scrollEl = document.querySelector('.scroll-content');
    if (!scrollEl) return;
    const on = () => setShow(scrollEl.scrollTop > 400);
    scrollEl.addEventListener("scroll", on, { passive: true });
    return () => scrollEl.removeEventListener("scroll", on);
  }, []);
  const handleClick = (e) => {
    e.preventDefault();
    document.querySelector('.scroll-content')?.scrollTo({ top: 0, behavior: 'smooth' });
  };
  return (
    <a href="#top" onClick={handleClick} className={`back-top${show ? ' back-top--show' : ''}`} aria-label="Back to top">
      <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
        <path d="M8 13V3M3 8l5-5 5 5" />
      </svg>
    </a>
  );
}

/* ============================================================
   App — photo band moved after Expect per PM feedback
   ============================================================ */
function App() {
  useReveal();
  useEffect(() => {
    const scrollEl = document.querySelector('.scroll-content');
    if (!scrollEl) return;
    const handleAnchor = (e) => {
      const a = e.target.closest('a[href^="#"]');
      if (!a) return;
      const id = a.getAttribute('href').slice(1);
      e.preventDefault();
      if (!id || id === 'top') {
        scrollEl.scrollTo({ top: 0, behavior: 'smooth' });
        return;
      }
      const target = document.getElementById(id);
      if (target) target.scrollIntoView({ behavior: 'smooth', block: 'start' });
    };
    document.addEventListener('click', handleAnchor);
    return () => document.removeEventListener('click', handleAnchor);
  }, []);
  return (
    <React.Fragment>
      <Nav />
      <div className="scroll-content">
        <Hero />
        <Trust />
        <Services />
        <Expect />
        <PhotoBand />
        <About />
        <FAQ />
        <Contact />
        <Footer />
      </div>
      <BackToTop />
    </React.Fragment>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);