import React, { useState, useEffect } from 'react'; import { BrowserRouter, Routes, Route, Link, NavLink, Navigate } from 'react-router-dom'; import { Sparkles, Heart, Share2, Copy, Flame, User, Search, BookOpen, Compass, Check, ArrowRight, HelpCircle } from 'lucide-react'; import { Toaster, toast } from 'sonner'; import { motion, AnimatePresence } from 'framer-motion'; import { clsx, type ClassValue } from 'clsx'; import { twMerge } from 'tailwind-merge'; import { cn } from "@/lib/utils"; // --- LOCAL UTILS --- function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)); } // --- TYPES & INTERFACES --- interface Starter { id: string; text: string; category: 'funny' | 'clever' | 'romantic'; vibe: string; likes: number; } interface Bio { id: string; vibe: 'funny' | 'clever' | 'romantic'; text: string; promptUsed?: string; } // --- SEED DATA --- const INITIAL_STARTERS: Starter[] = [ { id: 's1', text: "Are you a keyboard? Because you're just my type.", category: 'clever', vibe: 'Techie & Sharp', likes: 142 }, { id: 's2', text: "Do you believe in love at first sight, or should I walk by again with a better outfit?", category: 'funny', vibe: 'Playfully Confident', likes: 389 }, { id: 's3', text: "I was going to say something incredibly smooth, but I completely forgot it the moment I opened your profile.", category: 'romantic', vibe: 'Sweet & Honest', likes: 254 }, { id: 's4', text: "If you were a triangle, you'd be acute one.", category: 'clever', vibe: 'Nerdy Charm', likes: 98 }, { id: 's5', text: "My mom told me not to talk to strangers, but I'll make an exception for someone who clearly has elite taste in music.", category: 'funny', vibe: 'Teasing', likes: 312 }, { id: 's6', text: "I don't know which is more beautiful—the sunset today or the vibe you radiate.", category: 'romantic', vibe: 'Deep & Warm', likes: 187 }, { id: 's7', text: "On a scale of 1 to 10, you're a 9 and I'm the 1 you need.", category: 'clever', vibe: 'Smooth Math', likes: 421 }, { id: 's8', text: "I’m not a photographer, but I can easily picture us getting tacos this Thursday.", category: 'funny', vibe: 'Casual & Direct', likes: 512 }, { id: 's9', text: "I usually go for 10s, but I guess I'll settle for an 11 like you.", category: 'romantic', vibe: 'Bold Flirt', likes: 299 }, ]; const BIO_TEMPLATES: Record<'funny' | 'clever' | 'romantic', string[]> = { funny: [ "Certified professional overthinker. Looking for someone to share 3-piece chicken tenders with. Must be okay with me singing poorly in the car.", "I promise to always tell you you're right, unless we are debating whether pineapple belongs on pizza (it does). Let's argue about it.", "My hobbies include reading the back of cereal boxes and pretending I'm in a music video when it rains. Swipe right if you can handle this level of drama." ], clever: [ "Sapiophile with a terrible sense of direction. Let's find a cool local bookstore and get completely lost trying to find the exit.", "Looking for a partner-in-crime for museum dates, espresso drinking, and pretending we understand modern art masterpieces.", "I keep my expectations high and my coffee strong. Tell me your favorite conspiracy theory and I'll tell you mine." ], romantic: [ "Just a hopeless romantic looking for someone to build a cozy blanket fort with. Let's exchange playlists and talk about the universe.", "Seeking someone who appreciates slow mornings, deep conversations, and spontaneous weekend road trips to nowhere in particular.", "Let's skip the small talk. What's a dream you've never told anyone else? I'll buy the first round of drinks." ] }; // --- CUSTOM NEO-BRUTALIST BUTTON --- interface ButtonProps extends React.ButtonHTMLAttributes { variant?: 'primary' | 'secondary' | 'accent' | 'danger'; size?: 'sm' | 'md' | 'lg'; children: React.ReactNode; className?: string; } function Button({ children, className, variant = 'primary', size = 'md', ...props }: ButtonProps) { const baseStyle = "font-bold uppercase tracking-wider border-2 border-black transition-all active:translate-x-[0px] active:translate-y-[0px] active:shadow-[2px_2px_0px_0px_rgba(0,0,0,1)]"; const variants = { primary: "bg-[#FFE600] text-black shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] hover:-translate-x-0.5 hover:-translate-y-0.5 hover:shadow-[6px_6px_0px_0px_rgba(0,0,0,1)]", secondary: "bg-white text-black shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] hover:-translate-x-0.5 hover:-translate-y-0.5 hover:shadow-[6px_6px_0px_0px_rgba(0,0,0,1)]", accent: "bg-[#FF007F] text-white shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] hover:-translate-x-0.5 hover:-translate-y-0.5 hover:shadow-[6px_6px_0px_0px_rgba(0,0,0,1)]", danger: "bg-red-500 text-white shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] hover:-translate-x-0.5 hover:-translate-y-0.5 hover:shadow-[6px_6px_0px_0px_rgba(0,0,0,1)]" }; const sizes = { sm: "px-3 py-1.5 text-xs", md: "px-5 py-2.5 text-sm", lg: "px-8 py-4 text-base" }; return ( ); } // --- APP SHELL / LAYOUT --- function Layout({ children }: { children: React.ReactNode }) { return (

