// Screens: Onboarding, Upload, Scoring animation

function OnboardingScreen({ platform, onNext, score }) {
  return (
    <div style={{
      height: '100%', display: 'flex', flexDirection: 'column',
      background: 'linear-gradient(180deg, #1a0d2e 0%, #2a1a47 60%, #3d1a55 100%)',
      color: '#fff', position: 'relative', overflow: 'hidden',
    }}>
      {/* aura blobs bg */}
      <div style={{
        position: 'absolute', width: 400, height: 400, borderRadius: '50%',
        background: 'radial-gradient(circle, #ff4db8, transparent 60%)',
        top: -100, right: -100, filter: 'blur(40px)', opacity: 0.5,
      }}/>
      <div style={{
        position: 'absolute', width: 350, height: 350, borderRadius: '50%',
        background: 'radial-gradient(circle, #4dd6ff, transparent 60%)',
        bottom: -50, left: -80, filter: 'blur(50px)', opacity: 0.4,
      }}/>

      <div style={{ paddingTop: platform === 'ios' ? 56 : 48, paddingLeft: 24, paddingRight: 24, display: 'flex', justifyContent: 'space-between', alignItems: 'center', position: 'relative', zIndex: 2 }}>
        <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 11, letterSpacing: '0.18em', color: '#fae14b' }}>RESUME ✦ AURA</div>
        <button style={{ background: 'transparent', border: 'none', color: 'rgba(255,255,255,0.6)', fontFamily: 'Plus Jakarta Sans', fontSize: 13, cursor: 'pointer' }}>skip</button>
      </div>

      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', padding: '20px 28px', position: 'relative', zIndex: 2, textAlign: 'center' }}>
        <Auri score={score} size={180} />
        <div style={{ fontFamily: 'Instrument Serif, serif', fontSize: 52, lineHeight: 1, letterSpacing: '-0.02em', marginTop: 28, fontStyle: 'italic' }}>
          hi, I'm <span style={{ background: 'linear-gradient(90deg, #ff4db8, #fae14b)', WebkitBackgroundClip: 'text', backgroundClip: 'text', color: 'transparent' }}>Auri</span>
        </div>
        <div style={{ fontFamily: 'Plus Jakarta Sans', fontSize: 16, color: 'rgba(255,255,255,0.75)', marginTop: 16, lineHeight: 1.5, maxWidth: 300 }}>
          I'll read your resume and tell you what's working, what's not, and what to fix — in 30 seconds flat.
        </div>
        <div style={{ display: 'flex', gap: 8, marginTop: 28, flexWrap: 'wrap', justifyContent: 'center' }}>
          <Chip bg="rgba(255,255,255,0.1)" color="#fff">content, not looks</Chip>
          <Chip bg="rgba(255,255,255,0.1)" color="#fff">no visual judgments</Chip>
          <Chip bg="rgba(255,255,255,0.1)" color="#fff">honest feedback</Chip>
        </div>
      </div>

      <div style={{ padding: '0 24px', paddingBottom: platform === 'ios' ? 44 : 32, position: 'relative', zIndex: 2, display: 'flex', flexDirection: 'column', gap: 10 }}>
        <PillButton variant="lemon" onClick={onNext} style={{ width: '100%' }}>
          Read my resume <SFIcon name="arrow.right" size={16} color="#1a0d2e"/>
        </PillButton>
        <div style={{ display: 'flex', justifyContent: 'center', gap: 6, marginTop: 6 }}>
          <div style={{ width: 24, height: 4, borderRadius: 2, background: '#fae14b' }}/>
          <div style={{ width: 4, height: 4, borderRadius: 2, background: 'rgba(255,255,255,0.3)' }}/>
          <div style={{ width: 4, height: 4, borderRadius: 2, background: 'rgba(255,255,255,0.3)' }}/>
        </div>
      </div>
    </div>
  );
}

