/* global React, ReactDOM */
const { useState, useRef, useEffect } = React;
const {
  Heart, MapPin, Calendar, ChevronRight, Shield,
  CheckCircle, Bell, Search, Menu, X, ArrowRight,
  BookOpen, Users, DollarSign, Activity, Home, Info,
  Sparkles, Clock, Phone, FileText, TrendingUp, Award,
  AlertCircle, Eye, Zap, Filter, ThumbsUp,
  ExternalLink, Lock, Gift, Landmark, User, Settings,
  LogOut, CreditCard, ChevronDown, Star, Newspaper,
  Cpu, Briefcase, Globe, Pill, Brain, Stethoscope,
} = lucide;

/* ─── MOCK DATA ─────────────────────────────────────────── */
const USER = {
  name: "Judy",
  lastName: "Reynolds",
  location: "Baltimore, MD",
  zip: "21201",
  memberSince: "2014",
  plan: "AARP Medicare Advantage Choice Plus",
  planYear: "2025",
  avatar: "JR",
  email: "judy.reynolds@email.com",
};

const NOTIFICATIONS = [
  {
    id: 1, icon: Calendar, color: "text-red-700 bg-red-50",
    title: "Event Reminder",
    body: "AARP Community Walk is tomorrow at 8:00 AM — Rash Field Park.",
    time: "2 hours ago", unread: true,
  },
  {
    id: 2, icon: Shield, color: "text-emerald-700 bg-emerald-50",
    title: "Plan Benefit Unlocked",
    body: "Your SilverSneakers gym benefit renewed for 2025. 3 gyms near you.",
    time: "Yesterday", unread: true,
  },
  {
    id: 3, icon: Star, color: "text-amber-700 bg-amber-50",
    title: "New Article for You",
    body: "\"Managing Chronic Pain Through the Seasons\" is in your feed.",
    time: "2 days ago", unread: false,
  },
  {
    id: 4, icon: Bell, color: "text-red-700 bg-red-50",
    title: "Membership Renewal",
    body: "Your AARP membership renews Jan 1, 2027. Auto-renew is ON.",
    time: "3 days ago", unread: false,
  },
];

const SEARCH_SUGGESTIONS = [
  { icon: Newspaper, label: "Managing Chronic Pain", type: "Article" },
  { icon: Calendar, label: "Estate Planning Seminar", type: "Event" },
  { icon: Shield, label: "Medicare Coverage Options", type: "Benefit" },
  { icon: DollarSign, label: "Social Security Tips", type: "Article" },
  { icon: MapPin, label: "Events in Baltimore", type: "Community" },
  { icon: Heart, label: "Diabetes Lifestyle", type: "Health Hub" },
];

/* Articles — natural mix of three content types, NEVER labeled */
const FEED_ARTICLES = [
  {
    id: 1,
    icon: Activity,
    title: "Living Well with Chronic Pain: A Day-by-Day Playbook",
    summary: "Pain physician Dr. James Okafor shares the small daily routines — gentle morning stretches, anti-inflammatory meals, and sleep hygiene tweaks — that members say have changed how they manage flare-ups, without leaning harder on medication.",
    readTime: "7 min read",
    image: "🌿",
    healthWidget: false,
  },
  {
    id: 2,
    icon: Cpu,
    title: "How AI Can Help You Track Chronic Symptoms (Without the Tech Headache)",
    summary: "New voice-first apps let you say a sentence about how you're feeling and quietly build a pattern your doctor can actually use. Tech writer Maya Lin walks through the three free tools she'd hand her own mother.",
    readTime: "6 min read",
    image: "🤖",
    healthWidget: false,
  },
  {
    id: 3,
    icon: Pill,
    title: "Diabetes-Friendly Eating, Without the Diet Aisle",
    summary: "Registered dietitian Patricia Gomez retires the word \"diabetic food\" and walks you through a real grocery cart — produce-aisle staples, smart freezer picks, and the three pantry swaps that quietly keep blood sugar steady.",
    readTime: "5 min read",
    image: "🥗",
    healthWidget: true,
    widgetTitle: "Coverage Check: Diabetes Prevention Programs",
    widgetBody: "Your AARP-endorsed Medicare Advantage plan includes $0 copay diabetes prevention programs and continuous glucose monitors at most in-network pharmacies.",
    widgetCTA: "See What's Covered →",
  },
  {
    id: 4,
    icon: Globe,
    title: "What the New Healthcare Bill Actually Changes for People with Chronic Conditions",
    summary: "Past the headlines: policy reporter Anita Hayes lays out the three provisions that matter most if you're living with an ongoing diagnosis — including the prescription cap that quietly took effect this month.",
    readTime: "8 min read",
    image: "🏛️",
    healthWidget: false,
  },
  {
    id: 5,
    icon: DollarSign,
    title: "Financial Planning When You're Managing a Long-Term Diagnosis",
    summary: "Treatment costs rarely arrive politely on a schedule. Certified planner Carol Briggs lays out a realistic budget framework for chronic care — what to set aside, what to ask your plan, and the tax breaks most people miss.",
    readTime: "9 min read",
    image: "📊",
    healthWidget: false,
  },
  {
    id: 6,
    icon: Brain,
    title: "When the Body Is Tired, the Mind Is Too: Mental Health and Long-Term Illness",
    summary: "Living with a chronic condition is a full-time job nobody asked for. Therapist Dr. Lou Park, who specializes in patients 55+, talks through the small, evidence-backed habits that protect your mood when energy is finite.",
    readTime: "7 min read",
    image: "🧠",
    healthWidget: false,
  },
  {
    id: 7,
    icon: Briefcase,
    title: "The Quiet Reshuffle: How Retirees Are Rebuilding Wealth in 2026",
    summary: "Bond yields, annuities, and a return to certificates of deposit — financial columnist David Reinholt looks at the steady-income strategies that retirees are quietly moving back toward this year, and what's still worth avoiding.",
    readTime: "10 min read",
    image: "💰",
    healthWidget: false,
  },
  {
    id: 8,
    icon: Stethoscope,
    title: "Choosing the Right Medicare Coverage When Your Health Is Complicated",
    summary: "Open Enrollment can feel like alphabet soup. SHIP counselor Robert Finley breaks down what to actually look at on a plan summary when you have ongoing conditions — and the four questions to ask before you switch.",
    readTime: "8 min read",
    image: "🩺",
    healthWidget: true,
    widgetTitle: "Coverage Check: Specialist & Therapy Visits",
    widgetBody: "Your current plan covers up to 60 specialist visits per year with a $20 copay. Compare with other AARP-endorsed options if your needs change.",
    widgetCTA: "Compare Coverage →",
  },
  {
    id: 9,
    icon: Cpu,
    title: "The Beginner's Guide to AI Assistants for People Over 50",
    summary: "Less hype, more usefulness: which assistants are actually worth setting up, what they're genuinely good at (calendar reminders, drafting emails, summarizing long documents), and the three things you should never type into one.",
    readTime: "6 min read",
    image: "💬",
    healthWidget: false,
  },
];

