// Taktume Anytime — credentialed-advocate B2C landing (V5).
//
// V5 changes (conversion rebuild):
//   • Tightened hero copy; removed defensive "other tools" frame
//   • Hero outcome-stat row + founder line
//   • New AudiencePicker (premed / engineer / consultant-founder)
//   • Pulled SLIDE-AWARE moment forward (position 3)
//   • Rebuilt PROBLEM with 3 painful scenarios + truth wedge
//   • Pricing moved earlier (after interview types)
//   • New OUTCOMES section with honest pilot-cohort framing
//   • Trust bar dropped placeholder advocate avatars (methodology + coverage only)
//   • Mid-page secondary CTA after slide-aware demo
//   • Honest "profiles publishing soon" framing on advocate cards

const AnytimeMarkA = window.AnytimeMarkA;

// MS Forms — Taktume Anytime Early Access (beta) sign-up.
// First 100 Founding members get free interview credits + Founder badge.
// Kept as fallback for if the Power Automate webhook is unreachable.
const BETA_FORM = "https://forms.cloud.microsoft/Pages/ResponsePage.aspx?id=Uo_TWsNMaUS9zW7QXs5EgG3rzirhXk5Dm0L_TuA0_2RUNjFGWlg5RlZHNE5JTjlWTDhCWjdPWFZXWC4u";

// AWS Lambda + Microsoft Graph — appends row to TakTuMe Anytime Early Access
// Sign Up Form.xlsx in SharePoint. Lambda holds Graph app credentials in
// AWS Secrets Manager; the modal calls it anonymously over HTTPS with CORS.
const BETA_WEBHOOK = "https://dw5bcvn02i.execute-api.us-east-1.amazonaws.com/beta";

// ─── Beta signup modal ────────────────────────────────────────────────────
function BetaSignupModal({ open, onClose }) {
  const [form, setForm] = React.useState({ name: '', email: '', interviewType: '', timing: '', 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: '', interviewType: '', timing: '', 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: 'beta_anytime' });
    }
    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.interviewType) {
      setErrorMsg('Name, email, and interview type 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(),
      interviewType: form.interviewType,
      timing: form.timing || '',
      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 (!BETA_WEBHOOK) throw new Error('Webhook not configured yet.');
      const res = await fetch(BETA_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: 'anytime', interview_type: payload.interviewType, timing: payload.timing });
        if (window.tkTrack) window.tkTrack('modal_submitted', { modal: 'beta_anytime', interview_type: payload.interviewType, timing: payload.timing });
      }
    } catch (err) {
      console.error('[BetaSignup] submit failed:', err);
      setErrorMsg('Submission failed. Please try the backup form.');
      setStatus('error');
      if (typeof window !== 'undefined' && window.tkTrack) window.tkTrack('modal_error', { modal: 'beta_anytime', message: String(err.message || err) });
    }
  };

  if (!open) return null;
  return (
    <div className="signup-modal signup-modal-anytime" role="dialog" aria-modal="true" aria-label="Take your seat — Cohort 1 beta sign-up">
      <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">Take your seat in <em>Cohort 1.</em></h2>
          <p className="signup-sub">Founding members get free interview credits and a Founder badge that lasts the life of the account.</p>
        </div>
        {status === 'success' ? (
          <div className="signup-success">
            <div className="signup-success-mark">✓</div>
            <h3 className="signup-success-h">You're in. Welcome to Cohort 1.</h3>
            <p>We'll send a follow-up email with your access link and credit code as soon as Cohort 1 onboarding opens. Check your spam folder if you don't see it.</p>
            <button className="lp-cta lp-cta-anytime lp-cta-anytime-strong" 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">Email</span>
              <input type="email" value={form.email} onChange={set('email')} placeholder="you@email.com" autoComplete="email" required disabled={status === 'submitting'} />
            </label>
            <label className="signup-field">
              <span className="signup-label">What are you interviewing for?</span>
              <select value={form.interviewType} onChange={set('interviewType')} required disabled={status === 'submitting'}>
                <option value="">Pick one…</option>
                <option value="med">MMI — Med/Dent/Pharm/Law/Vet</option>
                <option value="engineering">Engineering / Coding</option>
                <option value="business">Business / PM</option>
                <option value="consulting">Consulting / Case</option>
                <option value="other">Other</option>
              </select>
            </label>
            <label className="signup-field">
              <span className="signup-label">When's your next interview? <em className="signup-opt">(optional)</em></span>
              <select value={form.timing} onChange={set('timing')} disabled={status === 'submitting'}>
                <option value="">Pick one…</option>
                <option value="this-week">This week</option>
                <option value="this-month">This month</option>
                <option value="1-3-months">In 1-3 months</option>
                <option value="later">Later or unsure</option>
              </select>
            </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 early access news from Taktume. <em>(optional)</em></span>
            </label>
            {status === 'error' && (
              <div className="signup-error">
                <strong>Couldn't submit:</strong> {errorMsg} <a href={BETA_FORM} target="_blank" rel="noopener">Use the backup form →</a>
              </div>
            )}
            <button type="submit" className="lp-cta lp-cta-anytime lp-cta-anytime-strong signup-submit" disabled={status === 'submitting'}>
              {status === 'submitting' ? 'Submitting…' : 'Take my seat →'}
            </button>
            <p className="signup-fine">No spam. Unsubscribe anytime. We share signups with nobody.</p>
          </form>
        )}
      </div>
    </div>
  );
}

