// ScrollJob v2 — extra employer screens
// Apply form builder · Interview scheduler

// ─── 1) APPLY FORM BUILDER ─────────────────────────────────────────────
function V2EmpApplyFormScreen() {
  const palette = [
    { type: 'text',     icon: 'edit',     label: 'Text input' },
    { type: 'textarea', icon: 'document', label: 'Textarea' },
    { type: 'email',    icon: 'mail',     label: 'Email' },
    { type: 'phone',    icon: 'user',     label: 'Phone' },
    { type: 'url',      icon: 'globe',    label: 'URL' },
    { type: 'file',     icon: 'document', label: 'File upload' },
    { type: 'select',   icon: 'chevron-down', label: 'Select' },
    { type: 'multi',    icon: 'check',    label: 'Multi-select' },
    { type: 'checkbox', icon: 'check',    label: 'Checkbox' },
  ];
  const fields = [
    { id: 1, label: 'Full name',           type: 'text',  required: true,  selected: false },
    { id: 2, label: 'Email address',       type: 'email', required: true,  selected: false },
    { id: 3, label: 'Phone',               type: 'phone', required: false, selected: false },
    { id: 4, label: 'CV / resume',         type: 'file',  required: true,  selected: false },
    { id: 5, label: 'Right to work in UK?',type: 'select', required: true, selected: true,
      options: ['British / Irish citizen', 'Settled / pre-settled', 'Skilled Worker visa', 'Need sponsorship', 'Other'] },
    { id: 6, label: 'Earliest start date', type: 'text',  required: false, selected: false },
    { id: 7, label: 'Cover letter',        type: 'textarea', required: false, selected: false },
  ];
  return (
    <div style={{ background: V2.bg, fontFamily: V2.font, color: V2.ink, minHeight: '100%' }}>
      <V2Header active="" variant="seeker" />
      <main style={{ maxWidth: 1400, margin: '0 auto', padding: '32px 32px 0' }}>
        <header style={{
          display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 22, flexWrap: 'wrap', gap: 12,
        }}>
          <div>
            <a style={{
              display: 'inline-flex', alignItems: 'center', gap: 6,
              color: V2.muted, fontSize: 14, fontWeight: 500, textDecoration: 'none', marginBottom: 12,
            }}>
              <Icon name="arrow-left" size={16} /> Employer dashboard
            </a>
            <h1 style={{ margin: '0 0 4px', fontSize: 26, fontWeight: 700, color: V2.ink, letterSpacing: '-0.02em' }}>
              Apply form builder
            </h1>
            <p style={{ margin: 0, fontSize: 14.5, color: V2.muted }}>
              Design the questions candidates answer when they apply.
            </p>
          </div>
          <div style={{ display: 'flex', gap: 8 }}>
            <V2Button variant="secondary" size="md" icon="eye">Preview</V2Button>
            <V2Button variant="primary" size="md">Save form</V2Button>
          </div>
        </header>

        {/* Default toggle */}
        <div style={{
          background: '#fff', border: `1px solid ${V2.line}`, borderRadius: V2.rLg,
          padding: 16, marginBottom: 18, display: 'flex', alignItems: 'center', gap: 14,
        }}>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 14, fontWeight: 700, color: V2.ink }}>This form applies to</div>
            <div style={{ fontSize: 12.5, color: V2.muted, marginTop: 2 }}>
              Override per-job by editing the form on any individual posting.
            </div>
          </div>
          <div style={{ display: 'inline-flex', background: V2.bgAlt, borderRadius: 999, padding: 3 }}>
            {['Default for company', 'Per-job override'].map((t, i) => (
              <button key={t} style={{
                padding: '6px 14px', borderRadius: 999, fontSize: 13, fontWeight: 600,
                border: 'none', cursor: 'pointer', fontFamily: V2.font,
                background: i === 0 ? '#fff' : 'transparent',
                color: i === 0 ? V2.ink : V2.muted,
                boxShadow: i === 0 ? V2.shadowSm : 'none',
              }}>{t}</button>
            ))}
          </div>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '220px 1fr 320px', gap: 18, alignItems: 'start' }}>
          {/* Palette */}
          <aside style={{
            background: '#fff', border: `1px solid ${V2.line}`, borderRadius: V2.rLg,
            padding: 14, position: 'sticky', top: 86,
          }}>
            <h3 style={{ margin: '0 0 10px', fontSize: 11, fontWeight: 700, color: V2.muted, textTransform: 'uppercase', letterSpacing: '0.08em' }}>
              Add field
            </h3>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
              {palette.map((p) => (
                <button key={p.type} style={{
                  display: 'flex', alignItems: 'center', gap: 10,
                  padding: '8px 10px', borderRadius: 8,
                  background: 'transparent', border: `1px dashed ${V2.line}`,
                  fontSize: 13, color: V2.text, fontWeight: 500, fontFamily: V2.font,
                  cursor: 'grab', textAlign: 'left',
                }}>
                  <Icon name={p.icon} size={14} color={V2.muted} />
                  {p.label}
                </button>
              ))}
            </div>
          </aside>

          {/* Live preview */}
          <div style={{
            background: '#fff', border: `1px solid ${V2.line}`, borderRadius: V2.rLg, padding: 28,
          }}>
            <div style={{
              padding: '10px 14px', marginBottom: 22, borderRadius: V2.rMd,
              background: V2.primarySoft, color: V2.primaryInk,
              fontSize: 12.5, fontWeight: 600, display: 'inline-flex', alignItems: 'center', gap: 6,
            }}>
              <Icon name="eye" size={14} /> Live preview · drag fields to reorder
            </div>
            {fields.map((f) => <FormFieldPreview key={f.id} field={f} />)}
            <V2Button variant="primary" size="lg" full iconRight="arrow-right">Submit application</V2Button>
          </div>

          {/* Selected field settings */}
          <aside style={{ position: 'sticky', top: 86 }}>
            <div style={{
              background: '#fff', border: `1px solid ${V2.line}`, borderRadius: V2.rLg, padding: 18,
            }}>
              <h3 style={{ margin: '0 0 12px', fontSize: 13, fontWeight: 700, color: V2.ink, letterSpacing: '-0.01em' }}>
                Field settings · "Right to work in UK?"
              </h3>
              <div style={{ marginBottom: 14 }}>
                <label style={{ display: 'block', fontSize: 12, color: V2.muted, fontWeight: 600, marginBottom: 6 }}>Label</label>
                <input defaultValue="Right to work in UK?" style={smallInput()} />
              </div>
              <div style={{ marginBottom: 14 }}>
                <label style={{ display: 'block', fontSize: 12, color: V2.muted, fontWeight: 600, marginBottom: 6 }}>Help text</label>
                <input defaultValue="We may sponsor for the right candidate" style={smallInput()} />
              </div>
              <label style={{ display: 'flex', alignItems: 'center', gap: 10, fontSize: 13.5, color: V2.ink, padding: '10px 0', borderTop: `1px solid ${V2.lineSoft}`, borderBottom: `1px solid ${V2.lineSoft}` }}>
                <V2Toggle on />
                Required
              </label>
              <label style={{ display: 'block', fontSize: 12, color: V2.muted, fontWeight: 600, margin: '14px 0 8px' }}>Options</label>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
                {['British / Irish citizen', 'Settled / pre-settled', 'Skilled Worker visa', 'Need sponsorship', 'Other'].map((o, i) => (
                  <div key={i} style={{ display: 'flex', gap: 6 }}>
                    <input defaultValue={o} style={{ ...smallInput(), flex: 1 }} />
                    <button style={{
                      width: 30, height: 30, borderRadius: 6,
                      background: '#fff', border: `1px solid ${V2.line}`, cursor: 'pointer',
                      display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                    }}><Icon name="x" size={13} color={V2.muted} /></button>
                  </div>
                ))}
              </div>
              <button style={{
                marginTop: 8, padding: '6px 12px', borderRadius: 8,
                background: 'transparent', border: `1px dashed ${V2.line}`,
                color: V2.text, fontSize: 12.5, fontWeight: 600, cursor: 'pointer', fontFamily: V2.font,
                display: 'inline-flex', alignItems: 'center', gap: 6,
              }}>
                <Icon name="plus" size={12} /> Add option
              </button>
              <div style={{ marginTop: 18, paddingTop: 14, borderTop: `1px solid ${V2.line}` }}>
                <V2Button variant="destructive" size="sm" icon="x" full>Delete field</V2Button>
              </div>
            </div>
          </aside>
        </div>
      </main>
      <V2Footer />
    </div>
  );
}