{/* Top Navigation Header */}

SmoothTalk AI

cn( "px-3 py-1.5 font-bold uppercase text-xs tracking-wider border-2 border-black transition-all", isActive ? "bg-[#FFE600] shadow-[2px_2px_0px_0px_rgba(0,0,0,1)] translate-x-[-2px] translate-y-[-2px]" : "bg-white hover:bg-gray-100" )} > Browse Rizz cn( "px-3 py-1.5 font-bold uppercase text-xs tracking-wider border-2 border-black transition-all", isActive ? "bg-[#00F0FF] shadow-[2px_2px_0px_0px_rgba(0,0,0,1)] translate-x-[-2px] translate-y-[-2px]" : "bg-white hover:bg-gray-100" )} > Bio Gen cn( "px-3 py-1.5 font-bold uppercase text-xs tracking-wider border-2 border-black transition-all", isActive ? "bg-[#FF007F] text-white shadow-[2px_2px_0px_0px_rgba(0,0,0,1)] translate-x-[-2px] translate-y-[-2px]" : "bg-white hover:bg-gray-100" )} > Saved cn( "px-3 py-1.5 font-bold uppercase text-xs tracking-wider border-2 border-black transition-all", isActive ? "bg-[#A855F7] text-white shadow-[2px_2px_0px_0px_rgba(0,0,0,1)] translate-x-[-2px] translate-y-[-2px]" : "bg-white hover:bg-gray-100" )} > Academy

{/* Main Content */}

{children}

{/* Mobile Sticky Bottom Nav */}

cn("flex flex-col items-center gap-0.5 font-bold text-[10px] uppercase", isActive ? "text-[#FF007F]" : "text-gray-600")}> Browse cn("flex flex-col items-center gap-0.5 font-bold text-[10px] uppercase", isActive ? "text-[#00F0FF]" : "text-gray-600")}> Bio Gen cn("flex flex-col items-center gap-0.5 font-bold text-[10px] uppercase", isActive ? "text-[#FF007F]" : "text-gray-600")}> Saved cn("flex flex-col items-center gap-0.5 font-bold text-[10px] uppercase", isActive ? "text-[#A855F7]" : "text-gray-600")}> Academy

); } // --- COMPONENT: SUGGESTION CARD --- interface CardProps { id: string; text: string; category: 'funny' | 'clever' | 'romantic'; vibe: string; likes: number; isFavorite: boolean; onToggleFavorite: () => void; } function SuggestionCard({ id, text, category, vibe, likes, isFavorite, onToggleFavorite }: CardProps) { const [copied, setCopied] = useState(false); const handleCopy = () => { navigator.clipboard.writeText(text); setCopied(true); toast.success("Copied to clipboard!"); setTimeout(() => setCopied(false), 2000); }; const handleShare = () => { if (navigator.share) { navigator.share({ title: 'SmoothTalk AI Rizz Suggestion', text: `"${text}" - Generated by SmoothTalk AI`, }).catch(() => {}); } else { handleCopy(); } }; const categoryColors = { funny: "bg-[#FFE600] text-black", clever: "bg-[#00F0FF] text-black", romantic: "bg-[#FF007F] text-white" }; return ( {/* Category Badge */}

