// Direction A, "Quiet Room"
// Editorial minimal. Off-white page, warm ink, one clay accent.
// EB Garamond (display) + Work Sans (body).

const A = {
  page: 'oklch(97% 0.008 75)',
  paper: 'oklch(98.5% 0.005 80)',
  ink: 'oklch(22% 0.012 55)',
  inkSoft: 'oklch(42% 0.012 55)',
  inkFaint: 'oklch(62% 0.015 60)',
  line: 'oklch(88% 0.012 70)',
  accent: 'oklch(58% 0.08 40)', // dusty clay
  accentInk: 'oklch(30% 0.05 40)',
  serif: "'EB Garamond', 'Iowan Old Style', Georgia, serif",
  sans: "'Work Sans', system-ui, sans-serif",
  mono: "'JetBrains Mono', ui-monospace, monospace",
};

function SiteA() {
  const [open, setOpen] = React.useState(null);
  const openBooking = () => window.open(CONTENT.bookingUrl, '_blank', 'noopener,noreferrer');
  return (
    <div style={{
      background: A.page, color: A.ink,
      fontFamily: A.sans, fontWeight: 400, fontSize: 16, lineHeight: 1.55,
      minHeight: '100vh',
      overflowX: 'hidden',
    }}>
      <style>{`
        .a-eyebrow { font-family: ${A.mono}; font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: ${A.inkFaint}; }
        .a-rule { height: 1px; background: ${A.line}; border: 0; margin: 0; }
        .a-link { color: ${A.ink}; text-decoration: none; border-bottom: 1px solid ${A.line}; padding-bottom: 2px; transition: border-color .2s; }
        .a-link:hover { border-color: ${A.accent}; }
        .a-btn {
          display: inline-flex; align-items: center; gap: 10px;
          background: ${A.ink}; color: ${A.page};
          padding: 14px 22px; border-radius: 0; border: 0;
          font: 500 13px/1 ${A.sans}; letter-spacing: 0.06em; text-transform: uppercase;
          cursor: pointer; transition: background .2s;
        }
        .a-btn:hover { background: ${A.accentInk}; }
        .a-btn.ghost { background: transparent; color: ${A.ink}; border: 1px solid ${A.ink}; }
        .a-btn.ghost:hover { background: ${A.ink}; color: ${A.page}; }

        .a-nav {
          position: fixed; top: 0; left: 0; right: 0; z-index: 100;
          background: oklch(97% 0.008 75 / 0.92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
          border-bottom: 1px solid ${A.line};
          transition: background .25s ease, border-color .25s ease, color .25s ease;
        }
        .a-nav.on-dark {
          background: oklch(22% 0.012 55 / 0.88);
          border-bottom-color: oklch(32% 0.02 55);
        }
        .a-nav.on-dark .a-brand { color: oklch(92% 0.012 70); }
        .a-nav.on-dark .a-navlinks { color: oklch(82% 0.012 70); }
        .a-nav.on-dark .a-navlinks a:hover { color: ${A.page}; }
        .a-nav.on-dark .a-btn.ghost { border-color: oklch(82% 0.012 70); color: oklch(92% 0.012 70); }
        .a-nav.on-dark .a-btn.ghost:hover { background: ${A.page}; color: ${A.ink}; }
        .a-nav-spacer { height: 62px; }
        @media (max-width: 820px) { .a-nav-spacer { height: 54px; } }
        .a-nav-inner {
          max-width: 1280px; margin: 0 auto;
          display: flex; align-items: center; justify-content: space-between;
          padding: 18px 48px;
        }
        .a-brand { font-family: ${A.serif}; font-size: 22px; font-style: italic; font-weight: 400; letter-spacing: -0.01em; }
        .a-navlinks { display: flex; gap: 36px; font-size: 13.5px; color: ${A.inkSoft}; }
        .a-navlinks a { color: inherit; text-decoration: none; transition: color .2s; cursor: pointer; }
        .a-navlinks a:hover { color: ${A.ink}; }

        .a-sec-pad { padding: 120px 48px; }
        .a-sec-pad-sm { padding: 84px 48px; }
        .a-sec-pad-hero { padding: 96px 48px 120px; }
        .a-sec-pad-foot { padding: 96px 48px 48px; }

        .a-hero-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 80px; align-items: end; }
        .a-hero-h1 { font-size: clamp(44px, 6.2vw, 88px); }

        .a-principles-grid { display: grid; grid-template-columns: 1fr 2fr; gap: 64px; }
        .a-principles-items { display: grid; grid-template-columns: 1fr 1fr; gap: 44px 56px; }
        .a-principles-h2 { font-size: 38px; }

        .a-about-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 80px; align-items: start; }
        .a-about-sticky { position: sticky; top: 100px; }
        .a-about-h2 { font-size: 52px; }
        .a-about-cred { display: flex; gap: 48px; }

        .a-arc-head { display: grid; grid-template-columns: 1fr 2fr; gap: 64px; align-items: end; margin-bottom: 64px; }
        .a-arc-h2 { font-size: 52px; }
        .a-arc-items { display: grid; grid-template-columns: repeat(4, 1fr); }

        .a-offerings-items { display: grid; grid-template-columns: repeat(3, 1fr); }

        .a-trust-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; }

        .a-testimonial-q { font-size: clamp(28px, 3.4vw, 40px); }

        .a-faq-grid { display: grid; grid-template-columns: 1fr 2fr; gap: 72px; }
        .a-faq-h2 { font-size: 46px; }

        .a-sci-head { display: grid; grid-template-columns: 1fr 1.3fr; gap: 72px; align-items: end; margin-bottom: 72px; }
        .a-sci-h2 { font-size: 52px; }
        .a-sci-cats { display: grid; grid-template-columns: 1fr; gap: 0; border-top: 1px solid oklch(32% 0.02 55); }
        .a-sci-cat { display: grid; grid-template-columns: 1fr 2fr; gap: 56px; padding: 56px 0; border-bottom: 1px solid oklch(32% 0.02 55); }
        .a-sci-items { display: grid; grid-template-columns: 1fr 1fr; gap: 36px 48px; }
        .a-sci-vs { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; }
        .a-faq-q { font-size: 22px; }

        .a-footer-cta { font-size: 52px; }

        @media (max-width: 820px) {
          .a-nav-inner { padding: 14px 20px; }
          .a-navlinks { display: none; }

          .a-sec-pad { padding: 72px 22px; }
          .a-sec-pad-sm { padding: 60px 22px; }
          .a-sec-pad-hero { padding: 56px 22px 72px; }
          .a-sec-pad-foot { padding: 64px 22px 36px; }

          .a-hero-grid { grid-template-columns: 1fr; gap: 36px; }
          .a-hero-grid > div:first-child { order: 2; }
          .a-hero-grid > div:last-child { order: 1; max-width: 320px; }
          .a-principles-grid { grid-template-columns: 1fr; gap: 36px; }
          .a-principles-items { grid-template-columns: 1fr; gap: 28px; }
          .a-principles-h2 { font-size: 30px; }

          .a-about-grid { grid-template-columns: 1fr; gap: 48px; }
          .a-about-sticky { position: static; }
          .a-about-h2 { font-size: 38px; }
          .a-about-cred { gap: 28px; flex-wrap: wrap; }

          .a-arc-head { grid-template-columns: 1fr; gap: 20px; margin-bottom: 36px; align-items: start; }
          .a-arc-h2 { font-size: 38px; }
          .a-arc-items { grid-template-columns: 1fr; }
          .a-arc-item { padding: 28px 0 !important; padding-left: 0 !important; border-right: none !important; border-top: 1px solid oklch(32% 0.015 55); }
          .a-arc-item:first-child { border-top: none; }

          .a-offerings-items { grid-template-columns: 1fr; }
          .a-offering-item { padding: 28px 0 !important; padding-left: 0 !important; border-right: none !important; min-height: 0 !important; }

          .a-trust-grid { grid-template-columns: 1fr; gap: 24px; }

          .a-faq-grid { grid-template-columns: 1fr; gap: 32px; }
          .a-faq-h2 { font-size: 32px; }
          .a-faq-q { font-size: 18px; }

          .a-sci-head { grid-template-columns: 1fr; gap: 20px; margin-bottom: 40px; align-items: start; }
          .a-sci-h2 { font-size: 36px; }
          .a-sci-cat { grid-template-columns: 1fr; gap: 24px; padding: 36px 0; }
          .a-sci-items { grid-template-columns: 1fr; gap: 26px; }
          .a-sci-vs { grid-template-columns: 1fr; gap: 32px; }

          .a-footer-cta { font-size: 36px; }
        }
      `}</style>

      <NavA onBook={openBooking} />
      <div className="a-nav-spacer" />
      <HeroA onBook={openBooking} />
      <ScienceA />
      <PrinciplesA />
      <AboutA />
      <ArcA />
      <OfferingsA onBook={openBooking} />
      <TrustA />
      <TestimonialsA />
      <FaqA open={open} setOpen={setOpen} />
      <FooterA onBook={openBooking} />
    </div>
  );
}

