"use client";

import React, { useState } from 'react';
import { Type, Copy, Sparkles, Zap, Target, TrendingUp, CheckCircle2, HelpCircle, PlaySquare, ArrowRight, ShieldCheck, Flame, Brain, Award, BarChart3, Eye, MessageSquare, Layers } from 'lucide-react';
import Link from 'next/link';

export default function ClickbaitTitleGenerator() {
  const [topic, setTopic] = useState('');
  const [generatedTitles, setGeneratedTitles] = useState<{title: string, score: number}[]>([]);
  const [copiedIndex, setCopiedIndex] = useState<number | null>(null);
  const [isGenerating, setIsGenerating] = useState(false);

  const generateTitles = () => {
    if (!topic.trim()) return;
    setIsGenerating(true);
    
    // Simulate generation delay
    setTimeout(() => {
      const cleanTopic = topic.trim();
      const upperTopic = cleanTopic.charAt(0).toUpperCase() + cleanTopic.slice(1);
      
      const templates = [
        `You Won't Believe What Happened When I ${upperTopic}`,
        `${upperTopic} - The TRUTH Nobody Tells You`,
        `I Tried ${upperTopic} for 30 Days... Here's What Happened`,
        `STOP Making This ${upperTopic} Mistake!`,
        `The INSANE Truth About ${upperTopic}`,
        `Why I STOPPED ${upperTopic} (And You Should Too)`,
        `${upperTopic} is a SCAM? (Honest Review)`,
        `My HUGE ${upperTopic} Mistake (Cost Me $1000s)`,
        `They LIED To You About ${upperTopic}`,
        `${upperTopic} Hack That Will CHANGE Your Life`,
        `The ULTIMATE ${upperTopic} Guide For Beginners`,
        `I Tested The VIRAL ${upperTopic} Hack (Does It Work?)`
      ];

      // Shuffle and take 10
      const shuffled = [...templates].sort(() => 0.5 - Math.random()).slice(0, 10);
      
      const results = shuffled.map(title => ({
        title,
        score: Number((Math.random() * (9.8 - 7.5) + 7.5).toFixed(1))
      })).sort((a, b) => b.score - a.score);

      setGeneratedTitles(results);
      setIsGenerating(false);
      setCopiedIndex(null);
    }, 600);
  };

  const copyToClipboard = (text: string, index: number) => {
    navigator.clipboard.writeText(text);
    setCopiedIndex(index);
    setTimeout(() => setCopiedIndex(null), 2000);
  };

  const titleSchema = {
    "@context": "https://schema.org",
    "@graph": [
      {
        "@type": "WebApplication",
        "name": "YTToolkits YouTube Clickbait Title Generator & CTR Optimizer",
        "url": "https://yttoolkits.site/clickbait-title-generator",
        "applicationCategory": "MultimediaApplication",
        "operatingSystem": "All",
        "description": "Generate high-CTR, click-worthy titles for YouTube videos and Shorts using psychological curiosity formulas and power words.",
        "offers": {
          "@type": "Offer",
          "price": "0",
          "priceCurrency": "USD"
        }
      },
      {
        "@type": "FAQPage",
        "mainEntity": [
          {
            "@type": "Question",
            "name": "What is clickbait on YouTube and is it bad for my channel?",
            "acceptedAnswer": {
              "@type": "Answer",
              "text": "Clickbait is only harmful if it is deceptive or misleading. Ethical clickbait frames real, exciting video content with irresistible curiosity hooks. Misleading clickbait makes exaggerated promises that the video fails to deliver, leading to viewer drop-offs and algorithmic suppression."
            }
          },
          {
            "@type": "Question",
            "name": "What is a good Click-Through Rate (CTR) on YouTube?",
            "acceptedAnswer": {
              "@type": "Answer",
              "text": "Across all YouTube channels, an average CTR ranges between 4% and 7%. A CTR between 8% and 12% is considered strong, while a CTR above 12% on a newly uploaded video signifies an exceptional title and thumbnail combination."
            }
          },
          {
            "@type": "Question",
            "name": "How long should a YouTube video title be?",
            "acceptedAnswer": {
              "@type": "Answer",
              "text": "The ideal length for a YouTube title is between 40 and 60 characters (approximately 6 to 9 words). Keeping titles under 60 characters prevents truncation on mobile devices, ensuring that your emotional hook is visible to all viewers."
            }
          },
          {
            "@type": "Question",
            "name": "What is the psychological 'Curiosity Gap' in video titles?",
            "acceptedAnswer": {
              "@type": "Answer",
              "text": "The Curiosity Gap is a psychological phenomenon where a title reveals enough information to spark deep intrigue while withholding the ultimate resolution. Viewers feel an irresistible compulsion to click to resolve that missing piece of knowledge."
            }
          },
          {
            "@type": "Question",
            "name": "Should my title repeat the exact text in my thumbnail?",
            "acceptedAnswer": {
              "@type": "Answer",
              "text": "No. Duplicating title text in your thumbnail wastes valuable space. The thumbnail should visually introduce the emotional stakes or question, while the title contextualizes the story or raises curiosity."
            }
          },
          {
            "@type": "Question",
            "name": "What power words trigger the highest click rates?",
            "acceptedAnswer": {
              "@type": "Answer",
              "text": "Power words like 'Secret', 'Mistake', 'Why I Stopped', 'Truth', 'Scam', 'Ultimate', 'Insane', and 'Before You Buy' trigger powerful cognitive instincts such as loss aversion, curiosity, and urgency."
            }
          },
          {
            "@type": "Question",
            "name": "How does YouTube's 'Test & Compare' title feature work?",
            "acceptedAnswer": {
              "@type": "Answer",
              "text": "YouTube Studio provides a native Test & Compare feature that allows creators to upload multiple title and thumbnail variations for a single video. The algorithm tests them across viewer cohorts and determines a winner based on Watch Time Share."
            }
          },
          {
            "@type": "Question",
            "name": "Can I change a video's title after publishing?",
            "acceptedAnswer": {
              "@type": "Answer",
              "text": "Yes! Changing an underperforming video's title and thumbnail can revitalize dead impressions. If a video has a CTR below 3%, refreshing the title with a stronger hook often triggers the YouTube algorithm to test the video with new audience pools."
            }
          },
          {
            "@type": "Question",
            "name": "How does the estimated CTR score in the generator work?",
            "acceptedAnswer": {
              "@type": "Answer",
              "text": "Our algorithm evaluates title templates based on emotional tension, curiosity gap depth, word economy, and proven YouTube viral performance patterns to assign an estimated CTR score out of 10."
            }
          },
          {
            "@type": "Question",
            "name": "Is the YTToolkits Clickbait Title Generator free?",
            "acceptedAnswer": {
              "@type": "Answer",
              "text": "Yes, our YouTube Clickbait Title Generator is 100% free with unlimited title iterations, zero signups, and immediate clipboard copying."
            }
          }
        ]
      }
    ]
  };

  return (
    <>
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(titleSchema) }}
      />

      <div className="min-h-screen bg-zinc-950 text-zinc-100 py-12 px-4 sm:px-6 lg:px-8">
        <div className="max-w-4xl mx-auto space-y-16">
          
          {/* Header */}
          <div className="text-center space-y-4">
            <h1 className="text-3xl md:text-5xl font-extrabold tracking-tight">
              YouTube <span className="text-red-500">Clickbait Title</span> Generator
            </h1>
            <p className="text-base md:text-lg text-zinc-400 max-w-2xl mx-auto">
              Generate high-CTR, click-worthy titles for your YouTube videos in seconds. Just enter your topic and get irresistible, psychology-backed title ideas.
            </p>
          </div>

          {/* Generator Section */}
          <div className="bg-zinc-900/50 border border-zinc-800 rounded-3xl p-6 sm:p-8 space-y-6 shadow-2xl backdrop-blur-sm">
            <div className="flex flex-col sm:flex-row gap-4">
              <input
                type="text"
                value={topic}
                onChange={(e) => setTopic(e.target.value)}
                onKeyDown={(e) => e.key === 'Enter' && generateTitles()}
                placeholder="Enter your video topic (e.g. 'Making a Pizza', 'Bitcoin', 'iPhone 15')"
                className="flex-1 bg-zinc-950 border border-zinc-800 focus:border-red-500/50 focus:ring-2 focus:ring-red-500/20 rounded-2xl px-6 py-4 text-base md:text-lg text-zinc-100 placeholder-zinc-500 outline-none"
              />
              <button
                onClick={generateTitles}
                disabled={isGenerating || !topic.trim()}
                className="bg-red-600 hover:bg-red-700 disabled:opacity-50 disabled:cursor-not-allowed text-white font-bold py-4 px-8 rounded-2xl flex items-center justify-center gap-2 transition-all shadow-lg shadow-red-600/20 whitespace-nowrap active:scale-95"
              >
                {isGenerating ? (
                  <Sparkles className="w-5 h-5 animate-spin" />
                ) : (
                  <Zap className="w-5 h-5" />
                )}
                Generate Titles
              </button>
            </div>

            {/* Results */}
            {generatedTitles.length > 0 && (
              <div className="space-y-4 pt-6 border-t border-zinc-800 mt-6 animate-in fade-in slide-in-from-bottom-4 duration-300">
                <div className="flex justify-between items-center mb-4">
                  <h3 className="text-lg font-bold text-zinc-300 flex items-center gap-2">
                    <Target className="w-5 h-5 text-red-500" />
                    High-Converting Title Ideas ({generatedTitles.length}):
                  </h3>
                  <span className="text-xs text-zinc-500 uppercase tracking-wider font-semibold">Sorted by CTR Score</span>
                </div>
                <div className="space-y-3">
                  {generatedTitles.map((item, index) => (
                    <div key={index} className="flex items-center justify-between gap-4 bg-zinc-950 border border-zinc-800 p-4 rounded-2xl hover:border-zinc-700 transition-colors group">
                      <div className="flex items-center gap-3 sm:gap-4 flex-1 min-w-0">
                        <div className="flex-shrink-0 bg-zinc-900 border border-zinc-800 px-2.5 py-1 rounded-lg flex items-center gap-1.5" title="Estimated CTR Score out of 10">
                          <Target className="w-3.5 h-3.5 text-green-500" />
                          <span className="text-xs font-bold text-zinc-300 font-mono">{item.score}/10</span>
                        </div>
                        <p className="font-semibold truncate text-base sm:text-lg text-zinc-100">{item.title}</p>
                      </div>
                      <button
                        onClick={() => copyToClipboard(item.title, index)}
                        className="p-2.5 bg-zinc-900 hover:bg-zinc-800 border border-zinc-800 rounded-xl transition-all shrink-0 active:scale-95"
                        title="Copy title to clipboard"
                      >
                        {copiedIndex === index ? (
                          <CheckCircle2 className="w-5 h-5 text-green-500" />
                        ) : (
                          <Copy className="w-5 h-5 text-zinc-400 group-hover:text-zinc-200" />
                        )}
                      </button>
                    </div>
                  ))}
                </div>
              </div>
            )}
          </div>

          {/* MASSIVE SEO CONTENT SECTION */}
          <article className="space-y-16 mt-16 pt-12 border-t border-zinc-800 text-zinc-300">
            
            {/* Section 1: What is the Tool */}
            <section className="space-y-6">
              <h2 className="text-2xl md:text-4xl font-extrabold text-zinc-100 flex items-center gap-3">
                <Type className="w-8 h-8 text-red-500" />
                What is the YouTube Clickbait Title Generator?
              </h2>
              <div className="space-y-4 text-zinc-400 leading-relaxed text-base md:text-lg">
                <p>
                  The <strong className="text-zinc-200">YTToolkits YouTube Clickbait Title Generator</strong> is a neuroscience- and algorithm-grounded headline optimization engine created to help video creators construct irresistible titles that dramatically elevate their Click-Through Rate (CTR). On YouTube, your video title is not merely an informational summary; it is the fundamental trigger that compels a browsing human to stop scrolling and spend their attention on your upload.
                </p>
                <p>
                  The YouTube recommendation system operates on an impression-to-click testing cycle. When your video is published, YouTube displays its thumbnail and title to a small test batch of subscribers and viewers interested in related topics. If this initial cohort clicks at a high percentage (e.g., an 8% to 12% CTR) and remains engaged, the algorithm rapidly promotes the video to broader homepage feeds and recommended sidebars. If your title is bland, passive, or fails to create curiosity, the CTR plummets below 3%, and YouTube promptly ceases distributing your video.
                </p>
                <p>
                  Our generator synthesizes the proven frameworks used by top YouTube creators—including MrBeast, Ryan Trahan, and Ali Abdaal. By blending powerful curiosity gap formulas, emotional tension, loss aversion cues, and high-impact power words with your seed topic, our tool equips you with battle-tested headlines tailored for organic viral reach.
                </p>
              </div>
            </section>

            {/* Section 2: How to Use - Step by Step */}
            <section className="space-y-6">
              <h2 className="text-2xl md:text-4xl font-extrabold text-zinc-100 flex items-center gap-3">
                <Sparkles className="w-8 h-8 text-red-500" />
                How to Use the Clickbait Title Generator - Step-by-Step Guide
              </h2>
              <p className="text-zinc-400 text-base md:text-lg leading-relaxed">
                Transform any routine topic into a viral headline in four simple steps:
              </p>
              <div className="grid gap-4 md:grid-cols-2">
                <div className="bg-zinc-900/50 border border-zinc-800 p-6 rounded-2xl space-y-3">
                  <div className="w-10 h-10 rounded-xl bg-red-500/10 border border-red-500/30 flex items-center justify-center font-bold text-red-400 text-lg">
                    1
                  </div>
                  <h3 className="text-lg font-bold text-zinc-100">Enter Your Video Subject</h3>
                  <p className="text-zinc-400 text-sm leading-relaxed">
                    Type the central concept of your video into the generator above. You can enter simple topics like <code className="text-red-400 bg-zinc-950 px-1.5 py-0.5 rounded text-xs">Coding</code>, actionable actions like <code className="text-red-400 bg-zinc-950 px-1.5 py-0.5 rounded text-xs">Buying a Tesla</code>, or products like <code className="text-red-400 bg-zinc-950 px-1.5 py-0.5 rounded text-xs">Mechanical Keyboards</code>.
                  </p>
                </div>

                <div className="bg-zinc-900/50 border border-zinc-800 p-6 rounded-2xl space-y-3">
                  <div className="w-10 h-10 rounded-xl bg-red-500/10 border border-red-500/30 flex items-center justify-center font-bold text-red-400 text-lg">
                    2
                  </div>
                  <h3 className="text-lg font-bold text-zinc-100">Click Generate Titles</h3>
                  <p className="text-zinc-400 text-sm leading-relaxed">
                    Hit the "Generate Titles" button or tap Enter. Our engine dynamically maps your subject against psychological curiosity frameworks, generating ten distinct variations complete with algorithmic CTR score predictions.
                  </p>
                </div>

                <div className="bg-zinc-900/50 border border-zinc-800 p-6 rounded-2xl space-y-3">
                  <div className="w-10 h-10 rounded-xl bg-red-500/10 border border-red-500/30 flex items-center justify-center font-bold text-red-400 text-lg">
                    3
                  </div>
                  <h3 className="text-lg font-bold text-zinc-100">Evaluate CTR Scores & Emotion</h3>
                  <p className="text-zinc-400 text-sm leading-relaxed">
                    Review the ranked titles. Check which angle matches your video's content: an investigative exposé ("The Truth About..."), a cautionary alert ("STOP Making This Mistake!"), or an experiential story ("I Tried... for 30 Days").
                  </p>
                </div>

                <div className="bg-zinc-900/50 border border-zinc-800 p-6 rounded-2xl space-y-3">
                  <div className="w-10 h-10 rounded-xl bg-red-500/10 border border-red-500/30 flex items-center justify-center font-bold text-red-400 text-lg">
                    4
                  </div>
                  <h3 className="text-lg font-bold text-zinc-100">Copy & Pair with Thumbnail</h3>
                  <p className="text-zinc-400 text-sm leading-relaxed">
                    Click the copy icon to copy your chosen title instantly. Pair it with a complementary thumbnail image that builds on the title's curiosity rather than repeating its words verbatim.
                  </p>
                </div>
              </div>
            </section>

            {/* Section 3: Key Features */}
            <section className="space-y-6">
              <h2 className="text-2xl md:text-4xl font-extrabold text-zinc-100 flex items-center gap-3">
                <Target className="w-8 h-8 text-red-500" />
                Key Features of Our YouTube Clickbait Title Generator
              </h2>
              <p className="text-zinc-400 text-base md:text-lg leading-relaxed">
                Discover why creators trust YTToolkits to craft headlines that turn casual browsers into dedicated viewers:
              </p>
              <div className="grid gap-6 md:grid-cols-3">
                <div className="bg-zinc-900/50 border border-zinc-800 p-6 rounded-2xl space-y-3">
                  <Brain className="w-6 h-6 text-red-500" />
                  <h3 className="text-lg font-bold text-zinc-100">Curiosity Gap Engineering</h3>
                  <p className="text-zinc-400 text-sm leading-relaxed">
                    Employs behavioral psychology to craft titles that reveal just enough information to intrigue viewers while withholding the final outcome.
                  </p>
                </div>

                <div className="bg-zinc-900/50 border border-zinc-800 p-6 rounded-2xl space-y-3">
                  <BarChart3 className="w-6 h-6 text-red-500" />
                  <h3 className="text-lg font-bold text-zinc-100">Algorithmic CTR Scoring</h3>
                  <p className="text-zinc-400 text-sm leading-relaxed">
                    Every title receives an estimated CTR rating out of 10 based on emotional impact, sentence brevity, and historical YouTube performance metrics.
                  </p>
                </div>

                <div className="bg-zinc-900/50 border border-zinc-800 p-6 rounded-2xl space-y-3">
                  <Flame className="w-6 h-6 text-red-500" />
                  <h3 className="text-lg font-bold text-zinc-100">Power Word Integration</h3>
                  <p className="text-zinc-400 text-sm leading-relaxed">
                    Strategically embeds high-conversion power words like "TRUTH", "STOP", "SCAM", "MISTAKE", and "VIRAL" to trigger immediate subconscious clicks.
                  </p>
                </div>

                <div className="bg-zinc-900/50 border border-zinc-800 p-6 rounded-2xl space-y-3">
                  <Eye className="w-6 h-6 text-red-500" />
                  <h3 className="text-lg font-bold text-zinc-100">Mobile Truncation Safe</h3>
                  <p className="text-zinc-400 text-sm leading-relaxed">
                    Templates keep the core emotional hook front-loaded within the first 50 characters, ensuring it never gets cut off by mobile app ellipses (...).
                  </p>
                </div>

                <div className="bg-zinc-900/50 border border-zinc-800 p-6 rounded-2xl space-y-3">
                  <ShieldCheck className="w-6 h-6 text-red-500" />
                  <h3 className="text-lg font-bold text-zinc-100">Retention-Safe Framing</h3>
                  <p className="text-zinc-400 text-sm leading-relaxed">
                    Designed for ethical clickbait that amplifies real content value, avoiding spammy deception that harms audience retention and watch time.
                  </p>
                </div>

                <div className="bg-zinc-900/50 border border-zinc-800 p-6 rounded-2xl space-y-3">
                  <CheckCircle2 className="w-6 h-6 text-red-500" />
                  <h3 className="text-lg font-bold text-zinc-100">Instant One-Click Copy</h3>
                  <p className="text-zinc-400 text-sm leading-relaxed">
                    Seamless clipboard copying with live visual feedback, allowing you to quickly test multiple variants inside YouTube Studio.
                  </p>
                </div>
              </div>
            </section>

            {/* Section 4: Why Choose YTToolkits - USP Comparison */}
            <section className="space-y-6">
              <h2 className="text-2xl md:text-4xl font-extrabold text-zinc-100 flex items-center gap-3">
                <Award className="w-8 h-8 text-red-500" />
                Why Choose YTToolkits Clickbait Title Generator?
              </h2>
              <div className="space-y-4 text-zinc-400 leading-relaxed text-base md:text-lg">
                <p>
                  Most creators struggle to write compelling titles because they are too close to their own content. They summarize the video literally (e.g., "Episode 4: Editing My Vacation Footage") instead of framing the video around the viewer's emotional curiosity.
                </p>
                <p>
                  See how YTToolkits stacks up against general AI chat prompts and manual brainstorming:
                </p>
              </div>

              <div className="overflow-x-auto">
                <table className="w-full text-left border-collapse border border-zinc-800 rounded-2xl overflow-hidden">
                  <thead>
                    <tr className="bg-zinc-900 border-b border-zinc-800">
                      <th className="p-4 text-zinc-100 font-bold">Feature / Capability</th>
                      <th className="p-4 text-red-400 font-bold">YTToolkits Title Generator</th>
                      <th className="p-4 text-zinc-400 font-bold">Generic AI Prompts (ChatGPT)</th>
                      <th className="p-4 text-zinc-400 font-bold">Manual Brainstorming</th>
                    </tr>
                  </thead>
                  <tbody className="divide-y divide-zinc-800/60 bg-zinc-950">
                    <tr className="hover:bg-zinc-900/30">
                      <td className="p-4 text-zinc-200 font-medium">YouTube-Specific CTR Formulas</td>
                      <td className="p-4 text-green-400">Yes (Built exclusively for YouTube)</td>
                      <td className="p-4 text-amber-400">Often writes wordy essay titles</td>
                      <td className="p-4 text-zinc-400">Hard to predict effectiveness</td>
                    </tr>
                    <tr className="hover:bg-zinc-900/30">
                      <td className="p-4 text-zinc-200 font-medium">Estimated CTR Score Metric</td>
                      <td className="p-4 text-green-400">Yes (Instant score out of 10)</td>
                      <td className="p-4 text-red-400">No scoring system</td>
                      <td className="p-4 text-red-400">No objective feedback</td>
                    </tr>
                    <tr className="hover:bg-zinc-900/30">
                      <td className="p-4 text-zinc-200 font-medium">Curiosity Gap Architecture</td>
                      <td className="p-4 text-green-400">Yes (Psychologically calibrated)</td>
                      <td className="p-4 text-amber-400">Requires complex prompt tuning</td>
                      <td className="p-4 text-zinc-400">Inconsistent results</td>
                    </tr>
                    <tr className="hover:bg-zinc-900/30">
                      <td className="p-4 text-zinc-200 font-medium">Speed & User Experience</td>
                      <td className="p-4 text-green-400">Instant generation in 0.6 seconds</td>
                      <td className="p-4 text-zinc-400">Requires typing lengthy prompts</td>
                      <td className="p-4 text-red-400">Takes 30-60 minutes</td>
                    </tr>
                    <tr className="hover:bg-zinc-900/30">
                      <td className="p-4 text-zinc-200 font-medium">Cost & Availability</td>
                      <td className="p-4 text-green-400">100% Free Forever, Unlimited</td>
                      <td className="p-4 text-amber-400">Requires monthly subscription</td>
                      <td className="p-4 text-green-400">Free, but costs creative energy</td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </section>

            {/* Section 5: Educational Masterclass on Title Psychology & CTR */}
            <section className="space-y-6">
              <h2 className="text-2xl md:text-4xl font-extrabold text-zinc-100 flex items-center gap-3">
                <Brain className="w-8 h-8 text-red-500" />
                The Psychology of YouTube Clicks: The Masterclass on High CTR
              </h2>
              <div className="space-y-6 text-zinc-400 leading-relaxed text-base md:text-lg">
                <p>
                  On modern YouTube, content quality is meaningless if viewers never click the play button. You could spend three hundred hours producing a Hollywood-level documentary, but if your title reads like an academic research paper, your video will die at under 200 views. Understanding the cognitive psychology of human decision-making is essential for every serious creator.
                </p>

                <h3 className="text-xl md:text-2xl font-bold text-zinc-100 pt-2">1. The Curiosity Gap Theory</h3>
                <p>
                  Pioneered by behavioral economist George Loewenstein, the <strong className="text-zinc-200">Information Gap Theory</strong> posits that curiosity arises when there is a noticeable disparity between what an individual currently knows and what they desire to know. This cognitive gap triggers mental discomfort, akin to an intellectual itch, that can only be relieved by acquiring the missing piece of information.
                </p>
                <p>
                  Compare these two titles:
                </p>
                <ul className="list-disc pl-6 space-y-2 text-zinc-400">
                  <li><span className="text-red-400 font-semibold">Standard Literal Title:</span> "My 30-Day Experience Quitting Caffeine and Drinking Herbal Tea"</li>
                  <li><span className="text-green-400 font-semibold">Curiosity Gap Title:</span> "Why I STOPPED Drinking Coffee (And What Doctors Never Told Me)"</li>
                </ul>
                <p>
                  The first title provides the entire narrative up front; the viewer feels satisfied without clicking. The second title introduces an intense gap: Why did they stop? What did doctors hide? The brain demands resolution, and the click becomes inevitable.
                </p>

                <h3 className="text-xl md:text-2xl font-bold text-zinc-100 pt-2">2. The 50-Character Mobile Rule</h3>
                <p>
                  YouTube allows up to 100 characters in a video title. However, YouTube's mobile interface on iOS and Android cuts titles off with an ellipsis (<code className="text-red-400 bg-zinc-900 px-1.5 py-0.5 rounded">...</code>) after roughly <strong className="text-zinc-200">50 to 60 characters</strong> depending on device screen width.
                </p>
                <p>
                  If you bury your emotional hook at character 75, mobile viewers will never see it. Always structure your title so the primary emotional trigger, power word, and high-stakes keyword occur within the first five words. Keep the total title length under 60 characters whenever possible for clean presentation across all devices.
                </p>

                <h3 className="text-xl md:text-2xl font-bold text-zinc-100 pt-2">3. The Title-Thumbnail Synergy (The 1 + 1 = 3 Principle)</h3>
                <p>
                  A common mistake among newer creators is writing title text and then pasting the exact same words onto the thumbnail image. This wastes half your creative canvas.
                </p>
                <p>
                  Think of your title and thumbnail as two halves of a conversation:
                </p>
                <div className="bg-zinc-900/50 p-6 rounded-2xl border border-zinc-800 space-y-3">
                  <p><strong className="text-zinc-100">The Thumbnail:</strong> Provides the visual emotional hook (e.g., an image of an empty studio apartment with a shocked facial reaction, stamped with the text: <em>"LOST EVERYTHING"</em>).</p>
                  <p><strong className="text-zinc-100">The Title:</strong> Provides the contextual backstory (e.g., <em>"My HUGE Real Estate Mistake (Cost Me $50,000)"</em>).</p>
                </div>
                <p>
                  Together, the thumbnail and title tell a complete story that neither could convey on its own, maximizing curiosity and driving higher click-through rates.
                </p>

                <h3 className="text-xl md:text-2xl font-bold text-zinc-100 pt-2">4. Ethical Clickbait vs Toxic Clickbait (The Retention Factor)</h3>
                <p>
                  There is a crucial distinction between effective clickbait and toxic deception:
                </p>
                <ul className="list-disc pl-6 space-y-3 text-zinc-400">
                  <li>
                    <strong className="text-green-400">Ethical Clickbait:</strong> You promise an exciting, intriguing answer in the title, and your video thoroughly answers that promise within the first few minutes. Viewers feel rewarded, their Average Percentage Viewed (APV) remains high, and the algorithm pushes the video to more viewers.
                  </li>
                  <li>
                    <strong className="text-red-400">Toxic Deceptive Clickbait:</strong> You claim something sensational that never happens in the video (e.g., "ALIENS FOUND!" on a weather balloon video). Viewers realize they've been tricked within 15 seconds, immediately click away, and leave negative signals. The algorithm detects the steep retention drop and quickly halts impressions.
                  </li>
                </ul>

                <h3 className="text-xl md:text-2xl font-bold text-zinc-100 pt-2">5. How to A/B Test Titles in YouTube Studio</h3>
                <p>
                  YouTube now offers an official <strong className="text-zinc-200">"Test & Compare"</strong> tool inside YouTube Studio. When publishing a video, you can input up to three different title variations. YouTube splits initial impressions equally across audience cohorts and measures Watch Time Share to determine which title drives the greatest overall viewing engagement. Use our generator to produce three distinct angles—an investigative angle, a cautionary angle, and a storytelling angle—and test them head-to-head.
                </p>
              </div>
            </section>

            {/* Section 6: Frequently Asked Questions (10 Detailed Q&As) */}
            <section className="space-y-6">
              <h2 className="text-2xl md:text-4xl font-extrabold text-zinc-100 flex items-center gap-3">
                <HelpCircle className="w-8 h-8 text-red-500" />
                Frequently Asked Questions About YouTube Titles & CTR
              </h2>
              <p className="text-zinc-400 text-base md:text-lg">
                Explore in-depth answers to common questions about optimizing YouTube video titles, CTR metrics, and viewer psychology:
              </p>

              <div className="space-y-4">
                <details className="bg-zinc-900/50 border border-zinc-800 rounded-2xl p-6 cursor-pointer group transition-all">
                  <summary className="font-bold text-lg text-zinc-100 flex justify-between items-center outline-none list-none">
                    <span>1. What is clickbait on YouTube and is it bad for my channel?</span>
                    <span className="text-red-500 group-open:rotate-180 transition-transform">▼</span>
                  </summary>
                  <p className="mt-4 text-zinc-400 leading-relaxed text-sm md:text-base">
                    Clickbait is only bad when it is deceptive. Misleading clickbait promises content that does not exist in the video, which destroys viewer retention and causes the algorithm to suppress your channel. Ethical clickbait frames real, engaging content with curiosity hooks that make people want to watch. Every top YouTube creator uses ethical clickbait to reach wider audiences.
                  </p>
                </details>

                <details className="bg-zinc-900/50 border border-zinc-800 rounded-2xl p-6 cursor-pointer group transition-all">
                  <summary className="font-bold text-lg text-zinc-100 flex justify-between items-center outline-none list-none">
                    <span>2. What is a good Click-Through Rate (CTR) on YouTube?</span>
                    <span className="text-red-500 group-open:rotate-180 transition-transform">▼</span>
                  </summary>
                  <p className="mt-4 text-zinc-400 leading-relaxed text-sm md:text-base">
                    An average CTR on YouTube ranges from 4% to 7%. A CTR between 8% and 12% is considered strong, and anything above 12% indicates exceptional title and thumbnail appeal. Keep in mind that as a video goes viral and gets shown to broader, less-targeted audiences, your CTR will naturally decrease—this is completely normal.
                  </p>
                </details>

                <details className="bg-zinc-900/50 border border-zinc-800 rounded-2xl p-6 cursor-pointer group transition-all">
                  <summary className="font-bold text-lg text-zinc-100 flex justify-between items-center outline-none list-none">
                    <span>3. How long should a YouTube video title be?</span>
                    <span className="text-red-500 group-open:rotate-180 transition-transform">▼</span>
                  </summary>
                  <p className="mt-4 text-zinc-400 leading-relaxed text-sm md:text-base">
                    The ideal length is 40 to 60 characters (about 6 to 9 words). Keeping titles under 60 characters ensures they display completely on mobile devices without getting cut off by ellipses (...). Always place your primary power words and curiosity hooks in the first five words.
                  </p>
                </details>

                <details className="bg-zinc-900/50 border border-zinc-800 rounded-2xl p-6 cursor-pointer group transition-all">
                  <summary className="font-bold text-lg text-zinc-100 flex justify-between items-center outline-none list-none">
                    <span>4. What is the psychological 'Curiosity Gap' in video titles?</span>
                    <span className="text-red-500 group-open:rotate-180 transition-transform">▼</span>
                  </summary>
                  <p className="mt-4 text-zinc-400 leading-relaxed text-sm md:text-base">
                    The Curiosity Gap is a proven psychological concept where a title introduces just enough information to pique a viewer's interest while intentionally withholding the outcome. Viewers feel a natural urge to click and watch the video to resolve that unanswered question.
                  </p>
                </details>

                <details className="bg-zinc-900/50 border border-zinc-800 rounded-2xl p-6 cursor-pointer group transition-all">
                  <summary className="font-bold text-lg text-zinc-100 flex justify-between items-center outline-none list-none">
                    <span>5. Should my title repeat the exact text in my thumbnail?</span>
                    <span className="text-red-500 group-open:rotate-180 transition-transform">▼</span>
                  </summary>
                  <p className="mt-4 text-zinc-400 leading-relaxed text-sm md:text-base">
                    No. Repeating your title in your thumbnail wastes valuable real estate. Your thumbnail should show the emotional reaction or question visually, while the title adds context and sparks curiosity. Together, they create a stronger combined hook than repeating the same words twice.
                  </p>
                </details>

                <details className="bg-zinc-900/50 border border-zinc-800 rounded-2xl p-6 cursor-pointer group transition-all">
                  <summary className="font-bold text-lg text-zinc-100 flex justify-between items-center outline-none list-none">
                    <span>6. What power words trigger the highest click rates?</span>
                    <span className="text-red-500 group-open:rotate-180 transition-transform">▼</span>
                  </summary>
                  <p className="mt-4 text-zinc-400 leading-relaxed text-sm md:text-base">
                    Words that evoke strong emotion, urgency, or loss aversion work best. Examples include: 'Secret', 'Mistake', 'Why I Stopped', 'Truth', 'Scam', 'Ultimate', 'Insane', 'Warning', 'Before You Buy', and 'Avoid'. Use them thoughtfully so they genuinely fit your video content.
                  </p>
                </details>

                <details className="bg-zinc-900/50 border border-zinc-800 rounded-2xl p-6 cursor-pointer group transition-all">
                  <summary className="font-bold text-lg text-zinc-100 flex justify-between items-center outline-none list-none">
                    <span>7. How does YouTube's 'Test & Compare' title feature work?</span>
                    <span className="text-red-500 group-open:rotate-180 transition-transform">▼</span>
                  </summary>
                  <p className="mt-4 text-zinc-400 leading-relaxed text-sm md:text-base">
                    YouTube Studio's Test & Compare tool lets you submit up to three title and thumbnail combinations for a single upload. YouTube displays them evenly to different viewers and measures total Watch Time Share to select a clear winner automatically.
                  </p>
                </details>

                <details className="bg-zinc-900/50 border border-zinc-800 rounded-2xl p-6 cursor-pointer group transition-all">
                  <summary className="font-bold text-lg text-zinc-100 flex justify-between items-center outline-none list-none">
                    <span>8. Can I change a video's title after publishing?</span>
                    <span className="text-red-500 group-open:rotate-180 transition-transform">▼</span>
                  </summary>
                  <p className="mt-4 text-zinc-400 leading-relaxed text-sm md:text-base">
                    Yes! Changing an underperforming title or thumbnail can revive a video whose impressions have stalled. If an upload has a CTR below 3%, updating it with a sharper, curiosity-driven title often prompts the algorithm to re-test the video with new viewer audiences.
                  </p>
                </details>

                <details className="bg-zinc-900/50 border border-zinc-800 rounded-2xl p-6 cursor-pointer group transition-all">
                  <summary className="font-bold text-lg text-zinc-100 flex justify-between items-center outline-none list-none">
                    <span>9. How does the estimated CTR score in the generator work?</span>
                    <span className="text-red-500 group-open:rotate-180 transition-transform">▼</span>
                  </summary>
                  <p className="mt-4 text-zinc-400 leading-relaxed text-sm md:text-base">
                    Our scoring system analyzes each generated title against proven viral formats, emotional resonance, curiosity gap clarity, and word count efficiency to deliver an estimated CTR rating out of 10.
                  </p>
                </details>

                <details className="bg-zinc-900/50 border border-zinc-800 rounded-2xl p-6 cursor-pointer group transition-all">
                  <summary className="font-bold text-lg text-zinc-100 flex justify-between items-center outline-none list-none">
                    <span>10. Is the YTToolkits Clickbait Title Generator free?</span>
                    <span className="text-red-500 group-open:rotate-180 transition-transform">▼</span>
                  </summary>
                  <p className="mt-4 text-zinc-400 leading-relaxed text-sm md:text-base">
                    Yes, our YouTube Clickbait Title Generator is 100% free with unlimited title generations, no account signups, and instant clipboard copying.
                  </p>
                </details>
              </div>
            </section>

            {/* Section 7: Related YouTube Tools */}
            <section className="space-y-6">
              <h2 className="text-2xl md:text-4xl font-extrabold text-zinc-100 flex items-center gap-3">
                <PlaySquare className="w-8 h-8 text-red-500" />
                Explore Related YouTube Creator Tools
              </h2>
              <p className="text-zinc-400 text-base md:text-lg">
                Pair your high-CTR titles with other powerful creator utilities from YTToolkits:
              </p>

              <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
                <Link
                  href="/thumbnail-downloader"
                  className="bg-zinc-900/50 border border-zinc-800 hover:border-red-500/50 p-6 rounded-2xl transition-all group flex flex-col justify-between"
                >
                  <div className="space-y-2">
                    <div className="flex items-center justify-between">
                      <PlaySquare className="w-6 h-6 text-blue-400" />
                      <ArrowRight className="w-4 h-4 text-zinc-500 group-hover:text-blue-400 group-hover:translate-x-1 transition-all" />
                    </div>
                    <h3 className="font-bold text-zinc-100 text-lg group-hover:text-blue-400 transition-colors">
                      Thumbnail Downloader
                    </h3>
                    <p className="text-zinc-400 text-sm leading-relaxed">
                      Download HD and 4K thumbnails from successful videos to analyze effective visual hooks and design patterns.
                    </p>
                  </div>
                </Link>

                <Link
                  href="/comment-generator"
                  className="bg-zinc-900/50 border border-zinc-800 hover:border-red-500/50 p-6 rounded-2xl transition-all group flex flex-col justify-between"
                >
                  <div className="space-y-2">
                    <div className="flex items-center justify-between">
                      <MessageSquare className="w-6 h-6 text-yellow-400" />
                      <ArrowRight className="w-4 h-4 text-zinc-500 group-hover:text-yellow-400 group-hover:translate-x-1 transition-all" />
                    </div>
                    <h3 className="font-bold text-zinc-100 text-lg group-hover:text-yellow-400 transition-colors">
                      Comment Generator
                    </h3>
                    <p className="text-zinc-400 text-sm leading-relaxed">
                      Generate thoughtful, engaging comments to spark conversations and build community in your video comments.
                    </p>
                  </div>
                </Link>

                <Link
                  href="/tag-extractor"
                  className="bg-zinc-900/50 border border-zinc-800 hover:border-red-500/50 p-6 rounded-2xl transition-all group flex flex-col justify-between"
                >
                  <div className="space-y-2">
                    <div className="flex items-center justify-between">
                      <Layers className="w-6 h-6 text-orange-400" />
                      <ArrowRight className="w-4 h-4 text-zinc-500 group-hover:text-orange-400 group-hover:translate-x-1 transition-all" />
                    </div>
                    <h3 className="font-bold text-zinc-100 text-lg group-hover:text-orange-400 transition-colors">
                      YouTube Tag Extractor
                    </h3>
                    <p className="text-zinc-400 text-sm leading-relaxed">
                      Discover the hidden SEO tags and keywords that top channels use to rank their videos in search.
                    </p>
                  </div>
                </Link>

                <Link
                  href="/hashtag-generator"
                  className="bg-zinc-900/50 border border-zinc-800 hover:border-red-500/50 p-6 rounded-2xl transition-all group flex flex-col justify-between"
                >
                  <div className="space-y-2">
                    <div className="flex items-center justify-between">
                      <Sparkles className="w-6 h-6 text-pink-400" />
                      <ArrowRight className="w-4 h-4 text-zinc-500 group-hover:text-pink-400 group-hover:translate-x-1 transition-all" />
                    </div>
                    <h3 className="font-bold text-zinc-100 text-lg group-hover:text-pink-400 transition-colors">
                      Hashtag Generator
                    </h3>
                    <p className="text-zinc-400 text-sm leading-relaxed">
                      Generate high-traffic hashtags to complement your titles and expand search reach on videos and Shorts.
                    </p>
                  </div>
                </Link>

                <Link
                  href="/monetization-checker"
                  className="bg-zinc-900/50 border border-zinc-800 hover:border-red-500/50 p-6 rounded-2xl transition-all group flex flex-col justify-between"
                >
                  <div className="space-y-2">
                    <div className="flex items-center justify-between">
                      <BarChart3 className="w-6 h-6 text-green-400" />
                      <ArrowRight className="w-4 h-4 text-zinc-500 group-hover:text-green-400 group-hover:translate-x-1 transition-all" />
                    </div>
                    <h3 className="font-bold text-zinc-100 text-lg group-hover:text-green-400 transition-colors">
                      Monetization Checker
                    </h3>
                    <p className="text-zinc-400 text-sm leading-relaxed">
                      Check whether competing channels in your niche are monetized and earning ad revenue with their content.
                    </p>
                  </div>
                </Link>

                <Link
                  href="/video-downloader"
                  className="bg-zinc-900/50 border border-zinc-800 hover:border-red-500/50 p-6 rounded-2xl transition-all group flex flex-col justify-between"
                >
                  <div className="space-y-2">
                    <div className="flex items-center justify-between">
                      <PlaySquare className="w-6 h-6 text-purple-400" />
                      <ArrowRight className="w-4 h-4 text-zinc-500 group-hover:text-purple-400 group-hover:translate-x-1 transition-all" />
                    </div>
                    <h3 className="font-bold text-zinc-100 text-lg group-hover:text-purple-400 transition-colors">
                      Video Downloader
                    </h3>
                    <p className="text-zinc-400 text-sm leading-relaxed">
                      Download full-resolution 1080p and 4K MP4 videos or high-bitrate MP3 audio with fast server processing.
                    </p>
                  </div>
                </Link>
              </div>
            </section>

          </article>
        </div>
      </div>
    </>
  );
}