const EVENTS = [
  {
    id: 1, title: "AARP Community Walk — Inner Harbor",
    type: "Fitness & Social", filterKey: "Fitness",
    typeColor: "bg-emerald-100 text-emerald-800",
    date: "Saturday, May 9, 2026", time: "8:00 AM – 10:00 AM",
    location: "Rash Field Park, Baltimore, MD", distance: "0.8 miles away", spots: 12,
    description: "Join 40+ neighbors for a guided 2-mile morning walk along the Inner Harbor promenade. Led by certified AARP fitness ambassador Denise Crawford. All paces welcome. Coffee and light snacks provided.",
    icon: "🚶", rsvp: false, attendees: 38, capacity: 50,
  },
  {
    id: 2, title: "Estate Planning & Legacy Seminar",
    type: "Legal & Financial", filterKey: "Legal & Financial",
    typeColor: "bg-blue-100 text-blue-800",
    date: "Wednesday, May 13, 2026", time: "2:00 PM – 4:30 PM",
    location: "Enoch Pratt Free Library, Central Branch", distance: "1.2 miles away", spots: 6,
    description: "Attorney and AARP volunteer Robert Finley guides you through wills, trusts, powers of attorney, and how to have the hard conversations with family. Free notary service available after the session.",
    icon: "📋", rsvp: true, attendees: 44, capacity: 50,
  },
  {
    id: 3, title: "Smartphone Safety & Scam-Proofing Workshop",
    type: "Technology", filterKey: "Technology",
    typeColor: "bg-purple-100 text-purple-800",
    date: "Friday, May 15, 2026", time: "10:00 AM – 12:00 PM",
    location: "Baltimore Senior Center, Waverly", distance: "2.1 miles away", spots: 20,
    description: "AARP Fraud Watch Network trainer Angela Torres covers the top 5 scams targeting older adults in 2026, how to spot them, and practical phone settings that protect your accounts. Bring your phone.",
    icon: "📱", rsvp: false, attendees: 17, capacity: 37,
  },
  {
    id: 4, title: "Medicare Open Q&A — No Sales Pitch Guaranteed",
    type: "Health & Benefits", filterKey: "Health",
    typeColor: "bg-red-100 text-red-800",
    date: "Tuesday, May 19, 2026", time: "11:00 AM – 1:00 PM",
    location: "AARP Maryland State Office", distance: "0.5 miles away", spots: 18,
    description: "A licensed SHIP (State Health Insurance Assistance Program) counselor answers your Medicare questions with zero obligation. This is a certified non-sales environment. Bring your Medicare card and any EOBs.",
    icon: "🏥", rsvp: false, attendees: 22, capacity: 40,
  },
  {
    id: 5, title: "SilverSneakers Water Aerobics Class",
    type: "Fitness & Social", filterKey: "Fitness",
    typeColor: "bg-emerald-100 text-emerald-800",
    date: "Monday, May 25, 2026", time: "9:00 AM – 10:00 AM",
    location: "Baltimore Athletic Club, Downtown", distance: "1.5 miles away", spots: 25,
    description: "Low-impact water aerobics designed for adults 55+. Free with your SilverSneakers benefit included in most AARP Medicare Advantage plans. Instructor: Maria Gonzalez, certified aquatic therapist.",
    icon: "🏊", rsvp: false, attendees: 11, capacity: 36,
  },
];

const PLAN_BENEFITS = [
  { label: "Primary Care Visits", value: "$0 copay", icon: Heart, status: "covered" },
  { label: "Physical Therapy", value: "Up to 60 visits/yr", icon: Activity, status: "covered" },
  { label: "Dental (Preventive)", value: "$0 copay", icon: CheckCircle, status: "covered" },
  { label: "Vision Exam", value: "$0 copay annually", icon: Eye, status: "covered" },
  { label: "Hearing Aids", value: "$699 per ear/yr", icon: Zap, status: "partial" },
  { label: "Prescription Drugs", value: "Tier 1–2: $0–$10", icon: FileText, status: "covered" },
  { label: "Gym Membership (SilverSneakers)", value: "Included", icon: TrendingUp, status: "covered" },
  { label: "Transportation to Appts.", value: "24 rides/yr", icon: MapPin, status: "partial" },
];

const PLAN_MATCH = [
  { label: "Joint & Bone Health", match: 94, color: "bg-emerald-500" },
  { label: "Preventive Care", match: 98, color: "bg-emerald-500" },
  { label: "Prescription Coverage", match: 87, color: "bg-emerald-400" },
  { label: "Mental Wellness", match: 79, color: "bg-amber-400" },
  { label: "Dental & Vision", match: 91, color: "bg-emerald-500" },
];

/* ─── Powered by LifeSync badge ─────────────────────────── */
function PoweredByBadge({ className = "" }) {
  return (
    <div className={`inline-flex items-center gap-1.5 text-[11px] font-medium tracking-wide ${className}`}>
      <Sparkles size={11} className="opacity-70" />
      <span className="opacity-80">Powered by <span className="font-semibold">LifeSync</span></span>
    </div>
  );
}

/* ─── UTILITY: close on outside click ──────────────────── */
function useOutsideClick(ref, callback) {
  useEffect(() => {
    function handle(e) {
      if (ref.current && !ref.current.contains(e.target)) callback();
    }
    document.addEventListener("mousedown", handle);
    return () => document.removeEventListener("mousedown", handle);
  }, [ref, callback]);
}