function NavA({ onBook }) {
  const [onDark, setOnDark] = React.useState(false);
  React.useEffect(() => {
    const check = () => {
      const sections = document.querySelectorAll('[data-nav-theme="dark"]');
      const probeY = 30; // just below top
      let hit = false;
      sections.forEach((s) => {
        const r = s.getBoundingClientRect();
        if (r.top <= probeY && r.bottom >= probeY) hit = true;
      });
      setOnDark(hit);
    };
    check();
    window.addEventListener('scroll', check, { passive: true });
    window.addEventListener('resize', check);
    return () => {
      window.removeEventListener('scroll', check);
      window.removeEventListener('resize', check);
    };
  }, []);
  const smoothScroll = (id) => (e) => {
    const el = document.getElementById(id);
    if (!el) return; // allow default hash nav if JS fails
    e.preventDefault();
    const top = el.getBoundingClientRect().top + window.scrollY - 60;
    window.scrollTo({ top, behavior: 'smooth' });
    history.replaceState(null, '', '#' + id);
  };
  return (
    <div className={`a-nav${onDark ? ' on-dark' : ''}`}>
      <div className="a-nav-inner">
        <div className="a-brand">Justina Lydia</div>
        <div className="a-navlinks">
          <a href="#science" onClick={smoothScroll('science')}>What it does</a>
          <a href="#about" onClick={smoothScroll('about')}>About</a>
          <a href="#arc" onClick={smoothScroll('arc')}>The session</a>
          <a href="#offerings" onClick={smoothScroll('offerings')}>Offerings</a>
          <a href="#faq" onClick={smoothScroll('faq')}>FAQ</a>
        </div>
        <button className="a-btn ghost" onClick={onBook} style={{ padding: '10px 16px', fontSize: 11.5 }}>
          Book consult
        </button>
      </div>
    </div>
  );
}

