'use client';

import { useState, useEffect, useRef, useCallback, useMemo, useSyncExternalStore } from 'react';
import { motion, useInView, AnimatePresence } from 'framer-motion';
import {
  Shield,
  Search,
  AlertTriangle,
  Eye,
  TrendingUp,
  Users,
  CreditCard,
  Smartphone,
  ArrowRight,
  MapPin,
  Clock,
  Flame,
  ShieldCheck,
  ShieldAlert,
  ShieldX,
  ShoppingBag,
  Globe,
  MessageSquare,
  Wallet,
  Banknote,
  UserCheck,
  ChevronRight,
  ChevronDown,
  ThumbsUp,
  Download,
  Lock,
  CheckCircle2,
  BarChart3,
  Award,
  Star,
  Newspaper,
  Zap,
  ArrowUpRight,
  CircleDot,
  Gamepad2,
  Disc,
  Crown,
} from 'lucide-react';
import { Card, CardContent, CardHeader, CardTitle, CardDescription, CardFooter } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { useAppStore } from '@/store/app-store';
import type { AnalyticsData, ScamReportType, ScamCategoryType } from '@/types';

// ─── Helpers ────────────────────────────────────────────────────────────────────

function formatBDT(amount: number): string {
  if (amount >= 10000000) return `৳${(amount / 10000000).toFixed(1)}Cr`;
  if (amount >= 100000) return `৳${(amount / 100000).toFixed(1)}L`;
  if (amount >= 1000) return `৳${(amount / 1000).toFixed(1)}K`;
  return `৳${amount.toLocaleString('en-BD')}`;
}

function timeAgo(dateStr: string): string {
  const now = new Date();
  const date = new Date(dateStr);
  const seconds = Math.floor((now.getTime() - date.getTime()) / 1000);

  if (seconds < 60) return 'Just now';
  const minutes = Math.floor(seconds / 60);
  if (minutes < 60) return `${minutes}m ago`;
  const hours = Math.floor(minutes / 60);
  if (hours < 24) return `${hours}h ago`;
  const days = Math.floor(hours / 24);
  if (days < 30) return `${days}d ago`;
  const months = Math.floor(days / 30);
  if (months < 12) return `${months}mo ago`;
  return `${Math.floor(months / 12)}y ago`;
}

function isNewReport(dateStr: string): boolean {
  const now = new Date();
  const date = new Date(dateStr);
  return (now.getTime() - date.getTime()) < 3600000; // 1 hour
}

const riskConfig: Record<string, { label: string; color: string; bg: string; border: string; icon: React.ElementType; description: string; example: string; percentage: number }> = {
  low: {
    label: 'Low Risk',
    color: 'text-emerald-600 dark:text-emerald-400',
    bg: 'bg-emerald-500/10',
    border: 'border-emerald-500/30',
    icon: ShieldCheck,
    description: 'Single report, no evidence',
    example: 'One user reported a suspicious message, no financial loss confirmed.',
    percentage: 25,
  },
  medium: {
    label: 'Medium Risk',
    color: 'text-yellow-600 dark:text-yellow-400',
    bg: 'bg-yellow-500/10',
    border: 'border-yellow-500/30',
    icon: ShieldAlert,
    description: 'Multiple reports, some evidence',
    example: 'Several users reported the same number with screenshots of messages.',
    percentage: 50,
  },
  high: {
    label: 'High Risk',
    color: 'text-orange-600 dark:text-orange-400',
    bg: 'bg-orange-500/10',
    border: 'border-orange-500/30',
    icon: ShieldX,
    description: 'Many reports with evidence',
    example: 'Multiple confirmed victims with financial losses and evidence provided.',
    percentage: 75,
  },
  critical: {
    label: 'Critical Risk',
    color: 'text-red-600 dark:text-red-400',
    bg: 'bg-red-500/10',
    border: 'border-red-500/30',
    icon: AlertTriangle,
    description: 'Verified scam with many victims',
    example: 'Widespread fraud operation with dozens of victims and large financial losses.',
    percentage: 100,
  },
};

const riskBorderColors: Record<string, string> = {
  low: 'border-l-emerald-500',
  medium: 'border-l-yellow-500',
  high: 'border-l-orange-500',
  critical: 'border-l-red-500',
};

const categoryIconMap: Record<string, React.ElementType> = {
  'online-shopping': ShoppingBag,
  'mobile-banking': Smartphone,
  'social-media': MessageSquare,
  'fake-website': Globe,
  'job-scam': UserCheck,
  'investment': TrendingUp,
  'lottery': Banknote,
  'phishing': ShieldAlert,
  'impersonation': Users,
  'digital-service': CreditCard,
  'valorant-id-scam': Gamepad2,
  'game-reseller-scam': Disc,
  'online-product-scam': Crown,
  default: Shield,
};

function getCategoryIcon(slug: string): React.ElementType {
  return categoryIconMap[slug] || categoryIconMap.default;
}

// ─── Animated Counter with easing ────────────────────────────────────────────────

function AnimatedCounter({ target, duration = 2000, prefix = '', suffix = '' }: { target: number; duration?: number; prefix?: string; suffix?: string }) {
  const [count, setCount] = useState(0);
  const ref = useRef<HTMLSpanElement>(null);
  const isInView = useInView(ref, { once: true });

  useEffect(() => {
    if (!isInView || target === 0) return;
    let start = 0;
    const startTime = Date.now();
    const timer = setInterval(() => {
      const elapsed = Date.now() - startTime;
      const progress = Math.min(elapsed / duration, 1);
      // Ease out cubic
      const eased = 1 - Math.pow(1 - progress, 3);
      start = Math.floor(eased * target);
      if (progress >= 1) {
        setCount(target);
        clearInterval(timer);
      } else {
        setCount(start);
      }
    }, 16);
    return () => clearInterval(timer);
  }, [isInView, target, duration]);

  return <span ref={ref}>{prefix}{count.toLocaleString()}{suffix}</span>;
}

// ─── BDT Animated Counter ────────────────────────────────────────────────────────

function BDTAnimatedCounter({ target, duration = 2500 }: { target: number; duration?: number }) {
  const [display, setDisplay] = useState('৳0');
  const ref = useRef<HTMLSpanElement>(null);
  const isInView = useInView(ref, { once: true });

  useEffect(() => {
    if (!isInView || target === 0) return;
    const startTime = Date.now();
    const timer = setInterval(() => {
      const elapsed = Date.now() - startTime;
      const progress = Math.min(elapsed / duration, 1);
      const eased = 1 - Math.pow(1 - progress, 3);
      const current = Math.floor(eased * target);
      setDisplay(formatBDT(current));
      if (progress >= 1) {
        setDisplay(formatBDT(target));
        clearInterval(timer);
      }
    }, 16);
    return () => clearInterval(timer);
  }, [isInView, target, duration]);

  return <span ref={ref}>{display}</span>;
}

// ─── Section Wrapper with InView Animation ────────────────────────────────────────

function AnimatedSection({ children, className = '', delay = 0 }: { children: React.ReactNode; className?: string; delay?: number }) {
  const ref = useRef(null);
  const isInView = useInView(ref, { once: true, margin: '-80px' });

  return (
    <motion.section
      ref={ref}
      initial={{ opacity: 0, y: 40 }}
      animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 40 }}
      transition={{ duration: 0.6, delay, ease: 'easeOut' }}
      className={className}
    >
      {children}
    </motion.section>
  );
}

// ─── Floating Particles Component ────────────────────────────────────────────────

