// screens-intro.jsx — Landing + ChoosePath
const { useState: useStateI } = React;

function TopBar({ right }) {
  return (
    <div style={{
      width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      padding: '20px 26px', position: 'sticky', top: 0, zIndex: 5,
    }}>
      <Logo size={22} />
      <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>{right}</div>
    </div>
  );
}

function MetaRow({ icon, label, value, tone }) {
  const isInk = tone === 'ink';
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 14, padding: '16px 0' }}>
      <div style={{
        width: 40, height: 40, borderRadius: 10, flexShrink: 0,
        background: isInk ? 'var(--ink)' : 'var(--accent-soft)',
        color: isInk ? '#fff' : 'var(--accent)',
        display: 'grid', placeItems: 'center',
        boxShadow: isInk ? 'var(--shadow-sm)' : 'none',
      }}>
        <Icon name={icon} size={18} stroke={1.8} />
      </div>
      <div style={{ minWidth: 0 }}>
        <div style={{ fontSize: 11, color: 'var(--text-faint)', fontWeight: 700, letterSpacing: '0.05em', textTransform: 'uppercase' }}>{label}</div>
        <div style={{ fontSize: 15, color: 'var(--text)', fontWeight: 600, marginTop: 2 }}>{value}</div>
      </div>
    </div>
  );
}

function LandingScreen({ go, cfg }) {
  return (
    <div style={{ width: '100%' }}>
      <TopBar right={<span style={{ fontSize: 13.5, color: 'var(--text-faint)', fontWeight: 500 }}>Need help? <a href="mailto:support@reclova.com" style={{ color: 'var(--accent)', fontWeight: 600, textDecoration: 'none' }}>Contact support</a></span>} />
      <Screen max={620} style={{ padding: '8px 24px 60px' }}>
        <div style={{ alignSelf: 'flex-start', marginBottom: 18 }}>
          <StatusPill status="accent" icon="sparkle">AI-led interview · Invitation</StatusPill>
        </div>
        <h1 style={{
          fontSize: 'clamp(30px, 5vw, 44px)', lineHeight: 1.04, fontFamily: 'var(--font-display)', fontWeight: 400, letterSpacing: '-0.01em', width: '100%',
          color: 'var(--text)', margin: 0, width: '100%', textWrap: 'pretty',
        }}>
          Welcome, {cfg.candidate.first}.
        </h1>
        <p style={{
          fontSize: 18, lineHeight: 1.55, color: 'var(--text-dim)', marginTop: 14, marginBottom: 28,
          width: '100%', textWrap: 'pretty',
        }}>
          You've been invited to interview for the <strong style={{ color: 'var(--text)' }}>{cfg.role}</strong> role
          at {cfg.company}. This is a conversational interview led by our AI interviewer — relaxed, structured, and entirely at your pace.
        </p>

        <Card pad={0} style={{ width: '100%' }}>
          <div style={{ padding: '8px 22px' }}>
            <MetaRow icon="user" label="Candidate" value={cfg.candidate.name} tone="ink" />
            <div style={{ height: 1, background: 'var(--border)' }} />
            <MetaRow icon="briefcase" label="Position" value={`${cfg.role} · ${cfg.company}`} />
            <div style={{ height: 1, background: 'var(--border)' }} />
            <MetaRow icon="clock" label="Estimated duration" value={`${cfg.duration} minutes · ${cfg.questions} core questions`} />
          </div>
        </Card>

        <div style={{ width: '100%', marginTop: 26, display: 'flex', flexDirection: 'column', gap: 12 }}>
          <Button size="lg" full variant="accent" icon="play" onClick={() => go('check')}>Start the interview now</Button>
          <Button size="lg" full variant="secondary" icon="calendar" onClick={() => go('schedule')}>Schedule it for later</Button>
          <span style={{ fontSize: 13, color: 'var(--text-faint)', display: 'flex', alignItems: 'center', gap: 6, marginTop: 4, alignSelf: 'center' }}>
            <Icon name="lock" size={13} stroke={2} /> Private — used only for this application.
          </span>
        </div>
      </Screen>
    </div>
  );
}