function HeroA({ onBook }) {
  return (
    <section className="a-sec-pad-hero" style={{ maxWidth: 1280, margin: '0 auto', position: 'relative' }}>
      <div className="a-hero-grid">
        <div>
          <div className="a-eyebrow" style={{ marginBottom: 40 }}>Cuddle therapy · San Francisco, CA</div>
          <h1 className="a-hero-h1" style={{
            fontFamily: A.serif, fontWeight: 400,
            lineHeight: 1.02,
            letterSpacing: '-0.02em', margin: 0, color: A.ink,
          }}>
            An hour where<br/>
            your nervous system <span style={{ fontStyle: 'italic', color: A.accentInk }}>can<br/>finally rest</span>.
          </h1>
          <p style={{
            marginTop: 40, maxWidth: 460, fontSize: 17.5, lineHeight: 1.6,
            color: A.inkSoft, fontWeight: 300,
          }}>
            Safe, platonic, fully-clothed touch therapy for people carrying too much stress in their body. A quiet room, a weighted blanket of attention, and permission to exhale.
          </p>
          <div style={{ display: 'flex', gap: 14, marginTop: 44, alignItems: 'center' }}>
            <button className="a-btn" onClick={onBook}>Book a 15-min intro call</button>
          </div>
        </div>
        <div style={{ position: 'relative' }}>
          <Photo src={PHOTOS.portrait} ratio="4 / 5" position="center 20%" label="Justina Lydia" />
        </div>
      </div>
    </section>
  );
}