// Seeded pseudo-random to avoid hydration mismatch
function seededRandom(seed: number) {
  const x = Math.sin(seed) * 10000;
  return x - Math.floor(x);
}

function FloatingParticles({ count = 8, color = 'emerald' }: { count?: number; color?: string }) {
  const mounted = useSyncExternalStore(
    () => () => {},
    () => true,
    () => false
  );

  const particles = useMemo(
    () =>
      Array.from({ length: count }, (_, i) => ({
        id: i,
        x: seededRandom(i * 5 + 1) * 100,
        y: seededRandom(i * 5 + 2) * 100,
        size: seededRandom(i * 5 + 3) * 4 + 2,
        duration: seededRandom(i * 5 + 4) * 6 + 4,
        delay: seededRandom(i * 5 + 5) * 3,
      })),
    [count]
  );

  if (!mounted) return null;

  return (
    <div className="absolute inset-0 overflow-hidden pointer-events-none">
      {particles.map((p) => (
        <div
          key={p.id}
          className={`absolute rounded-full animate-float ${color === 'emerald' ? 'bg-emerald-400/20' : color === 'white' ? 'bg-white/15' : 'bg-teal-400/20'}`}
          style={{
            width: p.size,
            height: p.size,
            left: `${p.x}%`,
            top: `${p.y}%`,
            animationDuration: `${p.duration}s`,
            animationDelay: `${p.delay}s`,
          }}
        />
      ))}
    </div>
  );
}

// ─── Section Divider ────────────────────────────────────────────────────────────

function SectionDivider() {
  return (
    <div className="relative h-px max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
      <div className="absolute inset-0 bg-gradient-to-r from-transparent via-emerald-500/30 to-transparent" />
    </div>
  );
}

// ─── Trend Arrow Component ────────────────────────────────────────────────────────

function TrendArrow({ direction }: { direction: 'up' | 'down' }) {
  return (
    <span className={`inline-flex items-center gap-0.5 text-xs font-semibold ${direction === 'up' ? 'text-emerald-500' : 'text-red-500'}`}>
      {direction === 'up' ? '↑' : '↓'}
    </span>
  );
}

// ─── Risk Progress Bar ────────────────────────────────────────────────────────────

function RiskProgressBar({ percentage, color }: { percentage: number; color: string }) {
  const ref = useRef(null);
  const isInView = useInView(ref, { once: true });

  const barColorMap: Record<string, string> = {
    'text-emerald-600 dark:text-emerald-400': 'bg-emerald-500',
    'text-yellow-600 dark:text-yellow-400': 'bg-yellow-500',
    'text-orange-600 dark:text-orange-400': 'bg-orange-500',
    'text-red-600 dark:text-red-400': 'bg-red-500',
  };

  return (
    <div ref={ref} className="w-full h-2 rounded-full bg-emerald-500/10 overflow-hidden">
      <motion.div
        className={`h-full rounded-full ${barColorMap[color] || 'bg-emerald-500'}`}
        initial={{ width: 0 }}
        animate={isInView ? { width: `${percentage}%` } : { width: 0 }}
        transition={{ duration: 1.2, ease: 'easeOut', delay: 0.3 }}
      />
    </div>
  );
}

// ─── Expandable Safety Tip ────────────────────────────────────────────────────────

function ExpandableTip({ tip, index }: { tip: { icon: React.ElementType; title: string; description: string; color: string; bg: string }; index: number }) {
  const [expanded, setExpanded] = useState(false);

  return (
    <motion.div
      initial={{ opacity: 0, y: 20 }}
      whileInView={{ opacity: 1, y: 0 }}
      viewport={{ once: true }}
      transition={{ delay: index * 0.08, duration: 0.4 }}
      whileHover={{ y: -3 }}
    >
      <Card
        className="group h-full border-border/50 hover:border-emerald-500/30 transition-all duration-300 hover:shadow-lg hover:shadow-emerald-500/5 cursor-pointer overflow-hidden"
        onClick={() => setExpanded(!expanded)}
      >
        <CardContent className="p-5 sm:p-6">
          <div className="flex items-start gap-3">
            {/* Numbered badge */}
            <div className="flex-shrink-0 w-8 h-8 rounded-full bg-gradient-to-br from-emerald-500 to-teal-500 flex items-center justify-center text-white font-bold text-sm">
              {index + 1}
            </div>
            <div className="flex-1 min-w-0">
              <div className="flex items-center gap-2 mb-1.5">
                <div className={`inline-flex p-1.5 rounded-lg ${tip.bg}`}>
                  <tip.icon className={`h-4 w-4 ${tip.color}`} />
                </div>
                <h3 className="font-semibold text-base group-hover:text-emerald-500 transition-colors">
                  {tip.title}
                </h3>
              </div>
              <p className={`text-sm text-muted-foreground leading-relaxed transition-all duration-300 ${expanded ? '' : 'line-clamp-2'}`}>
                {tip.description}
              </p>
              <span className="text-xs text-emerald-500 mt-1 inline-block">
                {expanded ? 'Show less' : 'Read more'}
              </span>
            </div>
          </div>
        </CardContent>
      </Card>
    </motion.div>
  );
}

// ─── Main Component ────────────────────────────────────────────────────────────

