import React, { useState, useEffect, useRef, useContext, createContext } from 'react'
import { motion, useTransform, useScroll, AnimatePresence } from 'framer-motion'
import {
  ArrowRight,
  Backpack,
  CheckCircle2,
  Globe,
  Heart,
  Mail,
  MapPin,
  Phone,
  Shirt,
  Sparkles,
  Star,
  Users,
  Building2,
  BookOpenText,
  Quote,
  FileText,
  X,
  ExternalLink,
  DollarSign,
  Shield,
  Award,
  Settings,
  UserCheck,
  School,
  ClipboardList,
  Calendar,
  FileCheck,
  AlertCircle,
  Home as HomeIcon,
  CreditCard,
  Package,
  Truck,
  Plus,
  Lock,
  Database,
  Check,
  Clock,
  Bell,
  BellRing,
  BarChart3,
  TrendingUp,
  Languages,
  Brain,
  Cpu,
  Download,
  WifiOff,
  ChevronDown,
  Eye,
  Zap,
  Target,
  Activity,
} from 'lucide-react'

// Phase 3: AI Components
import AIAssistancePortal from './components/AIAssistancePortal'

// Phase 3B: Enterprise Components
import AdvancedAnalyticsDashboard from './components/AdvancedAnalyticsDashboard'
import MobileVolunteerApp from './components/MobileVolunteerApp'
import StaffTrainingDashboard from './components/StaffTrainingDashboard'
import MimChatAgent from './components/MimChatAgent'

// Phase 4: Extracted Components
import { Navigation } from './components/Navigation'
import { Footer } from './components/Footer'
import { BrandAssetsPage } from './pages/BrandPage'
import {
  AboutPage,
  ContactPage,
  EventsPage,
  MissionPage,
  StoriesIntroBlock,
  WhatWeDoPage,
} from './pages/foundation'
import { AwarenessCampaigns } from './components/home/AwarenessCampaigns'
import { CommunityGallery } from './components/home/CommunityGallery'
import { WhoWeServe } from './components/home/WhoWeServe'
import { COMMUNITY_PHOTOS, HOME_TESTIMONIAL, HOW_IT_WORKS, SITE, WHAT_WE_DO } from './content/siteContent'

/**
 * Miracles in Motion — Complete Non-Profit Website
 * A comprehensive 501(c)3 organization website with modern design,
 * donation processing, volunteer management, and impact tracking.
 */

/* ===================== Phase 2: Enhanced Context Systems ===================== */

// Notification System Context
const NotificationContext = createContext<NotificationContextType | null>(null)

function NotificationProvider({ children }: { children: React.ReactNode }) {
  const [notifications, setNotifications] = useState<Notification[]>([])

  const addNotification = (notif: Omit<Notification, 'id' | 'timestamp' | 'read'>) => {
    const newNotification: Notification = {
      ...notif,
      id: Math.random().toString(36),
      timestamp: new Date(),
      read: false
    }
    setNotifications(prev => [newNotification, ...prev])
    
    // Auto-remove success notifications after 5 seconds
    if (notif.type === 'success') {
      setTimeout(() => {
        setNotifications(prev => prev.filter(n => n.id !== newNotification.id))
      }, 5000)
    }
  }

  const markAsRead = (id: string) => {
    setNotifications(prev => 
      prev.map(n => n.id === id ? { ...n, read: true } : n)
    )
  }

  const clearAll = () => setNotifications([])
  const unreadCount = notifications.filter(n => !n.read).length

  return (
    <NotificationContext.Provider value={{ 
      notifications, 
      addNotification, 
      markAsRead, 
      clearAll, 
      unreadCount 
    }}>
      {children}
    </NotificationContext.Provider>
  )
}

function useNotifications() {
  const context = useContext(NotificationContext)
  if (!context) throw new Error('useNotifications must be used within NotificationProvider')
  return context
}

// Language/Internationalization Context
const LanguageContext = createContext<{
  currentLanguage: Language
  languages: Language[]
  changeLanguage: (code: string) => void
  t: (key: string) => string
} | null>(null)

const languages: Language[] = [
  { code: 'en', name: 'English', nativeName: 'English', flag: '🇺🇸' },
  { code: 'es', name: 'Spanish', nativeName: 'Español', flag: '🇪🇸' },
  { code: 'fr', name: 'French', nativeName: 'Français', flag: '🇫🇷' }
]

const translations: Translations = {
  'nav.home': { en: 'Home', es: 'Inicio', fr: 'Accueil' },
  'nav.donate': { en: 'Donate', es: 'Donar', fr: 'Faire un don' },
  'nav.volunteer': { en: 'Volunteer', es: 'Voluntario', fr: 'Bénévole' },
  'hero.title': { 
    en: 'Restoring hope through compassion, community, and faith',
    es: 'Equipando a los niños para el éxito: útiles escolares, ropa y más',
    fr: 'Équiper les enfants pour réussir — fournitures scolaires, vêtements et plus'
  },
  'donate.title': { en: 'Donate Now', es: 'Donar Ahora', fr: 'Faire un don maintenant' },
  'impact.families': { en: 'Families Supported', es: 'Familias Apoyadas', fr: 'Familles Soutenues' }
}

function LanguageProvider({ children }: { children: React.ReactNode }) {
  const [currentLanguage, setCurrentLanguage] = useState<Language>(() => {
    const saved = localStorage.getItem('mim_language')
    if (saved) {
      return languages.find(l => l.code === saved) || languages[0]
    }
    return languages[0]
  })

  const changeLanguage = (code: string) => {
    const language = languages.find(l => l.code === code)
    if (language) {
      setCurrentLanguage(language)
      localStorage.setItem('mim_language', code)
      trackEvent('language_changed', { from: currentLanguage.code, to: code })
    }
  }

  const t = (key: string): string => {
    return translations[key]?.[currentLanguage.code] || key
  }

  return (
    <LanguageContext.Provider value={{ currentLanguage, languages, changeLanguage, t }}>
      {children}
    </LanguageContext.Provider>
  )
}

function useLanguage() {
  const context = useContext(LanguageContext)
  if (!context) throw new Error('useLanguage must be used within LanguageProvider')
  return context
}

/* ===================== Authentication Context ===================== */
const AuthContext = createContext<AuthContextType | null>(null)

export function AuthProvider({ children }: { children: React.ReactNode }) {
  const [user, setUser] = useState<AuthUser | null>(null)
  const [isLoading, setIsLoading] = useState(false)

  const login = async (email: string, password: string): Promise<boolean> => {
    setIsLoading(true)
    try {
      // Simulate authentication - in production, this would call your API
      await new Promise(resolve => setTimeout(resolve, 1000))
      
      // Simple demo validation (in production, validate against secure backend)
      if (password.length < 3) {
        return false
      }
      
      // Mock user data based on email domain
      const mockUser: AuthUser = {
        id: Math.random().toString(36),
        email,
        role: email.includes('admin') ? 'admin' : email.includes('volunteer') ? 'volunteer' : 'resource',
        name: email.split('@')[0].replace('.', ' ').replace(/\b\w/g, l => l.toUpperCase()),
        lastLogin: new Date(),
        permissions: email.includes('admin') ? ['read', 'write', 'delete', 'manage'] : ['read', 'write']
      }
      
      setUser(mockUser)
      localStorage.setItem('mim_user', JSON.stringify(mockUser))
      return true
    } catch (error) {
      console.error('Login failed:', error)
      return false
    } finally {
      setIsLoading(false)
    }
  }

  const logout = () => {
    setUser(null)
    localStorage.removeItem('mim_user')
  }

  // Restore user session on app load
  useEffect(() => {
    const savedUser = localStorage.getItem('mim_user')
    if (savedUser) {
      try {
        setUser(JSON.parse(savedUser))
      } catch (error) {
        localStorage.removeItem('mim_user')
      }
    }
  }, [])

  return (
    <AuthContext.Provider value={{ user, login, logout, isLoading }}>
      {children}
    </AuthContext.Provider>
  )
}

function useAuth() {
  const context = useContext(AuthContext)
  if (!context) {
    throw new Error('useAuth must be used within AuthProvider')
  }
  return context
}



/* ===================== Enhanced Impact Calculator ===================== */
function calculateDonationImpact(amount: number): ImpactCalculation {
  const families = Math.floor(amount / 50)
  const students = families // legacy display fields — shown as families served
  const backpacks = Math.floor(amount / 40)
  const clothing = Math.floor(amount / 45)
  const emergency = Math.floor(amount / 75)

  return {
    students,
    families,
    backpacks,
    clothing,
    emergency,
    annual: {
      students: Math.floor((amount * 12) / 50),
      families: Math.floor((amount * 12) / 50),
      totalImpact: `${Math.floor((amount * 12) / 50)} families supported annually`,
    },
  }
}

/* ===================== Analytics Tracking ===================== */
function trackEvent(eventName: string, properties: Record<string, any> = {}) {
  // In production, integrate with Google Analytics, Mixpanel, or similar
  if (typeof window !== 'undefined' && (window as any).gtag) {
    (window as any).gtag('event', eventName, properties)
  }
  console.log(`Analytics: ${eventName}`, properties)
}

/* ===================== Phase 2: Payment Integration System ===================== */
const paymentMethods: PaymentMethod[] = [
  {
    id: 'stripe',
    type: 'card',
    name: 'Credit/Debit Card',
    icon: '💳',
    description: 'Secure payment via Stripe',
    processingFee: 2.9
  },
  {
    id: 'paypal',
    type: 'paypal',
    name: 'PayPal',
    icon: '🌐',
    description: 'Pay with PayPal account',
    processingFee: 2.9
  },
  {
    id: 'venmo',
    type: 'venmo',
    name: 'Venmo',
    icon: '📱',
    description: 'Quick mobile payment',
    processingFee: 1.9
  },
  {
    id: 'bank',
    type: 'bank',
    name: 'Bank Transfer',
    icon: '🏦',
    description: 'Direct bank transfer (ACH)',
    processingFee: 0.8
  }
]

class PaymentProcessor {
  static async processPayment(amount: number, method: PaymentMethod, _donorInfo: any): Promise<{
    success: boolean
    transactionId?: string
    error?: string
  }> {
    // Simulate payment processing
    await new Promise(resolve => setTimeout(resolve, 2000))
    
    // Simulate different success rates by payment method
    const successRate = method.type === 'bank' ? 0.95 : method.type === 'card' ? 0.92 : 0.98
    const success = Math.random() < successRate
    
    if (success) {
      const transactionId = `txn_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`
      
      // Track successful payment
      trackEvent('donation_completed', {
        amount,
        method: method.id,
        transactionId,
        processingFee: amount * (method.processingFee / 100)
      })
      
      return { success: true, transactionId }
    } else {
      const errors = [
        'Payment declined by bank',
        'Insufficient funds',
        'Invalid card information',
        'Network timeout - please try again'
      ]
      return { success: false, error: errors[Math.floor(Math.random() * errors.length)] }
    }
  }

  static calculateFees(amount: number, method: PaymentMethod) {
    const fee = amount * (method.processingFee / 100)
    return {
      fee: Math.round(fee * 100) / 100,
      net: Math.round((amount - fee) * 100) / 100,
      feePercentage: method.processingFee
    }
  }
}

/* ===================== Advanced Analytics System ===================== */
function useAnalytics() {
  const [analyticsData, setAnalyticsData] = useState<AnalyticsData>(() => ({
    pageViews: [
      { page: 'Home', views: 2847, trend: 12.5 },
      { page: 'Donate', views: 1203, trend: 8.3 },
      { page: 'Volunteer', views: 856, trend: -2.1 },
      { page: 'Stories', views: 645, trend: 15.8 },
      { page: 'About', views: 432, trend: 5.2 }
    ],
    donationMetrics: { amount: 45280, count: 186, recurring: 67 },
    userEngagement: { sessions: 3241, avgDuration: 185, bounceRate: 0.34 },
    conversionRates: { donation: 0.078, volunteer: 0.032, contact: 0.156 }
  }))

  const refreshAnalytics = () => {
    // Simulate real-time data updates
    setAnalyticsData(prev => ({
      ...prev,
      pageViews: prev.pageViews.map(pv => ({
        ...pv,
        views: pv.views + Math.floor(Math.random() * 10),
        trend: (Math.random() - 0.5) * 20
      })),
      donationMetrics: {
        ...prev.donationMetrics,
        amount: prev.donationMetrics.amount + Math.floor(Math.random() * 500),
        count: prev.donationMetrics.count + Math.floor(Math.random() * 3)
      }
    }))
  }

  useEffect(() => {
    const interval = setInterval(refreshAnalytics, 30000) // Update every 30 seconds
    return () => clearInterval(interval)
  }, [])

  return { analyticsData, refreshAnalytics }
}

/* ===================== PWA Features ===================== */
function usePWA() {
  const [isOnline, setIsOnline] = useState(navigator.onLine)
  const [installPrompt, setInstallPrompt] = useState<any>(null)
  const [isInstallable, setIsInstallable] = useState(false)

  useEffect(() => {
    const handleOnline = () => setIsOnline(true)
    const handleOffline = () => setIsOnline(false)
    
    window.addEventListener('online', handleOnline)
    window.addEventListener('offline', handleOffline)

    // PWA Install Prompt
    const handleBeforeInstallPrompt = (e: any) => {
      e.preventDefault()
      setInstallPrompt(e)
      setIsInstallable(true)
    }

    window.addEventListener('beforeinstallprompt', handleBeforeInstallPrompt)

    return () => {
      window.removeEventListener('online', handleOnline)
      window.removeEventListener('offline', handleOffline)
      window.removeEventListener('beforeinstallprompt', handleBeforeInstallPrompt)
    }
  }, [])

  const installApp = async () => {
    if (!installPrompt) return false
    
    installPrompt.prompt()
    const { outcome } = await installPrompt.userChoice
    
    if (outcome === 'accepted') {
      trackEvent('pwa_installed')
      setInstallPrompt(null)
      setIsInstallable(false)
      return true
    }
    return false
  }

  return { isOnline, isInstallable, installApp }
}

/* ===================== SEO Meta Tags Component ===================== */
function SEOHead({ title, description, image }: { title?: string, description?: string, image?: string }) {
  useEffect(() => {
    // Update document title
    if (title) {
      document.title = `${title} | Miracles in Motion`
    }
    
    // Update meta description
    const metaDescription = document.querySelector('meta[name="description"]')
    if (description && metaDescription) {
      metaDescription.setAttribute('content', description)
    }
    
    // Update Open Graph tags
    const updateOGTag = (property: string, content: string) => {
      let tag = document.querySelector(`meta[property="${property}"]`)
      if (!tag) {
        tag = document.createElement('meta')
        tag.setAttribute('property', property)
        document.head.appendChild(tag)
      }
      tag.setAttribute('content', content)
    }
    
    updateOGTag('og:title', title || `${SITE.name} — ${SITE.brandMessage}`)
    updateOGTag('og:description', description || 'Faith-centered nonprofit bringing hope, outreach, emergency assistance, and wellness support to families in Los Angeles County.')
    updateOGTag('og:image', image || '/og-image.jpg')
    updateOGTag('og:type', 'website')
  }, [title, description, image])
  
  return null
}

/* ===================== Types ===================== */
interface IconProps {
  className?: string
}

interface AuthUser {
  id: string
  email: string
  role: 'admin' | 'volunteer' | 'resource'
  name: string
  lastLogin: Date
  permissions: string[]
}

interface AuthContextType {
  user: AuthUser | null
  login: (email: string, password: string) => Promise<boolean>
  logout: () => void
  isLoading: boolean
}

interface ImpactCalculation {
  students: number
  families: number
  backpacks: number
  clothing: number
  emergency: number
  annual: {
    students: number
    families: number
    totalImpact: string
  }
}

// Phase 2 Interfaces
interface Notification {
  id: string
  type: 'success' | 'info' | 'warning' | 'error'
  title: string
  message: string
  timestamp: Date
  read: boolean
  actions?: { label: string; action: () => void }[]
}

interface NotificationContextType {
  notifications: Notification[]
  addNotification: (notification: Omit<Notification, 'id' | 'timestamp' | 'read'>) => void
  markAsRead: (id: string) => void
  clearAll: () => void
  unreadCount: number
}

interface AnalyticsData {
  pageViews: { page: string; views: number; trend: number }[]
  donationMetrics: { amount: number; count: number; recurring: number }
  userEngagement: { sessions: number; avgDuration: number; bounceRate: number }
  conversionRates: { donation: number; volunteer: number; contact: number }
}

interface PaymentMethod {
  id: string
  type: 'card' | 'paypal' | 'venmo' | 'bank'
  name: string
  icon: string
  description: string
  processingFee: number
}

interface Language {
  code: string
  name: string
  nativeName: string
  flag: string
}

interface Translations {
  [key: string]: {
    [langCode: string]: string
  }
}

interface FeatureCardProps {
  icon: React.ComponentType<IconProps>
  title: string
  body: string
}

interface SectionHeaderProps {
  eyebrow?: string
  title: string
  subtitle?: string
}

interface CalloutProps {
  title: string
  body: string
  href: string
  accent: string
  icon: React.ComponentType<IconProps>
  index?: number
}

interface PageShellProps {
  title: string
  icon: React.ComponentType<IconProps>
  eyebrow?: string
  children: React.ReactNode
  cta?: React.ReactNode
}

interface CardProps {
  title: string
  icon: React.ComponentType<IconProps>
  children: React.ReactNode
}

interface PolicySectionProps {
  id: string
  title: string
  children: React.ReactNode
}

/* ===================== 3D Parallax Components ===================== */

// 3D Parallax Container Component
interface ParallaxContainerProps {
  children: React.ReactNode
  depth?: number
  className?: string
}

function ParallaxContainer({ children, depth = 1, className = '' }: ParallaxContainerProps) {
  const ref = useRef<HTMLDivElement>(null)
  const { scrollYProgress } = useScroll({
    target: ref,
    offset: ['start end', 'end start']
  })
  
  const y = useTransform(scrollYProgress, [0, 1], [0, -50 * depth])
  const rotateX = useTransform(scrollYProgress, [0, 1], [0, 5 * depth])
  const scale = useTransform(scrollYProgress, [0, 0.5, 1], [0.8, 1, 1.1])
  
  return (
    <motion.div
      ref={ref}
      style={{ y, rotateX, scale }}
      className={`transform-gpu ${className}`}
      initial={{ opacity: 0 }}
      whileInView={{ opacity: 1 }}
      viewport={{ once: true, margin: '-100px' }}
      transition={{ duration: 0.6, ease: 'easeOut' }}
    >
      {children}
    </motion.div>
  )
}

// Enhanced 3D Floating Particles Background
function FloatingParticles() {
  const particles = Array.from({ length: 20 }, (_, i) => i)
  
  return (
    <div className="absolute inset-0 overflow-hidden pointer-events-none">
      {particles.map((i) => {
        const size = Math.random() * 2 + 0.5
        const depth = Math.random() * 3 + 1
        return (
          <motion.div
            key={i}
            className="absolute rounded-full bg-gradient-to-br from-primary-300/8 to-secondary-300/8 backdrop-blur-sm"
            style={{
              width: `${size}px`,
              height: `${size}px`,
              left: `${Math.random() * 100}%`,
              top: `${Math.random() * 100}%`,
              transformStyle: 'preserve-3d'
            }}
            animate={{
              y: [-25, -100, -25],
              x: [-10, 10, -10],
              z: [0, depth * 15, 0],
              opacity: [0.2, 0.6, 0.2],
              scale: [0.9, 1.1, 0.9]
            }}
            transition={{
              duration: Math.random() * 18 + 10,
              repeat: Infinity,
              delay: Math.random() * 4,
              ease: "easeInOut"
            }}
          />
        )
      })}
    </div>
  )
}

// 3D Geometric Shapes Component
function Floating3DShapes() {
  const shapes = [
    { type: 'cube', color: 'from-primary-500/15 to-primary-600/15', size: 12 },
    { type: 'sphere', color: 'from-secondary-500/15 to-secondary-600/15', size: 16 },
    { type: 'pyramid', color: 'from-primary-400/15 to-secondary-500/15', size: 14 },
  ]
  
  return (
    <div className="absolute inset-0 overflow-hidden pointer-events-none">
      {shapes.map((shape, i) => Array.from({ length: 3 }, (_, j) => (
        <motion.div
          key={`${shape.type}-${i}-${j}`}
          className={`absolute bg-gradient-to-br ${shape.color} backdrop-blur-sm ${
            shape.type === 'cube' ? 'rounded-sm' :
            shape.type === 'sphere' ? 'rounded-full' : 'rounded-sm'
          }`}
          style={{
            width: `${shape.size}px`,
            height: `${shape.size}px`,
            left: `${(i * 30 + j * 15 + 10) % 90}%`,
            top: `${(i * 25 + j * 20 + 15) % 80}%`,
            transformStyle: 'preserve-3d',
            filter: 'blur(0.5px)'
          }}
          animate={{
            rotateX: [0, 360],
            rotateY: [0, 360],
            rotateZ: shape.type === 'pyramid' ? [0, 180, 360] : 0,
            z: [0, 60, 0],
            y: [-20, 20, -20]
          }}
          transition={{
            duration: 20 + i * 5,
            repeat: Infinity,
            delay: j * 2,
            ease: "linear"
          }}
        />
      ))
      )}
    </div>
  )
}

/* ===================== Router ===================== */
export function useHashRoute() {
  const parse = () => (window.location.hash?.slice(1) || "/")
  const [route, setRoute] = useState(parse())
  
  useEffect(() => {
    const onHash = () => setRoute(parse())
    window.addEventListener("hashchange", onHash)
    return () => window.removeEventListener("hashchange", onHash)
  }, [])
  
  return route
}

/* ===================== Legacy Router Component (Repurposed) ===================== */


