import { Activity, ShieldCheck, Brain } from 'lucide-react';

export default function Welcome({ onStart }) {
  return (
    <div className="welcome-screen">
      {/* Animated logo */}
      <div style={{ marginBottom: 32, position: 'relative' }}>
        <div style={{
          width: 80, height: 80, borderRadius: '50%',
          background: 'rgba(255,45,85,0.12)',
          border: '2px solid rgba(255,45,85,0.4)',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          animation: 'heartbeat 1.4s ease-in-out infinite',
          margin: '0 auto 20px',
        }}>
          <Activity size={36} color="var(--red-critical)" />
        </div>

        {/* EKG line SVG */}
        <svg width="240" height="40" viewBox="0 0 240 40" style={{ margin: '0 auto', display: 'block' }}>
          <polyline
            points="0,20 30,20 45,5 52,35 60,5 70,20 100,20 115,20 120,2 126,38 132,2 138,20 180,20 240,20"
            fill="none" stroke="var(--red-critical)" strokeWidth="1.5"
            strokeDasharray="400" strokeDashoffset="400"
            style={{ animation: 'ekg 2s ease forwards 0.3s' }}
          />
        </svg>
      </div>

      {/* Title */}
      <h1 style={{
        fontSize: 42, fontWeight: 900, letterSpacing: '-0.03em',
        background: 'linear-gradient(135deg, #0f172a 30%, #475569)',
        WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent',
        marginBottom: 8,
      }}>
        CodeBlue Context
      </h1>
      <p style={{ fontSize: 16, color: 'var(--text-secondary)', marginBottom: 32, maxWidth: 420, lineHeight: 1.6 }}>
        Emergency clinical intelligence. Five AI agents. One life-saving brief.
      </p>

      {/* Feature pills */}
      <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap', justifyContent: 'center', marginBottom: 40 }}>
        {[
          { icon: <Activity size={13}/>, label: '5-Agent Orchestration' },
          { icon: <ShieldCheck size={13}/>, label: 'Contraindication Guardian' },
          { icon: <Brain size={13}/>, label: 'Explainable AI Reasoning' },
        ].map(f => (
          <div key={f.label} style={{
            display: 'flex', alignItems: 'center', gap: 6,
            padding: '6px 14px', borderRadius: 99,
            background: 'rgba(10,132,255,0.08)',
            border: '1px solid rgba(10,132,255,0.2)',
            color: 'var(--blue-accent)', fontSize: 12, fontWeight: 600,
          }}>
            {f.icon}{f.label}
          </div>
        ))}
      </div>

      <button className="btn-danger" style={{ maxWidth: 260 }} onClick={onStart}>
        <Activity size={16} /> Enter Emergency System
      </button>

      <p style={{ marginTop: 20, fontSize: 11, color: 'var(--text-tertiary)' }}>
        For clinical decision support only — not a substitute for physician judgment
      </p>
    </div>
  );
}