/* ActiveFit360 marketing — About page */
const NS_ab = window.Activefit360DesignSystem_d87766;

if (typeof document !== 'undefined' && !document.getElementById('af-about-css')) {
  const s = document.createElement('style'); s.id = 'af-about-css';
  s.textContent = `.af-btn--ghost.af-cta-ghost-dark:hover{ background:rgba(255,255,255,0.12) !important; color:#fff !important; }`;
  document.head.appendChild(s);
}

function PhotoOrInitials({ person, style }) {
  const I = window.Icon;
  if (person.photo) {
    return <img src={person.photo} alt={person.name} style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'top center', display: 'block', ...style }} />;
  }
  const initials = person.name.split(' ').map(w => w[0]).join('');
  return (
    <div style={{ width: '100%', height: '100%', background: 'var(--wash-mint)', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 8, ...style }}>
      <div style={{ fontFamily: 'var(--font-display)', fontWeight: 900, fontSize: 48, color: 'var(--green-600)' }}>{initials}</div>
      <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--green-700)', opacity: 0.8 }}>Photo coming soon</div>
    </div>
  );
}

function TeamMember({ person, reverse }) {
  const { Tag, Badge } = NS_ab;
  const I = window.Icon;
  return (
    <div className="af-member" style={{ display: 'grid', gridTemplateColumns: reverse ? '1fr 0.8fr' : '0.8fr 1fr', gap: 36, alignItems: 'center' }}>
      <div style={{ order: reverse ? 2 : 1, borderRadius: 'var(--radius-2xl)', overflow: 'hidden', aspectRatio: '4/4.4', boxShadow: 'var(--shadow-md)', border: '1px solid var(--border-soft)' }}>
        <PhotoOrInitials person={person} />
      </div>
      <div style={{ order: reverse ? 1 : 2 }}>
        <Badge variant="green" dot>{person.role}</Badge>
        <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 'clamp(26px,3vw,36px)', letterSpacing: '-0.02em', color: 'var(--ink-900)', margin: '16px 0 4px' }}>
          {person.name}<span style={{ color: 'var(--text-muted)', fontWeight: 700, fontSize: '0.55em' }}>, {person.creds}</span>
        </h3>
        <div style={{ display: 'flex', alignItems: 'center', gap: 7, fontSize: 14, fontWeight: 700, color: 'var(--green-700)', marginBottom: 16 }}>
          <I name="award" size={16} /> {person.exp}
        </div>
        <p style={{ fontSize: 16, color: 'var(--text-body)', lineHeight: 1.65, margin: '0 0 12px' }}>{person.bio}</p>
        <p style={{ fontSize: 15, color: 'var(--text-muted)', lineHeight: 1.65, margin: '0 0 18px' }}>{person.detail}</p>
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8, marginBottom: 20 }}>
          {person.tags.map(t => <Tag key={t} variant="soft">{t}</Tag>)}
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }} className="af-creds">
          <div>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10.5, textTransform: 'uppercase', letterSpacing: '0.06em', color: 'var(--text-subtle)', marginBottom: 8, display: 'flex', alignItems: 'center', gap: 6 }}><I name="graduation-cap" size={14} /> Education</div>
            <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 6 }}>
              {person.education.map(e => <li key={e} style={{ fontSize: 13.5, color: 'var(--text-body)', lineHeight: 1.45 }}>{e}</li>)}
            </ul>
          </div>
          {person.honors.length > 0 && (
            <div>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10.5, textTransform: 'uppercase', letterSpacing: '0.06em', color: 'var(--text-subtle)', marginBottom: 8, display: 'flex', alignItems: 'center', gap: 6 }}><I name="star" size={13} fill /> Recognition</div>
              <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 6 }}>
                {person.honors.map(h => <li key={h} style={{ fontSize: 13.5, color: 'var(--text-body)', lineHeight: 1.45 }}>{h}</li>)}
              </ul>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