/* ===================== Shared UI ===================== */
function SkipToContent() {
  return (
    <a
      href="#content"
      className="sr-only focus:not-sr-only focus:fixed focus:left-3 focus:top-3 focus:z-[100] focus:rounded-xl focus:bg-white/90 focus:px-4 focus:py-2 focus:text-sm focus:shadow-xl dark:focus:bg-black/80"
    >
      Skip to content
    </a>
  )
}

// Nav component has been extracted to ./components/Navigation.tsx

// LogoMark component has been extracted to ./components/ui/LogoMark.tsx

/* ===================== Home Page ===================== */
function HomePage() {
  return (
    <>
      <Hero />
      <WhoWeServe />
      <AwarenessCampaigns />
      <PartnerMarquee />
      <Programs />
      <CommunityGallery />
      <Impact />
      <HowItWorks />
      <Testimonial />
      <GetInvolved />
      <CTA />
    </>
  )
}

function Hero() {
  const containerRef = useRef<HTMLDivElement>(null)
  const { scrollYProgress } = useScroll({
    target: containerRef,
    offset: ['start start', 'end start']
  })
  
  const backgroundY = useTransform(scrollYProgress, [0, 1], ['0%', '30%'])
  
  return (
    <section ref={containerRef} className="hero-section relative isolate overflow-hidden">
      {/* Enhanced 3D Background Layers */}
      <motion.div 
        className="absolute inset-0 bg-gradient-to-br from-[var(--mim-cream)] via-white to-secondary-50/40 dark:from-gray-900/30 dark:via-gray-800/30 dark:to-gray-900/30"
        style={{ y: backgroundY }}
      >
        <FloatingParticles />
        
        {/* Animated depth gradient */}
        <motion.div
          className="absolute inset-0 opacity-20"
          animate={{
            background: [
              "radial-gradient(800px 400px at 20% 30%, rgba(147, 51, 234, 0.1), transparent)",
              "radial-gradient(600px 300px at 80% 60%, rgba(59, 130, 246, 0.1), transparent)",
              "radial-gradient(700px 350px at 50% 20%, rgba(147, 51, 234, 0.1), transparent)"
            ]
          }}
          transition={{ duration: 15, repeat: Infinity, ease: "easeInOut" }}
        />
      </motion.div>
      
      <motion.div 
        className="absolute inset-0"
        style={{ y: useTransform(scrollYProgress, [0, 1], ['0%', '30%']) }}
      >
        <Floating3DShapes />
      </motion.div>
      
      <motion.div 
        className="mx-auto grid max-w-7xl items-start gap-10 px-4 pb-14 pt-6 sm:px-6 sm:pt-8 lg:grid-cols-12 lg:gap-10 lg:px-8 lg:pb-16 lg:pt-10 relative z-10"
      >
        <div className="lg:col-span-7">
          <ParallaxContainer depth={0.3}>
            <p className="text-sm font-medium tracking-wide text-secondary-700 dark:text-secondary-300">
              {SITE.tagline}
            </p>
            <motion.h1
              initial={{ opacity: 0, y: 12 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ duration: 0.6 }}
              className="mt-3 text-balance font-serif text-4xl font-bold tracking-tight sm:text-5xl md:text-6xl transform-gpu"
              style={{ transformStyle: 'preserve-3d' }}
            >
              {SITE.brandMessage}
            </motion.h1>
          <p className="mt-5 max-w-xl text-lg leading-7 text-neutral-700 dark:text-neutral-300">
            Bringing hope, compassion, and support to individuals and families facing life’s most difficult moments — through faith, community outreach, and compassionate care in Los Angeles County.
          </p>
          <div className="mt-8 flex flex-wrap items-center gap-3">
            <Magnetic>
              <a href="#/donate" className="btn-primary">
                <Heart className="mr-2 h-4 w-4" /> Donate now
              </a>
            </Magnetic>
            <a href="#/volunteers" className="btn-secondary">
              Volunteer <ArrowRight className="ml-1 h-4 w-4" />
            </a>
            <a href="#/about" className="rounded-full border border-transparent px-4 py-2 text-sm text-neutral-700 underline-offset-4 hover:underline dark:text-neutral-300">
              About us
            </a>
          </div>
          <ul className="mt-8 flex flex-wrap items-center gap-x-6 gap-y-2 text-sm text-neutral-600 dark:text-neutral-400">
            <li className="flex items-center gap-2"><CheckCircle2 className="h-4 w-4 text-secondary-600"/> {SITE.legalStatus}</li>
            <li className="flex items-center gap-2"><CheckCircle2 className="h-4 w-4 text-secondary-600"/> EIN {SITE.ein}</li>
            <li className="flex items-center gap-2"><CheckCircle2 className="h-4 w-4 text-secondary-600"/> Los Angeles County</li>
          </ul>
          </ParallaxContainer>
        </div>
        
        <div className="lg:col-span-5">
          <ParallaxContainer depth={0.5} className="relative">
            <HeroShowcase />
          </ParallaxContainer>
        </div>
      </motion.div>
      
      {/* 3D Scroll Indicator */}
      <motion.div 
        className="absolute bottom-12 left-1/2 -translate-x-1/2 hidden lg:block z-20"
        animate={{
          y: [0, 8, 0],
          rotateX: [0, 10, 0]
        }}
        transition={{ duration: 2.5, repeat: Infinity, ease: "easeInOut" }}
        style={{ transformStyle: 'preserve-3d' }}
      >
        <div className="flex flex-col items-center gap-2 text-neutral-500 dark:text-neutral-400">
          <span className="text-xs font-medium opacity-75">Scroll to explore</span>
          <motion.div
            animate={{ y: [0, 4, 0] }}
            transition={{ duration: 1.8, repeat: Infinity, ease: "easeInOut" }}
          >
            <ArrowRight className="h-4 w-4 rotate-90 opacity-60" />
          </motion.div>
        </div>
      </motion.div>
      
      {/* Enhanced 3D Icon Elements with More Visibility */}
      <div className="absolute inset-0 pointer-events-none z-0">
        {/* Top layer - subtle and non-interfering */}
        <motion.div
          className="absolute top-1/4 left-[5%] text-primary-300/40 dark:text-primary-600/40 hidden xl:block"
          animate={{ 
            y: [-12, 12, -12],
            rotateY: [0, 360],
            z: [0, 30, 0],
            scale: [0.9, 1.1, 0.9]
          }}
          transition={{ duration: 8, repeat: Infinity, ease: "easeInOut" }}
          style={{ 
            transformStyle: 'preserve-3d',
            filter: 'drop-shadow(0 2px 4px rgba(0,0,0,0.05))'
          }}
        >
          <Heart className="h-6 w-6" />
        </motion.div>
        
        {/* Additional floating heart */}
        <motion.div
          className="absolute top-1/3 right-1/4 text-rose-300/70 dark:text-rose-400/70 hidden xl:block"
          animate={{ 
            y: [10, -10, 10],
            rotateZ: [-15, 15, -15],
            scale: [1, 1.3, 1]
          }}
          transition={{ duration: 4, repeat: Infinity, ease: "easeInOut", delay: 1 }}
          style={{ transformStyle: 'preserve-3d' }}
        >
          <Heart className="h-5 w-5" />
        </motion.div>
        
        {/* Right side - subtle sparkles */}
        <motion.div
          className="absolute top-1/3 right-[8%] text-secondary-300/40 dark:text-secondary-600/40 hidden xl:block"
          animate={{ 
            y: [15, -15, 15],
            rotateX: [0, 180, 360],
            z: [0, 25, 0],
            scale: [0.95, 1.2, 0.95]
          }}
          transition={{ duration: 7, repeat: Infinity, ease: "easeInOut", delay: 1.5 }}
          style={{ 
            transformStyle: 'preserve-3d',
            filter: 'drop-shadow(0 1px 2px rgba(0,0,0,0.05))'
          }}
        >
          <Sparkles className="h-5 w-5" />
        </motion.div>
        
        {/* Additional floating sparkle */}
        <motion.div
          className="absolute top-1/2 right-[20%] text-yellow-300/60 dark:text-yellow-400/60 hidden lg:block"
          animate={{ 
            rotate: [0, 360],
            y: [-8, 8, -8],
            scale: [0.7, 1.1, 0.7]
          }}
          transition={{ duration: 8, repeat: Infinity, ease: "easeInOut", delay: 3 }}
        >
          <Sparkles className="h-4 w-4" />
        </motion.div>
        
        {/* Bottom area - enhanced users icon */}
        <motion.div
          className="absolute bottom-1/4 left-[15%] text-primary-400/70 dark:text-primary-500/70 hidden lg:block"
          animate={{ 
            y: [-12, 12, -12],
            rotateZ: [0, 180, 360],
            z: [0, 45, 0],
            scale: [0.8, 1.2, 0.8]
          }}
          transition={{ duration: 7, repeat: Infinity, ease: "easeInOut", delay: 3 }}
          style={{ 
            transformStyle: 'preserve-3d',
            filter: 'drop-shadow(0 3px 6px rgba(0,0,0,0.1))'
          }}
        >
          <Users className="h-6 w-6" />
        </motion.div>
        
        {/* Additional community icon */}
        <motion.div
          className="absolute bottom-1/3 right-[8%] text-blue-300/60 dark:text-blue-400/60 hidden xl:block"
          animate={{ 
            x: [-5, 5, -5],
            y: [8, -8, 8],
            rotateY: [0, 180, 360]
          }}
          transition={{ duration: 9, repeat: Infinity, ease: "easeInOut", delay: 4.5 }}
        >
          <Users className="h-4 w-4" />
        </motion.div>
        
        {/* Additional subtle elements */}
        <motion.div
          className="absolute top-1/2 right-[8%] text-primary-100/40 dark:text-primary-800/40 hidden xl:block"
          animate={{ 
            rotate: [0, 360],
            scale: [0.8, 1.2, 0.8],
            z: [0, 20, 0]
          }}
          transition={{ duration: 12, repeat: Infinity, ease: "easeInOut", delay: 4 }}
          style={{ transformStyle: 'preserve-3d' }}
        >
          <Star className="h-4 w-4" />
        </motion.div>
      </div>
    </section>
  )
}

function HeroShowcase() {
  const featured = COMMUNITY_PHOTOS.slice(0, 4)
  return (
    <div className="relative mx-auto max-w-sm lg:max-w-md xl:max-w-lg">
      <div className="absolute -inset-6 -z-10 rounded-3xl bg-gradient-to-tr from-primary-500/15 via-secondary-500/15 to-secondary-600/15 blur-2xl" />
      <div className="grid grid-cols-2 gap-3 sm:gap-4">
        {featured.map((photo, index) => (
          <img
            key={photo.src}
            src={photo.src}
            alt={photo.alt}
            width={600}
            height={800}
            fetchPriority={index === 0 ? 'high' : 'auto'}
            loading={index === 0 ? 'eager' : 'lazy'}
            decoding="async"
            className={`rounded-2xl border border-white/60 object-cover shadow-lg dark:border-white/10 ${
              index === 0 ? 'col-span-2 aspect-[16/10] w-full' : 'aspect-[4/5] w-full'
            }`}
          />
        ))}
      </div>
    </div>
  )
}