function smallInput() {
  return {
    width: '100%', padding: '8px 10px', border: `1px solid ${V2.line}`,
    borderRadius: 7, fontSize: 13, outline: 'none', fontFamily: V2.font,
    color: V2.ink, background: '#fff', boxSizing: 'border-box',
  };
}

// ────────────────────────────────────────────────────────────────────────
// Calendar provider helpers
// Each logo is hand-rolled SVG in its official brand colors — small enough
// to inline, distinctive at 32px, monogram-safe at 20px.
// ────────────────────────────────────────────────────────────────────────
function CalendarLogo({ provider, size = 28 }) {
  const wrap = {
    width: size, height: size, borderRadius: size * 0.22,
    display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
    flexShrink: 0, background: '#fff',
    boxShadow: 'inset 0 0 0 1px rgba(16,24,40,0.08)',
  };
  if (provider === 'google') {
    return (
      <span style={wrap}>
        <svg width={size * 0.66} height={size * 0.66} viewBox="0 0 24 24">
          <rect x="2" y="3" width="20" height="18" rx="3" fill="#fff" stroke="#dadce0" strokeWidth="1" />
          <rect x="2" y="3" width="20" height="4" rx="2" fill="#1a73e8" />
          <text x="12" y="17" textAnchor="middle" fontSize="9" fontWeight="700" fill="#1a73e8" fontFamily="system-ui">31</text>
        </svg>
      </span>
    );
  }
  if (provider === 'outlook') {
    return (
      <span style={wrap}>
        <svg width={size * 0.7} height={size * 0.7} viewBox="0 0 24 24">
          <rect x="2" y="4" width="14" height="16" rx="1" fill="#0078d4" />
          <text x="9" y="16" textAnchor="middle" fontSize="10" fontWeight="800" fill="#fff" fontFamily="system-ui">O</text>
          <rect x="14" y="6" width="8" height="12" rx="1" fill="#fff" stroke="#0078d4" strokeWidth="1" />
          <line x1="14" y1="10" x2="22" y2="10" stroke="#0078d4" strokeWidth="0.6" />
          <line x1="14" y1="14" x2="22" y2="14" stroke="#0078d4" strokeWidth="0.6" />
        </svg>
      </span>
    );
  }
  if (provider === 'office365') {
    return (
      <span style={wrap}>
        <svg width={size * 0.7} height={size * 0.7} viewBox="0 0 24 24">
          <polygon points="3,5 14,2 20,4 20,20 14,22 3,18" fill="#d83b01" />
          <polygon points="3,5 3,18 14,22 14,2" fill="#ea4300" />
          <text x="9" y="15" textAnchor="middle" fontSize="9" fontWeight="800" fill="#fff" fontFamily="system-ui">365</text>
        </svg>
      </span>
    );
  }
  if (provider === 'apple') {
    return (
      <span style={wrap}>
        <svg width={size * 0.62} height={size * 0.62} viewBox="0 0 24 24">
          <rect x="2" y="3" width="20" height="18" rx="3" fill="#fff" stroke="#d1d5db" strokeWidth="1" />
          <rect x="2" y="3" width="20" height="5" rx="2" fill="#ef4444" />
          <text x="12" y="7.2" textAnchor="middle" fontSize="3" fontWeight="700" fill="#fff" fontFamily="system-ui">MAY</text>
          <text x="12" y="18" textAnchor="middle" fontSize="10" fontWeight="800" fill="#0f172a" fontFamily="system-ui">16</text>
        </svg>
      </span>
    );
  }
  if (provider === 'calendly') {
    return (
      <span style={{ ...wrap, background: '#006bff' }}>
        <span style={{ color: '#fff', fontWeight: 800, fontSize: size * 0.42, fontFamily: V2.font, letterSpacing: '-0.04em' }}>C</span>
      </span>
    );
  }
  return <span style={wrap} />;
}

