/* global React, VideoPlayer, PrimaryButton */
const { useMemo } = React;

// ─────────────────────────────────────────────────────────────
// STEP 1 — Welcome video
// ─────────────────────────────────────────────────────────────
function Step1Welcome({ t, onNext }) {
  return (
    <div style={{ padding: '8px 24px 24px', display: 'flex', flexDirection: 'column', gap: 22 }}>
      <div>
        <div style={{
          fontFamily: 'Geist Mono, monospace', fontSize: 11,
          letterSpacing: '0.12em', textTransform: 'uppercase', color: t.primary,
          marginBottom: 8,
        }}>A short welcome</div>
        <h1 style={{
          fontFamily: '"Instrument Serif", Georgia, serif',
          fontSize: 32, lineHeight: 1.05, margin: 0, color: t.ink,
          letterSpacing: '-0.02em', fontWeight: 400, textWrap: 'balance',
        }}>
          Welcome.<br/>
          <span style={{ color: t.primary }}>Take a minute to begin.</span>
        </h1>
        <div style={{
          fontFamily: 'Geist, system-ui, sans-serif', fontSize: 14,
          color: t.inkSoft, marginTop: 10, lineHeight: 1.5,
        }}>
          Watch this first — it sets up what we're about to do together.
        </div>
      </div>

      <VideoPlayer
        t={t}
        label="01 · Intro"
        duration={92}
        posterTitle="What you're about to do"
        posterSubtitle="A 90-second walk-through from your operator"
        accentLabel="Tap to play"
        youtubeId="i2cnrt7xenk"
      />

      <PrimaryButton t={t} onClick={onNext}>
        Let's go →
      </PrimaryButton>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// STEP 7 — Wrap-up + summary + CTA
// ─────────────────────────────────────────────────────────────
function Step7WrapUp({ t, onFinish, step2Data, voiceAnswers, submitting, error }) {
  const summary = useMemo(() => {
    const platforms = (step2Data.platforms || []).slice(0, 3);
    const goal120 = step2Data.revenueTarget || 'Not set';
    const revenueNow = step2Data.revenueNow || 'Not set';
    return {
      revenueNow,
      goal120,
      platforms: platforms.length ? platforms.join(' · ') : 'None yet',
      name: (step2Data.name || '').split(' ')[0],
    };
  }, [step2Data]);

  return (
    <div style={{ padding: '8px 24px 24px', display: 'flex', flexDirection: 'column', gap: 22 }}>
      <div>
        <div style={{
          fontFamily: 'Geist Mono, monospace', fontSize: 11,
          letterSpacing: '0.12em', textTransform: 'uppercase', color: t.primary,
          marginBottom: 8,
        }}>You're in</div>
        <h1 style={{
          fontFamily: '"Instrument Serif", Georgia, serif',
          fontSize: 32, lineHeight: 1.05, margin: 0, color: t.ink,
          letterSpacing: '-0.02em', fontWeight: 400, textWrap: 'balance',
        }}>
          {summary.name ? `Locked in, ${summary.name}.` : 'You\u2019re locked in.'}<br/>
          <span style={{ color: t.primary }}>Here’s what happens next.</span>
        </h1>
      </div>

      <VideoPlayer
        t={t}
        label="07 · What happens next"
        duration={75}
        posterTitle="Your first 7 days"
        posterSubtitle="A short look at the kick-off plan"
        accentLabel="60 sec recap"
        youtubeId="qQlXeO1bzB8"
      />

      {/* summary card */}
      <div style={{
        background: t.surface, borderRadius: 18, padding: '18px 20px',
        border: `1px solid ${t.line}`,
        display: 'flex', flexDirection: 'column', gap: 12,
      }}>
        <div style={{
          fontFamily: 'Geist Mono, monospace', fontSize: 10,
          color: t.inkFaint, letterSpacing: '0.1em',
          textTransform: 'uppercase',
        }}>What we have so far</div>
        <Row t={t} k="Revenue today" v={summary.revenueNow} />
        <Row t={t} k="120-day goal" v={summary.goal120} />
        <Row t={t} k="Top platforms" v={summary.platforms} />
      </div>

      <PrimaryButton t={t} onClick={onFinish} disabled={submitting}>
        {submitting ? 'Submitting…' : 'Book your kick-off call →'}
      </PrimaryButton>

      {error && (
        <div style={{
          fontFamily: 'Geist, system-ui, sans-serif', fontSize: 13,
          color: t.danger || '#B4453A', textAlign: 'center', lineHeight: 1.5,
          padding: '0 8px',
        }}>
          {error} Tap the button to try again.
        </div>
      )}

      <div style={{
        fontFamily: 'Geist, system-ui, sans-serif', fontSize: 13,
        color: t.inkSoft, textAlign: 'center', lineHeight: 1.5,
        padding: '0 8px',
      }}>
        You'll get a confirmation email + calendar invite within 24h.
      </div>
    </div>
  );
}

function Row({ t, k, v }) {
  return (
    <div style={{
      display: 'flex', justifyContent: 'space-between', alignItems: 'baseline',
      gap: 12,
    }}>
      <div style={{
        fontFamily: 'Geist, system-ui, sans-serif', fontSize: 13,
        color: t.inkSoft,
      }}>{k}</div>
      <div style={{
        fontFamily: 'Geist, system-ui, sans-serif', fontSize: 14,
        color: t.ink, fontWeight: 500, textAlign: 'right',
        letterSpacing: '-0.01em', maxWidth: '60%',
      }}>{v}</div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// STEP 8 — confirmation screen (after CTA in step 7)
// ─────────────────────────────────────────────────────────────
function Step8Booked({ t, name, onReset }) {
  return (
    <div style={{
      padding: '60px 24px 24px', display: 'flex', flexDirection: 'column',
      gap: 16, height: '100%', boxSizing: 'border-box',
    }}>
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', textAlign: 'center' }}>
        <div style={{
          width: 64, height: 64, borderRadius: 32, background: t.primary,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          marginBottom: 20,
          animation: 'pop 500ms cubic-bezier(.2,1.3,.5,1) both',
        }}>
          <svg width="28" height="28" viewBox="0 0 28 28" fill="none">
            <path d="M6 14L12 20L22 8" stroke="#fff" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"/>
          </svg>
        </div>
        <div style={{
          fontFamily: '"Instrument Serif", Georgia, serif', fontSize: 30,
          color: t.ink, letterSpacing: '-0.02em', lineHeight: 1.05,
          textWrap: 'balance',
        }}>
          Kick-off call requested{name ? `, ${name}` : ''}.
        </div>
        <div style={{
          marginTop: 10, fontFamily: 'Geist, system-ui, sans-serif',
          fontSize: 14, color: t.inkSoft, maxWidth: 280, lineHeight: 1.5,
        }}>
          We’ll send your invite and a short pre-call brief inside 24 hours.
        </div>
      </div>
      <PrimaryButton t={t} onClick={onReset} variant="ghost">
        Restart onboarding
      </PrimaryButton>
    </div>
  );
}

Object.assign(window, { Step1Welcome, Step7WrapUp, Step8Booked });