// Taktume Recruit — landing page (B2B redesign)

const RecruitMarkF = window.RecruitMarkF;

// MS Forms — Taktume Recruit Pilot Partnership application.
// First 5 pilot partners get a 30-day proof-of-value at no cost.
// Kept as fallback for if the Power Automate webhook is unreachable.
const PILOT_FORM = "https://forms.cloud.microsoft/Pages/ResponsePage.aspx?id=Uo_TWsNMaUS9zW7QXs5EgJAYqaPc7k1PsWnKICOVivZUQlZON0pWTlZQSFVKT0MzNEdaWlRPQkgxUyQlQCN0PWcu";

// AWS Lambda + Microsoft Graph — appends row to TakTuMe Recruit Partnership
// form.xlsx in SharePoint. Lambda holds Graph app credentials in AWS Secrets
// Manager; the modal calls it anonymously over HTTPS with CORS.
const PILOT_WEBHOOK = "https://dw5bcvn02i.execute-api.us-east-1.amazonaws.com/pilot";

// ─── Pilot application modal ──────────────────────────────────────────────
function PilotApplicationModal({ open, onClose }) {
  const [form, setForm] = React.useState({ name: '', email: '', company: '', hiringVolume: '', notes: '', marketingConsent: false });
  const [status, setStatus] = React.useState('idle');
  const [errorMsg, setErrorMsg] = React.useState('');
  const set = (k) => (e) => setForm({ ...form, [k]: e.target.value });
  const setCheck = (k) => (e) => setForm({ ...form, [k]: e.target.checked });

  React.useEffect(() => {
    if (!open) {
      setForm({ name: '', email: '', company: '', hiringVolume: '', notes: '', marketingConsent: false });
      setStatus('idle'); setErrorMsg('');
      document.body.style.overflow = '';
    } else {
      document.body.style.overflow = 'hidden';
      if (typeof window !== 'undefined' && window.tkTrack) window.tkTrack('modal_opened', { modal: 'pilot_recruit' });
    }
    return () => { document.body.style.overflow = ''; };
  }, [open]);

  React.useEffect(() => {
    if (!open) return;
    const onKey = (e) => { if (e.key === 'Escape') onClose(); };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, [open, onClose]);

  const submit = async (e) => {
    e.preventDefault();
    if (status === 'submitting') return;
    if (!form.name.trim() || !form.email.trim() || !form.company.trim() || !form.hiringVolume) {
      setErrorMsg('Name, work email, company, and hiring volume are required.');
      setStatus('error');
      return;
    }
    setStatus('submitting'); setErrorMsg('');
    // ─── Attribution capture ──────────────────────────────────────────────
    // PostHog distinct_id lets us join Excel rows back to session replays;
    // UTM params + referrer answer "where did this signup come from".
    const url = new URL(window.location.href);
    const distinctId = (window.posthog && typeof window.posthog.get_distinct_id === 'function')
      ? window.posthog.get_distinct_id() : '';
    const payload = {
      source: window.location.href,
      submittedAt: new Date().toISOString(),
      name: form.name.trim(),
      email: form.email.trim(),
      company: form.company.trim(),
      hiringVolume: form.hiringVolume,
      notes: form.notes.trim(),
      marketingConsent: form.marketingConsent,
      distinctId: distinctId,
      utmSource: url.searchParams.get('utm_source') || '',
      utmMedium: url.searchParams.get('utm_medium') || '',
      utmCampaign: url.searchParams.get('utm_campaign') || '',
      referrer: document.referrer || '',
    };
    try {
      if (!PILOT_WEBHOOK) throw new Error('Webhook not configured yet.');
      const res = await fetch(PILOT_WEBHOOK, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(payload),
      });
      if (!res.ok) throw new Error('Submission failed: ' + res.status);
      setStatus('success');
      if (typeof window !== 'undefined') {
        if (window.tkIdentify) window.tkIdentify(payload.email, { name: payload.name, audience: 'recruit', company: payload.company, hiring_volume: payload.hiringVolume });
        if (window.tkTrack) window.tkTrack('modal_submitted', { modal: 'pilot_recruit', company: payload.company, hiring_volume: payload.hiringVolume });
      }
    } catch (err) {
      console.error('[PilotApplication] submit failed:', err);
      setErrorMsg('Submission failed. Please try the backup form.');
      setStatus('error');
      if (typeof window !== 'undefined' && window.tkTrack) window.tkTrack('modal_error', { modal: 'pilot_recruit', message: String(err.message || err) });
    }
  };

  if (!open) return null;
  return (
    <div className="signup-modal signup-modal-recruit" role="dialog" aria-modal="true" aria-label="Apply as a design partner">
      <div className="signup-backdrop" onClick={onClose}></div>
      <div className="signup-card">
        <button className="signup-close" onClick={onClose} aria-label="Close">×</button>
        <div className="signup-head">
          <h2 className="signup-h">Apply as a <em>design partner.</em></h2>
          <p className="signup-sub">30-day pilot at no cost. Founder on the call. We use your feedback to shape the roadmap.</p>
        </div>
        {status === 'success' ? (
          <div className="signup-success">
            <div className="signup-success-mark">✓</div>
            <h3 className="signup-success-h">Application received.</h3>
            <p>We'll reach out within 48 hours to schedule a 15-minute intro with one of the founders.</p>
            <button className="lp-cta lp-cta-recruit" onClick={onClose}>Close</button>
          </div>
        ) : (
          <form className="signup-form" onSubmit={submit} noValidate>
            <label className="signup-field">
              <span className="signup-label">Name</span>
              <input type="text" value={form.name} onChange={set('name')} placeholder="Your full name" autoComplete="name" required disabled={status === 'submitting'} />
            </label>
            <label className="signup-field">
              <span className="signup-label">Work email</span>
              <input type="email" value={form.email} onChange={set('email')} placeholder="you@yourcompany.com" autoComplete="email" required disabled={status === 'submitting'} />
            </label>
            <label className="signup-field">
              <span className="signup-label">Company</span>
              <input type="text" value={form.company} onChange={set('company')} placeholder="Your company name" autoComplete="organization" required disabled={status === 'submitting'} />
            </label>
            <label className="signup-field">
              <span className="signup-label">Annual hiring volume</span>
              <select value={form.hiringVolume} onChange={set('hiringVolume')} required disabled={status === 'submitting'}>
                <option value="">Pick one…</option>
                <option value="<50">Under 50 hires / yr</option>
                <option value="50-200">50–200 hires / yr</option>
                <option value="200-1000">200–1,000 hires / yr</option>
                <option value="1000+">1,000+ hires / yr</option>
              </select>
            </label>
            <label className="signup-field">
              <span className="signup-label">Tell us about your hiring pipeline <em className="signup-opt">(optional)</em></span>
              <textarea value={form.notes} onChange={set('notes')} placeholder="What roles, what's broken today, what would success look like?" rows={3} disabled={status === 'submitting'} />
            </label>
            <label className="signup-consent">
              <input type="checkbox" checked={form.marketingConsent} onChange={setCheck('marketingConsent')} disabled={status === 'submitting'} />
              <span className="signup-consent-text">Yes, also send me product updates and hiring insights from Taktume. <em>(optional)</em></span>
            </label>
            {status === 'error' && (
              <div className="signup-error">
                <strong>Couldn't submit:</strong> {errorMsg} <a href={PILOT_FORM} target="_blank" rel="noopener">Use the backup form →</a>
              </div>
            )}
            <button type="submit" className="lp-cta lp-cta-recruit signup-submit" disabled={status === 'submitting'}>
              {status === 'submitting' ? 'Submitting…' : 'Apply as a design partner →'}
            </button>
            <p className="signup-fine">We typically reply within 48 hours. No card, no commitment until the pilot agreement.</p>
          </form>
        )}
      </div>
    </div>
  );
}

