// Direction 2 — "Clinical Quiet"
// Reduced palette, single-column rhythm, considered typography. Reads like a curated journal.
// Gentle warmth comes from very subtle ivory tones and a soft accent.

function DirectionClinical({ palette }) {
  const scrollRef = React.useRef(null);
  const [filter, setFilter] = React.useState('All');

  const c = palette || {
    bg: '#fbf8f3',
    surface: '#f1ece2',
    ink: '#26241f',
    muted: '#7a7466',
    accent: '#5a7a5e',
    rule: 'rgba(38,36,31,.14)',
  };

  const tagsAll = ['All', 'Endodontics', 'Pediatric', 'Trauma', 'Surgical'];
  const filteredTalks = SITE_DATA.talks.filter((t) => filter === 'All' || t.tags.includes(filter));

  return (
    <div
      ref={scrollRef}
      style={{
        width: '100%',
        height: '100%',
        overflowY: 'auto',
        overflowX: 'hidden',
        background: c.bg,
        color: c.ink,
        fontFamily: '"Söhne", "Inter", "Helvetica Neue", system-ui, sans-serif',
      }}
    >
      <style>{`
        .d2-display { font-family: "Tiempos Text", "Source Serif 4", Georgia, serif; font-weight: 400; letter-spacing: -.012em; }
        .d2-italic { font-family: "Tiempos Text", "Source Serif 4", Georgia, serif; font-style: italic; }
        .d2-mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-weight: 400; }
        .d2-num { font-variant-numeric: tabular-nums; }
        .d2-pill { display:inline-flex; align-items:center; gap:6px; padding: 4px 10px; border-radius: 999px; border: 1px solid ${c.rule}; font-size: 11px; color: ${c.muted}; }
        .d2-rowhover { transition: background .2s; }
        .d2-rowhover:hover { background: ${c.surface}; }
        .d2-cta { transition: all .2s; }
        .d2-cta:hover { background: ${c.accent}; border-color: ${c.accent}; color: #fff; }
        .d2-input:focus { border-color: ${c.accent} !important; }
      `}</style>

      {/* Splash / landing */}
      <SplashHero variant="clinical" palette={c} />

      {/* Header */}
      <header
        style={{
          position: 'sticky',
          top: 0,
          zIndex: 20,
          background: c.bg + 'f0',
          backdropFilter: 'blur(10px)',
          borderBottom: `1px solid ${c.rule}`,
          padding: '20px 64px',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'space-between',
        }}
      >
        <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
          <div
            style={{
              width: 28,
              height: 28,
              borderRadius: '50%',
              border: `1.5px solid ${c.ink}`,
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
              fontSize: 11,
              letterSpacing: '.04em',
              fontFamily: '"Tiempos Text", serif',
            }}
          >
            JB
          </div>
          <div className="d2-display" style={{ fontSize: 16 }}>
            Julianna Bair, <span className="d2-italic">DMD</span>
          </div>
        </div>
        <nav style={{ display: 'flex', gap: 32 }}>
          {[['about','About'],['practice','Practice'],['speaking','Speaking'],['gallery','Casebook'],['locations','Locations']].map(([id,label]) => (
            <a
              key={id}
              href="#"
              onClick={(e) => { e.preventDefault(); smoothTo(id, scrollRef.current); }}
              style={{ fontSize: 13, color: c.ink, textDecoration: 'none', fontFamily: 'inherit' }}
            >
              {label}
            </a>
          ))}
        </nav>
        <button
          onClick={() => smoothTo('contact', scrollRef.current)}
          className="d2-cta"
          style={{
            background: 'transparent',
            color: c.ink,
            border: `1px solid ${c.ink}`,
            padding: '9px 16px',
            fontSize: 12,
            fontFamily: 'inherit',
            cursor: 'pointer',
            borderRadius: 999,
          }}
        >
          Refer a patient →
        </button>
      </header>

      {/* Hero — quiet, single column with gentle indents */}
      <AnimSection variant="fade" data-anchor="about" style={{ padding: '120px 64px 80px', maxWidth: 1080, margin: '0 auto' }}>
        <Reveal>
          <div className="d2-mono" style={{ fontSize: 11, color: c.muted, letterSpacing: '.14em', textTransform: 'uppercase', marginBottom: 32 }}>
            <span style={{ display: 'inline-block', width: 8, height: 8, borderRadius: '50%', background: c.accent, marginRight: 10, verticalAlign: 'middle' }} />
            Now seeing referrals · NYC + Floral Park
          </div>
        </Reveal>
        <Reveal delay={120}>
          <h1 className="d2-display" style={{ fontSize: 72, lineHeight: 1.05, margin: 0, letterSpacing: '-.02em', maxWidth: 940 }}>
            A pediatric dentist <span className="d2-italic">and</span> endodontist — caring for teeth across the full arc of their development.
          </h1>
        </Reveal>
        <Reveal delay={260}>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 320px', gap: 64, marginTop: 56, alignItems: 'start' }}>
            <p style={{ fontSize: 17, lineHeight: 1.65, color: c.ink, margin: 0, maxWidth: 560 }}>
              {SITE_DATA.bioShort}
            </p>
            <div style={{ borderLeft: `1px solid ${c.rule}`, paddingLeft: 24 }}>
              <div className="d2-mono" style={{ fontSize: 10, color: c.muted, letterSpacing: '.14em', textTransform: 'uppercase', marginBottom: 14 }}>
                Board specialties
              </div>
              <div className="d2-display" style={{ fontSize: 17, marginBottom: 4 }}>Endodontics</div>
              <div className="d2-display" style={{ fontSize: 17 }}>Pediatric Dentistry</div>
            </div>
          </div>
        </Reveal>
        <Reveal delay={400}>
          <div style={{ marginTop: 80, display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 16 }}>
            <Placeholder label="portrait · headshot" tone="warm" ratio="3/2" />
            <Placeholder label="practice · operatory" tone="sage" ratio="3/2" />
          </div>
        </Reveal>
      </AnimSection>

      {/* Practice */}
      <AnimSection variant="fade" data-anchor="practice" style={{ padding: '96px 64px', borderTop: `1px solid ${c.rule}`, maxWidth: 1080, margin: '0 auto' }}>
        <Reveal>
          <div className="d2-mono" style={{ fontSize: 11, color: c.muted, letterSpacing: '.14em', textTransform: 'uppercase', marginBottom: 16 }}>
            § 01 · Practice
          </div>
        </Reveal>
        <Reveal delay={100}>
          <h2 className="d2-display" style={{ fontSize: 44, margin: '0 0 56px', letterSpacing: '-.018em', maxWidth: 720 }}>
            Areas of <span className="d2-italic">clinical focus</span>.
          </h2>
        </Reveal>
        {SITE_DATA.specialties.map((s, i) => (
          <Reveal key={s.title} delay={i * 120}>
            <div style={{ display: 'grid', gridTemplateColumns: '120px 1fr 1fr', gap: 40, padding: '40px 0', borderTop: `1px solid ${c.rule}` }}>
              <div className="d2-mono" style={{ fontSize: 11, color: c.muted, letterSpacing: '.14em' }}>
                0{i + 1}
              </div>
              <div>
                <h3 className="d2-display" style={{ fontSize: 32, margin: '0 0 14px', letterSpacing: '-.018em' }}>{s.title}</h3>
                <p style={{ fontSize: 15, lineHeight: 1.6, color: c.ink, margin: 0, maxWidth: 420 }}>{s.copy}</p>
              </div>
              <div>
                <div className="d2-mono" style={{ fontSize: 10, color: c.muted, letterSpacing: '.14em', textTransform: 'uppercase', marginBottom: 14 }}>
                  Capabilities
                </div>
                <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
                  {s.points.map((p) => (
                    <span key={p} className="d2-pill">{p}</span>
                  ))}
                </div>
              </div>
            </div>
          </Reveal>
        ))}
        <div style={{ borderTop: `1px solid ${c.rule}` }} />
      </AnimSection>

      {/* Speaking */}
      <AnimSection variant="fade" data-anchor="speaking" style={{ padding: '96px 64px', borderTop: `1px solid ${c.rule}`, background: c.surface }}>
        <div style={{ maxWidth: 1080, margin: '0 auto' }}>
          <Reveal>
            <div className="d2-mono" style={{ fontSize: 11, color: c.muted, letterSpacing: '.14em', textTransform: 'uppercase', marginBottom: 16 }}>
              § 02 · Speaking & teaching
            </div>
          </Reveal>
          <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', marginBottom: 40 }}>
            <Reveal delay={100}>
              <h2 className="d2-display" style={{ fontSize: 44, margin: 0, letterSpacing: '-.018em', maxWidth: 600 }}>
                Selected <span className="d2-italic">lectures, courses, and panels</span>.
              </h2>
            </Reveal>
            <Reveal delay={180}>
              <div style={{ display: 'flex', gap: 6 }}>
                {tagsAll.map((t) => (
                  <button
                    key={t}
                    onClick={() => setFilter(t)}
                    style={{
                      border: `1px solid ${filter === t ? c.ink : c.rule}`,
                      background: filter === t ? c.ink : 'transparent',
                      color: filter === t ? c.bg : c.ink,
                      fontSize: 11,
                      padding: '6px 12px',
                      cursor: 'pointer',
                      fontFamily: 'inherit',
                      borderRadius: 999,
                      transition: 'all .2s',
                    }}
                  >
                    {t}
                  </button>
                ))}
              </div>
            </Reveal>
          </div>
          <div style={{ background: c.bg, border: `1px solid ${c.rule}`, borderRadius: 4 }}>
            {filteredTalks.map((t, i) => (
              <Reveal key={t.topic + t.year} delay={i * 50}>
                <div
                  className="d2-rowhover"
                  style={{
                    display: 'grid',
                    gridTemplateColumns: '60px 1fr 220px 100px',
                    padding: '18px 24px',
                    borderTop: i === 0 ? 'none' : `1px solid ${c.rule}`,
                    alignItems: 'center',
                    gap: 16,
                  }}
                >
                  <span className="d2-mono d2-num" style={{ fontSize: 12, color: c.muted }}>{t.year}</span>
                  <span className="d2-display" style={{ fontSize: 17, letterSpacing: '-.01em' }}>{t.topic}</span>
                  <span style={{ fontSize: 13, color: c.muted }}>{t.venue}</span>
                  <span className="d2-mono" style={{ fontSize: 10, color: c.muted, letterSpacing: '.12em', textTransform: 'uppercase', textAlign: 'right' }}>
                    {t.type}
                  </span>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </AnimSection>

      {/* Casebook gallery */}
      <AnimSection variant="fade" data-anchor="gallery" style={{ padding: '96px 64px', borderTop: `1px solid ${c.rule}` }}>
        <div style={{ maxWidth: 1080, margin: '0 auto' }}>
          <Reveal>
            <div className="d2-mono" style={{ fontSize: 11, color: c.muted, letterSpacing: '.14em', textTransform: 'uppercase', marginBottom: 16 }}>
              § 03 · Casebook
            </div>
          </Reveal>
          <Reveal delay={100}>
            <h2 className="d2-display" style={{ fontSize: 44, margin: '0 0 56px', letterSpacing: '-.018em', maxWidth: 720 }}>
              Documented <span className="d2-italic">clinical work</span>.
            </h2>
          </Reveal>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24 }}>
            {SITE_DATA.cases.map((cs, i) => (
              <Reveal key={cs.title} delay={i * 80}>
                <div>
                  <Placeholder label={cs.tag} tone={['warm','sage','blush','warm','cool','sage'][i % 6]} ratio="4/5" />
                  <div className="d2-mono" style={{ fontSize: 9, color: c.muted, letterSpacing: '.14em', textTransform: 'uppercase', marginTop: 12 }}>
                    Case {String(i + 1).padStart(2, '0')} · {cs.tag}
                  </div>
                  <div className="d2-display" style={{ fontSize: 18, marginTop: 6, letterSpacing: '-.01em' }}>{cs.title}</div>
                  <div style={{ fontSize: 13, color: c.muted, marginTop: 4, lineHeight: 1.6 }}>{cs.detail}</div>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </AnimSection>

      {/* Locations */}
      <AnimSection variant="fade" data-anchor="locations" style={{ padding: '96px 64px', borderTop: `1px solid ${c.rule}`, background: c.surface }}>
        <div style={{ maxWidth: 1080, margin: '0 auto' }}>
          <Reveal>
            <div className="d2-mono" style={{ fontSize: 11, color: c.muted, letterSpacing: '.14em', textTransform: 'uppercase', marginBottom: 16 }}>
              § 04 · Practice locations
            </div>
          </Reveal>
          <Reveal delay={100}>
            <h2 className="d2-display" style={{ fontSize: 44, margin: '0 0 48px', letterSpacing: '-.018em' }}>
              Where she <span className="d2-italic">practices</span>.
            </h2>
          </Reveal>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24 }}>
            {SITE_DATA.locations.map((loc, i) => (
              <Reveal key={loc.name} delay={i * 100}>
                <div style={{ background: c.bg, border: `1px solid ${c.rule}`, padding: 28, borderRadius: 4 }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 8, color: c.muted, fontSize: 11, marginBottom: 14 }}>
                    <Icon.pin size={12} />
                    <span style={{ letterSpacing: '.12em', textTransform: 'uppercase', fontFamily: 'ui-monospace, monospace' }}>{loc.role}</span>
                  </div>
                  <h3 className="d2-display" style={{ fontSize: 24, margin: '0 0 16px', letterSpacing: '-.012em' }}>{loc.name}</h3>
                  <div style={{ fontSize: 14, color: c.ink, lineHeight: 1.7 }}>
                    {loc.address}<br />
                    {loc.city}
                  </div>
                  <div style={{ marginTop: 14, paddingTop: 14, borderTop: `1px solid ${c.rule}`, fontSize: 13, color: c.muted, display: 'flex', alignItems: 'center', gap: 8 }}>
                    <Icon.cal size={12} />
                    {loc.hours}
                  </div>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </AnimSection>

      {/* Contact */}
      <AnimSection variant="fade" data-anchor="contact" style={{ padding: '96px 64px', borderTop: `1px solid ${c.rule}` }}>
        <div style={{ maxWidth: 1080, margin: '0 auto', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64 }}>
          <Reveal>
            <div className="d2-mono" style={{ fontSize: 11, color: c.muted, letterSpacing: '.14em', textTransform: 'uppercase', marginBottom: 16 }}>
              § 05 · Refer a patient
            </div>
            <h2 className="d2-display" style={{ fontSize: 56, margin: '0 0 24px', letterSpacing: '-.02em', lineHeight: 1.05 }}>
              Send a <span className="d2-italic">referral</span>.
            </h2>
            <p style={{ fontSize: 15, lineHeight: 1.65, color: c.ink, maxWidth: 380, margin: '0 0 32px' }}>
              For referring practices and parents alike. Dr. Bair's office responds within one business day.
            </p>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, fontSize: 14, color: c.ink }}>
              <Icon.mail size={14} style={{ color: c.accent }} />
              referrals@drjbair.com
            </div>
          </Reveal>
          <Reveal delay={150}>
            <ClinicalForm c={c} />
          </Reveal>
        </div>
        <div style={{ marginTop: 96, paddingTop: 24, borderTop: `1px solid ${c.rule}`, textAlign: 'center', color: c.muted, fontSize: 12 }}>
          © 2026 Julianna Bair, DMD — Practicing in NYC + Floral Park
        </div>
      </AnimSection>
    </div>
  );
}

function ClinicalForm({ c }) {
  const [s, setS] = React.useState({ name: '', email: '', practice: '', notes: '', sent: false });
  if (s.sent) {
    return (
      <div style={{ padding: 32, border: `1px solid ${c.accent}`, borderRadius: 4, background: c.bg }}>
        <div style={{ width: 36, height: 36, borderRadius: '50%', background: c.accent, color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 16 }}>✓</div>
        <h3 className="d2-display" style={{ fontSize: 22, margin: '0 0 8px' }}>Referral received</h3>
        <p style={{ fontSize: 14, color: c.muted, margin: 0, lineHeight: 1.6 }}>
          Thank you, {s.name.split(' ')[0] || 'colleague'}. You'll hear back within one business day.
        </p>
      </div>
    );
  }
  const inputStyle = {
    width: '100%', background: c.bg, border: `1px solid ${c.rule}`, padding: '12px 14px',
    fontFamily: 'inherit', fontSize: 14, color: c.ink, outline: 'none', borderRadius: 4, transition: 'border-color .2s',
  };
  const labelStyle = { display: 'block', fontSize: 11, color: c.muted, letterSpacing: '.12em', textTransform: 'uppercase', marginBottom: 6, fontFamily: 'ui-monospace, monospace' };
  const valid = s.name.length > 1 && /@/.test(s.email) && s.notes.length > 5;
  return (
    <form onSubmit={(e) => { e.preventDefault(); if (valid) setS({ ...s, sent: true }); }}>
      <div style={{ marginBottom: 16 }}>
        <label style={labelStyle}>Name</label>
        <input className="d2-input" style={inputStyle} value={s.name} onChange={(e) => setS({ ...s, name: e.target.value })} />
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12, marginBottom: 16 }}>
        <div>
          <label style={labelStyle}>Email</label>
          <input className="d2-input" type="email" style={inputStyle} value={s.email} onChange={(e) => setS({ ...s, email: e.target.value })} />
        </div>
        <div>
          <label style={labelStyle}>Practice / role</label>
          <input className="d2-input" style={inputStyle} value={s.practice} onChange={(e) => setS({ ...s, practice: e.target.value })} />
        </div>
      </div>
      <div style={{ marginBottom: 20 }}>
        <label style={labelStyle}>Patient & clinical notes</label>
        <textarea className="d2-input" rows={5} style={{ ...inputStyle, resize: 'vertical' }} value={s.notes} onChange={(e) => setS({ ...s, notes: e.target.value })} />
      </div>
      <button
        type="submit"
        disabled={!valid}
        className="d2-cta"
        style={{
          background: valid ? c.ink : 'transparent',
          color: valid ? c.bg : c.muted,
          border: `1px solid ${valid ? c.ink : c.rule}`,
          padding: '12px 20px',
          fontSize: 13,
          cursor: valid ? 'pointer' : 'not-allowed',
          fontFamily: 'inherit',
          borderRadius: 4,
          width: '100%',
        }}
      >
        Send referral →
      </button>
    </form>
  );
}

Object.assign(window, { DirectionClinical });