{category} {vibe}

{/* Main text */}

"{text}"

{/* Action Buttons */}

Likes: {likes}

); } // --- SCREEN 1: BROWSE / HOME --- interface HomeScreenProps { starters: Starter[]; favorites: string[]; onToggleFavorite: (id: string) => void; onAddNewStarter: (text: string, category: 'funny' | 'clever' | 'romantic', vibe: string) => void; } function HomeScreen({ starters, favorites, onToggleFavorite, onAddNewStarter }: HomeScreenProps) { const [activeCategory, setActiveCategory] = useState<'all' | 'funny' | 'clever' | 'romantic'>('all'); const [searchQuery, setSearchQuery] = useState(''); const [customText, setCustomText] = useState(''); const [customCategory, setCustomCategory] = useState<'funny' | 'clever' | 'romantic'>('funny'); const [customVibe, setCustomVibe] = useState('Custom Vibe'); const [isGenerating, setIsGenerating] = useState(false); const categories: ('funny' | 'clever' | 'romantic')[] = ['funny', 'clever', 'romantic']; const filterCategories: ('all' | 'funny' | 'clever' | 'romantic')[] = ['all', 'funny', 'clever', 'romantic']; // Filter logic const filteredStarters = starters.filter(item => { const matchesCategory = activeCategory === 'all' || item.category === activeCategory; const matchesSearch = item.text.toLowerCase().includes(searchQuery.toLowerCase()) || item.vibe.toLowerCase().includes(searchQuery.toLowerCase()); return matchesCategory && matchesSearch; }); // Handle mock AI generation const handleAiGenerate = () => { setIsGenerating(true); const prompts: Record<'funny' | 'clever' | 'romantic', string[]> = { funny: [ "Are you a magician? Because whenever I look at you, everyone else disappears.", "I'm not saying you're the best catch here, but I'm definitely the best fisherman.", "Do you have a map? I keep getting lost in your eyes, and my GPS is broken." ], clever: [ "If we were elements, we'd form a highly stable compound. Let's test the chemistry.", "Is your name Wi-Fi? Because I'm feeling a really strong connection here.", "Are you made of copper and tellurium? Because you are Cu-Te." ], romantic: [ "I was wondering if you had an extra heart, because mine was just stolen.", "I don't believe in love at first sight, but I'm willing to make an exception for you.", "Our conversation is already the highlight of my week, and it hasn't even started yet." ] }; setTimeout(() => { const pool = prompts[customCategory]; const randomText = pool[Math.floor(Math.random() * pool.length)]; onAddNewStarter(randomText, customCategory, customVibe || 'AI Generated'); setIsGenerating(false); toast.success("New rizz starter generated successfully!"); }, 1200); }; const handleManualSubmit = (e: React.FormEvent) => { e.preventDefault(); if (!customText.trim()) return; onAddNewStarter(customText, customCategory, customVibe || 'User Original'); setCustomText(''); toast.success("Added your custom starter!"); }; return (

{/* Hero Banner (Neo-Brutalist) */}

V1.2 Live

UPGRADE YOUR RIZZ GAME INSTANTLY.

Stop sending boring "Hey" messages. Access hundreds of high-converting, witty conversation starters and profile bios.

{/* Interactive Generator Tool */}

{/* Generator Controls */}

AI Rizz Generator

Select a vibe, add a custom tag, and let SmoothTalk AI craft the perfect icebreaker.

1. Choose Category

{categories.map((cat) => ( ))}