function PartnerMarquee() {
  const partners =
    'Los Angeles County • Faith communities • Outreach volunteers • Crisis & fire relief • Domestic violence advocacy • Youth & family support • Resource navigation'
  return (
    <section aria-label="Community partners" className="relative">
      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        <div className="card">
          <div className="flex items-center gap-2 px-2 text-xs uppercase tracking-wider text-neutral-500 dark:text-neutral-400">
            <Sparkles className="h-4 w-4" /> Serving our community together
          </div>
          <div className="mt-2 overflow-hidden">
            <div className="animate-marquee whitespace-nowrap py-2 text-neutral-600 dark:text-neutral-300">
              {Array.from({ length: 2 }).map((_, i) => (
                <span key={i} className="mx-6 inline-flex items-center gap-2 text-sm opacity-80">
                  <span className="h-2 w-2 rounded-full bg-gradient-to-r from-primary-500 to-secondary-600" />
                  {partners}
                </span>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}

function Programs() {
  const icons = [Users, Heart, HomeIcon, Globe, Shield, Star] as const
  const items = WHAT_WE_DO.slice(0, 3).map((p, idx) => ({
    icon: icons[idx] ?? Heart,
    title: p.title,
    body: p.body,
  }))
  
  return (
    <section id="programs" className="relative py-20 overflow-hidden">
      {/* Background 3D Elements */}
      <div className="absolute inset-0 pointer-events-none">
        <motion.div
          className="absolute top-10 right-10 w-32 h-32 bg-gradient-to-br from-primary-100/20 to-secondary-100/20 rounded-full blur-xl"
          animate={{
            y: [-20, 20, -20],
            x: [-10, 10, -10],
            scale: [0.8, 1.1, 0.8]
          }}
          transition={{ duration: 15, repeat: Infinity, ease: "easeInOut" }}
        />
        <motion.div
          className="absolute bottom-20 left-10 w-24 h-24 bg-gradient-to-br from-secondary-100/20 to-primary-100/20 rounded-full blur-xl"
          animate={{
            y: [15, -15, 15],
            x: [8, -8, 8],
            scale: [1, 0.9, 1]
          }}
          transition={{ duration: 12, repeat: Infinity, ease: "easeInOut", delay: 2 }}
        />
      </div>
      
      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 relative z-10">
        <ParallaxContainer depth={0.2}>
          <SectionHeader eyebrow="What we do" title="Compassionate support when it matters most" subtitle="Outreach, advocacy, emergency assistance, and resource navigation for vulnerable populations." />
        </ParallaxContainer>
        <div className="mt-10 grid gap-6 md:grid-cols-3">
          {items.map((i, idx) => (
            <ParallaxContainer key={idx} depth={0.3 + idx * 0.1}>
              <FeatureCard icon={i.icon} title={i.title} body={i.body} />
            </ParallaxContainer>
          ))}
        </div>
        <div className="mt-10 text-center">
          <a href="#/what-we-do" className="btn-secondary">
            See all programs <ArrowRight className="ml-1 inline h-4 w-4" />
          </a>
        </div>
      </div>
    </section>
  )
}

function FeatureCard({ icon: Icon, title, body }: FeatureCardProps) {
  return (
    <motion.div 
      className="group card card-hover cursor-pointer"
      whileHover={{
        scale: 1.02,
        rotateY: 5,
        z: 30,
        boxShadow: "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)"
      }}
      initial={{ rotateY: 0, z: 0 }}
      style={{ transformStyle: 'preserve-3d' }}
      transition={{ duration: 0.3, ease: "easeOut" }}
    >
      <motion.div 
        className="absolute left-1/2 top-0 -z-10 h-40 w-40 -translate-x-1/2 rounded-full bg-gradient-to-br from-primary-500/20 to-secondary-600/20 blur-2xl" 
        whileHover={{ scale: 1.2, opacity: 0.8 }}
        transition={{ duration: 0.3 }}
      />
      <div className="flex items-center gap-3">
        <motion.div 
          className="grid h-10 w-10 place-items-center rounded-xl bg-gradient-to-br from-primary-500 to-secondary-600 text-white shadow"
          whileHover={{ 
            scale: 1.1, 
            rotateY: 180,
            boxShadow: "0 8px 16px rgba(0,0,0,0.2)"
          }}
          style={{ transformStyle: 'preserve-3d' }}
          transition={{ duration: 0.4 }}
        >
          <Icon className="h-5 w-5" />
        </motion.div>
        <div className="font-semibold tracking-tight">{title}</div>
      </div>
      <p className="mt-3 text-sm leading-6 text-neutral-700 dark:text-neutral-300">{body}</p>
      <a
        href="#/what-we-do"
        className="mt-5 inline-flex items-center text-sm text-primary-700 transition hover:underline dark:text-primary-300"
      >
        Learn more <ArrowRight className="ml-1 h-4 w-4" />
      </a>
    </motion.div>
  )
}

function Impact() {
  const pillars = [
    { label: "Community outreach", desc: "Direct support for underserved families" },
    { label: "Emergency assistance", desc: "Crisis, fire, and disaster relief" },
    { label: "Advocacy & navigation", desc: "Connecting people to hope and resources" },
    { label: "Faith & restoration", desc: "Dignity, empathy, and compassionate care" },
  ]
  
  return (
    <section id="impact" className="relative py-24 overflow-hidden">
      {/* Enhanced Background Elements */}
      <div className="absolute inset-0 pointer-events-none">
        <motion.div
          className="absolute top-1/4 left-0 w-40 h-40 bg-gradient-to-br from-primary-200/10 via-secondary-200/10 to-primary-300/10 rounded-full blur-2xl"
          animate={{
            x: [-50, 50, -50],
            y: [-25, 25, -25],
            scale: [0.8, 1.2, 0.8],
            rotate: [0, 180, 360]
          }}
          transition={{ duration: 20, repeat: Infinity, ease: "easeInOut" }}
        />
        <motion.div
          className="absolute bottom-1/4 right-0 w-56 h-56 bg-gradient-to-bl from-secondary-200/10 via-primary-200/10 to-secondary-300/10 rounded-full blur-2xl"
          animate={{
            x: [30, -30, 30],
            y: [20, -20, 20],
            scale: [1, 0.9, 1],
            rotate: [360, 180, 0]
          }}
          transition={{ duration: 25, repeat: Infinity, ease: "easeInOut", delay: 3 }}
        />
      </div>
      
      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 relative z-10">
        <ParallaxContainer depth={0.2}>
          <SectionHeader eyebrow="Our heart" title="Healing begins when people feel seen" subtitle={SITE.closingLine} />
        </ParallaxContainer>
        
        <div className="mt-12 grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
          {pillars.map((s, i) => (
            <ParallaxContainer key={i} depth={0.3 + i * 0.05}>
              <motion.div
                initial={{ opacity: 0, y: 30 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true }}
                transition={{ duration: 0.8, delay: i * 0.15 }}
                className="card h-full text-center"
              >
                <div className="font-semibold tracking-tight text-primary-800 dark:text-primary-100">{s.label}</div>
                <p className="mt-2 text-sm text-neutral-600 dark:text-neutral-400">{s.desc}</p>
              </motion.div>
            </ParallaxContainer>
          ))}
        </div>
        <div className="mt-10 grid items-center gap-6 rounded-2xl border border-secondary-300/30 bg-secondary-50/50 p-6 sm:grid-cols-2 dark:border-secondary-700/30 dark:bg-secondary-900/20">
          <div className="text-sm text-primary-900 dark:text-primary-100">
            <div className="font-medium">Your gift restores hope</div>
            <p className="mt-3 leading-relaxed">
              Donations support outreach, emergency assistance, wellness support, and resource navigation for women, families, survivors, and communities in crisis throughout Los Angeles County.
            </p>
          </div>
          <div className="flex flex-wrap items-center justify-end gap-3">
            <a href="#/donate" className="btn-primary">
              Donate <ArrowRight className="ml-2 h-4 w-4" />
            </a>
            <a href="#/stories" className="btn-secondary">
              Stories of hope
            </a>
          </div>
        </div>
      </div>
    </section>
  )
}

function HowItWorks() {
  const steps = HOW_IT_WORKS.steps.map((s) => ({ title: s.title, body: s.body }))
  
  return (
    <section id="how" className="relative py-24 overflow-hidden">
      {/* Animated Background Elements */}
      <div className="absolute inset-0 pointer-events-none">
        <motion.div
          className="absolute top-16 right-1/4 w-3 h-3 bg-primary-300/40 dark:bg-primary-600/40 rounded-full"
          animate={{
            y: [-30, 30, -30],
            x: [-15, 15, -15],
            scale: [0.5, 1.5, 0.5],
            opacity: [0.3, 0.8, 0.3]
          }}
          transition={{ duration: 8, repeat: Infinity, ease: "easeInOut" }}
        />
        <motion.div
          className="absolute bottom-20 left-1/3 w-2 h-2 bg-secondary-300/40 dark:bg-secondary-600/40 rounded-full"
          animate={{
            y: [20, -20, 20],
            x: [10, -10, 10],
            scale: [0.8, 1.2, 0.8],
            opacity: [0.4, 0.9, 0.4]
          }}
          transition={{ duration: 6, repeat: Infinity, ease: "easeInOut", delay: 2 }}
        />
        <motion.div
          className="absolute top-1/3 left-1/5 w-4 h-4 bg-gradient-to-br from-primary-200/30 to-secondary-200/30 rounded-full blur-sm"
          animate={{
            rotate: [0, 360],
            scale: [0.6, 1.1, 0.6],
            y: [-10, 10, -10]
          }}
          transition={{ duration: 12, repeat: Infinity, ease: "easeInOut", delay: 4 }}
        />
      </div>
      
      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 relative z-10">
        <ParallaxContainer depth={0.2}>
          <SectionHeader eyebrow={HOW_IT_WORKS.eyebrow} title={HOW_IT_WORKS.title} subtitle={HOW_IT_WORKS.subtitle} />
        </ParallaxContainer>
        <div className="mt-10 grid gap-6 md:grid-cols-2">
          <ParallaxContainer depth={0.3}>
            <motion.div 
              className="card"
              initial={{ opacity: 0, rotateY: -15 }}
              whileInView={{ opacity: 1, rotateY: 0 }}
              viewport={{ once: true }}
              transition={{ duration: 0.8 }}
              style={{ transformStyle: 'preserve-3d' }}
            >
              <ol className="relative space-y-6">
                {steps.map((s, i) => (
                  <motion.li 
                    key={i} 
                    className="relative pl-8"
                    initial={{ opacity: 0, x: -20 }}
                    whileInView={{ opacity: 1, x: 0 }}
                    viewport={{ once: true }}
                    transition={{ duration: 0.6, delay: i * 0.15 }}
                    whileHover={{ 
                      x: 5,
                      transition: { duration: 0.2 }
                    }}
                  >
                    <motion.div 
                      className="absolute left-0 top-1 grid h-6 w-6 place-items-center rounded-full bg-gradient-to-br from-primary-500 to-secondary-600 text-white shadow text-xs"
                      whileHover={{ 
                        scale: 1.1,
                        rotateY: 180,
                        boxShadow: "0 4px 8px rgba(0,0,0,0.2)"
                      }}
                      style={{ transformStyle: 'preserve-3d' }}
                    >
                      {i + 1}
                    </motion.div>
                    <div className="font-medium">{s.title}</div>
                    <p className="text-sm text-neutral-700 dark:text-neutral-300">{s.body}</p>
                  </motion.li>
                ))}
              </ol>
            </motion.div>
          </ParallaxContainer>
          <div className="grid gap-6">
            <ParallaxContainer depth={0.4}>
              <motion.div 
                className="rounded-2xl border border-primary-500/20 bg-primary-50/80 p-6 dark:border-primary-700/30 dark:bg-primary-900/20"
                initial={{ opacity: 0, rotateX: 15, y: 20 }}
                whileInView={{ opacity: 1, rotateX: 0, y: 0 }}
                viewport={{ once: true }}
                transition={{ duration: 0.7, delay: 0.2 }}
                whileHover={{ 
                  scale: 1.02,
                  rotateY: 3,
                  z: 20,
                  boxShadow: "0 8px 25px rgba(16, 185, 129, 0.15)"
                }}
                style={{ transformStyle: 'preserve-3d' }}
              >
                <div className="flex items-center gap-3">
                  <motion.div 
                    className="grid h-10 w-10 place-items-center rounded-xl bg-primary-600 text-white"
                    whileHover={{ rotateY: 180, scale: 1.1 }}
                    style={{ transformStyle: 'preserve-3d' }}
                  >
                    <Heart className="h-5 w-5"/>
                  </motion.div>
                  <div className="font-semibold tracking-tight">Donor promise</div>
                </div>
                <p className="mt-2 text-sm text-primary-900 dark:text-primary-100">{HOW_IT_WORKS.donorPromise}</p>
              </motion.div>
            </ParallaxContainer>
            <ParallaxContainer depth={0.5}>
              <motion.div 
                className="rounded-2xl border border-secondary-500/20 bg-secondary-500/10 p-6"
                initial={{ opacity: 0, rotateX: -15, y: 20 }}
                whileInView={{ opacity: 1, rotateX: 0, y: 0 }}
                viewport={{ once: true }}
                transition={{ duration: 0.7, delay: 0.4 }}
                whileHover={{ 
                  scale: 1.02,
                  rotateY: -3,
                  z: 20,
                  boxShadow: "0 8px 25px rgba(147, 51, 234, 0.15)"
                }}
                style={{ transformStyle: 'preserve-3d' }}
              >
                <div className="flex items-center gap-3">
                  <motion.div 
                    className="grid h-10 w-10 place-items-center rounded-xl bg-secondary-500 text-white"
                    whileHover={{ rotateY: 180, scale: 1.1 }}
                    style={{ transformStyle: 'preserve-3d' }}
                  >
                    <Users className="h-5 w-5"/>
                  </motion.div>
                  <div className="font-semibold tracking-tight">For partners & volunteers</div>
                </div>
                <p className="mt-2 text-sm text-secondary-950 dark:text-secondary-100">{HOW_IT_WORKS.partnerNote}</p>
              </motion.div>
            </ParallaxContainer>
          </div>
        </div>
      </div>
    </section>
  )
}

function Testimonial() {
  return (
    <section className="relative py-20">
      <div className="mx-auto max-w-5xl px-4 sm:px-6 lg:px-8">
        <div className="card p-8">
          <div className="absolute -left-10 -top-10 h-60 w-60 rounded-full bg-gradient-to-tr from-primary-500/30 to-secondary-600/30 blur-3xl" />
          <blockquote className="text-balance text-xl leading-8 text-neutral-800 dark:text-neutral-100">
            &ldquo;{HOME_TESTIMONIAL.quote}&rdquo;
          </blockquote>
          <div className="mt-4 flex items-center gap-3 text-sm text-neutral-600 dark:text-neutral-300">
            <Star className="h-4 w-4 text-secondary-500" />
            {HOME_TESTIMONIAL.attribution}
          </div>
        </div>
      </div>
    </section>
  )
}

function GetInvolved() {
  const options = [
    { title: "Donate", body: "Restore hope through outreach, emergency aid, and compassionate care.", href: "#/donate", accent: "from-secondary-500 to-primary-500", icon: Heart },
    { title: "Volunteer", body: "Serve at outreach events and support families in your community.", href: "#/volunteers", accent: "from-sky-500 to-secondary-500", icon: Users },
    { title: "Partner with us", body: "Churches, businesses, and organizations — let's serve together.", href: "#/contact", accent: "from-primary-500 to-secondary-500", icon: Globe },
  ]
  
  return (
    <section id="get-involved" className="relative py-24 overflow-hidden">
      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        <ParallaxContainer depth={0.3}>
          <SectionHeader eyebrow="Get involved" title="There is a role for everyone" subtitle="Give, volunteer, or partner — every act of compassion builds hope." />
        </ParallaxContainer>
        
        <div className="mt-10 grid gap-6 md:grid-cols-3">
          {options.map((o, i) => (
            <ParallaxContainer key={i} depth={0.5 + i * 0.1}>
              <Callout {...o} index={i} />
            </ParallaxContainer>
          ))}
        </div>
      </div>
    </section>
  )
}

function Callout({ title, body, href, accent, icon: Icon, index = 0 }: CalloutProps) {
  return (
    <motion.div 
      className="group card card-hover transform-gpu"
      initial={{ opacity: 0, y: 20 }}
      whileInView={{ opacity: 1, y: 0 }}
      viewport={{ once: true }}
      transition={{ duration: 0.6, delay: index * 0.1 }}
      whileHover={{
        scale: 1.05,
        rotateY: index % 2 === 0 ? 5 : -5,
        z: 50
      }}
      style={{ transformStyle: 'preserve-3d' }}
    >
      <div className={`absolute -right-10 -top-10 h-36 w-36 rounded-full bg-gradient-to-br ${accent} opacity-30 blur-2xl group-hover:opacity-50 transition-opacity duration-300`} />
      
      <motion.div 
        className={`mb-3 grid h-12 w-12 place-items-center rounded-xl bg-gradient-to-br ${accent} text-white shadow`}
        whileHover={{ 
          rotateY: 180,
          scale: 1.1
        }}
        transition={{ duration: 0.3 }}
      >
        <Icon className="h-6 w-6" />
      </motion.div>
      
      <div className="font-semibold tracking-tight">{title}</div>
      <p className="mt-2 text-sm text-neutral-700 dark:text-neutral-300">{body}</p>
      
      <motion.a 
        href={href} 
        className="mt-4 inline-flex items-center text-sm text-neutral-800 underline-offset-4 hover:underline dark:text-neutral-200"
        whileHover={{ x: 5 }}
        transition={{ duration: 0.2 }}
      >
        Learn more <ArrowRight className="ml-1 h-4 w-4" />
      </motion.a>
    </motion.div>
  )
}

function CTA() {
  return (
    <section className="relative py-24">
      <div className="mx-auto max-w-6xl px-4 sm:px-6 lg:px-8">
        <div className="relative overflow-hidden rounded-3xl border border-white/30 bg-gradient-to-br from-primary-600 via-secondary-600 to-secondary-700 p-8 text-white shadow-2xl dark:border-white/10">
          <div className="absolute inset-0 opacity-30 [mask-image:radial-gradient(60%_80%_at_70%_50%,white,transparent)]" style={{ backgroundImage: "url('data:image/svg+xml;utf8,<svg xmlns=\\'http://www.w3.org/2000/svg\\' width=\\'400\\' height=\\'400\\'><defs><pattern id=\\'g\\' width=\\'40\\' height=\\'40\\' patternUnits=\\'userSpaceOnUse\\'><path d=\\'M0 20 H40 M20 0 V40\\' stroke=\\'white\\' stroke-opacity=\\'0.25\\' stroke-width=\\'1\\'/></pattern></defs><rect width=\\'100%\\' height=\\'100%\\' fill=\\'url(%23g)\\'/></svg>')" }} />
          <div className="grid items-center gap-8 md:grid-cols-2">
            <div>
              <h2 className="font-serif text-balance text-3xl font-semibold tracking-tight sm:text-4xl">Help restore hope in someone&apos;s hardest season</h2>
              <p className="mt-3 max-w-md text-white/90">Your generosity supports outreach, emergency assistance, and resource navigation for families facing crisis throughout Los Angeles County.</p>
              <div className="mt-6 flex flex-wrap items-center gap-3">
                <a href="#/donate" className="btn-white">Donate now</a>
                <a href="#/request-assistance" className="inline-flex items-center gap-2 rounded-full border-2 border-white/40 px-6 py-3 text-sm font-medium text-white backdrop-blur transition hover:bg-white/10 focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2">
                  Request assistance <ArrowRight className="ml-1 h-4 w-4" />
                </a>
              </div>
            </div>
            <div className="relative">
              <div className="rounded-2xl border border-white/40 bg-white/10 p-6 backdrop-blur">
                <h3 className="font-medium tracking-tight">Contact us</h3>
                <ul className="mt-3 space-y-2 text-sm text-white/90">
                  <li className="flex items-center gap-2"><Mail className="h-4 w-4"/> <a href={SITE.emailHref} className="underline">{SITE.email}</a></li>
                  <li className="flex items-start gap-2"><MapPin className="mt-0.5 h-4 w-4 shrink-0"/> {SITE.serviceArea}</li>
                </ul>
                <p className="mt-3 text-xs text-white/80">{SITE.legalStatus}. EIN {SITE.ein}.</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}

/* ===================== Pages ===================== */
function PageShell({ title, icon: Icon, eyebrow, children, cta }: PageShellProps) {
  return (
    <section className="relative py-16 sm:py-24">
      <div className="mx-auto max-w-6xl px-4 sm:px-6 lg:px-8">
        <div className="mb-10 flex items-center gap-3">
          <div className="grid h-12 w-12 place-items-center rounded-xl bg-gradient-to-br from-primary-500 to-secondary-600 text-white shadow">
            <Icon className="h-6 w-6"/>
          </div>
          <div>
            {eyebrow && <div className="section-eyebrow">{eyebrow}</div>}
            <h1 className="text-3xl font-semibold tracking-tight sm:text-4xl">{title}</h1>
          </div>
          <div className="ml-auto">{cta}</div>
        </div>
        <div className="grid gap-8">{children}</div>
      </div>
    </section>
  )
}

function DonatePage() {
  const [selectedAmount, setSelectedAmount] = useState(50)
  const [customAmount, setCustomAmount] = useState('')
  const [isRecurring, setIsRecurring] = useState(false)
  const [donorInfo, setDonorInfo] = useState({ email: '', name: '', anonymous: false })
  const [selectedPaymentMethod, setSelectedPaymentMethod] = useState<PaymentMethod>(paymentMethods[0])
  const [isProcessing, setIsProcessing] = useState(false)
  const { addNotification } = useNotifications()
  const { t } = useLanguage()
  
  const suggestedAmounts = [
    { amount: 25, impact: "Essentials for one individual", popular: false },
    { amount: 50, impact: "Support for one family in crisis", popular: true },
    { amount: 100, impact: "Outreach supplies for two families", popular: false },
    { amount: 250, impact: "Emergency relief for multiple families", popular: false },
  ]
  
  const finalAmount = customAmount ? parseInt(customAmount) || 0 : selectedAmount
  const impactData = calculateDonationImpact(finalAmount)
  
  // Enhanced impact text with real calculations
  const getDetailedImpactText = (amount: number) => {
    const impact = calculateDonationImpact(amount)
    const impactItems = []
    
    if (impact.families > 0) impactItems.push(`${impact.families} famil${impact.families > 1 ? 'ies' : 'y'} with compassionate support`)
    if (impact.backpacks > 0) impactItems.push(`${impact.backpacks} backpack kit${impact.backpacks > 1 ? 's' : ''}`)
    if (impact.clothing > 0) impactItems.push(`${impact.clothing} clothing item${impact.clothing > 1 ? 's' : ''}`)
    if (impact.emergency > 0) impactItems.push(`${impact.emergency} emergency response${impact.emergency > 1 ? 's' : ''}`)
    
    return impactItems.length > 0 ? impactItems.join(', ') : "Every dollar helps restore hope for someone in need"
  }
  
  // Track donation interactions
  useEffect(() => {
    trackEvent('donation_page_view', { amount: finalAmount, recurring: isRecurring })
  }, [])
  
  const handleDonationSubmit = async () => {
    if (finalAmount <= 0) return
    
    setIsProcessing(true)
    trackEvent('donation_initiated', { 
      amount: finalAmount, 
      recurring: isRecurring, 
      anonymous: donorInfo.anonymous,
      method: selectedPaymentMethod.id
    })
    
    addNotification({
      type: 'info',
      title: 'Processing Payment',
      message: `Processing your ${isRecurring ? 'monthly ' : ''}donation of $${finalAmount}...`
    })
    
    try {
      const result = await PaymentProcessor.processPayment(finalAmount, selectedPaymentMethod, donorInfo)
      
      if (result.success) {
        addNotification({
          type: 'success',
          title: 'Donation Successful!',
          message: `Thank you for your ${isRecurring ? 'monthly ' : ''}donation of $${finalAmount}. Transaction ID: ${result.transactionId}`,
          actions: [
            {
              label: 'View Receipt',
              action: () => {
                // In production, would show receipt modal or download PDF
                trackEvent('receipt_viewed', { transactionId: result.transactionId })
                alert('Receipt functionality would open here in production')
              }
            }
          ]
        })
        
        // Reset form
        setSelectedAmount(50)
        setCustomAmount('')
        setDonorInfo({ email: '', name: '', anonymous: false })
      } else {
        addNotification({
          type: 'error',
          title: 'Payment Failed',
          message: result.error || 'Unable to process payment. Please try again.'
        })
      }
    } catch (error) {
      addNotification({
        type: 'error',
        title: 'Payment Error',
        message: 'An unexpected error occurred. Please try again.'
      })
    } finally {
      setIsProcessing(false)
    }
  }
  
  return (
    <>
      <SEOHead 
        title="Donate Now — Miracles in Motion Foundation"
        description="Make a secure donation to support outreach, emergency assistance, and resource navigation for families in crisis throughout Los Angeles County."
      />
      <PageShell title="Donate" icon={Heart} eyebrow="Give with confidence" cta={<a href="#/legal" className="btn-secondary focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2" aria-label="View donation policies">Policies</a>}>
      <div className="grid gap-8 md:grid-cols-3">
        <div className="md:col-span-2 space-y-8">
          {/* Enhanced Impact Calculator */}
          <motion.div 
            className="card bg-gradient-to-br from-primary-50 to-secondary-50 dark:from-primary-900/20 dark:to-secondary-900/20 border-primary-200/50 dark:border-primary-800/50"
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6 }}
            whileHover={{ scale: 1.01, y: -2 }}
          >
            <div className="flex items-start gap-4 mb-4">
              <motion.div 
                className="p-3 bg-primary-600 text-white rounded-xl"
                whileHover={{ scale: 1.1, rotateY: 180 }}
                style={{ transformStyle: 'preserve-3d' }}
              >
                <Heart className="h-6 w-6" />
              </motion.div>
              <div className="flex-1">
                <h3 className="font-semibold text-lg mb-2">Your Impact: ${finalAmount}</h3>
                <p className="text-primary-700 dark:text-primary-300 font-medium mb-3">
                  {getDetailedImpactText(finalAmount)}
                </p>
                
                {/* Real-time impact breakdown */}
                {finalAmount > 0 && (
                  <div className="grid gap-2 text-sm">
                    <div className="flex items-center justify-between p-2 bg-white/50 dark:bg-gray-800/50 rounded">
                      <span className="flex items-center gap-2">
                        <Users className="h-4 w-4" /> Families supported
                      </span>
                      <span className="font-semibold">{impactData.families}</span>
                    </div>
                    <div className="flex items-center justify-between p-2 bg-white/50 dark:bg-gray-800/50 rounded">
                      <span className="flex items-center gap-2">
                        <Package className="h-4 w-4" /> Outreach kits
                      </span>
                      <span className="font-semibold">{impactData.backpacks}</span>
                    </div>
                    <div className="flex items-center justify-between p-2 bg-white/50 dark:bg-gray-800/50 rounded">
                      <span className="flex items-center gap-2">
                        <Shirt className="h-4 w-4" /> Clothing Items
                      </span>
                      <span className="font-semibold">{impactData.clothing}</span>
                    </div>
                  </div>
                )}
                
                {isRecurring && finalAmount > 0 && (
                  <div className="mt-3 p-3 bg-secondary-50 dark:bg-secondary-900/20 rounded-lg">
                    <p className="text-sm text-secondary-700 dark:text-secondary-300 font-medium">
                      🎉 Annual Impact: {impactData.annual.totalImpact}
                    </p>
                  </div>
                )}
              </div>
            </div>
          </motion.div>

          {/* Donation Form */}
          <div className="card">
            <div className="mb-6">
              <h3 className="font-semibold text-lg mb-2">Choose Your Donation Amount</h3>
              <p className="text-sm text-neutral-600 dark:text-neutral-400">Every dollar directly supports families and individuals in need</p>
            </div>
            
            {/* Suggested Amounts - Mobile Optimized */}
            <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-4 mb-6">
              {suggestedAmounts.map((tier) => (
                <motion.button
                  key={tier.amount}
                  onClick={() => {
                    setSelectedAmount(tier.amount)
                    setCustomAmount('')
                    trackEvent('donation_amount_selected', { amount: tier.amount, method: 'suggested' })
                  }}
                  className={`relative p-4 rounded-xl border-2 transition-all focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 ${
                    selectedAmount === tier.amount && !customAmount
                      ? 'border-primary-500 bg-primary-50 dark:bg-primary-900/20'
                      : 'border-neutral-200 dark:border-neutral-700 hover:border-primary-300'
                  }`}
                  style={{ minHeight: '88px', minWidth: '120px' }} // Enhanced touch targets for mobile
                  whileHover={{ scale: 1.02 }}
                  whileTap={{ scale: 0.98 }}
                  aria-label={`Donate $${tier.amount} - ${tier.impact}`}
                >
                  {tier.popular && (
                    <div className="absolute -top-2 left-1/2 transform -translate-x-1/2">
                      <span className="bg-secondary-500 text-white text-xs px-2 py-1 rounded-full font-medium">
                        Most Popular
                      </span>
                    </div>
                  )}
                  <div className="text-2xl font-bold text-primary-600 dark:text-primary-400">
                    ${tier.amount}
                  </div>
                  <div className="text-xs text-neutral-600 dark:text-neutral-400 mt-1">
                    {tier.impact}
                  </div>
                </motion.button>
              ))}
            </div>
            
            {/* Custom Amount */}
            <div className="mb-6">
              <label htmlFor="custom-amount" className="block text-sm font-medium mb-2">
                Or enter a custom amount
              </label>
              <div className="relative">
                <span className="absolute left-3 top-1/2 transform -translate-y-1/2 text-neutral-500">$</span>
                <input
                  id="custom-amount"
                  type="number"
                  min="1"
                  value={customAmount}
                  onChange={(e) => {
                    setCustomAmount(e.target.value)
                    setSelectedAmount(0)
                  }}
                  placeholder="Enter amount"
                  className="input pl-8 w-full focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-primary-500"
                  aria-label="Custom donation amount in dollars"
                />
              </div>
            </div>
            
            {/* Recurring Option & Donor Info */}
            <div className="space-y-4 mb-6">
              <div className="p-4 bg-secondary-50 dark:bg-secondary-900/20 rounded-xl">
                <label className="flex items-start gap-3 cursor-pointer">
                  <input
                    type="checkbox"
                    checked={isRecurring}
                    onChange={(e) => {
                      setIsRecurring(e.target.checked)
                      trackEvent('donation_recurring_toggle', { recurring: e.target.checked, amount: finalAmount })
                    }}
                    className="mt-1 h-5 w-5 text-primary-600 focus:ring-primary-500 border-gray-300 rounded" // Enhanced for mobile
                    style={{ minHeight: '20px', minWidth: '20px' }}
                  />
                  <div className="flex-1">
                    <div className="font-medium">Make this a monthly donation</div>
                    <div className="text-sm text-neutral-600 dark:text-neutral-400">
                      Recurring donations help us plan better and have more impact
                    </div>
                    {isRecurring && finalAmount > 0 && (
                      <div className="text-sm text-secondary-600 dark:text-secondary-400 mt-2 p-2 bg-white/50 dark:bg-gray-800/50 rounded font-medium">
                        🎯 Annual Impact: {impactData.annual.totalImpact}
                      </div>
                    )}
                  </div>
                </label>
              </div>
              
              {/* Donor Information */}
              <div className="grid gap-4 p-4 bg-gray-50 dark:bg-gray-800/50 rounded-xl">
                <h4 className="font-medium text-gray-900 dark:text-gray-100">Donor Information (Optional)</h4>
                <div className="grid gap-3 sm:grid-cols-2">
                  <input
                    type="text"
                    placeholder="Your Name"
                    value={donorInfo.name}
                    onChange={(e) => setDonorInfo({ ...donorInfo, name: e.target.value })}
                    className="input focus:ring-2 focus:ring-primary-500 focus:border-primary-500"
                    style={{ minHeight: '44px' }}
                  />
                  <input
                    type="email"
                    placeholder="Email (for receipt)"
                    value={donorInfo.email}
                    onChange={(e) => setDonorInfo({ ...donorInfo, email: e.target.value })}
                    className="input focus:ring-2 focus:ring-primary-500 focus:border-primary-500"
                    style={{ minHeight: '44px' }}
                  />
                </div>
                <label className="flex items-center gap-3 text-sm">
                  <input
                    type="checkbox"
                    checked={donorInfo.anonymous}
                    onChange={(e) => setDonorInfo({ ...donorInfo, anonymous: e.target.checked })}
                    className="h-4 w-4 text-primary-600 focus:ring-primary-500 border-gray-300 rounded"
                  />
                  <span>Make my donation anonymous</span>
                </label>
              </div>
            </div>
            
            {/* Payment Method Selection */}
            <div className="mb-6">
              <h4 className="font-medium text-gray-900 dark:text-gray-100 mb-3">Payment Method</h4>
              <div className="grid gap-3 sm:grid-cols-2">
                {paymentMethods.map((method) => {
                  const fees = PaymentProcessor.calculateFees(finalAmount, method)
                  return (
                    <motion.button
                      key={method.id}
                      onClick={() => setSelectedPaymentMethod(method)}
                      className={`p-4 rounded-xl border-2 transition-all focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 text-left ${
                        selectedPaymentMethod.id === method.id
                          ? 'border-primary-500 bg-primary-50 dark:bg-primary-900/20'
                          : 'border-neutral-200 dark:border-neutral-700 hover:border-primary-300'
                      }`}
                      whileHover={{ scale: 1.02 }}
                      whileTap={{ scale: 0.98 }}
                    >
                      <div className="flex items-center gap-3 mb-2">
                        <span className="text-2xl">{method.icon}</span>
                        <div className="flex-1">
                          <div className="font-medium">{method.name}</div>
                          <div className="text-sm text-neutral-500">{method.description}</div>
                        </div>
                        {selectedPaymentMethod.id === method.id && (
                          <Check className="h-5 w-5 text-primary-600" />
                        )}
                      </div>
                      {finalAmount > 0 && (
                        <div className="text-xs text-neutral-600 dark:text-neutral-400">
                          Fee: ${fees.fee} ({method.processingFee}%) • You give: ${fees.net}
                        </div>
                      )}
                    </motion.button>
                  )
                })}
              </div>
            </div>
            
            {/* Enhanced Donation Buttons */}
            <div className="space-y-3">
              <motion.button
                disabled={finalAmount <= 0 || isProcessing}
                className="w-full btn-primary disabled:opacity-50 disabled:cursor-not-allowed focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2"
                style={{ minHeight: '56px' }} // Enhanced mobile touch target
                whileHover={finalAmount > 0 && !isProcessing ? { scale: 1.02 } : {}}
                whileTap={finalAmount > 0 && !isProcessing ? { scale: 0.98 } : {}}
                onClick={handleDonationSubmit}
                aria-label={`Donate $${finalAmount} ${isRecurring ? 'monthly' : 'one-time'} via ${selectedPaymentMethod.name}`}
              >
                {isProcessing ? (
                  <><Clock className="mr-2 h-5 w-5 animate-spin" /> Processing...</>
                ) : (
                  <><Heart className="mr-2 h-5 w-5" /> {t('donate.title')} ${finalAmount} via {selectedPaymentMethod.icon}</>
                )}
              </motion.button>
              
              <div className="grid gap-3 sm:grid-cols-2">
                <motion.button 
                  className="btn-secondary focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2" 
                  style={{ minHeight: '48px' }}
                  whileHover={{ scale: 1.02 }}
                  whileTap={{ scale: 0.98 }}
                  onClick={() => trackEvent('donation_method_selected', { method: 'paypal', amount: finalAmount })}
                  aria-label="Donate via PayPal"
                >
                  💳 PayPal
                </motion.button>
                <motion.button 
                  className="btn-secondary focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2" 
                  style={{ minHeight: '48px' }}
                  whileHover={{ scale: 1.02 }}
                  whileTap={{ scale: 0.98 }}
                  onClick={() => trackEvent('donation_method_selected', { method: 'venmo', amount: finalAmount })}
                  aria-label="Donate via Venmo"
                >
                  📱 Venmo
                </motion.button>
              </div>
            </div>
            
            <div className="mt-4 p-4 bg-neutral-50 dark:bg-neutral-800/50 rounded-lg">
              <div className="flex items-center gap-2 text-sm text-neutral-600 dark:text-neutral-400">
                <Shield className="h-4 w-4" />
                <span>Secure 256-bit SSL encryption</span>
              </div>
              <p className="text-xs text-neutral-500 dark:text-neutral-500 mt-2">
                You'll receive an email receipt for your tax records. Donations are tax-deductible to the extent allowed by law. EIN {SITE.ein}.
              </p>
            </div>
          </div>

          {/* Matching Gifts */}
          <div className="card">
            <div className="flex items-center gap-3 mb-3">
              <div className="p-2 bg-secondary-100 dark:bg-secondary-900/30 rounded-lg">
                <Building2 className="h-5 w-5 text-secondary-600 dark:text-secondary-400" />
              </div>
              <div>
                <div className="font-medium">Employer Matching Gifts</div>
                <div className="text-sm text-neutral-600 dark:text-neutral-400">Double your impact</div>
              </div>
            </div>
            <p className="text-sm text-neutral-700 dark:text-neutral-300 mb-3">
              Many employers will match your charitable donation. Check with your HR department and provide our EIN: {SITE.ein}.
            </p>
            <a href="#" className="inline-flex items-center gap-2 text-sm text-primary-600 dark:text-primary-400 hover:text-primary-700 dark:hover:text-primary-300 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 rounded">
              <ExternalLink className="h-4 w-4" />
              Download matching gift letter
            </a>
          </div>

          {/* Other Ways to Give */}
          <div className="card">
            <div className="font-medium mb-3">Other Ways to Give</div>
            <div className="space-y-3">
              <div className="flex items-start gap-3 p-3 bg-neutral-50 dark:bg-neutral-800/50 rounded-lg">
                <Mail className="h-5 w-5 text-neutral-500 mt-0.5" />
                <div>
                  <div className="font-medium text-sm">Mail a Check</div>
                  <div className="text-sm text-neutral-600 dark:text-neutral-400">
                    Miracles In Motion<br />
                    20274 Via Medici<br />
                    Porter Ranch, CA 91326
                  </div>
                </div>
              </div>
              
              <div className="flex items-start gap-3 p-3 bg-neutral-50 dark:bg-neutral-800/50 rounded-lg">
                <DollarSign className="h-5 w-5 text-neutral-500 mt-0.5" />
                <div>
                  <div className="font-medium text-sm">Stock or Securities</div>
                  <div className="text-sm text-neutral-600 dark:text-neutral-400">
                    Contact us for account transfer information
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        {/* Sidebar */}
        <div className="space-y-6">
          {/* Trust Indicators */}
          <div className="card bg-green-50 dark:bg-green-900/20 border-green-200 dark:border-green-800">
            <div className="flex items-center gap-3 mb-4">
              <div className="p-2 bg-green-600 text-white rounded-lg">
                <Award className="h-5 w-5" />
              </div>
              <div>
                <div className="font-medium text-green-900 dark:text-green-100">501(c)(3) Verified</div>
                <div className="text-sm text-green-700 dark:text-green-300">Tax-deductible donations</div>
              </div>
            </div>
            <div className="space-y-2 text-sm">
              <div className="flex justify-between text-green-800 dark:text-green-200">
                <span>Program expenses:</span>
                <span className="font-medium">85%</span>
              </div>
              <div className="flex justify-between text-green-800 dark:text-green-200">
                <span>Administrative:</span>
                <span className="font-medium">10%</span>
              </div>
              <div className="flex justify-between text-green-800 dark:text-green-200">
                <span>Fundraising:</span>
                <span className="font-medium">5%</span>
              </div>
            </div>
          </div>

          {/* Recent Impact */}
          <div className="card">
            <div className="font-medium mb-3">Recent Impact</div>
            <div className="space-y-3">
              <div className="flex items-center gap-3">
                <div className="w-2 h-2 bg-primary-500 rounded-full"></div>
                <div className="text-sm text-neutral-700 dark:text-neutral-300">
                  <span className="font-medium">Families across LA County</span> received outreach and emergency support this month
                </div>
              </div>
              <div className="flex items-center gap-3">
                <div className="w-2 h-2 bg-secondary-500 rounded-full"></div>
                <div className="text-sm text-neutral-700 dark:text-neutral-300">
                  <span className="font-medium">43 families</span> got emergency clothing support
                </div>
              </div>
              <div className="flex items-center gap-3">
                <div className="w-2 h-2 bg-green-500 rounded-full"></div>
                <div className="text-sm text-neutral-700 dark:text-neutral-300">
                  <span className="font-medium">$12,450</span> raised this week by donors like you
                </div>
              </div>
            </div>
          </div>

          {/* Contact Info */}
          <div className="card bg-primary-50 dark:bg-primary-900/20">
            <div className="font-medium mb-3">Questions about donating?</div>
            <div className="space-y-2 text-sm">
              <div className="flex items-center gap-2">
                <Phone className="h-4 w-4 text-primary-600 dark:text-primary-400" />
                <a href="tel:+18184916884" className="text-primary-600 dark:text-primary-400 hover:text-primary-700 dark:hover:text-primary-300">
                  (818) 491-6884
                </a>
              </div>
              <div className="flex items-center gap-2">
                <Mail className="h-4 w-4 text-primary-600 dark:text-primary-400" />
                <a href={SITE.emailHref} className="text-primary-600 dark:text-primary-400 hover:text-primary-700 dark:hover:text-primary-300">
                  {SITE.email}
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </PageShell>
    </>
  )
}

function VolunteerPage() {
  return (
    <PageShell title="Volunteer" icon={Users} eyebrow="Serve locally">
      <div className="grid gap-6 md:grid-cols-2">
        <div className="card">
          <div className="font-medium">Sign-up form</div>
          <form className="mt-4 grid grid-cols-1 gap-4" onSubmit={(e)=>{e.preventDefault(); alert("Thanks! We'll be in touch via email.");}}>
            <div className="grid gap-2 sm:grid-cols-2">
              <input required aria-label="First name" placeholder="First name" className="input" />
              <input required aria-label="Last name" placeholder="Last name" className="input" />
            </div>
            <div className="grid gap-2 sm:grid-cols-2">
              <input required type="email" aria-label="Email" placeholder="Email" className="input" />
              <input aria-label="Phone" placeholder="Phone" className="input" />
            </div>
            <div className="grid gap-2 sm:grid-cols-2">
              <select aria-label="Interests" className="input">
                <option>Assemble kits</option>
                <option>Delivery driver</option>
                <option>Community partner</option>
                <option>Admin support</option>
              </select>
              <select aria-label="Availability" className="input">
                <option>Weekdays</option>
                <option>Weeknights</option>
                <option>Weekends</option>
              </select>
            </div>
            <label className="flex items-start gap-3 text-sm">
              <input required type="checkbox" className="mt-1 h-4 w-4" />
              <span>I have read and agree to the <a className="underline" href="#/legal#volunteer-waiver">Volunteer Waiver & Liability Release</a>, including background check and child-safety requirements.</span>
            </label>
            <button className="btn-primary w-full justify-center" type="submit">Submit</button>
          </form>
        </div>
        <aside className="space-y-6">
          <Card title="What to expect" icon={Backpack}>
            <p className="text-sm text-neutral-700 dark:text-neutral-300">Shifts are 2–3 hours. Training provided. Youth (14+) welcome with guardian consent.</p>
          </Card>
          <Card title="Group volunteering" icon={Users}>
            <p className="text-sm text-neutral-700 dark:text-neutral-300">We host teams of 5–25 for corporate/service groups. <a className="underline" href="#/sponsors">Contact us</a> for dates.</p>
          </Card>
        </aside>
      </div>
    </PageShell>
  )
}

function SponsorsPage() {
  const tiers = [
    { name: "Bronze", amt: "$2,500", perks: ["Logo on website", "Social thank-you", "Quarterly impact note"] },
    { name: "Silver", amt: "$5,000", perks: ["All Bronze", "Logo on event signage", "Volunteer day for your team"] },
    { name: "Gold", amt: "$10,000", perks: ["All Silver", "Co-branded kit drive", "Annual report feature"] },
    { name: "Platinum", amt: "$25,000+", perks: ["All Gold", "Program naming opportunity", "Custom partnership plan"] },
  ]
  
  return (
    <PageShell title="Corporate Sponsorship" icon={Building2} eyebrow="Partner with purpose" cta={<a className="btn-secondary" href="#/brand">Brand assets</a>}>
      <div className="grid gap-6 md:grid-cols-2">
        <div className="space-y-6">
          {tiers.map((t) => (
            <div key={t.name} className="card">
              <div className="flex items-start justify-between">
                <div className="text-xl font-semibold">{t.name}</div>
                <div className="text-lg">{t.amt}</div>
              </div>
              <ul className="mt-3 list-disc space-y-1 pl-5 text-sm text-neutral-700 dark:text-neutral-300">
                {t.perks.map((p, i) => (<li key={i}>{p}</li>))}
              </ul>
            </div>
          ))}
        </div>
        <div className="card">
          <div className="font-medium">Start a conversation</div>
          <form className="mt-4 grid gap-4" onSubmit={(e)=>{e.preventDefault(); alert("Thanks! We'll reach out soon.");}}>
            <input className="input" placeholder="Company name" aria-label="Company name" required />
            <div className="grid gap-2 sm:grid-cols-2">
              <input className="input" placeholder="Contact name" aria-label="Contact name" required />
              <input type="email" className="input" placeholder="Email" aria-label="Email" required />
            </div>
            <select className="input" aria-label="Tier interest">
              <option>Bronze</option>
              <option>Silver</option>
              <option>Gold</option>
              <option>Platinum</option>
              <option>Custom</option>
            </select>
            <textarea className="input min-h-28 resize-none" placeholder="Tell us about your goals" aria-label="Message"></textarea>
            <label className="flex items-start gap-3 text-xs opacity-80">
              <input type="checkbox" className="mt-1 h-4 w-4"/>
              I agree to logo-use guidelines and brand approvals per our <a className="underline" href="#/legal#sponsorship-terms">Sponsorship Terms</a>.
            </label>
            <button className="btn-primary w-full justify-center" type="submit">Send</button>
          </form>
        </div>
      </div>
    </PageShell>
  )
}

function StoriesPage() {
  const stories = [
    { title: "A family found hope again", tag: "Outreach", body: "After a fire displaced their home, a mother and children received emergency support and compassionate guidance through recovery.", by: "Community partner" },
    { title: "Strength after hardship", tag: "Advocacy", body: "A survivor connected with resources and encouragement — reminded that she matters and brighter days are ahead.", by: "Volunteer" },
    { title: "Community showed up", tag: "Events", body: "Neighbors and volunteers came together at an outreach event to serve families with supplies, prayer, and heartfelt support.", by: "Event volunteer" },
  ]
  
  return (
    <PageShell title="Stories of Hope" icon={BookOpenText} eyebrow="Hope in motion" cta={<a href="#/testimonies" className="btn-secondary">Read testimonies</a>}>
      <StoriesIntroBlock />
      <div className="grid gap-6 md:grid-cols-3">
        {stories.map((s, i) => (
          <article key={i} className="card">
            <div className="text-xs uppercase tracking-wide text-neutral-500">{s.tag}</div>
            <h3 className="mt-1 text-lg font-semibold">{s.title}</h3>
            <p className="mt-2 text-sm text-neutral-700 dark:text-neutral-300">{s.body}</p>
            <div className="mt-3 text-xs text-neutral-500">— {s.by}</div>
          </article>
        ))}
      </div>
      <div className="card">
        <div className="font-medium">Submit your story</div>
        <form className="mt-3 grid gap-3" onSubmit={(e)=>{e.preventDefault(); alert("Thanks for sharing! We'll review and publish with consent.");}}>
          <input className="input" placeholder="Your name (or Anonymous)" aria-label="Name" />
          <textarea className="input min-h-28 resize-none" placeholder="Your story (please omit private identifying details)" aria-label="Story" required />
          <label className="flex items-start gap-3 text-xs opacity-80">
            <input type="checkbox" className="mt-1 h-4 w-4" required />
            I grant permission to publish this story (edited for length/clarity). I have removed personally identifying information.
          </label>
          <button className="btn-primary w-full justify-center">Submit</button>
        </form>
      </div>
    </PageShell>
  )
}

function TestimoniesPage() {
  const items = [
    { who: "Parent", quote: "They reminded us we were not alone — hope came when we needed it most." },
    { who: "Community partner", quote: "Compassionate, fast, and rooted in faith. Our families felt seen." },
    { who: "Principal", quote: "Attendance improves when kids have what they need." },
  ]
  
  return (
    <PageShell title="Testimonies" icon={Quote} eyebrow="What people say">
      <div className="grid gap-6 md:grid-cols-3">
        {items.map((t, i) => (
          <figure key={i} className="card">
            <blockquote className="text-balance">"{t.quote}"</blockquote>
            <figcaption className="mt-3 text-sm text-neutral-600 dark:text-neutral-300">— {t.who}</figcaption>
          </figure>
        ))}
      </div>
    </PageShell>
  )
}

function ImpactReportPage() {
  return (
    <PageShell title="Impact Report" icon={BarChart3} eyebrow="Our impact in the community" cta={<a href="#/donate" className="btn-primary">Donate to support more families</a>}>
      <div className="max-w-4xl mx-auto space-y-8">
        <p className="text-lg text-neutral-700 dark:text-neutral-300">
          Miracles in Motion Foundation serves vulnerable individuals and families across Los Angeles County. For impact updates or data requests, contact <a className="underline" href={SITE.emailHref}>{SITE.email}</a>.
        </p>
        <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
          <div className="card text-center">
            <div className="text-3xl font-bold text-primary-600 dark:text-primary-400">85%</div>
            <div className="mt-1 text-sm text-neutral-600 dark:text-neutral-400">of donations go directly to programs & outreach</div>
          </div>
          <div className="card text-center">
            <div className="text-3xl font-bold text-primary-600 dark:text-primary-400">10%</div>
            <div className="mt-1 text-sm text-neutral-600 dark:text-neutral-400">program operations</div>
          </div>
          <div className="card text-center">
            <div className="text-3xl font-bold text-primary-600 dark:text-primary-400">5%</div>
            <div className="mt-1 text-sm text-neutral-600 dark:text-neutral-400">administrative</div>
          </div>
          <div className="card text-center">
            <div className="text-2xl font-bold text-primary-600 dark:text-primary-400">$48 / $72</div>
            <div className="mt-1 text-sm text-neutral-600 dark:text-neutral-400">average grant (supplies / clothing)</div>
          </div>
        </div>
        <div className="card">
          <h3 className="font-semibold text-lg mb-2">How we confirm support</h3>
          <p className="text-neutral-700 dark:text-neutral-300 text-sm">
            When you submit a request for assistance, we review your situation with care and respond as quickly as possible. All information is handled in line with our <a className="underline" href="#/legal#privacy">Privacy Policy</a> and is never shared for marketing.
          </p>
        </div>
      </div>
    </PageShell>
  )
}

function LegalPage() {
  return (
    <PageShell title="Legal & Policies" icon={FileText} eyebrow="Trust & compliance" cta={<a href="#/donate" className="btn-secondary">Donate</a>}>
      <PolicySection id="privacy" title="Privacy Policy">
        <p>We collect only the data necessary to process donations, volunteer coordination, and email subscriptions. We do not sell or trade personal data. Assistance requests are used only to verify and deliver support; we do not share this data for marketing. You may request access, correction, or deletion at <a className="underline" href={SITE.emailHref}>{SITE.email}</a>.</p>
      </PolicySection>
      <PolicySection id="donor-privacy" title="Donor Privacy Policy">
        <p>We never sell, share, or trade donor names or personal information with any other entity, nor send donor mailings on behalf of other organizations. This policy applies to all information received online and offline.</p>
      </PolicySection>
      <PolicySection id="terms" title="Terms of Use">
        <ul className="list-disc pl-5 space-y-2">
          <li>Content is provided "as is" for informational purposes; no warranties.</li>
          <li>By submitting content (stories/testimonies), you grant us a non-exclusive license to edit and publish.</li>
          <li>Unauthorized scraping or misuse of site content is prohibited.</li>
        </ul>
      </PolicySection>
      <PolicySection id="cookies" title="Cookie Policy">
        <p>We use essential cookies for site functionality and, with your consent, privacy-friendly analytics. You can change your choices via the cookie banner or by clearing site data.</p>
      </PolicySection>
      <PolicySection id="refunds" title="Refund Policy">
        <p>Donations are generally non-refundable. If you believe a donation was made in error, contact <a className="underline" href={SITE.emailHref}>{SITE.email}</a> within 15 days for assistance.</p>
      </PolicySection>
      <PolicySection id="gift-acceptance" title="Gift Acceptance Policy">
        <ul className="list-disc pl-5 space-y-2">
          <li>We accept monetary gifts, in-kind donations for outreach, DAF grants, and publicly traded securities.</li>
          <li>In-kind items must be new and appropriate for families in need. We reserve the right to decline gifts not aligned with mission or capacity.</li>
        </ul>
      </PolicySection>
      <PolicySection id="volunteer-waiver" title="Volunteer Waiver & Liability Release">
        <p>By volunteering, you agree to follow staff instructions; assume ordinary risks associated with volunteering; and release Miracles in Motion from liability for ordinary negligence. You consent to background checks where required and agree to our child-safeguarding rules (no unsupervised time with minors, no personal contact outside events). Under 18 requires guardian consent.</p>
      </PolicySection>
      <PolicySection id="child-safety" title="Child Safety & Safeguarding">
        <ul className="list-disc pl-5 space-y-2">
          <li>No one-on-one unsupervised interactions with minors.</li>
          <li>Report suspected abuse/neglect immediately to authorities and notify staff.</li>
          <li>Photography of minors requires prior written consent from a parent/guardian.</li>
        </ul>
      </PolicySection>
      <PolicySection id="nondiscrimination" title="Non‑Discrimination Statement">
        <p>We serve individuals and families regardless of race, color, religion, national origin, sex, sexual orientation, gender identity, disability, or any other protected status.</p>
      </PolicySection>
      <PolicySection id="accessibility" title="Accessibility Statement">
        <p>We aim to meet WCAG 2.1 AA standards. If you encounter accessibility barriers, email <a className="underline" href="mailto:access@miraclesinmotion.org">access@miraclesinmotion.org</a>.</p>
      </PolicySection>
      <PolicySection id="financials" title="Financials & 990">
        <p>{SITE.name} is a {SITE.legalStatus.toLowerCase()}. EIN {SITE.ein}. Annual reports and Form 990s are available upon request or linked here when published.</p>
      </PolicySection>
      <PolicySection id="sponsorship-terms" title="Sponsorship Terms & Logo Use">
        <ul className="list-disc pl-5 space-y-2">
          <li>Logo usage requires prior written approval and must follow our <a className="underline" href="#/brand">brand assets and guidelines</a>.</li>
          <li>Sponsorship does not imply endorsement of products or services.</li>
          <li>Benefits may be adjusted for equivalency based on availability.</li>
        </ul>
      </PolicySection>
      <div className="card p-4 text-xs opacity-80">
        <p>State disclosures: Certain states may require additional disclosures for charitable solicitations. Where applicable, our disclosures will be presented on the donation page and receipts.</p>
      </div>
    </PageShell>
  )
}

/* ===================== Helper Components ===================== */
function PolicySection({ id, title, children }: PolicySectionProps) {
  return (
    <section id={id} className="card">
      <h2 className="font-semibold tracking-tight">{title}</h2>
      <div className="mt-3 space-y-3 text-sm text-neutral-700 dark:text-neutral-300">{children}</div>
    </section>
  )
}

function SectionHeader({ eyebrow, title, subtitle }: SectionHeaderProps) {
  return (
    <div className="section-header">
      {eyebrow && <div className="section-eyebrow">{eyebrow}</div>}
      <h2 className="section-title">{title}</h2>
      {subtitle && <p className="section-subtitle">{subtitle}</p>}
    </div>
  )
}

function Card({ title, icon: Icon, children }: CardProps) {
  return (
    <div className="card">
      <div className="flex items-center gap-3">
        <div className="grid h-10 w-10 place-items-center rounded-xl bg-gradient-to-br from-primary-500 to-secondary-600 text-white shadow">
          <Icon className="h-5 w-5" />
        </div>
        <div className="font-semibold tracking-tight">{title}</div>
      </div>
      <div className="mt-3">{children}</div>
    </div>
  )
}

const MIM_ASSISTANCE_DRAFT_KEY = 'mim_assistance_draft'

const initialAssistanceFormState = () => ({
  requestType: '',
  urgency: 'medium',
  studentInfo: {
    firstName: '',
    lastName: '',
    grade: '',
    school: '',
    studentId: ''
  },
  contactInfo: {
    parentName: '',
    phone: '',
    email: '',
    address: '',
    relationship: ''
  },
  needs: {
    schoolSupplies: false,
    clothing: false,
    shoes: false,
    backpack: false,
    emergency: false,
    other: false,
    otherDescription: ''
  },
  details: '',
  verificationMethod: 'school'
})

// Assistance Request Page — inline validation, auto-save draft, specific error messages
function AssistanceRequestPage() {
  const [formData, setFormData] = useState(() => {
    try {
      const raw = typeof window !== 'undefined' && window.localStorage.getItem(MIM_ASSISTANCE_DRAFT_KEY)
      if (raw) {
        const parsed = JSON.parse(raw) as ReturnType<typeof initialAssistanceFormState>
        return { ...initialAssistanceFormState(), ...parsed }
      }
    } catch (_) { /* ignore */ }
    return initialAssistanceFormState()
  })
  const [errors, setErrors] = useState<Record<string, string>>({})
  const [honeypot, setHoneypot] = useState('')
  const [draftSaved, setDraftSaved] = useState(false)
  const [submitError, setSubmitError] = useState<string | null>(null)
  const [isSubmitting, setIsSubmitting] = useState(false)

  // Auto-save draft (debounced); show "Draft saved" briefly
  useEffect(() => {
    const t = setTimeout(() => {
      try {
        window.localStorage.setItem(MIM_ASSISTANCE_DRAFT_KEY, JSON.stringify(formData))
        setDraftSaved(true)
        setTimeout(() => setDraftSaved(false), 2000)
      } catch (_) { /* ignore */ }
    }, 500)
    return () => clearTimeout(t)
  }, [formData])

  const validateField = (name: string, value: string | undefined): string => {
    const v = value ?? ''
    switch (name) {
      case 'requestType':
        return !v.trim() ? 'Please select a request type.' : ''
      case 'studentInfo.firstName':
        return !v.trim() ? 'First name is required.' : ''
      case 'studentInfo.lastName':
        return !v.trim() ? 'Last name is required.' : ''
      case 'studentInfo.grade':
        return ''
      case 'studentInfo.school':
        return !v.trim() ? 'City or neighborhood in LA County is required.' : ''
      case 'contactInfo.parentName':
        return !v.trim() ? 'Your name is required.' : ''
      case 'contactInfo.phone':
        return !v.trim() ? 'Phone number is required.' : /^[\d\s\-\(\)\+\.]{10,}$/.test(v.replace(/\s/g, '')) ? '' : 'Please enter a valid phone number (at least 10 digits).'
      case 'contactInfo.email':
        return !v.trim() ? 'Email is required.' : /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(v) ? '' : 'Please enter a valid email address.'
      case 'contactInfo.relationship':
        return !v.trim() ? 'Please select your relationship.' : ''
      case 'details':
        return !v.trim() ? 'Please describe the situation and specific needs.' : ''
      default:
        return ''
    }
  }

  const setFieldError = (name: string, value: string | undefined) => {
    const msg = validateField(name, value)
    setErrors(prev => (msg ? { ...prev, [name]: msg } : (() => { const n = { ...prev }; delete n[name]; return n })()))
  }

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setSubmitError(null)
    if (honeypot) return
    const allErrors: Record<string, string> = {}
    const fields: [string, string | undefined][] = [
      ['requestType', formData.requestType],
      ['studentInfo.firstName', formData.studentInfo.firstName],
      ['studentInfo.lastName', formData.studentInfo.lastName],
      ['studentInfo.school', formData.studentInfo.school],
      ['contactInfo.parentName', formData.contactInfo.parentName],
      ['contactInfo.phone', formData.contactInfo.phone],
      ['contactInfo.email', formData.contactInfo.email],
      ['contactInfo.relationship', formData.contactInfo.relationship],
      ['details', formData.details]
    ]
    fields.forEach(([name, value]) => {
      const msg = validateField(name, value)
      if (msg) allErrors[name] = msg
    })
    setErrors(allErrors)
    if (Object.keys(allErrors).length > 0) return
    setIsSubmitting(true)
    try {
      await new Promise((resolve, reject) => {
        setTimeout(() => {
          try {
            window.localStorage.removeItem(MIM_ASSISTANCE_DRAFT_KEY)
            resolve(undefined)
          } catch (e) {
            reject(e)
          }
        }, 300)
      })
      alert('Request submitted successfully! We will contact you within 24-48 hours.')
    } catch (_) {
      setSubmitError('Submission could not be completed. Your draft has been saved. Please try again or call (818) 491-6884 for assistance.')
    } finally {
      setIsSubmitting(false)
    }
  }

  return (
    <PageShell title="Request Assistance" icon={ClipboardList} eyebrow="Compassionate support for individuals and families in crisis">
      <div className="max-w-4xl mx-auto">
        {/* Emergency Notice */}
        <motion.div 
          className="mb-8 p-6 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-xl"
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
        >
          <div className="flex items-start gap-4">
            <AlertCircle className="h-6 w-6 text-red-600 dark:text-red-400 mt-1" />
            <div>
              <h3 className="font-semibold text-red-900 dark:text-red-100 mb-2">Emergency Assistance</h3>
              <p className="text-red-800 dark:text-red-200 text-sm mb-3">
                For urgent needs (no food, no warm clothing in winter, etc.), please call us directly at 
                <strong className="ml-1">(818) 491-6884</strong> for immediate assistance.
              </p>
              <p className="text-red-700 dark:text-red-300 text-xs">
                This form is for non-emergency assistance requests and will be processed within 24-48 hours.
              </p>
            </div>
          </div>
        </motion.div>

        <form onSubmit={handleSubmit} className="space-y-8">
          {/* Honeypot: leave empty; bots that fill it are ignored */}
          <div className="absolute -left-[9999px] w-1 h-1 overflow-hidden" aria-hidden="true">
            <label htmlFor="mim-website">Website</label>
            <input id="mim-website" type="text" name="website" tabIndex={-1} autoComplete="off" value={honeypot} onChange={(e) => setHoneypot(e.target.value)} />
          </div>
          {/* Request Type */}
          <div className="card">
            <h3 className="font-semibold text-lg mb-4">Type of Request <span className="text-red-600 dark:text-red-400">*</span></h3>
            {errors.requestType && <p className="mb-2 text-sm text-red-600 dark:text-red-400" role="alert">{errors.requestType}</p>}
            <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
              {[
                { id: 'individual', label: 'Individual', icon: Users, desc: 'Support for one person' },
                { id: 'family', label: 'Family', icon: HomeIcon, desc: 'Support for a household' },
                { id: 'partner', label: 'Agency / partner', icon: Building2, desc: 'Referral from a community partner' },
                { id: 'emergency', label: 'Emergency', icon: AlertCircle, desc: 'Urgent assistance — call if immediate' }
              ].map(type => (
                <motion.label
                  key={type.id}
                  className={`p-4 border-2 rounded-lg cursor-pointer transition-all hover:border-primary-300 ${
                    formData.requestType === type.id 
                      ? 'border-primary-500 bg-primary-50 dark:bg-primary-900/20' 
                      : errors.requestType ? 'border-red-500 dark:border-red-400' : 'border-neutral-200 dark:border-neutral-700'
                  }`}
                  whileHover={{ scale: 1.02 }}
                  whileTap={{ scale: 0.98 }}
                >
                  <input
                    type="radio"
                    name="requestType"
                    value={type.id}
                    checked={formData.requestType === type.id}
                    onChange={(e) => {
                      setFormData({ ...formData, requestType: e.target.value })
                      setFieldError('requestType', e.target.value)
                    }}
                    onBlur={() => setFieldError('requestType', formData.requestType)}
                    className="sr-only"
                    aria-invalid={!!errors.requestType}
                  />
                  <type.icon className="h-6 w-6 text-primary-600 dark:text-primary-400 mb-2" />
                  <div className="font-medium text-sm">{type.label}</div>
                  <div className="text-xs text-neutral-600 dark:text-neutral-400">{type.desc}</div>
                </motion.label>
              ))}
            </div>
          </div>

          {/* Person needing assistance */}
          <div className="card">
            <h3 className="font-semibold text-lg mb-4">Who needs assistance?</h3>
            <div className="grid gap-4 sm:grid-cols-2">
              <div>
                <label className="block text-sm font-medium mb-2" htmlFor="student-first-name">First name *</label>
                <input
                  id="student-first-name"
                  required
                  type="text"
                  className={`input ${errors['studentInfo.firstName'] ? 'border-red-500 dark:border-red-400' : ''}`}
                  value={formData.studentInfo.firstName}
                  onChange={(e) => {
                    setFormData({ ...formData, studentInfo: { ...formData.studentInfo, firstName: e.target.value } })
                    setFieldError('studentInfo.firstName', e.target.value)
                  }}
                  onBlur={() => setFieldError('studentInfo.firstName', formData.studentInfo.firstName)}
                  aria-invalid={!!errors['studentInfo.firstName']}
                  aria-describedby={errors['studentInfo.firstName'] ? 'err-student-first-name' : undefined}
                />
                {errors['studentInfo.firstName'] && <p id="err-student-first-name" className="mt-1 text-sm text-red-600 dark:text-red-400" role="alert">{errors['studentInfo.firstName']}</p>}
              </div>
              <div>
                <label className="block text-sm font-medium mb-2" htmlFor="student-last-name">Last name *</label>
                <input
                  id="student-last-name"
                  required
                  type="text"
                  className={`input ${errors['studentInfo.lastName'] ? 'border-red-500 dark:border-red-400' : ''}`}
                  value={formData.studentInfo.lastName}
                  onChange={(e) => {
                    setFormData({ ...formData, studentInfo: { ...formData.studentInfo, lastName: e.target.value } })
                    setFieldError('studentInfo.lastName', e.target.value)
                  }}
                  onBlur={() => setFieldError('studentInfo.lastName', formData.studentInfo.lastName)}
                  aria-invalid={!!errors['studentInfo.lastName']}
                  aria-describedby={errors['studentInfo.lastName'] ? 'err-student-last-name' : undefined}
                />
                {errors['studentInfo.lastName'] && <p id="err-student-last-name" className="mt-1 text-sm text-red-600 dark:text-red-400" role="alert">{errors['studentInfo.lastName']}</p>}
              </div>
              <div>
                <label className="block text-sm font-medium mb-2" htmlFor="student-grade">Age range (optional)</label>
                <select
                  id="student-grade"
                  className="input"
                  value={formData.studentInfo.grade}
                  onChange={(e) => {
                    setFormData({ ...formData, studentInfo: { ...formData.studentInfo, grade: e.target.value } })
                  }}
                >
                  <option value="">Prefer not to say</option>
                  <option value="child">Child (under 12)</option>
                  <option value="teen">Teen (12–17)</option>
                  <option value="adult">Adult (18–64)</option>
                  <option value="senior">Senior (65+)</option>
                </select>
              </div>
              <div>
                <label className="block text-sm font-medium mb-2" htmlFor="student-school">City / neighborhood in LA County *</label>
                <input
                  id="student-school"
                  required
                  type="text"
                  className={`input ${errors['studentInfo.school'] ? 'border-red-500 dark:border-red-400' : ''}`}
                  placeholder="e.g. San Fernando Valley, South LA"
                  value={formData.studentInfo.school}
                  onChange={(e) => {
                    setFormData({ ...formData, studentInfo: { ...formData.studentInfo, school: e.target.value } })
                    setFieldError('studentInfo.school', e.target.value)
                  }}
                  onBlur={() => setFieldError('studentInfo.school', formData.studentInfo.school)}
                  aria-invalid={!!errors['studentInfo.school']}
                  aria-describedby={errors['studentInfo.school'] ? 'err-student-school' : undefined}
                />
                {errors['studentInfo.school'] && <p id="err-student-school" className="mt-1 text-sm text-red-600 dark:text-red-400" role="alert">{errors['studentInfo.school']}</p>}
              </div>
            </div>
          </div>

          {/* Contact Information */}
          <div className="card">
            <h3 className="font-semibold text-lg mb-4">Contact Information</h3>
            <div className="grid gap-4 sm:grid-cols-2">
              <div>
                <label className="block text-sm font-medium mb-2" htmlFor="contact-parent">Your name *</label>
                <input
                  id="contact-parent"
                  required
                  type="text"
                  className={`input ${errors['contactInfo.parentName'] ? 'border-red-500 dark:border-red-400' : ''}`}
                  value={formData.contactInfo.parentName}
                  onChange={(e) => {
                    setFormData({ ...formData, contactInfo: { ...formData.contactInfo, parentName: e.target.value } })
                    setFieldError('contactInfo.parentName', e.target.value)
                  }}
                  onBlur={() => setFieldError('contactInfo.parentName', formData.contactInfo.parentName)}
                  aria-invalid={!!errors['contactInfo.parentName']}
                  aria-describedby={errors['contactInfo.parentName'] ? 'err-contact-parent' : undefined}
                />
                {errors['contactInfo.parentName'] && <p id="err-contact-parent" className="mt-1 text-sm text-red-600 dark:text-red-400" role="alert">{errors['contactInfo.parentName']}</p>}
              </div>
              <div>
                <label className="block text-sm font-medium mb-2" htmlFor="contact-phone">Phone Number *</label>
                <input
                  id="contact-phone"
                  required
                  type="tel"
                  className={`input ${errors['contactInfo.phone'] ? 'border-red-500 dark:border-red-400' : ''}`}
                  placeholder="(555) 123-4567"
                  value={formData.contactInfo.phone}
                  onChange={(e) => {
                    setFormData({ ...formData, contactInfo: { ...formData.contactInfo, phone: e.target.value } })
                    setFieldError('contactInfo.phone', e.target.value)
                  }}
                  onBlur={() => setFieldError('contactInfo.phone', formData.contactInfo.phone)}
                  aria-invalid={!!errors['contactInfo.phone']}
                  aria-describedby={errors['contactInfo.phone'] ? 'err-contact-phone' : undefined}
                />
                {errors['contactInfo.phone'] && <p id="err-contact-phone" className="mt-1 text-sm text-red-600 dark:text-red-400" role="alert">{errors['contactInfo.phone']}</p>}
              </div>
              <div>
                <label className="block text-sm font-medium mb-2" htmlFor="contact-email">Email Address *</label>
                <input
                  id="contact-email"
                  required
                  type="email"
                  className={`input ${errors['contactInfo.email'] ? 'border-red-500 dark:border-red-400' : ''}`}
                  value={formData.contactInfo.email}
                  onChange={(e) => {
                    setFormData({ ...formData, contactInfo: { ...formData.contactInfo, email: e.target.value } })
                    setFieldError('contactInfo.email', e.target.value)
                  }}
                  onBlur={() => setFieldError('contactInfo.email', formData.contactInfo.email)}
                  aria-invalid={!!errors['contactInfo.email']}
                  aria-describedby={errors['contactInfo.email'] ? 'err-contact-email' : undefined}
                />
                {errors['contactInfo.email'] && <p id="err-contact-email" className="mt-1 text-sm text-red-600 dark:text-red-400" role="alert">{errors['contactInfo.email']}</p>}
              </div>
              <div>
                <label className="block text-sm font-medium mb-2" htmlFor="contact-relationship">Your relationship *</label>
                <select
                  id="contact-relationship"
                  required
                  className={`input ${errors['contactInfo.relationship'] ? 'border-red-500 dark:border-red-400' : ''}`}
                  value={formData.contactInfo.relationship}
                  onChange={(e) => {
                    setFormData({ ...formData, contactInfo: { ...formData.contactInfo, relationship: e.target.value } })
                    setFieldError('contactInfo.relationship', e.target.value)
                  }}
                  onBlur={() => setFieldError('contactInfo.relationship', formData.contactInfo.relationship)}
                  aria-invalid={!!errors['contactInfo.relationship']}
                  aria-describedby={errors['contactInfo.relationship'] ? 'err-contact-relationship' : undefined}
                >
                  <option value="">Select relationship</option>
                  <option value="parent">Parent</option>
                  <option value="guardian">Legal Guardian</option>
                  <option value="relative">Relative</option>
                  <option value="self">Self (requesting for myself)</option>
                  <option value="social-worker">Social worker / case manager</option>
                  <option value="partner">Community partner / agency</option>
                  <option value="faith-leader">Faith leader / pastor</option>
                </select>
                {errors['contactInfo.relationship'] && <p id="err-contact-relationship" className="mt-1 text-sm text-red-600 dark:text-red-400" role="alert">{errors['contactInfo.relationship']}</p>}
              </div>
            </div>
          </div>

          {/* Needs Assessment */}
          <div className="card">
            <h3 className="font-semibold text-lg mb-4">What kind of support is needed? (Select all that apply)</h3>
            <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
              {[
                { key: 'schoolSupplies', label: 'Essentials & supplies', icon: Package, desc: 'Food, hygiene, household basics' },
                { key: 'clothing', label: 'Clothing', icon: Shirt, desc: 'Seasonal clothing and dignity items' },
                { key: 'shoes', label: 'Wellness support', icon: Heart, desc: 'Grief, trauma, mental health navigation' },
                { key: 'backpack', label: 'Resource navigation', icon: BookOpenText, desc: 'Help connecting to services' },
                { key: 'emergency', label: 'Emergency assistance', icon: CreditCard, desc: 'Urgent financial or crisis needs' },
                { key: 'other', label: 'Other', icon: Plus, desc: 'Describe below' }
              ].map(need => (
                <label key={need.key} className="flex items-start gap-3 p-3 border border-neutral-200 dark:border-neutral-700 rounded-lg hover:bg-neutral-50 dark:hover:bg-neutral-800/50 cursor-pointer transition-colors">
                  <input
                    type="checkbox"
                    checked={formData.needs[need.key as keyof typeof formData.needs] as boolean}
                    onChange={(e) => setFormData({
                      ...formData,
                      needs: {...formData.needs, [need.key]: e.target.checked}
                    })}
                    className="mt-1 h-4 w-4 text-primary-600 focus:ring-primary-500 border-gray-300 rounded"
                  />
                  <div className="flex-1">
                    <div className="flex items-center gap-2 mb-1">
                      <need.icon className="h-4 w-4 text-primary-600 dark:text-primary-400" />
                      <span className="font-medium text-sm">{need.label}</span>
                    </div>
                    <div className="text-xs text-neutral-600 dark:text-neutral-400">{need.desc}</div>
                  </div>
                </label>
              ))}
            </div>
          </div>

          {/* Additional Details */}
          <div className="card">
            <h3 className="font-semibold text-lg mb-4">Additional Information</h3>
            <div className="space-y-4">
              <div>
                <label className="block text-sm font-medium mb-2" htmlFor="details">
                  Describe the situation and specific needs (required)
                </label>
                <textarea
                  id="details"
                  required
                  rows={4}
                  className={`input resize-none ${errors.details ? 'border-red-500 dark:border-red-400' : ''}`}
                  placeholder="Please describe the situation, what support is needed, urgency, and any relevant details (omit sensitive identifiers you do not wish to share)..."
                  value={formData.details}
                  onChange={(e) => {
                    setFormData({ ...formData, details: e.target.value })
                    setFieldError('details', e.target.value)
                  }}
                  onBlur={() => setFieldError('details', formData.details)}
                  aria-invalid={!!errors.details}
                  aria-describedby={errors.details ? 'err-details' : undefined}
                />
                {errors.details && <p id="err-details" className="mt-1 text-sm text-red-600 dark:text-red-400" role="alert">{errors.details}</p>}
              </div>
              
              <div>
                <label className="block text-sm font-medium mb-2">Urgency Level</label>
                <div className="flex gap-3">
                  {[
                    { value: 'low', label: 'Low', color: 'text-green-600', desc: 'Within 2 weeks' },
                    { value: 'medium', label: 'Medium', color: 'text-yellow-600', desc: 'Within 1 week' },
                    { value: 'high', label: 'High', color: 'text-red-600', desc: 'Within 2-3 days' }
                  ].map(urgency => (
                    <label key={urgency.value} className="flex items-center gap-2 cursor-pointer">
                      <input
                        type="radio"
                        name="urgency"
                        value={urgency.value}
                        checked={formData.urgency === urgency.value}
                        onChange={(e) => setFormData({...formData, urgency: e.target.value})}
                        className="h-4 w-4 text-primary-600 focus:ring-primary-500"
                      />
                      <span className={`font-medium ${urgency.color}`}>{urgency.label}</span>
                      <span className="text-xs text-neutral-500">({urgency.desc})</span>
                    </label>
                  ))}
                </div>
              </div>
            </div>
          </div>

          {/* Submit */}
          <div className="card bg-primary-50 dark:bg-primary-900/20">
            {draftSaved && <p className="text-sm text-primary-700 dark:text-primary-300 mb-2" role="status">Draft saved. You can leave and return later.</p>}
            {submitError && (
              <div className="mb-4 p-3 rounded-lg bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800" role="alert">
                <p className="text-sm text-red-800 dark:text-red-200">{submitError}</p>
              </div>
            )}
            <div className="flex items-start gap-4 mb-6">
              <Shield className="h-6 w-6 text-primary-600 dark:text-primary-400 mt-1" />
              <div>
                <h3 className="font-semibold text-primary-900 dark:text-primary-100 mb-2">Privacy & Next Steps</h3>
                <ul className="text-sm text-primary-800 dark:text-primary-200 space-y-1">
                  <li>• All information is kept confidential and secure</li>
                  <li>• We will contact you within 24-48 hours to verify details</li>
                  <li>• Assistance is provided at no cost to families</li>
                  <li>• We may coordinate with trusted community partners when appropriate</li>
                </ul>
              </div>
            </div>
            
            <div className="flex flex-col sm:flex-row gap-4">
              <motion.button
                type="submit"
                disabled={isSubmitting}
                className="flex-1 btn-primary focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 disabled:opacity-70"
                whileHover={{ scale: 1.02 }}
                whileTap={{ scale: 0.98 }}
              >
                <ClipboardList className="mr-2 h-5 w-5" />
                {isSubmitting ? 'Submitting…' : 'Submit Request'}
              </motion.button>
              
              <a
                href="tel:+18184916884"
                className="btn-secondary text-center focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2"
              >
                <Phone className="mr-2 h-4 w-4" />
                Call for Urgent Needs
              </a>
            </div>
          </div>
        </form>
      </div>
    </PageShell>
  )
}

// Portals Overview Page
function PortalsPage() {
  return (
    <PageShell title="Staff & Partner Portals" icon={Building2} eyebrow="Secure access for team members">
      <div className="max-w-4xl mx-auto">
        <div className="grid gap-8 md:grid-cols-2 xl:grid-cols-4">
          {/* Admin Portal */}
          <motion.div
            className="card bg-gradient-to-br from-red-50 to-secondary-50 dark:from-red-900/20 dark:to-secondary-900/20 border-red-200 dark:border-red-800"
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ delay: 0.1 }}
          >
            <div className="text-center mb-6">
              <div className="mx-auto w-16 h-16 bg-red-600 text-white rounded-xl flex items-center justify-center mb-4">
                <Settings className="h-8 w-8" />
              </div>
              <h3 className="text-xl font-semibold text-red-900 dark:text-red-100">Administration Portal</h3>
              <p className="text-sm text-red-700 dark:text-red-300 mt-2">
                Full system access for administrators and directors
              </p>
            </div>
            
            <div className="space-y-2 text-sm text-red-800 dark:text-red-200 mb-6">
              <div className="flex items-center gap-2">
                <UserCheck className="h-4 w-4" />
                <span>Manage all requests & approvals</span>
              </div>
              <div className="flex items-center gap-2">
                <Database className="h-4 w-4" />
                <span>System configuration & reports</span>
              </div>
              <div className="flex items-center gap-2">
                <Users className="h-4 w-4" />
                <span>User management & permissions</span>
              </div>
            </div>
            
            <a
              href="#/admin-portal"
              className="block w-full text-center bg-red-600 text-white py-3 px-4 rounded-lg hover:bg-red-700 transition-colors font-medium focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2"
            >
              Access Admin Portal
            </a>
          </motion.div>

          {/* Volunteer Portal */}
          <motion.div
            className="card bg-gradient-to-br from-primary-50 to-sky-50 dark:from-primary-900/20 dark:to-sky-900/20 border-blue-200 dark:border-blue-800"
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ delay: 0.2 }}
          >
            <div className="text-center mb-6">
              <div className="mx-auto w-16 h-16 bg-blue-600 text-white rounded-xl flex items-center justify-center mb-4">
                <UserCheck className="h-8 w-8" />
              </div>
              <h3 className="text-xl font-semibold text-blue-900 dark:text-blue-100">Volunteer Portal</h3>
              <p className="text-sm text-blue-700 dark:text-blue-300 mt-2">
                For employees, volunteers, and coordinators
              </p>
            </div>
            
            <div className="space-y-2 text-sm text-blue-800 dark:text-blue-200 mb-6">
              <div className="flex items-center gap-2">
                <ClipboardList className="h-4 w-4" />
                <span>View assigned tasks & deliveries</span>
              </div>
              <div className="flex items-center gap-2">
                <Calendar className="h-4 w-4" />
                <span>Schedule & availability management</span>
              </div>
              <div className="flex items-center gap-2">
                <Package className="h-4 w-4" />
                <span>Inventory & kit assembly</span>
              </div>
            </div>
            
            <a
              href="#/volunteer-portal"
              className="block w-full text-center bg-blue-600 text-white py-3 px-4 rounded-lg hover:bg-blue-700 transition-colors font-medium focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
            >
              Access Volunteer Portal
            </a>
          </motion.div>

          {/* Resource Center Portal */}
          <motion.div
            className="card bg-gradient-to-br from-green-50 to-emerald-50 dark:from-green-900/20 dark:to-emerald-900/20 border-green-200 dark:border-green-800"
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ delay: 0.3 }}
          >
            <div className="text-center mb-6">
              <div className="mx-auto w-16 h-16 bg-green-600 text-white rounded-xl flex items-center justify-center mb-4">
                <School className="h-8 w-8" />
              </div>
              <h3 className="text-xl font-semibold text-green-900 dark:text-green-100">Resource Center Portal</h3>
              <p className="text-sm text-green-700 dark:text-green-300 mt-2">
                For community partners, agencies, and referral organizations
              </p>
            </div>
            
            <div className="space-y-2 text-sm text-green-800 dark:text-green-200 mb-6">
              <div className="flex items-center gap-2">
                <ClipboardList className="h-4 w-4" />
                <span>Submit assistance requests</span>
              </div>
              <div className="flex items-center gap-2">
                <FileCheck className="h-4 w-4" />
                <span>Track request status & approvals</span>
              </div>
              <div className="flex items-center gap-2">
                <Truck className="h-4 w-4" />
                <span>Coordinate delivery & pickup</span>
              </div>
            </div>
            
            <a
              href="#/resource-portal"
              className="block w-full text-center bg-green-600 text-white py-3 px-4 rounded-lg hover:bg-green-700 transition-colors font-medium focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2"
            >
              Access Resource Portal
            </a>
          </motion.div>

          {/* AI Assistance Portal - Phase 3 */}
          <motion.div
            className="card bg-gradient-to-br from-primary-50 to-primary-50 dark:from-primary-900/20 dark:to-primary-900/20 border-primary-200 dark:border-primary-800"
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ delay: 0.4 }}
          >
            <div className="text-center mb-6">
              <div className="mx-auto w-16 h-16 bg-primary-600 text-white rounded-xl flex items-center justify-center mb-4">
                <Brain className="h-8 w-8" />
              </div>
              <h3 className="text-xl font-semibold text-primary-900 dark:text-primary-100">AI Assistance Portal</h3>
              <p className="text-sm text-primary-700 dark:text-primary-300 mt-2">
                AI-powered request matching and insights
              </p>
            </div>
            
            <div className="space-y-2 text-sm text-primary-800 dark:text-primary-200 mb-6">
              <div className="flex items-center gap-2">
                <Cpu className="h-4 w-4" />
                <span>Real-time AI request processing</span>
              </div>
              <div className="flex items-center gap-2">
                <Target className="h-4 w-4" />
                <span>Smart resource matching & allocation</span>
              </div>
              <div className="flex items-center gap-2">
                <Activity className="h-4 w-4" />
                <span>Predictive analytics & insights</span>
              </div>
            </div>
            
            <a
              href="#/ai-portal"
              className="block w-full text-center bg-primary-600 text-white py-3 px-4 rounded-lg hover:bg-primary-700 transition-colors font-medium focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2"
            >
              Access AI Portal
            </a>
          </motion.div>
        </div>

        {/* Phase 3B: Enterprise Features Section */}
        <div className="mt-16">
          <div className="text-center mb-8">
            <h2 className="text-2xl font-bold text-gray-900 dark:text-white">Enterprise Analytics & Management</h2>
            <p className="text-gray-600 dark:text-gray-300 mt-2">Advanced tools for organizational optimization and impact tracking</p>
          </div>
          
          <div className="grid gap-8 md:grid-cols-2 xl:grid-cols-3">
            {/* Advanced Analytics */}
            <motion.div
              className="card bg-gradient-to-br from-indigo-50 to-primary-50 dark:from-indigo-900/20 dark:to-primary-900/20 border-indigo-200 dark:border-indigo-800"
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ delay: 0.5 }}
            >
              <div className="text-center mb-6">
                <div className="mx-auto w-16 h-16 bg-indigo-600 text-white rounded-xl flex items-center justify-center mb-4">
                  <BarChart3 className="h-8 w-8" />
                </div>
                <h3 className="text-xl font-semibold text-indigo-900 dark:text-indigo-100">Advanced Analytics</h3>
                <p className="text-sm text-indigo-700 dark:text-indigo-300 mt-2">
                  Comprehensive impact tracking and predictive insights
                </p>
              </div>
              
              <div className="space-y-2 text-sm text-indigo-800 dark:text-indigo-200 mb-6">
                <div className="flex items-center gap-2">
                  <TrendingUp className="h-4 w-4" />
                  <span>Impact forecasting & trend analysis</span>
                </div>
                <div className="flex items-center gap-2">
                  <Target className="h-4 w-4" />
                  <span>Resource demand prediction</span>
                </div>
                <div className="flex items-center gap-2">
                  <Activity className="h-4 w-4" />
                  <span>Geographic performance mapping</span>
                </div>
              </div>
              
              <a
                href="#/advanced-analytics"
                className="block w-full text-center bg-indigo-600 text-white py-3 px-4 rounded-lg hover:bg-indigo-700 transition-colors font-medium focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
              >
                View Analytics
              </a>
            </motion.div>

            {/* Mobile Volunteer App */}
            <motion.div
              className="card bg-gradient-to-br from-emerald-50 to-teal-50 dark:from-emerald-900/20 dark:to-teal-900/20 border-emerald-200 dark:border-emerald-800"
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ delay: 0.6 }}
            >
              <div className="text-center mb-6">
                <div className="mx-auto w-16 h-16 bg-emerald-600 text-white rounded-xl flex items-center justify-center mb-4">
                  <Phone className="h-8 w-8" />
                </div>
                <h3 className="text-xl font-semibold text-emerald-900 dark:text-emerald-100">Mobile Volunteer Hub</h3>
                <p className="text-sm text-emerald-700 dark:text-emerald-300 mt-2">
                  On-the-go assignment management for field volunteers
                </p>
              </div>
              
              <div className="space-y-2 text-sm text-emerald-800 dark:text-emerald-200 mb-6">
                <div className="flex items-center gap-2">
                  <MapPin className="h-4 w-4" />
                  <span>GPS-enabled assignment tracking</span>
                </div>
                <div className="flex items-center gap-2">
                  <Clock className="h-4 w-4" />
                  <span>Real-time status updates</span>
                </div>
                <div className="flex items-center gap-2">
                  <Bell className="h-4 w-4" />
                  <span>Push notifications & alerts</span>
                </div>
              </div>
              
              <a
                href="#/mobile-volunteer"
                className="block w-full text-center bg-emerald-600 text-white py-3 px-4 rounded-lg hover:bg-emerald-700 transition-colors font-medium focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-offset-2"
              >
                Launch Mobile App
              </a>
            </motion.div>

            {/* Staff Training System */}
            <motion.div
              className="card bg-gradient-to-br from-orange-50 to-amber-50 dark:from-orange-900/20 dark:to-amber-900/20 border-orange-200 dark:border-orange-800"
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ delay: 0.7 }}
            >
              <div className="text-center mb-6">
                <div className="mx-auto w-16 h-16 bg-orange-600 text-white rounded-xl flex items-center justify-center mb-4">
                  <BookOpenText className="h-8 w-8" />
                </div>
                <h3 className="text-xl font-semibold text-orange-900 dark:text-orange-100">Staff Training Center</h3>
                <p className="text-sm text-orange-700 dark:text-orange-300 mt-2">
                  Comprehensive AI platform training and adoption
                </p>
              </div>
              
              <div className="space-y-2 text-sm text-orange-800 dark:text-orange-200 mb-6">
                <div className="flex items-center gap-2">
                  <Award className="h-4 w-4" />
                  <span>Certification & competency tracking</span>
                </div>
                <div className="flex items-center gap-2">
                  <Users className="h-4 w-4" />
                  <span>Onboarding & mentorship programs</span>
                </div>
                <div className="flex items-center gap-2">
                  <FileText className="h-4 w-4" />
                  <span>Interactive training modules</span>
                </div>
              </div>
              
              <a
                href="#/staff-training"
                className="block w-full text-center bg-orange-600 text-white py-3 px-4 rounded-lg hover:bg-orange-700 transition-colors font-medium focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-2"
              >
                Access Training
              </a>
            </motion.div>
          </div>
        </div>

        {/* Access Information */}
        <div className="mt-12 card bg-neutral-50 dark:bg-neutral-800/50">
          <div className="text-center mb-6">
            <Lock className="mx-auto h-8 w-8 text-neutral-600 dark:text-neutral-400 mb-3" />
            <h3 className="text-lg font-semibold">Access Requirements</h3>
          </div>
          
          <div className="grid gap-6 md:grid-cols-2">
            <div>
              <h4 className="font-medium mb-3">New Users</h4>
              <ul className="text-sm text-neutral-600 dark:text-neutral-400 space-y-1">
                <li>• Contact your supervisor for account setup</li>
                <li>• Provide official email address</li>
                <li>• Complete background check (if required)</li>
                <li>• Attend system orientation session</li>
              </ul>
            </div>
            <div>
              <h4 className="font-medium mb-3">Login Issues</h4>
              <ul className="text-sm text-neutral-600 dark:text-neutral-400 space-y-1">
                <li>• Use forgot password link on login page</li>
                <li>• Contact IT support: <a className="underline" href={SITE.emailHref}>{SITE.email}</a></li>
                <li>• Call main office: (818) 491-6884</li>
                <li>• Check email for account activation</li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </PageShell>
  )
}