function CalendarConnectBtn({ provider, label, sub }) {
  return (
    <button style={{
      padding: '12px 14px', display: 'flex', alignItems: 'center', gap: 12,
      background: '#fff', border: `1px solid ${V2.line}`, borderRadius: V2.rMd,
      cursor: 'pointer', fontFamily: V2.font, textAlign: 'left',
      transition: 'border-color .15s',
    }}>
      <CalendarLogo provider={provider} size={32} />
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ fontSize: 13, fontWeight: 700, color: V2.ink }}>{label}</div>
        <div style={{ fontSize: 11.5, color: V2.muted, marginTop: 2 }}>{sub}</div>
      </div>
      <span style={{
        display: 'inline-flex', alignItems: 'center', gap: 4,
        padding: '4px 10px', background: V2.primarySoft, color: V2.primaryInk,
        border: `1px solid ${V2.primaryRing}`, borderRadius: 999,
        fontSize: 11.5, fontWeight: 700,
      }}>
        Connect <Icon name="arrow-right" size={11} />
      </span>
    </button>
  );
}

function FormFieldPreview({ field }) {
  const ring = field.selected ? `2px solid ${V2.primary}` : `1px solid ${V2.line}`;
  return (
    <div style={{
      background: field.selected ? V2.primarySoft : '#fff', border: ring,
      borderRadius: V2.rMd, padding: '14px 16px', marginBottom: 14, position: 'relative',
    }}>
      {field.selected && (
        <span style={{
          position: 'absolute', top: -10, left: 14,
          padding: '2px 8px', background: V2.primary, color: '#fff',
          borderRadius: 999, fontSize: 11, fontWeight: 700,
        }}>Editing</span>
      )}
      <label style={{ display: 'block', fontSize: 13, fontWeight: 600, color: V2.ink, marginBottom: 6 }}>
        {field.label} {field.required && <span style={{ color: V2.danger }}>*</span>}
      </label>
      {field.type === 'select' ? (
        <select style={{ ...smallInput(), padding: '10px 12px' }} defaultValue="">
          <option value="" disabled>Choose one…</option>
          {(field.options || []).map((o) => <option key={o}>{o}</option>)}
        </select>
      ) : field.type === 'textarea' ? (
        <textarea rows={3} style={{ ...smallInput(), padding: '10px 12px', minHeight: 70, resize: 'vertical', fontFamily: V2.font, lineHeight: 1.55 }} />
      ) : field.type === 'file' ? (
        <div style={{
          padding: '16px 14px', border: `1px dashed ${V2.lineStrong}`, borderRadius: 8,
          display: 'inline-flex', alignItems: 'center', gap: 10, color: V2.muted, fontSize: 13,
        }}>
          <Icon name="document" size={16} /> Drop CV here or <a style={{ color: V2.primary, fontWeight: 600 }}>browse</a>
        </div>
      ) : (
        <input type={field.type === 'email' ? 'email' : field.type === 'phone' ? 'tel' : 'text'} style={{ ...smallInput(), padding: '10px 12px' }} />
      )}
    </div>
  );
}