function ScienceA() {
  const categories = [
    {
      eyebrow: '01',
      title: 'Mental & emotional',
      lede: 'Platonic touch calms the part of the brain that is always scanning for threat, and wakes up the circuits that let you feel connected.',
      items: [
        {
          t: 'Less stress & anxiety',
          d: 'Physical touch triggers oxytocin, the bonding hormone, which lowers cortisol and quiets the nervous system.',
        },
        {
          t: 'Combats loneliness',
          d: 'A safe space for people experiencing touch hunger or isolation to feel connected and cared for.',
        },
        {
          t: 'Better mood',
          d: 'Cuddling stimulates serotonin and dopamine production, easing symptoms of depression and supporting overall happiness.',
        },
        {
          t: 'Emotional resilience',
          d: 'Regular sessions help process trauma, improve self-esteem, and build comfort around setting and voicing boundaries.',
        },
      ],
    },
    {
      eyebrow: '02',
      title: 'Physical health',
      lede: 'Once the body stops bracing, the systems that maintain it actually get to do their job. Heart, immune, pain, and sleep all respond.',
      items: [
        {
          t: 'Heart health',
          d: 'Oxytocin release helps lower blood pressure and heart rate, reducing long-term risk of heart disease.',
        },
        {
          t: 'Pain relief',
          d: 'Oxytocin can act as a natural analgesic, dampening pain signals and inflammation for conditions like chronic pain or arthritis.',
        },
        {
          t: 'Better sleep',
          d: 'By calming the fight-or-flight response, cuddle therapy helps you fall asleep faster and rest more deeply.',
        },
        {
          t: 'Immune support',
          d: 'Research suggests frequent hugging may protect against common infections and boost overall immune response.',
        },
      ],
    },
    {
      eyebrow: '03',
      title: 'Relationship & social',
      lede: 'The skills you practice here carry out the door: how you listen, how you hold a boundary, how close you let people stand.',
      items: [
        {
          t: 'Enhanced communication',
          d: 'Non-verbal touch can convey empathy and understanding more effectively than words in some contexts.',
        },
        {
          t: 'Social skill development',
          d: 'For those with social anxiety, the structured environment of a session allows for practicing platonic intimacy without social pressure.',
        },
      ],
    },
  ];

  return (
    <section data-sec="science" id="science" data-nav-theme="dark" style={{ background: A.ink, color: A.page }}>
      <div className="a-sec-pad" style={{ maxWidth: 1280, margin: '0 auto' }}>

        <div className="a-sci-head">
          <div>
            <div className="a-eyebrow" style={{ color: 'oklch(72% 0.02 70)' }}>What it does</div>
            <h2 className="a-sci-h2" style={{ fontFamily: A.serif, fontWeight: 400, lineHeight: 1.05, letterSpacing: '-0.02em', margin: '10px 0 0' }}>
              Safety, <span style={{ fontStyle: 'italic' }}>measured in<br/>your body.</span>
            </h2>
          </div>
          <p style={{ fontSize: 18, lineHeight: 1.65, color: 'oklch(82% 0.012 70)', fontWeight: 300, margin: 0, maxWidth: 540 }}>
            Safe, platonic touch is one of the oldest ways humans tell each other, "you're okay now." When your body hears that, real things change. Here is what happens, inside and out.
          </p>
        </div>

        <div className="a-sci-cats">
          {categories.map((c, ci) => (
            <div key={ci} className="a-sci-cat">
              <div>
                <div style={{ fontFamily: A.mono, fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'oklch(68% 0.05 50)', marginBottom: 14 }}>
                  {c.eyebrow}
                </div>
                <h3 style={{ fontFamily: A.serif, fontWeight: 400, fontSize: 36, lineHeight: 1.1, letterSpacing: '-0.015em', margin: '0 0 18px', color: A.page }}>
                  {c.title}
                </h3>
                <p style={{ fontSize: 15.5, lineHeight: 1.6, color: 'oklch(78% 0.012 70)', fontWeight: 300, margin: 0, maxWidth: 360 }}>
                  {c.lede}
                </p>
              </div>
              <div className="a-sci-items">
                {c.items.map((it, ii) => (
                  <div key={ii}>
                    <h4 style={{ fontFamily: A.serif, fontStyle: 'italic', fontWeight: 400, fontSize: 22, margin: '0 0 10px', color: A.page, letterSpacing: '-0.005em' }}>
                      {it.t}
                    </h4>
                    <p style={{ fontSize: 15, lineHeight: 1.65, color: 'oklch(82% 0.012 70)', fontWeight: 300, margin: 0 }}>
                      {it.d}
                    </p>
                  </div>
                ))}
              </div>
            </div>
          ))}
        </div>

        <div style={{
          marginTop: 80,
          padding: '48px 0 0',
        }}>
          <div className="a-sci-vs">
            <div>
              <div className="a-eyebrow" style={{ color: 'oklch(72% 0.02 70)', marginBottom: 18 }}>It is</div>
              <ul style={{ listStyle: 'none', padding: 0, margin: 0, fontSize: 16, lineHeight: 1.8, color: 'oklch(88% 0.012 70)', fontWeight: 300 }}>
                <li>A nervous-system practice, not a cure.</li>
                <li>Fully clothed, platonic, and professional.</li>
                <li>For loneliness, burnout, grief, touch-starvation, recovery.</li>
                <li>Complementary to therapy, somatic work, and medical care.</li>
              </ul>
            </div>
            <div>
              <div className="a-eyebrow" style={{ color: 'oklch(72% 0.02 70)', marginBottom: 18 }}>It is not</div>
              <ul style={{ listStyle: 'none', padding: 0, margin: 0, fontSize: 16, lineHeight: 1.8, color: 'oklch(88% 0.012 70)', fontWeight: 300 }}>
                <li>Sexual, romantic, or a workaround for either.</li>
                <li>A substitute for licensed mental-health treatment.</li>
                <li>Appropriate if you are in acute crisis. Please call 988 first.</li>
                <li>Something you need to earn or be "good enough" for.</li>
              </ul>
            </div>
          </div>
          <p style={{ marginTop: 48, fontSize: 17, lineHeight: 1.55, color: 'oklch(88% 0.012 70)', fontWeight: 300, maxWidth: 780 }}>
            Want to go deeper? <a
              href="https://www.calm.com/blog/cuddle-therapy"
              target="_blank"
              rel="noopener noreferrer"
              style={{
                fontFamily: A.serif, fontStyle: 'italic', fontSize: 19,
                color: A.page, textDecoration: 'none',
                borderBottom: '1px solid oklch(58% 0.08 40)',
                paddingBottom: 2,
                transition: 'border-color .2s, color .2s',
              }}
              onMouseEnter={(e) => { e.currentTarget.style.borderColor = A.page; }}
              onMouseLeave={(e) => { e.currentTarget.style.borderColor = 'oklch(58% 0.08 40)'; }}
            >Read a primer on cuddle therapy &rarr;</a>
          </p>
          <p style={{ marginTop: 28, fontSize: 12.5, lineHeight: 1.6, color: 'oklch(62% 0.015 60)', fontFamily: A.mono, letterSpacing: '0.02em', maxWidth: 780 }}>
            Benefits reflect findings from peer-reviewed research on supportive human touch. Individual response varies.
          </p>
        </div>

      </div>
    </section>
  );
}