/* ===================== Phase 2: UI Components ===================== */

// Real-time Notification System  
export function NotificationCenter() {
  const { notifications, markAsRead, clearAll, unreadCount } = useNotifications()
  const [isOpen, setIsOpen] = useState(false)
  
  // Close dropdown when clicking outside
  useEffect(() => {
    const handleClickOutside = (event: MouseEvent) => {
      const target = event.target as Element
      if (isOpen && !target.closest('[data-notification-center]')) {
        setIsOpen(false)
      }
    }
    
    document.addEventListener('mousedown', handleClickOutside)
    return () => document.removeEventListener('mousedown', handleClickOutside)
  }, [isOpen])

  return (
    <div className="relative" data-notification-center>
      <motion.button
        onClick={() => setIsOpen(!isOpen)}
        className="relative p-2 text-neutral-700 dark:text-neutral-200 hover:bg-neutral-100 dark:hover:bg-neutral-800 rounded-lg transition-colors"
        whileHover={{ scale: 1.05 }}
        whileTap={{ scale: 0.95 }}
      >
        {unreadCount > 0 ? <BellRing className="h-6 w-6" /> : <Bell className="h-6 w-6" />}
        {unreadCount > 0 && (
          <motion.span
            className="absolute -top-1 -right-1 bg-red-500 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center"
            initial={{ scale: 0 }}
            animate={{ scale: 1 }}
            transition={{ type: 'spring', stiffness: 500, damping: 30 }}
          >
            {unreadCount > 9 ? '9+' : unreadCount}
          </motion.span>
        )}
      </motion.button>

      <AnimatePresence>
        {isOpen && (
          <motion.div
            className="absolute top-full right-0 mt-2 w-80 bg-white dark:bg-neutral-900 rounded-xl shadow-xl border border-neutral-200 dark:border-neutral-700 z-50"
            initial={{ opacity: 0, y: -10, scale: 0.95 }}
            animate={{ opacity: 1, y: 0, scale: 1 }}
            exit={{ opacity: 0, y: -10, scale: 0.95 }}
            transition={{ duration: 0.2 }}
          >
            <div className="p-4 border-b border-neutral-200 dark:border-neutral-700">
              <div className="flex items-center justify-between">
                <h3 className="font-semibold">Notifications</h3>
                {notifications.length > 0 && (
                  <button
                    onClick={clearAll}
                    className="text-sm text-neutral-500 hover:text-neutral-700 dark:hover:text-neutral-300"
                  >
                    Clear All
                  </button>
                )}
              </div>
            </div>
            
            <div className="max-h-96 overflow-y-auto">
              {notifications.length === 0 ? (
                <div className="p-8 text-center text-neutral-500">
                  <Bell className="h-8 w-8 mx-auto mb-2 opacity-50" />
                  <p>No notifications</p>
                </div>
              ) : (
                notifications.map((notification) => (
                  <motion.div
                    key={notification.id}
                    className={`p-4 border-b border-neutral-100 dark:border-neutral-800 hover:bg-neutral-50 dark:hover:bg-neutral-800/50 cursor-pointer ${
                      !notification.read ? 'bg-primary-50/50 dark:bg-primary-900/20' : ''
                    }`}
                    onClick={() => markAsRead(notification.id)}
                    whileHover={{ x: 4 }}
                  >
                    <div className="flex items-start gap-3">
                      <div className={`p-1 rounded-full ${
                        notification.type === 'success' ? 'bg-green-100 text-green-600' :
                        notification.type === 'error' ? 'bg-red-100 text-red-600' :
                        notification.type === 'warning' ? 'bg-yellow-100 text-yellow-600' :
                        'bg-blue-100 text-blue-600'
                      }`}>
                        {notification.type === 'success' ? <Check className="h-4 w-4" /> :
                         notification.type === 'error' ? <AlertCircle className="h-4 w-4" /> :
                         notification.type === 'warning' ? <AlertCircle className="h-4 w-4" /> :
                         <Bell className="h-4 w-4" />}
                      </div>
                      <div className="flex-1 min-w-0">
                        <h4 className="font-medium text-sm">{notification.title}</h4>
                        <p className="text-sm text-neutral-600 dark:text-neutral-400 mt-1">{notification.message}</p>
                        <p className="text-xs text-neutral-500 mt-2">
                          {new Date(notification.timestamp).toLocaleString()}
                        </p>
                      </div>
                      {!notification.read && (
                        <div className="w-2 h-2 bg-primary-500 rounded-full mt-2"></div>
                      )}
                    </div>
                  </motion.div>
                ))
              )}
            </div>
          </motion.div>
        )}
      </AnimatePresence>
    </div>
  )
}