2. Vibe Tag (e.g., Nerdy, Sweet, Bold) setCustomVibe(e.target.value)} placeholder="e.g. Self-deprecating, Sassy" className="w-full p-2.5 border-2 border-black focus:outline-none focus:ring-2 focus:ring-[#FFE600] font-bold text-sm" />

OR WRITE YOUR OWN

{/* Manual Form */}

Your Conversation Starter

setCustomText(e.target.value)}
                  placeholder="Type your absolute best pickup line or opener here..."
                  rows={3}
                  required
                  className="w-full p-2.5 border-2 border-black focus:outline-none focus:ring-2 focus:ring-[#FFE600] font-bold text-sm"
                />
              </div>
              <Button type="submit" variant="secondary" className="w-full text-xs">
                Add to Public Feed
              </Button>
            </form>
          </div>
        </div>

{/* Browse Feed */}
        <div className="lg:col-span-7 space-y-6">
          {/* Filters & Search */}
          <div className="bg-white border-4 border-black p-4 shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] flex flex-col md:flex-row gap-4 items-center justify-between">
            {/* Category Filter Chips */}
            <div className="flex flex-wrap gap-2 w-full md:w-auto">
              {filterCategories.map((cat) => (
                <button
                  key={cat}
                  onClick={() => setActiveCategory(cat)}
                  className={cn(
                    "px-3 py-1.5 text-xs font-black uppercase border-2 border-black transition-all",
                    activeCategory === cat 
                      ? "bg-black text-white" 
                      : "bg-white hover:bg-gray-100"
                  )}
                >
                  {cat}
                </button>
              ))}
            </div>

{/* Search Input */}
            <div className="relative w-full md:w-64">
              <input 
                type="text" 
                placeholder="Search openers..."
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
                className="w-full pl-8 pr-3 py-1.5 border-2 border-black text-xs font-bold focus:outline-none focus:ring-2 focus:ring-[#FFE600]"
              />
              <Search className="w-3.5 h-3.5 absolute left-2.5 top-1/2 -translate-y-1/2 text-gray-500" />
            </div>
          </div>

{/* Starters Grid */}
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <AnimatePresence>
              {filteredStarters.map((item) => (
                <SuggestionCard 
                  key={item.id}
                  id={item.id}
                  text={item.text}
                  category={item.category}
                  vibe={item.vibe}
                  likes={item.likes}
                  isFavorite={favorites.includes(item.id)}
                  onToggleFavorite={() => onToggleFavorite(item.id)}
                />
              ))}
            </AnimatePresence>
          </div>

{filteredStarters.length === 0 && (
            <div className="bg-white border-4 border-black p-12 text-center shadow-[4px_4px_0px_0px_rgba(0,0,0,1)]">
              <HelpCircle className="w-12 h-12 mx-auto mb-4 text-gray-400" />
              <h3 className="text-xl font-black uppercase mb-2">No Starters Found</h3>
              <p className="text-sm font-bold text-gray-600">
                Try adjusting your search or filter settings, or generate a brand new one using the tool on the left!
              </p>
            </div>
          )}
        </div>
      </section>
    </div>
  );
}

// --- SCREEN 2: PROFILE BIO GENERATOR ---
interface BioGeneratorScreenProps {
  onSaveBio: (bioText: string, vibe: 'funny' | 'clever' | 'romantic') => void;
  savedBios: Bio[];
  onDeleteBio: (id: string) => void;
}

