// Caliber — "Cancel LinkedIn Recruiter" / flagship Scout section.
// Scout is prominently named in the eyebrow + H2 + demo label per audit (PR 5.5).
// Merged with the former standalone Scout section — this is where Scout is demonstrated.
//
// Section flow (3 rows, condensed from 5 in PR 5):
//   1. Top lead — Scout-forward H2 with research footnote + CTAs
//   2. Scout demo — single ScoutDemo mock (replaces SameBriefSplit + separate demo row)
//   3. "The math LinkedIn doesn't publish" — 4-cell mono strip with citation links
//      (merges the former constraint-cards row and education-strip into one proof block)
//
// Exports: <CancelLinkedInSection />

const CLI_MONO  = 'ui-monospace, "SF Mono", Menlo, Consolas, monospace';
const CLI_SERIF = '"Fraunces", "Times New Roman", serif';

const LI_MATH = [
  {
    n: '$0',
    label: 'PUBLISHED PRICE',
    body: <>LinkedIn Corporate has no published rate. You negotiate blind. <span style={{ color: 'var(--cal-accent)' }}>Every year.</span> They know your budget; you don't know theirs.</>,
    cite: null,
  },
  {
    n: '+15%',
    label: 'ANNUAL RENEWAL HIKE',
    body: 'Your $10,800 seat becomes $14,283 by year three. $18,889 by year five. Negotiated against compounding list.',
    cite: { label: 'Vendr · Pin.com 2026', href: 'https://www.pin.com/blog/linkedin-recruiter-pricing-2026/' },
  },
  {
    n: '150',
    label: 'POOLED INMAILS / MO',
    body: 'Credits shared across your entire team. A 3-recruiter team at 50 InMails/day each hits the cap in 3 days. You stop sourcing.',
    cite: { label: 'LinkedIn helpdesk', href: 'https://www.linkedin.com/help/recruiter/answer/a745199' },
  },
  {
    n: '200',
    label: 'FIRST-WEEK CAP, NEW SEAT',
    body: "Hit 200 InMails in a new seat's first calendar week and LinkedIn disables the service until next week. New hires sit idle.",
    cite: { label: 'LinkedIn helpdesk', href: 'https://www.linkedin.com/help/recruiter/answer/a745199' },
  },
];