const VIDEOS = [
  "videos/candidate-1.mp4",
  "videos/candidate-2.mp4",
  "videos/candidate-3.mp4",
  "videos/candidate-4.mp4",
  "videos/candidate-5.mp4",
];
// Live-pilot hero uses the highest-quality interview clip; this is the same
// source as the London worldmap city (vIdx 2) — one acceptable duplicate
// because we only have 5 unique candidate clips and want a real interview here.
const VIDEO_SRC = VIDEOS[2];

// ── World map hero ──
// Real Natural-Earth-derived country outlines (CC BY-SA 3.0,
// Al MacDonald / Fritz Lekschas, simple-world-map). Loaded from
// world-map-data.js as window.WORLD_MAP_PATHS + window.WORLD_MAP_VIEWBOX.
// We render outline-only — no fill, no dot grid — with each country's
// stroke giving us natural inter-country borders for free.
// Hub fires sequential connections to 6 cities; each lands → pings → reveals
// a live video card.

const WORLD_PATHS    = window.WORLD_MAP_PATHS    || [];
const WORLD_VIEWBOX  = window.WORLD_MAP_VIEWBOX  || "30.767 241.591 784.077 458.627";
// Parse viewBox into [minX, minY, w, h] for percent math
const VB = WORLD_VIEWBOX.split(/\s+/).map(Number);
const [VBX0, VBY0, VBW, VBH] = VB;

// Hub: central Asia (Kazakhstan area — visually balanced between continents).
// Nudged south of the equator-line so spokes fan out instead of running
// flat across the middle row.
const HUB = { x: 552, y: 412 };

// City coordinates calibrated against the real SVG viewBox
// (30.767 241.591 → 814.844 700.218). Positions placed inside their actual
// country shapes — and arranged so every hub→city spoke leaves at a distinct
// angle. No more colinear edges along the y≈388 row.
const CITIES = [
  { id: 'sf',  x:  78, y: 358, role: 'Sr SRE',          place: 'San Francisco', vIdx: 0 },
  { id: 'tor', x: 232, y: 328, role: 'Frontend Eng',    place: 'Toronto',       vIdx: 1 },
  { id: 'lon', x: 398, y: 298, role: 'Product Manager', place: 'London',        vIdx: 2 },
  { id: 'bgl', x: 660, y: 470, role: 'Data Eng',        place: 'Bangalore',     vIdx: 3 },
  { id: 'rud', x: 478, y: 438, role: 'ML Engineer',     place: 'Riyadh',        vIdx: 4 },
];

// Convert SVG viewBox coords to container percentages.
const xPct = (x) => ((x - VBX0) / VBW) * 100;
const yPct = (y) => ((y - VBY0) / VBH) * 100;

function RecruitWorldMap() {
  // Per-city phase: 0=invisible, 1=line drawing, 2=line landed (ping),
  // 3=card visible. Drives sequenced reveal.
  const [phase, setPhase] = React.useState(() => CITIES.map(() => 0));
  const updatePhase = (i, p) => setPhase(prev => {
    if (prev[i] >= p) return prev;
    const next = [...prev]; next[i] = p; return next;
  });

  React.useEffect(() => {
    const STEP = 1300;       // delay between cities
    const LINE_TIME = 700;   // line draw duration
    const PING_AT = LINE_TIME;
    const CARD_AT = LINE_TIME + 250;
    const timers = [];
    CITIES.forEach((_, i) => {
      const t0 = i * STEP;
      timers.push(setTimeout(() => updatePhase(i, 1), t0));
      timers.push(setTimeout(() => updatePhase(i, 2), t0 + PING_AT));
      timers.push(setTimeout(() => updatePhase(i, 3), t0 + CARD_AT));
    });
    return () => timers.forEach(clearTimeout);
  }, []);

  const revealedCount = phase.filter(p => p >= 3).length;

  return (
    <div className="recruit-worldmap">
      {/* Continents — outline-only, real country borders for free */}
      <svg className="world-base" viewBox={WORLD_VIEWBOX} preserveAspectRatio="xMidYMid meet">
        <g
          fill="none"
          stroke="#00FFFF"
          strokeOpacity="0.55"
          strokeWidth="0.55"
          strokeLinejoin="round"
          strokeLinecap="round"
          style={{ filter: 'drop-shadow(0 0 1px rgba(0,255,255,0.35))' }}
        >
          {WORLD_PATHS.map((d, i) => (
            <path key={i} d={d} />
          ))}
        </g>
      </svg>

      {/* Network lines — sequenced draw from hub to each city */}
      <svg className="wm-network-svg" viewBox={WORLD_VIEWBOX} preserveAspectRatio="xMidYMid meet">
        {CITIES.map((c, i) => {
          const len = Math.hypot(c.x - HUB.x, c.y - HUB.y);
          const drawn = phase[i] >= 1;
          return (
            <line
              key={c.id}
              x1={HUB.x} y1={HUB.y}
              x2={c.x}   y2={c.y}
              stroke="#00FFFF"
              strokeWidth="1.1"
              strokeLinecap="round"
              strokeDasharray={`${len}`}
              strokeDashoffset={drawn ? 0 : len}
              style={{
                transition: 'stroke-dashoffset 0.7s cubic-bezier(.5,.05,.3,1)',
                opacity: drawn ? 0.85 : 0,
                filter: 'drop-shadow(0 0 4px rgba(0,255,255,0.9))',
              }}
            />
          );
        })}
        {/* a traveling pulse along each completed line */}
        {CITIES.map((c, i) => phase[i] >= 2 && (
          <circle
            key={`pulse-${c.id}`}
            r="3.4"
            fill="#00FFFF"
            style={{ filter: 'drop-shadow(0 0 6px #00FFFF)' }}
          >
            <animateMotion
              dur="2.2s"
              repeatCount="indefinite"
              path={`M${HUB.x},${HUB.y} L${c.x},${c.y}`}
              begin={`${i * 0.18}s`}
            />
            <animate attributeName="opacity" values="0;1;1;0" dur="2.2s" repeatCount="indefinite" />
          </circle>
        ))}
      </svg>

      {/* Hub server (central) — pulsing core */}
      <div className="wm-hub" style={{ left: `${xPct(HUB.x)}%`, top: `${yPct(HUB.y)}%` }}>
        <span className="wm-hub-core" />
        <span className="wm-hub-ring wm-hub-ring-1" />
        <span className="wm-hub-ring wm-hub-ring-2" />
        <span className="wm-hub-label">HUB · TAKTUME-01</span>
      </div>

      {/* City markers + cards */}
      {CITIES.map((c, i) => (
        <React.Fragment key={c.id}>
          {/* pin appears when line lands (phase 2) */}
          <div
            className={`wm-pin ${phase[i] >= 2 ? 'is-in' : ''}`}
            style={{
              left: `${xPct(c.x)}%`,
              top: `${yPct(c.y)}%`,
              opacity: phase[i] >= 2 ? 1 : 0,
            }}
          >
            {phase[i] >= 2 && <span className="wm-pin-ring" />}
          </div>
          {/* video card appears at phase 3 */}
          <div
            className={`wm-card ${phase[i] >= 3 ? 'is-in' : ''}`}
            style={{
              left: `${xPct(c.x)}%`,
              top: `${yPct(c.y)}%`,
              zIndex: 10 + i,
              opacity: phase[i] >= 3 ? 1 : 0,
              transform: phase[i] >= 3
                ? 'translate(-50%, calc(-100% - 14px)) scale(1)'
                : 'translate(-50%, calc(-100% - 4px)) scale(0.92)',
            }}
          >
            <div className="wm-card-thumb">
              <video src={VIDEOS[c.vIdx]} autoPlay muted loop playsInline />
              <span className="wm-card-live">
                <span className="wm-live-dot" />LIVE
              </span>
            </div>
            <div className="wm-card-meta">
              <span className="wm-card-role">{c.role}</span>
              <span className="wm-card-place">{c.place}</span>
            </div>
          </div>
        </React.Fragment>
      ))}
    </div>
  );
}