function PrinciplesA() {
  const items = [
    { n: '01', t: 'Platonic', d: 'Fully clothed. No nudity, no sexual touch, no romantic element, ever. This is professional therapeutic touch.' },
    { n: '02', t: 'Consent-led', d: 'Every moment is opt-in. You can stop or adjust at any time.' },
    { n: '03', t: 'Honest', d: 'If you\'re partnered, your partner needs to know. I won\'t be part of something kept secret.' },
    { n: '04', t: 'Sober', d: 'No substances before or during a session. Clear consent asks for a clear head.' },
  ];
  return (
    <section style={{ background: A.paper, borderTop: `1px solid ${A.line}`, borderBottom: `1px solid ${A.line}` }}>
      <div className="a-sec-pad-sm a-principles-grid" style={{ maxWidth: 1280, margin: '0 auto' }}>
        <div>
          <div className="a-eyebrow">The frame</div>
          <h2 className="a-principles-h2" style={{ fontFamily: A.serif, fontWeight: 400, lineHeight: 1.1, margin: '10px 0 0', letterSpacing: '-0.015em' }}>
            Four commitments that make the space safe.
          </h2>
        </div>
        <div className="a-principles-items">
          {items.map((it, i) => (
            <div key={i} style={{ paddingTop: 22, borderTop: `1px solid ${A.line}` }}>
              <div className="a-eyebrow" style={{ color: A.accentInk, marginBottom: 14 }}>{it.n}</div>
              <div style={{ fontFamily: A.serif, fontSize: 28, fontStyle: 'italic', marginBottom: 12, color: A.ink, letterSpacing: '-0.01em' }}>{it.t}</div>
              <div style={{ fontSize: 15.5, lineHeight: 1.6, color: A.inkSoft }}>{it.d}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function AboutA() {
  return (
    <section data-sec="about" id="about" className="a-sec-pad a-about-grid" style={{ maxWidth: 1280, margin: '0 auto' }}>
      <div className="a-about-sticky">
        <Photo src={PHOTOS.yellow} ratio="3 / 4" position="center 30%" label="Justina, candid" />
        <div style={{ marginTop: 16, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
          <Photo src={PHOTOS.hands} ratio="1 / 1" position="center 40%" />
          <Photo src={PHOTOS.close} ratio="1 / 1" position="center 40%" />
        </div>
      </div>
      <div>
        <div className="a-eyebrow">About</div>
        <h2 className="a-about-h2" style={{ fontFamily: A.serif, fontWeight: 400, lineHeight: 1.05, letterSpacing: '-0.02em', margin: '10px 0 32px' }}>
          Hi, I'm Justina.
        </h2>
        {CONTENT.about.map((p, i) => (
          <p key={i} style={{ fontSize: 18, lineHeight: 1.65, color: A.inkSoft, margin: '0 0 22px', maxWidth: 540 }}>{p}</p>
        ))}
        <div className="a-about-cred" style={{ marginTop: 40, padding: '24px 0', borderTop: `1px solid ${A.line}`, borderBottom: `1px solid ${A.line}` }}>
          <div>
            <div className="a-eyebrow">Training</div>
            <div style={{ fontFamily: A.serif, fontSize: 20, marginTop: 4 }}>Cuddlist Certified</div>
          </div>
          <div>
            <div className="a-eyebrow">Approach</div>
            <div style={{ fontFamily: A.serif, fontSize: 20, marginTop: 4 }}>Trauma-informed</div>
          </div>
        </div>
      </div>
    </section>
  );
}

function ArcA() {
  return (
    <section data-sec="arc" id="arc" style={{ background: A.ink, color: A.page }}>
      <div className="a-sec-pad" style={{ maxWidth: 1280, margin: '0 auto' }}>
        <div className="a-arc-head">
          <div>
            <div className="a-eyebrow" style={{ color: 'oklch(72% 0.02 70)' }}>The session</div>
            <h2 className="a-arc-h2" style={{ fontFamily: A.serif, fontWeight: 400, lineHeight: 1.05, letterSpacing: '-0.02em', margin: '10px 0 0' }}>
              Four slow movements.
            </h2>
          </div>
          <p style={{ fontSize: 17.5, lineHeight: 1.6, color: 'oklch(80% 0.015 70)', maxWidth: 520, margin: 0 }}>
            Every session follows the same quiet shape, a frame that lets you stop managing and start arriving.
          </p>
        </div>

        <div className="a-arc-items" style={{ borderTop: `1px solid oklch(32% 0.015 55)`, marginTop: 24 }}>
          {CONTENT.arc.map((s, i) => (
            <div key={i} className="a-arc-item" style={{
              padding: '36px 28px 36px 0',
              borderRight: i < 3 ? `1px solid oklch(32% 0.015 55)` : 'none',
              paddingLeft: i === 0 ? 0 : 28,
            }}>
              <div style={{ fontFamily: A.mono, fontSize: 12, color: 'oklch(68% 0.04 40)', marginBottom: 24, letterSpacing: '0.1em' }}>{s.n}</div>
              <div style={{ fontFamily: A.serif, fontStyle: 'italic', fontSize: 26, marginBottom: 14, letterSpacing: '-0.01em' }}>{s.t}</div>
              <div style={{ fontSize: 14.5, lineHeight: 1.6, color: 'oklch(78% 0.015 70)' }}>{s.d}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function OfferingsA({ onBook }) {
  return (
    <section data-sec="offerings" id="offerings" className="a-sec-pad" style={{ maxWidth: 1280, margin: '0 auto' }}>
      <div className="a-offerings-items" style={{ borderTop: `1px solid ${A.line}` }}>
        {CONTENT.offerings.map((o, i) => (
          <div key={i} className="a-offering-item" style={{
            padding: '36px 28px 36px 0',
            borderBottom: `1px solid ${A.line}`,
            borderRight: i < 2 ? `1px solid ${A.line}` : 'none',
            paddingLeft: i === 0 ? 0 : 28,
            display: 'flex', flexDirection: 'column', gap: 18, minHeight: 320,
          }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
              <div className="a-eyebrow">{o.len}</div>
              <div style={{ fontFamily: A.serif, fontSize: 28, color: A.accentInk }}>{o.price}</div>
            </div>
            <div style={{ fontFamily: A.serif, fontSize: 30, lineHeight: 1.1, letterSpacing: '-0.01em' }}>{o.name}</div>
            <div style={{ fontSize: 15, lineHeight: 1.55, color: A.inkSoft, flexGrow: 1 }}>{o.note}</div>
            <button className="a-btn ghost" onClick={onBook} style={{ alignSelf: 'flex-start' }}>Inquire</button>
          </div>
        ))}
      </div>
    </section>
  );
}

function TrustA() {
  return (
    <section style={{ background: A.paper, borderTop: `1px solid ${A.line}`, borderBottom: `1px solid ${A.line}` }}>
      <div className="a-sec-pad-sm a-trust-grid" style={{ maxWidth: 1280, margin: '0 auto' }}>
        {CONTENT.trust.map((t, i) => (
          <div key={i} style={{ display: 'flex', gap: 20, alignItems: 'flex-start' }}>
            <div style={{
              width: 36, height: 36, borderRadius: '50%',
              background: A.accent, color: A.page,
              display: 'grid', placeItems: 'center',
              fontFamily: A.serif, fontSize: 16, fontStyle: 'italic', flexShrink: 0,
            }}>{i + 1}</div>
            <div>
              <div style={{ fontFamily: A.serif, fontSize: 22, marginBottom: 8, letterSpacing: '-0.01em' }}>{t.h}</div>
              <div style={{ fontSize: 14.5, lineHeight: 1.55, color: A.inkSoft }}>{t.d}</div>
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

function TestimonialsA() {
  const [i, setI] = React.useState(0);
  const t = CONTENT.testimonials[i];
  return (
    <section className="a-sec-pad" style={{ maxWidth: 960, margin: '0 auto', textAlign: 'center' }}>
      <div className="a-eyebrow" style={{ marginBottom: 36 }}>From clients</div>
      <blockquote className="a-testimonial-q" style={{
        fontFamily: A.serif, fontStyle: 'italic', fontWeight: 400,
        lineHeight: 1.25, letterSpacing: '-0.01em',
        margin: 0, color: A.ink,
      }}>
        &ldquo;{t.q}&rdquo;
      </blockquote>
      <div style={{ marginTop: 28, fontSize: 13.5, color: A.inkFaint, fontFamily: A.mono, letterSpacing: '0.08em', textTransform: 'uppercase' }}>
       , {t.by}
      </div>
      <div style={{ marginTop: 40, display: 'flex', gap: 10, justifyContent: 'center' }}>
        {CONTENT.testimonials.map((_, k) => (
          <button key={k} onClick={() => setI(k)} aria-label={`Testimonial ${k + 1}`} style={{
            width: 24, height: 3, border: 0, padding: 0, cursor: 'pointer',
            background: k === i ? A.ink : A.line, transition: 'background .2s',
          }}/>
        ))}
      </div>
    </section>
  );
}

function FaqA({ open, setOpen }) {
  return (
    <section data-sec="faq" id="faq" style={{ borderTop: `1px solid ${A.line}` }}>
      <div className="a-sec-pad a-faq-grid" style={{ maxWidth: 1080, margin: '0 auto' }}>
        <div>
          <div className="a-eyebrow">FAQ</div>
          <h2 className="a-faq-h2" style={{ fontFamily: A.serif, fontWeight: 400, lineHeight: 1.05, letterSpacing: '-0.02em', margin: '10px 0 0' }}>
            The things most people want to ask.
          </h2>
        </div>
        <div>
          {CONTENT.faqs.map((f, i) => {
            const isOpen = open === i;
            return (
              <div key={i} style={{ borderTop: i === 0 ? `1px solid ${A.line}` : 'none', borderBottom: `1px solid ${A.line}` }}>
                <button onClick={() => setOpen(isOpen ? null : i)} className="a-faq-q" style={{
                  width: '100%', background: 'transparent', border: 0, cursor: 'pointer',
                  padding: '22px 0', textAlign: 'left', display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 20,
                  fontFamily: A.serif, color: A.ink, letterSpacing: '-0.005em',
                }}>
                  <span>{f.q}</span>
                  <span style={{
                    fontFamily: A.mono, fontSize: 12, color: A.inkFaint,
                    transform: isOpen ? 'rotate(45deg)' : 'none', transition: 'transform .2s',
                  }}>+</span>
                </button>
                <div style={{
                  maxHeight: isOpen ? 400 : 0, overflow: 'hidden', transition: 'max-height .35s ease, padding .25s',
                  paddingBottom: isOpen ? 24 : 0,
                }}>
                  <div style={{ fontSize: 16, lineHeight: 1.65, color: A.inkSoft, maxWidth: 640 }}>{f.a}</div>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

function FooterA({ onBook }) {
  return (
    <footer className="a-sec-pad-foot" style={{ background: A.ink, color: A.page }}>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 48, paddingBottom: 64, borderBottom: '1px solid #3a302a' }}>
          <div style={{ flex: '2 1 420px', minWidth: 280 }}>
            <div className="a-footer-cta" style={{ fontFamily: A.serif, fontStyle: 'italic', lineHeight: 1.05, letterSpacing: '-0.02em' }}>
              Start with a<br/>fifteen-minute call.
            </div>
            <div style={{ marginTop: 28, color: '#c4b8a8', fontSize: 16, maxWidth: 420, lineHeight: 1.6 }}>
              We'll talk through what you're looking for, answer your questions, and see if it's a good fit.
            </div>
            <button className="a-btn" onClick={onBook} style={{ marginTop: 28, background: A.page, color: A.ink }}>
              Book consult →
            </button>
          </div>
          <div style={{ flex: '1 1 200px', minWidth: 180 }}>
            <div className="a-eyebrow" style={{ color: '#b2a595' }}>Contact</div>
            <div style={{ marginTop: 14, fontFamily: A.serif, fontSize: 18, lineHeight: 1.7 }}>
              {CONTENT.contact.email}<br/>
              {CONTENT.contact.location}<br/>
              {CONTENT.contact.hours}
            </div>
          </div>
          <div style={{ flex: '1 1 200px', minWidth: 180 }}>
            <div className="a-eyebrow" style={{ color: '#b2a595' }}>Elsewhere</div>
            <div style={{ marginTop: 14, fontFamily: A.serif, fontSize: 18, lineHeight: 1.8 }}>
              <div>Cuddlist directory</div>
            </div>
          </div>
        </div>
        <div style={{ paddingTop: 28, display: 'flex', flexWrap: 'wrap', gap: 12, justifyContent: 'space-between', fontSize: 12, color: '#9c8f7f', fontFamily: A.mono, letterSpacing: '0.06em', textTransform: 'uppercase' }}>
          <div>© 2026 Justina Lydia · Cuddle Therapy</div>
          <div>Rest is a practice.</div>
        </div>
      </div>
    </footer>
  );
}

function ConsultModalA({ onClose }) {
  const [step, setStep] = React.useState(0);
  const [form, setForm] = React.useState({ name: '', email: '', when: '', partnered: '', agree: false });
  const submit = () => setStep(2);

  return (
    <div onClick={onClose} style={{
      position: 'fixed', inset: 0, zIndex: 200,
      background: 'oklch(15% 0.01 50 / 0.55)', backdropFilter: 'blur(4px)',
      display: 'grid', placeItems: 'center', padding: 20,
    }}>
      <div onClick={(e) => e.stopPropagation()} style={{
        background: A.page, width: 'min(560px, 100%)', padding: 40,
        border: `1px solid ${A.line}`, position: 'relative',
      }}>
        <button onClick={onClose} style={{
          position: 'absolute', top: 14, right: 14, background: 'transparent', border: 0,
          fontSize: 20, cursor: 'pointer', color: A.inkSoft,
        }}>×</button>
        <div className="a-eyebrow" style={{ color: A.accentInk }}>15-min consult · free</div>

        {step === 0 && (
          <>
            <h3 style={{ fontFamily: A.serif, fontSize: 34, lineHeight: 1.1, letterSpacing: '-0.02em', margin: '8px 0 24px' }}>
              Tell me a little about you.
            </h3>
            <div style={{ display: 'grid', gap: 14 }}>
              <LabeledA label="Your name">
                <input value={form.name} onChange={(e) => setForm({ ...form, name: e.target.value })}
                  style={inputA} placeholder="First name is fine" />
              </LabeledA>
              <LabeledA label="Email">
                <input type="email" value={form.email} onChange={(e) => setForm({ ...form, email: e.target.value })}
                  style={inputA} placeholder="you@example.com" />
              </LabeledA>
              <LabeledA label="A time that works">
                <input value={form.when} onChange={(e) => setForm({ ...form, when: e.target.value })}
                  style={inputA} placeholder="e.g. Tuesday afternoons" />
              </LabeledA>
            </div>
            <button className="a-btn" onClick={() => setStep(1)}
              disabled={!form.name || !form.email}
              style={{ marginTop: 24, opacity: (!form.name || !form.email) ? 0.35 : 1 }}>
              Continue →
            </button>
          </>
        )}

        {step === 1 && (
          <>
            <h3 style={{ fontFamily: A.serif, fontSize: 32, lineHeight: 1.1, letterSpacing: '-0.02em', margin: '8px 0 18px' }}>
              A couple of gentle ground rules.
            </h3>
            <p style={{ color: A.inkSoft, fontSize: 15, lineHeight: 1.6, marginBottom: 18 }}>
              Just so we're on the same page before we talk:
            </p>
            <div style={{ display: 'grid', gap: 10, fontSize: 14.5, lineHeight: 1.55, color: A.inkSoft, background: A.paper, padding: 18, border: `1px solid ${A.line}` }}>
              <div>· Sessions are fully platonic and fully clothed.</div>
              <div>· If you're partnered, your partner needs to know you're coming.</div>
              <div>· No substances before or during a session.</div>
              <div>· You can stop or adjust anything at any time.</div>
            </div>
            <label style={{ display: 'flex', gap: 10, alignItems: 'flex-start', marginTop: 18, fontSize: 14, color: A.ink, cursor: 'pointer' }}>
              <input type="checkbox" checked={form.agree} onChange={(e) => setForm({ ...form, agree: e.target.checked })} style={{ marginTop: 3 }} />
              I've read and understand the four commitments above.
            </label>
            <div style={{ display: 'flex', gap: 10, marginTop: 22 }}>
              <button className="a-btn ghost" onClick={() => setStep(0)}>← Back</button>
              <button className="a-btn" onClick={submit} disabled={!form.agree} style={{ opacity: form.agree ? 1 : 0.35 }}>
                Request consult
              </button>
            </div>
          </>
        )}

        {step === 2 && (
          <>
            <h3 style={{ fontFamily: A.serif, fontSize: 34, lineHeight: 1.1, letterSpacing: '-0.02em', margin: '8px 0 20px' }}>
              Thank you, {form.name || 'friend'}.
            </h3>
            <p style={{ color: A.inkSoft, fontSize: 16, lineHeight: 1.65, margin: 0 }}>
              I'll reach out within one business day to find a time that works. In the meantime, take a slow breath, drop your shoulders, and let this be one less thing to manage.
            </p>
            <button className="a-btn" onClick={onClose} style={{ marginTop: 28 }}>Close</button>
          </>
        )}
      </div>
    </div>
  );
}

function LabeledA({ label, children, style }) {
  return (
    <label style={{ display: 'block', ...style }}>
      <div className="a-eyebrow" style={{ marginBottom: 6 }}>{label}</div>
      {children}
    </label>
  );
}
const inputA = {
  width: '100%', padding: '11px 12px', border: `1px solid ${A.line}`,
  background: A.paper, font: `15px/1.4 'Work Sans', system-ui`, color: A.ink, outline: 'none',
  borderRadius: 0,
};

Object.assign(window, { SiteA });