// Direction 3 — "Modern Approachable"
// Warm yet bolder. A sans-serif display, generous radius, color-blocked sections.
// Slightly more dimensional — feels brand-forward and confident.

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

  const c = palette || {
    bg: '#f6f1ea',
    surface: '#ffffff',
    block: '#1d1f1c',
    ink: '#1d1f1c',
    muted: '#69655c',
    accent: '#c66a4d',
    soft: '#ecdcd2',
    rule: 'rgba(29,31,28,.12)',
  };

  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: '"Inter", "Helvetica Neue", system-ui, sans-serif',
      }}
    >
      <style>{`
        .d3-display { font-family: "Fraunces", "Tiempos Headline", Georgia, serif; font-weight: 350; letter-spacing: -.025em; font-optical-sizing: auto; font-variation-settings: "SOFT" 50, "WONK" 0, "opsz" 144; }
        .d3-italic { font-family: "Fraunces", serif; font-style: italic; }
        .d3-mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; }
        .d3-num { font-variant-numeric: tabular-nums; }
        .d3-card { border-radius: 18px; transition: transform .3s, box-shadow .3s; }
        .d3-card:hover { transform: translateY(-2px); box-shadow: 0 16px 40px -16px rgba(29,31,28,.18); }
        .d3-pill { display:inline-flex; align-items:center; padding: 6px 12px; border-radius: 999px; font-size: 11px; font-weight: 500; }
        .d3-cta { transition: all .2s; }
        .d3-cta:hover { transform: translateY(-1px); }
      `}</style>

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

      {/* Header */}
      <header style={{
        position: 'sticky', top: 16, zIndex: 20,
        margin: '0 24px',
        background: 'rgba(255,255,255,.85)', backdropFilter: 'blur(14px)',
        border: `1px solid ${c.rule}`, borderRadius: 999,
        padding: '10px 14px 10px 22px',
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      }}>
        <div style={{ display: 'flex', alignItems: 'baseline', gap: 10 }}>
          <span className="d3-display" style={{ fontSize: 18, fontWeight: 400 }}>
            <span className="d3-italic">Dr.</span> Julianna Bair
          </span>
          <span style={{ fontSize: 11, color: c.muted, letterSpacing: '.04em' }}>DMD · NYC</span>
        </div>
        <nav style={{ display: 'flex', gap: 24 }}>
          {[['about','About'],['practice','Practice'],['speaking','Speaking'],['gallery','Cases'],['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', fontWeight: 500 }}>
              {label}
            </a>
          ))}
        </nav>
        <button onClick={() => smoothTo('contact', scrollRef.current)} className="d3-cta"
                style={{ background: c.ink, color: c.bg, border: 'none', padding: '10px 18px', borderRadius: 999, fontSize: 13, fontFamily: 'inherit', cursor: 'pointer', fontWeight: 500 }}>
          Refer a patient →
        </button>
      </header>

      {/* Hero — color-blocked rounded card */}
      <AnimSection variant="scale" data-anchor="about" style={{ padding: '32px 24px 0' }}>
        <Reveal>
          <div style={{
            background: c.soft, borderRadius: 28, padding: '64px 56px 56px',
            position: 'relative', overflow: 'hidden',
          }}>
            <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 56, alignItems: 'end' }}>
              <div>
                <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 28 }}>
                  <span style={{ width: 8, height: 8, borderRadius: '50%', background: c.accent }} />
                  <span className="d3-mono" style={{ fontSize: 11, color: c.ink, letterSpacing: '.12em', textTransform: 'uppercase' }}>
                    Dual board · Endo + Pedo
                  </span>
                </div>
                <h1 className="d3-display" style={{ fontSize: 84, lineHeight: 0.98, margin: 0, color: c.ink }}>
                  Care for teeth<br />
                  at <span className="d3-italic" style={{ color: c.accent }}>every</span> stage<br />
                  of growing up.
                </h1>
                <p style={{ fontSize: 16, lineHeight: 1.65, color: c.ink, margin: '32px 0 0', maxWidth: 480 }}>
                  Dr. Bair is one of a small group of clinicians dual board-specialized in endodontics and pediatric dentistry. She practices in Manhattan and Floral Park.
                </p>
                <div style={{ display: 'flex', gap: 12, marginTop: 32 }}>
                  <button onClick={() => smoothTo('contact', scrollRef.current)} className="d3-cta"
                          style={{ background: c.ink, color: c.bg, border: 'none', padding: '14px 22px', borderRadius: 999, fontSize: 14, fontFamily: 'inherit', cursor: 'pointer', fontWeight: 500 }}>
                    Refer a patient →
                  </button>
                  <button onClick={() => smoothTo('speaking', scrollRef.current)} className="d3-cta"
                          style={{ background: 'transparent', color: c.ink, border: `1px solid ${c.ink}`, padding: '14px 22px', borderRadius: 999, fontSize: 14, fontFamily: 'inherit', cursor: 'pointer', fontWeight: 500 }}>
                    Book a talk
                  </button>
                </div>
              </div>
              <div style={{ position: 'relative' }}>
                <Placeholder label="portrait · headshot" tone="warm" ratio="3/4" radius={20} />
                <div style={{
                  position: 'absolute', bottom: -16, left: -16,
                  background: c.surface, borderRadius: 14, padding: '12px 16px',
                  boxShadow: '0 12px 28px -12px rgba(29,31,28,.18)',
                  display: 'flex', alignItems: 'center', gap: 10,
                }}>
                  <span style={{ width: 8, height: 8, borderRadius: '50%', background: '#5a7a5e' }} />
                  <span style={{ fontSize: 12, fontWeight: 500 }}>Now seeing referrals</span>
                </div>
              </div>
            </div>
          </div>
        </Reveal>

        {/* stat strip */}
        <Reveal delay={150}>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16, marginTop: 16 }}>
            {[
              ['02', 'Board specialties'],
              ['06+', 'Lecture topics'],
              ['02', 'NYC-area locations'],
              ['1 day', 'Referral turnaround'],
            ].map(([n, label]) => (
              <div key={label} style={{ background: c.surface, borderRadius: 18, padding: 24, border: `1px solid ${c.rule}` }}>
                <div className="d3-display" style={{ fontSize: 40, lineHeight: 1 }}>{n}</div>
                <div style={{ fontSize: 12, color: c.muted, marginTop: 8 }}>{label}</div>
              </div>
            ))}
          </div>
        </Reveal>
      </AnimSection>

      {/* Practice */}
      <AnimSection variant="scale" data-anchor="practice" style={{ padding: '96px 24px' }}>
        <Reveal>
          <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', marginBottom: 40 }}>
            <div>
              <div className="d3-mono" style={{ fontSize: 11, color: c.muted, letterSpacing: '.14em', textTransform: 'uppercase', marginBottom: 14 }}>
                What she does
              </div>
              <h2 className="d3-display" style={{ fontSize: 56, margin: 0, lineHeight: 1.0 }}>
                Two specialties. <span className="d3-italic">One careful approach</span>.
              </h2>
            </div>
          </div>
        </Reveal>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
          {SITE_DATA.specialties.map((s, i) => (
            <Reveal key={s.title} delay={i * 120}>
              <div className="d3-card" style={{
                background: i === 0 ? c.surface : c.ink,
                color: i === 0 ? c.ink : c.bg,
                padding: 36, height: '100%',
                border: i === 0 ? `1px solid ${c.rule}` : 'none',
              }}>
                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 24 }}>
                  <span className="d3-pill" style={{ background: i === 0 ? c.soft : 'rgba(255,255,255,.12)', color: i === 0 ? c.accent : c.bg }}>
                    {i === 0 ? 'Endodontics' : 'Pediatric Dentistry'}
                  </span>
                  <span className="d3-mono" style={{ fontSize: 11, opacity: .6 }}>0{i + 1}</span>
                </div>
                <h3 className="d3-display" style={{ fontSize: 36, margin: '0 0 16px', lineHeight: 1.05 }}>
                  {i === 0 ? <>Saving teeth, <span className="d3-italic">microscopically</span>.</> : <>Care that meets kids <span className="d3-italic">where they are</span>.</>}
                </h3>
                <p style={{ fontSize: 14, lineHeight: 1.65, opacity: .85, margin: '0 0 24px', maxWidth: 380 }}>{s.copy}</p>
                <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
                  {s.points.map((p) => (
                    <span key={p} className="d3-pill" style={{
                      background: i === 0 ? c.bg : 'rgba(255,255,255,.08)',
                      color: i === 0 ? c.ink : c.bg,
                      border: i === 0 ? `1px solid ${c.rule}` : '1px solid rgba(255,255,255,.14)',
                    }}>
                      {p}
                    </span>
                  ))}
                </div>
              </div>
            </Reveal>
          ))}
        </div>
      </AnimSection>

      {/* Speaking */}
      <AnimSection variant="scale" data-anchor="speaking" style={{ padding: '96px 24px', background: c.ink, color: c.bg, borderRadius: 28, margin: '0 24px' }}>
        <Reveal>
          <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', marginBottom: 40, padding: '0 32px' }}>
            <div>
              <div className="d3-mono" style={{ fontSize: 11, color: 'rgba(255,255,255,.55)', letterSpacing: '.14em', textTransform: 'uppercase', marginBottom: 14 }}>
                Speaking & teaching
              </div>
              <h2 className="d3-display" style={{ fontSize: 56, margin: 0, lineHeight: 1.0 }}>
                Lectures, courses, <span className="d3-italic" style={{ color: c.accent }}>panels</span>.
              </h2>
            </div>
            <div style={{ display: 'flex', gap: 6 }}>
              {tagsAll.map((t) => (
                <button key={t} onClick={() => setFilter(t)}
                        style={{
                          border: `1px solid ${filter === t ? c.bg : 'rgba(255,255,255,.2)'}`,
                          background: filter === t ? c.bg : 'transparent',
                          color: filter === t ? c.ink : c.bg,
                          fontSize: 11, padding: '8px 14px', cursor: 'pointer',
                          fontFamily: 'inherit', borderRadius: 999, transition: 'all .2s', fontWeight: 500,
                        }}>
                  {t}
                </button>
              ))}
            </div>
          </div>
        </Reveal>
        <div style={{ padding: '0 32px' }}>
          {filteredTalks.map((t, i) => (
            <Reveal key={t.topic + t.year} delay={i * 50}>
              <div style={{
                display: 'grid', gridTemplateColumns: '70px 1fr 200px 90px 24px',
                gap: 24, padding: '22px 0',
                borderTop: `1px solid rgba(255,255,255,.12)`,
                alignItems: 'center',
              }}>
                <span className="d3-mono d3-num" style={{ fontSize: 13, color: 'rgba(255,255,255,.55)' }}>{t.year}</span>
                <span className="d3-display" style={{ fontSize: 22 }}>{t.topic}</span>
                <span style={{ fontSize: 13, color: 'rgba(255,255,255,.7)' }}>{t.venue}</span>
                <span className="d3-pill" style={{ background: 'rgba(255,255,255,.1)', color: c.bg, justifySelf: 'start' }}>{t.type}</span>
                <Icon.arrow size={16} style={{ color: 'rgba(255,255,255,.55)' }} />
              </div>
            </Reveal>
          ))}
          <div style={{ borderTop: `1px solid rgba(255,255,255,.12)` }} />
        </div>
      </AnimSection>

      {/* Gallery */}
      <AnimSection variant="scale" data-anchor="gallery" style={{ padding: '96px 24px' }}>
        <Reveal>
          <div className="d3-mono" style={{ fontSize: 11, color: c.muted, letterSpacing: '.14em', textTransform: 'uppercase', marginBottom: 14 }}>
            Casebook
          </div>
          <h2 className="d3-display" style={{ fontSize: 56, margin: '0 0 48px', lineHeight: 1.0 }}>
            Selected <span className="d3-italic">cases</span>.
          </h2>
        </Reveal>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', gap: 16 }}>
          {SITE_DATA.cases.map((cs, i) => {
            const layouts = [
              { col: 'span 3', tone: 'warm', ratio: '4/3' },
              { col: 'span 3', tone: 'blush', ratio: '4/3' },
              { col: 'span 2', tone: 'sage', ratio: '3/4' },
              { col: 'span 2', tone: 'warm', ratio: '3/4' },
              { col: 'span 2', tone: 'cool', ratio: '3/4' },
              { col: 'span 6', tone: 'blush', ratio: '21/9' },
            ];
            const L = layouts[i];
            return (
              <Reveal key={cs.title} delay={i * 70} style={{ gridColumn: L.col }}>
                <div className="d3-card" style={{ background: c.surface, padding: 16, border: `1px solid ${c.rule}` }}>
                  <Placeholder label={cs.tag} tone={L.tone} ratio={L.ratio} radius={10} />
                  <div style={{ padding: '16px 6px 6px' }}>
                    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
                      <span className="d3-display" style={{ fontSize: 18 }}>{cs.title}</span>
                      <span className="d3-pill" style={{ background: c.soft, color: c.accent }}>{cs.tag}</span>
                    </div>
                    <div style={{ fontSize: 13, color: c.muted, marginTop: 6, lineHeight: 1.6 }}>{cs.detail}</div>
                  </div>
                </div>
              </Reveal>
            );
          })}
        </div>
      </AnimSection>

      {/* Locations */}
      <AnimSection variant="scale" data-anchor="locations" style={{ padding: '0 24px 96px' }}>
        <Reveal>
          <div className="d3-mono" style={{ fontSize: 11, color: c.muted, letterSpacing: '.14em', textTransform: 'uppercase', marginBottom: 14 }}>
            Practice locations
          </div>
          <h2 className="d3-display" style={{ fontSize: 56, margin: '0 0 40px', lineHeight: 1.0 }}>
            Two practices, <span className="d3-italic">one inbox</span>.
          </h2>
        </Reveal>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
          {SITE_DATA.locations.map((loc, i) => (
            <Reveal key={loc.name} delay={i * 100}>
              <div className="d3-card" style={{ background: c.surface, padding: 0, border: `1px solid ${c.rule}`, overflow: 'hidden' }}>
                <Placeholder label={`map · ${loc.city}`} tone={i === 0 ? 'cool' : 'sage'} ratio="2/1" />
                <div style={{ padding: 28 }}>
                  <span className="d3-pill" style={{ background: c.soft, color: c.accent, marginBottom: 12 }}>{loc.role}</span>
                  <h3 className="d3-display" style={{ fontSize: 28, margin: '12px 0 10px', lineHeight: 1.1 }}>{loc.name}</h3>
                  <div style={{ fontSize: 14, color: c.ink, lineHeight: 1.7 }}>
                    {loc.address}<br />{loc.city}
                  </div>
                  <div style={{ marginTop: 16, paddingTop: 16, borderTop: `1px solid ${c.rule}`, fontSize: 13, color: c.muted, display: 'flex', alignItems: 'center', gap: 8 }}>
                    <Icon.cal size={12} />{loc.hours}
                  </div>
                </div>
              </div>
            </Reveal>
          ))}
        </div>
      </AnimSection>

      {/* Contact */}
      <AnimSection variant="scale" data-anchor="contact" style={{ padding: '0 24px 32px' }}>
        <div style={{
          background: c.soft, borderRadius: 28, padding: '64px 56px',
          display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 48,
        }}>
          <Reveal>
            <div className="d3-mono" style={{ fontSize: 11, color: c.muted, letterSpacing: '.14em', textTransform: 'uppercase', marginBottom: 14 }}>
              Refer a patient
            </div>
            <h2 className="d3-display" style={{ fontSize: 64, margin: '0 0 24px', lineHeight: 0.98 }}>
              Send your <span className="d3-italic" style={{ color: c.accent }}>case</span>.
            </h2>
            <p style={{ fontSize: 16, lineHeight: 1.65, color: c.ink, maxWidth: 420, margin: '0 0 32px' }}>
              Whether you're a colleague referring a complex case or a parent looking for care — Dr. Bair's office responds within one business day.
            </p>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 10, fontSize: 14 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                <Icon.mail size={14} style={{ color: c.accent }} /> referrals@drjbair.com
              </div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                <Icon.pin size={14} style={{ color: c.accent }} /> NYC + Floral Park
              </div>
            </div>
          </Reveal>
          <Reveal delay={150}>
            <ModernForm c={c} />
          </Reveal>
        </div>
        <div style={{ marginTop: 32, paddingTop: 24, color: c.muted, fontSize: 12, display: 'flex', justifyContent: 'space-between' }}>
          <span>© 2026 Julianna Bair, DMD</span>
          <span>Designed in New York</span>
        </div>
      </AnimSection>
    </div>
  );
}