// ── Video production slot — drop-in template ──
// Each suggested shot gets a card. To wire a real recording, drop the file at
// the indicated path in /videos/ and the placeholder is replaced automatically.
function VideoSlot({ n, slot, sellsClass = '' }) {
  const [hasVideo, setHasVideo] = React.useState(true);
  return (
    <div className={`vslot ${hasVideo ? '' : 'vslot-empty'} ${sellsClass}`}>
      <div className="vslot-frame">
        {hasVideo ? (
          <video
            src={slot.src}
            autoPlay muted loop playsInline
            onError={() => setHasVideo(false)}
            onLoadedData={() => setHasVideo(true)}
          />
        ) : (
          <div className="vslot-placeholder">
            <div className="vslot-ph-icon">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4">
                <rect x="3" y="6" width="14" height="12" rx="1.5" />
                <path d="M17 10l4-2v8l-4-2z" />
                <circle cx="8" cy="12" r="2" opacity="0.5" />
              </svg>
            </div>
            <div className="vslot-ph-record">
              <span className="rec-dot"></span> READY TO RECORD
            </div>
          </div>
        )}
        <div className="vslot-corner-num">#{n}</div>
        {slot.duration && <div className="vslot-corner-dur">{slot.duration}</div>}
      </div>
      <div className="vslot-body">
        <div className="vslot-label">{slot.label}</div>
        <div className="vslot-desc">{slot.shot}</div>
        <div className="vslot-sells"><span className="vslot-sells-eyebrow">WHY IT SELLS</span> {slot.why}</div>
        <div className="vslot-path">
          <span className="vslot-path-label">DROP FILE AT</span>
          <code>{slot.src}</code>
        </div>
      </div>
    </div>
  );
}

const VIDEO_SLOTS = [
  {
    n: 1,
    label: 'Dashboard time-lapse',
    shot: 'Candidate list re-ranking itself overnight as scores arrive — 02:00 to 09:00 timestamp visible.',
    why: 'Shows the "wake up to a shortlist" promise.',
    src: 'videos/shot-1-dashboard-timelapse.mp4',
    duration: '12s',
    placement: 'dashboard',
  },
  {
    n: 2,
    label: 'Live rubric scoring',
    shot: 'Split-screen: candidate face + live transcript scrolling with rubric scores ticking up in real time.',
    why: 'Proves rubric scoring is live, not post-hoc.',
    src: 'videos/shot-2-live-rubric.mp4',
    duration: '15s',
    placement: 'live-clip',
  },
  {
    n: 3,
    label: 'Arabic interview + EN transcript',
    shot: 'Arabic-language interview clip with English transcript translation alongside.',
    why: 'Multilingual claim becomes tangible — huge for NTWW pilot.',
    src: 'videos/shot-3-arabic-interview.mp4',
    duration: '10s',
    placement: 'languages',
  },
  {
    n: 4,
    label: 'JD upload → rubric extract',
    shot: 'Paste JD, watch competencies populate automatically with weights.',
    why: 'The "magic moment" before any interview happens.',
    src: 'videos/shot-4-jd-rubric.mp4',
    duration: '8s',
    placement: 'features',
  },
  {
    n: 5,
    label: 'Calendar collapse',
    shot: 'Recruiter calendar full of slots, sweeps clear, replaced by a single "Review shortlist" block.',
    why: 'Visceral time-saved metaphor.',
    src: 'videos/shot-5-calendar-collapse.mp4',
    duration: '8s',
    placement: 'shift',
  },
  {
    n: 6,
    label: 'Transcript → replay jump',
    shot: 'Recruiter clicks a STAR moment in transcript, candidate video jumps to that exact answer.',
    why: 'Shows the audit-trail / replay value.',
    src: 'videos/shot-6-replay-scrubber.mp4',
    duration: '10s',
    placement: 'audit',
  },
  {
    n: 7,
    label: 'Voice waveform close-up',
    shot: 'Candidate close-up with voice waveform + confidence/STAR coverage indicators pulsing.',
    why: 'Hero loop for the world map — cinematic.',
    src: 'videos/shot-7-waveform-hero.mp4',
    duration: '10s',
    placement: 'worldmap',
  },
  {
    n: 8,
    label: '3-up parallel interviews',
    shot: 'Same JD, three different timezones, all running at once with timer counters.',
    why: 'Proves "massively parallel" claim better than copy.',
    src: 'videos/shot-8-parallel-grid.mp4',
    duration: '12s',
    placement: 'parallel',
  },
];