function UploadScreen({ platform, onNext }) {
  const [hovered, setHovered] = React.useState(false);
  return (
    <div style={{ height: '100%', display: 'flex', flexDirection: 'column', background: '#fef9f0' }}>
      <PhoneHeader platform={platform} title="upload" sub="step 1 of 2" onBack={() => {}}/>

      <div style={{ padding: '8px 24px 16px' }}>
        <div style={{ fontFamily: 'Instrument Serif, serif', fontSize: 40, lineHeight: 1, letterSpacing: '-0.02em', color: '#1a0d2e' }}>
          drop your <em style={{ fontStyle: 'italic', background: 'linear-gradient(90deg, #ff4db8, #8a5cf6)', WebkitBackgroundClip: 'text', backgroundClip: 'text', color: 'transparent' }}>resume</em>
        </div>
        <div style={{ fontFamily: 'Plus Jakarta Sans', fontSize: 14, color: '#6b5e88', marginTop: 6 }}>PDF, DOCX, or paste the text.</div>
      </div>

      <div style={{ padding: '8px 20px', flex: 1, display: 'flex', flexDirection: 'column', gap: 12 }}>
        {/* upload area */}
        <div style={{
          border: '2px dashed #c5b8d9', borderRadius: 20, padding: '36px 20px',
          background: 'repeating-linear-gradient(135deg, transparent 0 8px, rgba(138,92,246,0.04) 8px 9px)',
          textAlign: 'center', position: 'relative',
        }}>
          <div style={{ width: 64, height: 64, margin: '0 auto 12px', borderRadius: 16, background: 'linear-gradient(135deg, #ff4db8, #8a5cf6)', display: 'flex', alignItems: 'center', justifyContent: 'center', boxShadow: '0 8px 24px rgba(138,92,246,0.35)' }}>
            <SFIcon name="arrow.up.doc" size={30} color="#fff"/>
          </div>
          <div style={{ fontFamily: 'Plus Jakarta Sans', fontWeight: 700, fontSize: 17, color: '#1a0d2e' }}>tap to browse files</div>
          <div style={{ fontFamily: 'Plus Jakarta Sans', fontSize: 13, color: '#6b5e88', marginTop: 4 }}>or drop from Files / Drive</div>
        </div>

        <div style={{ textAlign: 'center', color: '#6b5e88', fontSize: 11, fontFamily: 'JetBrains Mono, monospace', textTransform: 'uppercase', letterSpacing: '0.15em' }}>or</div>

        {/* Source options */}
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
          {[
            { label: 'iCloud', bg: '#4dd6ff' },
            { label: 'Drive', bg: '#fae14b' },
            { label: 'Dropbox', bg: '#8a5cf6' },
            { label: 'Paste text', bg: '#b7f0cd' },
          ].map(s => (
            <button key={s.label} style={{
              padding: '14px 14px', borderRadius: 16, border: 'none',
              background: '#fffdf7', boxShadow: '0 2px 8px rgba(26,13,46,0.05)',
              display: 'flex', alignItems: 'center', gap: 10, cursor: 'pointer',
              fontFamily: 'Plus Jakarta Sans', fontSize: 14, fontWeight: 600, color: '#1a0d2e',
            }}>
              <div style={{ width: 24, height: 24, borderRadius: 6, background: s.bg }}/>
              {s.label}
            </button>
          ))}
        </div>

        {/* Recent */}
        <div style={{ marginTop: 6 }}>
          <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 10, textTransform: 'uppercase', letterSpacing: '0.15em', color: '#6b5e88', marginBottom: 6, paddingLeft: 4 }}>recently scored</div>
          <div style={{ background: '#fffdf7', borderRadius: 16, padding: '10px 14px', display: 'flex', alignItems: 'center', gap: 12, border: '1px solid rgba(26,13,46,0.06)' }}
            onClick={onNext}>
            <div style={{ width: 36, height: 44, borderRadius: 4, background: 'linear-gradient(180deg, #fff, #f0ebe0)', border: '1px solid #d9ceb8', flexShrink: 0, position: 'relative' }}>
              <div style={{ position: 'absolute', inset: '6px 5px', display: 'flex', flexDirection: 'column', gap: 2 }}>
                {[70, 90, 50, 80, 40].map((w, i) => <div key={i} style={{ height: 2, width: `${w}%`, background: '#c5b8d9' }}/>)}
              </div>
            </div>
            <div style={{ flex: 1 }}>
              <div style={{ fontFamily: 'Plus Jakarta Sans', fontSize: 14, fontWeight: 600, color: '#1a0d2e' }}>Jordan_Resume_v4.pdf</div>
              <div style={{ fontFamily: 'Plus Jakarta Sans', fontSize: 12, color: '#6b5e88' }}>2 days ago · score 68</div>
            </div>
            <SFIcon name="chevron.right" size={14} color="#6b5e88"/>
          </div>
        </div>
      </div>

      <div style={{ padding: '12px 20px', paddingBottom: platform === 'ios' ? 32 : 20 }}>
        <PillButton variant="primary" onClick={onNext} style={{ width: '100%' }}>
          analyze
        </PillButton>
      </div>
    </div>
  );
}