/* ─── SEARCH OVERLAY ────────────────────────────────────── */
function SearchOverlay({ onClose }) {
  const [query, setQuery] = useState("");
  const inputRef = useRef(null);

  useEffect(() => { inputRef.current?.focus(); }, []);
  useEffect(() => {
    function handleKey(e) { if (e.key === "Escape") onClose(); }
    document.addEventListener("keydown", handleKey);
    return () => document.removeEventListener("keydown", handleKey);
  }, [onClose]);

  const filtered = query.length > 0
    ? SEARCH_SUGGESTIONS.filter((s) => s.label.toLowerCase().includes(query.toLowerCase()))
    : SEARCH_SUGGESTIONS;

  return (
    <div className="fixed inset-0 z-[100] bg-black bg-opacity-50 flex items-start justify-center pt-20 px-4" onClick={onClose}>
      <div className="bg-white rounded-2xl shadow-2xl w-full max-w-lg overflow-hidden" onClick={(e) => e.stopPropagation()}>
        <div className="flex items-center gap-3 px-5 py-4 border-b border-slate-100">
          <Search size={22} className="text-slate-400 flex-shrink-0" />
          <input
            ref={inputRef}
            value={query}
            onChange={(e) => setQuery(e.target.value)}
            placeholder="Search articles, events, benefits…"
            className="flex-1 text-lg text-slate-900 placeholder-slate-400 outline-none bg-transparent"
          />
          <button onClick={onClose} className="text-slate-400 hover:text-slate-700 transition-colors p-1 rounded-lg hover:bg-slate-100">
            <X size={20} />
          </button>
        </div>
        <div className="py-2 max-h-80 overflow-y-auto">
          {query === "" && (
            <p className="px-5 py-2 text-xs font-semibold text-slate-400 uppercase tracking-wider">Popular Searches</p>
          )}
          {filtered.length === 0 ? (
            <p className="px-5 py-8 text-slate-500 text-base text-center">
              No results for "<span className="font-semibold">{query}</span>"
            </p>
          ) : (
            filtered.map((s) => {
              const Icon = s.icon;
              return (
                <button key={s.label} onClick={onClose} className="w-full flex items-center gap-4 px-5 py-3.5 hover:bg-slate-50 transition-colors text-left">
                  <div className="bg-slate-100 rounded-lg p-2 flex-shrink-0">
                    <Icon size={18} className="text-slate-600" />
                  </div>
                  <div>
                    <p className="text-slate-800 font-semibold text-base">{s.label}</p>
                    <p className="text-slate-400 text-sm">{s.type}</p>
                  </div>
                  <ChevronRight size={16} className="text-slate-300 ml-auto" />
                </button>
              );
            })
          )}
        </div>
        <div className="px-5 py-3 bg-slate-50 border-t border-slate-100 flex items-center justify-between">
          <div className="flex items-center gap-2">
            <kbd className="bg-white border border-slate-200 rounded px-2 py-0.5 text-xs font-mono text-slate-500">Esc</kbd>
            <span className="text-slate-400 text-sm">to close</span>
          </div>
          <PoweredByBadge className="text-slate-400" />
        </div>
      </div>
    </div>
  );
}

/* ─── NOTIFICATIONS DROPDOWN ────────────────────────────── */
function NotificationsDropdown({ onClose }) {
  const [notes, setNotes] = useState(NOTIFICATIONS);
  const ref = useRef(null);
  useOutsideClick(ref, onClose);

  const unreadCount = notes.filter((n) => n.unread).length;
  const markAllRead = () => setNotes((n) => n.map((x) => ({ ...x, unread: false })));
  const dismiss = (id) => setNotes((n) => n.filter((x) => x.id !== id));

  return (
    <div ref={ref} className="absolute right-0 top-full mt-2 w-96 bg-white rounded-2xl shadow-2xl border border-slate-100 z-50 overflow-hidden">
      <div className="flex items-center justify-between px-5 py-4 border-b border-slate-100">
        <div>
          <p className="text-slate-900 font-bold text-lg">Notifications</p>
          {unreadCount > 0 && <p className="text-slate-500 text-sm">{unreadCount} unread</p>}
        </div>
        <button onClick={markAllRead} className="text-red-700 text-sm font-semibold hover:text-red-800 transition-colors">Mark all read</button>
      </div>
      <div className="max-h-96 overflow-y-auto divide-y divide-slate-50">
        {notes.map((n) => {
          const Icon = n.icon;
          return (
            <div key={n.id} className={`flex items-start gap-3 px-5 py-4 ${n.unread ? "bg-red-50/40" : "bg-white hover:bg-slate-50"}`}>
              <div className={`rounded-full p-2 flex-shrink-0 mt-0.5 ${n.color}`}><Icon size={16} /></div>
              <div className="flex-1 min-w-0">
                <p className="text-slate-800 font-semibold text-sm">{n.title}</p>
                <p className="text-slate-600 text-sm mt-0.5 leading-snug">{n.body}</p>
                <p className="text-slate-400 text-xs mt-1">{n.time}</p>
              </div>
              <button onClick={() => dismiss(n.id)} className="text-slate-300 hover:text-slate-500 transition-colors flex-shrink-0 mt-0.5">
                <X size={16} />
              </button>
            </div>
          );
        })}
        {notes.length === 0 && (
          <div className="px-5 py-10 text-center">
            <Bell size={32} className="text-slate-200 mx-auto mb-2" />
            <p className="text-slate-400 text-base">All caught up!</p>
          </div>
        )}
      </div>
      <div className="px-5 py-3 bg-slate-50 border-t border-slate-100 flex items-center justify-between">
        <button className="text-red-700 font-semibold text-sm hover:underline">Notification settings →</button>
        <PoweredByBadge className="text-slate-400" />
      </div>
    </div>
  );
}

/* ─── PROFILE DROPDOWN ──────────────────────────────────── */
function ProfileDropdown({ onClose, onNavigate }) {
  const ref = useRef(null);
  useOutsideClick(ref, onClose);

  const menuItems = [
    { icon: User, label: "My Profile", desc: "Edit your interests & preferences", action: onClose },
    { icon: Shield, label: "My Health Plan", desc: USER.plan, action: () => { onNavigate("hub"); onClose(); } },
    { icon: CreditCard, label: "Membership & Billing", desc: `Member since ${USER.memberSince}`, action: onClose },
    { icon: Settings, label: "Account Settings", desc: "Notifications, privacy, accessibility", action: onClose },
  ];

  return (
    <div ref={ref} className="absolute right-0 top-full mt-2 w-80 bg-white rounded-2xl shadow-2xl border border-slate-100 z-50 overflow-hidden">
      <div className="px-5 py-5 bg-gradient-to-r from-red-700 to-red-600">
        <div className="flex items-center gap-3">
          <div className="bg-white text-red-700 font-black rounded-full w-12 h-12 flex items-center justify-center text-lg flex-shrink-0">
            {USER.avatar}
          </div>
          <div>
            <p className="text-white font-bold text-lg">{USER.name} {USER.lastName}</p>
            <p className="text-red-100 text-sm">{USER.email}</p>
            <span className="inline-block bg-red-800/60 text-white text-xs font-semibold px-2 py-0.5 rounded-full mt-1">
              Active Member
            </span>
          </div>
        </div>
      </div>
      <div className="py-2">
        {menuItems.map((item) => {
          const Icon = item.icon;
          return (
            <button key={item.label} onClick={item.action} className="w-full flex items-center gap-3 px-5 py-3.5 hover:bg-slate-50 transition-colors text-left">
              <div className="bg-slate-100 rounded-lg p-2 flex-shrink-0">
                <Icon size={18} className="text-slate-600" />
              </div>
              <div className="flex-1 min-w-0">
                <p className="text-slate-800 font-semibold text-base">{item.label}</p>
                <p className="text-slate-400 text-sm leading-tight truncate">{item.desc}</p>
              </div>
              <ChevronRight size={15} className="text-slate-300 flex-shrink-0" />
            </button>
          );
        })}
      </div>
      <div className="border-t border-slate-100 px-5 py-3 flex items-center justify-between">
        <button className="flex items-center gap-2 py-1 text-red-700 hover:text-red-800 transition-colors font-semibold text-base">
          <LogOut size={18} /> Sign Out
        </button>
        <PoweredByBadge className="text-slate-400" />
      </div>
    </div>
  );
}

