// Page: Specialty detail
function SpecialtyPage({ id, onBook }) {
  const s = SPECIALTIES.find(x => x.id === id);
  if (!s) return <NotFound/>;
  const isTeal = s.family === 'teal';
  const conditions = s.conditions.map(c => ({ id: c, ...CONDITIONS[c] })).filter(c => c.name);
  const doctors = DOCTORS.filter(d => {
    if (s.name === 'Sleep Medicine') return d.specialty === 'Neurology';
    if (s.name === 'De-Addiction') return d.specialty === 'Psychiatry';
    return d.specialty === s.name;
  });

  return (
    <main>
      <PageHero
        eyebrow={`Specialty · ${s.name}`}
        title={s.tagline}
        body={s.summary}
        accent={isTeal ? 'teal' : 'violet'}
        onBook={onBook}
      />

      <section style={{ maxWidth: 'var(--container)', margin: '0 auto', padding: '64px 24px' }}>
        <div className="overline" style={{ marginBottom: 14 }}>Conditions Treated</div>
        <h2 style={{ font: 'var(--t-h1)', color: 'var(--violet-700)', margin: '0 0 28px' }}>{s.name} — what we see most often.</h2>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(260px, 1fr))', gap: 14 }}>
          {conditions.map(c => <ConditionTile key={c.id} c={c}/>)}
        </div>
      </section>

      {doctors.length > 0 && (
        <section style={{ background: 'var(--bg-soft)', padding: '72px 0' }}>
          <div style={{ maxWidth: 'var(--container)', margin: '0 auto', padding: '0 24px' }}>
            <div className="overline" style={{ marginBottom: 14 }}>Practitioners</div>
            <h2 style={{ font: 'var(--t-h1)', color: 'var(--violet-700)', margin: '0 0 28px' }}>Specialists in {s.name}.</h2>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(300px, 1fr))', gap: 16 }}>
              {doctors.map(d => <DoctorCard key={d.id} d={d}/>)}
            </div>
          </div>
        </section>
      )}

      <section style={{ maxWidth: 'var(--container)', margin: '0 auto', padding: '72px 24px' }}>
        <CalloutBand onBook={onBook} accent={isTeal ? 'teal' : 'violet'} />
      </section>
    </main>
  );
}

function PageHero({ eyebrow, title, body, accent, onBook }) {
  const isTeal = accent === 'teal';
  return (
    <section style={{ maxWidth: 'var(--container)', margin: '0 auto', padding: '72px 24px 56px' }}>
      <div className="overline" style={{ marginBottom: 18, color: isTeal ? 'var(--teal-600)' : 'var(--lavender-600)' }}>{eyebrow}</div>
      <h1 style={{ font: 'var(--t-display-2)', color: 'var(--violet-700)', margin: '0 0 22px', textWrap: 'balance', maxWidth: 880 }}>{title}</h1>
      <p style={{ font: 'var(--t-body-lg)', color: 'var(--ink-700)', maxWidth: 640, margin: '0 0 28px' }}>{body}</p>
      <div style={{ display: 'flex', gap: 14, alignItems: 'center', flexWrap: 'wrap' }}>
        <Button onClick={onBook} accent={isTeal ? 'teal' : null}>Book an Appointment</Button>
        <Link to="doctors" style={{ font: 'var(--t-button)', color: 'var(--violet-700)', textDecoration: 'none', display: 'inline-flex', alignItems: 'center', gap: 6, padding: '14px 18px' }}>
          Meet our doctors <ArrowRight size={14}/>
        </Link>
      </div>
    </section>
  );
}

function CalloutBand({ onBook, accent }) {
  return (
    <div style={{
      background: 'linear-gradient(135deg, var(--bg-soft) 0%, #ECE5F3 100%)',
      borderRadius: 'var(--radius-xl)',
      padding: '48px 48px',
      display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 32, flexWrap: 'wrap',
    }}>
      <div style={{ maxWidth: 540 }}>
        <h3 style={{ font: 'var(--t-h2)', color: 'var(--violet-700)', margin: '0 0 8px', textWrap: 'balance' }}>Not sure which specialty?</h3>
        <p style={{ font: 'var(--t-body)', color: 'var(--ink-700)', margin: 0 }}>Tell us your concern when booking — our team will route you to the right specialist.</p>
      </div>
      <Button onClick={onBook} accent={accent === 'teal' ? 'teal' : null}>Book an Appointment</Button>
    </div>
  );
}