export function HomePage() {
  const navigate = useAppStore((s) => s.navigate);
  const setSearchQuery = useAppStore((s) => s.setSearchQuery);
  const setSelectedReportId = useAppStore((s) => s.setSelectedReportId);

  const [searchInput, setSearchInput] = useState('');
  const [searchFocused, setSearchFocused] = useState(false);
  const [analytics, setAnalytics] = useState<AnalyticsData | null>(null);
  const [reports, setReports] = useState<ScamReportType[]>([]);
  const [categories, setCategories] = useState<ScamCategoryType[]>([]);
  const [isLoading, setIsLoading] = useState(true);
  const searchInputRef = useRef<HTMLInputElement>(null);

  // Fetch analytics data
  useEffect(() => {
    fetch('/api/analytics')
      .then((res) => res.json())
      .then((data) => {
        if (data.success) setAnalytics(data.data);
      })
      .catch(() => {});
  }, []);

  // Fetch trending reports
  useEffect(() => {
    fetch('/api/reports?status=verified&limit=5&sort=createdAt')
      .then((res) => res.json())
      .then((data) => {
        if (data.success) setReports(data.data.reports);
      })
      .catch(() => {});
  }, []);

  // Fetch categories
  useEffect(() => {
    fetch('/api/categories')
      .then((res) => res.json())
      .then((data) => {
        if (data.success) setCategories(data.data);
        setIsLoading(false);
      })
      .catch(() => setIsLoading(false));
  }, []);

  const handleSearch = useCallback(() => {
    if (searchInput.trim()) {
      setSearchQuery(searchInput.trim());
      navigate('check-number');
    }
  }, [searchInput, setSearchQuery, navigate]);

  const handleReportClick = useCallback(
    (reportId: string) => {
      setSelectedReportId(reportId);
      navigate('report-detail');
    },
    [setSelectedReportId, navigate]
  );

  const handleCategoryClick = useCallback(
    (slug: string) => {
      setSearchQuery(slug);
      navigate('search');
    },
    [setSearchQuery, navigate]
  );

  const focusSearch = useCallback(() => {
    searchInputRef.current?.focus();
  }, []);

  const scrollToContent = useCallback(() => {
    window.scrollTo({ top: window.innerHeight * 0.8, behavior: 'smooth' });
  }, []);

  // ─── Container animation variants ──────────────────────────────────────────

  const containerVariants = {
    hidden: {},
    visible: {
      transition: { staggerChildren: 0.1 },
    },
  };

  const itemVariants = {
    hidden: { opacity: 0, y: 20 },
    visible: { opacity: 1, y: 0, transition: { duration: 0.5, ease: 'easeOut' } },
  };

  // Compute protected amount (5x total reported as estimate of prevented losses)
  const protectedAmount = (analytics?.totalAmount ?? 0) * 5 || 2500000;

  return (
    <div className="flex flex-col">
      {/* ═══════════════════════════════════════════════════════════════════════
          1. HERO SECTION - Major Upgrade
          ═══════════════════════════════════════════════════════════════════════ */}
      <section className="relative overflow-hidden min-h-[85vh] sm:min-h-[90vh] flex items-center">
        {/* Gradient mesh background */}
        <div className="absolute inset-0 bg-gradient-to-br from-emerald-950/50 via-background to-teal-950/40 dark:from-emerald-950/70 dark:via-background dark:to-teal-950/60" />
        <div className="absolute inset-0 cyber-grid opacity-40" />

        {/* Animated floating particles */}
        <FloatingParticles count={12} color="emerald" />

        {/* Gradient mesh circles - static for performance */}
        <div
          className="absolute top-1/4 left-1/4 w-[500px] h-[500px] rounded-full opacity-20 animate-pulse-slow"
          style={{ background: 'radial-gradient(circle, oklch(0.558 0.158 155 / 0.3), transparent 70%)' }}
        />
        <div
          className="absolute bottom-1/4 right-1/4 w-[400px] h-[400px] rounded-full opacity-15 animate-pulse-slow"
          style={{ background: 'radial-gradient(circle, oklch(0.6 0.118 184.704 / 0.3), transparent 70%)', animationDelay: '2s' }}
        />

        {/* Radial glow */}
        <div className="absolute top-1/3 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[700px] h-[700px] bg-emerald-500/8 dark:bg-emerald-500/4 rounded-full blur-[150px] pointer-events-none" />

        <div className="relative z-10 max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 pt-24 pb-20 sm:pt-32 sm:pb-28 w-full">
          <motion.div
            variants={containerVariants}
            initial="hidden"
            animate="visible"
            className="flex flex-col items-center text-center"
          >
            {/* Animated Shield Icon with pulsing glow ring */}
            <motion.div variants={itemVariants} className="mb-8 relative">
              {/* Pulsing glow rings - CSS only */}
              <div
                className="absolute inset-0 rounded-full animate-glow-ring"
                style={{ width: 80, height: 80, margin: '0 auto' }}
              />
              <div
                className="absolute inset-0 rounded-full animate-glow-ring-delayed"
                style={{ width: 80, height: 80, margin: '0 auto' }}
              />
              <div className="shield-glow">
                <div className="p-4 rounded-full bg-gradient-to-br from-emerald-500/20 to-teal-500/10">
                  <Shield className="h-12 w-12 text-emerald-500 dark:text-emerald-400" strokeWidth={1.5} />
                </div>
              </div>
            </motion.div>

            {/* Heading */}
            <motion.h1
              variants={itemVariants}
              className="text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-extrabold tracking-tight leading-[1.1]"
            >
              <span className="bg-gradient-to-r from-emerald-500 via-teal-400 to-emerald-400 bg-clip-text text-transparent">
                Search Before You Pay
              </span>
            </motion.h1>

            {/* Subheading */}
            <motion.p
              variants={itemVariants}
              className="mt-5 max-w-2xl text-lg sm:text-xl text-muted-foreground leading-relaxed"
            >
              Bangladesh&apos;s community-powered scam intelligence database. Report scammers, verify
              sellers, protect yourself.
            </motion.p>

            {/* Live Protection Counter */}
            <motion.div
              variants={itemVariants}
              className="mt-6 inline-flex items-center gap-2 px-4 py-2 rounded-full bg-emerald-500/10 border border-emerald-500/20"
            >
              <div className="w-2 h-2 rounded-full bg-emerald-500 animate-dot-pulse" />
              <span className="text-sm font-medium text-emerald-600 dark:text-emerald-400">
                <BDTAnimatedCounter target={protectedAmount} /> protected from scams
              </span>
            </motion.div>

            {/* Search Input - Glassmorphism */}
            <motion.div variants={itemVariants} className="mt-8 w-full max-w-xl">
              <motion.div
                className="relative group"
                animate={searchFocused ? {
                  boxShadow: '0 0 0 2px oklch(0.558 0.158 155 / 0.3), 0 8px 32px oklch(0.558 0.158 155 / 0.1)',
                } : {
                  boxShadow: '0 4px 16px oklch(0 0 0 / 0.05)',
                }}
                transition={{ duration: 0.3 }}
                style={{ borderRadius: '1rem' }}
              >
                <div className="relative rounded-2xl overflow-hidden bg-background/60 backdrop-blur-xl border border-emerald-500/20">
                  <div className="absolute inset-0 bg-gradient-to-r from-emerald-500/5 via-transparent to-teal-500/5 pointer-events-none" />
                  <Search className="absolute left-4 top-1/2 -translate-y-1/2 h-5 w-5 text-muted-foreground group-focus-within:text-emerald-500 transition-colors z-10" />
                  <Input
                    ref={searchInputRef}
                    type="text"
                    placeholder="Enter phone number, bKash number, Facebook page..."
                    value={searchInput}
                    onChange={(e) => setSearchInput(e.target.value)}
                    onKeyDown={(e) => e.key === 'Enter' && handleSearch()}
                    onFocus={() => setSearchFocused(true)}
                    onBlur={() => setSearchFocused(false)}
                    className="h-14 pl-12 pr-4 text-base rounded-2xl border-0 focus-visible:ring-0 bg-transparent focus-visible:ring-offset-0"
                  />
                </div>
              </motion.div>
            </motion.div>

            {/* CTA Buttons */}
            <motion.div
              variants={itemVariants}
              className="mt-6 flex flex-col sm:flex-row gap-3"
            >
              <Button
                size="lg"
                onClick={() => navigate('report')}
                className="h-12 px-8 text-base rounded-xl bg-emerald-600 hover:bg-emerald-700 dark:bg-emerald-500 dark:hover:bg-emerald-600 shadow-lg shadow-emerald-500/25"
              >
                <AlertTriangle className="h-5 w-5" />
                Report a Scam
              </Button>
              <Button
                size="lg"
                variant="outline"
                onClick={searchInput.trim() ? handleSearch : focusSearch}
                className="h-12 px-8 text-base rounded-xl border-emerald-500/30 hover:bg-emerald-500/10 hover:text-emerald-600 dark:hover:text-emerald-400"
              >
                <Search className="h-5 w-5" />
                {searchInput.trim() ? 'Check Now' : 'Check a Number'}
              </Button>
            </motion.div>

            {/* Trust Badges */}
            <motion.div
              variants={itemVariants}
              className="mt-8 flex flex-wrap items-center justify-center gap-4 sm:gap-6"
            >
              {[
                { icon: Lock, text: 'Secure', color: 'text-emerald-500' },
                { icon: CheckCircle2, text: 'Community Verified', color: 'text-teal-500' },
                { icon: BarChart3, text: '10K+ Reports', color: 'text-cyan-500' },
              ].map((badge) => (
                <div key={badge.text} className="flex items-center gap-1.5 text-sm text-muted-foreground">
                  <badge.icon className={`h-4 w-4 ${badge.color}`} />
                  <span>{badge.text}</span>
                </div>
              ))}
            </motion.div>
          </motion.div>
        </div>

        {/* Scroll indicator */}
        <div
          className="absolute bottom-8 left-1/2 -translate-x-1/2 z-10 cursor-pointer animate-bounce-down"
          onClick={scrollToContent}
        >
          <div className="flex flex-col items-center gap-1">
            <span className="text-xs text-muted-foreground">Scroll</span>
            <ChevronDown className="h-5 w-5 text-emerald-500" />
          </div>
        </div>
      </section>

      {/* Section Divider */}
      <SectionDivider />

      {/* ═══════════════════════════════════════════════════════════════════════
          2. STATS BAR - More Impactful
          ═══════════════════════════════════════════════════════════════════════ */}
      <AnimatedSection className="relative z-10 py-12 sm:py-16">
        <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="grid grid-cols-2 lg:grid-cols-4 gap-3 sm:gap-5">
            {[
              {
                icon: Shield,
                label: 'Total Reports',
                value: analytics?.totalReports ?? 0,
                color: 'text-emerald-500',
                bgIcon: 'bg-emerald-500/10',
                gradient: 'from-emerald-500/5 to-emerald-500/0',
                trend: 'up' as const,
                trendText: '+12%',
              },
              {
                icon: CreditCard,
                label: 'Amount Lost',
                value: null,
                display: analytics ? formatBDT(analytics.totalAmount) : '৳0',
                color: 'text-red-500',
                bgIcon: 'bg-red-500/10',
                gradient: 'from-red-500/5 to-red-500/0',
                trend: 'up' as const,
                trendText: '+8%',
              },
              {
                icon: ShieldCheck,
                label: 'Verified Reports',
                value: analytics?.verifiedReports ?? 0,
                color: 'text-teal-500',
                bgIcon: 'bg-teal-500/10',
                gradient: 'from-teal-500/5 to-teal-500/0',
                trend: 'up' as const,
                trendText: '+15%',
              },
              {
                icon: AlertTriangle,
                label: 'Critical Entities',
                value: analytics?.criticalEntities ?? 0,
                color: 'text-orange-500',
                bgIcon: 'bg-orange-500/10',
                gradient: 'from-orange-500/5 to-orange-500/0',
                trend: 'down' as const,
                trendText: '-3%',
              },
            ].map((stat, idx) => (
              <motion.div
                key={stat.label}
                initial={{ opacity: 0, y: 20 }}
                whileInView={{ opacity: 1, y: 0 }}
                viewport={{ once: true }}
                transition={{ delay: idx * 0.1, duration: 0.5 }}
              >
                <Card className="glass border-0 shadow-lg hover:shadow-xl transition-all duration-300 overflow-hidden group relative card-stat">
                  {/* Subtle gradient background */}
                  <div className={`absolute inset-0 bg-gradient-to-br ${stat.gradient} opacity-0 group-hover:opacity-100 transition-opacity duration-300`} />
                  <CardContent className="p-4 sm:p-6 flex items-center gap-3 sm:gap-4 relative z-10">
                    <div className={`${stat.bgIcon} p-2.5 sm:p-3 rounded-xl group-hover:scale-110 transition-transform duration-300`}>
                      <stat.icon className={`h-5 w-5 sm:h-6 sm:w-6 ${stat.color}`} />
                    </div>
                    <div className="min-w-0">
                      <div className="flex items-center gap-2">
                        <p className="text-xl sm:text-2xl font-bold truncate">
                          {stat.display || <AnimatedCounter target={stat.value ?? 0} />}
                        </p>
                        <TrendArrow direction={stat.trend} />
                      </div>
                      <p className="text-xs sm:text-sm text-muted-foreground">{stat.label}</p>
                      <p className={`text-[10px] font-medium ${stat.trend === 'up' ? 'text-emerald-500' : 'text-red-500'}`}>
                        {stat.trendText} this month
                      </p>
                    </div>
                  </CardContent>
                </Card>
              </motion.div>
            ))}
          </div>
        </div>
      </AnimatedSection>

      {/* Section Divider */}
      <SectionDivider />

      {/* ═══════════════════════════════════════════════════════════════════════
          3. HOW IT WORKS - More Visual Interest
          ═══════════════════════════════════════════════════════════════════════ */}
      <AnimatedSection className="py-12 sm:py-16" delay={0.1}>
        <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-10">
            <motion.div
              initial={{ opacity: 0, y: 10 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-emerald-500/10 border border-emerald-500/20 mb-4"
            >
              <Zap className="h-3.5 w-3.5 text-emerald-500" />
              <span className="text-xs font-semibold text-emerald-600 dark:text-emerald-400 uppercase tracking-wider">Simple Process</span>
            </motion.div>
            <h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold leading-tight">
              How It{' '}
              <span className="bg-gradient-to-r from-emerald-500 to-teal-400 bg-clip-text text-transparent">
                Works
              </span>
            </h2>
            <p className="mt-4 text-muted-foreground text-lg max-w-xl mx-auto">
              Three simple steps to protect yourself from scammers
            </p>
          </div>

          <div className="relative">
            {/* Connecting line - desktop only */}
            <div className="hidden md:block absolute top-1/2 left-[16.6%] right-[16.6%] h-0.5 bg-gradient-to-r from-emerald-500/30 via-teal-500/30 to-cyan-500/30 -translate-y-1/2 z-0" />
            {/* Progress dots on line */}
            <div className="hidden md:flex absolute top-1/2 left-[33%] -translate-y-1/2 -translate-x-1/2 z-0">
              <div className="w-3 h-3 rounded-full bg-emerald-500/40 border-2 border-background" />
            </div>
            <div className="hidden md:flex absolute top-1/2 left-[66%] -translate-y-1/2 -translate-x-1/2 z-0">
              <div className="w-3 h-3 rounded-full bg-teal-500/40 border-2 border-background" />
            </div>

            <div className="grid md:grid-cols-3 gap-6 sm:gap-8 relative z-10">
              {[
                {
                  step: '01',
                  icon: Search,
                  title: 'Search',
                  description: 'Enter a phone number, bKash, Nagad, or Facebook page to check if it has been reported as a scam.',
                  gradient: 'from-emerald-500 to-emerald-600',
                  iconColor: 'text-emerald-500',
                  bgGradient: 'from-emerald-500/20 to-emerald-600/5',
                },
                {
                  step: '02',
                  icon: Eye,
                  title: 'Verify',
                  description: 'Check the risk level, read reports from other users, and review evidence before making any transaction.',
                  gradient: 'from-teal-500 to-teal-600',
                  iconColor: 'text-teal-500',
                  bgGradient: 'from-teal-500/20 to-teal-600/5',
                },
                {
                  step: '03',
                  icon: Shield,
                  title: 'Protect',
                  description: 'Make informed decisions before paying. Report scammers to help protect the community.',
                  gradient: 'from-cyan-500 to-cyan-600',
                  iconColor: 'text-cyan-500',
                  bgGradient: 'from-cyan-500/20 to-cyan-600/5',
                },
              ].map((item, idx) => (
                <motion.div
                  key={item.step}
                  initial={{ opacity: 0, y: 30 }}
                  whileInView={{ opacity: 1, y: 0 }}
                  viewport={{ once: true }}
                  transition={{ delay: idx * 0.15, duration: 0.5 }}
                >
                  <Card className="group relative overflow-hidden border-border/50 hover:border-emerald-500/30 transition-all duration-300 h-full card-themed">
                    {/* Step number background */}
                    <div className="absolute -top-4 -right-2 text-8xl font-black text-emerald-500/[0.04] select-none">
                      {item.step}
                    </div>
                    <CardContent className="p-6 sm:p-8">
                      {/* Step number circle */}
                      <div className={`inline-flex items-center justify-center w-10 h-10 rounded-full bg-gradient-to-br ${item.gradient} text-white font-bold text-sm mb-4 shadow-lg`}>
                        {item.step}
                      </div>
                      <motion.div
                        className={`inline-flex p-3 rounded-xl bg-gradient-to-br ${item.bgGradient} mb-4 ml-3`}
                        whileHover={{ rotate: [0, -10, 10, 0], scale: 1.1 }}
                        transition={{ duration: 0.5 }}
                      >
                        <item.icon className={`h-7 w-7 ${item.iconColor}`} />
                      </motion.div>
                      <h3 className="text-xl font-bold mb-2">{item.title}</h3>
                      <p className="text-muted-foreground leading-relaxed">{item.description}</p>
                    </CardContent>
                  </Card>
                </motion.div>
              ))}
            </div>
          </div>

          {/* Try it now CTA */}
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ delay: 0.5 }}
            className="mt-10 text-center"
          >
            <Button
              size="lg"
              onClick={focusSearch}
              className="h-12 px-8 text-base rounded-xl bg-gradient-to-r from-emerald-600 to-teal-600 hover:from-emerald-700 hover:to-teal-700 shadow-lg shadow-emerald-500/20"
            >
              <Search className="h-5 w-5" />
              Try It Now
              <ArrowRight className="h-4 w-4" />
            </Button>
          </motion.div>
        </div>
      </AnimatedSection>

      {/* Section Divider */}
      <SectionDivider />

      {/* ═══════════════════════════════════════════════════════════════════════
          4. TRENDING SCAM ALERTS - Improved Card Design
          ═══════════════════════════════════════════════════════════════════════ */}
      <AnimatedSection className="py-12 sm:py-16 bg-muted/30 section-alt" delay={0.1}>
        <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex items-end justify-between mb-10">
            <div>
              <div className="flex items-center gap-2 mb-2">
                <div className="animate-gentle-pulse">
                  <Flame className="h-5 w-5 text-orange-500" />
                </div>
                <span className="text-sm font-semibold text-orange-500 uppercase tracking-wider">
                  Trending
                </span>
              </div>
              <h2 className="text-3xl sm:text-4xl font-bold">Latest Scam Alerts</h2>
            </div>
            <Button
              variant="ghost"
              onClick={() => navigate('search')}
              className="hidden sm:flex text-emerald-500 hover:text-emerald-600 hover:bg-emerald-500/10"
            >
              View All Reports
              <ArrowRight className="h-4 w-4" />
            </Button>
          </div>

          {reports.length === 0 && !isLoading ? (
            <Card className="border-dashed card-themed">
              <CardContent className="py-12 text-center">
                <Shield className="h-12 w-12 text-muted-foreground mx-auto mb-3" />
                <p className="text-muted-foreground">No verified reports yet. Be the first to report a scam!</p>
                <Button
                  className="mt-4 bg-emerald-600 hover:bg-emerald-700"
                  onClick={() => navigate('report')}
                >
                  Report a Scam
                </Button>
              </CardContent>
            </Card>
          ) : (
            <div className="grid gap-4">
              {reports.map((report, idx) => {
                const risk = riskConfig[report.riskLevel] || riskConfig.low;
                const RiskIcon = risk.icon;
                const isCritical = report.riskLevel === 'critical' || report.riskLevel === 'high';
                const isNew = isNewReport(report.createdAt);
                return (
                  <motion.div
                    key={report.id}
                    initial={{ opacity: 0, x: -20 }}
                    whileInView={{ opacity: 1, x: 0 }}
                    viewport={{ once: true }}
                    transition={{ delay: idx * 0.08, duration: 0.4 }}
                  >
                    <motion.div
                      whileHover={{ y: -2, boxShadow: '0 8px 30px oklch(0.558 0.158 155 / 0.08)' }}
                      transition={{ duration: 0.2 }}
                    >
                      <Card
                        className={`group cursor-pointer border-border/50 hover:border-emerald-500/30 transition-colors duration-300 border-l-4 card-themed ${riskBorderColors[report.riskLevel] || 'border-l-emerald-500'}`}
                        onClick={() => handleReportClick(report.id)}
                      >
                        <CardContent className="p-4 sm:p-5">
                          <div className="flex items-start justify-between gap-3">
                            <div className="flex-1 min-w-0">
                              <div className="flex flex-wrap items-center gap-2 mb-1.5">
                                {/* Fire badge for high-risk */}
                                {isCritical && (
                                  <span
                                    className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-semibold bg-red-500/10 text-red-500 border border-red-500/20 animate-badge-pulse"
                                  >
                                    <Flame className="h-3 w-3" />
                                    High Risk
                                  </span>
                                )}
                                {/* New badge */}
                                {isNew && (
                                  <span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-semibold bg-emerald-500/10 text-emerald-500 border border-emerald-500/20">
                                    New
                                  </span>
                                )}
                                {/* Category badge */}
                                {report.category && (
                                  <Badge variant="secondary" className="text-xs">
                                    {report.category.name}
                                  </Badge>
                                )}
                                {/* Risk level badge */}
                                <Badge
                                  variant="outline"
                                  className={`text-xs ${risk.color} ${risk.border} ${risk.bg}`}
                                >
                                  <RiskIcon className="h-3 w-3" />
                                  {risk.label}
                                </Badge>
                              </div>
                              <h3 className="font-semibold text-base sm:text-lg group-hover:text-emerald-500 transition-colors line-clamp-1">
                                {report.title}
                              </h3>
                              <div className="flex flex-wrap items-center gap-x-4 gap-y-1 mt-2 text-sm text-muted-foreground">
                                {report.amountLost > 0 && (
                                  <span className="flex items-center gap-1 text-red-500 dark:text-red-400">
                                    <CreditCard className="h-3.5 w-3.5" />
                                    {formatBDT(report.amountLost)}
                                  </span>
                                )}
                                {report.district && (
                                  <span className="flex items-center gap-1">
                                    <MapPin className="h-3.5 w-3.5" />
                                    {report.district}
                                  </span>
                                )}
                                <span className="flex items-center gap-1">
                                  <Clock className="h-3.5 w-3.5" />
                                  {timeAgo(report.createdAt)}
                                </span>
                                <span className="flex items-center gap-1">
                                  <Eye className="h-3.5 w-3.5" />
                                  {report.views}
                                </span>
                                <span className="flex items-center gap-1">
                                  <ThumbsUp className="h-3.5 w-3.5" />
                                  {report.upvotes}
                                </span>
                              </div>
                            </div>
                            <ChevronRight className="h-5 w-5 text-muted-foreground group-hover:text-emerald-500 transition-colors shrink-0 mt-1" />
                          </div>
                        </CardContent>
                      </Card>
                    </motion.div>
                  </motion.div>
                );
              })}
            </div>
          )}

          {/* Mobile view all button */}
          <div className="mt-6 sm:hidden text-center">
            <Button
              variant="outline"
              onClick={() => navigate('search')}
              className="border-emerald-500/30 text-emerald-500 hover:bg-emerald-500/10"
            >
              View All Reports
              <ArrowRight className="h-4 w-4" />
            </Button>
          </div>
        </div>
      </AnimatedSection>

      {/* Section Divider */}
      <SectionDivider />

      {/* ═══════════════════════════════════════════════════════════════════════
          5. SCAM CATEGORIES - More Interactive
          ═══════════════════════════════════════════════════════════════════════ */}
      <AnimatedSection className="py-12 sm:py-16" delay={0.1}>
        <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-12">
            <motion.div
              initial={{ opacity: 0, y: 10 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-emerald-500/10 border border-emerald-500/20 mb-4"
            >
              <ShoppingBag className="h-3.5 w-3.5 text-emerald-500" />
              <span className="text-xs font-semibold text-emerald-600 dark:text-emerald-400 uppercase tracking-wider">Browse Types</span>
            </motion.div>
            <h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold leading-tight">
              Scam{' '}
              <span className="bg-gradient-to-r from-emerald-500 to-teal-400 bg-clip-text text-transparent">
                Categories
              </span>
            </h2>
            <p className="mt-4 text-muted-foreground text-lg">
              Browse reports by scam type
            </p>
          </div>

          {categories.length === 0 && !isLoading ? (
            <Card className="border-dashed card-category">
              <CardContent className="py-12 text-center">
                <Wallet className="h-12 w-12 text-muted-foreground mx-auto mb-3" />
                <p className="text-muted-foreground">Categories coming soon. Stay tuned!</p>
              </CardContent>
            </Card>
          ) : (
            <>
              <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-3 sm:gap-5">
                {categories.map((cat, idx) => {
                  const CatIcon = getCategoryIcon(cat.slug);
                  const catColor = cat.color || 'emerald';
                  return (
                    <motion.div
                      key={cat.id}
                      initial={{ opacity: 0, scale: 0.9 }}
                      whileInView={{ opacity: 1, scale: 1 }}
                      viewport={{ once: true }}
                      transition={{ delay: idx * 0.05, duration: 0.4 }}
                      whileHover={{ y: -6 }}
                    >
                      <Card
                        className="group cursor-pointer border-border/50 hover:border-emerald-500/30 transition-all duration-300 h-full overflow-hidden relative card-category"
                        onClick={() => handleCategoryClick(cat.slug)}
                      >
                        {/* Hover gradient overlay */}
                        <div className="absolute inset-0 bg-gradient-to-br from-emerald-500/0 to-teal-500/0 group-hover:from-emerald-500/5 group-hover:to-teal-500/5 transition-all duration-300" />
                        <CardContent className="p-5 sm:p-6 flex flex-col items-center text-center relative z-10">
                          <div className="relative">
                            <div
                              className="p-4 rounded-2xl mb-3 transition-transform group-hover:scale-110"
                              style={{
                                backgroundColor:
                                  catColor === 'red'
                                    ? 'oklch(0.577 0.245 27.325 / 0.1)'
                                    : catColor === 'orange'
                                      ? 'oklch(0.704 0.191 22.216 / 0.1)'
                                      : catColor === 'yellow'
                                        ? 'oklch(0.795 0.184 86.05 / 0.1)'
                                        : catColor === 'purple'
                                          ? 'oklch(0.5 0.2 300 / 0.1)'
                                          : 'oklch(0.558 0.158 155 / 0.1)',
                              }}
                            >
                              <CatIcon
                                className="h-8 w-8 transition-colors"
                                style={{
                                  color:
                                    catColor === 'red'
                                      ? 'oklch(0.577 0.245 27.325)'
                                      : catColor === 'orange'
                                        ? 'oklch(0.704 0.191 22.216)'
                                        : catColor === 'yellow'
                                          ? 'oklch(0.795 0.184 86.05)'
                                          : catColor === 'purple'
                                            ? 'oklch(0.5 0.2 300)'
                                            : 'oklch(0.558 0.158 155)',
                                }}
                              />
                            </div>
                            {/* Count badge */}
                            <div className="absolute -top-1 -right-1 min-w-[20px] h-5 px-1.5 rounded-full bg-emerald-500 text-white text-[10px] font-bold flex items-center justify-center">
                              {idx + 1}
                            </div>
                          </div>
                          <h3 className="font-semibold text-sm sm:text-base group-hover:text-emerald-500 transition-colors">
                            {cat.name}
                          </h3>
                          {cat.description && (
                            <p className="text-xs text-muted-foreground mt-1 line-clamp-2">
                              {cat.description}
                            </p>
                          )}
                        </CardContent>
                      </Card>
                    </motion.div>
                  );
                })}
              </div>
              {/* View All Categories link */}
              <div className="mt-8 text-center">
                <Button
                  variant="outline"
                  onClick={() => navigate('search')}
                  className="border-emerald-500/30 text-emerald-500 hover:bg-emerald-500/10 hover:text-emerald-600"
                >
                  View All Categories
                  <ArrowRight className="h-4 w-4" />
                </Button>
              </div>
            </>
          )}
        </div>
      </AnimatedSection>

      {/* Section Divider */}
      <SectionDivider />

      {/* ═══════════════════════════════════════════════════════════════════════
          6. RISK LEVEL LEGEND - More Visual Impact
          ═══════════════════════════════════════════════════════════════════════ */}
      <AnimatedSection className="py-12 sm:py-16 bg-muted/30 section-alt" delay={0.1}>
        <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-12">
            <motion.div
              initial={{ opacity: 0, y: 10 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-emerald-500/10 border border-emerald-500/20 mb-4"
            >
              <ShieldAlert className="h-3.5 w-3.5 text-emerald-500" />
              <span className="text-xs font-semibold text-emerald-600 dark:text-emerald-400 uppercase tracking-wider">Risk Assessment</span>
            </motion.div>
            <h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold leading-tight">
              Understanding{' '}
              <span className="bg-gradient-to-r from-emerald-500 to-teal-400 bg-clip-text text-transparent">
                Risk Levels
              </span>
            </h2>
            <p className="mt-4 text-muted-foreground text-lg">
              How we assess and classify scam threats
            </p>
          </div>

          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-5">
            {(['low', 'medium', 'high', 'critical'] as const).map((level, idx) => {
              const config = riskConfig[level];
              const Icon = config.icon;
              return (
                <motion.div
                  key={level}
                  initial={{ opacity: 0, y: 20 }}
                  whileInView={{ opacity: 1, y: 0 }}
                  viewport={{ once: true }}
                  transition={{ delay: idx * 0.1, duration: 0.4 }}
                >
                  <Card className={`border ${config.border} ${config.bg} h-full group hover:shadow-lg transition-shadow duration-300 card-risk`}>
                    <CardContent className="p-5 flex flex-col items-center text-center">
                      {/* Animated glow icon */}
                      <motion.div
                        className={`p-4 rounded-full mb-4 ${config.bg} ${config.color} relative`}
                        whileHover={{ scale: 1.1 }}
                        transition={{ duration: 0.3 }}
                      >
                        <motion.div
                          className="absolute inset-0 rounded-full"
                          animate={{
                            boxShadow: level === 'critical'
                              ? [
                                  '0 0 0 0 oklch(0.577 0.245 27.325 / 0.4)',
                                  '0 0 0 12px oklch(0.577 0.245 27.325 / 0)',
                                  '0 0 0 0 oklch(0.577 0.245 27.325 / 0)',
                                ]
                              : level === 'high'
                                ? [
                                    '0 0 0 0 oklch(0.704 0.191 22.216 / 0.3)',
                                    '0 0 0 10px oklch(0.704 0.191 22.216 / 0)',
                                    '0 0 0 0 oklch(0.704 0.191 22.216 / 0)',
                                  ]
                                : [],
                          }}
                          transition={{ duration: 2, repeat: level === 'critical' || level === 'high' ? Infinity : 0 }}
                        />
                        <Icon className="h-10 w-10" />
                      </motion.div>
                      <h3 className={`font-bold text-lg ${config.color} mb-1`}>
                        {config.label}
                      </h3>
                      <p className="text-sm text-muted-foreground mb-3">
                        {config.description}
                      </p>
                      {/* Progress bar */}
                      <div className="w-full mb-3">
                        <RiskProgressBar percentage={config.percentage} color={config.color} />
                      </div>
                      {/* Example scenario */}
                      <p className="text-xs text-muted-foreground/80 italic mb-3">
                        &ldquo;{config.example}&rdquo;
                      </p>
                      {/* Learn More link */}
                      <button
                        className={`text-xs font-medium ${config.color} hover:underline flex items-center gap-1`}
                        onClick={() => {
                          setSearchQuery(level);
                          navigate('search');
                        }}
                      >
                        Learn More <ArrowUpRight className="h-3 w-3" />
                      </button>
                    </CardContent>
                  </Card>
                </motion.div>
              );
            })}
          </div>
        </div>
      </AnimatedSection>

      {/* Section Divider */}
      <SectionDivider />

      {/* ═══════════════════════════════════════════════════════════════════════
          7. TRUST & CREDIBILITY SECTION (NEW)
          ═══════════════════════════════════════════════════════════════════════ */}
      <AnimatedSection className="py-12 sm:py-16" delay={0.1}>
        <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-12">
            <motion.div
              initial={{ opacity: 0, y: 10 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-emerald-500/10 border border-emerald-500/20 mb-4"
            >
              <Award className="h-3.5 w-3.5 text-emerald-500" />
              <span className="text-xs font-semibold text-emerald-600 dark:text-emerald-400 uppercase tracking-wider">Trusted Platform</span>
            </motion.div>
            <h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold leading-tight">
              Trusted by{' '}
              <span className="bg-gradient-to-r from-emerald-500 to-teal-400 bg-clip-text text-transparent">
                10,000+ Users
              </span>
            </h2>
            <p className="mt-4 text-muted-foreground text-lg">
              Join thousands of Bangladeshis who trust ScamChecker BD
            </p>
          </div>

          {/* User avatars with initials */}
          <div className="flex flex-col items-center mb-12">
            <div className="flex -space-x-3 mb-4">
              {[
                { initials: 'AR', color: 'bg-emerald-500' },
                { initials: 'SK', color: 'bg-teal-500' },
                { initials: 'MR', color: 'bg-cyan-500' },
                { initials: 'FN', color: 'bg-amber-500' },
                { initials: 'TH', color: 'bg-rose-500' },
                { initials: 'NA', color: 'bg-violet-500' },
              ].map((user, idx) => (
                <motion.div
                  key={user.initials}
                  initial={{ opacity: 0, scale: 0.5 }}
                  whileInView={{ opacity: 1, scale: 1 }}
                  viewport={{ once: true }}
                  transition={{ delay: idx * 0.08, duration: 0.3, type: 'spring' }}
                  className="w-10 h-10 rounded-full border-2 border-background flex items-center justify-center text-white text-xs font-bold shadow-md"
                  style={{ backgroundColor: undefined }}
                >
                  <div className={`w-full h-full rounded-full ${user.color} flex items-center justify-center`}>
                    {user.initials}
                  </div>
                </motion.div>
              ))}
              <motion.div
                initial={{ opacity: 0, scale: 0.5 }}
                whileInView={{ opacity: 1, scale: 1 }}
                viewport={{ once: true }}
                transition={{ delay: 0.5, duration: 0.3 }}
                className="w-10 h-10 rounded-full border-2 border-background bg-emerald-500/5 flex items-center justify-center text-xs font-semibold text-muted-foreground"
              >
                +10K
              </motion.div>
            </div>
          </div>

          <div className="grid md:grid-cols-3 gap-5">
            {/* Security Certification */}
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ delay: 0.1 }}
            >
              <Card className="h-full border-emerald-500/20 bg-gradient-to-br from-emerald-500/5 to-transparent card-themed">
                <CardContent className="p-6 text-center">
                  <div className="inline-flex p-3 rounded-full bg-emerald-500/10 mb-4">
                    <Lock className="h-6 w-6 text-emerald-500" />
                  </div>
                  <h3 className="font-bold text-lg mb-2">Secure & Private</h3>
                  <p className="text-sm text-muted-foreground">
                    Your data is encrypted and never shared. Reporter identities are protected.
                  </p>
                  <div className="flex items-center justify-center gap-2 mt-3">
                    <Badge variant="outline" className="text-[10px] border-emerald-500/30 text-emerald-600">SSL Encrypted</Badge>
                    <Badge variant="outline" className="text-[10px] border-emerald-500/30 text-emerald-600">GDPR Ready</Badge>
                  </div>
                </CardContent>
              </Card>
            </motion.div>

            {/* Community Verified */}
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ delay: 0.2 }}
            >
              <Card className="h-full border-teal-500/20 bg-gradient-to-br from-teal-500/5 to-transparent card-themed">
                <CardContent className="p-6 text-center">
                  <div className="inline-flex p-3 rounded-full bg-teal-500/10 mb-4">
                    <Users className="h-6 w-6 text-teal-500" />
                  </div>
                  <h3 className="font-bold text-lg mb-2">Community Verified</h3>
                  <p className="text-sm text-muted-foreground">
                    Reports are verified by the community through upvotes and evidence review.
                  </p>
                  <div className="flex items-center justify-center gap-2 mt-3">
                    <Badge variant="outline" className="text-[10px] border-teal-500/30 text-teal-600">Peer Reviewed</Badge>
                    <Badge variant="outline" className="text-[10px] border-teal-500/30 text-teal-600">Evidence Based</Badge>
                  </div>
                </CardContent>
              </Card>
            </motion.div>

            {/* As Featured In */}
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ delay: 0.3 }}
            >
              <Card className="h-full border-border/50 card-themed">
                <CardContent className="p-6 text-center">
                  <div className="inline-flex p-3 rounded-full bg-emerald-500/5 mb-4">
                    <Newspaper className="h-6 w-6 text-muted-foreground" />
                  </div>
                  <h3 className="font-bold text-lg mb-2">As Featured In</h3>
                  <div className="flex flex-wrap items-center justify-center gap-3 mt-3">
                    {['The Daily Star', 'Prothom Alo', 'bdnews24'].map((name) => (
                      <div
                        key={name}
                        className="px-3 py-1.5 rounded-md bg-emerald-500/5 text-xs font-medium text-muted-foreground border border-emerald-500/10"
                      >
                        {name}
                      </div>
                    ))}
                  </div>
                </CardContent>
              </Card>
            </motion.div>
          </div>

          {/* Partner badges */}
          <div className="mt-10 flex flex-wrap items-center justify-center gap-6 sm:gap-8">
            {[
              { icon: ShieldCheck, text: 'Cyber Security BD' },
              { icon: Award, text: 'Best Innovation 2024' },
              { icon: Star, text: '4.8/5 Rating' },
              { icon: CheckCircle2, text: 'Verified Platform' },
            ].map((partner) => (
              <div key={partner.text} className="flex items-center gap-2 text-muted-foreground/70">
                <partner.icon className="h-4 w-4 text-emerald-500/60" />
                <span className="text-xs font-medium">{partner.text}</span>
              </div>
            ))}
          </div>
        </div>
      </AnimatedSection>

      {/* Section Divider */}
      <SectionDivider />

      {/* ═══════════════════════════════════════════════════════════════════════
          8. CTA SECTION - More Compelling
          ═══════════════════════════════════════════════════════════════════════ */}
      <AnimatedSection className="py-12 sm:py-16" delay={0.1}>
        <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="relative overflow-hidden rounded-2xl sm:rounded-3xl">
            {/* Gradient background */}
            <div className="absolute inset-0 bg-gradient-to-br from-emerald-600 via-teal-600 to-emerald-700" />
            <div className="absolute inset-0 cyber-grid opacity-20" />

            {/* Animated particles */}
            <FloatingParticles count={6} color="white" />

            {/* Decorative circles */}
            <div className="absolute -top-20 -right-20 w-60 h-60 bg-white/5 rounded-full" />
            <div className="absolute -bottom-10 -left-10 w-40 h-40 bg-white/5 rounded-full" />

            <div className="relative z-10 px-6 py-10 sm:px-12 sm:py-14">
              <motion.div
                initial={{ opacity: 0, scale: 0.9 }}
                whileInView={{ opacity: 1, scale: 1 }}
                viewport={{ once: true }}
                transition={{ duration: 0.5 }}
                className="text-center"
              >
                <Shield className="h-14 w-14 text-white/80 mx-auto mb-6 animate-gentle-rock" />
                <h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold text-white leading-tight">
                  Join the Fight Against Scams
                </h2>
                <p className="mt-4 text-lg text-white/80 max-w-2xl mx-auto">
                  Every report helps protect someone from losing their hard-earned money. Together, we can make Bangladesh safer.
                </p>

                {/* Testimonial */}
                <motion.div
                  initial={{ opacity: 0, y: 10 }}
                  whileInView={{ opacity: 1, y: 0 }}
                  viewport={{ once: true }}
                  transition={{ delay: 0.3 }}
                  className="mt-8 max-w-lg mx-auto"
                >
                  <div className="bg-white/10 backdrop-blur-sm rounded-xl p-4 border border-white/10">
                    <p className="text-white/90 text-sm italic">
                      &ldquo;ScamChecker BD saved me from losing ৳50,000 to a fake online seller. I searched the number first and found 5 reports!&rdquo;
                    </p>
                    <div className="flex items-center justify-center gap-2 mt-3">
                      <div className="w-6 h-6 rounded-full bg-emerald-400 flex items-center justify-center text-[10px] font-bold text-emerald-900">
                        R
                      </div>
                      <span className="text-white/70 text-xs font-medium">Rahim, Dhaka</span>
                    </div>
                  </div>
                </motion.div>

                <div className="mt-8 flex flex-col sm:flex-row gap-3 justify-center">
                  <motion.div whileHover={{ scale: 1.03 }} whileTap={{ scale: 0.98 }}>
                    <Button
                      size="lg"
                      onClick={() => navigate('report')}
                      className="h-13 px-8 text-base rounded-xl bg-white text-emerald-700 hover:bg-white/90 shadow-lg shadow-black/20"
                    >
                      <AlertTriangle className="h-5 w-5" />
                      Report a Scam
                    </Button>
                  </motion.div>
                  <motion.div whileHover={{ scale: 1.03 }} whileTap={{ scale: 0.98 }}>
                    <Button
                      size="lg"
                      variant="outline"
                      onClick={() => {
                        setSearchQuery('');
                        navigate('search');
                      }}
                      className="h-13 px-8 text-base rounded-xl border-white/30 text-white hover:bg-white/10 hover:text-white"
                    >
                      <Search className="h-5 w-5" />
                      Search Now
                    </Button>
                  </motion.div>
                </div>

                {/* Secondary CTA */}
                <Button
                  variant="link"
                  onClick={scrollToContent}
                  className="mt-4 text-white/60 hover:text-white/80 text-sm"
                >
                  Learn How It Works
                  <ArrowRight className="h-3.5 w-3.5" />
                </Button>
              </motion.div>
            </div>
          </div>
        </div>
      </AnimatedSection>

      {/* Section Divider */}
      <SectionDivider />

      {/* ═══════════════════════════════════════════════════════════════════════
          9. SAFETY TIPS - More Engaging
          ═══════════════════════════════════════════════════════════════════════ */}
      <AnimatedSection className="py-12 sm:py-16 bg-muted/30 section-alt" delay={0.1}>
        <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-12">
            <motion.div
              initial={{ opacity: 0, y: 10 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-emerald-500/10 border border-emerald-500/20 mb-4"
            >              <ShieldCheck className="h-3.5 w-3.5 text-emerald-500" />
              <span className="text-xs font-semibold text-emerald-600 dark:text-emerald-400 uppercase tracking-wider">Stay Protected</span>
            </motion.div>
            <h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold leading-tight">
              Stay{' '}
              <span className="bg-gradient-to-r from-emerald-500 to-teal-400 bg-clip-text text-transparent">
                Safe
              </span>
            </h2>
            <p className="mt-4 text-muted-foreground text-lg">
              Essential tips to protect yourself from scams
            </p>
          </div>

          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-5">
            {[
              {
                icon: ShieldCheck,
                title: 'Verify Before You Pay',
                description: 'Always search the phone number, bKash, or Nagad number on ScamChecker BD before making any payment to an unknown person. A quick search can save you thousands of taka.',
                color: 'text-emerald-500',
                bg: 'bg-emerald-500/10',
              },
              {
                icon: CreditCard,
                title: 'Never Share OTP/PIN',
                description: 'No legitimate organization will ever ask for your OTP, PIN, or password. If someone asks, it\'s a scam — hang up immediately and block the number.',
                color: 'text-red-500',
                bg: 'bg-red-500/10',
              },
              {
                icon: Eye,
                title: 'Check Seller History',
                description: 'Look for reviews, report counts, and how long the seller has been active. New accounts with no history are riskier. Always prefer sellers with verified track records.',
                color: 'text-teal-500',
                bg: 'bg-teal-500/10',
              },
              {
                icon: AlertTriangle,
                title: 'Too Good to Be True?',
                description: 'If a deal seems too good to be true, it probably is. Scammers lure victims with extremely low prices or guaranteed high returns. Always be skeptical of unbelievable offers.',
                color: 'text-orange-500',
                bg: 'bg-orange-500/10',
              },
              {
                icon: Smartphone,
                title: 'Use Trusted Platforms',
                description: 'Buy and sell through verified platforms with buyer protection. Avoid direct bank transfers to unknown persons. Use escrow services when available for large transactions.',
                color: 'text-cyan-500',
                bg: 'bg-cyan-500/10',
              },
              {
                icon: Users,
                title: 'Report and Protect Others',
                description: 'If you\'ve been scammed, report it immediately on ScamChecker BD. Your report could save someone else from losing money. Every report strengthens our community defense.',
                color: 'text-violet-500',
                bg: 'bg-violet-500/10',
              },
            ].map((tip, idx) => (
              <ExpandableTip key={idx} tip={tip} index={idx} />
            ))}
          </div>

          {/* Download Safety Guide button */}
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ delay: 0.4 }}
            className="mt-10 text-center"
          >
            <Button
              variant="outline"
              size="lg"
              className="border-emerald-500/30 text-emerald-500 hover:bg-emerald-500/10 hover:text-emerald-600"
            >
              <Download className="h-5 w-5" />
              Download Safety Guide
            </Button>
          </motion.div>
        </div>
      </AnimatedSection>
    </div>
  );
}