// ─── 2) INTERVIEW SCHEDULER ─────────────────────────────────────────────
function V2EmpInterviewsScreen() {
  const pipeline = [
    { stage: 'applied',   label: 'Applied',    count: 86 },
    { stage: 'screening', label: 'Screening',  count: 24 },
    { stage: 'interview', label: 'Interview',  count: 8, active: true },
    { stage: 'offer',     label: 'Offer',      count: 2 },
    { stage: 'hired',     label: 'Hired',      count: 1 },
  ];
  const candidates = [
    { name: 'Priya Sharma',  loc: 'Bristol',     when: 'Applied 2 days ago', stage: 'interview', selected: true,
      experience: '6y · Sunrise Senior Living · NHS bank' },
    { name: 'James O\u2019Brien', loc: 'Bath',  when: 'Applied 3 days ago', stage: 'interview', experience: '4y · Bupa Care' },
    { name: 'Sofia Martinez', loc: 'Bristol',    when: 'Applied 4 days ago', stage: 'interview', experience: 'NVQ L3 · Caremark' },
    { name: 'Marcus Chen',    loc: 'Weston-s-M', when: 'Applied 5 days ago', stage: 'interview', experience: '3y · Sunrise' },
  ];
  return (
    <div style={{ background: V2.bg, fontFamily: V2.font, color: V2.ink, minHeight: '100%' }}>
      <V2Header active="" variant="seeker" />
      <main style={{ maxWidth: 1400, margin: '0 auto', padding: '32px 32px 0' }}>
        <header style={{
          marginBottom: 22, display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', flexWrap: 'wrap', gap: 16,
        }}>
          <div>
            <h1 style={{ margin: '0 0 4px', fontSize: 26, fontWeight: 700, color: V2.ink, letterSpacing: '-0.02em' }}>
              Pipeline · Care Assistant — Residential Home
            </h1>
            <p style={{ margin: 0, fontSize: 14.5, color: V2.muted }}>
              Lavender House Care · posted 5 days ago · 86 applicants
            </p>
          </div>
          <div style={{ display: 'flex', gap: 8 }}>
            <V2Button variant="secondary" size="md" icon="mail">Email all in stage</V2Button>
            <V2Button variant="primary" size="md" icon="plus">Add interview slot</V2Button>
          </div>
        </header>

        {/* Pipeline ribbon */}
        <div style={{
          background: '#fff', border: `1px solid ${V2.line}`, borderRadius: V2.rLg,
          padding: 12, marginBottom: 18, display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 4,
        }}>
          {pipeline.map((s) => (
            <button key={s.stage} style={{
              padding: 14, borderRadius: V2.rMd, textAlign: 'left',
              background: s.active ? V2.primarySoft : 'transparent',
              border: `1px solid ${s.active ? V2.primaryRing : 'transparent'}`,
              cursor: 'pointer', fontFamily: V2.font,
            }}>
              <ApplicationStageBadge stage={s.stage} />
              <div style={{ fontSize: 26, fontWeight: 800, color: V2.ink, letterSpacing: '-0.02em', marginTop: 8, lineHeight: 1 }}>{s.count}</div>
              <div style={{ fontSize: 12, color: V2.muted, marginTop: 4 }}>candidates</div>
            </button>
          ))}
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '380px minmax(0, 1fr)', gap: 18, alignItems: 'start' }}>
          {/* Candidates list */}
          <aside style={{
            background: '#fff', border: `1px solid ${V2.line}`, borderRadius: V2.rLg, padding: 8,
            position: 'sticky', top: 86,
          }}>
            <div style={{
              padding: '10px 12px', display: 'flex', justifyContent: 'space-between', alignItems: 'center',
              fontSize: 12, color: V2.muted, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.06em',
            }}>
              <span>Interview stage · 8</span>
              <button style={{
                padding: '4px 10px', borderRadius: 6, background: 'transparent', border: 'none',
                color: V2.primary, fontSize: 12, fontWeight: 600, cursor: 'pointer', fontFamily: V2.font,
              }}>Sort: newest</button>
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
              {candidates.map((c, i) => (
                <button key={i} style={{
                  padding: 12, borderRadius: V2.rMd, textAlign: 'left',
                  background: c.selected ? V2.primarySoft : 'transparent',
                  border: `1px solid ${c.selected ? V2.primaryRing : 'transparent'}`,
                  display: 'flex', alignItems: 'center', gap: 12,
                  cursor: 'pointer', fontFamily: V2.font,
                }}>
                  <span style={{
                    width: 34, height: 34, borderRadius: '50%',
                    background: `linear-gradient(135deg, ${V2.primary}, ${V2.primaryDark})`,
                    color: '#fff', display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                    fontSize: 12, fontWeight: 700, flexShrink: 0,
                  }}>{c.name.split(' ').map(p => p[0]).join('').slice(0,2)}</span>
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ fontSize: 13.5, fontWeight: 700, color: V2.ink }}>{c.name}</div>
                    <div style={{ fontSize: 12, color: V2.muted, marginTop: 2 }}>{c.experience}</div>
                  </div>
                  <Icon name="chevron-right" size={14} color={V2.muted} />
                </button>
              ))}
            </div>
          </aside>

          {/* Candidate detail */}
          <section style={{
            background: '#fff', border: `1px solid ${V2.line}`, borderRadius: V2.rLg, padding: 24,
          }}>
            <header style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 18, gap: 14 }}>
              <div style={{ display: 'flex', alignItems: 'flex-start', gap: 14 }}>
                <span style={{
                  width: 56, height: 56, borderRadius: '50%',
                  background: `linear-gradient(135deg, ${V2.primary}, ${V2.primaryDark})`,
                  color: '#fff', display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                  fontSize: 18, fontWeight: 700,
                }}>PS</span>
                <div>
                  <h2 style={{ margin: '0 0 4px', fontSize: 20, fontWeight: 700, color: V2.ink, letterSpacing: '-0.01em' }}>
                    Priya Sharma
                  </h2>
                  <div style={{ fontSize: 13.5, color: V2.muted, display: 'flex', alignItems: 'center', gap: 12 }}>
                    <span>Bristol · 6y experience · NVQ Level 3</span>
                    <ApplicationStageBadge stage="interview" />
                  </div>
                </div>
              </div>
              <div style={{ display: 'flex', gap: 8 }}>
                <V2Button variant="secondary" size="sm" icon="document">CV</V2Button>
                <V2Button variant="secondary" size="sm" icon="mail">Message</V2Button>
              </div>
            </header>

            {/* Schedule interview panel */}
            <div style={{
              background: V2.bgAlt, borderRadius: V2.rMd, padding: 18, marginBottom: 18,
            }}>
              <h3 style={{ margin: '0 0 14px', fontSize: 14, fontWeight: 700, color: V2.ink }}>Schedule interview</h3>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 12, marginBottom: 14 }}>
                <div>
                  <label style={{ display: 'block', fontSize: 12, color: V2.muted, fontWeight: 600, marginBottom: 6 }}>Date</label>
                  <input type="date" defaultValue="2026-05-16" style={smallInput()} />
                </div>
                <div>
                  <label style={{ display: 'block', fontSize: 12, color: V2.muted, fontWeight: 600, marginBottom: 6 }}>Time</label>
                  <input type="time" defaultValue="14:30" style={smallInput()} />
                </div>
                <div>
                  <label style={{ display: 'block', fontSize: 12, color: V2.muted, fontWeight: 600, marginBottom: 6 }}>Duration</label>
                  <select defaultValue="30" style={smallInput()}>
                    <option value="15">15 min</option>
                    <option value="30">30 min</option>
                    <option value="45">45 min</option>
                    <option value="60">60 min</option>
                  </select>
                </div>
              </div>
              <div style={{ marginBottom: 14 }}>
                <label style={{ display: 'block', fontSize: 12, color: V2.muted, fontWeight: 600, marginBottom: 6 }}>Meeting link / location</label>
                <input defaultValue="Lavender House — main entrance, Clifton, Bristol" style={smallInput()} />
              </div>
              <div style={{ marginBottom: 14 }}>
                <label style={{ display: 'block', fontSize: 12, color: V2.muted, fontWeight: 600, marginBottom: 6 }}>Internal note (not sent to candidate)</label>
                <textarea defaultValue="Confirmed sponsor under Health & Care route. Strong on dementia care." rows={2} style={{ ...smallInput(), resize: 'vertical', fontFamily: V2.font, lineHeight: 1.55 }} />
              </div>
              <div style={{ display: 'flex', gap: 8 }}>
                <V2Button variant="primary" size="md" iconRight="arrow-right">Send invite</V2Button>
                <V2Button variant="secondary" size="md">Suggest 3 times instead</V2Button>
              </div>
            </div>

            {/* Calendar integrations — fully-designed connect panel.
                Top: connected calendar with live sync indicator + sync settings.
                Bottom: 4 provider buttons (Google, Outlook, Office 365, Apple) with
                official-color logos so they're instantly recognisable. */}
            <div style={{
              marginTop: 18, background: '#fff', border: `1px solid ${V2.line}`,
              borderRadius: V2.rLg, overflow: 'hidden',
            }}>
              <header style={{
                padding: '14px 18px', borderBottom: `1px solid ${V2.line}`,
                display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 12,
              }}>
                <div>
                  <h3 style={{ margin: 0, fontSize: 14, fontWeight: 700, color: V2.ink, letterSpacing: '-0.01em' }}>
                    Calendar integrations
                  </h3>
                  <p style={{ margin: '3px 0 0', fontSize: 12, color: V2.muted }}>
                    Two-way sync · invites auto-create events · busy time blocked from candidate booking pages
                  </p>
                </div>
                <V2Button variant="ghost" size="sm" icon="sliders">Settings</V2Button>
              </header>

              {/* Connected: Google */}
              <div style={{
                padding: '14px 18px', borderBottom: `1px solid ${V2.lineSoft}`,
                display: 'flex', alignItems: 'center', gap: 14,
              }}>
                <CalendarLogo provider="google" size={32} />
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 3 }}>
                    <span style={{ fontSize: 13.5, fontWeight: 700, color: V2.ink }}>Google Calendar</span>
                    <V2Badge tone="success" size="sm" icon="check">Connected</V2Badge>
                  </div>
                  <div style={{ fontSize: 12, color: V2.muted }}>
                    hiring@lavenderhouse.co.uk · last sync 2 min ago · primary calendar
                  </div>
                </div>
                <button style={{
                  padding: '6px 12px', borderRadius: 8,
                  background: 'transparent', color: V2.danger,
                  border: `1px solid ${V2.dangerLine}`,
                  fontSize: 12.5, fontWeight: 600, cursor: 'pointer', fontFamily: V2.font,
                }}>Disconnect</button>
              </div>

              {/* Available providers */}
              <div style={{ padding: '12px 18px 18px' }}>
                <div style={{
                  fontSize: 11.5, fontWeight: 700, color: V2.muted,
                  textTransform: 'uppercase', letterSpacing: '0.06em', marginBottom: 10,
                }}>Connect another</div>
                <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 8 }}>
                  <CalendarConnectBtn provider="outlook"   label="Outlook"            sub="outlook.com / Hotmail" />
                  <CalendarConnectBtn provider="office365" label="Microsoft 365"      sub="Work / Exchange" />
                  <CalendarConnectBtn provider="apple"     label="Apple iCloud"        sub="iCal / CalDAV" />
                  <CalendarConnectBtn provider="calendly"  label="Calendly"           sub="Booking links" />
                </div>
                <div style={{ marginTop: 12, fontSize: 11.5, color: V2.muted, lineHeight: 1.55 }}>
                  ScrollJob reads free/busy + writes event invites only. We never read event contents from other calendars.
                </div>
              </div>
            </div>
          </section>
        </div>
      </main>
      <V2Footer />
    </div>
  );
}

Object.assign(window, { V2EmpApplyFormScreen, V2EmpInterviewsScreen });