// Page: Doctor detail
function DoctorPage({ id, onBook }) {
  const d = DOCTORS.find(x => x.id === id);
  if (!d) return <NotFound/>;
  return (
    <main>
      <section style={{ maxWidth: 'var(--container)', margin: '0 auto', padding: '72px 24px 32px' }}>
        <Link to="doctors" style={{ font: 'var(--t-body-sm)', color: 'var(--lavender-600)', textDecoration: 'none', display: 'inline-flex', alignItems: 'center', gap: 6, marginBottom: 20 }}>
          ← Our Specialists
        </Link>
        <div className="doc-grid" style={{ display: 'grid', gridTemplateColumns: '260px 1fr', gap: 48, alignItems: 'flex-start' }}>
          <div style={{
            width: 260, height: 260, borderRadius: 'var(--radius-xl)',
            background: d.g,
            boxShadow: 'var(--shadow-md)',
            overflow: 'hidden',
            position: 'relative',
          }}>
            {d.photo && (
              <img src={d.photo} alt={d.name} style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }}/>
            )}
          </div>
          <div>
            <div className="overline" style={{ marginBottom: 14 }}>{d.specialty}</div>
            <h1 style={{ font: 'var(--t-display-2)', color: 'var(--violet-700)', margin: '0 0 8px', letterSpacing: '-0.01em' }}>{d.name}</h1>
            <div style={{ font: 'var(--t-body-lg)', color: 'var(--ink-700)', marginBottom: 8 }}>{d.role}</div>
            <div style={{ font: 11, fontWeight: 600, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--lavender-600)', marginBottom: 28 }}>{d.degrees}</div>
            <p style={{ font: 'var(--t-body-lg)', color: 'var(--ink-700)', maxWidth: 620, margin: '0 0 28px', lineHeight: 1.6 }}>{d.bio}</p>
            <div style={{ display: 'flex', gap: 14, flexWrap: 'wrap' }}>
              <Button onClick={onBook}>Book with {d.name.split(' ').slice(0, 2).join(' ')}</Button>
            </div>
          </div>
        </div>
        <style>{`@media (max-width: 760px) { .doc-grid { grid-template-columns: 1fr !important; gap: 24px !important; } .doc-grid > div:first-child { width: 100% !important; max-width: 320px; height: 320px !important; } }`}</style>
      </section>

      {d.credentials && d.credentials.length > 0 && (
        <section style={{ maxWidth: 'var(--container)', margin: '0 auto', padding: '24px 24px 56px' }}>
          <div className="overline" style={{ marginBottom: 18 }}>Credentials & Training</div>
          <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(360px, 1fr))', gap: '8px 32px' }}>
            {d.credentials.map((c, i) => (
              <li key={i} style={{ font: 'var(--t-body)', color: 'var(--ink-700)', padding: '10px 0', borderBottom: '1px solid var(--hairline)', display: 'flex', alignItems: 'flex-start', gap: 12 }}>
                <span style={{ color: 'var(--lavender-500)', flex: '0 0 auto', marginTop: 2 }}>›</span>
                <span style={{ flex: 1 }}>{c}</span>
              </li>
            ))}
          </ul>
        </section>
      )}

      {d.services && d.services.length > 0 && (
        <section style={{ maxWidth: 'var(--container)', margin: '0 auto', padding: '24px 24px 56px' }}>
          <div className="overline" style={{ marginBottom: 18 }}>Services Offered</div>
          <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(360px, 1fr))', gap: '8px 32px' }}>
            {d.services.map((s, i) => (
              <li key={i} style={{ font: 'var(--t-body)', color: 'var(--ink-700)', padding: '12px 0', borderBottom: '1px solid var(--hairline)', display: 'flex', alignItems: 'flex-start', gap: 14 }}>
                <span style={{ font: 11, fontWeight: 700, color: 'var(--lavender-600)', flex: '0 0 28px', marginTop: 4, letterSpacing: '0.04em' }}>{String(i + 1).padStart(2, '0')}</span>
                <span style={{ flex: 1 }}>{s}</span>
              </li>
            ))}
          </ul>
        </section>
      )}

      <section style={{ background: 'var(--bg-soft)', padding: '72px 0' }}>
        <div style={{ maxWidth: 'var(--container)', margin: '0 auto', padding: '0 24px' }}>
          <div className="overline" style={{ marginBottom: 14 }}>Schedule · Where {d.name.split(' ')[0]} {d.name.split(' ')[1]} consults</div>
          <h2 style={{ font: 'var(--t-h2)', color: 'var(--violet-700)', margin: '0 0 24px', maxWidth: 720 }}>
            Clinic days &amp; timings.
          </h2>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(320px, 1fr))', gap: 16 }}>
            {(d.schedule || []).map((s, i) => (
              <div key={i} style={{ background: 'white', borderRadius: 'var(--radius-lg)', padding: 28, boxShadow: 'var(--shadow-sm)', border: '1px solid var(--hairline-cool)' }}>
                <div style={{ font: '600 22px/1.2 var(--font-display)', color: 'var(--violet-700)', marginBottom: 6 }}>{s.clinic}</div>
                {s.address && (
                  <div style={{ font: 'var(--t-body-sm)', color: 'var(--fg-2)', marginBottom: 16, lineHeight: 1.55 }}>{s.address}</div>
                )}
                {!s.address && (() => {
                  const matched = LOCATIONS.find(l => l.name === s.clinic);
                  if (!matched) return null;
                  return (
                    <div style={{ font: 'var(--t-body-sm)', color: 'var(--fg-2)', marginBottom: 16, lineHeight: 1.55 }}>
                      {matched.addrLines.join(', ')}
                    </div>
                  );
                })()}
                <div style={{ font: 11, fontWeight: 600, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--lavender-600)', marginBottom: 8 }}>Hours</div>
                {s.lines.map((line, j) => (
                  <div key={j} style={{ font: 'var(--t-body-sm)', color: 'var(--ink-900)', marginBottom: 4, fontFeatureSettings: '"tnum"' }}>{line}</div>
                ))}
              </div>
            ))}
          </div>
        </div>
      </section>
    </main>
  );
}

