/* =============================================================
   For doctors — landing variant for the editorial physician bench
   Different angle from main landing (which targets clinic owners).
   ============================================================= */

function PageForDoctors() {
  return (
    <div style={{ width: 1280, fontFamily: FONT_BODY, color: P4.ink, '--font-display': FONT_SERIF, background: '#fff' }}>
      <Header_v4 ctaLabel="Apply to review" />

      {/* Hero */}
      <div style={{ padding: '80px 56px 72px', background: '#fff', position: 'relative', overflow: 'hidden' }}>
        <div style={{ position: 'absolute', top: -200, right: -240, opacity: 0.5 }}>
          <SignalGrid_v4 size={680} faint />
        </div>
        <div style={{ position: 'relative', display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 56, alignItems: 'center' }}>
          <div>
            <MonoKicker_v4 color={P4.warm} mb={18}>Editorial physicians · US-licensed</MonoKicker_v4>
            <h1 style={{ fontFamily: FONT_SERIF, fontSize: 60, fontWeight: 400, letterSpacing: '-0.025em', lineHeight: 1.02, marginBottom: 22, fontVariationSettings: "'opsz' 144, 'SOFT' 50" }} className="balance">
              Sign your name on content patients can <span style={{ fontStyle: 'italic' }}>actually</span> trust.
            </h1>
            <p style={{ fontSize: 18, color: P4.inkSoft, lineHeight: 1.55, maxWidth: 620, marginBottom: 28 }} className="pretty">
              MedSpaCopy reviewers vet aesthetic-medicine articles before clinics publish them. Async work, ~30 minutes per piece, $90 per review. We need physicians who care about FTC-aware claims and won't sign off on copy they don't believe.
            </p>

            <div style={{ display: 'flex', gap: 12, marginBottom: 24 }}>
              <a href="#apply" style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center', height: 46, padding: '0 22px', background: P4.accent, color: '#fff', borderRadius: 8, fontSize: 14.5, fontWeight: 600, textDecoration: 'none', fontFamily: FONT_BODY }}>Apply to review →</a>
              <a href="#how" style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center', height: 46, padding: '0 22px', background: '#fff', color: P4.ink, border: `1px solid ${P4.border}`, borderRadius: 8, fontSize: 14.5, fontWeight: 600, textDecoration: 'none', fontFamily: FONT_BODY }}>See how reviewing works</a>
            </div>

            <div style={{ display: 'flex', gap: 32, fontSize: 13, color: P4.inkSoft, fontFamily: FONT_MONO }}>
              <div><span style={{ color: P4.ink, fontWeight: 700 }}>~30m</span> per review</div>
              <div><span style={{ color: P4.ink, fontWeight: 700 }}>$90</span> per article</div>
              <div><span style={{ color: P4.ink, fontWeight: 700 }}>Net 30</span> payment</div>
            </div>
          </div>

          {/* Right card: reviewer profile preview */}
          <div style={{ background: '#fff', border: `1px solid ${P4.border}`, borderRadius: 14, padding: 0, boxShadow: P4.warmTint && `0 24px 56px -22px rgba(15,40,50,0.18)`, overflow: 'hidden' }}>
            <div style={{ padding: '13px 22px', background: P4.ink, color: '#fff', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                <span style={{ width: 7, height: 7, borderRadius: 4, background: P4.warm }} />
                <span style={{ fontFamily: FONT_MONO, fontSize: 10.5, fontWeight: 600, letterSpacing: '0.14em', textTransform: 'uppercase' }}>Sample reviewer profile</span>
              </div>
              <span style={{ fontFamily: FONT_MONO, fontSize: 10.5, opacity: 0.6, letterSpacing: '0.06em' }}>2026 · ACTIVE</span>
            </div>
            <div style={{ padding: 28 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 16, marginBottom: 22 }}>
                <div style={{ width: 56, height: 56, borderRadius: 28, background: `color-mix(in oklab, ${P4.accent} 14%, #fff)`, border: `1px solid ${P4.accent100}`, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', fontFamily: FONT_SANS, fontSize: 17, fontWeight: 700, color: P4.accent }}>RM</div>
                <div>
                  <div style={{ fontSize: 17, fontWeight: 600, color: P4.ink }}>R. Marsden, MD</div>
                  <div style={{ fontSize: 13, color: P4.inkSoft }}>Dermatology · 12 yrs · Austin TX</div>
                </div>
              </div>

              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14, marginBottom: 22 }}>
                {[
                  { label: 'Reviews', val: '184' },
                  { label: 'Avg time', val: '24m' },
                  { label: 'Acceptance', val: '92%' },
                  { label: 'YTD payout', val: '$16,560' },
                ].map((s, i) => (
                  <div key={i} style={{ background: P4.surfaceTint, border: `1px solid ${P4.borderWarm}`, borderRadius: 8, padding: '12px 14px' }}>
                    <div style={{ fontFamily: FONT_MONO, fontSize: 10, color: P4.inkSoft, fontWeight: 600, letterSpacing: '0.1em', textTransform: 'uppercase', marginBottom: 4 }}>{s.label}</div>
                    <div style={{ fontFamily: FONT_SANS, fontSize: 22, fontWeight: 600, letterSpacing: '-0.018em', color: P4.ink, fontVariantNumeric: 'tabular-nums' }}>{s.val}</div>
                  </div>
                ))}
              </div>

              <div style={{ borderTop: `1px solid ${P4.border}`, paddingTop: 16 }}>
                <div style={{ fontFamily: FONT_MONO, fontSize: 10.5, fontWeight: 600, letterSpacing: '0.12em', textTransform: 'uppercase', color: P4.inkSoft, marginBottom: 10 }}>Specialties signed off on</div>
                <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
                  {['Chemical peel', 'Laser hair removal', 'Microneedling', 'Botox aftercare', 'PRP', 'Skin barrier'].map(s => (
                    <span key={s} style={{ fontSize: 11.5, fontFamily: FONT_BODY, padding: '4px 10px', background: `color-mix(in oklab, ${P4.accent} 8%, #fff)`, color: P4.accent, borderRadius: 999, fontWeight: 500 }}>{s}</span>
                  ))}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* What reviewing means */}
      <div id="how" style={{ padding: '72px 56px', background: P4.surfaceTint, borderTop: `1px solid ${P4.borderWarm}` }}>
        <div style={{ marginBottom: 40 }}>
          <MonoKicker_v4 color={P4.warm} mb={10}>How it works</MonoKicker_v4>
          <h2 style={{ fontFamily: FONT_SERIF, fontSize: 36, fontWeight: 450, letterSpacing: '-0.02em', lineHeight: 1.15, fontVariationSettings: "'opsz' 72, 'SOFT' 50", maxWidth: 720 }} className="balance">
            Three checks. Async. Sign once you're satisfied.
          </h2>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 14 }}>
          {[
            { kicker: '01 · Read', title: 'Read the draft and the editorial brief', body: 'You see the article, the clinic context, and our internal claim notes. ~10 minutes.' },
            { kicker: '02 · Mark', title: 'Flag claims, factual errors, and patient-safety language', body: 'Inline comments. We rewrite anything you flag — you don\'t edit yourself unless you want to.' },
            { kicker: '03 · Sign',  title: 'Approve and sign — your name appears in the editorial footer', body: 'You\'re paid Net 30 once the clinic takes delivery.' },
          ].map((c, i) => (
            <div key={i} style={{ paddingTop: 22, borderTop: `2px solid ${P4.accent}`, background: '#fff', padding: 28, borderRadius: 12, border: `1px solid ${P4.border}`, borderTop: `2px solid ${P4.accent}` }}>
              <div style={{ fontFamily: FONT_MONO, fontSize: 11, fontWeight: 600, letterSpacing: '0.1em', color: P4.accent, marginBottom: 12 }}>{c.kicker}</div>
              <h3 style={{ fontFamily: FONT_SERIF, fontSize: 20, fontWeight: 450, lineHeight: 1.25, marginBottom: 10, letterSpacing: '-0.012em', fontVariationSettings: "'opsz' 36, 'SOFT' 50" }} className="balance">{c.title}</h3>
              <p style={{ fontSize: 13.5, lineHeight: 1.55, color: P4.inkSoft }}>{c.body}</p>
            </div>
          ))}
        </div>
      </div>

      {/* Who we look for / Who we don't */}
      <div style={{ padding: '72px 56px', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
        <div style={{ background: '#fff', border: `1px solid ${P4.border}`, borderRadius: 12, padding: 32 }}>
          <MonoKicker_v4 color={P4.good} mb={14}>+ Good fit</MonoKicker_v4>
          <h3 style={{ fontFamily: FONT_SERIF, fontSize: 24, fontWeight: 450, letterSpacing: '-0.015em', lineHeight: 1.2, marginBottom: 18, fontVariationSettings: "'opsz' 72, 'SOFT' 50" }} className="balance">
            Who we look for.
          </h3>
          <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 12, fontSize: 14.5, color: P4.inkMid, lineHeight: 1.55 }}>
            {[
              'US-licensed physician (MD or DO), active license required',
              'Board-certified or board-eligible in dermatology, plastic surgery, family medicine, or related specialty',
              'Practical experience with aesthetic procedures we cover',
              'Care about FTC claims, evidence quality, and patient-safety language',
              'Comfortable with async work and 24-hour turnaround windows',
            ].map((t, i) => (
              <li key={i} style={{ display: 'flex', gap: 10 }}>
                <span style={{ color: P4.good, fontWeight: 700, marginTop: 1 }}>+</span>
                <span>{t}</span>
              </li>
            ))}
          </ul>
        </div>

        <div style={{ background: '#fff', border: `1px solid ${P4.border}`, borderRadius: 12, padding: 32 }}>
          <MonoKicker_v4 color={P4.warn} mb={14}>x Not a fit</MonoKicker_v4>
          <h3 style={{ fontFamily: FONT_SERIF, fontSize: 24, fontWeight: 450, letterSpacing: '-0.015em', lineHeight: 1.2, marginBottom: 18, fontVariationSettings: "'opsz' 72, 'SOFT' 50" }} className="balance">
            Who we don't take.
          </h3>
          <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 12, fontSize: 14.5, color: P4.inkMid, lineHeight: 1.55 }}>
            {[
              'Reviewers willing to rubber-stamp content they didn\'t read carefully',
              'Anyone with disciplinary action open or pending on their license',
              'Reviewers who want to push specific brands or supplements they have a stake in',
              'International physicians without an active US license',
              'Anyone unwilling to sign their name on the editorial footer',
            ].map((t, i) => (
              <li key={i} style={{ display: 'flex', gap: 10 }}>
                <span style={{ color: P4.warn, fontWeight: 700, marginTop: 1 }}>x</span>
                <span>{t}</span>
              </li>
            ))}
          </ul>
        </div>
      </div>

      {/* Compensation breakdown */}
      <div style={{ padding: '24px 56px 80px' }}>
        <div style={{ background: P4.ink, color: '#fff', borderRadius: 14, padding: 48, position: 'relative', overflow: 'hidden' }}>
          <div style={{ position: 'absolute', top: -80, right: -100, opacity: 0.18 }}><SignalGrid_v4 size={420} /></div>
          <div style={{ position: 'relative', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 56, alignItems: 'center' }}>
            <div>
              <MonoKicker_v4 color={P4.warm} mb={14}>Compensation</MonoKicker_v4>
              <h3 style={{ fontFamily: FONT_SERIF, fontSize: 32, fontWeight: 450, letterSpacing: '-0.018em', lineHeight: 1.15, marginBottom: 18, color: '#fff', fontVariationSettings: "'opsz' 72, 'SOFT' 50" }} className="balance">
                A reviewer's monthly take, by hours per week.
              </h3>
              <p style={{ fontSize: 15, color: 'rgba(255,255,255,0.72)', lineHeight: 1.55, marginBottom: 22 }} className="pretty">
                Rates: $90 per standard article (~30m), $135 for procedural deep-dives (~45m). Per-piece, no minimums, no exclusivity. Net 30 by ACH or wire.
              </p>
              <a href="#apply" style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center', height: 44, padding: '0 22px', background: '#fff', color: P4.ink, borderRadius: 8, fontSize: 14, fontWeight: 600, textDecoration: 'none', fontFamily: FONT_BODY }}>Apply to review →</a>
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
              {[
                { hrs: '2 hrs / wk', count: '~16', month: '$1,440' },
                { hrs: '4 hrs / wk', count: '~32', month: '$2,880' },
                { hrs: '8 hrs / wk', count: '~64', month: '$5,760' },
                { hrs: '12 hrs / wk', count: '~96', month: '$8,640' },
              ].map((t, i) => (
                <div key={i} style={{ background: 'rgba(255,255,255,0.06)', border: `1px solid rgba(255,255,255,0.10)`, borderRadius: 10, padding: 18 }}>
                  <div style={{ fontFamily: FONT_MONO, fontSize: 10.5, color: P4.warm, fontWeight: 600, letterSpacing: '0.1em', textTransform: 'uppercase', marginBottom: 4 }}>{t.hrs}</div>
                  <div style={{ fontFamily: FONT_SANS, fontSize: 24, fontWeight: 600, letterSpacing: '-0.018em', color: '#fff', fontVariantNumeric: 'tabular-nums' }}>{t.month}</div>
                  <div style={{ fontSize: 12, color: 'rgba(255,255,255,0.6)', marginTop: 4 }}>{t.count} reviews</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>

      {/* Apply form */}
      <div id="apply" style={{ padding: '72px 56px', background: P4.surfaceTint, borderTop: `1px solid ${P4.borderWarm}` }}>
        <div style={{ maxWidth: 720, margin: '0 auto', textAlign: 'center', marginBottom: 36 }}>
          <MonoKicker_v4 color={P4.warm} mb={14}>Apply</MonoKicker_v4>
          <h2 style={{ fontFamily: FONT_SERIF, fontSize: 40, fontWeight: 400, letterSpacing: '-0.022em', lineHeight: 1.08, marginBottom: 14, fontVariationSettings: "'opsz' 144, 'SOFT' 50" }} className="balance">
            Tell us about your <span style={{ fontStyle: 'italic' }}>practice</span>.
          </h2>
          <p style={{ fontSize: 16, color: P4.inkSoft, lineHeight: 1.55 }}>We onboard reviewers in batches. Expect ~5 days for a response.</p>
        </div>

        <form style={{ maxWidth: 640, margin: '0 auto', background: '#fff', border: `1px solid ${P4.border}`, borderRadius: 14, padding: 36, display: 'flex', flexDirection: 'column', gap: 18 }} onSubmit={e => { e.preventDefault(); alert('Demo form — not wired in preview build.'); }}>
          {[
            { label: 'Full name', name: 'name', placeholder: 'Dr. Robin Marsden' },
            { label: 'NPI number', name: 'npi', placeholder: '1234567890' },
            { label: 'State of license', name: 'state', placeholder: 'TX' },
            { label: 'Primary specialty', name: 'specialty', placeholder: 'Dermatology' },
            { label: 'Email', name: 'email', placeholder: 'reviewer@example.com' },
          ].map((f, i) => (
            <label key={i} style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
              <span style={{ fontFamily: FONT_MONO, fontSize: 10.5, fontWeight: 600, letterSpacing: '0.12em', textTransform: 'uppercase', color: P4.inkSoft }}>{f.label}</span>
              <input name={f.name} placeholder={f.placeholder} style={{ height: 42, padding: '0 14px', border: `1px solid ${P4.border}`, borderRadius: 6, fontSize: 14, fontFamily: FONT_BODY, color: P4.ink, background: '#fff' }} />
            </label>
          ))}

          <label style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
            <span style={{ fontFamily: FONT_MONO, fontSize: 10.5, fontWeight: 600, letterSpacing: '0.12em', textTransform: 'uppercase', color: P4.inkSoft }}>How many hours per week could you commit?</span>
            <select style={{ height: 42, padding: '0 14px', border: `1px solid ${P4.border}`, borderRadius: 6, fontSize: 14, fontFamily: FONT_BODY, background: '#fff' }}>
              <option>2 hours</option>
              <option>4 hours</option>
              <option>8 hours</option>
              <option>12+ hours</option>
            </select>
          </label>

          <button type="submit" style={{ marginTop: 8, height: 48, background: P4.accent, color: '#fff', border: 'none', borderRadius: 8, fontSize: 14.5, fontWeight: 600, cursor: 'pointer', fontFamily: FONT_BODY }}>Submit application →</button>
          <p style={{ fontSize: 12, color: P4.inkSoft, textAlign: 'center', lineHeight: 1.55 }}>By submitting you agree to our <a href="/privacy" style={{ color: P4.accent, fontWeight: 600 }}>privacy policy</a>. We don't share applications with third parties.</p>
        </form>
      </div>

      <Footer_v4 />
    </div>
  );
}