import { FileText, Cpu, Key, ArrowRight } from 'lucide-react';

export default function Tutorial({ onComplete }) {
  return (
    <div className="welcome-screen">
      <div className="fade-up" style={{ maxWidth: 800, width: '100%' }}>
        <h1 style={{ fontSize: 32, fontWeight: 800, marginBottom: 10, letterSpacing: '-0.03em', color: 'var(--text-primary)' }}>
          How CodeBlue Context Works
        </h1>
        <p style={{ color: 'var(--text-secondary)', fontSize: 16, marginBottom: 40 }}>
          3 simple steps to transform messy clinical records into structured emergency intelligence.
        </p>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(240px, 1fr))', gap: 20, marginBottom: 40, textAlign: 'left' }}>
          <div className="card fade-up" style={{ padding: 24, animationDelay: '0.1s' }}>
            <div style={{ padding: 12, background: 'rgba(10,132,255,0.1)', borderRadius: 10, color: 'var(--blue-accent)', display: 'inline-block', marginBottom: 16 }}>
              <FileText size={24} />
            </div>
            <h3 style={{ fontSize: 16, fontWeight: 700, marginBottom: 8, color: 'var(--text-primary)' }}>1. Upload Anything</h3>
            <p style={{ fontSize: 13, color: 'var(--text-secondary)', lineHeight: 1.5 }}>
              Doctors don't have structured JSON. Drop a raw clinical PDF, Word Doc, or photo into the dropzone. Our vision extraction system instantly parses it.
            </p>
          </div>

          <div className="card fade-up" style={{ padding: 24, animationDelay: '0.2s' }}>
            <div style={{ padding: 12, background: 'rgba(255,45,85,0.1)', borderRadius: 10, color: 'var(--red-critical)', display: 'inline-block', marginBottom: 16 }}>
              <Cpu size={24} />
            </div>
            <h3 style={{ fontSize: 16, fontWeight: 700, marginBottom: 8, color: 'var(--text-primary)' }}>2. 5-Agent Orchestration</h3>
            <p style={{ fontSize: 13, color: 'var(--text-secondary)', lineHeight: 1.5 }}>
              The record is passed sequentially through 5 specialized AI agents (Triage, Contraindication, Labs, Differentials, Action Protocol) to extract hidden insights.
            </p>
          </div>

          <div className="card fade-up" style={{ padding: 24, animationDelay: '0.3s' }}>
            <div style={{ padding: 12, background: 'rgba(191,90,242,0.1)', borderRadius: 10, color: 'var(--purple-ai)', display: 'inline-block', marginBottom: 16 }}>
              <Key size={24} />
            </div>
            <h3 style={{ fontSize: 16, fontWeight: 700, marginBottom: 8, color: 'var(--text-primary)' }}>3. Provide Your Brain</h3>
            <p style={{ fontSize: 13, color: 'var(--text-secondary)', lineHeight: 1.5 }}>
              To bypass our hackathon server rate limits, use the "Provide API Key" button in the dashboard navbar to safely inject your own Gemini key directly from your browser.
            </p>
          </div>
        </div>

        <button 
          className="btn-primary fade-up" 
          style={{ animationDelay: '0.4s', padding: '14px 28px', fontSize: 16, borderRadius: 99 }}
          onClick={onComplete}
        >
          Enter Dashboard <ArrowRight size={18} />
        </button>
      </div>
    </div>
  );
}