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

// ─── Data ───────────────────────────────────────────────────────────────────
const SERVICES = [
  {
    id: "swedish",
    name: "Swedish Massage",
    desc:
      "A calming treatment that uses light to medium pressure along with smooth gliding, effleurage, and kneading techniques to enhance circulation and encourage a deep sense of relaxation and well-being.",
    prices: [
      ["60 min", 140],
      ["75 min", 175],
      ["90 min", 210],
    ],
    tags: ["Relaxation", "Circulation"],
    photo: "assets/photos/work-hand-linen.webp",
  },
  {
    id: "deep",
    name: "Deep Tissue",
    desc:
      "Slow, deep pressure and skilled techniques work into tight muscles to ease pain and release built-up tension.",
    prices: [
      ["60 min", 155],
      ["75 min", 190],
      ["90 min", 225],
    ],
    tags: ["Therapeutic", "Tension Release"],
    photo: "assets/photos/work-shoulder-energy.webp",
  },
  {
    id: "custom",
    name: "Custom Massage",
    desc:
      "A fully personalized healing experience that begins with mindful aromatherapy breathing and a warm compress to gently relax the body. Intuitively designed to support your unique needs, this treatment blends your choice of pressure, advanced therapeutic techniques, hot stones, essential oils, and targeted herbal-infused body oils to restore balance and harmony.",
    prices: [["90 min", 240]],
    tags: ["Signature", "Aromatherapy", "Hot Stones"],
    featured: true,
    photo: "assets/photos/work-leaning-lover.webp",
  },
  {
    id: "prenatal",
    name: "Pre-Natal",
    desc:
      "A comforting and calming experience for both mom and baby, designed to ease muscle aches, soothe joint pain, and gently reduce swelling—promoting relaxation and connection during this special time.",
    prices: [["60 min", 140]],
    tags: ["Pregnancy", "Gentle"],
    photo: "assets/photos/work-shoulder-press.webp",
  },
  {
    id: "sports",
    name: "Sports Massage",
    desc:
      "A targeted treatment for athletes and active individuals which includes deep tissue work, stretching, and joint mobilization to improve performance, prevent injuries, and speed up recovery.",
    prices: [
      ["60 min", 155],
      ["75 min", 190],
      ["90 min", 225],
    ],
    tags: ["Recovery", "Performance"],
    photo: "assets/photos/work-forearm.webp",
  },
];

const ENHANCEMENTS = [
  ["Cupping", 20],
  ["Hot Stone", 15],
  ["CBD", 12],
  ["Aromatherapy", 10],
];

const MODALITIES = [
  {
    n: "01",
    name: "Swedish",
    icon: "swedish",
    body:
      "Long, gliding strokes paired with kneading. The doorway technique — calms the nervous system and improves circulation.",
    tags: ["Light–Medium", "Calming"],
  },
  {
    n: "02",
    name: "Deep Tissue",
    icon: "deep",
    body:
      "Slow, sustained pressure that works through fascia and adhesions. Best for chronic tension, postural patterns, and recovery.",
    tags: ["Firm", "Therapeutic"],
  },
  {
    n: "03",
    name: "Hot Stone",
    icon: "stone",
    body:
      "Smooth basalt stones held at therapeutic temperature melt into muscle. Pairs naturally with Swedish and Custom sessions.",
    tags: ["Warmth", "Add-on"],
  },
  {
    n: "04",
    name: "Cupping",
    icon: "cupping",
    body:
      "Negative-pressure cups lift and decompress tissue, drawing fresh blood flow into stuck areas. Often combined with deep tissue.",
    tags: ["Decompression", "Add-on"],
  },
  {
    n: "05",
    name: "Aromatherapy",
    icon: "aroma",
    body:
      "Essential oil blends layered into the work to support whatever the session calls for — clarity, calm, recovery, sleep.",
    tags: ["Sensory", "Add-on"],
  },
  {
    n: "06",
    name: "Pre-Natal",
    icon: "prenatal",
    body:
      "Side-lying positioning with bolsters and pillows to keep mom safe and supported through every trimester.",
    tags: ["Pregnancy", "Gentle"],
  },
  {
    n: "07",
    name: "Sports & Stretch",
    icon: "sports",
    body:
      "Active and passive stretching woven into deeper work to restore range of motion and prep or recover the body.",
    tags: ["Athletic", "Mobility"],
  },
  {
    n: "08",
    name: "CBD Topical",
    icon: "cbd",
    body:
      "Full-spectrum CBD applied locally for inflammation and pain relief — a clean add-on to any therapeutic session.",
    tags: ["Anti-inflammatory", "Add-on"],
  },
];

