/* ActiveFit360 marketing — Home page */
const NS_home = window.Activefit360DesignSystem_d87766;

/* ---- shared section heading (exposed for other pages) ---- */
function SectionHead({ eyebrow, title, sub, center, action, onAction }) {
  const { Button } = NS_home;
  return (
    <div style={{ display: 'flex', flexWrap: 'wrap', gap: 20, alignItems: 'flex-end',
      justifyContent: center ? 'center' : 'space-between', textAlign: center ? 'center' : 'left', marginBottom: 'var(--space-12)' }}>
      <div style={{ maxWidth: '54ch', marginInline: center ? 'auto' : 0 }}>
        {eyebrow && <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, textTransform: 'uppercase', letterSpacing: '0.08em', color: 'var(--green-600)', marginBottom: 14, display: 'flex', alignItems: 'center', gap: 8, justifyContent: center ? 'center' : 'flex-start' }}>
          <span style={{ width: 22, height: 2, background: 'var(--green-500)', borderRadius: 2 }}></span>{eyebrow}{center && <span style={{ width: 22, height: 2, background: 'var(--green-500)', borderRadius: 2 }}></span>}</div>}
        <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 'clamp(28px,3.6vw,46px)', letterSpacing: '-0.02em', color: 'var(--ink-900)', margin: 0, lineHeight: 1.08 }}>{title}</h2>
        {sub && <p style={{ fontSize: 17, color: 'var(--text-muted)', marginTop: 14, lineHeight: 1.6 }}>{sub}</p>}
      </div>
      {action && <Button variant="secondary" iconRight={<window.Icon name="arrow-up-right" size={15} />} onClick={onAction}>{action}</Button>}
    </div>
  );
}
window.SectionHead = SectionHead;

/* ---- reviews carousel — continuous marquee ---- */
if (typeof document !== 'undefined' && !document.getElementById('af-rev-css')) {
  const s = document.createElement('style'); s.id = 'af-rev-css';
  s.textContent = `
    .af-rev-stage{ position:relative; overflow:hidden; }
    .af-rev-track{ display:flex; gap:20px; width:max-content; }
    .af-rev-card{ flex:0 0 auto; width:clamp(260px,34vw,340px); background:#fff;
      border:1px solid var(--border-soft); border-radius:var(--radius-xl);
      box-shadow:var(--shadow-sm); padding:clamp(18px,2vw,26px); }
    .af-rev-fade-l{ position:absolute; left:0; top:0; bottom:0; width:64px; z-index:2; pointer-events:none;
      background:linear-gradient(90deg, var(--surface-page) 10%, transparent); }
    .af-rev-fade-r{ position:absolute; right:0; top:0; bottom:0; width:64px; z-index:2; pointer-events:none;
      background:linear-gradient(270deg, var(--surface-page) 10%, transparent); }
  `;
  document.head.appendChild(s);
}

