// Direction 1 — "Editorial Warm Minimal"
// Generous serif display + warm putty tones. Asymmetric grid. Gallery feels like a magazine spread.

function DirectionEditorial({ palette, heroLayout = 'asymmetric' }) {
  const scrollRef = React.useRef(null);
  const [activeNav, setActiveNav] = React.useState('about');
  const [filter, setFilter] = React.useState('All');

  const c = palette || {
    bg: '#f5f0e8',
    surface: '#ebe4d6',
    ink: '#1f1a14',
    muted: '#6e6151',
    accent: '#9c5a3c',
    rule: 'rgba(31,26,20,.18)',
  };

  React.useEffect(() => {
    const root = scrollRef.current;
    if (!root) return;
    const handler = () => {
      const sections = root.querySelectorAll('[data-anchor]');
      let cur = 'about';
      sections.forEach((s) => {
        const r = s.getBoundingClientRect();
        if (r.top - 80 < 0) cur = s.getAttribute('data-anchor');
      });
      setActiveNav(cur);
    };
    root.addEventListener('scroll', handler);
    return () => root.removeEventListener('scroll', handler);
  }, []);

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

  const nav = [
    ['about', 'About'],
    ['practice', 'Practice'],
    ['speaking', 'Speaking'],
    ['gallery', 'Gallery'],
    ['locations', 'Locations'],
    ['contact', 'Refer'],
  ];

  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',
        fontFeatureSettings: '"ss01"',
      }}
    >
      <style>{`
        .d1-display { font-family: "Cormorant Garamond", "Times New Roman", serif; font-weight: 400; letter-spacing: -.01em; }
        .d1-italic { font-family: "Cormorant Garamond", serif; font-style: italic; font-weight: 400; }
        .d1-mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; }
        .d1-body { font-family: "Inter", system-ui, sans-serif; font-weight: 400; }
        .d1-link { position: relative; }
        .d1-link::after { content:''; position:absolute; left:0; right:0; bottom:-2px; height:1px; background:currentColor; transform: scaleX(0); transform-origin: left; transition: transform .3s ease; }
        .d1-link:hover::after, .d1-link.active::after { transform: scaleX(1); }
        .d1-cta { transition: background .25s, color .25s, transform .25s; }
        .d1-cta:hover { background: ${c.ink}; color: ${c.bg}; }
        .d1-input { background: transparent; border:none; border-bottom:1px solid ${c.rule}; padding: 10px 0; font-family:inherit; color:inherit; font-size:13px; outline:none; transition: border-color .2s; }
        .d1-input:focus { border-color: ${c.ink}; }
      `}</style>

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

      {/* Top bar */}
      <header
        style={{
          position: 'sticky',
          top: 0,
          zIndex: 20,
          background: c.bg + 'ee',
          backdropFilter: 'blur(8px)',
          borderBottom: `1px solid ${c.rule}`,
        }}
      >
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '18px 56px' }}>
          <div style={{ display: 'flex', alignItems: 'baseline', gap: 14 }}>
            <span className="d1-display" style={{ fontSize: 22, letterSpacing: '-.02em' }}>
              Julianna Bair
            </span>
            <span className="d1-mono" style={{ fontSize: 10, color: c.muted, letterSpacing: '.14em', textTransform: 'uppercase' }}>
              DMD · Endo + Pedo
            </span>
          </div>
          <nav style={{ display: 'flex', gap: 28 }}>
            {nav.map(([id, label]) => (
              <a
                key={id}
                href="#"
                onClick={(e) => {
                  e.preventDefault();
                  smoothTo(id, scrollRef.current);
                }}
                className={`d1-link${activeNav === id ? ' active' : ''}`}
                style={{ fontSize: 12, letterSpacing: '.08em', textTransform: 'uppercase', color: c.ink, textDecoration: 'none' }}
              >
                {label}
              </a>
            ))}
          </nav>
          <button
            className="d1-cta"
            onClick={() => smoothTo('contact', scrollRef.current)}
            style={{
              background: 'transparent',
              color: c.ink,
              border: `1px solid ${c.ink}`,
              padding: '10px 18px',
              fontSize: 11,
              letterSpacing: '.14em',
              textTransform: 'uppercase',
              fontFamily: 'inherit',
              cursor: 'pointer',
            }}
          >
            Refer a Patient
          </button>
        </div>
      </header>

      {/* HERO */}
      <AnimSection variant="rise" data-anchor="about" style={{ padding: '72px 56px 80px', borderBottom: `1px solid ${c.rule}` }}>
        {heroLayout === 'centered' && (
          <>
            <Reveal>
              <div className="d1-mono" style={{ fontSize: 11, color: c.muted, letterSpacing: '.18em', textTransform: 'uppercase', marginBottom: 36, textAlign: 'center' }}>
                Portfolio · Vol. 01 · MMXXVI
              </div>
              <h1 className="d1-display" style={{ fontSize: 88, lineHeight: 0.98, margin: 0, letterSpacing: '-.025em', textAlign: 'center', maxWidth: 1000, marginInline: 'auto' }}>
                The quiet practice of <span className="d1-italic">caring</span> for small teeth and <span className="d1-italic">complex</span> ones.
              </h1>
            </Reveal>
            <Reveal delay={150}>
              <p className="d1-body" style={{ fontSize: 16, lineHeight: 1.7, color: c.ink, margin: '40px auto 0', maxWidth: 560, textAlign: 'center' }}>
                Dr. Julianna Bair is dual board-specialized in endodontics and pediatric dentistry — practicing in Manhattan and Floral Park, and lecturing nationally on the care of the developing dentition.
              </p>
              <div style={{ display: 'flex', gap: 56, paddingTop: 40, marginTop: 40, borderTop: `1px solid ${c.rule}`, justifyContent: 'center' }}>
                {[['02','Board specialties'],['06','Lecture topics'],['02','NY locations']].map(([n,l]) => (
                  <div key={l} style={{ textAlign: 'center' }}>
                    <div className="d1-display" style={{ fontSize: 32 }}>{n}</div>
                    <div className="d1-mono" style={{ fontSize: 9, color: c.muted, letterSpacing: '.16em', textTransform: 'uppercase', marginTop: 4 }}>{l}</div>
                  </div>
                ))}
              </div>
            </Reveal>
            <Reveal delay={300} style={{ marginTop: 64 }}>
              <Placeholder label="portrait · headshot" tone="blush" ratio="21/9" />
            </Reveal>
          </>
        )}

        {heroLayout === 'sidebyside' && (
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 48, alignItems: 'stretch' }}>
            <Reveal>
              <div style={{ height: '100%', display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
                <div>
                  <div className="d1-mono" style={{ fontSize: 11, color: c.muted, letterSpacing: '.18em', textTransform: 'uppercase', marginBottom: 28 }}>
                    Portfolio · Vol. 01 · MMXXVI
                  </div>
                  <h1 className="d1-display" style={{ fontSize: 76, lineHeight: 0.98, margin: 0, letterSpacing: '-.025em' }}>
                    The quiet practice of <span className="d1-italic">caring</span> for small teeth.
                  </h1>
                  <p className="d1-body" style={{ fontSize: 15, lineHeight: 1.65, color: c.ink, marginTop: 28, maxWidth: 480 }}>
                    Dr. Julianna Bair is dual board-specialized in endodontics and pediatric dentistry — practicing in Manhattan and Floral Park.
                  </p>
                </div>
                <div style={{ display: 'flex', gap: 40, paddingTop: 32, borderTop: `1px solid ${c.rule}`, marginTop: 32 }}>
                  {[['02','Board specialties'],['06','Lecture topics'],['02','NY locations']].map(([n,l]) => (
                    <div key={l}>
                      <div className="d1-display" style={{ fontSize: 28 }}>{n}</div>
                      <div className="d1-mono" style={{ fontSize: 9, color: c.muted, letterSpacing: '.16em', textTransform: 'uppercase', marginTop: 4 }}>{l}</div>
                    </div>
                  ))}
                </div>
              </div>
            </Reveal>
            <Reveal delay={150}>
              <Placeholder label="portrait · headshot" tone="blush" ratio="auto" style={{ height: '100%', minHeight: 540 }} />
            </Reveal>
          </div>
        )}

        {heroLayout === 'asymmetric' && (
          <>
            <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 56, alignItems: 'end' }}>
              <Reveal>
                <div className="d1-mono" style={{ fontSize: 11, color: c.muted, letterSpacing: '.18em', textTransform: 'uppercase', marginBottom: 36 }}>
                  Portfolio · Vol. 01 · MMXXVI
                </div>
                <h1 className="d1-display" style={{ fontSize: 96, lineHeight: 0.94, margin: 0, letterSpacing: '-.025em' }}>
                  The quiet
                  <br />
                  practice of
                  <br />
                  <span className="d1-italic">caring</span> for
                  <br />
                  small teeth
                  <br />
                  and <span className="d1-italic">complex</span>
                  <br />
                  ones.
                </h1>
              </Reveal>
              <Reveal delay={150}>
                <div style={{ paddingBottom: 8 }}>
                  <p className="d1-body" style={{ fontSize: 16, lineHeight: 1.6, color: c.ink, margin: '0 0 24px', maxWidth: 380 }}>
                    Dr. Julianna Bair is dual board-specialized in endodontics and pediatric dentistry — practicing in Manhattan and Floral Park, and lecturing nationally on the care of the developing dentition.
                  </p>
                  <div style={{ display: 'flex', gap: 32, paddingTop: 24, borderTop: `1px solid ${c.rule}` }}>
                    {[['02','Board specialties'],['06','Lecture topics'],['02','NY locations']].map(([n,l]) => (
                      <div key={l}>
                        <div className="d1-display" style={{ fontSize: 32 }}>{n}</div>
                        <div className="d1-mono" style={{ fontSize: 9, color: c.muted, letterSpacing: '.16em', textTransform: 'uppercase', marginTop: 4 }}>{l}</div>
                      </div>
                    ))}
                  </div>
                </div>
              </Reveal>
            </div>
            <Reveal delay={300} style={{ marginTop: 64 }}>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.6fr 1fr', gap: 16, height: 360 }}>
                <Placeholder label="hands · operatory" tone="warm" ratio="auto" style={{ height: '100%' }} />
                <Placeholder label="portrait · headshot" tone="blush" ratio="auto" style={{ height: '100%' }} />
                <Placeholder label="microscope detail" tone="warm" ratio="auto" style={{ height: '100%' }} />
              </div>
            </Reveal>
          </>
        )}
      </AnimSection>

      {/* ABOUT continued */}
      <AnimSection variant="rise" style={{ padding: '88px 56px', borderBottom: `1px solid ${c.rule}` }}>
        <div style={{ display: 'grid', gridTemplateColumns: '180px 1fr 1fr', gap: 56 }}>
          <Reveal>
            <div className="d1-mono" style={{ fontSize: 11, color: c.muted, letterSpacing: '.18em', textTransform: 'uppercase' }}>
              I · Practitioner
            </div>
          </Reveal>
          <Reveal delay={120}>
            <h2 className="d1-display" style={{ fontSize: 44, lineHeight: 1.05, margin: 0, letterSpacing: '-.02em' }}>
              A clinician trained in two specialties that, in practice, <span className="d1-italic">rarely meet</span>.
            </h2>
          </Reveal>
          <Reveal delay={240}>
            <div>
              {SITE_DATA.bioLong.map((p, i) => (
                <p key={i} className="d1-body" style={{ fontSize: 14, lineHeight: 1.7, margin: '0 0 16px', color: c.ink }}>
                  {p}
                </p>
              ))}
              <div className="d1-mono" style={{ marginTop: 28, fontSize: 11, letterSpacing: '.14em', textTransform: 'uppercase', color: c.muted }}>
                Trained · NYU College of Dentistry · Columbia · Mount Sinai
              </div>
            </div>
          </Reveal>
        </div>
      </AnimSection>

      {/* PRACTICE / SPECIALTIES */}
      <AnimSection variant="rise" data-anchor="practice" style={{ padding: '88px 56px', borderBottom: `1px solid ${c.rule}`, background: c.surface }}>
        <Reveal>
          <div className="d1-mono" style={{ fontSize: 11, color: c.muted, letterSpacing: '.18em', textTransform: 'uppercase', marginBottom: 36 }}>
            II · Practice
          </div>
        </Reveal>
        <Reveal delay={100}>
          <h2 className="d1-display" style={{ fontSize: 56, margin: '0 0 56px', letterSpacing: '-.02em', maxWidth: 800 }}>
            Two practices, <span className="d1-italic">one philosophy</span>: preserve what biology offers.
          </h2>
        </Reveal>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 0, borderTop: `1px solid ${c.rule}` }}>
          {SITE_DATA.specialties.map((s, i) => (
            <Reveal key={s.title} delay={i * 120} style={{ borderRight: i === 0 ? `1px solid ${c.rule}` : 'none', padding: '40px 40px 40px 0', paddingLeft: i === 1 ? 40 : 0 }}>
              <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 24 }}>
                <h3 className="d1-display" style={{ fontSize: 36, margin: 0, letterSpacing: '-.02em' }}>
                  {s.title}
                </h3>
                <span className="d1-mono" style={{ fontSize: 11, color: c.muted, letterSpacing: '.14em' }}>
                  0{i + 1} / 02
                </span>
              </div>
              <p className="d1-body" style={{ fontSize: 14, lineHeight: 1.7, color: c.ink, margin: '0 0 28px', maxWidth: 460 }}>
                {s.copy}
              </p>
              <ul style={{ listStyle: 'none', padding: 0, margin: 0, borderTop: `1px solid ${c.rule}` }}>
                {s.points.map((p) => (
                  <li
                    key={p}
                    style={{
                      padding: '14px 0',
                      borderBottom: `1px solid ${c.rule}`,
                      display: 'flex',
                      justifyContent: 'space-between',
                      alignItems: 'center',
                      fontSize: 14,
                    }}
                  >
                    <span>{p}</span>
                    <span className="d1-mono" style={{ fontSize: 10, color: c.muted, letterSpacing: '.12em' }}>
                      —
                    </span>
                  </li>
                ))}
              </ul>
            </Reveal>
          ))}
        </div>
      </AnimSection>

      {/* SPEAKING */}
      <AnimSection variant="rise" data-anchor="speaking" style={{ padding: '88px 56px', borderBottom: `1px solid ${c.rule}` }}>
        <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', marginBottom: 40 }}>
          <Reveal>
            <div>
              <div className="d1-mono" style={{ fontSize: 11, color: c.muted, letterSpacing: '.18em', textTransform: 'uppercase', marginBottom: 12 }}>
                III · Speaking
              </div>
              <h2 className="d1-display" style={{ fontSize: 56, margin: 0, letterSpacing: '-.02em' }}>
                Selected lectures <span className="d1-italic">& courses</span>
              </h2>
            </div>
          </Reveal>
          <Reveal delay={120}>
            <div style={{ display: 'flex', gap: 4 }}>
              {tagsAll.map((t) => (
                <button
                  key={t}
                  onClick={() => setFilter(t)}
                  style={{
                    border: filter === t ? `1px solid ${c.ink}` : `1px solid ${c.rule}`,
                    background: filter === t ? c.ink : 'transparent',
                    color: filter === t ? c.bg : c.ink,
                    fontSize: 10,
                    letterSpacing: '.14em',
                    textTransform: 'uppercase',
                    padding: '8px 14px',
                    cursor: 'pointer',
                    fontFamily: 'inherit',
                    transition: 'all .2s',
                  }}
                >
                  {t}
                </button>
              ))}
            </div>
          </Reveal>
        </div>
        <div style={{ borderTop: `1px solid ${c.ink}` }}>
          {filteredTalks.map((t, i) => (
            <Reveal key={t.topic + t.year} delay={i * 60}>
              <div
                style={{
                  display: 'grid',
                  gridTemplateColumns: '60px 1fr 1fr 90px 24px',
                  gap: 24,
                  padding: '24px 0',
                  borderBottom: `1px solid ${c.rule}`,
                  alignItems: 'baseline',
                }}
              >
                <span className="d1-mono" style={{ fontSize: 12, color: c.muted }}>
                  {t.year}
                </span>
                <span className="d1-display" style={{ fontSize: 24, letterSpacing: '-.01em' }}>
                  {t.topic}
                </span>
                <span className="d1-body" style={{ fontSize: 13, color: c.muted }}>
                  {t.venue}
                </span>
                <span className="d1-mono" style={{ fontSize: 10, color: c.muted, letterSpacing: '.14em', textTransform: 'uppercase' }}>
                  {t.type}
                </span>
                <Icon.arrow size={14} style={{ color: c.muted }} />
              </div>
            </Reveal>
          ))}
        </div>
      </AnimSection>

      {/* GALLERY — magazine grid */}
      <AnimSection variant="rise" data-anchor="gallery" style={{ padding: '88px 56px', borderBottom: `1px solid ${c.rule}`, background: c.surface }}>
        <Reveal>
          <div className="d1-mono" style={{ fontSize: 11, color: c.muted, letterSpacing: '.18em', textTransform: 'uppercase', marginBottom: 12 }}>
            IV · Casebook
          </div>
        </Reveal>
        <Reveal delay={100}>
          <h2 className="d1-display" style={{ fontSize: 56, margin: '0 0 56px', letterSpacing: '-.02em', maxWidth: 760 }}>
            Selected cases, <span className="d1-italic">lightly annotated</span>.
          </h2>
        </Reveal>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(12, 1fr)', gap: 24 }}>
          {SITE_DATA.cases.map((cs, i) => {
            // varied magazine layout
            const layouts = [
              { gridColumn: 'span 5', ratio: '4/5', tone: 'warm' },
              { gridColumn: 'span 7', ratio: '4/3', tone: 'blush' },
              { gridColumn: 'span 4', ratio: '3/4', tone: 'sage' },
              { gridColumn: 'span 4', ratio: '1/1', tone: 'warm' },
              { gridColumn: 'span 4', ratio: '3/4', tone: 'cool' },
              { gridColumn: 'span 12', ratio: '21/9', tone: 'blush' },
            ];
            const L = layouts[i % layouts.length];
            return (
              <Reveal key={cs.title} delay={i * 80} style={{ gridColumn: L.gridColumn }}>
                <div>
                  <Placeholder label={cs.tag} tone={L.tone} ratio={L.ratio} />
                  <div style={{ marginTop: 14, display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
                    <div className="d1-display" style={{ fontSize: 20, letterSpacing: '-.01em' }}>
                      {cs.title}
                    </div>
                    <div className="d1-mono" style={{ fontSize: 9, color: c.muted, letterSpacing: '.14em', textTransform: 'uppercase' }}>
                      Fig. {String(i + 1).padStart(2, '0')}
                    </div>
                  </div>
                  <div className="d1-body" style={{ fontSize: 12, color: c.muted, marginTop: 4, lineHeight: 1.6 }}>
                    {cs.detail}
                  </div>
                </div>
              </Reveal>
            );
          })}
        </div>
      </AnimSection>

      {/* LOCATIONS */}
      <AnimSection variant="rise" data-anchor="locations" style={{ padding: '88px 56px', borderBottom: `1px solid ${c.rule}` }}>
        <Reveal>
          <div className="d1-mono" style={{ fontSize: 11, color: c.muted, letterSpacing: '.18em', textTransform: 'uppercase', marginBottom: 12 }}>
            V · Practice locations
          </div>
        </Reveal>
        <Reveal delay={100}>
          <h2 className="d1-display" style={{ fontSize: 56, margin: '0 0 56px', letterSpacing: '-.02em' }}>
            Where to <span className="d1-italic">find her</span>.
          </h2>
        </Reveal>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 32 }}>
          {SITE_DATA.locations.map((loc, i) => (
            <Reveal key={loc.name} delay={i * 120}>
              <div style={{ borderTop: `1px solid ${c.ink}`, paddingTop: 24 }}>
                <div className="d1-mono" style={{ fontSize: 10, color: c.muted, letterSpacing: '.14em', textTransform: 'uppercase', marginBottom: 14 }}>
                  {loc.role}
                </div>
                <h3 className="d1-display" style={{ fontSize: 32, margin: '0 0 20px', letterSpacing: '-.02em' }}>
                  {loc.name}
                </h3>
                <Placeholder label={`map · ${loc.city}`} tone={i === 0 ? 'cool' : 'sage'} ratio="16/9" />
                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16, marginTop: 24 }}>
                  <div>
                    <div className="d1-mono" style={{ fontSize: 9, color: c.muted, letterSpacing: '.14em', textTransform: 'uppercase', marginBottom: 6 }}>
                      Address
                    </div>
                    <div style={{ fontSize: 13, lineHeight: 1.6 }}>
                      {loc.address}
                      <br />
                      {loc.city}
                    </div>
                  </div>
                  <div>
                    <div className="d1-mono" style={{ fontSize: 9, color: c.muted, letterSpacing: '.14em', textTransform: 'uppercase', marginBottom: 6 }}>
                      Hours
                    </div>
                    <div style={{ fontSize: 13, lineHeight: 1.6 }}>{loc.hours}</div>
                  </div>
                </div>
              </div>
            </Reveal>
          ))}
        </div>
      </AnimSection>

      {/* CONTACT — refer a patient */}
      <AnimSection variant="rise" data-anchor="contact" style={{ padding: '96px 56px', background: c.ink, color: c.bg }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 56 }}>
          <Reveal>
            <div className="d1-mono" style={{ fontSize: 11, color: 'rgba(255,250,240,.5)', letterSpacing: '.18em', textTransform: 'uppercase', marginBottom: 24 }}>
              VI · Refer a patient
            </div>
            <h2 className="d1-display" style={{ fontSize: 88, margin: '0 0 32px', letterSpacing: '-.025em', lineHeight: 0.95 }}>
              Send your <span className="d1-italic">case</span>.
            </h2>
            <p className="d1-body" style={{ fontSize: 15, lineHeight: 1.7, color: 'rgba(255,250,240,.75)', maxWidth: 460 }}>
              For referring practices: send the patient's information and clinical notes; Dr. Bair's office will reach out within one business day.
            </p>
            <div style={{ marginTop: 40, paddingTop: 24, borderTop: '1px solid rgba(255,250,240,.18)' }}>
              <div className="d1-mono" style={{ fontSize: 10, color: 'rgba(255,250,240,.5)', letterSpacing: '.14em', textTransform: 'uppercase', marginBottom: 8 }}>
                Direct
              </div>
              <div className="d1-display" style={{ fontSize: 24 }}>
                referrals@drjbair.com
              </div>
            </div>
          </Reveal>
          <Reveal delay={150}>
            <ContactForm dark />
          </Reveal>
        </div>
        <div
          style={{
            marginTop: 96,
            paddingTop: 32,
            borderTop: '1px solid rgba(255,250,240,.18)',
            display: 'flex',
            justifyContent: 'space-between',
            color: 'rgba(255,250,240,.5)',
            fontSize: 11,
            letterSpacing: '.12em',
            textTransform: 'uppercase',
            fontFamily: 'ui-monospace, "SF Mono", Menlo, monospace',
          }}
        >
          <span>© MMXXVI Julianna Bair, DMD</span>
          <span>Manhattan · Floral Park</span>
        </div>
      </AnimSection>
    </div>
  );
}