const TESTIMONIALS = [
  {
    quote:
      "Sophia has the rare gift of meeting the body exactly where it is. I've left every session lighter, taller, and clearer than I walked in.",
    name: "Eliza R.",
    role: "Montauk · Returning client",
  },
  {
    quote:
      "I came in with a knot I'd been carrying for two years. She found it in five minutes and walked me out without it.",
    name: "Marco V.",
    role: "Sag Harbor · Sports massage",
  },
  {
    quote:
      "The Custom Massage feels less like a treatment and more like a ceremony. The aromatherapy alone is worth the drive from the city.",
    name: "Priya K.",
    role: "NYC · Custom 90-min",
  },
];

const FAQ = [
  {
    q: "What should I expect at my first visit?",
    a:
      "Plan to arrive 5–10 minutes early. We'll talk through what's going on in your body, your goals for the session, and any pressure preferences. You'll have full privacy to undress to your level of comfort and you'll always be properly draped throughout.",
  },
  {
    q: "What's your cancellation policy?",
    a:
      "I ask for at least 24 hours notice for any cancellation or reschedule. Late cancellations and no-shows are charged 100% of the service total — out of respect for the time held for you and for clients on the waitlist.",
  },
  {
    q: "Do you offer in-home or event services?",
    a:
      "Yes — offsite massage is $200/hour with travel fees calculated by location. Ideal for private homes, weddings, retreats, and corporate wellness days. Reach out for a custom quote.",
  },
  {
    q: "How often should I book?",
    a:
      "Most clients land in a rhythm of every 3–4 weeks. If you're working through a specific issue or in heavy training, weekly or bi-weekly is more useful. We'll find the cadence together.",
  },
  {
    q: "Are gift cards available?",
    a:
      "Yes. Gift cards can be purchased for any service or amount through the Square booking site, and a digital card is sent immediately on purchase.",
  },
  {
    q: "What forms of payment do you accept?",
    a:
      "All major cards, Apple Pay, and cash. Gratuity is appreciated but never expected. Tips can be added at checkout.",
  },
];

// ─── Logo (animated, hero placement) ────────────────────────────────────────
// Type-only wordmark, matching the nav: VITALIA in the display serif with the
// nav's letter-spacing. Letters reveal one at a time, then "MASSAGE THERAPY"
// fades in beneath. No PNG, no hands, no arcs — just type.
function AnimatedHeroLogo({ size = 540 }) {
  const letters = "VITALIA".split("");
  return (
    <div className="anim-wordmark" style={{ "--wm-size": size + "px" }}>
      <div className="anim-wordmark-main" aria-label="Vitalia">
        {letters.map((ch, i) => (
          <span key={i} style={{ animationDelay: 0.15 + i * 0.12 + "s" }}>
            {ch}
          </span>
        ))}
      </div>
      <div className="anim-wordmark-sub">MASSAGE THERAPY</div>
    </div>
  );
}

// ─── Photo (real or placeholder) ────────────────────────────────────────────
function Photo({ label, ratio, src, position = "center", className = "", style = {} }) {
  if (src) {
    return (
      <div
        className={`photo photo-real ${className}`}
        style={{ aspectRatio: ratio || "auto", ...style }}
        role="img"
        aria-label={label}
      >
        <img src={src} alt={label} style={{ objectPosition: position }} />
      </div>
    );
  }
  return (
    <div
      className={`photo ${className}`}
      style={{ aspectRatio: ratio || "auto", ...style }}
      role="img"
      aria-label={label}
    >
      <span className="photo-label">{label}</span>
    </div>
  );
}

// ─── Logo ───────────────────────────────────────────────────────────────────
function Logo({ className = "", style = {} }) {
  return (
    <img
      src="assets/vitalia-logo-transparent.png"
      alt="Vitalia Massage Therapy"
      className={`hero-logo ${className}`}
      style={style}
    />
  );
}

