/* Symphony — Team / Reviews / Contact pages */

function PageTeam({ onNavigate }) {
  return (
    <main className="page-enter">
      <section className="page-hero">
        <div className="container">
          <Crumbs trail={[{ label: 'Home', route: 'home' }, { label: 'Team' }]} onNavigate={onNavigate} />
          <span className="eyebrow"><span className="rule"/>The people</span>
          <h1 className="display">Named in your <em>reviews</em>. Trained for your care.</h1>
          <p className="body-lg">DHA-certified medical oversight and a quiet, methodical team of therapists. Headshots arriving soon — for now, meet them in their initials and their bios.</p>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: '2rem 1.25rem' }}>
            {TEAM.map((m, i) => (
              <article key={i} style={{ display: 'flex', flexDirection: 'column' }}>
                <div className="monogram">{m.initials}</div>
                <div style={{ marginTop: '1.25rem' }}>
                  <div className="eyebrow" style={{ color: 'var(--coral-deep)' }}>{m.role}</div>
                  <h3 className="display" style={{ fontSize: '1.75rem', marginBlock: '.5rem .75rem' }}>
                    {m.name}{m.dha && <span className="chip chip-verify" style={{ marginLeft: '.5rem', verticalAlign: 'middle' }}><Icon.Check s={10}/> DHA</span>}
                  </h3>
                  <p style={{ color: 'var(--stone)', fontSize: '.9375rem', lineHeight: 1.6 }}>{m.bio}</p>
                </div>
              </article>
            ))}
          </div>

          <div style={{ marginTop: '4rem', padding: '2rem', background: 'var(--ivory-deep)', borderRadius: 'var(--radius)', textAlign: 'center' }}>
            <p className="muted" style={{ fontSize: 12, fontFamily: 'var(--font-eyebrow)', letterSpacing: '.18em', textTransform: 'uppercase' }}>
              Photography coming soon · client-supplied
            </p>
          </div>
        </div>
      </section>
    </main>
  );
}

function PageReviews({ onNavigate }) {
  const [filter, setFilter] = React.useState('all');
  const filtered = filter === 'all' ? REVIEWS : REVIEWS.filter(r => r.src.toLowerCase() === filter.toLowerCase());

  return (
    <main className="page-enter">
      <section className="page-hero">
        <div className="container">
          <Crumbs trail={[{ label: 'Home', route: 'home' }, { label: 'Reviews' }]} onNavigate={onNavigate} />
          <span className="eyebrow"><span className="rule"/>Voices · dated · sourced</span>
          <h1 className="display"><em>4.9 ★</em> across 908 visits.</h1>
          <p className="body-lg">We don't write testimonials about ourselves. Every quote below is dated and linked to its source — Fresha, BookBeauty, or a published site testimonial.</p>
          <div style={{ marginTop: '2rem' }}><FreshaBadge /></div>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '2.5rem', flexWrap: 'wrap', gap: '1rem' }}>
            <div className="seg">
              {['all', 'Fresha', 'BookBeauty', 'Site testimonial'].map(k => (
                <button key={k} className={filter === k ? 'active' : ''} onClick={() => setFilter(k)}>
                  {k === 'all' ? 'All' : k}
                </button>
              ))}
            </div>
            <span className="muted" style={{ fontSize: 12 }}>{filtered.length} review{filtered.length !== 1 ? 's' : ''}</span>
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: '1.25rem' }}>
            {filtered.map((r, i) => (
              <article key={i} className="review-card">
                <div className="review-stars">{'★'.repeat(r.stars)}</div>
                <p className="review-quote">"{r.quote}"</p>
                <div className="review-meta">
                  <div className="avatar">{r.name[0]}</div>
                  <div className="info">
                    <div className="name">{r.name}</div>
                    <div className="src">{r.src} · {r.date}</div>
                  </div>
                </div>
              </article>
            ))}
          </div>
        </div>
      </section>

      <section className="section" style={{ background: 'var(--ivory-deep)', borderTop: '1px solid var(--hairline)' }}>
        <div className="container" style={{ textAlign: 'center' }}>
          <h2 className="display" style={{ marginBottom: '1.5rem' }}>Quiet results, loud reviews.</h2>
          <p className="body-lg" style={{ maxWidth: '32rem', margin: '0 auto 2rem' }}>Come find out why our therapists are named in your booking.</p>
          <a className="btn btn-coral" href="#contact" onClick={(e)=>{e.preventDefault();onNavigate('contact');}}>
            Book a Consultation <Icon.Arrow s={14} />
          </a>
        </div>
      </section>
    </main>
  );
}