function ContactForm({ dark, accent }) {
  const [state, setState] = React.useState({ name: '', email: '', practice: '', notes: '', sent: false });
  const inkColor = dark ? '#f5f0e8' : '#1f1a14';
  const ruleColor = dark ? 'rgba(255,250,240,.25)' : 'rgba(31,26,20,.18)';
  const labelColor = dark ? 'rgba(255,250,240,.55)' : 'rgba(31,26,20,.55)';

  if (state.sent) {
    return (
      <div style={{ padding: '40px 0', borderTop: `1px solid ${ruleColor}` }}>
        <div className="d1-mono" style={{ fontSize: 10, color: labelColor, letterSpacing: '.18em', textTransform: 'uppercase', marginBottom: 12 }}>
          Received
        </div>
        <div className="d1-display" style={{ fontSize: 36, color: inkColor, lineHeight: 1.2 }}>
          Thank you, {state.name.split(' ')[0] || 'colleague'}.<br />
          You'll hear back within one business day.
        </div>
      </div>
    );
  }

  const Field = ({ id, label, type = 'text', textarea }) => (
    <label style={{ display: 'block', marginBottom: 24 }}>
      <div className="d1-mono" style={{ fontSize: 9, color: labelColor, letterSpacing: '.16em', textTransform: 'uppercase', marginBottom: 6 }}>
        {label}
      </div>
      {textarea ? (
        <textarea
          value={state[id]}
          onChange={(e) => setState({ ...state, [id]: e.target.value })}
          rows={4}
          style={{
            width: '100%',
            background: 'transparent',
            border: 'none',
            borderBottom: `1px solid ${ruleColor}`,
            color: inkColor,
            fontFamily: '"Inter", system-ui, sans-serif',
            fontSize: 15,
            padding: '8px 0',
            outline: 'none',
            resize: 'none',
            transition: 'border-color .2s',
          }}
          onFocus={(e) => (e.target.style.borderColor = inkColor)}
          onBlur={(e) => (e.target.style.borderColor = ruleColor)}
        />
      ) : (
        <input
          value={state[id]}
          onChange={(e) => setState({ ...state, [id]: e.target.value })}
          type={type}
          style={{
            width: '100%',
            background: 'transparent',
            border: 'none',
            borderBottom: `1px solid ${ruleColor}`,
            color: inkColor,
            fontFamily: '"Inter", system-ui, sans-serif',
            fontSize: 15,
            padding: '8px 0',
            outline: 'none',
            transition: 'border-color .2s',
          }}
          onFocus={(e) => (e.target.style.borderColor = inkColor)}
          onBlur={(e) => (e.target.style.borderColor = ruleColor)}
        />
      )}
    </label>
  );

  const valid = state.name.length > 1 && /@/.test(state.email) && state.notes.length > 5;

  return (
    <form
      onSubmit={(e) => {
        e.preventDefault();
        if (valid) setState({ ...state, sent: true });
      }}
    >
      <Field id="name" label="Your name" />
      <Field id="email" label="Email" type="email" />
      <Field id="practice" label="Practice / role" />
      <Field id="notes" label="Patient & clinical notes" textarea />
      <button
        type="submit"
        disabled={!valid}
        style={{
          marginTop: 8,
          background: valid ? (dark ? '#f5f0e8' : '#1f1a14') : 'transparent',
          color: valid ? (dark ? '#1f1a14' : '#f5f0e8') : labelColor,
          border: `1px solid ${valid ? (dark ? '#f5f0e8' : '#1f1a14') : ruleColor}`,
          padding: '14px 28px',
          fontSize: 11,
          letterSpacing: '.18em',
          textTransform: 'uppercase',
          fontFamily: 'ui-monospace, "SF Mono", Menlo, monospace',
          cursor: valid ? 'pointer' : 'not-allowed',
          transition: 'all .2s',
        }}
      >
        Send referral →
      </button>
    </form>
  );
}

Object.assign(window, { DirectionEditorial, ContactForm });