// Page: Doctors index
function DoctorsPage({ onBook }) {
  return (
    <main>
      <DoctorsSection/>
    </main>
  );
}

// Page: Conditions index
function ConditionsPage({ onBook }) {
  return (
    <main>
      <section style={{ maxWidth: 'var(--container)', margin: '0 auto', padding: '72px 24px 0' }}>
        <div className="overline" style={{ marginBottom: 18 }}>Conditions We Treat</div>
        <h1 style={{ font: 'var(--t-display-2)', color: 'var(--violet-700)', margin: '0 0 18px', textWrap: 'balance', maxWidth: 880 }}>
          Common reasons patients come to Prashanti Clinic.
        </h1>
        <p style={{ font: 'var(--t-body-lg)', color: 'var(--ink-700)', maxWidth: 640, margin: '0 0 8px' }}>
          A working list of the conditions we evaluate and treat — across psychiatry, neurology, sleep medicine, de-addiction and ophthalmology.
        </p>
      </section>
      <ConditionsIndex/>
      <section style={{ maxWidth: 'var(--container)', margin: '0 auto', padding: '32px 24px 96px' }}>
        <CalloutBand onBook={onBook}/>
      </section>
    </main>
  );
}

// Page: Specialties index
function SpecialtiesPage({ onBook }) {
  return (
    <main>
      <section style={{ maxWidth: 'var(--container)', margin: '0 auto', padding: '72px 24px 0' }}>
        <div className="overline" style={{ marginBottom: 18 }}>Five Specialties</div>
        <h1 style={{ font: 'var(--t-display-2)', color: 'var(--violet-700)', margin: '0 0 18px', textWrap: 'balance', maxWidth: 880 }}>
          A practice spanning five connected specialties.
        </h1>
        <p style={{ font: 'var(--t-body-lg)', color: 'var(--ink-700)', maxWidth: 640, margin: '0 0 8px' }}>
          Each link below opens a deep-dive on the specialty — conditions covered, equipment used, and the doctors who lead it.
        </p>
      </section>
      <SpecialtiesOverview/>
    </main>
  );
}

// Page: Locations
function LocationsPage({ onBook }) {
  return (
    <main>
      <section style={{ maxWidth: 'var(--container)', margin: '0 auto', padding: '72px 24px 56px' }}>
        <div className="overline" style={{ marginBottom: 18 }}>Visit a Clinic</div>
        <h1 style={{ font: 'var(--t-display-2)', color: 'var(--violet-700)', margin: '0 0 18px', textWrap: 'balance', maxWidth: 880 }}>
          Three clinics across South Gujarat.
        </h1>
        <p style={{ font: 'var(--t-body-lg)', color: 'var(--ink-700)', maxWidth: 640, margin: '0 0 28px' }}>
          Sagrampura is the flagship — full diagnostics, rTMS and the sleep lab. The Lenora at New Citylight runs evening consultancy. Our Valsad Super Speciality Clinic extends the practice into Abrama Village.
        </p>
      </section>
      <section style={{ maxWidth: 'var(--container)', margin: '0 auto', padding: '0 24px 96px' }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(320px, 1fr))', gap: 16 }}>
          {LOCATIONS.map(l => <LocationCard key={l.id} l={l} full/>)}
        </div>
        <div style={{ marginTop: 36 }}>
          <Button onClick={onBook}>Book an Appointment</Button>
        </div>
      </section>
    </main>
  );
}

function NotFound() {
  return (
    <main style={{ maxWidth: 'var(--container)', margin: '0 auto', padding: '128px 24px', textAlign: 'center' }}>
      <h1 style={{ font: 'var(--t-h1)', color: 'var(--violet-700)' }}>Page not found</h1>
      <p style={{ font: 'var(--t-body)', color: 'var(--fg-2)' }}>The page you're looking for doesn't exist.</p>
      <Link to="home" style={{ font: 'var(--t-button)', color: 'var(--violet-700)' }}>← Back to Home</Link>
    </main>
  );
}

Object.assign(window, { SpecialtyPage, DoctorPage, DoctorsPage, ConditionsPage, SpecialtiesPage, LocationsPage, NotFound, PageHero, CalloutBand });