function ReviewsCarousel({ rows = 3 }) {
  const { Avatar } = NS_home;
  const I = window.Icon;
  const reviews = window.AF_REVIEWS;

  // Split reviews into rows
  const rowData = rows === 1
    ? [reviews]
    : [
        reviews.filter((_, i) => i % 3 === 0),
        reviews.filter((_, i) => i % 3 === 1),
        reviews.filter((_, i) => i % 3 === 2),
      ];
  const speeds = [0.38, 0.42, 0.35];
  const dirs = [1, -1, 1];
  function MarqueeRow({ items, direction = 1, speed = 0.4 }) {
    const trackRef = React.useRef(null);
    const pausedRef = React.useRef(false);
    const posRef = React.useRef(0);
    const resumeTimer = React.useRef(null);
    const loop = [...items, ...items, ...items, ...items];
    const pause = () => { pausedRef.current = true; };
    const resumeSoon = (ms = 3000) => { clearTimeout(resumeTimer.current); resumeTimer.current = setTimeout(() => { pausedRef.current = false; }, ms); };

    React.useEffect(() => {
      let raf;
      const tick = () => {
        const el = trackRef.current;
        if (el && !pausedRef.current) {
          posRef.current += speed * direction;
          const quarter = el.scrollWidth / 4;
          if (posRef.current >= quarter) posRef.current -= quarter;
          if (posRef.current < 0) posRef.current += quarter;
          el.style.transform = `translateX(-${posRef.current}px)`;
        }
        raf = requestAnimationFrame(tick);
      };
      raf = requestAnimationFrame(tick);
      return () => cancelAnimationFrame(raf);
    }, []);

    return (
      <div style={{ overflow: 'hidden', position: 'relative' }}
        onMouseEnter={pause} onMouseLeave={() => { pausedRef.current = false; }}
        onTouchStart={pause} onTouchEnd={() => resumeSoon()}
        onPointerDown={pause} onPointerUp={() => resumeSoon()}>
        <div ref={trackRef} style={{ display: 'flex', gap: 16, width: 'max-content' }}>
          {loop.map((r, idx) => (
            <div key={idx} style={{ width: 'clamp(220px,28vw,300px)', background: 'var(--surface-card)',
              border: '1px solid var(--border-soft)', borderRadius: 'var(--radius-xl)',
              padding: '16px 18px', flexShrink: 0 }}>
              <div style={{ display: 'flex', gap: 2, marginBottom: 8 }}>
                {[0,1,2,3,4].map(n => <I key={n} name="star" size={13} fill style={{ color: '#F5A623' }} />)}
              </div>
              <p style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 14.5, lineHeight: 1.5,
                color: 'var(--ink-900)', margin: '0 0 12px',
                display: '-webkit-box', WebkitLineClamp: 3, WebkitBoxOrient: 'vertical', overflow: 'hidden' }}>"{r.text}"</p>
              <div style={{ display: 'flex', alignItems: 'center', gap: 9 }}>
                <Avatar name={r.name} size="sm" />
                <div>
                  <div style={{ fontWeight: 800, fontSize: 12.5, color: 'var(--ink-900)' }}>{r.name}</div>
                  <div style={{ fontSize: 11.5, color: 'var(--text-muted)' }}>Verified · {r.source || 'Zocdoc'}</div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    );
  }

  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 14, overflow: 'hidden',
      maskImage: rows > 1 ? 'linear-gradient(to bottom, transparent, black 8%, black 92%, transparent)' : undefined,
      WebkitMaskImage: rows > 1 ? 'linear-gradient(to bottom, transparent, black 8%, black 92%, transparent)' : undefined }}>
      {rowData.map((items, i) => (
        <MarqueeRow key={i} items={items} direction={dirs[i] || 1} speed={speeds[i] || 0.38} />
      ))}
    </div>
  );
}
window.ReviewsCarousel = ReviewsCarousel;

