import React, { useState, useEffect } from 'react';
import { 
  Sun, 
  ArrowRight, 
  ArrowLeft, 
  Heart, 
  Brain, 
  Activity, 
  Home, 
  CheckCircle2, 
  FileText, 
  Clock, 
  Zap, 
  Shield, 
  Dna,
  Printer,
  ChevronRight,
  AlertTriangle,
  MoveUp,
  Sparkles,
  Timer,
  Thermometer,
  Eye,
  Microscope,
  Info,
  ChevronDown,
  Droplets,
  Scale
} from 'lucide-react';

// --- DATA: RESEARCH DATABASE (Comprehensive Citations from PDFs) ---
const researchDB = {
  // Personalized Logic Mappings
  "Insulin Resistance": { title: "Glycemic Kinetic Restoration", text: "Movement acts as 'invisible insulin,' bypassing resistance via GLUT4 translocation to lower blood sugar by 58%.", cite: "DPP Research Group (2002). NEJM." },
  "Elevated HbA1c": { title: "Metabolic Barrier Offset", text: "Structured activity reduces the risk of Type 2 Diabetes by 58%, nearly doubling the efficacy of Metformin.", cite: "Diabetes Prevention Program (2002)." },
  "Knee Osteoarthritis": { title: "Synovial Mechanotransduction", text: "Exercise therapy is clinically superior to NSAIDs for pain reduction (SMD 0.54) by lubricating joint cartilage.", cite: "JOSPT (2022)." },
  "Lumbar/L4-L5 Pain": { title: "Threat Signal Modulation", text: "Strength training reduces the brain's 'threat' output, effectively acting as a natural analgesic for chronic back pain.", cite: "JOSPT (2022)." },
  "Brain Fog": { title: "Hippocampal Neurogenesis", text: "Aerobic activity increases brain blood flow by 20% and can reverse age-related memory loss by 1-2 years.", cite: "Erickson et al. (2011). PNAS." },
  "Memory Lapses": { title: "White Matter Preservation", text: "Intentional movement triggers BDNF release, which acts as 'fertilizer' for new neurons in memory centers.", cite: "Erickson et al. (2011)." },
  "Fear of Falling": { title: "Neuromotor Resilience", text: "Targeted balance and power interventions reduce the rate of multiple falls by 55%.", cite: "CDC / Stevens & Burns (2015)." },
  "Balance Instability": { title: "Rate of Force Development", text: "Power training improves step-velocity by up to 4.5% per session, preventing trips from becoming fractures.", cite: "Stevens & Burns (2015)." },
  "Sit-to-Stand Weakness": { title: "Functional Agency Protection", text: "Improving physical 'power' reduces the hazard of developing activities of daily living disability by 53.6%.", cite: "Wang et al. (2024). PubMed Central." },
  "Stair Ascent Difficulty": { title: "Independence Stewardship", text: "Combined physical and mental activity reduces ADL disability risk by 53.6% in the oldest-old populations.", cite: "Wang et al. (2024)." },
  "Vascular Stiffness": { title: "Endothelial Elasticity", text: "Meeting movement guidelines reduces cardiovascular death risk by 20-30% by keeping artery walls elastic.", cite: "Lee et al. (2022). Circulation." },
  "Hypertension": { title: "Vascular De-Stiffening", text: "Aerobic training releases Nitric Oxide, a potent vasodilator that lowers resting blood pressure by 5-8 mmHg.", cite: "AHA Circulation (2022)." },
  
  // Nutrition & Hydration Specifics
  "anabolic_low": { title: "Anabolic Resistance Override", text: "Senior muscle requires 1.2g/kg of protein combined with resistance to trigger synthesis pathways blunted by age.", cite: "ESPEN (2014)." },
  "dehydration": { title: "Thirst Signal Re-Calibration", text: "Age blunts the thirst reflex. Scheduled hydration is critical for adenosine clearance and cognitive acuity.", cite: "Kline et al. (2011)." },
  "low_fiber": { title: "Glycemic Buffering", text: "Fiber reduces systemic inflammatory triggers and works alongside movement to stabilize insulin kinetics.", cite: "Bird & Hawley (2017)." },

  // Global/Universal
  longevity: { title: "Life Expectancy Extension", text: "Transitioning to activity adds 0.4 to 4.2 years of life. Every hour moved adds hours of future energy back to you.", cite: "Strain et al. (2024). BJSM.", icon: <Clock className="w-6 h-6" /> },
  anxiety: { title: "Emotional Resilience", text: "Physically active individuals have a 60% lower risk of developing anxiety disorders over the long term.", cite: "Svensson et al. (2021). Frontiers in Psychiatry.", icon: <Heart className="w-6 h-6" /> },
  telomeres: { title: "9-Year DNA Reset", text: "Active adults possess telomeres equating to a biological age 9 years younger than sedentary peers.", cite: "Tucker (2017). Preventive Medicine.", icon: <Dna className="w-6 h-6" /> },
  vascular: { title: "Vascular Elasticity", text: "Meeting guidelines reduces heart disease death risk by 20-30% by keeping artery walls elastic.", cite: "Lee et al. (2022). Circulation.", icon: <Activity className="w-6 h-6" /> }
};

