import { Button } from "@/components/ui/button";
import { Card } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
import { Zap, Monitor, CheckCircle, ArrowRight, HelpCircle, Shield, FileText, Trophy, TrendingUp, Bell, Mail, Target, BarChart3, Eye, Lock, Users, ImageIcon, Sparkles, Search, Puzzle, ExternalLink } from "lucide-react";
import { useNavigate } from "react-router-dom";
import { useAuth } from "@/contexts/AuthContext";
import { useLanguage } from "@/contexts/LanguageContext";
import { MobileBottomTabs } from "@/components/MobileBottomTabs";
import { useState, useEffect, useMemo } from "react";
import { MainNavigation } from "@/components/MainNavigation";
import { CompactAnalysisCard } from "@/components/analysis/CompactAnalysisCard";
import { supabase } from "@/integrations/supabase/client";
import { AnimatedNumber } from "@/components/ui/animated-number";
import { useChannelCount } from '@/hooks/useChannelCount';
import { UserJourneyTimeline } from "@/components/homepage/UserJourneyTimeline";

export default function Homepage() {
 const navigate = useNavigate();
 const { user } = useAuth();
 const { t } = useLanguage();
 const { count: totalChannelsAnalyzed } = useChannelCount();

 useEffect(() => {
 document.title = t('pageTitles.home');
 }, [t]);

 // Get translated taglines without emojis
 const { language } = useLanguage();
 const taglines = useMemo(() => {
 return [
 // Functional/Professional
 { text: t('homepage.tagline1') },
 { text: t('homepage.tagline2') },
 { text: t('homepage.tagline3') },
 { text: t('homepage.tagline4') },
 
 // Catchy/Marketing
 { text: t('homepage.tagline5') },
 { text: t('homepage.tagline6') },
 { text: t('homepage.tagline7') },
 { text: t('homepage.tagline8') },
 { text: t('homepage.tagline9') },
 { text: t('homepage.tagline10') },
 { text: t('homepage.tagline11') },
 
 // Humorous
 { text: t('homepage.tagline12') },
 { text: t('homepage.tagline13') },
 { text: t('homepage.tagline14') },
 { text: t('homepage.tagline15') },
 
 // Automation-focused
 { text: language === 'de' ? 'Automatisiere deine Channel-Optimierung' : 'Automate Your Channel Optimization' },
 { text: language === 'de' ? 'Von der Analyse zur Aktion' : 'From Analysis to Action' },
 { text: language === 'de' ? 'KI-gestützte Insights für YouTube Automation' : 'AI-Powered Insights for YouTube Automation' },
 ];
 }, [t, language]);

 const [currentTagline, setCurrentTagline] = useState(0);
 const [isAnimating, setIsAnimating] = useState(false);

 useEffect(() => {
 const interval = setInterval(() => {
 setIsAnimating(true);
 setTimeout(() => {
 setCurrentTagline((prev) => (prev + 1) % taglines.length);
 setIsAnimating(false);
 }, 300);
 }, 20000); // Changed from 15000ms to 20000ms (20 seconds)

 return () => clearInterval(interval);
 }, [taglines.length]);

 const handleQuickAnalyzer = () => {
 if (!user) {
 navigate("/auth");
 return;
 }
 navigate("/quick-analyzer");
 };

 const handleChannelMonitoring = () => {
 if (!user) {
 navigate("/auth");
 return;
 }
 navigate("/performance?tab=analytics");
 };

 const demoAnalyses = [
 {
 id: "demo-1",
 channel: "Plane Curious",
 score: 83,
 subscribers: "42.8K",
 subscriberCount: 42800,
 thumbnail: "https://yt3.googleusercontent.com/SsUlKoQym8tX_53kdNlcoz5AbuHGe8d3Vk3rI0zJ6WwJCbOSb3yCjRlcD4OBpWH5MvkYh4v1vQ=s160-c-k-c0x00ffffff-no-rj",
 requestId: "demo-analysis-plane-curious",
 analysisDate: "13.09.2024, 14:35 Uhr",
 youtubeUrl: "https://www.youtube.com/@planecurious"
 },
 {
 id: "demo-2",
 channel: "SpongeTruths", 
 score: 80,
 subscribers: "85.7K",
 subscriberCount: 85700,
 thumbnail: "https://yt3.googleusercontent.com/vC_g2B98mg5KYvXftTyVSekO1N-oon90HFaaU9pO1e_H5kFw_Y0pJMETzivoGc1YJvUUdvtAsA=s160-c-k-c0x00ffffff-no-rj",
 requestId: "demo-analysis-spongetruths",
 analysisDate: "12.09.2024, 16:22 Uhr",
 youtubeUrl: "https://www.youtube.com/@spongetruths"
 },
 {
 id: "demo-3",
 channel: "Animated Earth",
 score: 74,
 subscribers: "32.3K",
 subscriberCount: 32300, 
 thumbnail: "https://yt3.googleusercontent.com/AH2zXtylnmlMW8f9reqQy0xWRnH2wz2iQ5qcazbgyr9E4UAK9Ufm57X5SD2dUAmPHFfelsswpA=s160-c-k-c0x00ffffff-no-rj",
 requestId: "demo-analysis-animated-earth",
 analysisDate: "11.09.2024, 09:45 Uhr",
 youtubeUrl: "https://www.youtube.com/@animatedearth"
 }
 ];

 return (
 <div className="min-h-screen bg-background grid-background pb-20 md:pb-0">
 <MainNavigation />
 <div className="max-w-7xl mx-auto px-4 md:px-6 lg:px-8 py-8 md:py-12 lg:py-20">

 {/* Hero Section - Bold & Engaging */}
 <div className="text-center mb-12 md:mb-16 lg:mb-20">
 {/* USP Badge - More Visual */}
 <div className="flex justify-center mb-6 md:mb-8 animate-fade-in">
 <Badge className="bg-primary/10 text-foreground border border-primary/30 px-5 py-2.5 text-sm font-semibold shadow-sm shadow-primary/10">
 {language === 'de' ? 'Das einzige Tool für YouTube Automation' : 'The Only Tool Made for YouTube Automation'}
 </Badge>
 </div>

 {/* Main Title - With Gradient Effect */}
 <h1 className="text-5xl md:text-6xl lg:text-7xl font-bold text-foreground mb-6 md:mb-8 leading-[1.2] tracking-tight relative group">
 <div className="absolute inset-0 bg-primary/8 opacity-50 rounded-lg transition-opacity duration-150 group-hover:opacity-100" />
 <span className="relative inline-block transition-all duration-700 group-hover:text-primary group-hover:drop-shadow-[0_0_40px_rgba(249,115,22,0.6)]">
 YT Channel Insights
 </span>
 </h1>

 {/* Subtitle */}
 <p className="text-xl md:text-2xl text-muted-foreground mb-10 max-w-3xl mx-auto leading-relaxed">
 {language === 'de' 
 ? 'KI-gestützte Analysen, die dir zeigen, was funktioniert – und was nicht.'
 : 'AI-powered analytics that show you what works – and what doesn\'t.'}
 </p>

 {/* Stats - Bigger & Bolder */}
 <div className="flex flex-wrap items-center justify-center gap-10 text-base md:text-lg text-muted-foreground mb-10">
 <div className="flex items-center gap-3">
 <div className="p-2 rounded-lg bg-primary/10">
 <BarChart3 className="w-5 h-5 text-primary" />
 </div>
 <span className="font-semibold"><AnimatedNumber value={totalChannelsAnalyzed} suffix="+" /> {language === 'de' ? 'Channels' : 'Channels'}</span>
 </div>
 <div className="flex items-center gap-3">
 <div className="p-2 rounded-lg bg-primary/10">
 <Eye className="w-5 h-5 text-primary" />
 </div>
 <span className="font-semibold">50K+ {language === 'de' ? 'Videos' : 'Videos'}</span>
 </div>
 <div className="flex items-center gap-3">
 <div className="p-2 rounded-lg bg-primary/10">
 <Zap className="w-5 h-5 text-primary" />
 </div>
 <span className="font-semibold">{language === 'de' ? 'KI-Analyse in Sekunden' : 'AI analysis in seconds'}</span>
 </div>
 </div>

 {/* CTA Button - More Prominent */}
 {!user && (
 <div className="flex flex-col items-center gap-4 animate-fade-in">
 <Button 
 onClick={handleQuickAnalyzer}
 size="lg"
 className="bg-primary hover:bg-primary/90 text-primary-foreground font-bold text-lg px-10 py-7 h-auto shadow-lg shadow-primary/25 hover:shadow-xl transition-colors duration-150"
 >
 <Zap className="w-6 h-6 mr-2" />
 {language === 'de' ? 'Kostenlos starten' : 'Start for Free'}
 </Button>
 <p className="text-sm text-muted-foreground font-medium">
 {language === 'de' ? '5 monatliche Credits gratis • Keine Zahlung erforderlich' : '5 monthly credits free • No payment required'}
 </p>
 </div>
 )}
 </div>


 {/* Chrome Extension Banner */}
 <a
 href="https://chromewebstore.google.com/detail/yt-channel-insights-exten/nfbmohiakcemleeadpgjnkeoebbjhiae"
 target="_blank"
 rel="noopener noreferrer"
 className="block mb-8 group"
 >
 <div className="relative overflow-hidden rounded-xl border border-accent/30 bg-accent/8 px-6 py-4 transition-colors duration-150 hover:border-accent/50 hover:shadow-md">
 <div className="flex flex-col sm:flex-row items-center justify-between gap-4">
 <div className="flex items-center gap-4">
 <div className="flex-shrink-0 rounded-lg bg-accent/15 p-2.5">
 <Puzzle className="h-6 w-6 text-accent" />
 </div>
 <div className="text-center sm:text-left">
 <div className="flex items-center gap-2 justify-center sm:justify-start">
 <span className="text-lg font-bold text-foreground">
 {language === 'de' ? 'Chrome Extension jetzt verfügbar!' : 'Chrome Extension now available!'}
 </span>
 <Badge className="bg-emerald-500/15 text-success border-success/30 text-xs font-bold">
 {language === 'de' ? 'KOSTENLOS' : 'FREE'}
 </Badge>
 </div>
 <p className="text-sm text-muted-foreground mt-0.5">
 {language === 'de'
 ? 'YT Channel Insights direkt in deinem Browser – Score-Overlays, schnelle Analysen & mehr.'
 : 'YT Channel Insights directly in your browser – score overlays, quick analyses & more.'}
 </p>
 </div>
 </div>
 <div className="flex-shrink-0">
 <span className="inline-flex items-center gap-2 rounded-lg bg-accent px-5 py-2.5 text-sm font-bold text-accent-foreground transition-transform duration-200 group-hover:scale-105">
 {language === 'de' ? 'Jetzt installieren' : 'Install now'}
 <ExternalLink className="h-4 w-4" />
 </span>
 </div>
 </div>
 </div>
 </a>

 {/* Feature Cards - Tablet Optimized */}
 <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 md:gap-8 mb-24 md:mb-28 lg:mb-32">
 {/* Quick Analyzer Card - Primary */}
 <Card className="p-5 md:p-6 bg-card border-2 border-orange-500/70 hover:border-orange-500 transition-all duration-300 hover:shadow-2xl hover:-translate-y-2 hover:brightness-110 relative overflow-hidden flex flex-col min-h-[420px] md:min-h-[460px] shadow-orange-500/20 shadow-xl" style={{filter: 'drop-shadow(0 0 25px rgba(249, 115, 22, 0.2))'}}>
 <div className="absolute inset-0 bg-primary/6 opacity-60" />
 
 {/* Recommended Badge */}
 <div className="absolute top-1 right-2 z-20">
 <Badge className="bg-primary text-white border-0 shadow-lg px-2 py-0.5 text-xs font-bold leading-tight">
 {language === 'de' ? '⭐ EMPFOHLEN' : '⭐ RECOMMENDED'}
 </Badge>
 </div>
 
 <div className="relative z-10 flex flex-col h-full">
 <div className="flex items-center gap-3 mb-4">
 <div className="p-2 rounded-xl bg-primary/20">
 <Zap className="w-5 h-5 text-primary" />
 </div>
 <h3 className="text-lg md:text-xl font-bold text-foreground leading-tight">{t('analysis.quickAnalyzerTitle')}</h3>
 </div>
 
 <p className="text-muted-foreground mb-6 text-sm md:text-base leading-relaxed opacity-80">
 {t('analysis.quickAnalyzerDesc')}
 </p>

 {/* Optimized Score Ring */}
 <div className="flex items-center justify-center mb-6">
 <div className="relative w-24 h-24 animate-pulse">
 <svg className="w-24 h-24 -rotate-90" viewBox="0 0 64 64">
 <circle cx="32" cy="32" r="26" fill="none" stroke="currentColor" strokeWidth="5" className="text-primary/20" />
 <circle cx="32" cy="32" r="26" fill="none" stroke="currentColor" strokeWidth="5" className="text-primary" 
 strokeDasharray="163.36" strokeDashoffset="28.6" strokeLinecap="round" />
 </svg>
 <div className="absolute inset-0 flex items-center justify-center">
 <span className="text-xl font-bold text-primary">87</span>
 </div>
 </div>
 </div>
 
 <div className="space-y-3 mb-6 flex-grow">
 <div className="flex items-center gap-3 text-sm">
 <Zap className="w-4 h-4 text-primary flex-shrink-0 mt-0.5" />
 <span className="text-foreground">{t('analysis.instantAssessment')}</span>
 </div>
 <div className="flex items-center gap-3 text-sm">
 <BarChart3 className="w-4 h-4 text-primary flex-shrink-0 mt-0.5" />
 <span className="text-foreground">{t('analysis.contentStrategy')}</span>
 </div>
 <div className="flex items-center gap-3 text-sm">
 <Target className="w-4 h-4 text-primary flex-shrink-0 mt-0.5" />
 <span className="text-foreground">{t('analysis.perfectTesting')}</span>
 </div>
 </div>

 <div className="mt-auto pt-3 space-y-2 flex flex-col items-center">
 <span className="text-xs text-muted-foreground">{t('analysis.creditPerAnalysis')}</span>
 <Button 
 onClick={handleQuickAnalyzer}
 className="w-full h-[44px] bg-primary hover:bg-primary/90 text-primary-foreground text-sm font-semibold transition-colors duration-150"
 >
 {t('analysis.startAnalysis')}
 </Button>
 </div>
 </div>
 </Card>

 {/* Channel Monitoring Card - Secondary */}
 <Card className="p-5 md:p-6 bg-card border border-border/50 hover:border-teal-500/50 transition-all duration-300 hover:shadow-2xl hover:-translate-y-2 hover:brightness-110 relative overflow-hidden flex flex-col min-h-[420px] md:min-h-[460px]">
 <div className="absolute inset-0 bg-accent/6 opacity-50" />
 <div className="relative z-10 flex flex-col h-full">
 <div className="flex items-center gap-3 mb-4">
 <div className="p-2 rounded-xl bg-teal-500/20">
 <Monitor className="w-5 h-5 text-teal-600" />
 </div>
 <h3 className="text-lg md:text-xl font-bold text-foreground leading-tight">{t('analysis.channelXRayTitle')}</h3>
 </div>
 
 <p className="text-muted-foreground mb-6 text-sm md:text-base leading-relaxed opacity-80">
 {t('analysis.channelXRayDesc')}
 </p>

 {/* Optimized Mini Graph */}
 <div className="flex items-center justify-center mb-6">
 <div className="flex items-end gap-1 h-20 hover:scale-105 transition-transform duration-300">
 <div className="w-3 bg-teal-500/30 rounded-t transition-all duration-1000" style={{height: '25%'}}></div>
 <div className="w-3 bg-teal-500/40 rounded-t transition-all duration-1000 delay-100" style={{height: '40%'}}></div>
 <div className="w-3 bg-teal-500/60 rounded-t transition-all duration-1000 delay-200" style={{height: '55%'}}></div>
 <div className="w-3 bg-teal-500/80 rounded-t transition-all duration-1000 delay-300" style={{height: '70%'}}></div>
 <div className="w-3 bg-teal-500 rounded-t transition-all duration-1000 delay-400" style={{height: '85%'}}></div>
 <div className="w-3 bg-teal-500 rounded-t animate-pulse transition-all duration-1000 delay-500" style={{height: '100%'}}></div>
 </div>
 </div>
 
 <div className="space-y-4 mb-6 flex-grow">
 <div className="flex items-center gap-3 text-sm">
 <TrendingUp className="w-4 h-4 text-teal-500 flex-shrink-0 mt-0.5" />
 <span className="text-foreground">{t('analysis.automaticUpdates')}</span>
 </div>
 <div className="flex items-center gap-3 text-sm">
 <Bell className="w-4 h-4 text-teal-500 flex-shrink-0 mt-0.5" />
 <span className="text-foreground">{t('analysis.aiRecommendations')}</span>
 </div>
 <div className="flex items-center gap-3 text-sm">
 <Mail className="w-4 h-4 text-teal-500 flex-shrink-0 mt-0.5" />
 <span className="text-foreground">{t('analysis.earlyWarnings')}</span>
 </div>
 </div>

 <div className="mt-auto pt-4 space-y-3 flex flex-col items-center">
 <span className="text-xs text-muted-foreground">{t('analysis.creditsPerXRay')}</span>
 <Button 
 onClick={handleChannelMonitoring}
 className="w-full h-[44px] bg-accent hover:bg-accent/90 text-accent-foreground text-sm font-semibold transition-colors duration-150"
 >
 {t('analysis.startXRay')}
 </Button>
 </div>
 </div>
 </Card>

 {/* Channel Leaderboard Card - Premium Feature */}
 <Card className="p-5 md:p-6 bg-card border-2 border-yellow-500/50 hover:border-yellow-500/70 transition-all duration-300 hover:shadow-2xl hover:shadow-yellow-500/30 hover:-translate-y-2 hover:brightness-110 relative overflow-hidden flex flex-col min-h-[420px] md:min-h-[460px]" style={{filter: 'drop-shadow(0 0 15px rgba(234, 179, 8, 0.1))'}}>
 <div className="absolute inset-0 bg-warning/6 opacity-50" />
 <div className="relative z-10 flex flex-col h-full">
 <div className="flex items-center gap-3 mb-4">
 <div className="p-2 rounded-xl bg-yellow-500/20">
 <Trophy className="w-5 h-5 text-warning" />
 </div>
 <h3 className="text-lg md:text-xl font-bold text-foreground leading-tight">{t('leaderboard.title')}</h3>
 </div>
 
 <p className="text-muted-foreground mb-4 text-sm md:text-base leading-relaxed opacity-80">
 {t('leaderboard.liveRankings')}
 </p>

 {/* Enhanced Live Badge with stronger pulsing */}
 <div className="flex items-center justify-center gap-3 mb-4">
 <div className="flex items-center gap-2 bg-destructive/20 border border-destructive/40 rounded-full px-4 py-2">
 <div className="w-3 h-3 bg-destructive rounded-full animate-ping" />
 <span className="text-sm font-bold text-destructive">{t('leaderboard.live')}</span>
 </div>
 <span className="text-sm font-semibold text-muted-foreground">
 <AnimatedNumber value={totalChannelsAnalyzed} />+ {t('leaderboard.channels')}
 </span>
 </div>

 {/* Medal Rankings - 15% Bigger */}
 <div className="flex items-center justify-center gap-4 mb-6">
 <Tooltip>
 <TooltipTrigger asChild>
 <div className="text-4xl hover:scale-110 transition-transform duration-200 cursor-pointer" style={{filter: 'drop-shadow(0 0 8px rgba(255, 215, 0, 0.5))'}}>
 🥇
 </div>
 </TooltipTrigger>
 <TooltipContent side="top" align="center" avoidCollisions={true} className="max-w-[200px] text-center bg-background border border-border shadow-lg">
 <p className="text-sm font-medium text-foreground">{t('gamification.firstPlaceReward')}</p>
 </TooltipContent>
 </Tooltip>
 <Tooltip>
 <TooltipTrigger asChild>
 <div className="text-4xl hover:scale-110 transition-transform duration-200 cursor-pointer" style={{filter: 'drop-shadow(0 0 8px rgba(192, 192, 192, 0.5))'}}>
 🥈
 </div>
 </TooltipTrigger>
 <TooltipContent side="top" align="center" avoidCollisions={true} className="max-w-[200px] text-center bg-background border border-border shadow-lg">
 <p className="text-sm font-medium text-foreground">{t('gamification.secondPlaceReward')}</p>
 </TooltipContent>
 </Tooltip>
 <Tooltip>
 <TooltipTrigger asChild>
 <div className="text-4xl hover:scale-110 transition-transform duration-200 cursor-pointer" style={{filter: 'drop-shadow(0 0 8px rgba(205, 127, 50, 0.5))'}}>
 🥉
 </div>
 </TooltipTrigger>
 <TooltipContent side="top" align="center" avoidCollisions={true} className="max-w-[200px] text-center bg-background border border-border shadow-lg">
 <p className="text-sm font-medium text-foreground">{t('gamification.thirdPlaceReward')}</p>
 </TooltipContent>
 </Tooltip>
 </div>
 
 <div className="space-y-3 mb-6 flex-grow">
 <div className="flex items-center gap-3 text-sm">
 <Trophy className="w-4 h-4 text-warning flex-shrink-0 mt-0.5" />
 <span className="text-foreground">{t('leaderboard.realTimeRankings')}</span>
 </div>
 <div className="flex items-center gap-3 text-sm">
 <Eye className="w-4 h-4 text-warning flex-shrink-0 mt-0.5" />
 <span className="text-foreground">{t('leaderboard.communityDiscovery')}</span>
 </div>
 <div className="flex items-center gap-3 text-sm">
 <Lock className="w-4 h-4 text-warning flex-shrink-0 mt-0.5" />
 <span className="text-foreground">{t('leaderboard.stealthPrivacy')}</span>
 </div>
 </div>

 <div className="mt-auto pt-3 space-y-2 flex flex-col items-center">
 <span className="text-xs text-muted-foreground">{t('leaderboard.premiumOnly')}</span>
 <Button 
 onClick={() => navigate("/leaderboard")}
 variant="outline"
 className="w-full h-[44px] border-2 border-warning/50 text-warning hover:bg-warning/10 hover:border-warning text-sm font-semibold transition-colors duration-150"
 style={{background: 'linear-gradient(135deg, transparent, rgba(234, 179, 8, 0.05))'}}
 >
 {user ? t('leaderboard.viewRankings') : t('leaderboard.unlockNow')}
 </Button>
 </div>
 </div>
 </Card>

 {/* Thumbnail Discovery Card */}
 <Card className="p-5 md:p-6 bg-card border-2 border-purple-500/50 hover:border-purple-500/70 transition-all duration-300 hover:shadow-2xl hover:shadow-purple-500/30 hover:-translate-y-2 hover:brightness-110 relative overflow-hidden flex flex-col min-h-[420px] md:min-h-[460px]" style={{filter: 'drop-shadow(0 0 15px rgba(168, 85, 247, 0.1))'}}>
 <div className="absolute inset-0 bg-accent/6 opacity-50" />
 <div className="relative z-10 flex flex-col h-full">
 <div className="flex items-center gap-3 mb-4">
 <div className="p-2 rounded-xl bg-accent/20">
 <ImageIcon className="w-5 h-5 text-accent" />
 </div>
 <h3 className="text-lg md:text-xl font-bold text-foreground leading-tight">{t('thumbnails.discoveryTitle')}</h3>
 </div>
 
 <p className="text-muted-foreground mb-4 text-sm md:text-base leading-relaxed opacity-80">
 {t('thumbnails.discoveryDescription')}
 </p>

 {/* Thumbnail Preview Grid */}
 <div className="flex items-center justify-center mb-6">
 <div className="grid grid-cols-3 gap-2 opacity-80 hover:opacity-100 transition-opacity duration-300">
 <div className="w-16 h-12 bg-accent/30 rounded animate-pulse" />
 <div className="w-16 h-12 bg-accent/40 rounded animate-pulse delay-100" />
 <div className="w-16 h-12 bg-accent/30 rounded animate-pulse delay-200" />
 <div className="w-16 h-12 bg-accent/40 rounded animate-pulse delay-300" />
 <div className="w-16 h-12 bg-accent/50 rounded animate-pulse delay-400" />
 <div className="w-16 h-12 bg-accent/40 rounded animate-pulse delay-500" />
 </div>
 </div>
 
 <div className="space-y-3 mb-6 flex-grow">
 <div className="flex items-center gap-3 text-sm">
 <Sparkles className="w-4 h-4 text-accent flex-shrink-0 mt-0.5" />
 <span className="text-foreground">{t('thumbnails.curatedContent')}</span>
 </div>
 <div className="flex items-center gap-3 text-sm">
 <Target className="w-4 h-4 text-accent flex-shrink-0 mt-0.5" />
 <span className="text-foreground">{t('thumbnails.nicheFilter')}</span>
 </div>
 <div className="flex items-center gap-3 text-sm">
 <TrendingUp className="w-4 h-4 text-accent flex-shrink-0 mt-0.5" />
 <span className="text-foreground">{t('thumbnails.viralScore')}</span>
 </div>
 </div>

 <div className="mt-auto pt-3 space-y-2 flex flex-col items-center">
 <span className="text-xs text-muted-foreground">{t('thumbnails.premiumFeature')}</span>
 <Button 
 onClick={() => navigate("/thumbnail-discovery")}
 className="w-full h-[44px] bg-accent hover:bg-accent text-white text-sm font-semibold transition-colors duration-150"
 >
 {t('thumbnails.exploreThumbnails')}
 </Button>
 </div>
 </div>
 </Card>
 </div>

 {/* User Journey Timeline */}
 <div className="mb-24 md:mb-28 lg:mb-32">
 <UserJourneyTimeline />
 </div>

 {/* Timeline CTA - Compact */}
 <div className="mb-8 md:mb-10">
 <Card className="relative p-4 md:p-6 bg-primary/5 border border-primary/20 hover:border-primary/30 transition-colors duration-150 overflow-hidden group">
 <div className="relative z-10 flex flex-col md:flex-row items-center justify-between gap-4">
 {/* Icon & Text */}
 <div className="flex items-center gap-4 text-center md:text-left">
 <div className="w-12 h-12 bg-primary rounded-xl flex items-center justify-center flex-shrink-0 transition-transform duration-150 group-hover:scale-105">
 <Sparkles className="w-6 h-6 text-white" />
 </div>
 <div>
 <h3 className="text-lg md:text-xl font-bold mb-1">
 {language === 'de' ? 'Unsere Journey' : 'Our Journey'}
 </h3>
 <p className="text-muted-foreground text-xs md:text-sm">
 {language === 'de' 
 ? 'Entdecke, wie YT Channel Insights entstanden ist'
 : 'Discover how YT Channel Insights came to life'}
 </p>
 </div>
 </div>
 
 {/* CTA Button */}
 <Button 
 onClick={() => navigate('/timeline')}
 variant="outline"
 size="sm"
 className="gap-2 bg-background/50 hover:bg-primary/10 border-primary/30 hover:border-primary text-foreground hover:text-primary transition-all duration-300 flex-shrink-0"
 >
 {language === 'de' ? 'Zur Timeline' : 'View Timeline'}
 <ArrowRight className="w-3 h-3" />
 </Button>
 </div>
 </Card>
 </div>

 {/* Demo Section - Tablet Optimized */}
 <div className="mb-8 md:mb-16">
 <h2 className="text-[1.5rem] md:text-2xl lg:text-3xl font-bold text-center text-foreground mb-2 leading-[1.2]">
 {t('analysis.demoAnalyses')}
 </h2>
 <p className="text-center text-muted-foreground mb-6 md:mb-8 text-sm md:text-base lg:text-base leading-[1.5]">
 {t('analysis.tryOurExampleAnalyses')}
 </p>
 <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 md:gap-6 max-w-7xl mx-auto px-2 md:px-4 lg:px-0">
 {demoAnalyses.map((demo, index) => (
 <div key={index} className="relative">
 <CompactAnalysisCard
 id={demo.id}
 channelName={demo.channel}
 channelAvatar={demo.thumbnail}
 score={demo.score}
 subscribers={demo.subscriberCount}
 analysisDate={demo.analysisDate}
 onViewAnalysis={() => navigate(`/analysis/${demo.requestId}`)}
 onOpenYouTube={() => window.open(demo.youtubeUrl, '_blank')}
 />
 <div className="absolute -top-2 -right-2 z-10">
 <Badge variant="secondary" className="bg-accent/90 text-accent-foreground border-accent text-xs px-2 py-1 shadow-md">
 DEMO
 </Badge>
 </div>
 </div>
 ))}
 </div>
 </div>

 {/* Footer for non-logged in users */}
 {!user && (
 <div className="mt-12 mb-8 py-8 border-t border-border/50">
 <div className="flex flex-col sm:flex-row items-center justify-center gap-4 sm:gap-8">
 <Button
 variant="ghost" 
 size="sm"
 onClick={() => navigate("/faq")}
 className="gap-2 text-muted-foreground hover:text-foreground"
 >
 <HelpCircle className="w-4 h-4" />
 Help & FAQ
 </Button>
 
 <Button
 variant="ghost" 
 size="sm"
 onClick={() => navigate("/privacy")}
 className="gap-2 text-muted-foreground hover:text-foreground"
 >
 <Shield className="w-4 h-4" />
 Privacy Policy
 </Button>
 
 <Button
 variant="ghost" 
 size="sm"
 onClick={() => navigate("/terms")}
 className="gap-2 text-muted-foreground hover:text-foreground"
 >
 <FileText className="w-4 h-4" />
 Terms of Service
 </Button>

 <Button
 variant="ghost"
 size="sm"
 onClick={() => navigate("/impressum")}
 className="gap-2 text-muted-foreground hover:text-foreground"
 >
 <FileText className="w-4 h-4" />
 Impressum
 </Button>

 <Button
 variant="ghost"
 size="sm"
 onClick={() => navigate("/contact")}
 className="gap-2 text-muted-foreground hover:text-foreground"
 >
 <HelpCircle className="w-4 h-4" />
 Contact
 </Button>
 </div>
 </div>
 )}
 </div>
 
 {/* Mobile Bottom Navigation */}
 <MobileBottomTabs />
 </div>
 );
}