function VideoRoadmap() {
  const [filter, setFilter] = React.useState('all');
  const filtered = filter === 'all' ? VIDEO_SLOTS : VIDEO_SLOTS.filter(s => s.placement === filter);
  return (
    <section className="recruit-section vroadmap-section" id="video-roadmap">
      <div className="recruit-wrap">
        <div className="recruit-eyebrow">For the production team</div>
        <h2 className="recruit-h2">Video <em>shot list</em> — drop-in slots.</h2>
        <p className="recruit-section-sub">
          Eight shots, eight filenames. Record any of them, save as the indicated MP4, and the slot picks it up automatically.
          The empty cards below show what we still need to film.
        </p>
        <div className="vroadmap-grid">
          {VIDEO_SLOTS.map(slot => <VideoSlot key={slot.n} n={slot.n} slot={slot} />)}
        </div>
        <div className="vroadmap-checklist">
          <div className="vroadmap-checklist-head">
            <span className="vrc-eyebrow">PRODUCTION CHECKLIST</span>
            <span className="vrc-meta">{VIDEO_SLOTS.length} shots · ~85s total runtime · MP4 / 1080p / 24fps</span>
          </div>
          <div className="vroadmap-checklist-rows">
            {VIDEO_SLOTS.map(s => (
              <div className="vrc-row" key={s.n}>
                <span className="vrc-num">{String(s.n).padStart(2,'0')}</span>
                <span className="vrc-label">{s.label}</span>
                <code className="vrc-path">{s.src}</code>
                <span className="vrc-dur">{s.duration}</span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// ── Icons ──
const Icon = {
  signal: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><path d="M4 14c4-6 12-6 16 0" /><path d="M7 16c2.5-3.5 7.5-3.5 10 0" /><circle cx="12" cy="18" r="1.2" fill="currentColor" /></svg>,
  rubric: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><rect x="4" y="5" width="16" height="14" rx="1.5" /><path d="M8 9h8M8 12h8M8 15h5" /></svg>,
  shield: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><path d="M12 3l8 3v6c0 5-3.5 8.5-8 9-4.5-.5-8-4-8-9V6l8-3z" /><path d="M9 12l2 2 4-4" /></svg>,
  bolt: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><path d="M13 2L4 14h7l-1 8 9-12h-7l1-8z" /></svg>,
  globe: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><circle cx="12" cy="12" r="9" /><path d="M3 12h18M12 3a14 14 0 010 18M12 3a14 14 0 000 18" /></svg>,
  target: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><circle cx="12" cy="12" r="9" /><circle cx="12" cy="12" r="5" /><circle cx="12" cy="12" r="1.5" fill="currentColor" /></svg>,
};

// ── Hooks ──
function useScrollY() {
  const [y, setY] = React.useState(0);
  React.useEffect(() => {
    const onScroll = () => setY(window.scrollY);
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return y;
}

function useInView(ref, threshold = 0.3) {
  const [inView, setInView] = React.useState(false);
  React.useEffect(() => {
    if (!ref.current) return;
    const obs = new IntersectionObserver(
      (entries) => entries.forEach(e => e.isIntersecting && setInView(true)),
      { threshold }
    );
    obs.observe(ref.current);
    return () => obs.disconnect();
  }, [ref, threshold]);
  return inView;
}

// ── Sticky trust banner (above nav, always visible) ──
function TrustBanner() {
  return (
    <div className="r-trust-banner">
      <span className="r-tb-dot" />
      <span><strong>Pilot live in MENA</strong> · $400K saved + $130K avoided</span>
      <span className="r-tb-sep">·</span>
      <span>30-day free pilot · No ATS rip-and-replace · Cancel any time</span>
      <a href={PILOT_FORM} target="_blank" rel="noopener" onClick={openPilot} className="r-tb-cta">Apply as a design partner →</a>
    </div>
  );
}

// ── Sticky-aware Recruit nav with always-visible CTA ──
function RecruitNav({ onSwitch }) {
  const y = useScrollY();
  const compact = y > 80;
  return (
    <nav className={`lp-nav lp-nav-recruit r-nav ${compact ? 'is-compact' : ''}`}>
      <div className="lp-brand">
        <RecruitMarkF size={28} />
        <span className="lp-brand-name">Taktume <em className="product">Recruit</em></span>
      </div>
      <div className="lp-nav-links">
        <a href="#proof">Pilot results</a>
        <a href="#dashboard">Dashboard</a>
        <a href="#roi">ROI</a>
        <a href="#pricing">Pricing</a>
        <a href="#security">Security</a>
      </div>
      <div className="lp-nav-actions">
        <button className="lp-nav-back" onClick={onSwitch}>← Switch</button>
        <a className="lp-cta lp-cta-recruit r-nav-cta" href={PILOT_FORM} target="_blank" rel="noopener" onClick={openPilot}>
          Book 15-min demo →
        </a>
      </div>
    </nav>
  );
}

// ── Hero dashboard preview tile (small, teases the big one below) ──
function HeroDashTile() {
  return (
    <div className="r-hero-dash">
      <div className="r-hero-dash-head">
        <span className="r-hd-dot" />
        <span className="r-hd-title">recruit.taktume.com / Sr. Backend Engineer</span>
        <span className="r-hd-time">09:00 LOCAL</span>
      </div>
      <div className="r-hero-dash-rows">
        {[
          { ini: 'AK', col: '#00FFFF', name: 'Aiman K.', score: 92, v: 'r' },
          { ini: 'PR', col: '#a855f7', name: 'Priya R.', score: 88, v: 'r' },
          { ini: 'JC', col: '#34d399', name: 'Jared C.', score: 86, v: 'r' },
          { ini: 'NF', col: '#fbbf24', name: 'Nadia F.', score: 79, v: 'y' },
        ].map((c, i) => (
          <div className="r-hd-row" key={i} style={{ animationDelay: `${i * 120}ms` }}>
            <span className="r-hd-av" style={{ background: c.col }}>{c.ini}</span>
            <span className="r-hd-name">{c.name}</span>
            <span className="r-hd-bar"><span style={{ width: `${c.score}%` }} /></span>
            <span className="r-hd-score">{c.score}</span>
            <span className={`r-hd-v r-hd-v-${c.v}`}>{c.v === 'r' ? 'INTERVIEW' : 'CONSIDER'}</span>
          </div>
        ))}
      </div>
      <div className="r-hero-dash-foot">
        <span>142 interviewed overnight · 38 above bar · 12 ready to forward</span>
        <a href="#dashboard" className="r-hd-deeplink">See full dashboard →</a>
      </div>
    </div>
  );
}

// ── Big number counter that animates when in view ──
function BigNumber({ value, prefix = '', suffix = '', dur = 1400, color }) {
  const ref = React.useRef(null);
  const inView = useInView(ref, 0.4);
  const [n, setN] = React.useState(0);
  React.useEffect(() => {
    if (!inView) return;
    const start = performance.now();
    let raf;
    const tick = (t) => {
      const k = Math.min(1, (t - start) / dur);
      const eased = 1 - Math.pow(1 - k, 3);
      setN(Math.round(value * eased));
      if (k < 1) raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, [inView, value, dur]);
  return (
    <span ref={ref} className="r-bignum" style={color ? { color } : null}>
      {prefix}{n.toLocaleString()}{suffix}
    </span>
  );
}

// ── ROI Calculator — the actual conversion engine ──
function RoiCalculator() {
  const [roles, setRoles] = React.useState(12);
  const [candPerRole, setCandPerRole] = React.useState(80);
  const [recruiterCost, setRecruiterCost] = React.useState(95);  // $/hr loaded
  const [minsPerScreen, setMinsPerScreen] = React.useState(25);

  // Today: every candidate costs (minsPerScreen/60) * recruiterCost.
  // With Taktume: ~5% of candidates require recruiter time (final review).
  const totalCands = roles * candPerRole;
  const todayHours = (totalCands * minsPerScreen) / 60;
  const todayCost = todayHours * recruiterCost;
  const taktumeHours = (totalCands * 0.05 * minsPerScreen) / 60;
  const taktumeCost = taktumeHours * recruiterCost;
  const saved = todayCost - taktumeCost;
  const hoursBack = todayHours - taktumeHours;

  return (
    <section id="roi" className="recruit-section r-roi-section">
      <div className="recruit-wrap">
        <div className="recruit-eyebrow">ROI · 30 seconds</div>
        <h2 className="recruit-h2">Run <em>your</em> numbers.</h2>
        <p className="recruit-section-sub">
          Move the sliders. Most teams see payback inside the first role.
        </p>

        <div className="r-roi-grid">
          <div className="r-roi-inputs">
            <div className="r-roi-input">
              <div className="r-roi-input-head">
                <label>Open roles per quarter</label>
                <span className="r-roi-input-val">{roles}</span>
              </div>
              <input type="range" min="2" max="60" value={roles} onChange={e => setRoles(+e.target.value)} />
              <div className="r-roi-input-foot"><span>2</span><span>60</span></div>
            </div>
            <div className="r-roi-input">
              <div className="r-roi-input-head">
                <label>Qualified candidates / role</label>
                <span className="r-roi-input-val">{candPerRole}</span>
              </div>
              <input type="range" min="10" max="300" value={candPerRole} onChange={e => setCandPerRole(+e.target.value)} />
              <div className="r-roi-input-foot"><span>10</span><span>300</span></div>
            </div>
            <div className="r-roi-input">
              <div className="r-roi-input-head">
                <label>Recruiter loaded cost / hour</label>
                <span className="r-roi-input-val">${recruiterCost}</span>
              </div>
              <input type="range" min="40" max="200" step="5" value={recruiterCost} onChange={e => setRecruiterCost(+e.target.value)} />
              <div className="r-roi-input-foot"><span>$40</span><span>$200</span></div>
            </div>
            <div className="r-roi-input">
              <div className="r-roi-input-head">
                <label>Minutes per phone screen</label>
                <span className="r-roi-input-val">{minsPerScreen}</span>
              </div>
              <input type="range" min="10" max="60" value={minsPerScreen} onChange={e => setMinsPerScreen(+e.target.value)} />
              <div className="r-roi-input-foot"><span>10</span><span>60</span></div>
            </div>
          </div>

          <div className="r-roi-output">
            <div className="r-roi-output-head">
              <span className="r-roi-eyebrow">Per quarter, with Recruit</span>
              <span className="r-roi-pill">{totalCands.toLocaleString()} candidates</span>
            </div>
            <div className="r-roi-saved">
              <div className="r-roi-saved-label">YOU SAVE</div>
              <div className="r-roi-saved-num">${Math.round(saved).toLocaleString()}</div>
              <div className="r-roi-saved-sub">in recruiter time, every quarter</div>
            </div>
            <div className="r-roi-rows">
              <div className="r-roi-row">
                <span>Recruiter hours today</span>
                <span className="r-roi-old">{Math.round(todayHours).toLocaleString()} hrs</span>
              </div>
              <div className="r-roi-row">
                <span>Recruiter hours with Recruit</span>
                <span className="r-roi-new">{Math.round(taktumeHours).toLocaleString()} hrs</span>
              </div>
              <div className="r-roi-row r-roi-row-total">
                <span>Hours back to your team</span>
                <span className="r-roi-new">{Math.round(hoursBack).toLocaleString()} hrs</span>
              </div>
            </div>
            <a href={PILOT_FORM} target="_blank" rel="noopener" onClick={openPilot} className="lp-cta lp-cta-recruit r-roi-cta">
              Lock in a 30-day free pilot →
            </a>
            <div className="r-roi-fineprint">
              Math: today = every candidate gets a screen. With Recruit = ~5% (final review only).
              No card required for pilot. Cancel inside 30 days, owe nothing.
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ── 2nd-pilot risk reversal block ──
function PilotOffer() {
  return (
    <section className="recruit-section r-pilot-offer">
      <div className="recruit-wrap">
        <div className="r-po-card">
          <h2 className="r-po-h">
            Be our <em>2nd named pilot.</em>
          </h2>
          <p className="r-po-sub">
            We're picking 4 enterprise customers to run a 30-day pilot at no cost — same model as our NTWW pilot. You get the platform, founder access, and a co-authored case study. We get a logo and a real-world second deployment.
          </p>
          <div className="r-po-grid">
            <div className="r-po-item">
              <div className="r-po-num">30 days</div>
              <div className="r-po-lbl">free pilot, no card</div>
            </div>
            <div className="r-po-item">
              <div className="r-po-num">2 roles</div>
              <div className="r-po-lbl">end-to-end, your JDs</div>
            </div>
            <div className="r-po-item">
              <div className="r-po-num">Founder</div>
              <div className="r-po-lbl">on every standup</div>
            </div>
            <div className="r-po-item">
              <div className="r-po-num">Cancel</div>
              <div className="r-po-lbl">in 1 click, owe nothing</div>
            </div>
          </div>
          <div className="r-po-ctas">
            <a className="lp-cta lp-cta-recruit" href={PILOT_FORM} target="_blank" rel="noopener" onClick={openPilot}>Apply as a design partner →</a>
            <a className="lp-cta-ghost" href="#proof">See the NTWW case first</a>
          </div>
          <div className="r-po-fineprint">
            Selection criteria: 50+ headcount · active hiring on at least 1 role · willing to be named publicly. We'll respond within 48 hours.
          </div>
        </div>
      </div>
    </section>
  );
}

// ── Pricing signal — directional, removes "contact for pricing" friction ──
function PricingSection() {
  return (
    <section id="pricing" className="recruit-section r-pricing-section">
      <div className="recruit-wrap">
        <div className="recruit-eyebrow">Pricing · coming after our pilot cohort</div>
        <h2 className="recruit-h2">We're locking in pricing <em>with our first design partners.</em></h2>
        <p className="recruit-section-sub">
          For now, we're focused on running a small number of high-fidelity pilots — 30-day, no-cost, founder on the call. Apply to be one of the first five.
        </p>
        <div className="r-pricing-soon">
          <div className="r-pricing-soon-card">
            <div className="r-pricing-soon-eyebrow">Design Partner program</div>
            <div className="r-pricing-soon-points">
              <div>· 30-day pilot at no cost</div>
              <div>· Direct line to the founders</div>
              <div>· Multi-lingual interviewing</div>
              <div>· Full audit trail · transcripts + score history</div>
              <div>· OAuth SSO · role-based access</div>
              <div>· Pricing locked in for design partners at public launch</div>
            </div>
            <a className="lp-cta lp-cta-recruit r-price-cta" href={PILOT_FORM} target="_blank" rel="noopener" onClick={openPilot}>
              Apply as a design partner →
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}

// ── Compact security strip — single horizontal row ──
function SecurityStrip() {
  return (
    <section id="security" className="r-security-strip">
      <div className="recruit-wrap r-sec-wrap">
        <div className="r-sec-head">
          <div className="recruit-eyebrow">Security & compliance</div>
          <h3 className="r-sec-h">Audit trail, encryption, and right-to-erasure — built in.</h3>
        </div>
        <div className="r-sec-badges">
          {[
            { l: 'Encrypted',        s: 'TLS 1.2+ · AES-256 at rest' },
            { l: 'Right-to-erasure', s: 'One-call candidate delete' },
            { l: 'OAuth SSO',        s: 'Google · Microsoft' },
            { l: 'PII handling',     s: 'Withheld before model parsing' },
            { l: 'Full audit trail', s: 'Transcripts + score history' },
            { l: 'Multilingual',     s: 'English + Arabic, more on roadmap' },
          ].map((b, i) => (
            <div className="r-sec-badge" key={i}>
              <div className="r-sec-badge-l">{b.l}</div>
              <div className="r-sec-badge-s">{b.s}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ── Final CTA — three differentiated paths ──
function FinalCta() {
  return (
    <section id="demo" className="recruit-final r-final-cta">
      <div className="r-hero-kicker">
        <em>First 5 design partners</em> · 30-day pilot · no card
      </div>
      <h2 className="recruit-final-h">
        Post the JD at 5pm. <em>Read a scored shortlist at 9am.</em>
      </h2>
      <p className="recruit-final-sub">
        Three ways in. Pick the friction you can handle.
      </p>
      <div className="r-final-paths">
        <a className="r-final-path r-final-path-soft" href="#dashboard">
          <div className="r-fp-step">01 · LOWEST FRICTION</div>
          <div className="r-fp-title">Watch a 90-second demo</div>
          <div className="r-fp-sub">Real pilot footage. No form. Plays here.</div>
          <div className="r-fp-go">Watch ↓</div>
        </a>
        <a className="r-final-path r-final-path-mid" href="#roi">
          <div className="r-fp-step">02 · 30 SECONDS</div>
          <div className="r-fp-title">Run your ROI numbers</div>
          <div className="r-fp-sub">See savings on your hiring volume — instantly.</div>
          <div className="r-fp-go">Calculate ↓</div>
        </a>
        <a className="r-final-path r-final-path-hot" href={PILOT_FORM} target="_blank" rel="noopener" onClick={openPilot}>
          <div className="r-fp-step">03 · FOUNDERS · 15 MIN</div>
          <div className="r-fp-title">Apply as a design partner</div>
          <div className="r-fp-sub">30-day free pilot. Founder on the call.</div>
          <div className="r-fp-go r-fp-go-hot">Apply →</div>
        </a>
      </div>
    </section>
  );
}

// Module-scope handle so sub-components (RecruitNav, PricingSection, FinalCta,
// etc.) can call openPilot without prop-drilling. RecruitLanding installs the
// setter via useEffect on mount; falls back to the href= if JS hasn't loaded.
let _setPilotOpen = null;
function openPilot(e) {
  if (e && e.preventDefault) e.preventDefault();
  if (_setPilotOpen) _setPilotOpen(true);
}

// ── Main page ──
function RecruitLanding({ onSwitch }) {
  // Show video shotlist only with ?team=1 — internal-only, not for buyers.
  const showShotlist = typeof window !== 'undefined' &&
    new URLSearchParams(window.location.search).get('team') === '1';

  const [pilotOpen, setPilotOpen] = React.useState(false);
  React.useEffect(() => {
    _setPilotOpen = setPilotOpen;
    return () => { _setPilotOpen = null; };
  }, []);

  return (
    <div className="recruit-page">
      <RecruitNav onSwitch={onSwitch} />

      {/* HERO — $400K-led, dashboard tile, world map below */}
      <section className="recruit-hero r-hero-v2">
        <div className="recruit-hero-grid"></div>

        <div className="r-hero-grid-layout">
          <div className="r-hero-copy">
            <div className="r-hero-kicker">
              <em>First 5 design partners</em> · 30-day pilot · no card
            </div>
            <h1 className="recruit-h1 r-hero-h1">
              <em><BigNumber value={400000} prefix="$" dur={1600} /></em> <br />
              saved on the first pilot.
            </h1>
            <p className="recruit-sub r-hero-sub">
              Taktume Recruit interviews <strong>every qualified candidate</strong> overnight — face-to-face conversational AI that sees and hears them, scored on your rubric. Recruiters wake up to one ranked shortlist.
            </p>
            <div className="r-hero-microstats">
              <div><strong>600+</strong> candidates interviewed</div>
              <div><strong>92%</strong> recruiter time recovered</div>
              <div><strong>14h</strong> JD → shortlist</div>
            </div>
            <div className="recruit-hero-ctas r-hero-ctas-v2">
              <a className="lp-cta lp-cta-recruit r-cta-lg" href={PILOT_FORM} target="_blank" rel="noopener" onClick={openPilot}>
                Apply as a design partner →
              </a>
              <a className="lp-cta-ghost r-cta-lg" href="#dashboard">
                See the dashboard ↓
              </a>
            </div>
          </div>

          <div className="r-hero-tile">
            <HeroDashTile />
          </div>
        </div>

        {/* World map — cinematic but no longer the whole hero */}
        <div className="r-hero-map-wrap">
          <div className="r-hero-map-eyebrow">
            <span className="pilot-dot" /> FIVE INTERVIEWS · FIVE TIMEZONES · ZERO RECRUITER HOURS
          </div>
          <RecruitWorldMap />
        </div>
      </section>

      {/* PILOT PROOF STRIP */}
      <section id="proof" className="pilot-proof">
        <div className="pilot-proof-grid">
          <div className="pilot-proof-label">
            From a 90-day enterprise pilot
          </div>
          <div className="pilot-proof-stat">
            <div className="ps-num green">$400K</div>
            <div className="ps-lbl">Direct cost savings</div>
          </div>
          <div className="pilot-proof-stat">
            <div className="ps-num green">$130K</div>
            <div className="ps-lbl">Cost avoidance</div>
          </div>
          <div className="pilot-proof-stat">
            <div className="ps-num">92%</div>
            <div className="ps-lbl">Recruiter time recovered</div>
          </div>
          <div className="pilot-proof-stat">
            <div className="ps-num">14h</div>
            <div className="ps-lbl">Avg JD-to-shortlist</div>
          </div>
        </div>
      </section>

      {/* LIVE PILOT FOOTAGE — labeled, grounded, with trust stats */}
      <section className="recruit-section r-live-section">
        <div className="recruit-wrap">
          <div className="recruit-eyebrow">Real pilot footage</div>
          <h2 className="recruit-h2">This is happening on a pipeline <em>right now.</em></h2>
          <div className="clip-grid r-clip-grid">
            <div className="recruit-clip r-clip-v2">
              <video src={VIDEO_SRC} autoPlay muted loop playsInline />
              <div className="recruit-clip-overlay">
                <div className="recruit-clip-top">
                  <div className="recruit-clip-tag">Live · 05:27</div>
                  <div className="recruit-clip-meta">
                    <strong>SR. BACKEND ENGINEER</strong>
                    Behavioral · Round 1 of 1
                  </div>
                </div>
                <div className="recruit-clip-bottom">
                  <div>
                    <div style={{ color: 'var(--cy)', fontWeight: 600, fontSize: '0.86rem', marginBottom: 4 }}>Reasoning · STAR coverage</div>
                    <div>"How would you investigate a flaky test in a payments service?"</div>
                  </div>
                  <div className="recruit-clip-score">
                    <span>SCORE</span>
                    <span className="clip-score-n">87</span>
                    <span style={{ color: '#34d399' }}>↑ above bar</span>
                  </div>
                </div>
              </div>
            </div>
            <div className="r-live-side">
              <div className="r-live-trust">
                <div className="r-live-trust-h">What's actually scored, in real time:</div>
                <ul className="r-live-trust-list">
                  <li><span className="r-lt-check">✓</span> Real-time conversation — the AI sees and hears the candidate, not a recording</li>
                  <li><span className="r-lt-check">✓</span> Face detection on every interview — engagement, presence, completion</li>
                  <li><span className="r-lt-check">✓</span> STAR coverage — Situation, Task, Action, Result</li>
                  <li><span className="r-lt-check">✓</span> Adaptive follow-ups when answers are vague</li>
                  <li><span className="r-lt-check">✓</span> Voice + transcript stored — replay any answer</li>
                  <li><span className="r-lt-check">✓</span> Multi-lingual interviewing — same rubric across languages</li>
                </ul>
              </div>
              <div className="r-live-stats">
                <div className="r-live-stat">
                  <div className="r-ls-n">600+</div>
                  <div className="r-ls-l">Real interviews recorded</div>
                </div>
                <div className="r-live-stat">
                  <div className="r-ls-n">EN · AR</div>
                  <div className="r-ls-l">Languages live · more soon</div>
                </div>
                <div className="r-live-stat">
                  <div className="r-ls-n">12 min</div>
                  <div className="r-ls-l">Avg interview length</div>
                </div>
                <div className="r-live-stat">
                  <div className="r-ls-n">100%</div>
                  <div className="r-ls-l">Audit-traceable</div>
                </div>
              </div>
              <a className="lp-cta lp-cta-recruit r-live-cta" href={PILOT_FORM} target="_blank" rel="noopener" onClick={openPilot}>
                See it run on your JD →
              </a>
            </div>
          </div>
        </div>
      </section>

      {/* DASHBOARD — the conversion asset */}
      <section className="recruit-section" id="dashboard">
        <div className="recruit-wrap">
          <div className="recruit-eyebrow">The morning view</div>
          <h2 className="recruit-h2">One ranked shortlist. <em>Every morning.</em></h2>
          <p className="recruit-section-sub">
            Sorted by rubric score, evidenced by transcripts, filtered by the bar you set. Click any candidate to replay the conversation that scored them.
          </p>
          <div className="dash-shell">
            <div className="dash-titlebar">
              <span className="dot r"></span>
              <span className="dot y"></span>
              <span className="dot g"></span>
              <span className="ttl">recruit.taktume.com / <strong>Sr. Backend Engineer</strong> · 142 interviewed overnight</span>
            </div>
            <div className="dash-content">
              <div className="dash-kpi-row">
                <div className="dash-kpi"><div className="k-num">142</div><div className="k-lbl">Interviewed</div><div className="k-trend">▲ 18 since 02:00</div></div>
                <div className="dash-kpi"><div className="k-num">38</div><div className="k-lbl">Above bar</div><div className="k-trend">▲ 6 since 02:00</div></div>
                <div className="dash-kpi"><div className="k-num">12</div><div className="k-lbl">Ready to forward</div><div className="k-trend">▲ 4 since 02:00</div></div>
                <div className="dash-kpi"><div className="k-num">14h</div><div className="k-lbl">Pipeline time</div><div className="k-trend">▼ 87% vs. last cycle</div></div>
              </div>
              {[
                { ini: 'AK', col: 'linear-gradient(135deg, #00FFFF, #00b8cc)', name: 'Aiman Kassem',     email: 'aiman.k@—',   loc: 'Dubai · 8y',     score: 92, verdict: 'INTERVIEW', v: 'r' },
                { ini: 'PR', col: 'linear-gradient(135deg, #a855f7, #7c3aed)', name: 'Priya Raghavan',   email: 'priya.r@—',   loc: 'Bengaluru · 6y', score: 88, verdict: 'INTERVIEW', v: 'r' },
                { ini: 'JC', col: 'linear-gradient(135deg, #34d399, #059669)', name: 'Jared Chen',       email: 'jared.c@—',   loc: 'Singapore · 9y', score: 86, verdict: 'INTERVIEW', v: 'r' },
                { ini: 'NF', col: 'linear-gradient(135deg, #fbbf24, #d97706)', name: 'Nadia Faruq',      email: 'nadia.f@—',   loc: 'Cairo · 5y',     score: 79, verdict: 'CONSIDER',  v: 'y' },
                { ini: 'TM', col: 'linear-gradient(135deg, #00FFFF, #00b8cc)', name: 'Theo Marchetti',   email: 'theo.m@—',    loc: 'Berlin · 7y',    score: 74, verdict: 'CONSIDER',  v: 'y' },
                { ini: 'BD', col: 'linear-gradient(135deg, rgba(255,255,255,0.2), rgba(255,255,255,0.1))', name: 'Brendan Daley', email: 'brendan@—', loc: 'Toronto · 4y', score: 51, verdict: 'PASS', v: 'x' },
              ].map((c, i) => (
                <div className="dash-row" key={i}>
                  <div className="av" style={{ background: c.col }}>{c.ini}</div>
                  <div className="candidate-info">
                    <strong>{c.name}</strong>
                    <span>{c.email} · {c.loc}</span>
                  </div>
                  <div className="role-tag">STAR · System Design · Comms</div>
                  <div className="score-bar">
                    <span className="score-num">{c.score}</span>
                    <div className="score-track"><div className="score-fill" style={{ width: `${c.score}%` }} /></div>
                  </div>
                  <div className={`verdict ${c.v}`}>{c.verdict}</div>
                </div>
              ))}
            </div>
          </div>
          <div className="r-dash-cta-row">
            <a className="lp-cta lp-cta-recruit" href={PILOT_FORM} target="_blank" rel="noopener" onClick={openPilot}>See it on your roles →</a>
            <a className="lp-cta-ghost" href="#roi">Or run the ROI math first</a>
          </div>
        </div>
      </section>

      {/* ROI CALCULATOR */}
      <RoiCalculator />

      {/* QUOTE — single named voice */}
      <section className="recruit-quote">
        <div className="recruit-quote-wrap">
          <q>
            We replaced 12 weeks of phone screens with one overnight pipeline. The shortlist is <em>better, faster, and defensible</em> — every candidate gets the same conversation, scored the same way.
          </q>
          <div className="recruit-quote-attr">
            <div className="qa-av">M</div>
            <div>
              <strong>Head of Talent Acquisition</strong>
              <span>NTWW · 90-day enterprise pilot</span>
            </div>
          </div>
        </div>
      </section>

      {/* 2ND PILOT RISK REVERSAL */}
      <PilotOffer />

      {/* PRICING */}
      <PricingSection />

      {/* SECURITY STRIP */}
      <SecurityStrip />

      {/* FINAL CTA */}
      <FinalCta />

      {/* Internal-only: shotlist behind ?team=1 */}
      {showShotlist && <VideoRoadmap />}

      <footer className="lp-footer lp-footer-recruit">
        <div className="lp-footer-top">
          <div className="lp-footer-brand">
            <RecruitMarkF size={28} />
            <div className="lp-footer-brand-text">
              <div className="lp-footer-name">Taktume Recruit</div>
              <div className="lp-footer-sub">
                A <a href="https://www.sentictech.com" target="_blank" rel="noopener">Sentic Tech</a> product
              </div>
            </div>
          </div>
          <div className="lp-footer-socials" aria-label="Follow Taktume Recruit">
            <a href="https://www.linkedin.com/company/taktume-recruit" target="_blank" rel="noopener" aria-label="LinkedIn">
              <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M20.45 20.45h-3.55v-5.57c0-1.33-.03-3.04-1.85-3.04-1.86 0-2.14 1.45-2.14 2.94v5.67H9.35V9h3.41v1.56h.05c.48-.9 1.64-1.85 3.37-1.85 3.6 0 4.27 2.37 4.27 5.46v6.28zM5.34 7.43a2.06 2.06 0 1 1 0-4.12 2.06 2.06 0 0 1 0 4.12zM7.12 20.45H3.56V9h3.56v11.45zM22.23 0H1.77C.79 0 0 .77 0 1.73v20.54C0 23.23.79 24 1.77 24h20.45c.98 0 1.78-.77 1.78-1.73V1.73C24 .77 23.2 0 22.22 0z"/></svg>
            </a>
            <a href="https://www.tiktok.com/@taktumerecruit" target="_blank" rel="noopener" aria-label="TikTok">
              <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M19.59 6.69a4.83 4.83 0 0 1-3.77-4.25V2h-3.45v13.67a2.89 2.89 0 0 1-5.2 1.74 2.89 2.89 0 0 1 2.31-4.64c.3 0 .6.04.88.13V9.4c-.33-.04-.66-.06-1-.05a6.33 6.33 0 0 0-3.55 11.45 6.34 6.34 0 0 0 10.86-4.43v-7a8.16 8.16 0 0 0 4.77 1.52v-3.4a4.85 4.85 0 0 1-1.84-.1z"/></svg>
            </a>
            <a href="https://www.facebook.com/profile.php?id=61589963924614" target="_blank" rel="noopener" aria-label="Facebook">
              <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M24 12.07C24 5.44 18.63.07 12 .07S0 5.44 0 12.07c0 5.99 4.39 10.95 10.13 11.85v-8.38H7.08v-3.47h3.05V9.43c0-3.01 1.79-4.67 4.53-4.67 1.31 0 2.69.23 2.69.23v2.95h-1.51c-1.49 0-1.96.93-1.96 1.87v2.25h3.33l-.53 3.47h-2.8v8.38c5.74-.9 10.12-5.86 10.12-11.85z"/></svg>
            </a>
            <a href="https://www.instagram.com/taktumerecruit" target="_blank" rel="noopener" aria-label="Instagram">
              <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 2.16c3.2 0 3.58.01 4.85.07 3.25.15 4.77 1.69 4.92 4.92.06 1.27.07 1.65.07 4.85 0 3.21-.01 3.58-.07 4.85-.15 3.23-1.66 4.77-4.92 4.92-1.27.06-1.64.07-4.85.07-3.2 0-3.58-.01-4.85-.07-3.26-.15-4.77-1.7-4.92-4.92C2.18 15.58 2.16 15.21 2.16 12c0-3.2.01-3.58.07-4.85.15-3.23 1.66-4.77 4.92-4.92C8.42 2.17 8.8 2.16 12 2.16zM12 0C8.74 0 8.33.01 7.05.07 2.7.27.27 2.69.07 7.05.01 8.33 0 8.74 0 12s.01 3.67.07 4.95c.2 4.36 2.62 6.78 6.98 6.98C8.33 23.99 8.74 24 12 24c3.26 0 3.67-.01 4.95-.07 4.35-.2 6.78-2.62 6.98-6.98.06-1.28.07-1.69.07-4.95s-.01-3.67-.07-4.95c-.2-4.35-2.62-6.78-6.98-6.98C15.67.01 15.26 0 12 0zm0 5.84a6.16 6.16 0 1 0 0 12.32 6.16 6.16 0 0 0 0-12.32zM12 16a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm6.41-11.85a1.44 1.44 0 1 0 0 2.88 1.44 1.44 0 0 0 0-2.88z"/></svg>
            </a>
          </div>
        </div>
        <div className="lp-footer-bottom">
          <div>© 2026 Taktume · Recruit</div>
          <div className="lp-footer-links">
            <a href="mailto:recruit@sentictech.com">recruit@sentictech.com</a>
            <a href="taktume-recruit-privacy-policy.html">Privacy</a>
            <a href="#">Terms</a>
            <a href="#">Security</a>
          </div>
        </div>
      </footer>

      {/* Sticky mobile CTA — visible ≤640px only (CSS-gated). */}
      <a
        className="mobile-cta-bar mobile-cta-recruit"
        href={PILOT_FORM}
        target="_blank"
        rel="noopener"
        onClick={openPilot}
        aria-label="Apply as a design partner"
      >
        <span>Apply as a design partner</span>
        <span className="mcta-arrow" aria-hidden="true">→</span>
      </a>

      {/* Inline pilot application modal — opens from every CTA above. */}
      <PilotApplicationModal open={pilotOpen} onClose={() => setPilotOpen(false)} />
    </div>
  );
}

window.RecruitLanding = RecruitLanding;