/* ActiveFit360 marketing — Reviews page */
const NS_rv = window.Activefit360DesignSystem_d87766;

function ReviewsPage({ onBook }) {
  const { Card, Avatar, Badge, Button } = NS_rv;
  const I = window.Icon;
  const reviews = window.AF_REVIEWS;
  return (
    <React.Fragment>
      {/* header */}
      <section style={{ padding: '24px var(--gutter) 0' }}>
        <div style={{ maxWidth: 'var(--container-wide)', margin: '0 auto', background: 'var(--wash-hero)', borderRadius: 'var(--radius-2xl)',
          padding: 'clamp(36px,5vw,68px)', textAlign: 'center' }}>
          <Badge variant="neutral"><span style={{display:'inline-flex',gap:2,verticalAlign:'middle'}}>{[0,1,2,3,4].map(n=><I key={n} name="star" size={13} fill style={{color:'#F5A623'}}/>)}</span></Badge>
          <h1 style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 'clamp(34px,5vw,58px)', letterSpacing: '-0.025em', color: 'var(--ink-900)', margin: '18px auto 0', maxWidth: '18ch', lineHeight: 1.05 }}>
            Real stories, real results
          </h1>
          <p style={{ fontSize: 18, color: 'var(--text-muted)', margin: '18px auto 0', maxWidth: '50ch', lineHeight: 1.6 }}>
            Our patients consistently celebrate ActiveFit360 for our active listening, thorough explanations, and deeply genuine care. Here is their experience in their own words.
          </p>
        </div>
      </section>

      {/* carousel */}
      <section style={{ padding: 'var(--space-16) var(--gutter) 0' }}>
        <window.ReviewsCarousel />
      </section>


      {/* CTA */}
      <section style={{ padding: 'var(--space-16) var(--gutter) var(--section-y)' }}>
        <div style={{ maxWidth: 'var(--container-max)', margin: '0 auto', textAlign: 'center' }}>
          <Button variant="primary" size="lg" iconRight={<I name="arrow-up-right" size={17} />} onClick={onBook}>Become our next success story</Button>
        </div>
      </section>
    </React.Fragment>
  );
}

Object.assign(window, { ReviewsPage });