function BioGeneratorScreen({ 
  onSaveBio, 
  savedBios, 
  onDeleteBio 
}: BioGeneratorScreenProps) {
  const [vibe, setVibe] = useState<'funny' | 'clever' | 'romantic'>('funny');
  const [keyword1, setKeyword1] = useState('');
  const [keyword2, setKeyword2] = useState('');
  const [keyword3, setKeyword3] = useState('');
  const [generatedBio, setGeneratedBio] = useState('');
  const [isGenerating, setIsGenerating] = useState(false);

const categories: ('funny' | 'clever' | 'romantic')[] = ['funny', 'clever', 'romantic'];

const handleGenerate = (e: React.FormEvent) => {
    e.preventDefault();
    setIsGenerating(true);

setTimeout(() => {
      const templates = BIO_TEMPLATES[vibe];
      const randomTemplate = templates[Math.floor(Math.random() * templates.length)];
      
      // Inject keywords if user typed them, otherwise keep templates as is
      let finalBio = randomTemplate;
      if (keyword1 || keyword2 || keyword3) {
        const keywords = [keyword1, keyword2, keyword3].filter(Boolean).join(', ');
        finalBio = `${randomTemplate} Basically, I'm into ${keywords}.`;
      }

setGeneratedBio(finalBio);
      setIsGenerating(false);
      toast.success("Dating bio generated!");
    }, 1500);
  };

const handleCopy = (text: string) => {
    navigator.clipboard.writeText(text);
    toast.success("Bio copied to clipboard!");
  };

const handleSave = () => {
    if (!generatedBio) return;
    onSaveBio(generatedBio, vibe);
    toast.success("Bio saved to your collection!");
  };

return (
    <div className="space-y-8">
      {/* Header */}
      <div className="bg-[#FFE600] border-4 border-black p-6 shadow-[6px_6px_0px_0px_rgba(0,0,0,1)]">
        <h1 className="text-3xl md:text-5xl font-black uppercase tracking-tight">Dating Profile Bio Generator</h1>
        <p className="font-bold text-sm md:text-base mt-2">
          Struggling to write your "About Me"? Let us build a high-converting, punchy bio based on your personality.
        </p>
      </div>

<div className="grid grid-cols-1 lg:grid-cols-12 gap-8 items-start">
        {/* Generator Form */}
        <form onSubmit={handleGenerate} className="lg:col-span-5 bg-white border-4 border-black p-6 shadow-[6px_6px_0px_0px_rgba(0,0,0,1)] space-y-6">
          <h2 className="text-xl font-black uppercase border-b-4 border-black pb-2">Bio Builder</h2>
          
          <div>
            <label className="block text-xs font-black uppercase mb-2">1. Select Your Vibe</label>
            <div className="grid grid-cols-3 gap-2">
              {categories.map((v) => (
                <button
                  key={v}
                  type="button"
                  onClick={() => setVibe(v)}
                  className={cn(
                    "py-2 font-bold uppercase text-xs border-2 border-black transition-all",
                    vibe === v 
                      ? "bg-[#00F0FF] shadow-[2px_2px_0px_0px_rgba(0,0,0,1)] translate-x-[-1px] translate-y-[-1px]" 
                      : "bg-white hover:bg-gray-50"
                  )}
                >
                  {v}
                </button>
              ))}
            </div>
          </div>

<div className="space-y-3">
            <label className="block text-xs font-black uppercase">2. Add Three Keywords (Optional)</label>
            <div className="grid grid-cols-3 gap-2">
              <input 
                type="text" 
                placeholder="e.g. Tacos" 
                value={keyword1}
                onChange={(e) => setKeyword1(e.target.value)}
                className="p-2 border-2 border-black text-xs font-bold focus:outline-none focus:ring-2 focus:ring-[#00F0FF]"
              />
              <input 
                type="text" 
                placeholder="e.g. Hiking" 
                value={keyword2}
                onChange={(e) => setKeyword2(e.target.value)}
                className="p-2 border-2 border-black text-xs font-bold focus:outline-none focus:ring-2 focus:ring-[#00F0FF]"
              />
              <input 
                type="text" 
                placeholder="e.g. Vinyl" 
                value={keyword3}
                onChange={(e) => setKeyword3(e.target.value)}
                className="p-2 border-2 border-black text-xs font-bold focus:outline-none focus:ring-2 focus:ring-[#00F0FF]"
              />
            </div>
          </div>

<Button 
            type="submit" 
            disabled={isGenerating}
            variant="primary" 
            className="w-full flex items-center justify-center gap-2"
          >
            {isGenerating ? (
              <>
                <div className="w-4 h-4 border-2 border-black border-t-transparent rounded-full animate-spin" />
                Crafting Your Story...
              </>
            ) : (
              <>
                <Sparkles className="w-4 h-4 fill-current" /> Generate Bio
              </>
            )}
          </Button>
        </form>

{/* Results & Saved Bios */}
        <div className="lg:col-span-7 space-y-6">
          {/* Current Generated Output */}
          {generatedBio && (
            <div className="bg-[#00F0FF] border-4 border-black p-6 shadow-[6px_6px_0px_0px_rgba(0,0,0,1)] relative">
              <div className="absolute -top-3 -right-3 bg-[#FF007F] text-white font-black text-xs px-2 py-1 border-2 border-black uppercase rotate-[4deg]">
                Freshly Generated!
              </div>
              <h3 className="text-lg font-black uppercase mb-3">Your Bio Preview:</h3>
              <p className="bg-white border-2 border-black p-4 font-bold text-base leading-relaxed mb-4">
                "{generatedBio}"
              </p>
              <div className="flex gap-2">
                <Button onClick={() => handleCopy(generatedBio)} variant="secondary" className="flex items-center gap-2">
                  <Copy className="w-4 h-4" /> Copy Bio
                </Button>
                <Button onClick={handleSave} variant="accent" className="flex items-center gap-2">
                  <Heart className="w-4 h-4 fill-current" /> Save Bio
                </Button>
              </div>
            </div>
          )}

{/* Saved Bios Collection */}
          <div className="bg-white border-4 border-black p-6 shadow-[6px_6px_0px_0px_rgba(0,0,0,1)]">
            <h3 className="text-xl font-black uppercase mb-4 border-b-2 border-black pb-2">Your Saved Bios</h3>
            {savedBios.length === 0 ? (
              <p className="text-sm font-bold text-gray-500 italic">No saved bios yet. Generate one above and click "Save Bio"!</p>
            ) : (
              <div className="space-y-4">
                {savedBios.map((bio) => (
                  <div key={bio.id} className="border-2 border-black p-4 bg-gray-50 relative">
                    <span className="absolute top-2 right-2 px-2 py-0.5 text-[10px] font-black uppercase border border-black bg-white">
                      {bio.vibe}
                    </span>
                    <p className="font-bold text-sm pr-12 mb-3">"{bio.text}"</p>
                    <div className="flex gap-2">
                      <button 
                        type="button"
                        onClick={() => handleCopy(bio.text)}
                        className="px-2 py-1 bg-white border border-black text-xs font-bold hover:bg-gray-100 flex items-center gap-1"
                      >
                        <Copy className="w-3.5 h-3.5" /> Copy
                      </button>
                      <button 
                        type="button"
                        onClick={() => onDeleteBio(bio.id)}
                        className="px-2 py-1 bg-red-100 border border-black text-xs font-bold hover:bg-red-200 text-red-700 flex items-center gap-1"
                      >
                        Delete
                      </button>
                    </div>
                  </div>
                ))}
              </div>
            )}
          </div>
        </div>
      </div>
    </div>
  );
}