export default function App() {
  const [step, setStep] = useState(0); 
  const [user, setUser] = useState({ track: '', health: [], habits: {}, nutrition: [] });
  const [progress, setProgress] = useState(0);

  useEffect(() => {
    setProgress((step / 5) * 100);
  }, [step]);

  const toggleHealth = (h) => {
    setUser(prev => ({
      ...prev,
      health: prev.health.includes(h) ? prev.health.filter(x => x !== h) : [...prev.health, h]
    }));
  };

  const selectHabit = (key, val, label) => {
    setUser(prev => ({ ...prev, habits: { ...prev.habits, [key]: { val, label } } }));
  };

  const toggleNutri = (n) => {
    setUser(prev => ({
      ...prev,
      nutrition: prev.nutrition.includes(n) ? prev.nutrition.filter(x => x !== n) : [...prev.nutrition, n]
    }));
  };

  // --- VIEW: THE IMPACT LANDING ---
  const LandingPage = () => (
    <div className="min-h-screen flex flex-col font-sans overflow-hidden bg-slate-950">
      <div className="relative z-10 flex flex-col lg:grid lg:grid-cols-2 min-h-screen">
        
        {/* SIDE A: THE COST (DECAY) */}
        <div className="p-10 lg:p-24 flex flex-col justify-center relative group overflow-hidden bg-slate-950">
          <div className="absolute inset-0 bg-red-950/10 group-hover:bg-red-950/20 transition-all duration-700" />
          <div className="relative z-10 space-y-8 animate-[slideLeft_1s_ease-out]">
            <div className="inline-flex items-center gap-2 text-red-500 font-black text-[10px] uppercase tracking-[0.4em]">
                <AlertTriangle className="w-4 h-4" /> The Risk of Inactivity
            </div>
            <h2 className="text-4xl lg:text-7xl font-black text-white leading-tight">
                The Cost of <span className="text-red-500">Stagnation.</span>
            </h2>
            <div className="space-y-4 max-w-lg">
                <p className="text-slate-400 text-lg leading-relaxed">
                    The CDC and WHO classify inactivity as a <strong className="text-white">Global Emergency.</strong> 
                    Without movement, the body enters a state of rapid decay:
                </p>
                <div className="space-y-3 pt-4">
                    <div className="flex gap-4 items-center text-slate-300">
                        <div className="w-2 h-2 rounded-full bg-red-500" />
                        <span>#3 Leading Cause of Premature Death</span>
                    </div>
                    <div className="flex gap-4 items-center text-slate-300">
                        <div className="w-2 h-2 rounded-full bg-red-500" />
                        <span>$117 Billion in annual healthcare waste</span>
                    </div>
                    <div className="flex gap-4 items-center text-slate-300">
                        <div className="w-2 h-2 rounded-full bg-red-500" />
                        <span>Increased risk of Nursing Home Admission</span>
                    </div>
                </div>
            </div>
          </div>
        </div>

        {/* SIDE B: THE CATALYST (RECLAMATION) */}
        <div className="p-10 lg:p-24 flex flex-col justify-center bg-orange-500 relative group">
          <div className="absolute inset-0 bg-gradient-to-br from-orange-400 to-amber-500 transition-all duration-1000 opacity-90" />
          <div className="relative z-10 space-y-8 animate-[slideRight_1s_ease-out]">
            <div className="inline-flex items-center gap-2 text-white font-black text-[10px] uppercase tracking-[0.4em]">
                <Sparkles className="w-4 h-4" /> The Clinical Catalyst
            </div>
            <h2 className="text-4xl lg:text-7xl font-black text-slate-900 leading-tight">
                The Power of <span className="text-white">Intent.</span>
            </h2>
            <div className="space-y-4 max-w-lg">
                <p className="text-orange-950 text-lg leading-relaxed">
                    Intentional activity is the most potent intervention in modern medicine.
                    A few targeted minutes can <strong className="text-white">Reverse the Clock:</strong>
                </p>
                <div className="space-y-3 pt-4">
                    <div className="flex gap-4 items-center text-white font-bold">
                        <div className="bg-slate-900/10 p-1 rounded-full"><CheckCircle2 className="w-5 h-5 text-slate-900" /></div>
                        <span>+4.2 Years of high-quality life gained</span>
                    </div>
                    <div className="flex gap-4 items-center text-white font-bold">
                        <div className="bg-slate-900/10 p-1 rounded-full"><CheckCircle2 className="w-5 h-5 text-slate-900" /></div>
                        <span>58% Reduction in Diabetes onset</span>
                    </div>
                    <div className="flex gap-4 items-center text-white font-bold">
                        <div className="bg-slate-900/10 p-1 rounded-full"><CheckCircle2 className="w-5 h-5 text-slate-900" /></div>
                        <span>9-Year biological DNA reset</span>
                    </div>
                </div>
            </div>
          </div>
        </div>

        {/* STRIKING PIVOT BUTTON */}
        <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-50 w-full flex justify-center px-6">
            <button 
                onClick={() => setStep(1)}
                className="group relative flex items-center justify-between gap-12 bg-white text-slate-900 p-2 pl-10 pr-2 rounded-full shadow-[0_0_50px_rgba(0,0,0,0.3)] hover:scale-105 transition-all duration-500"
            >
                <span className="text-lg lg:text-2xl font-black tracking-tighter">Learn how activity can help you</span>
                <div className="bg-slate-900 p-6 rounded-full text-white group-hover:bg-orange-500 transition-colors">
                    <ArrowRight className="w-8 h-8 group-hover:translate-x-1 transition-transform" />
                </div>
                <div className="absolute inset-0 rounded-full border-4 border-white/30 animate-ping pointer-events-none" />
            </button>
        </div>
      </div>
    </div>
  );

  const StepCard = ({ tag, title, desc, children, onNext, onBack }) => (
    <div className="min-h-screen pt-24 pb-20 px-6 bg-[#fffdfa] flex flex-col items-center">
      <div className="max-w-4xl w-full bg-white rounded-[56px] p-8 md:p-20 shadow-2xl border border-slate-100 animate-[popIn_0.6s_cubic-bezier(0.175,0.885,0.32,1.275)]">
        <span className="inline-block text-orange-500 font-black uppercase text-[10px] tracking-[0.3em] mb-6 bg-orange-50 px-4 py-1.5 rounded-full">{tag}</span>
        <h2 className="text-4xl md:text-6xl font-black text-slate-900 mb-6 tracking-tighter leading-[1.05]">{title}</h2>
        <p className="text-lg text-slate-500 mb-12 font-light leading-relaxed max-w-2xl">{desc}</p>
        
        <div className="mb-16">
          {children}
        </div>

        <div className="flex justify-between items-center pt-10 border-t border-slate-50">
          <button onClick={onBack} className="text-slate-300 font-bold hover:text-slate-900 transition-colors uppercase text-xs tracking-widest flex items-center gap-2">
            <ArrowLeft className="w-4 h-4" /> Previous
          </button>
          <button 
            onClick={onNext}
            className="px-10 py-5 bg-slate-900 text-white rounded-full font-black text-lg shadow-xl shadow-slate-200 transition-all hover:bg-orange-500 hover:-translate-y-1 flex items-center gap-3"
          >
            Continue Discovery <ChevronRight className="w-6 h-6" />
          </button>
        </div>
      </div>
    </div>
  );

  // --- SELECTION SCREENS ---
  const PrioritySelection = () => (
    <StepCard tag="Discovery 01" title="Select Your Clinical Orientation" desc="This defines the foundational research database for your analysis." onNext={() => user.track && setStep(2)} onBack={() => setStep(0)}>
      <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
        {[
          { id: 'metabolic', label: 'Metabolic & Cardiovascular Health' },
          { id: 'ortho', label: 'Orthopedic & Pain Restoration' },
          { id: 'neuro', label: 'Cognitive & Neurological Vitality' },
          { id: 'independence', label: 'Independence & Kinetic Power' }
        ].map(t => (
          <button key={t.id} onClick={() => setUser({ ...user, track: t.id })} className={`p-8 rounded-[32px] border-2 transition-all font-black text-xl ${user.track === t.id ? 'border-orange-500 bg-orange-50 shadow-lg' : 'border-slate-50 bg-slate-50 text-slate-400 hover:border-orange-200'}`}>{t.label}</button>
        ))}
      </div>
    </StepCard>
  );

  const HealthSnapshot = () => {
    const options = {
      metabolic: ["Insulin Resistance", "Elevated HbA1c", "Visceral Adiposity", "Statin Dependency", "PM Fatigue", "Vascular Stiffness", "Hypertension", "Dyslipidemia"],
      ortho: ["Knee Osteoarthritis", "Lumbar/L4-L5 Pain", "Morning Stiffness", "NSAID Dependency", "Shoulder Impingement", "Hip Labral Issues", "Bilateral Foot Pain", "Reduced Grip Strength"],
      neuro: ["Brain Fog", "Memory Lapses", "Mild Cognitive Diagnosis", "Balance Instability", "Fear of Falling", "Poor Sleep Architecture", "Neural Fatigue", "Dizziness on Standing"],
      independence: ["Stair Ascent Difficulty", "Sit-to-Stand Weakness", "Reduced Walking Velocity", "Grip Strength Decline", "Housework Fatigue", "Sarcopenic Indicators", "Unsteady Ground Issues"]
    };
    return (
      <StepCard tag="Discovery 02" title="Biomarker Check-in" desc="Which specific hurdles would you like to mitigate?" onNext={() => setStep(3)} onBack={() => setStep(1)}>
        <div className="grid grid-cols-2 md:grid-cols-3 gap-3">
          {options[user.track]?.map(opt => (
            <button key={opt} onClick={() => toggleHealth(opt)} className={`p-5 rounded-2xl border-2 transition-all font-bold text-xs uppercase tracking-widest ${user.health.includes(opt) ? 'border-slate-900 bg-slate-900 text-white' : 'border-slate-50 bg-slate-50 text-slate-400 hover:border-orange-200'}`}>{opt}</button>
          ))}
        </div>
      </StepCard>
    );
  };

  const NutritionAudit = () => (
    <StepCard tag="Discovery 03" title="Biochemical Variables" desc="We need to identify the environmental barriers in your diet and hydration." onNext={() => setStep(4)} onBack={() => setStep(2)}>
      <div className="space-y-8">
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div className="bg-amber-50 p-6 rounded-[32px] border border-amber-100">
                <label className="block text-amber-900 font-black uppercase text-[10px] tracking-widest mb-4"><Scale className="inline w-3 h-3 mr-1"/> Anabolic Status</label>
                <div className="grid gap-2">
                    {["Cereal/Toast dominant meals", "Struggle with protein intake", "Protein with every meal"].map(o => (
                        <button key={o} onClick={() => toggleNutri(o)} className={`p-4 rounded-xl border-2 font-bold text-xs text-left ${user.nutrition.includes(o) ? 'border-orange-500 bg-white' : 'border-amber-100 bg-white/50 text-amber-900/50'}`}>{o}</button>
                    ))}
                </div>
            </div>
            <div className="bg-blue-50 p-6 rounded-[32px] border border-blue-100">
                <label className="block text-blue-900 font-black uppercase text-[10px] tracking-widest mb-4"><Droplets className="inline w-3 h-3 mr-1"/> Hydration Metrics</label>
                <div className="grid gap-2">
                    {["Absent thirst signals", "Drink < 3 glasses daily", "Consistent 8+ glasses daily"].map(o => (
                        <button key={o} onClick={() => toggleNutri(o)} className={`p-4 rounded-xl border-2 font-bold text-xs text-left ${user.nutrition.includes(o) ? 'border-blue-500 bg-white' : 'border-blue-100 bg-white/50 text-blue-900/50'}`}>{o}</button>
                    ))}
                </div>
            </div>
        </div>
        <div className="bg-emerald-50 p-6 rounded-[32px] border border-emerald-100">
            <label className="block text-emerald-900 font-black uppercase text-[10px] tracking-widest mb-4">Glycemic Buffering</label>
            <div className="grid grid-cols-2 gap-2">
                {["Processed food focus", "Rarely eat plants/fiber", "Daily whole foods", "Targeted fiber intake"].map(o => (
                    <button key={o} onClick={() => toggleNutri(o)} className={`p-4 rounded-xl border-2 font-bold text-xs text-left ${user.nutrition.includes(o) ? 'border-emerald-500 bg-white' : 'border-emerald-100 bg-white/50 text-emerald-900/50'}`}>{o}</button>
                ))}
            </div>
        </div>
      </div>
    </StepCard>
  );

  const HabitsHub = () => (
    <StepCard tag="Discovery 04" title="Final Recovery Context" desc="Habits like sleep dictate the speed of your physiological response." onNext={() => setStep(5)} onBack={() => setStep(3)}>
        <div className="grid grid-cols-2 gap-4">
            <button onClick={() => selectHabit('sleep', 'poor', 'Fragmented Sleep')} className={`p-10 rounded-[40px] border-2 font-black ${user.habits.sleep?.val === 'poor' ? 'border-indigo-500 bg-indigo-50' : 'border-slate-50'}`}>I struggle with deep rest</button>
            <button onClick={() => selectHabit('sleep', 'good', 'Restorative Sleep')} className={`p-10 rounded-[40px] border-2 font-black ${user.habits.sleep?.val === 'good' ? 'border-indigo-500 bg-indigo-50' : 'border-slate-50'}`}>I sleep soundly</button>
        </div>
    </StepCard>
  );

  // --- VIEW: RESULTS MAP ---
  const ResultsMap = () => {
    // Generate results safely
    const blocks = [];
    user.health.forEach(h => { 
      if(researchDB[h]) blocks.push({ label: h, data: researchDB[h] }); 
    });
    
    if(user.nutrition.includes("Cereal/Toast dominant meals") && researchDB.anabolic_low) {
      blocks.push({ label: "Anabolic Resistance", data: researchDB.anabolic_low });
    }
    if(user.nutrition.includes("Absent thirst signals") && researchDB.dehydration) {
      blocks.push({ label: "Hydration", data: researchDB.dehydration });
    }
    if(user.nutrition.includes("Rarely eat plants/fiber") && researchDB.low_fiber) {
      blocks.push({ label: "Fiber", data: researchDB.low_fiber });
    }

    // Universal list (ensuring items exist in DB)
    const universal = [
      researchDB.longevity, 
      researchDB.anxiety, 
      researchDB.telomeres, 
      researchDB.vascular
    ].filter(Boolean);

    return (
      <div className="bg-[#fffcf8] min-h-screen pb-32">
        <div className="bg-slate-900 text-white py-24 text-center px-6 relative overflow-hidden no-print">
          <div className="absolute inset-0 bg-gradient-to-br from-orange-500/10 to-transparent pointer-events-none opacity-50" />
          <h1 className="text-6xl font-black mb-4 tracking-tighter">Your Physiological Map</h1>
          <p className="text-xl text-slate-400 font-light max-w-2xl mx-auto uppercase tracking-widest text-[10px] font-mono">Analysis ID: OHS-{Math.floor(Math.random()*90000)}</p>
        </div>

        <div className="max-w-6xl mx-auto -mt-12 px-6">
          <div className="bg-white rounded-[64px] p-8 md:p-24 shadow-2xl border border-slate-50">
            <div className="flex justify-between items-center mb-16 border-b border-slate-100 pb-8 font-black text-slate-300 text-xs uppercase tracking-[0.3em]">
              <span>Surveillance Ledger: Research-Set-V2</span>
              <span>{new Date().toLocaleDateString()}</span>
            </div>

            {/* Top Outcomes Grid */}
            <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-24">
                <div className="bg-orange-50 p-10 rounded-[48px] text-center border border-orange-100">
                    <span className="block text-6xl font-black text-slate-900 mb-2">+4.2y</span>
                    <p className="text-[10px] font-black text-orange-600 uppercase tracking-widest">Added Life quality extension</p>
                </div>
                <div className="bg-blue-50 p-10 rounded-[48px] text-center border border-blue-100">
                    <span className="block text-6xl font-black text-slate-900 mb-2">+2%</span>
                    <p className="text-[10px] font-black text-blue-600 uppercase tracking-widest">Hippocampal volume recovery</p>
                </div>
                <div className="bg-emerald-50 p-10 rounded-[48px] text-center border border-emerald-100">
                    <span className="block text-6xl font-black text-slate-900 mb-2">58%</span>
                    <p className="text-[10px] font-black text-emerald-600 uppercase tracking-widest">Metabolic risk offset</p>
                </div>
            </div>

            <h2 className="text-3xl font-black mb-12 text-slate-900 flex items-center gap-4">
              <div className="w-10 h-3 bg-orange-500 rounded-full" />
              Personalized Research Correlations
            </h2>
            <div className="space-y-12 mb-32">
                {blocks.length > 0 ? blocks.map((b, i) => (
                    <div key={i} className="p-10 bg-slate-50 rounded-[40px] border border-slate-100 animate-[rise-fade_0.6s_ease-out_forwards]" style={{ animationDelay: `${i*0.1}s` }}>
                        <div className="flex justify-between items-start mb-6">
                            <span className="bg-white border border-slate-200 px-4 py-1 rounded-full text-[10px] font-black text-slate-400 uppercase tracking-widest">Target: {b.label}</span>
                            <Microscope className="w-5 h-5 text-orange-500" />
                        </div>
                        <h3 className="text-2xl font-black text-slate-900 mb-4">{b.data.title}</h3>
                        <p className="text-xl text-slate-600 font-light mb-8 leading-relaxed">{b.data.text}</p>
                        <div className="text-[9px] font-mono text-slate-400 uppercase border-t border-slate-200/50 pt-4 italic tracking-widest">Ref: {b.data.cite}</div>
                    </div>
                )) : (
                    <div className="p-10 bg-slate-50 rounded-[40px] text-center italic text-slate-400">No specific hurdles selected. Universal benefits applied.</div>
                )}
            </div>

            <div className="pt-20 border-t border-slate-100">
                <h2 className="text-3xl font-black mb-12 text-slate-900 flex items-center gap-4">
                  <div className="w-10 h-3 bg-blue-500 rounded-full" />
                  Universal Vitality Surveillance
                </h2>
                <div className="grid grid-cols-1 md:grid-cols-2 gap-8 mb-32">
                  {universal.map((c, i) => (
                    <div key={i} className="p-10 bg-slate-50 rounded-[48px] border border-slate-100">
                      {c.icon}
                      <h3 className="text-xl font-black text-slate-900 mt-6 mb-3">{c.title}</h3>
                      <p className="text-slate-600 font-light mb-6">{c.text}</p>
                      <span className="text-[9px] text-slate-400 font-mono block border-t border-slate-200/50 pt-4 italic uppercase">{c.cite}</span>
                    </div>
                  ))}
                </div>
            </div>

            <div className="bg-slate-100 p-12 md:p-20 rounded-[56px] mb-20">
                <h3 className="text-slate-900 font-black uppercase text-sm tracking-widest mb-10 border-b border-slate-200 pb-4">Patient Assessment Input Summary</h3>
                <div className="grid grid-cols-1 md:grid-cols-2 gap-16">
                    <div>
                        <p className="text-[10px] font-black text-slate-400 uppercase mb-6 tracking-widest">Clinical Markers Identified:</p>
                        <ul className="space-y-4">
                            {user.health.length > 0 ? user.health.map((h, i) => (
                                <li key={i} className="flex items-center gap-4 text-slate-600 font-bold">
                                    <div className="w-2 h-2 rounded-full bg-orange-500" /> {h}
                                </li>
                            )) : <li className="text-slate-400 italic font-light">None identified</li>}
                        </ul>
                    </div>
                    <div>
                        <p className="text-[10px] font-black text-slate-400 uppercase mb-6 tracking-widest">Lifestyle & Nutrition Context:</p>
                        <ul className="space-y-4">
                            {user.nutrition.map((n, i) => (
                                <li key={i} className="flex items-center gap-4 text-slate-600 font-bold italic">
                                    <div className="w-2 h-2 rounded-full bg-blue-500" /> {n}
                                </li>
                            ))}
                            {Object.entries(user.habits).map(([k, o], i) => (
                                <li key={i} className="flex items-center gap-4 text-slate-600 font-bold italic">
                                    <div className="w-2 h-2 rounded-full bg-indigo-500" /> {o.label}
                                </li>
                            ))}
                        </ul>
                    </div>
                </div>
            </div>

            <details className="bg-slate-900 rounded-[32px] p-8 md:p-12 mb-20 group transition-all duration-500 cursor-pointer no-print">
                <summary className="list-none flex justify-between items-center text-white font-black uppercase tracking-[0.3em] text-sm">
                    Clinical Reference Registry (Works Cited)
                    <ChevronDown className="w-5 h-5 text-orange-500 group-open:rotate-180 transition-transform" />
                </summary>
                <ul className="mt-12 grid grid-cols-1 md:grid-cols-2 gap-x-12 gap-y-6 font-mono text-[9px] md:text-[11px] leading-snug uppercase tracking-wider text-slate-400 border-t border-white/10 pt-10">
                    <li>• Strain, T., et al. (2024). BJSM. All-Cause Mortality Advantage.</li>
                    <li>• DPP Research Group. (2002). NEJM. Metabolic risk mitigation.</li>
                    <li>• Erickson, K. I., et al. (2011). PNAS. Brain regeneration metrics.</li>
                    <li>• Wang, Y., et al. (2024). PMC. Functional disability avoidance.</li>
                    <li>• Stevens, J. A., & Burns, E. R. (2015). CDC Compendium of Falls.</li>
                    <li>• Tucker, L. A. (2017). Preventive Med. Telomere length & DNA Age.</li>
                    <li>• Lee, D. H., et al. (2022). Circulation. Cardiovascular Mortality.</li>
                    <li>• Svensson, M., et al. (2021). Frontiers. Anxiety long-term risk.</li>
                    <li>• JOSPT. (2022). Exercise vs Pharmacology for Osteoarthritis.</li>
                    <li>• ESPEN. (2014). Clinical Nutrition and Metabolic guidelines.</li>
                </ul>
            </details>

            <div className="mt-20 flex flex-col md:flex-row justify-center gap-6 no-print">
              <button onClick={() => window.print()} className="px-12 py-6 bg-slate-900 text-white rounded-full font-black text-lg shadow-2xl hover:bg-orange-500 transition-all flex items-center gap-4">
                <Printer className="w-6 h-6" /> Export Map for Physician Review
              </button>
              <a href="booking.html" className="px-12 py-6 bg-orange-500 text-white rounded-full font-black text-lg shadow-2xl hover:bg-orange-600 transition-all text-center">
                Secure Priority Consultation
              </a>
            </div>
          </div>
        </div>
      </div>
    );
  };

  return (
    <div className="selection:bg-orange-200 selection:text-orange-900 scroll-smooth">
      {step > 0 && step < 5 && (
        <div className="fixed top-0 left-0 w-full h-2.5 bg-slate-100 z-[1100] no-print">
          <div className="h-full bg-orange-500 transition-all duration-1000" style={{ width: `${progress}%` }} />
        </div>
      )}

      {step === 0 && <LandingPage />}
      {step === 1 && <PrioritySelection />}
      {step === 2 && <HealthSnapshot />}
      {step === 3 && <NutritionAudit />}
      {step === 4 && <HabitsHub />}
      {step === 5 && <ResultsMap />}

      <style dangerouslySetInnerHTML={{ __html: `
        @keyframes popIn { from { opacity: 0; transform: scale(0.97); } to { opacity: 1; transform: scale(1); } }
        @keyframes slideLeft { from { opacity: 0; transform: translateX(-40px); } to { opacity: 1; transform: translateX(0); } }
        @keyframes slideRight { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: translateX(0); } }
        @keyframes rise-fade { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }

        @media print {
          .no-print { display: none !important; }
          body { background: white !important; margin: 0 !important; padding: 0 !important; }
          .bg-slate-900 { background: white !important; color: black !important; border-bottom: 2px solid black !important; padding: 20px 0 !important; }
          .bg-white { border: none !important; box-shadow: none !important; }
          .rounded-\\[64px\\] { border-radius: 0 !important; }
          .map-container { margin-top: 0 !important; }
          .results-hero h1 { color: black !important; }
          .bg-orange-50, .bg-blue-50, .bg-emerald-50, .bg-slate-50, .bg-slate-100 { background: white !important; border: 1px solid #eee !important; }
          .shadow-2xl { box-shadow: none !important; }
          details { border: 1px solid #eee !important; background: white !important; display: block !important; }
          details summary { color: black !important; }
        }
      `}} />
    </div>
  );
}