function PageContact({ onNavigate }) {
  return (
    <main className="page-enter">
      <section className="page-hero">
        <div className="container">
          <Crumbs trail={[{ label: 'Home', route: 'home' }, { label: 'Contact' }]} onNavigate={onNavigate} />
          <span className="eyebrow"><span className="rule"/>Visit us</span>
          <h1 className="display">908 Regal Tower · <em>Business Bay</em>.</h1>
          <p className="body-lg">9th floor. Free parking on-site. Walk-in welcome but a consultation slot guarantees the time and care you deserve.</p>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.1fr', gap: 'clamp(2rem, 5vw, 4rem)' }}>
            <div>
              <div className="eyebrow"><span className="rule"/>Talk to us</div>
              <h2 className="display" style={{ marginBlock: '1rem 2rem', fontSize: '2.5rem' }}>
                Choose your <em>fastest</em> line in.
              </h2>

              <ul style={{ listStyle: 'none', display: 'flex', flexDirection: 'column', marginBottom: '2rem' }}>
                <ContactRow icon={<Icon.WhatsApp s={20}/>} label="WhatsApp · fastest" value="+971 58 564 5788" href="https://wa.me/971585645788" />
                <ContactRow icon={<Icon.Phone s={20}/>}    label="Call clinic"        value="+971 4 267 2368" href="tel:+97142672368" />
                <ContactRow icon={<Icon.Mail s={20}/>}     label="Email"               value="contact@symphonyclinic.ae" href="mailto:contact@symphonyclinic.ae" />
                <ContactRow icon={<Icon.Pin s={20}/>}      label="Address"             value="908 Regal Tower, Business Bay, Dubai" />
                <ContactRow icon={<Icon.Clock s={20}/>}    label="Hours"               value="Monday–Saturday · 10:00–22:00" />
              </ul>

              <div style={{ padding: '1.5rem', background: 'var(--blush)', borderRadius: 'var(--radius)' }}>
                <div className="eyebrow" style={{ color: 'var(--coral-deep)', marginBottom: '.75rem' }}>Prefer to book online?</div>
                <p style={{ marginBottom: '1rem', fontSize: 14 }}>
                  Reserve a slot in our verified Fresha venue — same team, same prices, instant confirmation.
                </p>
                <a className="btn btn-ghost" href="https://www.fresha.com/a/symphony-beauty-clinic-dubai-908-regal-tower-vv7el64y" target="_blank" rel="noopener">
                  Open Fresha booking <Icon.Arrow s={14} />
                </a>
              </div>
            </div>

            <div>
              <BookingForm />
            </div>
          </div>
        </div>
      </section>

      <section className="section" style={{ background: 'var(--ivory-deep)', borderTop: '1px solid var(--hairline)' }}>
        <div className="container">
          <div className="section-head">
            <div>
              <div className="eyebrow"><span className="rule"/>The address</div>
              <h2 className="display">Find <em>us</em> on the 9th floor.</h2>
            </div>
            <p className="body-lg">Regal Tower sits opposite the Business Bay metro. Parking is free for visitors; the lobby concierge will direct you to lift bank B for floor 9.</p>
          </div>

          <div style={{ position: 'relative', aspectRatio: '21/9', borderRadius: 'var(--radius)', overflow: 'hidden', border: '1px solid var(--hairline)' }}>
            <iframe
              src="https://www.google.com/maps?q=Symphony%20Beauty%20Clinic%20908%20Regal%20Tower%20Business%20Bay%20Dubai&z=16&output=embed"
              style={{ width: '100%', height: '100%', border: 0, filter: 'grayscale(0.4) sepia(0.05)' }}
              loading="lazy"
              referrerPolicy="no-referrer-when-downgrade"
              title="Symphony Beauty Clinic location" />
            <div style={{
              position: 'absolute', top: '1.5rem', left: '1.5rem',
              background: 'var(--cream-card)', padding: '1.25rem 1.5rem',
              borderRadius: 'var(--radius)', boxShadow: 'var(--shadow-card)',
              maxWidth: '20rem',
            }}>
              <div className="nav-logo-mark" style={{ marginBottom: '.75rem' }}>S</div>
              <h3 className="display" style={{ fontSize: '1.25rem', marginBottom: '.5rem' }}>Symphony Beauty Clinic</h3>
              <p style={{ fontSize: 13, color: 'var(--stone)' }}>908 Regal Tower, 9th Floor<br/>Business Bay, Dubai, UAE</p>
              <a className="btn-text" style={{ marginTop: '1rem' }} href="https://maps.google.com/?q=25.1864194,55.2605904" target="_blank" rel="noopener">
                Open in maps <Icon.Arrow s={11} />
              </a>
            </div>
          </div>
        </div>
      </section>
    </main>
  );
}

Object.assign(window, { PageTeam, PageReviews, PageContact });