// --- SCREEN 3: FAVORITES ---
interface FavoritesScreenProps {
  starters: Starter[];
  favorites: string[];
  onToggleFavorite: (id: string) => void;
}

function FavoritesScreen({ 
  starters, 
  favorites, 
  onToggleFavorite 
}: FavoritesScreenProps) {
  const favoritedStarters = starters.filter(item => favorites.includes(item.id));

return (
    <div className="space-y-8">
      {/* Header */}
      <div className="bg-[#FF007F] text-white border-4 border-black p-6 shadow-[6px_6px_0px_0px_rgba(0,0,0,1)]">
        <h1 className="text-3xl md:text-5xl font-black uppercase tracking-tight">Your Saved Starters</h1>
        <p className="font-bold text-sm md:text-base mt-2 text-pink-100">
          Your personal vault of high-converting conversation starters. Ready to copy and paste.
        </p>
      </div>

{favoritedStarters.length === 0 ? (
        <div className="bg-white border-4 border-black p-12 text-center shadow-[6px_6px_0px_0px_rgba(0,0,0,1)]">
          <Heart className="w-16 h-16 mx-auto mb-4 text-gray-300" />
          <h2 className="text-2xl font-black uppercase mb-2">No Saved Starters Yet</h2>
          <p className="text-sm font-bold text-gray-600 mb-6 max-w-md mx-auto">
            Browse the main feed, click the heart icon on any opener that catches your eye, and it will show up here!
          </p>
          <Link to="/">
            <Button variant="primary">Browse Conversation Starters</Button>
          </Link>
        </div>
      ) : (
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          {favoritedStarters.map((item) => (
            <SuggestionCard 
              key={item.id}
              id={item.id}
              text={item.text}
              category={item.category}
              vibe={item.vibe}
              likes={item.likes}
              isFavorite={true}
              onToggleFavorite={() => onToggleFavorite(item.id)}
            />
          ))}
        </div>
      )}
    </div>
  );
}