// Language Selector Component
export function LanguageSelector() {
  const { currentLanguage, languages, changeLanguage } = useLanguage()
  const [isOpen, setIsOpen] = useState(false)
  
  // Close dropdown when clicking outside
  useEffect(() => {
    const handleClickOutside = (event: MouseEvent) => {
      const target = event.target as Element
      if (isOpen && !target.closest('[data-language-selector]')) {
        setIsOpen(false)
      }
    }
    
    document.addEventListener('mousedown', handleClickOutside)
    return () => document.removeEventListener('mousedown', handleClickOutside)
  }, [isOpen])

  return (
    <div className="relative" data-language-selector>
      <motion.button
        onClick={() => setIsOpen(!isOpen)}
        className="flex items-center gap-2 p-2 text-neutral-700 dark:text-neutral-200 hover:bg-neutral-100 dark:hover:bg-neutral-800 rounded-lg transition-colors"
        whileHover={{ scale: 1.05 }}
        whileTap={{ scale: 0.95 }}
      >
        <Languages className="h-5 w-5" />
        <span className="text-lg">{currentLanguage.flag}</span>
        <ChevronDown className="h-4 w-4" />
      </motion.button>

      <AnimatePresence>
        {isOpen && (
          <motion.div
            className="absolute top-full right-0 mt-2 bg-white dark:bg-neutral-900 rounded-xl shadow-xl border border-neutral-200 dark:border-neutral-700 z-50 min-w-48"
            initial={{ opacity: 0, y: -10 }}
            animate={{ opacity: 1, y: 0 }}
            exit={{ opacity: 0, y: -10 }}
          >
            {languages.map((language) => (
              <motion.button
                key={language.code}
                onClick={() => {
                  changeLanguage(language.code)
                  setIsOpen(false)
                }}
                className={`w-full flex items-center gap-3 p-3 hover:bg-neutral-100 dark:hover:bg-neutral-800 transition-colors first:rounded-t-xl last:rounded-b-xl ${
                  currentLanguage.code === language.code ? 'bg-primary-50 dark:bg-primary-900/20' : ''
                }`}
                whileHover={{ x: 4 }}
              >
                <span className="text-lg">{language.flag}</span>
                <div className="text-left">
                  <div className="font-medium text-sm">{language.name}</div>
                  <div className="text-xs text-neutral-500">{language.nativeName}</div>
                </div>
                {currentLanguage.code === language.code && (
                  <Check className="h-4 w-4 text-primary-600 ml-auto" />
                )}
              </motion.button>
            ))}
          </motion.div>
        )}
      </AnimatePresence>
    </div>
  )
}