function ModernForm({ c }) {
  const [s, setS] = React.useState({ name: '', email: '', practice: '', notes: '', sent: false });
  if (s.sent) {
    return (
      <div style={{ background: c.surface, borderRadius: 18, padding: 32, textAlign: 'center' }}>
        <div style={{ width: 48, height: 48, borderRadius: '50%', background: c.accent, color: '#fff', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', marginBottom: 16, fontSize: 22 }}>✓</div>
        <h3 className="d3-display" style={{ fontSize: 26, margin: '0 0 8px' }}>Referral sent</h3>
        <p style={{ fontSize: 14, color: c.muted, margin: 0 }}>You'll hear back within one business day.</p>
      </div>
    );
  }
  const inputStyle = {
    width: '100%', background: c.surface, border: `1px solid ${c.rule}`, padding: '14px 16px',
    fontFamily: 'inherit', fontSize: 14, color: c.ink, outline: 'none', borderRadius: 12, transition: 'border-color .2s, box-shadow .2s',
  };
  const labelStyle = { display: 'block', fontSize: 11, color: c.muted, letterSpacing: '.1em', textTransform: 'uppercase', marginBottom: 6, fontWeight: 500 };
  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 }); }}
          style={{ background: c.surface, borderRadius: 18, padding: 28, border: `1px solid ${c.rule}` }}>
      <div style={{ marginBottom: 14 }}>
        <label style={labelStyle}>Name</label>
        <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: 14 }}>
        <div>
          <label style={labelStyle}>Email</label>
          <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 style={inputStyle} value={s.practice} onChange={(e) => setS({ ...s, practice: e.target.value })} />
        </div>
      </div>
      <div style={{ marginBottom: 18 }}>
        <label style={labelStyle}>Patient & clinical notes</label>
        <textarea rows={4} style={{ ...inputStyle, resize: 'vertical' }} value={s.notes} onChange={(e) => setS({ ...s, notes: e.target.value })} />
      </div>
      <button
        type="submit"
        disabled={!valid}
        className="d3-cta"
        style={{
          width: '100%', background: valid ? c.ink : c.rule, color: valid ? c.bg : c.muted,
          border: 'none', padding: '14px 20px', fontSize: 14, cursor: valid ? 'pointer' : 'not-allowed',
          fontFamily: 'inherit', borderRadius: 12, fontWeight: 500,
        }}
      >
        Send referral →
      </button>
    </form>
  );
}

Object.assign(window, { DirectionModern });