function ChoosePathScreen({ go, cfg }) {
  const [sel, setSel] = useStateI(null);
  return (
    <div style={{ width: '100%' }}>
      <TopBar right={<StepDots step={1} total={3} />} />
      <Screen max={720} style={{ padding: '20px 24px 60px' }}>
        <h1 style={{ fontSize: 'clamp(26px,4vw,34px)', fontFamily: 'var(--font-display)', fontWeight: 400, letterSpacing: '-0.01em', width: '100%', color: 'var(--text)', margin: 0, textAlign: 'center', textWrap: 'balance' }}>
          When would you like to interview?
        </h1>
        <p style={{ fontSize: 16.5, color: 'var(--text-dim)', marginTop: 12, marginBottom: 32, textAlign: 'center', maxWidth: 460, textWrap: 'pretty' }}>
          You can begin right away, or book a time that suits you better. We'll check your camera and mic just before you start.
        </p>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(260px, 1fr))', gap: 18, width: '100%' }}>
          <Card interactive selected={sel === 'now'} onClick={() => setSel('now')} pad={26} style={{ display: 'flex', flexDirection: 'column' }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
              <div style={{ width: 48, height: 48, borderRadius: 13, background: 'var(--accent)', color: 'var(--accent-fg)', display: 'grid', placeItems: 'center', boxShadow: 'var(--shadow-sm)' }}>
                <Icon name="play" size={22} fill="currentColor" />
              </div>
              {sel === 'now' && <Icon name="check" size={22} stroke={3} style={{ color: 'var(--accent)' }} />}
            </div>
            <h3 style={{ fontSize: 20, fontWeight: 700, color: 'var(--text)', margin: '18px 0 6px', letterSpacing: '-0.01em' }}>Start now</h3>
            <p style={{ fontSize: 14.5, color: 'var(--text-dim)', lineHeight: 1.5, margin: 0, flex: 1 }}>
              Jump straight into a quick device check, then begin. Best if you're in a quiet spot with about {cfg.duration} minutes free.
            </p>
            <div style={{ marginTop: 16, display: 'flex', gap: 8, flexWrap: 'wrap' }}>
              <StatusPill status="good" icon="check">Available now</StatusPill>
              <StatusPill status="neutral" icon="clock">~{cfg.duration} min</StatusPill>
            </div>
          </Card>

          <Card interactive selected={sel === 'schedule'} onClick={() => setSel('schedule')} pad={26} style={{ display: 'flex', flexDirection: 'column' }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
              <div style={{ width: 48, height: 48, borderRadius: 13, background: 'var(--surface-2)', color: 'var(--accent)', border: '1px solid var(--border)', display: 'grid', placeItems: 'center' }}>
                <Icon name="calendar" size={22} stroke={2} />
              </div>
              {sel === 'schedule' && <Icon name="check" size={22} stroke={3} style={{ color: 'var(--accent)' }} />}
            </div>
            <h3 style={{ fontSize: 20, fontWeight: 700, color: 'var(--text)', margin: '18px 0 6px', letterSpacing: '-0.01em' }}>Schedule for later</h3>
            <p style={{ fontSize: 14.5, color: 'var(--text-dim)', lineHeight: 1.5, margin: 0, flex: 1 }}>
              Pick a date and time that works for you. You'll get an updated link by email and can reschedule if plans change.
            </p>
            <div style={{ marginTop: 16, display: 'flex', gap: 8, flexWrap: 'wrap' }}>
              <StatusPill status="accent" icon="calendar">Choose a slot</StatusPill>
              <StatusPill status="neutral" icon="refresh">Up to {cfg.maxReschedule} reschedules</StatusPill>
            </div>
          </Card>
        </div>

        <div style={{ display: 'flex', gap: 12, marginTop: 30, width: '100%', maxWidth: 420 }}>
          <Button variant="ghost" icon="arrowLeft" onClick={() => go('landing')}>Back</Button>
          <Button full disabled={!sel} iconRight="arrowRight"
            onClick={() => go(sel === 'now' ? 'check' : 'schedule')}>
            {sel === 'schedule' ? 'Choose a time' : 'Continue'}
          </Button>
        </div>
      </Screen>
    </div>
  );
}

function StepDots({ step, total }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
      {Array.from({ length: total }).map((_, i) => (
        <span key={i} style={{
          width: i + 1 === step ? 22 : 7, height: 7, borderRadius: 999,
          background: i + 1 <= step ? 'var(--accent)' : 'var(--border-strong)', transition: 'all .25s',
        }} />
      ))}
    </div>
  );
}

Object.assign(window, { LandingScreen, ChoosePathScreen, TopBar, StepDots, MetaRow });