function NavMark() {
  // Tiny hand-cup mark for the nav
  return (
    <svg viewBox="0 0 32 32" fill="none" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round">
      <path d="M5 8 A12 12 0 0 1 27 8" />
      <path d="M27 24 A12 12 0 0 1 5 24" opacity="0.4" />
      <path d="M11 14 C11 18 13 20 16 20 C19 20 21 18 21 14" opacity="0.7" />
      <path d="M13 13 L13 17" opacity="0.5" />
      <path d="M19 13 L19 17" opacity="0.5" />
    </svg>
  );
}

// ─── Marquee ────────────────────────────────────────────────────────────────
function Marquee() {
  const items = [
    "Therapeutic Bodywork",
    "Established 2021",
    "Montauk · NY",
    "Licensed Massage Therapist",
    "By Appointment",
    "Locally Sourced Oils",
  ];
  const seq = [...items, ...items, ...items];
  return (
    <div className="marquee" data-screen-label="Marquee">
      <div className="marquee-track">
        <span>
          {seq.map((it, i) => (
            <React.Fragment key={i}>
              {it}
              <span className="marquee-dot" />
            </React.Fragment>
          ))}
        </span>
      </div>
    </div>
  );
}

// ─── About ──────────────────────────────────────────────────────────────────
function About() {
  return (
    <section className="section section-narrow" id="about" data-screen-label="About">
      <div className="about-grid">
        <Photo
          label="Sophia Foglia, LMT — at the studio"
          ratio="4/5"
          src="assets/photos/sophia-stones.webp"
          position="center top"
          className="about-photo reveal"
        />
        <div className="about-copy reveal">
          <div className="eyebrow">About · Sophia Foglia, LMT</div>
          <h3>
            A nurturing environment for <em>relaxation</em> and the long, slow work of healing.
          </h3>
          <p>
            I am a massage therapist based in Montauk, NY. My mission is to encapsulate the feeling of rejuvenation
            and recovery — to bring awareness to the importance of our bodies and encourage individuals to seek massage
            and self-care to enhance performance in daily life.
          </p>
          <p>
            Each person I work with receives a personalized approach tailored to their needs. I believe in the power
            of individualized care, and I strive to create a space where my clients can experience real relaxation
            and lasting healing.
          </p>
          <div className="about-signature">
            <span className="about-sig-mark">Sophia</span>
            <div className="about-sig-credits">
              <b>Sophia Foglia</b>
              Licensed Massage Therapist · NY State #036412
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── Services ───────────────────────────────────────────────────────────────
function Services() {
  const [filter, setFilter] = useState("all");
  const tabs = [
    ["all", "All Services"],
    ["signature", "Signature"],
    ["therapeutic", "Therapeutic"],
    ["wellness", "Wellness"],
  ];
  const filtered = SERVICES.filter((s) => {
    if (filter === "all") return true;
    if (filter === "signature") return s.featured;
    if (filter === "therapeutic") return ["deep", "sports"].includes(s.id);
    if (filter === "wellness") return ["swedish", "prenatal"].includes(s.id);
    return true;
  });

  return (
    <section className="section section-wide" id="services" data-screen-label="Services">
      <div className="section-head reveal">
        <div>
          <div className="eyebrow">The Menu · 02</div>
        </div>
        <div>
          <h2>
            Treatments, in <em>service</em> of the body you live in.
          </h2>
          <p className="lede">
            Every session begins with a brief conversation about what your body is asking for today. Pricing is
            consistent, the room is unhurried, and no two sessions run the same.
          </p>
        </div>
      </div>

      <div className="menu-tabs">
        {tabs.map(([id, label]) => (
          <button
            key={id}
            className={`menu-tab ${filter === id ? "is-active" : ""}`}
            onClick={() => setFilter(id)}
          >
            {label}
          </button>
        ))}
      </div>

      <div className="services-list">
        {filtered.map((s, i) => (
          <ServiceRow key={s.id} service={s} index={i + 1} />
        ))}
      </div>

      <div className="enhancements">
        <div>
          <div className="eyebrow">Add-ons</div>
          <h4>Massage Enhancements</h4>
          <p>Fold any of these into a session at intake.</p>
        </div>
        <div className="enhancement-grid">
          {ENHANCEMENTS.map(([n, p]) => (
            <div key={n} className="enhancement">
              <span className="enhancement-name">{n}</span>
              <span className="enhancement-price">${p}</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function ServiceRow({ service, index }) {
  const num = String(index).padStart(2, "0");
  return (
    <article className="service-row">
      <span className="service-num">{num} / {String(SERVICES.length).padStart(2,"0")}</span>
      <Photo
        label={`Studio detail · ${service.name.toLowerCase()}`}
        ratio="5/4"
        src={service.photo}
        position={service.photoPos || "center"}
        className="service-photo"
      />
      <h3 className="service-name">{service.name}</h3>
      <p className="service-desc">{service.desc}</p>
      <div className="service-prices">
        {service.prices.map(([d, p]) => (
          <div key={d} className="price-row">
            <span className="duration">{d}</span>
            <span>${p}</span>
          </div>
        ))}
      </div>
    </article>
  );
}

// ─── Modality icons ────────────────────────────────────────────────────────
// Single-weight line-art, sized to inherit currentColor. Each glyph is a
// little tactile metaphor for the modality — strokes for Swedish, a pressure
// point for Deep Tissue, stacked stones, a cup, a vapor-rising drop, a
// crescent for pre-natal, a stretch arc for sports, a leaf for CBD.
//
// Each icon carries inner classes (`mi-stroke-N`, `mi-ring-N`, etc.) so the
// stylesheet can give every modality its own ambient motion: Swedish's strokes
// flow, Deep Tissue's rings pulse outward, the stones rock, the cup bobs,
// aromatherapy puffs, pre-natal breathes, sports stretches, the leaves sway.
const ModalityIcon = ({ kind }) => {
  const props = {
    width: 32, height: 32, viewBox: "0 0 32 32",
    fill: "none", stroke: "currentColor", strokeWidth: 1.25,
    strokeLinecap: "round", strokeLinejoin: "round",
    "aria-hidden": true,
    className: `mi mi-${kind}`,
  };
  switch (kind) {
    case "swedish":
      return (
        <svg {...props}>
          <path className="mi-stroke mi-stroke-1" d="M4 10c4-3 8 3 12 0s8 3 12 0" />
          <path className="mi-stroke mi-stroke-2" d="M4 16c4-3 8 3 12 0s8 3 12 0" />
          <path className="mi-stroke mi-stroke-3" d="M4 22c4-3 8 3 12 0s8 3 12 0" />
        </svg>
      );
    case "deep":
      return (
        <svg {...props}>
          <circle className="mi-ring mi-ring-1" cx="16" cy="16" r="11" />
          <circle className="mi-ring mi-ring-2" cx="16" cy="16" r="6.5" />
          <circle className="mi-dot" cx="16" cy="16" r="1.6" fill="currentColor" stroke="none" />
        </svg>
      );
    case "stone":
      return (
        <svg {...props}>
          <g className="mi-stones">
            <ellipse className="mi-stone mi-stone-1" cx="16" cy="22" rx="10" ry="3.2" />
            <ellipse className="mi-stone mi-stone-2" cx="16" cy="16" rx="8" ry="2.6" />
            <ellipse className="mi-stone mi-stone-3" cx="16" cy="11" rx="5.5" ry="2" />
          </g>
          <path className="mi-heat" d="M14 7c.6-1.4 3.4-1.4 4 0" />
        </svg>
      );
    case "cupping":
      return (
        <svg {...props}>
          <g className="mi-cup">
            <path d="M8 9h16v7a8 8 0 0 1-16 0z" />
            <path d="M6.5 9h19" />
          </g>
          <path className="mi-cup-pull" d="M16 22v4" />
        </svg>
      );
    case "aroma":
      return (
        <svg {...props}>
          <path className="mi-drop" d="M16 28c4 0 7-3 7-7 0-5-7-13-7-13s-7 8-7 13c0 4 3 7 7 7z" />
          <path className="mi-drop-glint" d="M19 16c0 1.7-1.3 3-3 3" />
        </svg>
      );
    case "prenatal":
      return (
        <svg {...props}>
          <g className="mi-belly">
            <path d="M22 4a12 12 0 1 0 0 24 9 9 0 0 1 0-18 14 14 0 0 1 0-6z" />
            <circle cx="16" cy="18" r="1.2" fill="currentColor" stroke="none" />
          </g>
        </svg>
      );
    case "sports":
      return (
        <svg {...props}>
          <path className="mi-arc" d="M5 22c5-9 17-9 22 0" />
          <path className="mi-arrow mi-arrow-l" d="M5 22l-1-3 3-1" />
          <path className="mi-arrow mi-arrow-r" d="M27 22l1-3-3-1" />
        </svg>
      );
    case "cbd":
      return (
        <svg {...props}>
          <path className="mi-leaf mi-leaf-r" d="M16 26c0-7 4-12 11-13-1 7-5 12-11 13z" />
          <path className="mi-leaf mi-leaf-l" d="M16 26c0-7-4-12-11-13 1 7 5 12 11 13z" />
          <path d="M16 28v-9" />
        </svg>
      );
    default:
      return null;
  }
};
function Modalities() {
  return (
    <section className="section section-wide" id="modalities" data-screen-label="Modalities">
      <div className="section-head reveal">
        <div>
          <div className="eyebrow">Approach · 03</div>
        </div>
        <div>
          <h2>
            Eight modalities, woven together <em>per session</em>.
          </h2>
          <p className="lede">
            Sessions aren't a checklist. We draw from the toolkit below, in whatever order serves the work that's
            actually in front of us.
          </p>
        </div>
      </div>
      <div className="modalities">
        {MODALITIES.map((m) => (
          <div key={m.n} className="modality">
            <div className="modality-icon"><ModalityIcon kind={m.icon} /></div>
            <span className="modality-num">— {m.n}</span>
            <h4>{m.name}</h4>
            <p>{m.body}</p>
            <div className="modality-tags">
              {m.tags.map((t) => (
                <span key={t} className="modality-tag">{t}</span>
              ))}
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

// ─── Testimonials ───────────────────────────────────────────────────────────
function Testimonials() {
  const [active, setActive] = useState(0);
  useEffect(() => {
    const id = setInterval(() => setActive((i) => (i + 1) % TESTIMONIALS.length), 7000);
    return () => clearInterval(id);
  }, []);
  return (
    <section className="testimonials" id="testimonials" data-screen-label="Testimonials">
      <div className="testimonials-inner">
        <div className="section-head reveal" style={{ marginBottom: 56 }}>
          <div><div className="eyebrow">Words · 04</div></div>
          <div>
            <h2>From the <em>table</em>, in their words.</h2>
          </div>
        </div>
        <div className="testimonials-track">
          {TESTIMONIALS.map((t, i) => (
            <div key={i} className={`testimonial ${i === active ? "is-active" : ""}`}>
              <Photo
                label={`Studio detail · ${i + 1}`}
                ratio="1/1"
                src={[
                  "assets/photos/work-cupping.webp",
                  "assets/photos/work-shoulder-press.webp",
                  "assets/photos/work-forearm.webp",
                ][i]}
                className="testimonial-photo"
              />
              <div>
                <p className="testimonial-quote">{t.quote}</p>
                <div className="testimonial-attr">
                  <b>{t.name}</b> &nbsp;·&nbsp; {t.role}
                </div>
              </div>
            </div>
          ))}
        </div>
        <div className="testimonials-controls">
          <div className="testimonials-dots">
            {TESTIMONIALS.map((_, i) => (
              <button
                key={i}
                className={`testimonials-dot ${i === active ? "is-active" : ""}`}
                onClick={() => setActive(i)}
                aria-label={`Show testimonial ${i + 1}`}
              />
            ))}
          </div>
          <div className="testimonials-arrows">
            <button
              className="testimonials-arrow"
              onClick={() => setActive((i) => (i - 1 + TESTIMONIALS.length) % TESTIMONIALS.length)}
              aria-label="Previous"
            >
              <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.4"><path d="M9 2 L4 7 L9 12"/></svg>
            </button>
            <button
              className="testimonials-arrow"
              onClick={() => setActive((i) => (i + 1) % TESTIMONIALS.length)}
              aria-label="Next"
            >
              <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.4"><path d="M5 2 L10 7 L5 12"/></svg>
            </button>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── Offsite ────────────────────────────────────────────────────────────────
function Offsite() {
  return (
    <section className="offsite" id="offsite" data-screen-label="Offsite">
      <Photo
        label="Offsite scene · home setup, retreat, or beachside"
        src="assets/photos/work-leaning-lover.webp"
        position="center"
      />
      <div className="offsite-inner">
        <div>
          <div className="eyebrow">Offsite · 05</div>
          <h2>
            Bodywork that <em>travels</em>.
          </h2>
          <p>
            Personalized massage therapy in your home, hotel, or event space. Especially loved for weddings,
            wellness weekends, family stays, and corporate retreats across the East End.
          </p>
          <p className="offsite-rate">$200 / hour · travel fees by location</p>
          <a className="btn" href="#contact">
            Request a Quote <span className="btn-arrow">→</span>
          </a>
        </div>
        <div className="offsite-card">
          <h4>Best for</h4>
          <ul>
            <li>Private home & hotel sessions across Montauk and the East End</li>
            <li>Weddings, bridal parties, and rehearsal-day reset</li>
            <li>Multi-day retreats and family wellness weekends</li>
            <li>Corporate offsites, founder weeks, and crew recovery</li>
          </ul>
        </div>
      </div>
    </section>
  );
}

// ─── FAQ ────────────────────────────────────────────────────────────────────
function FAQSection() {
  const [open, setOpen] = useState(0);
  return (
    <section className="section section-narrow" id="faq" data-screen-label="FAQ">
      <div className="section-head reveal">
        <div><div className="eyebrow">Details · 06</div></div>
        <div>
          <h2>What to know <em>before</em> you book.</h2>
          <p className="lede">
            A few of the most-asked questions. If you don't see what you need here, text or email any time.
          </p>
        </div>
      </div>
      <div className="faq-list">
        {FAQ.map((f, i) => (
          <div key={i} className={`faq-item ${open === i ? "is-open" : ""}`}>
            <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
              <span>{f.q}</span>
              <span className="faq-q-icon">+</span>
            </button>
            <div className="faq-a"><p style={{ margin: 0 }}>{f.a}</p></div>
          </div>
        ))}
      </div>
    </section>
  );
}

// ─── Contact ────────────────────────────────────────────────────────────────
function Contact() {
  return (
    <section className="contact" id="contact" data-screen-label="Contact">
      <div className="contact-inner">
        <div className="contact-info reveal">
          <div className="eyebrow">Visit · 07</div>
          <h2>Step <em>in</em>. Step out lighter.</h2>
          <p>
            The studio is in Carl Fisher Plaza, in the heart of downtown Montauk. Sessions are by appointment only,
            booked through Square. Walk-ups are welcome to peek in.
          </p>
          <div className="contact-fields">
            <div className="contact-field">
              <h5>Studio</h5>
              <p>37 Carl Fisher Plaza<br />Montauk, NY 11954</p>
            </div>
            <div className="contact-field">
              <h5>Get in touch</h5>
              <p>
                <a href="tel:6315998092">631·599·8092</a><br />
                <a href="mailto:sophiafoglialmt@gmail.com">sophiafoglialmt@gmail.com</a>
              </p>
            </div>
          </div>
          <div className="contact-hours">
            <div><span>Mon – Fri</span><span>10:00 – 7:00</span></div>
            <div><span>Saturday</span><span>10:00 – 5:00</span></div>
            <div><span>Sunday</span><span>By appointment</span></div>
          </div>
          <div style={{ display: "flex", gap: 12, flexWrap: "wrap", marginTop: 8 }}>
            <a className="btn btn-primary" href="https://www.vitaliamassage.com/" target="_blank" rel="noopener">
              Book on Square <span className="btn-arrow">→</span>
            </a>
            <a className="btn" href="mailto:sophiafoglialmt@gmail.com">Send a message</a>
          </div>
        </div>
        <div className="contact-map reveal">
          <MapDrawing />
          <div className="contact-pin">
            <div className="contact-pin-label">37 Carl Fisher Plaza</div>
            <div className="contact-pin-dot" />
          </div>
        </div>
      </div>
    </section>
  );
}

function MapDrawing() {
  // Stylized but locality-accurate map of downtown Montauk centered on
  // Carl Fisher Plaza. Atlantic Ocean to the south, Fort Pond to the north,
  // Montauk Hwy (Rt 27) curving E–W through the middle, downtown street
  // grid named after the actual blocks (S Edgemere, S Elmwood, S Embassy,
  // S Erie, S Etna, S Euclid). The downtown circle/loop is shown as the
  // small roundabout where Carl Fisher Plaza sits.
  //
  // ViewBox 0..400. North = top.
  const stroke = "var(--rule)";
  const ink = "var(--ink-2)";

  // Reusable label style
  const street = {
    fontFamily: "var(--font-body)", fontSize: 7.5, letterSpacing: 1.2,
    fill: ink, opacity: .7, textTransform: "uppercase",
  };
  const water = {
    fontFamily: "var(--font-display)", fontStyle: "italic", fontSize: 13,
    fill: ink, opacity: .55,
  };
  const land = {
    fontFamily: "var(--font-body)", fontSize: 8, letterSpacing: 1.5,
    fill: ink, opacity: .55, textTransform: "uppercase",
  };

  // N–S streets south of the highway (downtown grid)
  const nsStreets = [
    { x:  60, name: "S Edgemere" },
    { x: 115, name: "S Elmwood" },
    { x: 170, name: "S Embassy" },
    { x: 230, name: "S Erie"    },
    { x: 290, name: "S Etna"    },
    { x: 345, name: "S Euclid"  },
  ];
  // E–W cross streets south of the highway
  const ewStreets = [
    { y: 250, name: "Edgemere St" },
    { y: 300, name: "Tuthill Rd"  },
    { y: 350, name: "Surfside Pl" },
  ];

  // Building blocks — soft tinted rects between the grid lines
  const block = (x, y, w, h, op = .5) => (
    <rect x={x} y={y} width={w} height={h} fill="var(--bg-2)" opacity={op} />
  );

  return (
    <svg viewBox="0 0 400 400" preserveAspectRatio="xMidYMid slice" aria-hidden>
      <rect width="400" height="400" fill="var(--bg-card)" />

      {/* ── Fort Pond (north) ─────────────────────────────────── */}
      <path d="M -20 -20 L 420 -20 L 420 60 Q 320 90 220 70 Q 130 50 -20 80 Z"
            fill="var(--bg-2)" opacity=".55" />
      <path d="M -20 80 Q 130 50 220 70 Q 320 90 420 60"
            fill="none" stroke={stroke} strokeWidth="1" />
      <text x="200" y="38" textAnchor="middle" style={water}>Fort Pond</text>

      {/* ── Atlantic Ocean (south) ────────────────────────────── */}
      <path d="M -20 348 Q 80 332 160 354 T 320 366 T 420 354 L 420 420 L -20 420 Z"
            fill="var(--bg-2)" opacity=".7" />
      <path d="M -20 348 Q 80 332 160 354 T 320 366 T 420 354"
            fill="none" stroke={stroke} strokeWidth="1" />
      {/* dune dashes */}
      <path d="M -20 358 Q 80 342 160 364 T 320 376 T 420 364"
            fill="none" stroke={stroke} strokeWidth=".6" strokeDasharray="2 4" opacity=".7" />
      <text x="270" y="395" style={water}>Atlantic Ocean</text>

      {/* ── Streets: residential grid north of hwy ───────────── */}
      {[100,130,160].map((y,i)=>(
        <line key={`nh${i}`} x1="40" x2="380" y1={y} y2={y}
              stroke={stroke} strokeWidth=".6" />
      ))}
      {[80,140,200,260,320].map((x,i)=>(
        <line key={`nv${i}`} x1={x} x2={x} y1="80" y2="180"
              stroke={stroke} strokeWidth=".6" />
      ))}

      {/* ── Streets: downtown grid south of hwy ──────────────── */}
      {nsStreets.map((s, i) => (
        <line key={`ns${i}`} x1={s.x} x2={s.x} y1="200" y2="360"
              stroke={stroke} strokeWidth=".7" />
      ))}
      {ewStreets.map((s, i) => (
        <line key={`ew${i}`} x1="20" x2="380" y1={s.y} y2={s.y}
              stroke={stroke} strokeWidth=".7" />
      ))}

      {/* ── Montauk Highway (Rt 27) — main artery ─────────────── */}
      <path d="M -10 192 Q 110 178 200 188 T 410 200"
            fill="none" stroke="var(--ink)" strokeWidth="3.2" opacity=".55" />
      <path d="M -10 192 Q 110 178 200 188 T 410 200"
            fill="none" stroke="var(--bg-card)" strokeWidth="1.2"
            strokeDasharray="6 8" opacity=".9" />

      {/* ── The Plaza / Carl Fisher Plaza roundabout ──────────── */}
      {/* Real Carl Fisher Plaza is a small triangular plaza off the hwy. */}
      <circle cx="200" cy="188" r="14" fill="var(--bg-card)"
              stroke="var(--ink-2)" strokeWidth="1.2" opacity=".9" />
      <circle cx="200" cy="188" r="6" fill="var(--bg-2)" stroke={stroke} strokeWidth=".6" />

      {/* ── Connectors from hwy down into the grid ────────────── */}
      <line x1="200" y1="202" x2="200" y2="360" stroke={stroke} strokeWidth="1" />
      <line x1="115" y1="195" x2="115" y2="205" stroke={stroke} strokeWidth=".7" />

      {/* ── Labels ────────────────────────────────────────────── */}
      <text x="20" y="184" style={{ ...street, opacity:.85 }}>MONTAUK HWY · RT 27</text>
      {/* N–S street labels — placed at top of each street, rotated 90° */}
      {nsStreets.map((s, i) => (
        <text key={`nsl${i}`} x={s.x + 3} y="232"
              transform={`rotate(-90 ${s.x + 3} 232)`} style={street}>
          {s.name.toUpperCase()}
        </text>
      ))}
      {/* E–W cross street labels */}
      {ewStreets.map((s, i) => (
        <text key={`ewl${i}`} x="24" y={s.y - 4} style={street}>
          {s.name.toUpperCase()}
        </text>
      ))}

      {/* North arrow */}
      <g opacity=".5" transform="translate(370 380)">
        <line x1="0" y1="-14" x2="0" y2="0" stroke={ink} strokeWidth=".8" />
        <path d="M -3 -10 L 0 -16 L 3 -10 Z" fill={ink} />
        <text x="0" y="10" textAnchor="middle"
              style={{ fontFamily: "var(--font-body)", fontSize: 9, fill: ink, letterSpacing: 1 }}>N</text>
      </g>

      {/* District tag */}
      <text x="200" y="148" textAnchor="middle" style={land}>DOWNTOWN MONTAUK</text>
    </svg>
  );
}

// ─── Footer ─────────────────────────────────────────────────────────────────
function Footer() {
  return (
    <footer className="footer" data-screen-label="Footer">
      <div className="footer-inner">
        <div className="footer-top">
          <div className="footer-brand">
            <div className="nav-brand">
              VITALIA
            </div>
            <p>
              Massage therapy and offsite bodywork from a calm studio in downtown Montauk. By appointment, year-round.
            </p>
            <a className="footer-social"
               href="https://www.instagram.com/vitaliamassage_"
               target="_blank" rel="noopener noreferrer"
               aria-label="Vitalia Massage on Instagram">
              <svg viewBox="0 0 24 24" width="20" height="20" aria-hidden="true">
                <rect x="3" y="3" width="18" height="18" rx="5"
                      fill="none" stroke="currentColor" strokeWidth="1.4" />
                <circle cx="12" cy="12" r="4"
                        fill="none" stroke="currentColor" strokeWidth="1.4" />
                <circle cx="17.2" cy="6.8" r="1" fill="currentColor" />
              </svg>
              <span>@vitaliamassage_</span>
            </a>
          </div>
          <div className="footer-col">
            <h6>Visit</h6>
            <ul>
              <li>37 Carl Fisher Plaza</li>
              <li>Montauk, NY 11954</li>
              <li><a href="tel:6315998092">631·599·8092</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <h6>Site</h6>
            <ul>
              <li><a href="#about">About</a></li>
              <li><a href="#services">Services</a></li>
              <li><a href="#modalities">Approach</a></li>
              <li><a href="#faq">FAQ</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <h6>Book</h6>
            <ul>
              <li><a href="https://www.vitaliamassage.com/" target="_blank" rel="noopener">Square Booking ↗</a></li>
              <li><a href="mailto:sophiafoglialmt@gmail.com">Email Sophia</a></li>
              <li><a href="#offsite">Offsite Inquiry</a></li>
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          <span>© 2026 Vitalia Massage Therapy · NY LMT #036412</span>
          <span className="footer-tag">Built with care in Montauk.</span>
        </div>
      </div>
    </footer>
  );
}

// Expose section components to the App scope
Object.assign(window, {
  About, Services, Modalities, Testimonials, Offsite, FAQSection, Contact, Footer,
  Marquee, Photo, Logo, NavMark, AnimatedHeroLogo,
});