function AboutPage({ onBook, onNavigate }) {
  const { Button, Badge, Card } = NS_ab;
  const I = window.Icon;
  const team = window.AF_TEAM;
  const values = [
    ['heart-pulse', 'Compassionate care', 'Where care meets compassion — every patient feels heard and empowered.'],
    ['user', 'One-on-one, never rushed', 'A move away from high-volume clinics: real time and attention each session.'],
    ['target', 'Evidence-based plans', 'Individualized treatment grounded in current best practices.'],
    ['flower', 'Holistic & mindful', 'Yoga and meditation woven into recovery for body and mind.'],
  ];
  return (
    <React.Fragment>
      {/* intro */}
      <section style={{ padding: '24px var(--gutter) 0' }}>
        <div style={{ maxWidth: 'var(--container-wide)', margin: '0 auto', background: 'var(--wash-mint)', borderRadius: 'var(--radius-2xl)',
          padding: 'clamp(36px,5vw,72px)', textAlign: 'center' }}>
          <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: '20ch', lineHeight: 1.05 }}>
            Expertise you trust. Care you deserve.
          </h1>
          <p style={{ fontSize: 18, color: 'var(--text-muted)', margin: '18px auto 0', maxWidth: '56ch', lineHeight: 1.6 }}>
            ActiveFit360 is a Naperville-based physical therapy and wellness practice founded by Nikita Goyal, PT, MS — built on personalized, one-on-one care that moves away from the rushed, high-volume clinic model.
          </p>
        </div>
      </section>

      {/* team */}
      <section style={{ padding: 'var(--section-y) var(--gutter) 0' }}>
        <div style={{ maxWidth: 'var(--container-max)', margin: '0 auto' }}>
          <window.SectionHead center eyebrow="Meet the team" title="" />
          <div style={{ display: 'flex', flexDirection: 'column', gap: 'clamp(48px,7vw,88px)' }}>
            {team.map((p, i) => <TeamMember key={p.name} person={p} reverse={i % 2 === 1} />)}
          </div>
        </div>
      </section>

      {/* values */}
      <section style={{ padding: 'var(--space-16) var(--gutter) 0' }}>
        <div style={{ maxWidth: 'var(--container-max)', margin: '0 auto' }}>
          <div className="af-cards-4" style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 20 }}>
            {values.map(([icon, title, desc]) => (
              <Card key={title}>
                <span style={{ width: 48, height: 48, borderRadius: 'var(--radius-md)', background: 'var(--color-primary-soft)', color: 'var(--green-700)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>
                  <I name={icon} size={22} /></span>
                <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 17, color: 'var(--ink-900)', margin: '14px 0 7px', lineHeight: 1.2 }}>{title}</h3>
                <p style={{ fontSize: 13.5, color: 'var(--text-muted)', lineHeight: 1.5, margin: 0 }}>{desc}</p>
              </Card>
            ))}
          </div>
        </div>
      </section>

      {/* cta */}
      <section style={{ padding: 'var(--section-y) var(--gutter) 0' }}>
        <div style={{ maxWidth: 'var(--container-max)', margin: '0 auto', background: 'var(--wash-card-dark)', borderRadius: 'var(--radius-2xl)',
          padding: 'clamp(36px,5vw,64px)', textAlign: 'center', color: '#fff' }}>
          <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 'clamp(26px,3.4vw,40px)', letterSpacing: '-0.02em', margin: 0 }}>Ready to meet your therapist?</h2>
          <p style={{ color: '#A9C6B5', fontSize: 17, margin: '14px auto 26px', maxWidth: '44ch', lineHeight: 1.6 }}>Book a one-on-one evaluation — no referral needed — and start your personalized recovery plan.</p>
          <div style={{ display: 'flex', gap: 12, justifyContent: 'center', flexWrap: 'wrap' }}>
            <Button variant="green" size="lg" iconRight={<I name="arrow-up-right" size={17} />} onClick={onBook}>Book an Appointment</Button>
            <Button variant="ghost" size="lg" className="af-cta-ghost-dark" onClick={() => onNavigate('contact')} style={{ color: '#fff' }}>Contact us</Button>
          </div>
        </div>
      </section>
    </React.Fragment>
  );
}

Object.assign(window, { AboutPage });