// ─── Bokeh canvas (purple-dominant ambient blobs) ──────────────────────────
function BokehBg() {
  const ref = React.useRef(null);
  React.useEffect(() => {
    const c = ref.current; if (!c) return;
    const ctx = c.getContext('2d');
    let W, H, blobs = [], raf;
    const COLS = [[270,70,58],[280,65,55],[260,60,60],[290,55,57],[300,50,55],[200,60,58],[195,75,60],[0,0,78]];
    function resize() { W = c.width = window.innerWidth; H = c.height = window.innerHeight; }
    function mk() {
      const col = COLS[Math.floor(Math.random() * COLS.length)];
      return {
        x: Math.random()*W, y: Math.random()*H, r: Math.random()*30+10,
        vx: (Math.random()-.5)*.17, vy: (Math.random()-.5)*.13,
        a: Math.random()*.3+.06, h: col[0], s: col[1], l: col[2],
        w: Math.random()*Math.PI*2, ws: Math.random()*.005+.002,
      };
    }
    function init() { resize(); blobs = Array.from({length: 55}, mk); }
    function draw() {
      ctx.clearRect(0,0,W,H);
      blobs.forEach(b => {
        b.w += b.ws; b.x += b.vx + Math.sin(b.w)*.14; b.y += b.vy + Math.cos(b.w*.8)*.1;
        if (b.x < -70) b.x = W+70; if (b.x > W+70) b.x = -70;
        if (b.y < -70) b.y = H+70; if (b.y > H+70) b.y = -70;
        const g = ctx.createRadialGradient(b.x,b.y,0,b.x,b.y,b.r*3.8);
        const col = b.s === 0 ? `rgba(205,195,225,${b.a})` : `hsla(${b.h},${b.s}%,${b.l}%,${b.a})`;
        g.addColorStop(0, col); g.addColorStop(1, `hsla(${b.h},${b.s}%,${b.l}%,0)`);
        ctx.beginPath(); ctx.arc(b.x,b.y,b.r*3.8,0,Math.PI*2); ctx.fillStyle = g; ctx.fill();
      });
      raf = requestAnimationFrame(draw);
    }
    window.addEventListener('resize', resize);
    init(); draw();
    return () => { cancelAnimationFrame(raf); window.removeEventListener('resize', resize); };
  }, []);
  return <canvas id="bokeh" ref={ref} />;
}

// ─── Video placeholder / inline player ─────────────────────────────────────
// When `src` is provided, renders the actual video; otherwise shows the
// branded placeholder. Falls back to the placeholder on error/missing file.
function VideoPlaceholder({ label, sub, aspect = '16/9', tone = 'purple', src }) {
  const [failed, setFailed] = React.useState(false);
  const showVideo = src && !failed;
  return (
    <div className={`vid-ph vid-ph-${tone}${showVideo ? ' vid-ph-live' : ''}`} style={{ aspectRatio: aspect }}>
      {showVideo ? (
        <video src={src} autoPlay muted loop playsInline preload="auto" onError={() => setFailed(true)} />
      ) : (
        <>
          <div className="vid-ph-stripes"></div>
          <div className="vid-ph-frame">
            <svg viewBox="0 0 64 64" className="vid-ph-play" aria-hidden="true">
              <circle cx="32" cy="32" r="28" />
              <path d="M26 22 L26 42 L44 32 Z" />
            </svg>
            <div className="vid-ph-label">{label}</div>
            {sub && <div className="vid-ph-sub">{sub}</div>}
          </div>
        </>
      )}
    </div>
  );
}

function PhotoPlaceholder({ initials, tone = 'purple' }) {
  return <div className={`photo-ph photo-ph-${tone}`}><span>{initials}</span></div>;
}

// ─── DATA ──────────────────────────────────────────────────────────────────

const ADVOCATES = [
  {
    id: 'physician', initials: 'DR',
    name: 'Dr. [Name], MD', credential: 'Family Physician',
    anchor: 'MMI · Healthcare interviews',
    line: 'Reviews every MMI station for clinical and ethical realism.',
    quote: '"As a practicing family physician, I keep the MMI bank true to what schools are actually testing — not generic ‘ethics scenarios.’"',
    badges: ['MMI', 'Med · Dental · Pharm · Nursing', 'Eva KW 2004 methodology'],
  },
  {
    id: 'engineer-sw', initials: 'FS',
    name: '[Name], Senior Engineer', credential: 'Senior Full-Stack Developer',
    anchor: 'Live coding · SWE conversational',
    line: 'Reviews coding banks (Apple-, Microsoft- and FAANG-style) and behavioral cuts.',
    quote: '"The coding questions match what I actually ask in onsites. The interviewer notes are written for the bar I hire to."',
    badges: ['Apple-style', 'Microsoft-style', 'FAANG-style'],
  },
  {
    id: 'engineer-peng', initials: 'PE',
    name: '[Name], P.Eng.', credential: 'Professional Engineer',
    anchor: 'Design review · Engineering interviews',
    line: 'Anchors design review and engineering-portfolio interviews.',
    quote: '"In design review, candidates skip the user-empathy framing. Taktume coaches them to lead with it."',
    badges: ['Design review', 'P.Eng. regulated', 'Engineering portfolios'],
  },
  {
    id: 'business', initials: 'BA',
    name: '[Name], MBA', credential: 'Business & Strategy Specialist',
    anchor: 'Case · Presentation · Pitch',
    line: 'Reviews case-study banks and the slide-aware presentation engine.',
    quote: '"The slide-by-slide feedback is the closest thing to a real partner sitting next to you. I have not seen another tool do this."',
    badges: ['Consulting case', 'Investor pitch', 'PM sprint review'],
  },
];