// --- SCREEN 4: RIZZ ACADEMY (EDUCATIONAL TIPS) ---
function AcademyScreen() {
  const [activeTab, setActiveTab] = useState<number>(0);

const tips = [
    {
      title: "The 3-Second Rule",
      subtitle: "Speed is everything",
      content: "When you match with someone, send the first message within 3 hours. It shows high intent and confidence. Matches get cold fast—strike while the iron is hot!",
      color: "bg-[#FFE600]"
    },
    {
      title: "Ask Open-Ended Questions",
      subtitle: "Avoid dead-ends",
      content: "Never ask questions that can be answered with a simple 'yes' or 'no'. Instead of 'Did you have a good weekend?', try 'What was the absolute highlight of your weekend?'",
      color: "bg-[#00F0FF]"
    },
    {
      title: "Use Profile Clues",
      subtitle: "Be observant",
      content: "Look at their photos and bio. Mention a specific detail (a pet, a travel photo, a book they are holding). It proves you actually read their profile instead of copy-pasting.",
      color: "bg-[#FF007F] text-white"
    },
    {
      title: "The Power of Teasing",
      subtitle: "Playful banter wins",
      content: "Gentle, playful teasing is the fastest way to build chemistry. Keep it lighthearted and always follow up with a genuine compliment so they know you are just playing.",
      color: "bg-[#A855F7] text-white"
    }
  ];

return (
    <div className="space-y-8">
      {/* Header */}
      <div className="bg-[#A855F7] text-white border-4 border-black p-6 shadow-[6px_6px_0px_0px_rgba(0,0,0,1)]">
        <h1 className="text-3xl md:text-5xl font-black uppercase tracking-tight">SmoothTalk Academy</h1>
        <p className="font-bold text-sm md:text-base mt-2 text-purple-100">
          Master the art of digital conversation. Read our bite-sized strategy guides below.
        </p>
      </div>

<div className="grid grid-cols-1 lg:grid-cols-12 gap-8 items-start">
        {/* Navigation Tabs */}
        <div className="lg:col-span-4 bg-white border-4 border-black p-4 shadow-[6px_6px_0px_0px_rgba(0,0,0,1)] space-y-2">
          <h3 className="text-xs font-black uppercase text-gray-500 mb-2 px-2">Academy Lessons</h3>
          {tips.map((tip, idx) => (
            <button
              key={idx}
              type="button"
              onClick={() => setActiveTab(idx)}
              className={cn(
                "w-full text-left p-3 border-2 border-black font-bold transition-all flex justify-between items-center",
                activeTab === idx 
                  ? "bg-black text-white translate-x-1" 
                  : "bg-white hover:bg-gray-50"
              )}
            >
              <div>
                <div className="text-xs font-black uppercase opacity-60">Lesson 0{idx + 1}</div>
                <div className="text-sm uppercase tracking-tight">{tip.title}</div>
              </div>
              <ArrowRight className="w-4 h-4" />
            </button>
          ))}
        </div>

{/* Content Area */}
        <div className="lg:col-span-8">
          <AnimatePresence mode="wait">
            <motion.div
              key={activeTab}
              initial={{ opacity: 0, y: 10 }}
              animate={{ opacity: 1, y: 0 }}
              exit={{ opacity: 0, y: -10 }}
              className={cn("border-4 border-black p-8 shadow-[8px_8px_0px_0px_rgba(0,0,0,1)] min-h-[300px] flex flex-col justify-between", tips[activeTab].color)}
            >
              <div>
                <span className="px-2 py-1 text-xs font-black uppercase border border-black bg-white text-black inline-block mb-4">
                  Lesson 0{activeTab + 1}
                </span>
                <h2 className="text-3xl md:text-4xl font-black uppercase tracking-tight mb-1">
                  {tips[activeTab].title}
                </h2>
                <h4 className="text-sm font-bold uppercase tracking-wider opacity-80 mb-6">
                  {tips[activeTab].subtitle}
                </h4>
                <p className="text-base md:text-lg font-bold leading-relaxed max-w-2xl">
                  {tips[activeTab].content}
                </p>
              </div>

<div className="mt-8 pt-4 border-t border-black/20 flex justify-between items-center text-xs font-black uppercase">
                <span>SmoothTalk AI Masterclass</span>
                <span>Pro Tip</span>
              </div>
            </motion.div>
          </AnimatePresence>
        </div>
      </div>
    </div>
  );
}

