frontend/src/components/chat/WelcomeScreen.jsx

import { Stethoscope, FileSearch, Brain, BookOpen } from 'lucide-react'

const SUGGESTIONS = [
  {
    icon: Stethoscope,
    label: 'Treatment',
    text: 'What are the first-line treatments for hypertension?',
    color: 'from-blue-500/20 to-blue-600/5',
    border: 'border-blue-500/20',
    iconBg: 'bg-blue-500/10',
    iconColor: 'text-blue-400',
  },
  {
    icon: FileSearch,
    label: 'Pathology',
    text: 'Explain the pathophysiology of type 2 diabetes.',
    color: 'from-teal-500/20 to-teal-600/5',
    border: 'border-teal-500/20',
    iconBg: 'bg-teal-500/10',
    iconColor: 'text-teal-400',
  },
  {
    icon: Brain,
    label: 'Diagnosis',
    text: 'What are the diagnostic criteria for major depressive disorder?',
    color: 'from-purple-500/20 to-purple-600/5',
    border: 'border-purple-500/20',
    iconBg: 'bg-purple-500/10',
    iconColor: 'text-purple-400',
  },
  {
    icon: BookOpen,
    label: 'Pharmacology',
    text: 'Summarize the mechanism of action of beta-blockers.',
    color: 'from-amber-500/20 to-amber-600/5',
    border: 'border-amber-500/20',
    iconBg: 'bg-amber-500/10',
    iconColor: 'text-amber-400',
  },
]

export default function WelcomeScreen({ onSuggest }) {
  return (
    <div className="relative flex flex-col items-center justify-center h-full px-4 pt-8 pb-10">

      {/* Background ambient glow orbs */}
      <div className="pointer-events-none absolute inset-0 overflow-hidden">
        <div className="absolute -top-32 left-1/2 -translate-x-1/2 w-[600px] h-[600px] rounded-full bg-blue-600/10 blur-[120px]" />
        <div className="absolute bottom-0 left-1/4 w-[300px] h-[300px] rounded-full bg-purple-600/8 blur-[100px]" />
        <div className="absolute bottom-0 right-1/4 w-[300px] h-[300px] rounded-full bg-teal-600/8 blur-[100px]" />
      </div>

      {/* Hero section */}
      <div className="relative z-10 flex flex-col items-center text-center mb-8 animate-slide-up">

        {/* Animated logo badge */}
        <div className="relative mb-6">
          <img src="/logo.png" alt="MedRAG Logo" className="w-16 h-16 rounded-2xl border border-blue-500/30 object-cover"
            style={{ boxShadow: '0 0 32px 8px rgba(59,127,255,0.25)' }} />
        </div>

        {/* Title */}
        <h1 className="text-3xl font-bold mb-2 tracking-tight">
          <span className="text-white">MedRAG </span>
          <span className="bg-gradient-to-r from-blue-400 via-purple-400 to-teal-400 bg-clip-text text-transparent">
            Assistant
          </span>
        </h1>

        <p className="text-gray-400 text-sm max-w-[260px] leading-relaxed text-center">
          Ask clinical questions grounded in your uploaded medical knowledge base.
        </p>
      </div>

      {/* Suggestion cards */}
      <div className="relative z-10 w-full max-w-lg animate-slide-up">
        <p className="text-[11px] text-gray-600 uppercase tracking-widest font-semibold mb-3 text-center">
          Try asking
        </p>
        <div className="grid grid-cols-1 sm:grid-cols-2 gap-2.5">
          {SUGGESTIONS.map(({ icon: Icon, label, text, color, border, iconBg, iconColor }) => (
            <button
              key={text}
              onClick={() => onSuggest(text)}
              className={`group relative flex items-start gap-3 p-3.5 rounded-xl bg-gradient-to-br ${color} border ${border} hover:brightness-125 transition-all duration-200 text-left overflow-hidden`}
            >
              <div className="absolute inset-0 bg-white/0 group-hover:bg-white/[0.03] transition-colors duration-200 rounded-xl" />
              <div className={`relative shrink-0 w-7 h-7 rounded-lg ${iconBg} flex items-center justify-center mt-0.5`}>
                <Icon size={13} className={iconColor} />
              </div>
              <div className="relative min-w-0">
                <span className={`block text-[9px] font-bold uppercase tracking-wider ${iconColor} mb-0.5 opacity-80`}>
                  {label}
                </span>
                <span className="text-[11px] text-gray-300 group-hover:text-gray-100 transition-colors leading-relaxed line-clamp-2">
                  {text}
                </span>
              </div>
            </button>
          ))}
        </div>
      </div>


    </div>
  )
}