// PWA Install Prompt
function PWAInstallPrompt() {
  const { isInstallable, installApp } = usePWA()
  const [showPrompt, setShowPrompt] = useState(false)

  useEffect(() => {
    if (isInstallable) {
      const timer = setTimeout(() => setShowPrompt(true), 3000)
      return () => clearTimeout(timer)
    }
  }, [isInstallable])

  if (!showPrompt) return null

  return (
    <AnimatePresence>
      <motion.div
        className="fixed bottom-4 left-4 right-4 md:left-auto md:right-4 md:w-80 bg-white dark:bg-neutral-900 rounded-xl shadow-xl border border-neutral-200 dark:border-neutral-700 z-50"
        initial={{ opacity: 0, y: 100 }}
        animate={{ opacity: 1, y: 0 }}
        exit={{ opacity: 0, y: 100 }}
      >
        <div className="p-4">
          <div className="flex items-start gap-3">
            <div className="p-2 bg-primary-100 dark:bg-primary-900/30 rounded-lg">
              <Download className="h-5 w-5 text-primary-600 dark:text-primary-400" />
            </div>
            <div className="flex-1">
              <h3 className="font-semibold text-sm">Install Miracles in Motion</h3>
              <p className="text-xs text-neutral-600 dark:text-neutral-400 mt-1">
                Get faster access and offline features by installing our app
              </p>
            </div>
            <button
              onClick={() => setShowPrompt(false)}
              className="text-neutral-400 hover:text-neutral-600 dark:hover:text-neutral-300"
            >
              <X className="h-4 w-4" />
            </button>
          </div>
          <div className="flex gap-2 mt-4">
            <button
              onClick={async () => {
                const success = await installApp()
                if (success) setShowPrompt(false)
              }}
              className="btn-primary text-sm px-4 py-2 flex-1"
            >
              Install
            </button>
            <button
              onClick={() => setShowPrompt(false)}
              className="btn-secondary text-sm px-4 py-2"
            >
              Later
            </button>
          </div>
        </div>
      </motion.div>
    </AnimatePresence>
  )
}