function CancelLinkedInSection() {
  return (
    <section
      className="cal-section"
      data-screen-label="Cancel LinkedIn"
      style={{
        background: '#fff',
        padding: '100px 72px 100px',
      }}
    >
      <div className="cal-container">

        {/* ── Row 1: Top lead — Scout-forward ── */}
        <div style={{ marginBottom: 56 }}>
          <div className="cal-eyebrow" style={{ marginBottom: 22 }}>
            <CalStar size={11} grad={false} style={{ color: 'var(--cal-blue-ink)' }} />
            Scout · Replace LinkedIn Recruiter
          </div>
          <h2 style={{ margin: '0 0 18px', fontSize: 'clamp(40px, 4.5vw, 64px)', fontWeight: 500, letterSpacing: '-0.035em', lineHeight: 1.02, maxWidth: 1080 }}>
            <span style={{ display: 'block' }}>Cancel LinkedIn Recruiter.</span>
            <span style={{ display: 'block', fontFamily: CLI_SERIF, fontStyle: 'normal', fontWeight: 700, fontVariationSettings: '"opsz" 14, "SOFT" 100, "WONK" 0, "wght" 700', color: 'var(--cal-blue-ink)', letterSpacing: '-0.02em' }}>
              Scout does it for $18,000 less.
            </span>
          </h2>
          <p style={{ margin: '0 0 18px', fontSize: 18, lineHeight: 1.6, color: 'var(--cal-body)', maxWidth: 660, textWrap: 'pretty' }}>
            Caliber Scout is our AI-powered sourcing engine. It reads your brief in plain English and matches it against 2.4 billion public profiles. No boolean. For significantly less than one LinkedIn Recruiter seat.
          </p>
          <div style={{ fontSize: 11, color: 'var(--cal-muted)', fontFamily: CLI_MONO, lineHeight: 1.55, maxWidth: 660, marginBottom: 26 }}>
            $18k figure: LinkedIn Recruiter Corporate list pricing (USD $10,800–$12,960/seat/year per Vendr + Pin.com 2026) plus typical 15% annual renewal + InMail overage.
          </div>
          <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap', alignItems: 'center' }}>
            <a href="Pricing.html" className="cal-btn cal-btn--primary" style={{ padding: '12px 20px', fontSize: 14, textDecoration: 'none' }}>
              See our pricing →
            </a>
            <a href="#live-demo" className="cal-btn cal-btn--ghost" style={{ padding: '12px 18px', fontSize: 14, textDecoration: 'none' }}>
              {Icon.play({ size: 12 })} Watch Scout run
            </a>
          </div>
        </div>

        {/* ── Row 2: Scout demo ── */}
        <div style={{ marginBottom: 48 }}>
          <div style={{ fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--cal-muted)', fontFamily: CLI_MONO, fontWeight: 600, marginBottom: 14, display: 'inline-flex', alignItems: 'center', gap: 8 }}>
            <CalStar size={10} grad={false} style={{ color: 'var(--cal-blue-ink)' }} />
            Scout · brief → candidates in under 15s
          </div>
          <ScoutDemo compact />
        </div>

        {/* ── Row 3: "The math LinkedIn doesn't publish" — matches Honest AI stat wall pattern ── */}
        <div>
          {/* Popped-out intro header (outside the stat wall card) */}
          <div style={{ marginBottom: 20, maxWidth: 720 }}>
            <div style={{ fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase', color: 'var(--cal-accent)', fontFamily: CLI_MONO, fontWeight: 700, marginBottom: 10 }}>
              The receipts
            </div>
            <h3 style={{
              margin: 0,
              fontSize: 'clamp(26px, 2.4vw, 36px)',
              fontWeight: 500,
              letterSpacing: '-0.025em',
              lineHeight: 1.15,
              color: 'var(--cal-ink)',
            }}>
              The math LinkedIn doesn't publish.
            </h3>
          </div>

          {/* 4-cell stat wall — matches Honest AI section design */}
          <div style={{
            display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)',
            border: '1px solid var(--cal-line)', borderRadius: 18,
            overflow: 'hidden',
            background: '#fff',
          }}>
            {LI_MATH.map((m, i) => (
              <div key={m.label} style={{
                padding: '28px 22px 24px',
                borderRight: i < 3 ? '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: CLI_MONO, fontWeight: 500 }}>0{i + 1}</div>
                <div style={{ fontFamily: CLI_MONO, fontSize: 'clamp(32px, 3.5vw, 52px)', fontWeight: 500, letterSpacing: '-0.04em', lineHeight: 0.95, color: 'var(--cal-ink)', fontFeatureSettings: '"tnum"' }}>
                  {m.n}
                </div>
                <div style={{ fontSize: 10.5, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--cal-muted)', fontFamily: CLI_MONO, fontWeight: 600 }}>
                  {m.label}
                </div>
                <div style={{ fontSize: 13, lineHeight: 1.5, color: 'var(--cal-body)', flex: 1, textWrap: 'pretty' }}>
                  {m.body}
                </div>
                {m.cite ? (
                  <a href={m.cite.href} target="_blank" rel="noopener noreferrer" style={{
                    fontSize: 10, letterSpacing: '0.04em', color: 'var(--cal-muted-2)',
                    fontFamily: CLI_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: {m.cite.label} ↗
                  </a>
                ) : (
                  <div style={{
                    fontSize: 10, letterSpacing: '0.04em', color: 'var(--cal-muted-2)',
                    fontFamily: CLI_MONO,
                    borderTop: '1px solid var(--cal-line-2)', paddingTop: 8,
                  }}>
                    No public data
                  </div>
                )}
              </div>
            ))}
          </div>
        </div>

      </div>
    </section>
  );
}

Object.assign(window, { CancelLinkedInSection });