// --- MAIN APP COMPONENT ---
export default function App() {
  const [starters, setStarters] = useState<Starter[]>(() => {
    const saved = localStorage.getItem('smoothtalk:starters');
    return saved ? JSON.parse(saved) : INITIAL_STARTERS;
  });

const [favorites, setFavorites] = useState<string[]>(() => {
    const saved = localStorage.getItem('smoothtalk:favorites');
    return saved ? JSON.parse(saved) : [];
  });

const [savedBios, setSavedBios] = useState<Bio[]>(() => {
    const saved = localStorage.getItem('smoothtalk:bios');
    return saved ? JSON.parse(saved) : [];
  });

// Sync to local storage
  useEffect(() => {
    localStorage.setItem('smoothtalk:starters', JSON.stringify(starters));
  }, [starters]);

useEffect(() => {
    localStorage.setItem('smoothtalk:favorites', JSON.stringify(favorites));
  }, [favorites]);

useEffect(() => {
    localStorage.setItem('smoothtalk:bios', JSON.stringify(savedBios));
  }, [savedBios]);

// Actions
  const handleToggleFavorite = (id: string) => {
    setFavorites(prev => {
      const isFav = prev.includes(id);
      if (isFav) {
        toast.info("Removed from saved!");
        return prev.filter(fId => fId !== id);
      } else {
        toast.success("Saved to favorites!");
        return [...prev, id];
      }
    });
  };

const handleDeleteBio = (id: string) => {
    setSavedBios(prev => prev.filter(b => b.id !== id));
    toast.info("Bio deleted.");
  };

return (
    <BrowserRouter>
      <Toaster position="top-right" closeButton richColors />
      <Layout>
        <Routes>
          <Route 
            path="/" 
            element={
              <HomeScreen 
                starters={starters} 
                favorites={favorites} 
                onToggleFavorite={handleToggleFavorite} 
                onAddNewStarter={handleAddNewStarter} 
              />
            } 
          />
          <Route 
            path="/bio-generator" 
            element={
              <BioGeneratorScreen 
                onSaveBio={handleSaveBio} 
                savedBios={savedBios} 
                onDeleteBio={handleDeleteBio} 
              />
            } 
          />
          <Route 
            path="/favorites" 
            element={
              <FavoritesScreen 
                starters={starters} 
                favorites={favorites} 
                onToggleFavorite={handleToggleFavorite} 
              />
            } 
          />
          <Route 
            path="/academy" 
            element={<AcademyScreen />} 
          />
          <Route path="*" element={<Navigate to="/" replace />} />
        </Routes>
      </Layout>
    </BrowserRouter>
  );
}</article></body></html>