function ScanningScreen({ platform, onDone }) {
  const [step, setStep] = React.useState(0);
  const steps = [
    'reading the words...',
    'checking action verbs...',
    'hunting for buzzwords...',
    'measuring impact...',
    'computing aura...',
  ];
  React.useEffect(() => {
    if (step < steps.length - 1) {
      const t = setTimeout(() => setStep(s => s + 1), 650);
      return () => clearTimeout(t);
    } else {
      const t = setTimeout(onDone, 800);
      return () => clearTimeout(t);
    }
  }, [step]);

  return (
    <div style={{
      height: '100%', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
      background: 'linear-gradient(180deg, #1a0d2e 0%, #2a1a47 60%, #3d1a55 100%)', color: '#fff', position: 'relative', overflow: 'hidden',
    }}>
      <div style={{
        position: 'absolute', width: 400, height: 400, borderRadius: '50%',
        background: 'radial-gradient(circle, #ff4db8, transparent 60%)',
        top: -100, right: -100, filter: 'blur(40px)', opacity: 0.5,
      }}/>
      <div style={{
        position: 'absolute', width: 350, height: 350, borderRadius: '50%',
        background: 'radial-gradient(circle, #4dd6ff, transparent 60%)',
        bottom: -50, left: -80, filter: 'blur(50px)', opacity: 0.4,
      }}/>
      <div style={{ position: 'relative', zIndex: 2, textAlign: 'center', padding: 30 }}>
        <Auri score={60} size={160}/>
        <div style={{ fontFamily: 'Instrument Serif, serif', fontSize: 38, fontStyle: 'italic', marginTop: 24, lineHeight: 1 }}>
          reading<span style={{ display: 'inline-block', animation: 'blink 1s infinite' }}>...</span>
        </div>
        <div style={{ marginTop: 28, height: 24, fontFamily: 'JetBrains Mono, monospace', fontSize: 13, color: '#fae14b', letterSpacing: '0.05em' }}>
          {steps[step]}
        </div>
        {/* progress bar */}
        <div style={{ marginTop: 20, width: 240, height: 4, borderRadius: 100, background: 'rgba(255,255,255,0.15)', overflow: 'hidden', margin: '20px auto 0' }}>
          <div style={{ width: `${((step+1)/steps.length)*100}%`, height: '100%', background: 'linear-gradient(90deg, #ff4db8, #fae14b)', transition: 'width 0.4s' }}/>
        </div>
      </div>
    </div>
  );
}