/* ─── NAV BAR ───────────────────────────────────────────── */
function NavBar({ active, setActive, mobileOpen, setMobileOpen }) {
  const [showSearch, setShowSearch] = useState(false);
  const [showNotifs, setShowNotifs] = useState(false);
  const [showProfile, setShowProfile] = useState(false);
  const [unreadCount, setUnreadCount] = useState(2);

  const tabs = [
    { id: "feed", label: "My Daily", icon: Sparkles },
    { id: "community", label: "Local Community", icon: Users },
    { id: "hub", label: "Health & Wealth Hub", icon: Shield },
  ];

  const openNotifs = () => { setShowNotifs(!showNotifs); setShowProfile(false); setUnreadCount(0); };
  const openProfile = () => { setShowProfile(!showProfile); setShowNotifs(false); };

  return (
    <>
      {showSearch && <SearchOverlay onClose={() => setShowSearch(false)} />}
      <header className="bg-red-700 shadow-lg sticky top-0 z-40">
        <div className="max-w-7xl mx-auto px-4 py-3 flex items-center justify-between">
          <div className="flex items-center gap-3">
            <div className="bg-white rounded-md px-3 py-1">
              <span className="text-red-700 font-black text-xl tracking-tight">AARP</span>
            </div>
            <div className="hidden sm:flex items-baseline gap-2">
              <span className="text-white font-semibold text-lg tracking-wide">Now</span>
              <span className="text-red-200 text-xs uppercase tracking-widest">Personalized</span>
            </div>
          </div>

          <div className="flex items-center gap-1 sm:gap-2">
            <button
              onClick={() => setShowSearch(true)}
              className="flex items-center gap-2 bg-red-800 hover:bg-red-900 transition-colors rounded-full px-3 py-2 text-white"
              aria-label="Search"
            >
              <Search size={20} />
              <span className="hidden sm:inline text-sm font-medium text-red-200">Search…</span>
            </button>

            <div className="relative">
              <button onClick={openNotifs} className="relative p-2 rounded-full hover:bg-red-800 transition-colors text-white" aria-label="Notifications">
                <Bell size={22} />
                {unreadCount > 0 && (
                  <span className="absolute top-0.5 right-0.5 bg-amber-400 text-slate-900 font-black rounded-full w-5 h-5 flex items-center justify-center text-xs border-2 border-red-700">
                    {unreadCount}
                  </span>
                )}
              </button>
              {showNotifs && <NotificationsDropdown onClose={() => setShowNotifs(false)} />}
            </div>

            <div className="relative">
              <button onClick={openProfile} className="flex items-center gap-2 bg-red-800 hover:bg-red-900 transition-colors rounded-full pl-2 pr-3 py-1.5" aria-label="User profile menu">
                <div className="bg-white text-red-700 font-bold rounded-full w-7 h-7 flex items-center justify-center text-sm flex-shrink-0">
                  {USER.avatar}
                </div>
                <span className="text-white text-sm font-medium hidden sm:block">{USER.name}</span>
                <ChevronDown size={14} className={`text-red-200 hidden sm:block transition-transform duration-200 ${showProfile ? "rotate-180" : ""}`} />
              </button>
              {showProfile && <ProfileDropdown onClose={() => setShowProfile(false)} onNavigate={setActive} />}
            </div>

            <button className="md:hidden p-2 rounded-full hover:bg-red-800 transition-colors text-white" onClick={() => setMobileOpen(!mobileOpen)} aria-label="Toggle navigation">
              {mobileOpen ? <X size={24} /> : <Menu size={24} />}
            </button>
          </div>
        </div>

        <nav className="hidden md:block bg-red-800 border-t border-red-600">
          <div className="max-w-7xl mx-auto px-4 flex">
            {tabs.map((tab) => {
              const Icon = tab.icon;
              return (
                <button
                  key={tab.id}
                  onClick={() => setActive(tab.id)}
                  className={`flex items-center gap-2 px-6 py-3.5 text-base font-semibold transition-all duration-200 border-b-2 ${
                    active === tab.id ? "text-white border-white bg-red-700" : "text-red-200 hover:text-white hover:bg-red-700 border-transparent"
                  }`}
                >
                  <Icon size={18} />
                  {tab.label}
                </button>
              );
            })}
          </div>
        </nav>

        {mobileOpen && (
          <nav className="md:hidden bg-red-800 border-t border-red-600 px-4 pb-4 pt-2">
            {tabs.map((tab) => {
              const Icon = tab.icon;
              return (
                <button
                  key={tab.id}
                  onClick={() => { setActive(tab.id); setMobileOpen(false); }}
                  className={`w-full flex items-center gap-3 px-4 py-3.5 my-1 rounded-xl text-base font-semibold transition-colors ${
                    active === tab.id ? "bg-white text-red-700" : "text-red-100 hover:bg-red-700"
                  }`}
                >
                  <Icon size={20} />
                  {tab.label}
                </button>
              );
            })}
          </nav>
        )}
      </header>
    </>
  );
}

