// Caliber — "The Honest AI Position" section.
// Light warm bg, left-aligned, editorial.
// Tightened per PR 3.5: removed Eubanks quote + AI does/never split — both live
// on the future /ai-principles page (linked from the closing CTA).
// Exports: <HonestAISection />

const AI_STATS = [
  {
    n: '66%',
    body: <>candidates won't apply to jobs that use <b>AI in hiring decisions.</b></>,
    cite: { label: 'Pew Research, 2023', href: 'https://www.pewresearch.org/internet/2023/04/20/americans-views-on-use-of-ai-in-hiring/' },
  },
  {
    n: '71%',
    body: <>oppose AI making the <b>final hiring call.</b></>,
    cite: { label: 'Pew Research, 2023', href: 'https://www.pewresearch.org/internet/2023/04/20/americans-views-on-use-of-ai-in-hiring/' },
  },
  {
    n: '↑',
    body: <><b>Cost-per-hire and time-to-hire</b> are both UP in the last 3 years. Same 3 years your competitors bought AI.</>,
    cite: { label: 'SHRM, 2025', href: 'https://www.shrm.org/topics-tools/news/hr-trends/recruitment-is-broken' },
  },
  {
    n: '78%',
    body: <>of recruiting execs expect candidates to increasingly <b>use AI to apply.</b> Bots applying to bots.</>,
    cite: { label: 'SHRM, 2025', href: 'https://www.shrm.org/topics-tools/news/hr-trends/recruitment-is-broken' },
  },
  {
    n: '45%',
    body: <>of recruiters blame <b>burnout on repetitive admin.</b> Not hard conversations. Admin.</>,
    cite: { label: 'Recruiterflow, 2026', href: 'https://recruiterflow.com/blog/future-of-ai-in-recruitment/' },
  },
];

const AI_MONO  = 'ui-monospace, "SF Mono", Menlo, Consolas, monospace';

function HonestAISection() {
  return (
    <section
      id="honest-ai"
      className="cal-section"
      data-screen-label="Honest AI"
      style={{
        background: 'var(--cal-bg-warm)',
        padding: '80px 72px 80px',
        scrollMarginTop: 80,
      }}
    >
      <div className="cal-container">

        {/* ── Lede (carries the differentiation argument per PR 3.7 — "where AI is pointed") ── */}
        <div style={{ maxWidth: 760, marginBottom: 40 }}>
          <div className="cal-eyebrow" style={{ marginBottom: 22 }}>
            <CalStar size={11} grad={false} style={{ color: 'var(--cal-blue-ink)' }} /> The Honest AI Position
          </div>
          <h2 style={{ margin: '0 0 20px', fontSize: 'clamp(40px, 4.5vw, 64px)', fontWeight: 500, letterSpacing: '-0.03em', lineHeight: 1.05 }}>
            Your best candidates are{' '}
            <span style={{ color: 'var(--cal-accent)', fontWeight: 600 }}>ghosting</span>{' '}
            AI screeners.
          </h2>
          <p style={{ margin: '0 0 16px', fontSize: 18, lineHeight: 1.6, color: 'var(--cal-body)', maxWidth: 680, textWrap: 'pretty' }}>
            Two-thirds of the people you want to hire have already decided they won't apply
            to jobs that use AI in hiring decisions. The other third know when they're
            talking to a bot, they're just quieter about it.
          </p>
          <p style={{ margin: 0, fontSize: 18, lineHeight: 1.6, color: 'var(--cal-body)', maxWidth: 680, textWrap: 'pretty' }}>
            The problem isn't AI. It's <span style={{ color: 'var(--cal-accent)', fontWeight: 600 }}>where AI is pointed.</span> Every tool points AI at the candidate. <span style={{ color: 'var(--cal-ink)', fontWeight: 600 }}>We point it at the admin.</span>
          </p>
        </div>

        {/* ── Stat wall ── */}
        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)',
          border: '1px solid var(--cal-line)', borderRadius: 18,
          overflow: 'hidden', marginBottom: 32,
          background: '#fff',
        }}>
          {AI_STATS.map((s, i) => (
            <div key={i} style={{
              padding: '28px 22px 24px',
              borderRight: i < 4 ? '1px solid var(--cal-line-2)' : 'none',
              display: 'flex', flexDirection: 'column', gap: 12,
            }}>
              <div style={{ fontSize: 10, color: 'var(--cal-muted-2)', letterSpacing: '0.12em', fontFamily: AI_MONO, fontWeight: 500 }}>0{i + 1}</div>
              <div style={{ fontFamily: AI_MONO, fontSize: 'clamp(32px, 3.5vw, 52px)', fontWeight: 500, letterSpacing: '-0.04em', lineHeight: 0.95, color: 'var(--cal-ink)', fontFeatureSettings: '"tnum"' }}>{s.n}</div>
              <div style={{ fontSize: 13, lineHeight: 1.5, color: 'var(--cal-body)', flex: 1, textWrap: 'pretty' }}>{s.body}</div>
              <a href={s.cite.href} target="_blank" rel="noopener noreferrer" style={{
                fontSize: 10, letterSpacing: '0.04em', color: 'var(--cal-muted-2)',
                fontFamily: AI_MONO,
                borderTop: '1px solid var(--cal-line-2)', paddingTop: 8,
                textDecoration: 'underline', textDecorationColor: 'var(--cal-line)',
                textUnderlineOffset: 3,
              }}
              onMouseEnter={(e) => { e.currentTarget.style.color = 'var(--cal-ink)'; e.currentTarget.style.textDecorationColor = 'var(--cal-ink)'; }}
              onMouseLeave={(e) => { e.currentTarget.style.color = 'var(--cal-muted-2)'; e.currentTarget.style.textDecorationColor = 'var(--cal-line)'; }}
              >
                Source: {s.cite.label} ↗
              </a>
            </div>
          ))}
        </div>

        {/* ── Closing line ── */}
        <div style={{ paddingTop: 24, borderTop: '1px solid var(--cal-line)' }}>
          <h3 style={{ margin: '0 0 24px', fontSize: 'clamp(28px, 3vw, 44px)', fontWeight: 500, letterSpacing: '-0.025em', lineHeight: 1.1, color: 'var(--cal-ink)', maxWidth: 820 }}>
            AI can read 10,000 CVs. It still can't pick the<br />
            right one. <span style={{ color: 'var(--cal-accent)' }}>That's your job.</span>{' '}
            <span>This is ours.</span>
          </h3>
          <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap' }}>
            <button className="cal-btn cal-btn--primary" style={{ padding: '12px 20px', fontSize: 14 }}>See what Scout does for you</button>
            <a href="AI-Principles.html" className="cal-btn cal-btn--ghost" style={{ padding: '12px 18px', fontSize: 14, textDecoration: 'none' }}>Read our AI principles →</a>
          </div>
        </div>

      </div>
    </section>
  );
}

Object.assign(window, { HonestAISection });