function ScoreRevealScreen({ platform, onEdit, onShare, onExport, score, variant }) {
  const [showContent, setShowContent] = React.useState(false);
  React.useEffect(() => {
    const t = setTimeout(() => setShowContent(true), 800);
    return () => clearTimeout(t);
  }, []);

  const verdictCopy = {
    title: 'Clear Focused Driven',
    sub: 'This resume radiates solid leadership but could shine brighter with more vivid action verbs and quantified achievements to truly captivate.',
    color: '#b7f0cd',
  };

  const breakdown = [
    { label: 'action verbs', val: Math.max(20, score - 15), max: 100 },
    { label: 'quantified impact', val: Math.max(15, score - 28), max: 100 },
    { label: 'clarity', val: Math.min(95, score + 8), max: 100 },
    { label: 'completeness', val: Math.min(90, score + 3), max: 100 },
  ];
  const issueCount = allIssues().length;

  return (
    <div style={{
      height: '100%', overflowY: 'auto', overflowX: 'hidden',
      background: 'linear-gradient(180deg, #1a0d2e 0%, #2a1a47 60%, #3d1a55 100%)',
      color: '#fff', position: 'relative',
    }} className="device-scroll">
      <div style={{
        position: 'absolute', width: 400, height: 400, borderRadius: '50%',
        background: 'radial-gradient(circle, #ff4db8, transparent 60%)',
        top: -100, right: -100, filter: 'blur(40px)', opacity: 0.5, pointerEvents: 'none',
      }}/>
      <div style={{
        position: 'absolute', width: 350, height: 350, borderRadius: '50%',
        background: 'radial-gradient(circle, #4dd6ff, transparent 60%)',
        bottom: -50, left: -80, filter: 'blur(50px)', opacity: 0.4, pointerEvents: 'none',
      }}/>
      <PhoneHeader platform={platform} title="your aura" sub="results" onBack={() => {}} dark
        right={<button style={{ width: 40, height: 40, borderRadius: '50%', border: 'none', background: 'rgba(255,255,255,0.1)', color: '#fff', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <SFIcon name="ellipsis" size={18} color="#fff"/>
        </button>}
      />

      <div style={{ padding: '10px 24px 30px', textAlign: 'center', display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
        <AuraScore score={score} variant={variant} size={260} animated={true} />
        {showContent && (
          <div className="pop-in">
            <div style={{ fontFamily: 'Instrument Serif, serif', fontSize: 40, fontStyle: 'italic', color: verdictCopy.color, marginTop: 24, lineHeight: 1.1 }}>
              {verdictCopy.title}
            </div>
            <div style={{ fontFamily: 'Plus Jakarta Sans', fontSize: 15, color: 'rgba(255,255,255,0.8)', marginTop: 10, lineHeight: 1.5, maxWidth: 300, margin: '10px auto 0' }}>
              {verdictCopy.sub}
            </div>
          </div>
        )}
      </div>

      {/* issues counter */}
      <div style={{ padding: '0 20px 20px' }}>
        <div style={{ background: 'rgba(255,255,255,0.08)', backdropFilter: 'blur(20px)', borderRadius: 20, padding: 18, border: '1px solid rgba(255,255,255,0.12)' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 14 }}>
            <div style={{ width: 44, height: 44, borderRadius: 12, background: '#ff8a7a', display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: 'Instrument Serif, serif', fontSize: 24, color: '#1a0d2e' }}>{issueCount}</div>
            <div style={{ flex: 1 }}>
              <div style={{ fontFamily: 'Plus Jakarta Sans', fontWeight: 700, fontSize: 16, color: '#fff' }}>issues to fix</div>
              <div style={{ fontFamily: 'Plus Jakarta Sans', fontSize: 12, color: 'rgba(255,255,255,0.6)' }}>each one drops your aura</div>
            </div>
          </div>
          {/* issue type breakdown */}
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
            {['verb', 'metric', 'passive', 'vague', 'tense', 'missing'].map(t => {
              const n = allIssues().filter(i => i.type === t).length;
              if (!n) return null;
              return <div key={t} style={{ display: 'flex', alignItems: 'center', gap: 6, padding: '5px 10px', borderRadius: 100, background: 'rgba(255,255,255,0.07)', fontFamily: 'Plus Jakarta Sans', fontSize: 12, color: '#fff' }}>
                <IssueDot type={t}/> <span style={{ color: 'rgba(255,255,255,0.85)' }}>{ISSUE_META[t].label}</span> <span style={{ fontWeight: 700 }}>{n}</span>
              </div>;
            })}
          </div>
        </div>
      </div>

      {/* breakdown */}
      <div style={{ padding: '0 20px 20px' }}>
        <div style={{ background: '#fffdf7', borderRadius: 20, padding: 18, color: '#1a0d2e' }}>
          <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 10, textTransform: 'uppercase', letterSpacing: '0.15em', color: '#6b5e88', marginBottom: 10 }}>breakdown</div>
          {breakdown.map(b => (
            <div key={b.label} style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 10 }}>
              <div style={{ width: 110, fontFamily: 'Plus Jakarta Sans', fontSize: 13, color: '#1a0d2e' }}>{b.label}</div>
              <div style={{ flex: 1, height: 8, borderRadius: 100, background: '#f0ebe0', overflow: 'hidden' }}>
                <div style={{ width: `${b.val}%`, height: '100%', background: b.val >= 70 ? 'linear-gradient(90deg, #b7f0cd, #5ac77f)' : b.val >= 40 ? 'linear-gradient(90deg, #fae14b, #e5c71a)' : 'linear-gradient(90deg, #ff8a7a, #ff4db8)', transition: 'width 1s' }}/>
              </div>
              <div style={{ width: 32, textAlign: 'right', fontFamily: 'Instrument Serif, serif', fontSize: 18, color: '#1a0d2e' }}>{b.val}</div>
            </div>
          ))}
        </div>
      </div>

      {/* actions */}
      <div style={{ padding: '0 20px', paddingBottom: platform === 'ios' ? 44 : 32, display: 'flex', flexDirection: 'column', gap: 10 }}>
        <PillButton variant="lemon" onClick={onEdit} style={{ width: '100%' }}>
          fix my resume
        </PillButton>
        <div style={{ display: 'flex', gap: 10 }}>
          <PillButton variant="cream" onClick={onExport} icon={<SFIcon name="arrow.down.to.line" size={14} color="#1a0d2e"/>} style={{ flex: 1, height: 48 }}>
            export
          </PillButton>
          <PillButton variant="cream" onClick={onShare} icon={<SFIcon name="square.and.arrow.up" size={14} color="#1a0d2e"/>} style={{ flex: 1, height: 48 }}>share</PillButton>
          <PillButton variant="cream" icon={<SFIcon name="arrow.clockwise" size={14} color="#1a0d2e"/>} style={{ flex: 1, height: 48 }}>rescan</PillButton>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { OnboardingScreen, UploadScreen, ScanningScreen, ScoreRevealScreen });