/* ---- hero ---- */
function Hero({ onBook, onNavigate }) {
  const { Button, Badge } = NS_home;
  const I = window.Icon;
  const bullets = [
    ['user', 'One-on-one care with a licensed PT — never rushed'],
    ['calendar-check', 'Direct access — no physician referral needed'],
    ['map-pin', 'In-clinic, in-home, or virtual visits'],
  ];
  return (
    <section style={{ padding: '20px var(--gutter) 0' }}>
      <div style={{ maxWidth: 'var(--container-wide)', margin: '0 auto', background: 'var(--wash-hero)',
        borderRadius: 'var(--radius-2xl)', padding: 'clamp(26px,4vw,52px)', position: 'relative', overflow: 'hidden' }}>
        <div className="af-hero-grid" style={{ display: 'grid', gridTemplateColumns: '1.05fr 0.95fr', gap: 44, alignItems: 'center' }}>
          {/* copy */}
          <div>
            <Badge variant="neutral"><span style={{ display: 'inline-flex', gap: 2 }} aria-label="5 star average rating">{[0,1,2,3,4].map(n => <I key={n} name="star" size={15} fill style={{ color: '#F5A623' }} />)}</span></Badge>
            <h1 style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 'clamp(36px,5vw,64px)',
              lineHeight: 1.04, letterSpacing: '-0.025em', color: 'var(--ink-900)', margin: '20px 0 0' }}>
              Holistic Physical Therapy<br/><span style={{ color: 'var(--green-600)', fontSize: 'clamp(26px,3.8vw,48px)', whiteSpace: 'nowrap' }}>Recover. Strengthen. Thrive.</span>
            </h1>
            <p style={{ fontSize: 18, color: 'var(--text-muted)', margin: '18px 0 0', maxWidth: '46ch', lineHeight: 1.6 }}>
              Personalized, one-on-one physical therapy in Naperville — built around your body, your goals, and your life.
            </p>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 12, margin: '24px 0 30px' }}>
              {bullets.map(([icon, text]) => (
                <div key={text} style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                  <span style={{ flex: '0 0 auto', width: 32, height: 32, borderRadius: '50%', background: 'var(--color-primary-soft)',
                    color: 'var(--green-700)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>
                    <I name={icon} size={16} /></span>
                  <span style={{ fontSize: 16, fontWeight: 600, color: 'var(--text-body)' }}>{text}</span>
                </div>
              ))}
            </div>
            <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
              <Button variant="primary" size="lg" iconRight={<I name="arrow-up-right" size={17} />} onClick={onBook}>Book an Appointment</Button>
              <Button variant="secondary" size="lg" iconRight={<I name="arrow-up-right" size={17} />} onClick={() => onNavigate('services')}>Explore Services</Button>
            </div>
          </div>

          {/* founder photo + floating cards */}
          <div style={{ position: 'relative' }}>
            <div style={{ position: 'relative', borderRadius: 'var(--radius-2xl)', overflow: 'hidden', background: 'var(--wash-mint)',
              aspectRatio: '4 / 4.6', boxShadow: 'var(--shadow-lg)' }}>
              <img src="assets/team-nikita-hero.png" alt="Nikita Goyal, PT, MS — Founder" style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'top center', display: 'block' }} />
            </div>
            <div style={{ position: 'absolute', top: 20, left: -18, background: '#fff', borderRadius: 'var(--radius-lg)',
              boxShadow: 'var(--shadow-lg)', padding: '12px 16px', display: 'flex', alignItems: 'center', gap: 11 }} className="af-float">
              <span style={{ width: 40, height: 40, borderRadius: '50%', background: 'var(--color-primary-soft)', color: 'var(--green-700)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}><I name="stethoscope" size={20} /></span>
              <div style={{ lineHeight: 1.25 }}>
                <div style={{ fontSize: 13.5, fontWeight: 800, color: 'var(--ink-900)' }}>Nikita Goyal, PT, MS</div>
                <div style={{ fontSize: 12, color: 'var(--text-muted)' }}>Founder · 10+ yrs experience</div>
              </div>
            </div>
            <div style={{ position: 'absolute', bottom: 24, left: -20, background: 'var(--wash-card-dark)', color: '#fff', borderRadius: 'var(--radius-lg)',
              boxShadow: 'var(--shadow-xl)', padding: '14px 18px' }} className="af-float">
              <div style={{ display: 'flex', gap: 2, marginBottom: 5 }}>{[0,1,2,3,4].map(n => <I key={n} name="star" size={13} fill style={{ color: '#F5A623' }} />)}</div>
              <div style={{ fontSize: 13, fontWeight: 700 }}>“She is the best!”</div>
              <div style={{ fontSize: 11.5, color: '#A9C6B5', marginTop: 2 }}>— Verified Zocdoc patient</div>
            </div>
            <div style={{ position: 'absolute', top: 150, right: -14, background: '#fff', borderRadius: 'var(--radius-pill)',
              boxShadow: 'var(--shadow-md)', padding: '9px 15px', display: 'flex', alignItems: 'center', gap: 8, fontSize: 13.5, fontWeight: 700, color: 'var(--ink-900)' }} className="af-float">
              <I name="check" size={15} style={{ color: 'var(--green-600)' }} /> No referral needed
            </div>
          </div>

          {/* mobile trust strip — replaces the hidden floating cards on small screens */}
          <div className="af-float-mobile" style={{ display: 'none', gap: 10, marginTop: 14, overflowX: 'auto', WebkitOverflowScrolling: 'touch' }}>
            {[
              ['stethoscope', 'Nikita Goyal, PT, MS', 'Founder · 10+ yrs experience'],
              ['star', '“She is the best!”', 'Verified Zocdoc patient'],
              ['check', 'No referral needed', null],
            ].map(([icon, title, sub], i) => (
              <div key={i} style={{ flex: '0 0 auto', display: 'flex', alignItems: 'center', gap: 9, background: '#fff',
                borderRadius: 'var(--radius-pill)', boxShadow: 'var(--shadow-sm)', border: '1px solid var(--border-soft)', padding: '10px 14px' }}>
                <span style={{ width: 30, height: 30, borderRadius: '50%', background: 'var(--color-primary-soft)', color: 'var(--green-700)',
                  display: 'inline-flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                  <I name={icon} size={15} fill={icon === 'star'} style={icon === 'star' ? { color: '#F5A623' } : undefined} />
                </span>
                <div style={{ lineHeight: 1.2 }}>
                  <div style={{ fontSize: 12.5, fontWeight: 800, color: 'var(--ink-900)', whiteSpace: 'nowrap' }}>{title}</div>
                  {sub && <div style={{ fontSize: 11, color: 'var(--text-muted)', whiteSpace: 'nowrap' }}>{sub}</div>}
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---- care delivery models ---- */
function CareModels() {
  const { Card } = NS_home;
  const I = window.Icon;
  return (
    <section style={{ padding: 'var(--section-y) var(--gutter) 0' }}>
      <div style={{ maxWidth: 'var(--container-max)', margin: '0 auto' }}>
        <SectionHead center eyebrow="Flexible Care" title="Care designed around you"
          sub="We bring healing to you — wherever and whenever you need it. Convenience, consistency, and a plan that fits your life." />
        <div className="af-cards-3" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24 }}>
          {window.AF_CARE_MODELS.map(m => (
            <Card key={m.id} style={{ display: 'flex', flexDirection: 'column' }}>
              <span style={{ width: 56, height: 56, borderRadius: 'var(--radius-lg)', background: 'var(--color-primary-soft)', color: 'var(--green-700)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>
                <I name={m.icon} size={28} /></span>
              <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 22, color: 'var(--ink-900)', margin: '18px 0 8px' }}>{m.title}</h3>
              <p style={{ fontSize: 15, color: 'var(--text-muted)', lineHeight: 1.55, margin: '0 0 18px' }}>{m.tagline}</p>
              <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 10 }}>
                {m.features.map(f => (
                  <li key={f} style={{ display: 'flex', alignItems: 'flex-start', gap: 9, fontSize: 14.5, color: 'var(--text-body)' }}>
                    <I name="check" size={16} stroke={2.6} style={{ color: 'var(--green-600)', marginTop: 2, flexShrink: 0 }} />{f}</li>
                ))}
              </ul>
            </Card>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---- core services: auto-scrolling marquee carousel ---- */
if (typeof document !== 'undefined' && !document.getElementById('af-svc-css')) {
  const s = document.createElement('style'); s.id = 'af-svc-css';
  s.textContent = `
    .af-svc-stage{ position:relative; padding:0 60px; }
    .af-svc-scroller{ display:flex; gap:20px; overflow-x:auto;
      padding:6px 2px 8px; -ms-overflow-style:none; scrollbar-width:none; scroll-behavior:auto; }
    .af-svc-scroller::-webkit-scrollbar{ display:none; }
    .af-svc-card{ flex:0 0 auto; width:clamp(248px, 70vw, 288px); }
    .af-svc-arrow{ position:absolute; top:50%; transform:translateY(-50%); z-index:3; width:48px; height:48px;
      border-radius:50%; border:1px solid var(--border-soft); background:#fff;
      box-shadow:var(--shadow-md); cursor:pointer; display:inline-flex;
      align-items:center; justify-content:center; color:var(--ink-900); transition:var(--transition-base); }
    .af-svc-arrow:hover{ color:var(--green-700); border-color:var(--green-300); box-shadow:var(--shadow-lg); }
    .af-svc-arrow--l{ left:4px; } .af-svc-arrow--r{ right:4px; }
    .af-svc-edge{ position:absolute; top:0; bottom:14px; width:40px; z-index:2; pointer-events:none; }
    .af-svc-edge--l{ left:60px; background:linear-gradient(90deg, var(--surface-page), transparent); }
    .af-svc-edge--r{ right:60px; background:linear-gradient(270deg, var(--surface-page), transparent); }
    @media (max-width:640px){ .af-svc-stage{ padding:0; } .af-svc-arrow{ display:none; } .af-svc-edge{ display:none; } }
  `;
  document.head.appendChild(s);
}

function CoreServices({ onNavigate }) {
  const { Card } = NS_home;
  const I = window.Icon;
  const items = window.AF_SERVICES;
  const loop = [...items, ...items];
  const ref = React.useRef(null);
  const pausedRef = React.useRef(false);
  const resumeTimer = React.useRef(null);
  const [active, setActive] = React.useState(0);

  const cardStep = () => {
    const el = ref.current; if (!el) return 1;
    const c = el.querySelector('.af-svc-card');
    return c ? c.offsetWidth + 20 : 1;
  };

  // continuous slow marquee
  React.useEffect(() => {
    let raf;
    const tick = () => {
      const el = ref.current;
      if (el && !pausedRef.current) {
        el.scrollLeft += 0.6;
        const half = el.scrollWidth / 2;
        if (el.scrollLeft >= half) el.scrollLeft -= half;
      }
      raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, []);

  const onScroll = () => {
    const el = ref.current; if (!el) return;
    const idx = Math.round(el.scrollLeft / cardStep());
    setActive(((idx % items.length) + items.length) % items.length);
  };

  const pause = () => { pausedRef.current = true; };
  const resumeSoon = (ms = 2600) => {
    clearTimeout(resumeTimer.current);
    resumeTimer.current = setTimeout(() => { pausedRef.current = false; }, ms);
  };
  const nudge = (dir) => { ref.current?.scrollBy({ left: dir * cardStep(), behavior: 'smooth' }); pause(); resumeSoon(); };
  const toCard = (i) => { ref.current?.scrollTo({ left: i * cardStep(), behavior: 'smooth' }); pause(); resumeSoon(); };

  return (
    <section style={{ padding: 'var(--section-y) var(--gutter) 0' }}>
      <div style={{ maxWidth: 'var(--container-max)', margin: '0 auto' }}>
        <SectionHead eyebrow="Our Specialties" title="Expert care for every stage of recovery"
          sub="Evidence-based physical therapy across orthopedic, pelvic, spine and balance care."
          action="All services" onAction={() => onNavigate('services')} />

        <div className="af-svc-stage"
          onMouseEnter={pause} onMouseLeave={() => { pausedRef.current = false; }}
          onTouchStart={pause} onTouchEnd={() => resumeSoon()} onPointerDown={pause} onPointerUp={() => resumeSoon()}>
          <span className="af-svc-edge af-svc-edge--l" />
          <span className="af-svc-edge af-svc-edge--r" />
          <button className="af-svc-arrow af-svc-arrow--l" aria-label="Previous" onClick={() => nudge(-1)}><I name="chevron-left" size={20} /></button>
          <button className="af-svc-arrow af-svc-arrow--r" aria-label="Next" onClick={() => nudge(1)}><I name="chevron-right" size={20} /></button>

          <div className="af-svc-scroller" ref={ref} onScroll={onScroll}>
            {loop.map((s, i) => (
              <div className="af-svc-card" key={i}>
                <Card interactive onClick={() => onNavigate('services')} style={{ cursor: 'pointer', height: '100%' }}>
                  <span style={{ width: 50, height: 50, borderRadius: 'var(--radius-md)', background: 'var(--color-primary-soft)', color: 'var(--green-700)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>
                    <I name={s.icon} size={24} /></span>
                  <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 17.5, color: 'var(--ink-900)', margin: '16px 0 7px', lineHeight: 1.2 }}>{s.title}</h3>
                  <p style={{ fontSize: 14, color: 'var(--text-muted)', lineHeight: 1.5, margin: 0 }}>{s.desc}</p>
                </Card>
              </div>
            ))}
          </div>
        </div>

        {/* dot indicators */}
        <div style={{ display: 'flex', justifyContent: 'center', gap: 8, marginTop: 22 }}>
          {items.map((s, i) => (
            <button key={s.title} aria-label={'Go to ' + s.title} onClick={() => toCard(i)}
              style={{ width: active === i ? 26 : 8, height: 8, borderRadius: 'var(--radius-pill)', border: 'none', cursor: 'pointer',
                background: active === i ? 'var(--color-primary)' : 'var(--line-strong)', transition: 'var(--transition-base)', padding: 0 }} />
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---- payment options ---- */
function PaymentOptions() {
  const { Badge } = NS_home;
  const I = window.Icon;
  return (
    <section style={{ padding: 'var(--section-y) var(--gutter) 0' }}>
      <div style={{ maxWidth: 'var(--container-max)', margin: '0 auto' }}>
        <SectionHead center eyebrow="Payment Options" title="Transparent, flexible payment"
          sub="Understanding your financial options should be as clear as your path to recovery. No surprises — just honest, upfront care." />
        <div className="af-cards-3" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24, alignItems: 'start' }}>
          {window.AF_PAYMENTS.map(p => (
            <div key={p.title} style={{ position: 'relative', background: p.featured ? 'var(--wash-card-dark)' : 'var(--surface-card)',
              color: p.featured ? 'var(--text-on-dark)' : 'var(--text-body)', border: '1px solid ' + (p.featured ? 'transparent' : 'var(--border-soft)'),
              borderRadius: 'var(--radius-2xl)', padding: 'clamp(24px,2.4vw,32px)', boxShadow: p.featured ? 'var(--shadow-xl)' : 'var(--shadow-sm)',
              transform: p.featured ? 'translateY(-8px)' : 'none' }}>
              {p.featured && <span style={{ position: 'absolute', top: 22, right: 22, background: 'var(--brand-green)', color: 'var(--green-950)', fontSize: 12, fontWeight: 800, padding: '5px 11px', borderRadius: 'var(--radius-pill)' }}>Most popular</span>}
              <span style={{ width: 52, height: 52, borderRadius: 'var(--radius-md)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                background: p.featured ? 'rgba(91,177,47,0.22)' : 'var(--color-primary-soft)', color: p.featured ? 'var(--brand-green)' : 'var(--green-700)' }}>
                <I name={p.icon} size={26} /></span>
              <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 21, color: p.featured ? '#fff' : 'var(--ink-900)', margin: '18px 0 6px' }}>{p.title}</h3>
              <p style={{ fontSize: 14.5, color: p.featured ? '#A9C6B5' : 'var(--text-muted)', margin: '0 0 18px' }}>{p.blurb}</p>
              <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 11 }}>
                {p.points.map(pt => (
                  <li key={pt} style={{ display: 'flex', alignItems: 'flex-start', gap: 10, fontSize: 14.5 }}>
                    <span style={{ flex: '0 0 auto', width: 20, height: 20, borderRadius: '50%', marginTop: 1, display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                      background: p.featured ? 'rgba(91,177,47,0.25)' : 'var(--color-primary-soft)', color: p.featured ? 'var(--brand-green)' : 'var(--green-700)' }}>
                      <I name="check" size={12} stroke={3} /></span>
                    <span style={{ color: p.featured ? '#DCECE3' : 'var(--text-body)' }}>{pt}</span>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>
        <p style={{ textAlign: 'center', fontSize: 14, color: 'var(--text-muted)', marginTop: 24, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8 }}>
          <I name="shield-check" size={16} style={{ color: 'var(--green-600)' }} /> Please reach out to confirm your coverage — we’re happy to help.
        </p>
      </div>
    </section>
  );
}

/* ---- reviews section wrapper ---- */
function ReviewsSection({ onNavigate }) {
  return (
    <section style={{ padding: 'var(--section-y) var(--gutter) 0' }}>
      <div style={{ maxWidth: 'var(--container-max)', margin: '0 auto' }}>
        <SectionHead center eyebrow="Real Stories, Real Results" title={<>Top-Rated<br/>Physical Therapy</>} />
        <window.ReviewsCarousel rows={1} />
        <div style={{ textAlign: 'center', marginTop: 28 }}>
          <NS_home.Button variant="secondary" iconRight={<window.Icon name="arrow-up-right" size={15} />} onClick={() => onNavigate('reviews')}>Read all reviews</NS_home.Button>
        </div>
      </div>
    </section>
  );
}

function HomePage({ onBook, onNavigate }) {
  return (
    <React.Fragment>
      <Hero onBook={onBook} onNavigate={onNavigate} />
      <ReviewsSection onNavigate={onNavigate} />
      <CareModels />
      <CoreServices onNavigate={onNavigate} />
      <PaymentOptions />
    </React.Fragment>
  );
}

Object.assign(window, { HomePage });