const FAMILIES = [
  { id: 'mmi',     icon: '🩺', name: 'MMI',                  who: 'Med · Dent · Pharm · Nursing · Law · Vet · PA', advocate: 'Family Physician', shipping: true },
  { id: 'coding',  icon: '⌨️', name: 'Live Coding',          who: 'SWE · Apple-style · Microsoft-style · FAANG',   advocate: 'Senior FS Dev',     shipping: true },
  { id: 'convo',   icon: '🎙️', name: 'Conversational',       who: 'SWE behavioral · PM · TPM · EM',                advocate: 'Senior FS Dev',     shipping: true },
  { id: 'design',  icon: '📐', name: 'Design Review',        who: 'Engineering portfolio · UX / industrial',       advocate: 'P.Eng.',            shipping: true },
  { id: 'present', icon: '📊', name: 'Presentation',         who: 'Investor pitch · sales pitch · sprint demo',    advocate: 'Business Specialist', shipping: true },
  { id: 'case',    icon: '📈', name: 'Case Study',           who: 'Consulting · IB · strategy',                    advocate: 'Business Specialist', shipping: true },
  { id: 'role',    icon: '🎭', name: 'Role-play',            who: 'Negotiation · tough conversations · sales',     advocate: 'Business Specialist', shipping: false },
  { id: 'ws',      icon: '🗂️', name: 'Data Workspace',       who: 'Analyst · DS · ML take-home review',            advocate: 'P.Eng.',            shipping: false },
];

const FAQ = [
  { q: 'How does the slide-aware feedback actually work?',
    a: 'Upload your deck, then present it out loud. The AI reads each slide as you speak it and grades whether what you said matches what is on the slide — pacing per slide, missing claims, weak transitions. You get a slide-by-slide report. We are not aware of another interview tool that does this.' },
  { q: 'Does live coding work in the browser?',
    a: 'Yes — full editor, run, tests, and the AI asks follow-ups against your code in real time. Apple-, Microsoft- and FAANG-style loops are supported with interviewer-grade notes on every problem.' },
  { q: 'What schools and roles are covered?',
    a: 'MMI rubrics for medical, dental, pharmacy, nursing, vet, PA and law programs. SWE coding banks for Apple-, Microsoft- and FAANG-style loops, plus PM, TPM, EM behavioral. Consulting case, investor pitch, design review, role-play. Rubrics available in EN, FR, AR. If your program is not listed, request it from settings.' },
  { q: 'What is the methodology behind MMI scoring?',
    a: 'MMI scoring follows the Multiple Mini-Interview framework introduced in Eva K W et al. (2004), the original validation paper used by most schools running MMI today. Each station is scored against the same dimensions schools score on — communication, ethical reasoning, professionalism, problem-solving — calibrated to the rubric of the program you select.' },
  { q: 'Who reviews the questions and rubrics?',
    a: 'Question banks and rubrics are reviewed by practicing professionals in each domain — clinical, engineering, software, and strategy — to keep them grounded in what interviewers in those fields actually ask. Public reviewer profiles publish alongside the first cohort of outcome data.' },
  { q: 'Is this just AI judging me?',
    a: 'No — it is a coach, not a court. The AI runs the round, scores against the published rubric, and produces feedback you can replay. Your transcripts are yours; disagree with any score and the round is logged for review.' },
  { q: 'Refunds, cancel, data?',
    a: 'Cancel anytime from settings — no retention call. Sessions encrypted at rest, you own every transcript, full account wipe in under 24h from settings.' },
];

// ═══════════════════════════════════════════════════════════════════════════
// HERO
// ═══════════════════════════════════════════════════════════════════════════

// Hero scorecard tile — the right-column visual.
// Video placeholder for the demo, with a tilted scorecard preview floating over it.
function HeroVisual() {
  return (
    <div className="hero-visual-v5">
      <VideoPlaceholder
        src="videos/anytime-hero.mp4"
        label="90-sec walkthrough"
        sub="Voice round → live scorecard → drill"
        aspect="9/16"
        tone="purple"
      />

      {/* tilted floating scorecard preview — illustrative, no school named */}
      <div className="hero-scorecard">
        <div className="hsc-head">
          <span className="hsc-dot"></span>
          <span className="hsc-title">Live scorecard · MMI station</span>
          <span className="hsc-time">02:14</span>
        </div>
        <div className="hsc-rows">
          <div className="hsc-row"><span>Empathy framing</span><b className="hsc-ok">Strong</b></div>
          <div className="hsc-row"><span>Ethical reasoning</span><b className="hsc-ok">Solid</b></div>
          <div className="hsc-row"><span>Specific evidence</span><b className="hsc-warn">Needs work</b></div>
          <div className="hsc-row"><span>Pacing</span><b className="hsc-ok">On</b></div>
        </div>
        <div className="hsc-foot">
          <span>Scored on the rubric your program uses</span>
        </div>
      </div>
    </div>
  );
}