/* ─── HEALTH WIDGET ─────────────────────────────────────── */
function HealthWidget({ article }) {
  const [expanded, setExpanded] = useState(false);
  return (
    <div className="mt-5 rounded-xl border-2 border-red-100 bg-gradient-to-r from-red-50 to-orange-50 overflow-hidden">
      <div className="px-5 py-4">
        <div className="flex items-center gap-2 mb-2">
          <div className="bg-red-700 rounded-full p-1"><Eye size={14} className="text-white" /></div>
          <span className="text-red-800 font-bold text-sm uppercase tracking-wider">Coverage Check</span>
        </div>
        <p className="text-slate-800 font-semibold text-lg leading-snug">{article.widgetTitle}</p>
        <p className="text-slate-600 text-base mt-1.5 leading-relaxed">{article.widgetBody}</p>
      </div>
      <div className="px-5 pb-4 flex flex-col sm:flex-row gap-3 items-start sm:items-center justify-between">
        <button
          onClick={() => setExpanded(!expanded)}
          className="bg-red-700 hover:bg-red-800 active:scale-95 text-white font-semibold text-base px-5 py-2.5 rounded-lg transition-all flex items-center gap-2"
        >
          {article.widgetCTA}
        </button>
        <span className="text-slate-500 text-sm flex items-center gap-1.5">
          <Lock size={13} /> No obligation to switch.
        </span>
      </div>
      {expanded && (
        <div className="border-t border-red-100 bg-white px-5 py-4">
          <p className="text-slate-700 text-base">
            <strong>Your current plan</strong> ({USER.plan}) covers this benefit. Want to compare with other AARP-endorsed plans in Baltimore? We show all options side-by-side with no sponsored ranking.
          </p>
          <button className="mt-3 text-red-700 font-semibold text-base flex items-center gap-1 hover:underline">
            Go to Health & Wealth Hub <ChevronRight size={16} />
          </button>
        </div>
      )}
    </div>
  );
}

/* ─── ARTICLE CARD (no category labels, no tags) ────────── */
function ArticleCard({ article }) {
  const [liked, setLiked] = useState(false);
  const Icon = article.icon;
  return (
    <article className="bg-white rounded-xl border border-slate-200 overflow-hidden hover:shadow-md transition-shadow duration-200">
      <div className="px-6 pt-5 pb-4">
        <div className="flex gap-4">
          <div className="flex-shrink-0 w-16 h-16 rounded-xl bg-gradient-to-br from-slate-100 to-slate-50 border border-slate-200 flex items-center justify-center text-3xl">
            {article.image}
          </div>
          <div className="flex-1 min-w-0">
            <h3 className="text-slate-900 font-bold text-xl leading-snug">{article.title}</h3>
            <p className="text-slate-600 text-base mt-2 leading-relaxed">{article.summary}</p>
          </div>
        </div>
        <div className="flex items-center justify-between mt-4">
          <div className="flex items-center gap-2 text-slate-500 text-sm">
            <Clock size={14} /><span>{article.readTime}</span>
          </div>
          <div className="flex items-center gap-2">
            <button
              onClick={() => setLiked(!liked)}
              className={`p-2 rounded-full transition-all active:scale-90 ${liked ? "text-red-700 bg-red-50" : "text-slate-400 hover:text-red-700 hover:bg-red-50"}`}
              aria-label="Like"
            >
              <ThumbsUp size={18} />
            </button>
            <button className="bg-slate-100 hover:bg-slate-200 active:scale-95 text-slate-700 font-semibold text-sm px-4 py-2 rounded-lg transition-all flex items-center gap-1.5">
              Read Article <ChevronRight size={15} />
            </button>
          </div>
        </div>
      </div>
      {article.healthWidget && (
        <div className="px-6 pb-5"><HealthWidget article={article} /></div>
      )}
    </article>
  );
}

/* ─── FEED SCREEN ───────────────────────────────────────── */
function FeedScreen() {
  const hour = new Date().getHours();
  const greeting = hour < 12 ? "Good morning" : hour < 17 ? "Good afternoon" : "Good evening";

  return (
    <div className="max-w-3xl mx-auto px-4 py-6">
      {/* Greeting */}
      <div className="bg-gradient-to-br from-red-700 to-red-600 rounded-2xl px-6 py-7 mb-6 text-white relative overflow-hidden">
        <div className="absolute top-0 right-0 w-56 h-56 bg-white opacity-5 rounded-full -translate-y-1/2 translate-x-1/2" />
        <div className="absolute bottom-0 left-0 w-32 h-32 bg-white opacity-5 rounded-full translate-y-1/2 -translate-x-1/2" />
        <div className="relative">
          <p className="text-red-100 text-base mb-1">
            {new Date().toLocaleDateString("en-US", { weekday: "long", month: "long", day: "numeric" })}
          </p>
          <h1 className="text-3xl sm:text-4xl font-black mb-2 tracking-tight">{greeting}, {USER.name}.</h1>
          <p className="text-red-100 text-lg max-w-xl leading-relaxed">
            Here's today's read — a mix of what's happening in the world and what we think you'll find useful.
          </p>
          <div className="mt-5 flex items-center justify-between flex-wrap gap-3">
            <div className="flex items-center gap-2 bg-red-800/50 rounded-lg px-3 py-2 text-sm">
              <Calendar size={14} className="text-red-200" />
              <span className="text-red-100">3 community events near you this week</span>
            </div>
            <PoweredByBadge className="text-red-200" />
          </div>
        </div>
      </div>

      {/* Feed header */}
      <div className="flex items-end justify-between mb-4">
        <div>
          <h2 className="text-2xl font-black text-slate-900 tracking-tight">Today's Read</h2>
          <p className="text-slate-500 text-sm mt-0.5">Refreshed this morning · {FEED_ARTICLES.length} stories</p>
        </div>
      </div>

      {/* Articles */}
      <div className="space-y-5">
        {FEED_ARTICLES.map((a) => <ArticleCard key={a.id} article={a} />)}
      </div>

      <div className="mt-6 text-center">
        <button className="bg-white border-2 border-red-700 text-red-700 font-bold text-lg px-8 py-3 rounded-xl hover:bg-red-50 active:scale-95 transition-all">
          Load More
        </button>
      </div>
    </div>
  );
}