/* ===================== Authentication Components ===================== */
function LoginForm({ requiredRole }: { requiredRole?: 'admin' | 'volunteer' | 'resource' }) {
  const { login, isLoading } = useAuth()
  const [formData, setFormData] = useState({ email: '', password: '' })
  const [error, setError] = useState('')

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setError('')
    
    const success = await login(formData.email, formData.password)
    if (!success) {
      setError('Invalid credentials. Please try again.')
    }
  }

  const getRoleHint = () => {
    switch (requiredRole) {
      case 'admin': return 'Use an email containing "admin" to access admin features'
      case 'volunteer': return 'Use an email containing "volunteer" for volunteer access'
      case 'resource': return 'Use any other email for resource center access'
      default: return 'Enter your credentials to access the portal'
    }
  }

  return (
    <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-primary-50 to-secondary-50 dark:from-gray-900 dark:to-gray-800 px-4">
      <motion.div 
        className="w-full max-w-md"
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.6 }}
      >
        <div className="text-center mb-8">
          <motion.div 
            className="inline-flex items-center justify-center w-16 h-16 bg-primary-600 text-white rounded-full mb-4"
            whileHover={{ scale: 1.05, rotateY: 180 }}
            style={{ transformStyle: 'preserve-3d' }}
          >
            <Lock className="w-8 h-8" />
          </motion.div>
          <h1 className="text-2xl font-bold text-gray-900 dark:text-white">
            {requiredRole ? `${requiredRole.charAt(0).toUpperCase() + requiredRole.slice(1)} Portal` : 'Portal Access'}
          </h1>
          <p className="text-gray-600 dark:text-gray-400 mt-2">
            Sign in to access your dashboard
          </p>
        </div>

        <div className="card">
          <form onSubmit={handleSubmit} className="space-y-4">
            <div>
              <label htmlFor="email" className="block text-sm font-medium mb-2">
                Email Address
              </label>
              <input
                id="email"
                type="email"
                required
                value={formData.email}
                onChange={(e) => setFormData({ ...formData, email: e.target.value })}
                className="input w-full focus:ring-2 focus:ring-primary-500 focus:border-primary-500"
                placeholder="your.email@example.com"
                style={{ minHeight: '44px' }} // Mobile touch optimization
              />
            </div>
            
            <div>
              <label htmlFor="password" className="block text-sm font-medium mb-2">
                Password
              </label>
              <input
                id="password"
                type="password"
                required
                value={formData.password}
                onChange={(e) => setFormData({ ...formData, password: e.target.value })}
                className="input w-full focus:ring-2 focus:ring-primary-500 focus:border-primary-500"
                placeholder="Enter your password"
                style={{ minHeight: '44px' }} // Mobile touch optimization
              />
            </div>

            {error && (
              <motion.div 
                className="text-red-600 dark:text-red-400 text-sm p-3 bg-red-50 dark:bg-red-900/20 rounded-lg border border-red-200 dark:border-red-800"
                initial={{ opacity: 0, x: -10 }}
                animate={{ opacity: 1, x: 0 }}
              >
                {error}
              </motion.div>
            )}

            <div className="text-xs text-gray-500 dark:text-gray-400 p-3 bg-gray-50 dark:bg-gray-800/50 rounded-lg">
              <strong>Demo Access:</strong> {getRoleHint()}
            </div>

            <motion.button
              type="submit"
              disabled={isLoading}
              className="w-full btn-primary disabled:opacity-50 disabled:cursor-not-allowed"
              style={{ minHeight: '44px' }} // Mobile touch optimization
              whileHover={{ scale: isLoading ? 1 : 1.02 }}
              whileTap={{ scale: isLoading ? 1 : 0.98 }}
            >
              {isLoading ? (
                <><Clock className="w-4 h-4 mr-2 animate-spin" /> Signing In...</>
              ) : (
                <>Sign In</>
              )}
            </motion.button>
          </form>
          
          <div className="mt-6 text-center">
            <a href="#/" className="text-sm text-primary-600 dark:text-primary-400 hover:underline">
              ← Back to Main Site
            </a>
          </div>
        </div>
      </motion.div>
    </div>
  )
}

function PortalWrapper({ children, requiredRole }: { children: React.ReactNode, requiredRole?: 'admin' | 'volunteer' | 'resource' }) {
  const { user } = useAuth()
  
  if (!user) {
    return <LoginForm requiredRole={requiredRole} />
  }
  
  if (requiredRole && user.role !== requiredRole) {
    return (
      <div className="min-h-screen flex items-center justify-center px-4">
        <div className="card max-w-md w-full text-center">
          <AlertCircle className="w-16 h-16 text-red-500 mx-auto mb-4" />
          <h2 className="text-xl font-bold mb-2">Access Denied</h2>
          <p className="text-gray-600 dark:text-gray-400 mb-4">
            You don't have permission to access the {requiredRole} portal.
          </p>
          <div className="space-y-2">
            <a href="#/" className="btn-primary">
              Return to Main Site
            </a>
            <button 
              onClick={() => useAuth().logout()}
              className="btn-secondary w-full"
            >
              Sign Out
            </button>
          </div>
        </div>
      </div>
    )
  }
  
  return <>{children}</>
}