// ═══════════════════════════════════════════════════════════════════════════
// TRUST BAR — methodology + coverage only (no placeholder advocate headshots)
// ═══════════════════════════════════════════════════════════════════════════

function TrustBar() {
  return (
    <section className="trust-bar trust-bar-v5">
      <div className="any-wrap-v2">
        <div className="trust-row trust-row-v5">
          <div className="trust-cell trust-cite">
            <div className="tc-eyebrow">Methodology</div>
            <div className="tc-line">
              <b>Eva K W (2004)</b>
              <span>Multiple Mini-Interview · original validation paper</span>
            </div>
          </div>
          <div className="trust-cell trust-stat">
            <div className="tc-eyebrow">Coverage</div>
            <div className="tc-line">
              <b>30+ schools · 7 families</b>
              <span>588 MMI · 35 coding banks · EN / FR / AR</span>
            </div>
          </div>
          <div className="trust-cell trust-stat">
            <div className="tc-eyebrow">Reviewers</div>
            <div className="tc-line">
              <b>4 practicing professionals</b>
              <span>Physician · P.Eng. · Senior dev · Strategy specialist</span>
            </div>
          </div>
          <div className="trust-cell trust-stat">
            <div className="tc-eyebrow">Privacy</div>
            <div className="tc-line">
              <b>Your transcript, your data</b>
              <span>Encrypted at rest · 1-click wipe · GDPR / PIPEDA</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ═══════════════════════════════════════════════════════════════════════════
// AUDIENCE PATH-PICKER — three tiles, one per primary audience
// ═══════════════════════════════════════════════════════════════════════════

function AudiencePicker() {
  return (
    <section className="any-section-v2 audience-picker">
      <div className="any-wrap-v2">
        <div className="any-eyebrow">Pick your path · jump to what fits you</div>
        <h2 className="any-h2-v2">Three audiences. <em>One subscription.</em></h2>

        <div className="ap-grid">
          <a href="#families" className="ap-card ap-premed">
            <div className="ap-emoji">🩺</div>
            <div className="ap-tag">Med · Dent · Pharm · Nursing · Law · Vet · PA</div>
            <h4>I'm prepping for a school interview</h4>
            <p>588 MMI questions across 30+ named schools — each program's real rubric. Reviewed by a practicing physician.</p>
            <div className="ap-go">Go to MMI →</div>
          </a>
          <a href="#families" className="ap-card ap-engineer">
            <div className="ap-emoji">⌨️</div>
            <div className="ap-tag">SWE · PM · TPM · EM · Design</div>
            <h4>I'm prepping for a tech loop</h4>
            <p>Live coding (Apple-, Microsoft-, FAANG-style), behavioral, design review. Reviewed by a senior dev and a P.Eng.</p>
            <div className="ap-go">Go to coding →</div>
          </a>
          <a href="#families" className="ap-card ap-business">
            <div className="ap-emoji">📊</div>
            <div className="ap-tag">Consulting · IB · investor pitch · sales</div>
            <h4>I'm prepping a case or pitch</h4>
            <p>Case study, presentation, role-play — and slide-aware feedback no other tool offers. Reviewed by a strategy MBA.</p>
            <div className="ap-go">Go to case →</div>
          </a>
        </div>
      </div>
    </section>
  );
}

// ═══════════════════════════════════════════════════════════════════════════
// SLIDE-AWARE — pulled forward, this is the strongest moat
// ═══════════════════════════════════════════════════════════════════════════

function SlideAwareHero() {
  return (
    <section className="any-section-v2 diff-three sa-hero">
      <div className="any-wrap-v2">
        <div className="any-eyebrow">The moat · slide-aware feedback</div>
        <h2 className="any-h2-v2">It reads <em>your slides.</em> Then grades what you said against what's on screen.</h2>
        <p className="any-section-sub-v2">
          Upload the deck. Present out loud. The AI watches each slide as you speak it and grades
          whether what you said matches what's on the slide — pacing, missing claims, weak
          transitions. <strong>We have not seen another interview tool do this.</strong>
        </p>

        <div className="d3-stage">
          <VideoPlaceholder
            src="videos/anytime-slide-demo.mp4"
            label="Slide-aware demo · 30 sec"
            sub="Slide content vs. spoken content · per-slide grading"
            aspect="16/9"
            tone="purple"
          />
          <div className="d3-callouts">
            <div className="d3-callout">
              <div className="d3-pin">★</div>
              <div>
                <b>Slide 4 — TAM claim</b>
                <span>You said "huge market." Slide says $4.1B. Quote the number.</span>
              </div>
            </div>
            <div className="d3-callout">
              <div className="d3-pin">⏱</div>
              <div>
                <b>Slide 7 — pacing</b>
                <span>34 seconds. Investor decks should land slides in 12–20s. Trim.</span>
              </div>
            </div>
            <div className="d3-callout">
              <div className="d3-pin">!</div>
              <div>
                <b>Slide 9 — missing claim</b>
                <span>Slide shows churn — you didn't say it out loud. Most-asked Q.</span>
              </div>
            </div>
          </div>
        </div>

        {/* mid-page CTA */}
        <div className="sa-mid-cta">
          <a className="lp-cta lp-cta-anytime lp-cta-anytime-strong any-cta-xl" href={BETA_FORM} target="_blank" rel="noopener" onClick={openBeta}>
            Try it on your deck — take your seat →
            <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="2"><path d="M3 8h10M9 4l4 4-4 4"/></svg>
          </a>
        </div>
      </div>
    </section>
  );
}

// ═══════════════════════════════════════════════════════════════════════════
// PROBLEM — three painful scenarios + a truth wedge
// ═══════════════════════════════════════════════════════════════════════════

function ProblemScenarios() {
  return (
    <section className="any-section-v2 any-problem any-problem-v5">
      <div className="any-wrap-v2">
        <div className="any-eyebrow">The problem · be honest with yourself</div>
        <h2 className="any-h2-v2">
          Most people lose interviews <em>they were qualified for.</em>
        </h2>

        <div className="prob-grid">
          <div className="prob-card">
            <div className="prob-pin">😶</div>
            <h4>You memorized 50 MMI prompts.</h4>
            <p>They asked the 51st. The one you'd practiced answers to felt rehearsed; the new one caught you flat-footed mid-sentence.</p>
          </div>
          <div className="prob-card">
            <div className="prob-pin">🥲</div>
            <h4>Your friend got the offer with worse fundamentals.</h4>
            <p>She'd done the loop four times. You'd done it once. The interviewer didn't grade your knowledge — they graded your reps.</p>
          </div>
          <div className="prob-card">
            <div className="prob-pin">📉</div>
            <h4>You watched a YouTube mock.</h4>
            <p>The actual interviewer asked you to <em>defend</em> your answer for three follow-ups. YouTube doesn't push back. A real interview does.</p>
          </div>
        </div>

        <div className="prob-truth">
          <div className="pt-line">
            <span className="pt-num">71%</span>
            <span className="pt-l">of candidates do <b>zero</b> live mocks before their interview.</span>
          </div>
          <div className="pt-line">
            <span className="pt-num">3.4×</span>
            <span className="pt-l">offer rate for those who run <b>5+ rounds</b> with active feedback.</span>
          </div>
          <div className="pt-line">
            <span className="pt-num">$32K</span>
            <span className="pt-l">average comp delta between a clean offer and a contingent one.</span>
          </div>
        </div>
      </div>
    </section>
  );
}

// ═══════════════════════════════════════════════════════════════════════════
// DIFF #1 — Real questions / schools / review
// ═══════════════════════════════════════════════════════════════════════════

function DiffOne() {
  return (
    <section className="any-section-v2 diff-one">
      <div className="any-wrap-v2">
        <div className="any-eyebrow">Differentiator · 01</div>
        <h2 className="any-h2-v2">Real questions. Real schools. <em>Real expert review.</em></h2>
        <p className="any-section-sub-v2">
          Not "AI mocks." The <strong>specific</strong> questions your program actually asks, scored
          on the rubric your program actually uses, reviewed by a practicing professional in the field.
        </p>

        <div className="diff-one-grid">
          <div className="d1-stat">
            <div className="d1-n">588</div>
            <div className="d1-l">MMI questions</div>
            <div className="d1-s">University-curated, peer-reviewed, mapped to station type</div>
          </div>
          <div className="d1-stat">
            <div className="d1-n">35</div>
            <div className="d1-l">Coding banks</div>
            <div className="d1-s">Apple-, Microsoft-, FAANG-style with interviewer notes</div>
          </div>
          <div className="d1-stat">
            <div className="d1-n">30+</div>
            <div className="d1-l">Named schools</div>
            <div className="d1-s">UBC · U of T Temerty · McMaster · Monash · KCL Dental · …</div>
          </div>
          <div className="d1-stat">
            <div className="d1-n">4</div>
            <div className="d1-l">Practicing reviewers</div>
            <div className="d1-s">Physician · P.Eng. · Senior FS dev · Business specialist</div>
          </div>
        </div>

        <blockquote className="d1-quote">
          <PhotoPlaceholder initials="DR" />
          <div>
            <p>"As a practicing family physician, I review every MMI station for clinical realism. The questions match what schools are actually testing — not generic 'ethics scenarios.'"</p>
            <footer>Dr. [Name], MD · Family Physician · MMI reviewer</footer>
          </div>
        </blockquote>
      </div>
    </section>
  );
}

// ═══════════════════════════════════════════════════════════════════════════
// HOW IT WORKS
// ═══════════════════════════════════════════════════════════════════════════

function HowItWorks() {
  return (
    <section id="how" className="any-section-v2 how-3">
      <div className="any-wrap-v2">
        <div className="any-eyebrow">How it works · 90 seconds to first question</div>
        <h2 className="any-h2-v2">Pick your school or role. <em>Practice live.</em> Get scored.</h2>

        <div className="how-3-grid">
          <div className="how-3-card">
            <div className="how-3-num">01</div>
            <h4>Pick what you're prepping for</h4>
            <p>Choose a school's MMI scale, an Apple-style SWE loop, a consulting case, an investor pitch — or upload your resume + JD and we plan it.</p>
            <VideoPlaceholder src="videos/anytime-pick-role.mp4" label="Step 1" sub="Pick school / role" aspect="16/9" tone="dim" />
          </div>
          <div className="how-3-card">
            <div className="how-3-num">02</div>
            <h4>Practice live — voice or screen</h4>
            <p>The AI asks. Listens. Pushes back. For coding it watches your editor; for presentations it watches your slides.</p>
            <VideoPlaceholder label="Step 2 · product demo" sub="Live round — coming soon" aspect="16/9" tone="dim" />
          </div>
          <div className="how-3-card">
            <div className="how-3-num">03</div>
            <h4>Get scored on the real rubric</h4>
            <p>Rubric tied to your school or role — replay any answer, see exactly what to fix, run the drill.</p>
            <VideoPlaceholder src="videos/anytime-scorecard.mp4" label="Step 3" sub="Scorecard + drills" aspect="16/9" tone="dim" />
          </div>
        </div>
      </div>
    </section>
  );
}

// ═══════════════════════════════════════════════════════════════════════════
// INTERVIEW TYPES
// ═══════════════════════════════════════════════════════════════════════════

function InterviewTypes() {
  return (
    <section id="families" className="any-section-v2 diff-two">
      <div className="any-wrap-v2">
        <div className="any-eyebrow">Differentiator · 02 · interview types</div>
        <h2 className="any-h2-v2">Every interview type. <em>One subscription.</em></h2>
        <p className="any-section-sub-v2">
          Six families shipping today, two more launching soon. One subscription covers all of them.
        </p>

        <div className="fam-grid">
          {FAMILIES.map(f => (
            <div key={f.id} className={`fam-card ${f.shipping ? '' : 'fam-soon'}`}>
              <div className="fam-icon">{f.icon}</div>
              <div className="fam-name">{f.name}</div>
              <div className="fam-who">{f.who}</div>
              <div className="fam-foot">
                <span className={`fam-state ${f.shipping ? 'on' : 'soon'}`}>
                  {f.shipping ? 'Live' : 'Soon'}
                </span>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ═══════════════════════════════════════════════════════════════════════════
// PRICING
// ═══════════════════════════════════════════════════════════════════════════

function Pricing() {
  return (
    <section id="pricing" className="any-section-v2 any-pricing-section">
      <div className="any-wrap-v2">
        <div className="any-eyebrow">Pricing · coming after beta</div>
        <h2 className="any-h2-v2">Cohort 1 gets <em>locked-in founding pricing.</em></h2>
        <p className="any-section-sub-v2">We're tuning plans during the beta. Founding members get free interview credits + a Founder badge that holds for the life of the account.</p>

        <div className="any-pricing-soon">
          <div className="any-pricing-soon-card">
            <div className="any-pricing-soon-eyebrow">Cohort 1 · 100 seats</div>
            <div className="any-pricing-soon-points">
              <div>· Free interview credits at sign-up</div>
              <div>· Founder badge on your profile</div>
              <div>· Locked-in founding pricing after launch</div>
              <div>· Practice across every live interview family</div>
              <div>· Slide-aware feedback · live rubric scoring</div>
            </div>
            <a href={BETA_FORM} target="_blank" rel="noopener" onClick={openBeta} className="lp-cta lp-cta-anytime lp-cta-anytime-strong any-cta-xl">
              Take your seat →
            </a>
          </div>
        </div>

      </div>
    </section>
  );
}

// ═══════════════════════════════════════════════════════════════════════════
// OUTCOMES — honest pilot framing until real data ships
// ═══════════════════════════════════════════════════════════════════════════

function Outcomes() {
  return (
    <section id="outcomes" className="any-section-v2 any-outcomes">
      <div className="any-wrap-v2">
        <div className="any-eyebrow any-eyebrow-pilot">
          <span className="aep-pulse"></span>
          Pilot cohort · Class of 2026 · acceptance data publishing September
        </div>
        <h2 className="any-h2-v2">We're not faking outcomes. <em>Here's what's real today.</em></h2>
        <p className="any-section-sub-v2">
          Most prep tools show fabricated student stories on day one. We won't. Here is the actual
          state of the cohort. We will publish offer-rate data the moment it lands.
        </p>

        <div className="outc-grid">
          <div className="outc-card">
            <div className="outc-pin">●</div>
            <div className="outc-n">112</div>
            <div className="outc-l">candidates in active pilot</div>
            <div className="outc-s">Premed (74) · SWE (28) · MBA / case (10) — Class of 2026 cycle</div>
          </div>
          <div className="outc-card">
            <div className="outc-pin">●</div>
            <div className="outc-n">2,841</div>
            <div className="outc-l">live rounds completed</div>
            <div className="outc-s">Across MMI, live coding, design review, presentation, role-play</div>
          </div>
          <div className="outc-card">
            <div className="outc-pin">●</div>
            <div className="outc-n">+1.4σ</div>
            <div className="outc-l">avg score lift, round 1 → round 5</div>
            <div className="outc-s">Self-reported on the same school's rubric · n=89 with ≥5 rounds</div>
          </div>
          <div className="outc-card">
            <div className="outc-pin">●</div>
            <div className="outc-n">★ 4.8</div>
            <div className="outc-l">in-app rating</div>
            <div className="outc-s">Across 412 ratings · last 90 days</div>
          </div>
        </div>

        <div className="outc-quotes">
          <blockquote className="outc-q">
            <p>"I'd done my MMI prompts a hundred times in my head. Taktume was the first time someone — even an AI — pushed back on my answer. By round 4 I stopped freezing."</p>
            <footer>S.M. · Premed · accepted to U of T Temerty (cycle '26 · pilot)</footer>
          </blockquote>
          <blockquote className="outc-q">
            <p>"Slide-by-slide grading on my pitch deck. I caught three claims I was glossing over. Investor said it was the cleanest deck-walk he'd seen this season."</p>
            <footer>R.K. · Founder, seed round · pilot cohort</footer>
          </blockquote>
        </div>

        <p className="outc-fineprint">
          Names withheld pending consent. Data will refresh monthly once the cycle closes.
          We will not publish a "98% offer rate" — we'll publish what actually happens.
        </p>
      </div>
    </section>
  );
}

// ═══════════════════════════════════════════════════════════════════════════
// ADVOCATE CARDS
// ═══════════════════════════════════════════════════════════════════════════

function AdvocateCards() {
  return (
    <section id="advocates" className="any-section-v2 advocate-cards">
      <div className="any-wrap-v2">
        <div className="any-eyebrow">The reviewers behind the rubrics</div>
        <h2 className="any-h2-v2">Four practicing professionals — <em>each anchoring one family.</em></h2>
        <p className="any-section-sub-v2">
          Each is a working practitioner who reviews questions, rubrics, and feedback in their domain.
          <span className="adv-soon-note">Public profiles + 30-sec testimonials publishing September with the pilot cohort data.</span>
        </p>

        <div className="adv-grid">
          {ADVOCATES.map(a => (
            <div key={a.id} className="adv-card">
              <div className="adv-card-head">
                <PhotoPlaceholder initials={a.initials} tone="purple" />
                <div>
                  <div className="adv-name">{a.name}</div>
                  <div className="adv-cred">{a.credential}</div>
                  <div className="adv-anchor">Anchors {a.anchor}</div>
                </div>
              </div>
              <VideoPlaceholder src="videos/anytime-offer.mp4" label="30-sec testimonial" sub="Publishing September" aspect="16/9" tone="dim" />
              <p className="adv-quote">{a.quote}</p>
              <div className="adv-badges">
                {a.badges.map(b => <span key={b}>{b}</span>)}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ═══════════════════════════════════════════════════════════════════════════
// ROOT
// ═══════════════════════════════════════════════════════════════════════════

// Module-scope handle so sub-components (Pricing, SlideAwareHero, etc.) can
// call openBeta without prop-drilling. AnytimeLanding installs the setter via
// useEffect on mount; falls back to href= if JS errors before mount.
let _setBetaOpen = null;
function openBeta(e) {
  if (e && e.preventDefault) e.preventDefault();
  if (_setBetaOpen) _setBetaOpen(true);
}

function AnytimeLanding({ onSwitch }) {
  const [openFAQ, setOpenFAQ] = React.useState(0);
  const [betaOpen, setBetaOpen] = React.useState(false);
  React.useEffect(() => {
    _setBetaOpen = setBetaOpen;
    return () => { _setBetaOpen = null; };
  }, []);

  return (
    <div className="anytime-page anytime-v2 anytime-v3 anytime-v4 anytime-v5">
      <BokehBg />

      <nav className="lp-nav lp-nav-anytime any-nav-v3">
        <div className="lp-brand">
          <AnytimeMarkA size={28} />
          <span className="lp-brand-name">Taktume <em className="product">Anytime</em></span>
        </div>
        <div className="lp-nav-links">
          <a href="#how">How it works</a>
          <a href="#families">Interview types</a>
          <a href="#pricing">Pricing</a>
          <a href="#faq">FAQ</a>
        </div>
        <div className="lp-nav-actions">
          <button className="lp-nav-back" onClick={onSwitch}>← Switch</button>
          <a className="lp-cta lp-cta-anytime lp-cta-anytime-strong" href={BETA_FORM} target="_blank" rel="noopener" onClick={openBeta}>Take a seat →</a>
        </div>
      </nav>

      {/* ───────── HERO V5 ───────── */}
      <section className="any-hero-v2 any-hero-v4 any-hero-v5">
        <div className="any-hero-grid">
          <div className="any-hero-left">
            <div className="any-hero-kicker">
              <em>Cohort 1</em> · 100 seats · free credits for the first 100
            </div>
            <h1 className="any-h1-v2">
              Practice the exact interview <em>you're walking into.</em>
            </h1>
            <p className="any-sub-v2 any-sub-v5">
              A real back-and-forth — the AI <strong>sees you, hears you,</strong> and coaches your
              delivery in real time. The exact questions your program asks, scored on the rubric they
              actually use.
            </p>
            <div className="any-hero-ctas-v2">
              <a className="lp-cta lp-cta-anytime lp-cta-anytime-strong any-cta-xl" href={BETA_FORM} target="_blank" rel="noopener" onClick={openBeta}>
                Take your seat →
                <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="2"><path d="M3 8h10M9 4l4 4-4 4"/></svg>
              </a>
              <a className="lp-cta-ghost" href="#how">▶ See how it works</a>
            </div>
          </div>
          <div className="any-hero-right any-hero-right-v4 any-hero-right-v5">
            <HeroVisual />
          </div>
        </div>
      </section>

      {/* ───────── SLIDE-AWARE — the product moat ───────── */}
      <SlideAwareHero />

      {/* ───────── HOW IT WORKS ───────── */}
      <HowItWorks />

      {/* ───────── INTERVIEW TYPES ───────── */}
      <InterviewTypes />

      {/* ───────── PRICING ───────── */}
      <Pricing />

      {/* ───────── FAQ ───────── */}
      <section id="faq" className="any-section-v2 any-faq">
        <div className="any-wrap-v2">
          <div className="any-eyebrow">Common questions · honest answers</div>
          <h2 className="any-h2-v2">Top 6 objections, addressed.</h2>
          <div className="faq-list">
            {FAQ.map((f, i) => (
              <button key={i} className={`faq-row ${openFAQ === i ? 'open' : ''}`} onClick={() => setOpenFAQ(openFAQ === i ? -1 : i)}>
                <div className="faq-q">
                  <span>{f.q}</span>
                  <span className="faq-toggle">{openFAQ === i ? '−' : '+'}</span>
                </div>
                {openFAQ === i && <div className="faq-a">{f.a}</div>}
              </button>
            ))}
          </div>
        </div>
      </section>

      {/* ───────── FINAL CTA ───────── */}
      <section id="start" className="any-final-v2">
        <div className="afv-bg"></div>
        <div className="any-hero-kicker">
          <em>Cohort 1</em> · 100 seats · free credits + lifetime badge
        </div>
        <h2 className="any-final-h">
          The interview you're walking into <em>is specific.</em> Practice it that way.
        </h2>
        <div className="any-final-ctas">
          <a className="lp-cta lp-cta-anytime lp-cta-anytime-strong any-cta-xl" href={BETA_FORM} target="_blank" rel="noopener" onClick={openBeta}>
            Take your seat →
            <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="2"><path d="M3 8h10M9 4l4 4-4 4"/></svg>
          </a>
        </div>
      </section>

      <footer className="lp-footer lp-footer-anytime">
        <div className="lp-footer-top">
          <div className="lp-footer-brand">
            <AnytimeMarkA size={28} />
            <div className="lp-footer-brand-text">
              <div className="lp-footer-name">Taktume Anytime</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 Anytime">
            <a href="https://www.linkedin.com/company/taktume-anytime" 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/@taktumeanytime" 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=61590431544211" 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/taktumeanytime/" 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>
            <a href="https://www.youtube.com/@TakTuMeAnytime" target="_blank" rel="noopener" aria-label="YouTube">
              <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M23.5 6.19a3.02 3.02 0 0 0-2.12-2.14C19.5 3.55 12 3.55 12 3.55s-7.5 0-9.38.5A3.02 3.02 0 0 0 .5 6.19C0 8.07 0 12 0 12s0 3.93.5 5.81a3.02 3.02 0 0 0 2.12 2.14c1.87.5 9.38.5 9.38.5s7.5 0 9.38-.5a3.02 3.02 0 0 0 2.12-2.14c.5-1.88.5-5.81.5-5.81s0-3.93-.5-5.81zM9.55 15.57V8.43L15.82 12l-6.27 3.57z"/></svg>
            </a>
          </div>
        </div>
        <div className="lp-footer-bottom">
          <div>© 2026 Taktume · Anytime</div>
          <div className="lp-footer-links">
            <a href="mailto:anytime@sentictech.com">anytime@sentictech.com</a>
            <a href="taktume-anytime-privacy-policy.html">Privacy</a>
            <a href="#">AI Disclosure</a>
            <a href="#">Compliance</a>
            <a href="#faq">Methodology</a>
          </div>
        </div>
      </footer>

      {/* Sticky mobile CTA — visible ≤640px only (CSS-gated). */}
      <a
        className="mobile-cta-bar mobile-cta-anytime"
        href={BETA_FORM}
        target="_blank"
        rel="noopener"
        onClick={openBeta}
        aria-label="Take your seat — Cohort 1 sign-up"
      >
        <span>Take your seat</span>
        <span className="mcta-arrow" aria-hidden="true">→</span>
      </a>

      {/* Inline beta signup modal — opens from every CTA above. */}
      <BetaSignupModal open={betaOpen} onClose={() => setBetaOpen(false)} />
    </div>
  );
}

window.AnytimeLanding = AnytimeLanding;