/* ─── EVENT CARD ────────────────────────────────────────── */
function EventCard({ event }) {
  const [rsvped, setRsvped] = useState(event.rsvp);
  const fillPct = Math.round((event.attendees / event.capacity) * 100);

  return (
    <div className="bg-white rounded-xl border border-slate-200 overflow-hidden hover:shadow-md transition-shadow">
      <div className="px-6 py-5">
        <div className="flex gap-4 items-start">
          <div className="text-4xl flex-shrink-0">{event.icon}</div>
          <div className="flex-1">
            <div className="flex flex-wrap items-center gap-2 mb-2">
              <span className={`text-xs font-semibold px-2.5 py-1 rounded-full ${event.typeColor}`}>{event.type}</span>
              {event.spots <= 10 && (
                <span className="text-xs font-semibold px-2.5 py-1 rounded-full bg-amber-100 text-amber-800 flex items-center gap-1">
                  <AlertCircle size={11} /> Only {event.spots} spots left
                </span>
              )}
            </div>
            <h3 className="text-slate-900 font-bold text-xl leading-snug">{event.title}</h3>
          </div>
        </div>

        <p className="text-slate-600 text-base mt-3 leading-relaxed">{event.description}</p>

        <div className="mt-4 space-y-2">
          <div className="flex items-center gap-2 text-slate-700 text-base">
            <Calendar size={16} className="text-red-700 flex-shrink-0" />
            <span className="font-medium">{event.date}</span>
            <span className="text-slate-400">·</span>
            <span>{event.time}</span>
          </div>
          <div className="flex items-center gap-2 text-slate-700 text-base">
            <MapPin size={16} className="text-red-700 flex-shrink-0" />
            <span>{event.location}</span>
            <span className="text-sm text-slate-400 ml-1">({event.distance})</span>
          </div>
        </div>

        <div className="mt-4">
          <div className="flex justify-between text-sm text-slate-500 mb-1">
            <span>{event.attendees} attending</span>
            <span>{event.capacity - event.attendees} spots remaining</span>
          </div>
          <div className="h-2 bg-slate-100 rounded-full overflow-hidden">
            <div className={`h-full rounded-full transition-all ${fillPct > 80 ? "bg-amber-500" : "bg-emerald-500"}`} style={{ width: `${fillPct}%` }} />
          </div>
        </div>

        <div className="mt-5 flex items-center gap-3">
          <button
            onClick={() => setRsvped(!rsvped)}
            className={`flex-1 sm:flex-none font-bold text-lg px-6 py-3 rounded-xl transition-all duration-200 active:scale-95 flex items-center justify-center gap-2 ${
              rsvped ? "bg-emerald-600 text-white hover:bg-emerald-700" : "bg-red-700 text-white hover:bg-red-800"
            }`}
            title={rsvped ? "Click to cancel RSVP" : "RSVP for this event"}
          >
            {rsvped ? <><CheckCircle size={20} /> You're Going!</> : <>RSVP Now <ArrowRight size={20} /></>}
          </button>
          <button className="px-4 py-3 rounded-xl border border-slate-200 text-slate-600 hover:bg-slate-50 active:scale-95 transition-all text-base font-medium">Share</button>
          <button className="px-4 py-3 rounded-xl border border-slate-200 text-slate-600 hover:bg-slate-50 active:scale-95 transition-all" title="Add to calendar">
            <Calendar size={18} />
          </button>
        </div>
      </div>
    </div>
  );
}

/* ─── COMMUNITY SCREEN ──────────────────────────────────── */
function CommunityScreen() {
  const [activeFilter, setActiveFilter] = useState("All Events");
  const filters = ["All Events", "Fitness", "Legal & Financial", "Technology", "Health"];
  const filterMap = { "All Events": null, "Fitness": "Fitness", "Legal & Financial": "Legal & Financial", "Technology": "Technology", "Health": "Health" };

  const filtered = filterMap[activeFilter] ? EVENTS.filter((e) => e.filterKey === filterMap[activeFilter]) : EVENTS;

  return (
    <div className="max-w-3xl mx-auto px-4 py-6">
      <div className="mb-6">
        <h2 className="text-3xl font-black text-slate-900">Local Community</h2>
        <p className="text-slate-600 text-lg mt-1 flex items-center gap-2">
          <MapPin size={18} className="text-red-700" />
          Events near {USER.location}
        </p>
      </div>

      <div
        className="bg-slate-100 rounded-xl border border-slate-200 h-40 mb-6 flex items-center justify-center relative overflow-hidden"
        style={{ backgroundImage: "repeating-linear-gradient(0deg,#e2e8f0,#e2e8f0 1px,transparent 1px,transparent 40px),repeating-linear-gradient(90deg,#e2e8f0,#e2e8f0 1px,transparent 1px,transparent 40px)" }}
      >
        <div className="text-center relative z-10">
          <MapPin size={32} className="text-red-700 mx-auto mb-2" />
          <p className="text-slate-700 font-semibold text-lg">Baltimore, MD — 21201</p>
          <p className="text-slate-500 text-sm">{EVENTS.length} events found within 3 miles</p>
        </div>
        <button className="absolute top-3 right-3 bg-white border border-slate-200 rounded-lg px-3 py-1.5 text-sm font-semibold text-slate-700 hover:bg-slate-50 active:scale-95 transition-all shadow-sm flex items-center gap-1.5">
          <MapPin size={14} className="text-red-700" /> Change Location
        </button>
      </div>

      <div className="flex gap-2 mb-4 overflow-x-auto pb-1">
        {filters.map((f) => (
          <button
            key={f}
            onClick={() => setActiveFilter(f)}
            className={`whitespace-nowrap px-4 py-2 rounded-full text-sm font-semibold transition-all duration-200 flex-shrink-0 active:scale-95 ${
              activeFilter === f ? "bg-red-700 text-white shadow-sm" : "bg-white border border-slate-200 text-slate-700 hover:border-red-400 hover:text-red-700"
            }`}
          >
            {f}
          </button>
        ))}
      </div>

      <p className="text-slate-500 text-sm mb-4">
        Showing <span className="font-semibold text-slate-700">{filtered.length}</span> event{filtered.length !== 1 ? "s" : ""}
        {activeFilter !== "All Events" && <> in <span className="font-semibold text-red-700">{activeFilter}</span></>}
      </p>

      {filtered.length > 0 ? (
        <div className="space-y-5">
          {filtered.map((e) => <EventCard key={e.id} event={e} />)}
        </div>
      ) : (
        <div className="text-center py-16 bg-white rounded-xl border border-slate-200">
          <Calendar size={40} className="text-slate-200 mx-auto mb-3" />
          <p className="text-slate-500 text-lg font-medium">No events in this category right now.</p>
          <button onClick={() => setActiveFilter("All Events")} className="mt-3 text-red-700 font-semibold hover:underline text-base">Show all events</button>
        </div>
      )}

      <div className="mt-6 bg-amber-50 border border-amber-200 rounded-xl px-5 py-4 flex gap-3">
        <Gift size={24} className="text-amber-700 flex-shrink-0 mt-0.5" />
        <div>
          <p className="text-slate-800 font-semibold text-base">How are these events funded?</p>
          <p className="text-slate-600 text-base mt-1">
            AARP local events are funded in part through our partnerships with endorsed health plans. When members choose AARP-endorsed Medicare coverage, a portion goes directly to community programming like these events.{" "}
            <button className="text-red-700 font-semibold hover:underline">Learn more in your Health Hub →</button>
          </p>
        </div>
      </div>
    </div>
  );
}

/* ─── HUB SCREEN ────────────────────────────────────────── */
function HubScreen() {
  const [priorities, setPriorities] = useState({ joints: true, heart: false, diabetes: false, dental: true, mental: false, vision: true });
  const togglePriority = (key) => setPriorities((p) => ({ ...p, [key]: !p[key] }));

  return (
    <div className="max-w-4xl mx-auto px-4 py-6 space-y-6">
      <div>
        <h2 className="text-3xl font-black text-slate-900">Health & Wealth Hub</h2>
        <p className="text-slate-600 text-lg mt-1">Your command center for Medicare navigation, plan benefits, and financial wellness.</p>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-2 gap-5">
        <div className="bg-gradient-to-br from-slate-800 to-slate-900 rounded-xl p-5 text-white relative overflow-hidden">
          <div className="absolute top-0 right-0 w-32 h-32 bg-red-600 opacity-20 rounded-full -translate-y-1/2 translate-x-1/2" />
          <div className="flex items-center gap-3 mb-4">
            <div className="bg-red-700 rounded-full p-2"><Award size={20} className="text-white" /></div>
            <div>
              <p className="text-slate-400 text-sm">Membership Status</p>
              <p className="text-white font-bold text-lg">Active Member</p>
            </div>
          </div>
          <div className="space-y-2">
            {[{ l: "Member Since", v: USER.memberSince }, { l: "Member ID", v: "AARP-7842-JR" }, { l: "Renews", v: "Jan 1, 2027 ✓", g: true }].map((r) => (
              <div key={r.l} className="flex justify-between text-base">
                <span className="text-slate-400">{r.l}</span>
                <span className={r.g ? "text-emerald-400 font-semibold" : "text-white font-semibold"}>{r.v}</span>
              </div>
            ))}
          </div>
          <div className="mt-4 bg-slate-700 rounded-lg px-4 py-2.5 flex items-center justify-between">
            <span className="text-slate-300 text-sm">AARP Membership Card</span>
            <button className="text-red-300 text-sm font-semibold hover:text-red-200 transition-colors active:scale-95">View Digital Card</button>
          </div>
        </div>

        <div className="bg-white border border-slate-200 rounded-xl p-5">
          <div className="flex items-center gap-2 mb-3">
            <Shield size={20} className="text-red-700" />
            <p className="text-slate-500 text-sm font-medium uppercase tracking-wide">Current Health Plan</p>
          </div>
          <p className="text-slate-900 font-bold text-lg leading-snug">{USER.plan}</p>
          <p className="text-slate-500 text-sm mt-1">Plan Year {USER.planYear} · Baltimore, MD</p>
          <div className="mt-4 space-y-2">
            {["AARP-Endorsed Plan", "UnitedHealthcare Network", "SilverSneakers Included"].map((item) => (
              <div key={item} className="flex items-center gap-2 text-base text-slate-700">
                <CheckCircle size={16} className="text-emerald-600" /> {item}
              </div>
            ))}
          </div>
          <div className="mt-4 flex gap-2">
            <button className="flex-1 bg-red-700 hover:bg-red-800 active:scale-95 text-white font-semibold text-sm px-4 py-2.5 rounded-lg transition-all">View Full Plan Details</button>
            <button className="px-4 py-2.5 rounded-lg border border-slate-200 text-slate-600 hover:bg-slate-50 active:scale-95 transition-all" title="Call member services"><Phone size={16} /></button>
          </div>
        </div>
      </div>

      <div className="bg-white border border-slate-200 rounded-xl overflow-hidden">
        <div className="px-6 py-4 border-b border-slate-100 flex items-center justify-between">
          <div>
            <h3 className="text-slate-900 font-bold text-xl">Medicare Benefits Snapshot</h3>
            <p className="text-slate-500 text-base">What your plan covers right now</p>
          </div>
          <button className="text-red-700 font-semibold text-sm flex items-center gap-1 hover:underline">
            Full Coverage Details <ExternalLink size={14} />
          </button>
        </div>
        <div className="divide-y divide-slate-100">
          {PLAN_BENEFITS.map((b) => {
            const Icon = b.icon;
            return (
              <div key={b.label} className="px-6 py-4 flex items-center justify-between hover:bg-slate-50 transition-colors">
                <div className="flex items-center gap-3">
                  <div className={`p-2 rounded-lg ${b.status === "covered" ? "bg-emerald-100" : "bg-amber-100"}`}>
                    <Icon size={18} className={b.status === "covered" ? "text-emerald-700" : "text-amber-700"} />
                  </div>
                  <span className="text-slate-800 font-medium text-base">{b.label}</span>
                </div>
                <div className="flex items-center gap-3">
                  <span className={`font-semibold text-base ${b.status === "covered" ? "text-emerald-700" : "text-amber-700"}`}>{b.value}</span>
                  <span className={`text-xs px-2 py-0.5 rounded-full font-medium ${b.status === "covered" ? "bg-emerald-100 text-emerald-800" : "bg-amber-100 text-amber-800"}`}>
                    {b.status === "covered" ? "Covered" : "Partial"}
                  </span>
                </div>
              </div>
            );
          })}
        </div>
      </div>

      <div className="bg-white border-2 border-red-100 rounded-xl overflow-hidden">
        <div className="bg-gradient-to-r from-red-50 to-orange-50 px-6 py-5 border-b border-red-100">
          <div className="flex items-center gap-3 mb-1">
            <div className="bg-red-700 rounded-full p-1.5"><Sparkles size={16} className="text-white" /></div>
            <h3 className="text-slate-900 font-bold text-xl">Coverage Matchmaker</h3>
          </div>
          <p className="text-slate-600 text-base">Tell us what health topics matter most to you. We'll show how AARP-endorsed plans stack up — with zero bias and no sales pressure.</p>
        </div>
        <div className="px-6 py-5">
          <p className="text-slate-700 font-semibold text-base mb-3">My current health priorities:</p>
          <div className="grid grid-cols-2 sm:grid-cols-3 gap-3 mb-5">
            {[
              { key: "joints", label: "Joint & Bone Health", emoji: "🦵" },
              { key: "heart", label: "Heart & Cardiovascular", emoji: "❤️" },
              { key: "diabetes", label: "Diabetes Management", emoji: "🩺" },
              { key: "dental", label: "Dental & Vision", emoji: "😁" },
              { key: "mental", label: "Mental Wellness", emoji: "🧠" },
              { key: "vision", label: "Prescription Drugs", emoji: "💊" },
            ].map((item) => (
              <button
                key={item.key}
                onClick={() => togglePriority(item.key)}
                className={`flex items-center gap-2 px-4 py-3 rounded-xl border-2 text-left transition-all active:scale-95 ${
                  priorities[item.key] ? "border-red-500 bg-red-50 text-slate-900" : "border-slate-200 bg-white text-slate-500 hover:border-slate-300"
                }`}
              >
                <span className="text-xl">{item.emoji}</span>
                <span className="text-sm font-semibold leading-tight">{item.label}</span>
                {priorities[item.key] && <CheckCircle size={14} className="text-red-700 ml-auto flex-shrink-0" />}
              </button>
            ))}
          </div>
          <div className="bg-slate-50 rounded-xl p-4">
            <div className="flex items-center justify-between mb-4">
              <p className="text-slate-800 font-bold text-base">Your plan match scores:</p>
              <span className="bg-emerald-100 text-emerald-800 text-sm font-semibold px-3 py-1 rounded-full">90% overall match</span>
            </div>
            <div className="space-y-3">
              {PLAN_MATCH.map((item) => (
                <div key={item.label}>
                  <div className="flex justify-between text-sm mb-1">
                    <span className="text-slate-700 font-medium">{item.label}</span>
                    <span className="text-slate-900 font-bold">{item.match}%</span>
                  </div>
                  <div className="h-3 bg-slate-200 rounded-full overflow-hidden">
                    <div className={`h-full rounded-full transition-all duration-700 ${item.color}`} style={{ width: `${item.match}%` }} />
                  </div>
                </div>
              ))}
            </div>
            <button className="mt-4 w-full bg-red-700 hover:bg-red-800 active:scale-95 text-white font-bold text-base px-6 py-3 rounded-xl transition-all flex items-center justify-center gap-2">
              Compare All AARP-Endorsed Plans in Baltimore <ArrowRight size={18} />
            </button>
          </div>
        </div>
      </div>

      <div className="bg-gradient-to-r from-slate-800 to-slate-900 rounded-xl p-6 text-white">
        <div className="flex items-start gap-4">
          <div className="bg-amber-400 rounded-full p-2 flex-shrink-0 mt-0.5"><Eye size={20} className="text-slate-900" /></div>
          <div>
            <h3 className="text-white font-black text-xl mb-2">Our Transparency Commitment</h3>
            <p className="text-slate-300 text-base leading-relaxed mb-3">
              AARP receives royalty payments from UnitedHealthcare (UHC) when members enroll in AARP-endorsed Medicare plans. We believe you deserve to know this — and to understand exactly how that funding works for you.
            </p>
            <div className="grid grid-cols-1 sm:grid-cols-3 gap-4 mt-4">
              {[
                { icon: Gift, label: "Community Events", desc: "Local events like Baltimore walks and seminars are funded through this partnership." },
                { icon: Landmark, label: "AARP Advocacy", desc: "Royalties fund AARP's lobbying efforts to protect Social Security and Medicare." },
                { icon: BookOpen, label: "Free Resources", desc: "This platform, content, and fraud-prevention tools are free because of this model." },
              ].map((item) => {
                const Icon = item.icon;
                return (
                  <div key={item.label} className="bg-slate-700 rounded-lg p-4">
                    <Icon size={20} className="text-amber-400 mb-2" />
                    <p className="text-white font-semibold text-sm">{item.label}</p>
                    <p className="text-slate-400 text-sm mt-1 leading-snug">{item.desc}</p>
                  </div>
                );
              })}
            </div>
            <p className="text-slate-400 text-sm mt-4 flex items-center gap-1.5">
              <Info size={14} />
              Plan recommendations are never ranked by commission.
              <button className="text-amber-400 hover:underline font-medium ml-1">Read our full disclosure →</button>
            </p>
          </div>
        </div>
      </div>

      <div className="grid grid-cols-2 sm:grid-cols-4 gap-4">
        {[
          { label: "Call Member Services", icon: Phone, color: "bg-blue-50 border-blue-200 text-blue-800 hover:bg-blue-100" },
          { label: "My Claims History", icon: FileText, color: "bg-emerald-50 border-emerald-200 text-emerald-800 hover:bg-emerald-100" },
          { label: "Find In-Network Doctors", icon: Heart, color: "bg-red-50 border-red-200 text-red-800 hover:bg-red-100" },
          { label: "Prescription Tracker", icon: Activity, color: "bg-purple-50 border-purple-200 text-purple-800 hover:bg-purple-100" },
        ].map((action) => {
          const Icon = action.icon;
          return (
            <button key={action.label} className={`border-2 rounded-xl p-4 flex flex-col items-center gap-2 text-center transition-all active:scale-95 ${action.color}`}>
              <Icon size={24} />
              <span className="text-sm font-bold leading-tight">{action.label}</span>
            </button>
          );
        })}
      </div>
    </div>
  );
}

/* ─── ROOT ──────────────────────────────────────────────── */
function AARPLifeSync() {
  const [activeTab, setActiveTab] = useState("feed");
  const [mobileOpen, setMobileOpen] = useState(false);

  return (
    <div className="min-h-screen bg-slate-50 font-sans">
      <NavBar active={activeTab} setActive={setActiveTab} mobileOpen={mobileOpen} setMobileOpen={setMobileOpen} />
      <main className="pb-12">
        {activeTab === "feed" && <FeedScreen />}
        {activeTab === "community" && <CommunityScreen />}
        {activeTab === "hub" && <HubScreen />}
      </main>
      <footer className="bg-slate-900 text-slate-400 text-sm py-6 px-4">
        <div className="max-w-7xl mx-auto flex flex-col sm:flex-row items-center justify-between gap-3">
          <p>© 2026 AARP. All rights reserved. AARP Now Personalized — Beta.</p>
          <div className="flex items-center gap-4">
            <button className="hover:text-white transition-colors">Privacy</button>
            <button className="hover:text-white transition-colors">Medicare Disclosure</button>
            <button className="hover:text-white transition-colors">Accessibility</button>
            <span className="hidden sm:inline-block text-slate-600">|</span>
            <PoweredByBadge className="text-slate-500" />
          </div>
        </div>
      </footer>
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<AARPLifeSync />);