// Admin Portal Dashboard
function AdminPortalPage() {
  const { user, logout } = useAuth()
  const [stats] = useState({
    pendingRequests: 23,
    activeVolunteers: 47,
    deliveriesToday: 8,
    monthlyBudget: 15000,
    monthlySpent: 8250
  })

  useEffect(() => {
    trackEvent('admin_portal_view', { user_id: user?.id, user_role: user?.role })
  }, [])

  return (
    <PortalWrapper requiredRole="admin">
      <SEOHead title="Admin Dashboard" description="Administrative portal for Miracles in Motion staff and administrators." />
      <PageShell 
        title="Administration Dashboard" 
        icon={Settings} 
        eyebrow={`Welcome back, ${user?.name}`}
        cta={
          <button onClick={logout} className="btn-secondary focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2">
            Sign Out
          </button>
        }
      >
      <div className="space-y-8">
        {/* Quick Stats */}
        <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
          <motion.div className="card bg-red-50 dark:bg-red-900/20 border-red-200 dark:border-red-800" initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ delay: 0.1 }}>
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm text-red-700 dark:text-red-300">Pending Requests</p>
                <p className="text-2xl font-bold text-red-900 dark:text-red-100">{stats.pendingRequests}</p>
              </div>
              <AlertCircle className="h-8 w-8 text-red-600 dark:text-red-400" />
            </div>
          </motion.div>

          <motion.div className="card bg-blue-50 dark:bg-blue-900/20 border-blue-200 dark:border-blue-800" initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ delay: 0.2 }}>
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm text-blue-700 dark:text-blue-300">Active Volunteers</p>
                <p className="text-2xl font-bold text-blue-900 dark:text-blue-100">{stats.activeVolunteers}</p>
              </div>
              <UserCheck className="h-8 w-8 text-blue-600 dark:text-blue-400" />
            </div>
          </motion.div>

          <motion.div className="card bg-green-50 dark:bg-green-900/20 border-green-200 dark:border-green-800" initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ delay: 0.3 }}>
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm text-green-700 dark:text-green-300">Deliveries Today</p>
                <p className="text-2xl font-bold text-green-900 dark:text-green-100">{stats.deliveriesToday}</p>
              </div>
              <Truck className="h-8 w-8 text-green-600 dark:text-green-400" />
            </div>
          </motion.div>

          <motion.div className="card bg-yellow-50 dark:bg-yellow-900/20 border-yellow-200 dark:border-yellow-800" initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ delay: 0.4 }}>
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm text-yellow-700 dark:text-yellow-300">Budget Used</p>
                <p className="text-2xl font-bold text-yellow-900 dark:text-yellow-100">{Math.round((stats.monthlySpent / stats.monthlyBudget) * 100)}%</p>
              </div>
              <DollarSign className="h-8 w-8 text-yellow-600 dark:text-yellow-400" />
            </div>
          </motion.div>
        </div>

        <div className="grid gap-8 lg:grid-cols-3">
          {/* Recent Requests */}
          <div className="lg:col-span-2">
            <div className="card">
              <div className="flex items-center justify-between mb-6">
                <h3 className="text-lg font-semibold">Recent Assistance Requests</h3>
                <button className="btn-secondary text-sm">View All</button>
              </div>
              <div className="space-y-4">
                {[
                  { student: 'Maria S.', school: 'San Fernando Valley', need: 'Emergency essentials', priority: 'High', time: '2 hours ago' },
                  { student: 'James R.', school: 'South LA', need: 'Clothing & outreach', priority: 'Medium', time: '4 hours ago' },
                  { student: 'Ana L.', school: 'East LA', need: 'Resource navigation', priority: 'Low', time: '1 day ago' }
                ].map((request, i) => (
                  <div key={i} className="flex items-center justify-between p-4 bg-neutral-50 dark:bg-neutral-800 rounded-lg">
                    <div className="flex-1">
                      <div className="flex items-center gap-2 mb-1">
                        <span className="font-medium">{request.student}</span>
                        <span className={`px-2 py-1 text-xs rounded-full ${
                          request.priority === 'High' ? 'bg-red-100 text-red-800 dark:bg-red-900/20 dark:text-red-300' :
                          request.priority === 'Medium' ? 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900/20 dark:text-yellow-300' :
                          'bg-green-100 text-green-800 dark:bg-green-900/20 dark:text-green-300'
                        }`}>
                          {request.priority}
                        </span>
                      </div>
                      <p className="text-sm text-neutral-600 dark:text-neutral-400">{request.school}</p>
                      <p className="text-sm">{request.need}</p>
                    </div>
                    <div className="text-right">
                      <p className="text-xs text-neutral-500">{request.time}</p>
                      <button className="text-primary-600 dark:text-primary-400 text-sm mt-1 hover:underline">Review</button>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </div>

          {/* Quick Actions */}
          <div>
            <div className="card">
              <h3 className="text-lg font-semibold mb-6">Quick Actions</h3>
              <div className="space-y-3">
                <button className="w-full btn-primary text-left justify-start">
                  <Plus className="mr-2 h-4 w-4" />
                  Create New User
                </button>
                <button className="w-full btn-secondary text-left justify-start">
                  <FileCheck className="mr-2 h-4 w-4" />
                  Approve Pending Requests
                </button>
                <button className="w-full btn-secondary text-left justify-start">
                  <Database className="mr-2 h-4 w-4" />
                  Generate Reports
                </button>
                <button className="w-full btn-secondary text-left justify-start">
                  <Settings className="mr-2 h-4 w-4" />
                  System Settings
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </PageShell>
    </PortalWrapper>
  )
}

// Volunteer Portal Dashboard  
function VolunteerPortalPage() {
  const { user, logout } = useAuth()

  useEffect(() => {
    trackEvent('volunteer_portal_view', { user_id: user?.id, user_role: user?.role })
  }, [])

  return (
    <PortalWrapper requiredRole="volunteer">
      <SEOHead title="Volunteer Dashboard" description="Volunteer portal for Miracles in Motion volunteers to manage assignments and schedules." />
      <PageShell 
        title="Volunteer Dashboard" 
        icon={UserCheck} 
        eyebrow={`Hello, ${user?.name}`}
        cta={
          <button onClick={logout} className="btn-secondary focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2">
            Sign Out
          </button>
        }
      >
      <div className="space-y-8">
        {/* Today's Tasks */}
        <div className="card bg-blue-50 dark:bg-blue-900/20 border-blue-200 dark:border-blue-800">
          <div className="flex items-center gap-4 mb-6">
            <Calendar className="h-8 w-8 text-blue-600 dark:text-blue-400" />
            <div>
              <h3 className="text-lg font-semibold text-blue-900 dark:text-blue-100">Today's Schedule</h3>
              <p className="text-blue-700 dark:text-blue-300">Tuesday, March 14, 2024</p>
            </div>
          </div>
          
          <div className="space-y-4">
            {[
              { time: '9:00 AM', task: 'Outreach kit assembly', location: 'Main warehouse', students: 12 },
              { time: '1:00 PM', task: 'Delivery route — Valley area', location: 'LA County', students: 5 },
              { time: '3:30 PM', task: 'Inventory — seasonal clothing', location: 'Storage room B', students: null }
            ].map((task, i) => (
              <div key={i} className="flex items-center justify-between p-4 bg-white dark:bg-neutral-900 rounded-lg shadow-sm">
                <div className="flex items-center gap-4">
                  <div className="text-center">
                    <div className="text-lg font-semibold text-blue-600 dark:text-blue-400">{task.time}</div>
                  </div>
                  <div>
                    <h4 className="font-medium">{task.task}</h4>
                    <p className="text-sm text-neutral-600 dark:text-neutral-400">{task.location}</p>
                    {task.students && <p className="text-xs text-green-600 dark:text-green-400">{task.students} families served</p>}
                  </div>
                </div>
                <button className="btn-secondary text-sm">
                  <Check className="mr-1 h-3 w-3" />
                  Complete
                </button>
              </div>
            ))}
          </div>
        </div>

        <div className="grid gap-8 lg:grid-cols-2">
          {/* Assigned Deliveries */}
          <div className="card">
            <div className="flex items-center justify-between mb-6">
              <h3 className="text-lg font-semibold">Pending Deliveries</h3>
              <Truck className="h-6 w-6 text-neutral-400" />
            </div>
            <div className="space-y-3">
              {[
                { student: 'Sofia M.', items: 'Essentials kit', school: 'San Fernando Valley', deadline: 'Tomorrow' },
                { student: 'Carlos R.', items: 'Winter clothing', school: 'South LA', deadline: 'Friday' },
                { student: 'Emma K.', items: 'Wellness navigation', school: 'East LA', deadline: 'Next week' }
              ].map((delivery, i) => (
                <div key={i} className="p-3 border border-neutral-200 dark:border-neutral-700 rounded-lg">
                  <div className="flex items-center justify-between mb-2">
                    <span className="font-medium">{delivery.student}</span>
                    <span className="text-xs text-neutral-500">{delivery.deadline}</span>
                  </div>
                  <p className="text-sm text-neutral-600 dark:text-neutral-400 mb-1">{delivery.items}</p>
                  <p className="text-xs text-neutral-500">{delivery.school}</p>
                </div>
              ))}
            </div>
          </div>

          {/* Volunteer Stats */}
          <div className="card">
            <h3 className="text-lg font-semibold mb-6">Your Impact This Month</h3>
            <div className="space-y-4">
              <div className="flex items-center justify-between">
                <div className="flex items-center gap-2">
                  <Users className="h-4 w-4 text-primary-600 dark:text-primary-400" />
                  <span>Families helped</span>
                </div>
                <span className="font-semibold text-primary-600 dark:text-primary-400">47</span>
              </div>
              <div className="flex items-center justify-between">
                <div className="flex items-center gap-2">
                  <Package className="h-4 w-4 text-primary-600 dark:text-primary-400" />
                  <span>Kits Assembled</span>
                </div>
                <span className="font-semibold text-primary-600 dark:text-primary-400">23</span>
              </div>
              <div className="flex items-center justify-between">
                <div className="flex items-center gap-2">
                  <Truck className="h-4 w-4 text-primary-600 dark:text-primary-400" />
                  <span>Deliveries Made</span>
                </div>
                <span className="font-semibold text-primary-600 dark:text-primary-400">15</span>
              </div>
              <div className="flex items-center justify-between">
                <div className="flex items-center gap-2">
                  <Clock className="h-4 w-4 text-primary-600 dark:text-primary-400" />
                  <span>Hours Volunteered</span>
                </div>
                <span className="font-semibold text-primary-600 dark:text-primary-400">32</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </PageShell>
    </PortalWrapper>
  )
}

// Resource Center Portal Dashboard
function ResourcePortalPage() {
  const { user, logout } = useAuth()

  useEffect(() => {
    trackEvent('resource_portal_view', { user_id: user?.id, user_role: user?.role })
  }, [])

  return (
    <PortalWrapper requiredRole="resource">
      <SEOHead title="Resource Portal" description="Partner portal for submitting and tracking assistance requests." />
      <PageShell 
        title="Resource Center Portal" 
        icon={School} 
        eyebrow={`Welcome, ${user?.name}`}
        cta={
          <button onClick={logout} className="btn-secondary focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2">
            Sign Out
          </button>
        }
      >
        <div className="space-y-8">
        {/* Quick Submit */}
        <div className="card bg-green-50 dark:bg-green-900/20 border-green-200 dark:border-green-800">
          <div className="flex items-center gap-4 mb-6">
            <Plus className="h-8 w-8 text-green-600 dark:text-green-400" />
            <div>
              <h3 className="text-lg font-semibold text-green-900 dark:text-green-100">Quick Request Submission</h3>
              <p className="text-green-700 dark:text-green-300">Submit a new assistance request</p>
            </div>
          </div>
          
          <div className="flex flex-col sm:flex-row gap-4">
            <a href="#/request-assistance" className="flex-1 btn-primary">
              <ClipboardList className="mr-2 h-4 w-4" />
              New Assistance Request
            </a>
            <button className="btn-secondary">
              <FileCheck className="mr-2 h-4 w-4" />
              Bulk Upload (CSV)
            </button>
          </div>
        </div>

        <div className="grid gap-8 lg:grid-cols-3">
          {/* Request Status */}
          <div className="lg:col-span-2">
            <div className="card">
              <div className="flex items-center justify-between mb-6">
                <h3 className="text-lg font-semibold">Your Recent Requests</h3>
                <button className="btn-secondary text-sm">View All Requests</button>
              </div>
              <div className="space-y-4">
                {[
                  { id: 'REQ-2024-0342', student: 'Maria Santos', status: 'In Progress', need: 'Emergency essentials', submitted: '2 days ago', eta: 'Tomorrow' },
                  { id: 'REQ-2024-0341', student: 'James Rodriguez', status: 'Approved', need: 'Clothing & outreach', submitted: '3 days ago', eta: 'Today' },
                  { id: 'REQ-2024-0340', student: 'Ana Lopez', status: 'Delivered', need: 'Resource navigation', submitted: '1 week ago', eta: 'Completed' }
                ].map((request, i) => (
                  <div key={i} className="p-4 border border-neutral-200 dark:border-neutral-700 rounded-lg">
                    <div className="flex items-center justify-between mb-2">
                      <div className="flex items-center gap-3">
                        <span className="font-mono text-sm text-neutral-500">{request.id}</span>
                        <span className={`px-2 py-1 text-xs rounded-full ${
                          request.status === 'Delivered' ? 'bg-green-100 text-green-800 dark:bg-green-900/20 dark:text-green-300' :
                          request.status === 'Approved' ? 'bg-blue-100 text-blue-800 dark:bg-blue-900/20 dark:text-blue-300' :
                          request.status === 'In Progress' ? 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900/20 dark:text-yellow-300' :
                          'bg-red-100 text-red-800 dark:bg-red-900/20 dark:text-red-300'
                        }`}>
                          {request.status}
                        </span>
                      </div>
                      <span className="text-xs text-neutral-500">{request.submitted}</span>
                    </div>
                    <div className="flex items-center justify-between">
                      <div>
                        <p className="font-medium">{request.student}</p>
                        <p className="text-sm text-neutral-600 dark:text-neutral-400">{request.need}</p>
                      </div>
                      <div className="text-right">
                        <p className="text-sm text-neutral-600 dark:text-neutral-400">ETA: {request.eta}</p>
                        <button className="text-primary-600 dark:text-primary-400 text-sm hover:underline">View Details</button>
                      </div>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </div>

          {/* Stats & Resources */}
          <div className="space-y-6">
            <div className="card">
              <h3 className="text-lg font-semibold mb-4">Monthly Summary</h3>
              <div className="space-y-3">
                <div className="flex items-center justify-between">
                  <span className="text-sm">Requests Submitted</span>
                  <span className="font-semibold text-green-600 dark:text-green-400">12</span>
                </div>
                <div className="flex items-center justify-between">
                  <span className="text-sm">Students Helped</span>
                  <span className="font-semibold text-green-600 dark:text-green-400">28</span>
                </div>
                <div className="flex items-center justify-between">
                  <span className="text-sm">Avg. Response Time</span>
                  <span className="font-semibold text-green-600 dark:text-green-400">18 hrs</span>
                </div>
              </div>
            </div>

            <div className="card">
              <h3 className="text-lg font-semibold mb-4">Quick Links</h3>
              <div className="space-y-2">
                <a href="#/request-assistance" className="block w-full btn-secondary text-left justify-start text-sm">
                  <ClipboardList className="mr-2 h-4 w-4" />
                  Submit Request
                </a>
                <button className="w-full btn-secondary text-left justify-start text-sm">
                  <FileCheck className="mr-2 h-4 w-4" />
                  Request History
                </button>
                <button className="w-full btn-secondary text-left justify-start text-sm">
                  <Calendar className="mr-2 h-4 w-4" />
                  Schedule Pickup
                </button>
                <button className="w-full btn-secondary text-left justify-start text-sm">
                  <Phone className="mr-2 h-4 w-4" />
                  Contact Support
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </PageShell>
    </PortalWrapper>
  )
}

// Advanced Analytics Dashboard
function AnalyticsDashboard() {
  const { user, logout } = useAuth()
  const { analyticsData, refreshAnalytics } = useAnalytics()
  const { addNotification } = useNotifications()

  useEffect(() => {
    trackEvent('analytics_dashboard_view', { user_id: user?.id, user_role: user?.role })
  }, [])

  const handleRefresh = () => {
    refreshAnalytics()
    addNotification({
      type: 'success',
      title: 'Data Refreshed',
      message: 'Analytics data has been updated with the latest information'
    })
  }

  return (
    <PortalWrapper requiredRole="admin">
      <SEOHead title="Analytics Dashboard" description="Real-time analytics and insights for Miracles in Motion." />
      <PageShell 
        title="Analytics Dashboard" 
        icon={BarChart3} 
        eyebrow={`Data Insights for ${user?.name}`}
        cta={
          <div className="flex gap-2">
            <motion.button
              onClick={handleRefresh}
              className="btn-secondary flex items-center gap-2"
              whileHover={{ scale: 1.05 }}
              whileTap={{ scale: 0.95 }}
            >
              <Activity className="h-4 w-4" /> Refresh
            </motion.button>
            <button onClick={logout} className="btn-secondary">
              Sign Out
            </button>
          </div>
        }
      >
        <div className="space-y-8">
          {/* Key Metrics */}
          <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
            <motion.div 
              className="card bg-gradient-to-br from-primary-50 to-primary-100 dark:from-primary-900/20 dark:to-primary-800/20 border-blue-200 dark:border-blue-800"
              whileHover={{ scale: 1.02, y: -2 }}
            >
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-sm text-blue-600 dark:text-blue-400">Total Donations</p>
                  <p className="text-2xl font-bold text-blue-900 dark:text-blue-100">
                    ${analyticsData.donationMetrics.amount.toLocaleString()}
                  </p>
                </div>
                <TrendingUp className="h-8 w-8 text-blue-500" />
              </div>
              <div className="mt-2 flex items-center text-sm">
                <span className="text-green-600 dark:text-green-400 font-medium">+12.5%</span>
                <span className="text-blue-600 dark:text-blue-400 ml-1">vs last month</span>
              </div>
            </motion.div>

            <motion.div 
              className="card bg-gradient-to-br from-green-50 to-green-100 dark:from-green-900/20 dark:to-green-800/20 border-green-200 dark:border-green-800"
              whileHover={{ scale: 1.02, y: -2 }}
            >
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-sm text-green-600 dark:text-green-400">Active Volunteers</p>
                  <p className="text-2xl font-bold text-green-900 dark:text-green-100">247</p>
                </div>
                <Users className="h-8 w-8 text-green-500" />
              </div>
              <div className="mt-2 flex items-center text-sm">
                <span className="text-green-600 dark:text-green-400 font-medium">+8.3%</span>
                <span className="text-green-600 dark:text-green-400 ml-1">vs last month</span>
              </div>
            </motion.div>

            <motion.div 
              className="card bg-gradient-to-br from-primary-50 to-primary-100 dark:from-primary-900/20 dark:to-primary-800/20 border-primary-200 dark:border-primary-800"
              whileHover={{ scale: 1.02, y: -2 }}
            >
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-sm text-primary-600 dark:text-primary-400">Families helped</p>
                  <p className="text-2xl font-bold text-primary-900 dark:text-primary-100">1,847</p>
                </div>
                <Target className="h-8 w-8 text-primary-500" />
              </div>
              <div className="mt-2 flex items-center text-sm">
                <span className="text-green-600 dark:text-green-400 font-medium">+15.2%</span>
                <span className="text-primary-600 dark:text-primary-400 ml-1">vs last month</span>
              </div>
            </motion.div>

            <motion.div 
              className="card bg-gradient-to-br from-orange-50 to-orange-100 dark:from-orange-900/20 dark:to-orange-800/20 border-orange-200 dark:border-orange-800"
              whileHover={{ scale: 1.02, y: -2 }}
            >
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-sm text-orange-600 dark:text-orange-400">Conversion Rate</p>
                  <p className="text-2xl font-bold text-orange-900 dark:text-orange-100">
                    {(analyticsData.conversionRates.donation * 100).toFixed(1)}%
                  </p>
                </div>
                <Zap className="h-8 w-8 text-orange-500" />
              </div>
              <div className="mt-2 flex items-center text-sm">
                <span className="text-green-600 dark:text-green-400 font-medium">+3.1%</span>
                <span className="text-orange-600 dark:text-orange-400 ml-1">vs last month</span>
              </div>
            </motion.div>
          </div>

          {/* Page Views Chart */}
          <div className="card">
            <div className="flex items-center justify-between mb-6">
              <h3 className="text-lg font-semibold">Page Performance</h3>
              <div className="flex items-center gap-2 text-sm text-neutral-500">
                <Eye className="h-4 w-4" />
                Last 30 days
              </div>
            </div>
            <div className="space-y-4">
              {analyticsData.pageViews.map((page, index) => (
                <motion.div 
                  key={page.page}
                  className="flex items-center justify-between p-4 bg-neutral-50 dark:bg-neutral-800/50 rounded-lg"
                  initial={{ opacity: 0, x: -20 }}
                  animate={{ opacity: 1, x: 0 }}
                  transition={{ delay: index * 0.1 }}
                >
                  <div className="flex items-center gap-3">
                    <div className={`w-3 h-8 rounded-full ${
                      page.trend > 0 ? 'bg-green-500' : page.trend < 0 ? 'bg-red-500' : 'bg-gray-400'
                    }`} />
                    <div>
                      <div className="font-medium">{page.page}</div>
                      <div className="text-sm text-neutral-500">{page.views.toLocaleString()} views</div>
                    </div>
                  </div>
                  <div className={`flex items-center gap-1 text-sm font-medium ${
                    page.trend > 0 ? 'text-green-600' : page.trend < 0 ? 'text-red-600' : 'text-gray-600'
                  }`}>
                    <TrendingUp className="h-4 w-4" />
                    {page.trend > 0 ? '+' : ''}{page.trend.toFixed(1)}%
                  </div>
                </motion.div>
              ))}
            </div>
          </div>

          {/* Real-time Activity */}
          <div className="grid gap-6 lg:grid-cols-2">
            <div className="card">
              <h3 className="text-lg font-semibold mb-4">Recent Activity</h3>
              <div className="space-y-3">
                {[
                  { action: 'New donation', details: '$125 from Sarah M.', time: '2 minutes ago', icon: Heart },
                  { action: 'Volunteer signup', details: 'John D. registered', time: '8 minutes ago', icon: Users },
                  { action: 'Assistance request', details: 'San Fernando Valley', time: '15 minutes ago', icon: MapPin },
                  { action: 'Story shared', details: 'Maria\'s success story', time: '1 hour ago', icon: BookOpenText }
                ].map((activity, index) => (
                  <motion.div 
                    key={index}
                    className="flex items-center gap-3 p-3 hover:bg-neutral-50 dark:hover:bg-neutral-800/50 rounded-lg transition-colors"
                    initial={{ opacity: 0, y: 10 }}
                    animate={{ opacity: 1, y: 0 }}
                    transition={{ delay: index * 0.1 }}
                  >
                    <div className="p-2 bg-primary-100 dark:bg-primary-900/30 rounded-lg">
                      <activity.icon className="h-4 w-4 text-primary-600 dark:text-primary-400" />
                    </div>
                    <div className="flex-1">
                      <div className="font-medium text-sm">{activity.action}</div>
                      <div className="text-sm text-neutral-500">{activity.details}</div>
                    </div>
                    <div className="text-xs text-neutral-400">{activity.time}</div>
                  </motion.div>
                ))}
              </div>
            </div>

            <div className="card">
              <h3 className="text-lg font-semibold mb-4">Impact Summary</h3>
              <div className="grid gap-4">
                <div className="flex items-center justify-between p-4 bg-green-50 dark:bg-green-900/20 rounded-lg">
                  <div className="flex items-center gap-3">
                    <Backpack className="h-6 w-6 text-green-600" />
                    <span className="font-medium">Backpacks Distributed</span>
                  </div>
                  <span className="text-2xl font-bold text-green-600">342</span>
                </div>
                <div className="flex items-center justify-between p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg">
                  <div className="flex items-center gap-3">
                    <Shirt className="h-6 w-6 text-blue-600" />
                    <span className="font-medium">Clothing Items</span>
                  </div>
                  <span className="text-2xl font-bold text-blue-600">789</span>
                </div>
                <div className="flex items-center justify-between p-4 bg-primary-50 dark:bg-primary-900/20 rounded-lg">
                  <div className="flex items-center gap-3">
                    <AlertCircle className="h-6 w-6 text-primary-600" />
                    <span className="font-medium">Emergency Responses</span>
                  </div>
                  <span className="text-2xl font-bold text-primary-600">156</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </PageShell>
    </PortalWrapper>
  )
}

// Phase 3: AI Portal Page
function AIPortalPage() {
  const { user, logout } = useAuth()

  useEffect(() => {
    trackEvent('ai_portal_view', { user_id: user?.id, user_role: user?.role })
  }, [])

  return (
    <PortalWrapper requiredRole="admin">
      <SEOHead title="AI Assistance Portal" description="AI-powered request matching and insights for Miracles in Motion Foundation." />
      <PageShell 
        title="AI Assistance Portal" 
        icon={Brain} 
        eyebrow={`AI-Powered Matching for ${user?.name}`}
        cta={
          <div className="flex gap-2">
            <motion.button
              className="btn-secondary flex items-center gap-2"
              whileHover={{ scale: 1.05 }}
              whileTap={{ scale: 0.95 }}
            >
              <Cpu className="h-4 w-4" /> Model Status
            </motion.button>
            <button onClick={logout} className="btn-secondary">
              Sign Out
            </button>
          </div>
        }
      >
        <AIAssistancePortal userRole={user?.role === 'admin' ? 'admin' : 'coordinator'} />
      </PageShell>
    </PortalWrapper>
  )
}

// Phase 3B: Enterprise Feature Pages
function AdvancedAnalyticsPage() {
  const { user, logout } = useAuth()

  useEffect(() => {
    trackEvent('advanced_analytics_view', { user_id: user?.id, user_role: user?.role })
  }, [])

  return (
    <PortalWrapper requiredRole="admin">
      <SEOHead title="Advanced Analytics" description="Comprehensive impact analytics and predictive insights for nonprofit operations." />
      <div className="relative">
        <AdvancedAnalyticsDashboard />
        <div className="fixed top-4 right-4 z-50">
          <button onClick={logout} className="btn-secondary">
            Sign Out
          </button>
        </div>
      </div>
    </PortalWrapper>
  )
}

function MobileVolunteerPage() {
  const { user } = useAuth()

  useEffect(() => {
    trackEvent('mobile_volunteer_view', { user_id: user?.id })
  }, [])

  return (
    <div className="relative">
      <SEOHead title="Volunteer Mobile App" description="Mobile interface for volunteer assignment management and coordination." />
      <MobileVolunteerApp />
    </div>
  )
}

function StaffTrainingPage() {
  const { user, logout } = useAuth()

  useEffect(() => {
    trackEvent('staff_training_view', { user_id: user?.id, user_role: user?.role })
  }, [])

  return (
    <PortalWrapper requiredRole="admin">
      <SEOHead title="Staff Training & Adoption" description="Comprehensive training system for AI platform adoption and staff development." />
      <div className="relative">
        <StaffTrainingDashboard />
        <div className="fixed top-4 right-4 z-50">
          <button onClick={logout} className="btn-secondary">
            Sign Out
          </button>
        </div>
      </div>
    </PortalWrapper>
  )
}

function NotFoundPage() {
  return (
    <section className="relative py-24">
      <div className="mx-auto max-w-md px-4 text-center sm:px-6 lg:px-8">
        <h1 className="text-6xl font-bold text-neutral-300 dark:text-neutral-700">404</h1>
        <h2 className="mt-4 text-2xl font-semibold">Page not found</h2>
        <p className="mt-2 text-neutral-600 dark:text-neutral-400">
          The page you're looking for doesn't exist.
        </p>
        <a href="#/" className="btn-primary mt-6">
          Go home
        </a>
      </div>
    </section>
  )
}

function BackgroundDecor() {
  return (
    <div className="pointer-events-none fixed inset-0 overflow-hidden">
      <div className="absolute -top-40 -right-40 h-80 w-80 rounded-full bg-gradient-to-br from-primary-400/20 to-secondary-600/20 blur-3xl" />
      <div className="absolute -bottom-40 -left-40 h-80 w-80 rounded-full bg-gradient-to-tr from-secondary-400/20 to-primary-600/20 blur-3xl" />
    </div>
  )
}

// Footer component has been extracted to ./components/Footer.tsx

function StickyDonate() {
  return (
    <div className="fixed bottom-4 right-4 z-50 md:hidden">
      <a
        href="#/donate"
        className="flex h-14 w-14 items-center justify-center rounded-full bg-gradient-to-br from-primary-500 to-secondary-600 text-white shadow-lg shadow-primary-500/25 transition hover:scale-105"
        aria-label="Donate"
      >
        <Heart className="h-6 w-6" />
      </a>
    </div>
  )
}

const COOKIE_CONSENT_KEY = 'mim_cookie_consent'

function CookieBanner() {
  const [show, setShow] = useState(() => {
    if (typeof window === 'undefined') return true
    return window.localStorage.getItem(COOKIE_CONSENT_KEY) === null
  })

  const persistAndClose = (choice: 'accept' | 'decline') => {
    try {
      window.localStorage.setItem(COOKIE_CONSENT_KEY, choice)
    } catch (_) { /* ignore */ }
    setShow(false)
  }

  if (!show) return null

  return (
    <div className="fixed bottom-4 left-4 right-4 z-50 card p-4 md:max-w-md md:right-auto" role="dialog" aria-label="Cookie consent">
      <p className="text-sm">
        We use cookies to improve your experience. By continuing, you agree to our{' '}
        <a href="#/legal" className="underline focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 rounded">cookie policy</a>.
      </p>
      <div className="mt-3 flex gap-2">
        <button
          type="button"
          onClick={() => persistAndClose('accept')}
          className="btn-primary text-xs px-4 py-2 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2"
          aria-label="Accept cookies"
        >
          Accept
        </button>
        <button
          type="button"
          onClick={() => persistAndClose('decline')}
          className="btn-secondary text-xs px-4 py-2 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2"
          aria-label="Decline non-essential cookies"
        >
          Decline
        </button>
      </div>
    </div>
  )
}

function Magnetic({ children }: { children: React.ReactNode }) {
  return (
    <div className="relative">
      {children}
    </div>
  )
}

/* ===================== Main App Component ===================== */
export default function App() {
  return (
    <LanguageProvider>
      <NotificationProvider>
        <AuthProvider>
          <AppContent />
          <PWAInstallPrompt />
        </AuthProvider>
      </NotificationProvider>
    </LanguageProvider>
  )
}

function AppContent() {
  const [currentPath, setCurrentPath] = useState(window.location.hash.slice(1) || '/')
  const [darkMode, setDarkMode] = useState(() => {
    if (typeof window !== 'undefined') {
      return localStorage.getItem('darkMode') === 'true' || 
        (!localStorage.getItem('darkMode') && window.matchMedia('(prefers-color-scheme: dark)').matches)
    }
    return false
  })
  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false)
  const { isOnline } = usePWA()
  const { addNotification } = useNotifications()

  useEffect(() => {
    const handleHashChange = () => setCurrentPath(window.location.hash.slice(1) || '/')
    window.addEventListener('hashchange', handleHashChange)
    return () => window.removeEventListener('hashchange', handleHashChange)
  }, [])

  useEffect(() => {
    if (darkMode) {
      document.documentElement.classList.add('dark')
    } else {
      document.documentElement.classList.remove('dark')
    }
    localStorage.setItem('darkMode', darkMode.toString())
  }, [darkMode])

  // Online/Offline notifications
  useEffect(() => {
    const handleOnline = () => {
      addNotification({
        type: 'success',
        title: 'Back Online',
        message: 'Your internet connection has been restored'
      })
    }
    
    const handleOffline = () => {
      addNotification({
        type: 'warning',
        title: 'Connection Lost',
        message: "You're currently offline. Some features may be limited."
      })
    }

    if (!isOnline) {
      handleOffline()
    }

    window.addEventListener('online', handleOnline)
    window.addEventListener('offline', handleOffline)

    return () => {
      window.removeEventListener('online', handleOnline)
      window.removeEventListener('offline', handleOffline)
    }
  }, [isOnline, addNotification])

  useEffect(() => {
    document.title =
      currentPath === '/'
        ? `${SITE.name} — ${SITE.brandMessage}`
        : `Miracles in Motion — ${currentPath.replace('/', '').replace(/-/g, ' ').replace(/\b\w/g, (m) => m.toUpperCase())}`
  }, [currentPath])

  const renderPage = () => {
    switch (currentPath) {
      case '/':
        return <HomePage />
      case '/donate':
        return <DonatePage />
      case '/volunteers':
        return <VolunteerPage />
      case '/sponsors':
        return <SponsorsPage />
      case '/stories':
        return <StoriesPage />
      case '/testimonies':
        return <TestimoniesPage />
      case '/legal':
        return <LegalPage />
      case '/brand':
        return <BrandAssetsPage />
      case '/about':
        return <AboutPage />
      case '/mission':
        return <MissionPage />
      case '/what-we-do':
        return <WhatWeDoPage />
      case '/events':
        return <EventsPage />
      case '/contact':
        return <ContactPage />
      case '/impact':
        return <ImpactReportPage />
      case '/request-assistance':
        return <AssistanceRequestPage />
      case '/portals':
        return <PortalsPage />
      case '/admin-portal':
        return <AdminPortalPage />
      case '/volunteer-portal':
        return <VolunteerPortalPage />
      case '/resource-portal':
        return <ResourcePortalPage />
      case '/analytics':
        return <AnalyticsDashboard />
      case '/ai-portal':
        return <AIPortalPage />
      case '/advanced-analytics':
        return <AdvancedAnalyticsPage />
      case '/mobile-volunteer':
        return <MobileVolunteerPage />
      case '/staff-training':
        return <StaffTrainingPage />
      default:
        return <NotFoundPage />
    }
  }

  return (
    <div className={`min-h-screen transition-colors duration-300 bg-neutral-50 text-neutral-900 antialiased selection:bg-primary-200/60 dark:bg-neutral-950 dark:text-neutral-50 ${darkMode ? 'dark' : ''}`}>
      <BackgroundDecor />
      <SkipToContent />
      
      {/* Offline Indicator */}
      {!isOnline && (
        <div className="bg-yellow-500 text-white text-center py-2 text-sm font-medium">
          <WifiOff className="inline h-4 w-4 mr-2" />
          You're currently offline
        </div>
      )}
      
      <header className="sticky top-0 z-50 backdrop-blur supports-[backdrop-filter]:bg-white/50 dark:supports-[backdrop-filter]:bg-black/40 border-b border-white/30 dark:border-white/10">
        <Navigation 
          darkMode={darkMode} 
          setDarkMode={setDarkMode}
          mobileMenuOpen={isMobileMenuOpen}
          setMobileMenuOpen={setIsMobileMenuOpen}
        />
      </header>
      
      <main id="content" className="relative flex-1">
        {renderPage()}
      </main>
      
      <Footer />
      {![
        '/admin-portal',
        '/volunteer-portal',
        '/resource-portal',
        '/analytics',
        '/ai-portal',
        '/advanced-analytics',
        '/mobile-volunteer',
        '/staff-training'
      ].includes(currentPath) && <MimChatAgent currentPath={currentPath} />}
      <StickyDonate />
      <CookieBanner />
    </div>
  )
}