'use client';

import { useState } from 'react';
import { 
  Search, 
  Copy, 
  Check, 
  Hash, 
  FileText, 
  PlaySquare, 
  Sparkles, 
  CheckCircle2, 
  HelpCircle, 
  ArrowRight, 
  BarChart3, 
  Layers, 
  ShieldCheck, 
  Target, 
  Eye, 
  ExternalLink, 
  Compass, 
  Clock, 
  Info 
} from 'lucide-react';
import Link from 'next/link';

export default function DescriptionViewerPage() {
  const [url, setUrl] = useState('');
  const [loading, setLoading] = useState(false);
  const [result, setResult] = useState<any>(null);
  const [error, setError] = useState('');
  const [copied, setCopied] = useState(false);

  const fetchDescription = async (e: React.FormEvent) => {
    e.preventDefault();
    setLoading(true);
    setError('');
    setResult(null);

    try {
      const response = await fetch('/api/description', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ url }),
      });
      
      const data = await response.json();
      if (!response.ok) throw new Error(data.error || 'Failed to fetch description');
      
      setResult(data);
    } catch (err: any) {
      setError(err.message);
    } finally {
      setLoading(false);
    }
  };

  const handleCopy = () => {
    if (result?.description) {
      navigator.clipboard.writeText(result.description);
      setCopied(true);
      setTimeout(() => setCopied(false), 2000);
    }
  };

  // Convert URLs to clickable links in text
  const linkify = (text: string) => {
    const urlRegex = /(https?:\/\/[^\s]+)/g;
    return text.split('\n').map((line, i) => {
      const parts = line.split(urlRegex);
      return (
        <div key={i} className="min-h-[1.5em]">
          {parts.map((part, j) => {
            if (part.match(urlRegex)) {
              return (
                <a key={j} href={part} target="_blank" rel="noopener noreferrer" className="text-blue-400 hover:underline">
                  {part}
                </a>
              );
            }
            return <span key={j}>{part}</span>;
          })}
        </div>
      );
    });
  };

  const jsonLd = {
    "@context": "https://schema.org",
    "@graph": [
      {
        "@type": "WebApplication",
        "name": "YouTube Description Viewer & Extractor",
        "url": "https://yttoolkits.site/description-viewer",
        "description": "Extract and view the full description, hashtags, timestamps, and links from any YouTube video. Clean formatted text viewer with one-click copy.",
        "applicationCategory": "SEOApplication",
        "operatingSystem": "All",
        "offers": {
          "@type": "Offer",
          "price": "0",
          "priceCurrency": "USD"
        }
      },
      {
        "@type": "BreadcrumbList",
        "itemListElement": [
          {
            "@type": "ListItem",
            "position": 1,
            "name": "Home",
            "item": "https://yttoolkits.site/"
          },
          {
            "@type": "ListItem",
            "position": 2,
            "name": "YouTube Description Viewer",
            "item": "https://yttoolkits.site/description-viewer"
          }
        ]
      },
      {
        "@type": "FAQPage",
        "mainEntity": [
          {
            "@type": "Question",
            "name": "What is a YouTube Description Viewer?",
            "acceptedAnswer": {
              "@type": "Answer",
              "text": "A YouTube Description Viewer is an online tool that extracts and displays the full 5,000-character description text, hashtags, and links from any public YouTube video without truncated 'Show More' text or mobile app limitations."
            }
          },
          {
            "@type": "Question",
            "name": "Why is the YouTube video description important for SEO?",
            "acceptedAnswer": {
              "@type": "Answer",
              "text": "YouTube and Google algorithms crawl descriptions using natural language processing to understand video context, index relevant keywords, rank videos in search queries, and match content to viewer watch history."
            }
          },
          {
            "@type": "Question",
            "name": "What is the character limit for a YouTube video description?",
            "acceptedAnswer": {
              "@type": "Answer",
              "text": "YouTube allows up to 5,000 characters per video description. Top creators use this space for timestamps, keyword-rich summaries, affiliate links, and social channel links."
            }
          },
          {
            "@type": "Question",
            "name": "What are the first 200 characters in a YouTube description?",
            "acceptedAnswer": {
              "@type": "Answer",
              "text": "The first 150 to 200 characters are the most critical because they appear 'above the fold' before the 'Show More' toggle and are displayed as the meta description snippet in Google search results."
            }
          },
          {
            "@type": "Question",
            "name": "Can I copy someone's YouTube description?",
            "acceptedAnswer": {
              "@type": "Answer",
              "text": "You can extract and copy competitor descriptions for research and inspiration. However, directly copying someone else's text violates copyright. You should adapt their structure and format into your own original text."
            }
          },
          {
            "@type": "Question",
            "name": "How do video timestamps create Google Key Moments?",
            "acceptedAnswer": {
              "@type": "Answer",
              "text": "When you include timestamp chapters (e.g., 01:25 Introduction) in your description, Google search indexes each chapter as a clickable 'Key Moment' directly inside Google search result carousels."
            }
          },
          {
            "@type": "Question",
            "name": "How many hashtags should I add to a YouTube description?",
            "acceptedAnswer": {
              "@type": "Answer",
              "text": "Best practice is to add 3 to 5 relevant hashtags. YouTube shows the first three hashtags above your title. If you include more than 60 hashtags, YouTube ignores all hashtags on the video entirely."
            }
          },
          {
            "@type": "Question",
            "name": "Does this tool work on mobile devices?",
            "acceptedAnswer": {
              "@type": "Answer",
              "text": "Yes, YTToolkits Description Viewer works flawlessly on iPhones, Android devices, tablets, and desktop browsers without requiring app downloads."
            }
          },
          {
            "@type": "Question",
            "name": "Does this tool extract descriptions from unlisted videos?",
            "acceptedAnswer": {
              "@type": "Answer",
              "text": "Yes, as long as you have the direct link to the unlisted video. It cannot access private videos that require account authorization."
            }
          },
          {
            "@type": "Question",
            "name": "Is this YouTube Description Viewer free to use?",
            "acceptedAnswer": {
              "@type": "Answer",
              "text": "Yes, our tool is 100% free with unlimited extractions, zero sign-up required, and no browser extensions to install."
            }
          }
        ]
      }
    ]
  };

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

      <div className="min-h-screen bg-zinc-950 text-zinc-100 py-12 px-4 md:px-8 lg:px-16">
        <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 flex items-center justify-center gap-4 text-zinc-100">
              <FileText className="w-10 h-10 text-red-500" />
              YouTube Description Viewer
            </h1>
            <p className="text-zinc-400 text-lg max-w-2xl mx-auto">
              Extract, view, and copy the complete description, hashtags, timestamps, and links from any YouTube video in seconds.
            </p>
          </div>

          {/* Input Card */}
          <div className="bg-zinc-900/50 border border-zinc-800 rounded-3xl p-6 md:p-8 shadow-xl">
            <form onSubmit={fetchDescription} className="flex flex-col md:flex-row gap-4">
              <div className="relative flex-grow">
                <div className="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
                  <PlaySquare className="h-5 w-5 text-zinc-500" />
                </div>
                <input
                  type="url"
                  placeholder="Paste YouTube video URL here (e.g., https://youtube.com/watch?v=...)"
                  value={url}
                  onChange={(e) => setUrl(e.target.value)}
                  required
                  className="w-full bg-zinc-950 border border-zinc-800 focus:border-red-500/50 focus:ring-2 focus:ring-red-500/20 rounded-2xl py-4 pl-12 pr-4 text-zinc-100 placeholder-zinc-500 outline-none transition-all"
                />
              </div>
              <button
                type="submit"
                disabled={loading}
                className="bg-red-600 hover:bg-red-700 disabled:bg-zinc-800 disabled:text-zinc-500 text-white rounded-2xl px-8 py-4 font-semibold flex items-center justify-center gap-2 transition-colors whitespace-nowrap min-w-[160px]"
              >
                {loading ? (
                  <div className="w-6 h-6 border-2 border-white/30 border-t-white rounded-full animate-spin" />
                ) : (
                  <>
                    <Search className="w-5 h-5" />
                    Extract
                  </>
                )}
              </button>
            </form>
            {error && (
              <p className="text-red-400 mt-6 text-sm bg-red-500/10 p-4 rounded-2xl border border-red-500/20">
                {error}
              </p>
            )}
          </div>

          {/* Results Section */}
          {result && (
            <div className="space-y-6">
              <div className="flex flex-col md:flex-row gap-6 bg-zinc-900/50 border border-zinc-800 rounded-3xl p-6">
                {result.thumbnail && (
                  <img src={result.thumbnail} alt={result.title} className="w-full md:w-64 rounded-xl object-cover aspect-video border border-zinc-800" />
                )}
                <div className="flex-1 space-y-2">
                  <h2 className="text-xl font-bold text-zinc-100">{result.title}</h2>
                  {result.hashtags && result.hashtags.length > 0 && (
                    <div className="flex flex-wrap gap-2 pt-2">
                      {result.hashtags.map((tag: string, idx: number) => (
                        <span key={idx} className="bg-zinc-800 border border-zinc-700/50 text-zinc-300 px-3 py-1 rounded-lg text-sm flex items-center">
                          <Hash className="w-3 h-3 mr-1 text-red-400" />
                          {tag.replace('#', '')}
                        </span>
                      ))}
                    </div>
                  )}
                </div>
              </div>

              <div className="bg-zinc-900/50 border border-zinc-800 rounded-3xl p-6 md:p-8">
                <div className="flex justify-between items-center mb-6 border-b border-zinc-800 pb-4">
                  <h2 className="text-2xl font-bold text-zinc-100">Full Description</h2>
                  <button
                    onClick={handleCopy}
                    className="bg-zinc-800 hover:bg-zinc-700 text-white px-5 py-2.5 rounded-xl flex items-center gap-2 transition-colors text-sm font-medium"
                  >
                    {copied ? <Check className="w-4 h-4 text-green-500" /> : <Copy className="w-4 h-4 text-zinc-300" />}
                    {copied ? 'Copied!' : 'Copy Text'}
                  </button>
                </div>
                
                <div className="bg-zinc-950 p-6 rounded-2xl border border-zinc-800 whitespace-pre-wrap font-mono text-sm text-zinc-300 overflow-x-auto leading-relaxed">
                  {linkify(result.description)}
                </div>
              </div>
            </div>
          )}

          {/* Massive SEO Content Section */}
          <article className="space-y-16">
            
            {/* H2: What is a YouTube Description Viewer? */}
            <section className="space-y-6">
              <h2 className="text-3xl font-extrabold text-zinc-100 flex items-center gap-3">
                <FileText className="w-8 h-8 text-red-500 shrink-0" />
                What is a YouTube Description Viewer?
              </h2>
              <div className="prose prose-invert max-w-none text-zinc-400 leading-relaxed space-y-4 text-base">
                <p>
                  A <strong>YouTube Description Viewer</strong> is a specialized video content tool that retrieves, parses, and formats the entire description box of any YouTube video. YouTube grants creators an expansive canvas of up to 5,000 characters per video description. However, on YouTube's website and mobile applications, descriptions are notoriously truncated behind a tiny &quot;...more&quot; or &quot;Show More&quot; toggle, making it tedious to inspect formatting, analyze keyword density, or examine embedded URLs.
                </p>
                <p>
                  Furthermore, copying text from YouTube's mobile application is nearly impossible without accidentally triggering video playback, dragging scrub bars, or losing your viewing position. Our Description Viewer extracts the clean text directly from YouTube's server responses, formats hyperlinks into active clickable URLs, breaks down hashtags into individual badges, and provides a simple one-click copy button.
                </p>
                <p>
                  Whether you are an SEO specialist auditing competitor keyword placement, a content creator studying how top channels organize their affiliate links, or a viewer wanting to copy a recipe, tutorial code snippet, or resource list, our tool gives you full, unhindered access in seconds.
                </p>
              </div>
            </section>

            {/* H2: How to View & Extract YouTube Video Descriptions - Step by Step Guide */}
            <section className="space-y-6">
              <h2 className="text-3xl font-extrabold text-zinc-100 flex items-center gap-3">
                <Search className="w-8 h-8 text-red-500 shrink-0" />
                How to View & Extract YouTube Video Descriptions: Step-by-Step Guide
              </h2>
              <p className="text-zinc-400 leading-relaxed">
                Extracting video descriptions with YTToolkits is fast, intuitive, and works seamlessly across all devices:
              </p>
              <div className="grid md:grid-cols-4 gap-6">
                <div className="bg-zinc-900/50 border border-zinc-800 p-6 rounded-3xl relative flex flex-col justify-between">
                  <div className="space-y-3">
                    <span className="w-10 h-10 rounded-2xl bg-red-600/10 border border-red-500/20 text-red-500 font-bold flex items-center justify-center text-lg">1</span>
                    <h3 className="text-lg font-bold text-zinc-100">Copy Video Link</h3>
                    <p className="text-zinc-400 text-sm leading-relaxed">
                      Copy the URL of the YouTube video or Short whose description you want to read from your browser bar or share menu.
                    </p>
                  </div>
                </div>

                <div className="bg-zinc-900/50 border border-zinc-800 p-6 rounded-3xl relative flex flex-col justify-between">
                  <div className="space-y-3">
                    <span className="w-10 h-10 rounded-2xl bg-red-600/10 border border-red-500/20 text-red-500 font-bold flex items-center justify-center text-lg">2</span>
                    <h3 className="text-lg font-bold text-zinc-100">Paste in Field</h3>
                    <p className="text-zinc-400 text-sm leading-relaxed">
                      Paste the video link into our search box above. Both standard desktop URLs and mobile shortened links are supported.
                    </p>
                  </div>
                </div>

                <div className="bg-zinc-900/50 border border-zinc-800 p-6 rounded-3xl relative flex flex-col justify-between">
                  <div className="space-y-3">
                    <span className="w-10 h-10 rounded-2xl bg-red-600/10 border border-red-500/20 text-red-500 font-bold flex items-center justify-center text-lg">3</span>
                    <h3 className="text-lg font-bold text-zinc-100">Click &quot;Extract&quot;</h3>
                    <p className="text-zinc-400 text-sm leading-relaxed">
                      Click the red Extract button. Our cloud parser fetches the complete raw text along with parsed hashtags and thumbnails.
                    </p>
                  </div>
                </div>

                <div className="bg-zinc-900/50 border border-zinc-800 p-6 rounded-3xl relative flex flex-col justify-between">
                  <div className="space-y-3">
                    <span className="w-10 h-10 rounded-2xl bg-red-600/10 border border-red-500/20 text-red-500 font-bold flex items-center justify-center text-lg">4</span>
                    <h3 className="text-lg font-bold text-zinc-100">Copy or Click</h3>
                    <p className="text-zinc-400 text-sm leading-relaxed">
                      Click &quot;Copy Text&quot; to grab the entire description to your clipboard, or click on any highlighted external link directly.
                    </p>
                  </div>
                </div>
              </div>
            </section>

            {/* H2: Key Features of Our Description Viewer */}
            <section className="space-y-6">
              <h2 className="text-3xl font-extrabold text-zinc-100 flex items-center gap-3">
                <Sparkles className="w-8 h-8 text-red-500 shrink-0" />
                Key Features of Our YouTube Description Viewer
              </h2>
              <div className="grid md:grid-cols-3 gap-6">
                <div className="bg-zinc-900/50 border border-zinc-800 p-6 rounded-3xl space-y-3">
                  <div className="p-3 bg-red-500/10 w-fit rounded-xl border border-red-500/20 text-red-400">
                    <FileText className="w-6 h-6" />
                  </div>
                  <h3 className="text-xl font-bold text-zinc-100">Full 5,000 Character Extraction</h3>
                  <p className="text-zinc-400 text-sm leading-relaxed">
                    Zero cutoff, zero hidden sections. Retrieves every single character, line break, emoji, and formatting quirk with 100% fidelity.
                  </p>
                </div>

                <div className="bg-zinc-900/50 border border-zinc-800 p-6 rounded-3xl space-y-3">
                  <div className="p-3 bg-blue-500/10 w-fit rounded-xl border border-blue-500/20 text-blue-400">
                    <ExternalLink className="w-6 h-6" />
                  </div>
                  <h3 className="text-xl font-bold text-zinc-100">Automatic URL Linkification</h3>
                  <p className="text-zinc-400 text-sm leading-relaxed">
                    Identifies web addresses, affiliate links, and social URLs inside the description text, converting them into safe, clickable links.
                  </p>
                </div>

                <div className="bg-zinc-900/50 border border-zinc-800 p-6 rounded-3xl space-y-3">
                  <div className="p-3 bg-green-500/10 w-fit rounded-xl border border-green-500/20 text-green-400">
                    <Hash className="w-6 h-6" />
                  </div>
                  <h3 className="text-xl font-bold text-zinc-100">Dedicated Hashtag Badges</h3>
                  <p className="text-zinc-400 text-sm leading-relaxed">
                    Parses all metadata hashtags into clean, organized tags so you can see the creator's taxonomy choices at a single glance.
                  </p>
                </div>

                <div className="bg-zinc-900/50 border border-zinc-800 p-6 rounded-3xl space-y-3">
                  <div className="p-3 bg-yellow-500/10 w-fit rounded-xl border border-yellow-500/20 text-yellow-400">
                    <Copy className="w-6 h-6" />
                  </div>
                  <h3 className="text-xl font-bold text-zinc-100">One-Click Clipboard Copy</h3>
                  <p className="text-zinc-400 text-sm leading-relaxed">
                    Copy the entire description formatted with exact line breaks, making it effortless to paste into your notes or writing workspace.
                  </p>
                </div>

                <div className="bg-zinc-900/50 border border-zinc-800 p-6 rounded-3xl space-y-3">
                  <div className="p-3 bg-purple-500/10 w-fit rounded-xl border border-purple-500/20 text-purple-400">
                    <Clock className="w-6 h-6" />
                  </div>
                  <h3 className="text-xl font-bold text-zinc-100">Chapter & Timestamp Discovery</h3>
                  <p className="text-zinc-400 text-sm leading-relaxed">
                    Quickly inspect video chapter structures, jump points, and timing blueprints used by successful educational channels.
                  </p>
                </div>

                <div className="bg-zinc-900/50 border border-zinc-800 p-6 rounded-3xl space-y-3">
                  <div className="p-3 bg-cyan-500/10 w-fit rounded-xl border border-cyan-500/20 text-cyan-400">
                    <ShieldCheck className="w-6 h-6" />
                  </div>
                  <h3 className="text-xl font-bold text-zinc-100">Anonymous & Free</h3>
                  <p className="text-zinc-400 text-sm leading-relaxed">
                    No sign-in, no Google account links, and no logging of your competitor research. 100% free with unlimited extractions.
                  </p>
                </div>
              </div>
            </section>

            {/* H2: Why Choose YTToolkits YouTube Description Viewer? */}
            <section className="space-y-6">
              <h2 className="text-3xl font-extrabold text-zinc-100 flex items-center gap-3">
                <CheckCircle2 className="w-8 h-8 text-green-500 shrink-0" />
                Why Choose YTToolkits YouTube Description Viewer?
              </h2>
              <p className="text-zinc-400 leading-relaxed">
                Reading descriptions natively inside the YouTube app is full of annoyances: truncated text, accidental video pauses, and uncopyable text fields on smartphones. Here is why creators prefer YTToolkits:
              </p>

              <div className="bg-zinc-900/50 border border-zinc-800 rounded-3xl overflow-hidden p-6 md:p-8">
                <h3 className="text-xl font-bold text-zinc-100 mb-6">Comparison: YTToolkits vs. Native YouTube vs. Mobile App</h3>
                <div className="overflow-x-auto">
                  <table className="w-full text-left text-sm text-zinc-300">
                    <thead className="border-b border-zinc-800 text-zinc-100 font-semibold bg-zinc-950/50">
                      <tr>
                        <th className="p-4">Feature</th>
                        <th className="p-4 text-green-400">YTToolkits Viewer</th>
                        <th className="p-4 text-zinc-400">YouTube Desktop</th>
                        <th className="p-4 text-zinc-400">YouTube Mobile App</th>
                      </tr>
                    </thead>
                    <tbody className="divide-y divide-zinc-800/50">
                      <tr>
                        <td className="p-4 font-medium text-zinc-200">Copy Entire Text</td>
                        <td className="p-4 text-green-400 font-bold">1-Click Button</td>
                        <td className="p-4 text-zinc-400">Manual text highlight</td>
                        <td className="p-4 text-red-400">Blocked / Not selectable</td>
                      </tr>
                      <tr>
                        <td className="p-4 font-medium text-zinc-200">Truncation & Collapsing</td>
                        <td className="p-4 text-green-400 font-bold">None (Full view)</td>
                        <td className="p-4 text-zinc-400">Hidden behind &quot;...more&quot;</td>
                        <td className="p-4 text-zinc-400">Cluttered popup sheet</td>
                      </tr>
                      <tr>
                        <td className="p-4 font-medium text-zinc-200">Parsed Hashtags List</td>
                        <td className="p-4 text-green-400 font-bold">Dedicated badge list</td>
                        <td className="p-4 text-zinc-400">Scattered inside text</td>
                        <td className="p-4 text-zinc-400">Scattered inside text</td>
                      </tr>
                      <tr>
                        <td className="p-4 font-medium text-zinc-200">Active External Links</td>
                        <td className="p-4 text-green-400 font-bold">Clean clickable links</td>
                        <td className="p-4 text-zinc-400">Yes (Redirect notices)</td>
                        <td className="p-4 text-zinc-400">Forces in-app browser</td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </div>
            </section>

            {/* H2: The Anatomy of a High-Converting YouTube Video Description */}
            <section className="space-y-6">
              <h2 className="text-3xl font-extrabold text-zinc-100 flex items-center gap-3">
                <Target className="w-8 h-8 text-red-500 shrink-0" />
                The Anatomy of a High-Converting YouTube Video Description
              </h2>
              <div className="prose prose-invert max-w-none text-zinc-400 leading-relaxed space-y-4">
                <p>
                  Most beginner creators treat the description box as an afterthought, writing a single sentence or leaving it completely blank. In contrast, elite YouTubers treat the 5,000-character description field as a high-converting landing page that drives views, newsletter subscribers, and affiliate revenue. Here is the proven 5-part blueprint:
                </p>
                <div className="space-y-4 pt-2">
                  <div className="bg-zinc-900/50 border border-zinc-800 p-6 rounded-3xl space-y-2">
                    <h3 className="text-lg font-bold text-red-400">1. Above-the-Fold Hook & Primary Keywords (Characters 1–200)</h3>
                    <p className="text-zinc-400 text-sm leading-relaxed">
                      Only the first two to three lines appear before the &quot;Show More&quot; button. Place your primary target keyword in the very first sentence, phrased as an enticing hook that gives prospective viewers a compelling reason to keep watching.
                    </p>
                  </div>

                  <div className="bg-zinc-900/50 border border-zinc-800 p-6 rounded-3xl space-y-2">
                    <h3 className="text-lg font-bold text-blue-400">2. Detailed Video Outline & Value Summary (Characters 201–1,000)</h3>
                    <p className="text-zinc-400 text-sm leading-relaxed">
                      Write a 2 to 3 paragraph summary describing the video content in depth. Incorporate semantic secondary keywords and question queries naturally. This paragraph feeds YouTube's Natural Language Processing (NLP) algorithm.
                    </p>
                  </div>

                  <div className="bg-zinc-900/50 border border-zinc-800 p-6 rounded-3xl space-y-2">
                    <h3 className="text-lg font-bold text-green-400">3. Structured Timestamps & Chapters (Characters 1,001–2,000)</h3>
                    <p className="text-zinc-400 text-sm leading-relaxed">
                      Format your chapters cleanly starting with <code>00:00</code> (e.g., <code>00:00 Intro</code>, <code>02:45 Step 1: Equipment</code>). Including descriptive titles in your timestamps allows Google to display interactive &quot;Key Moments&quot; in Google Search results.
                    </p>
                  </div>

                  <div className="bg-zinc-900/50 border border-zinc-800 p-6 rounded-3xl space-y-2">
                    <h3 className="text-lg font-bold text-yellow-400">4. Call-to-Action (CTA) & Affiliate Links (Characters 2,001–4,500)</h3>
                    <p className="text-zinc-400 text-sm leading-relaxed">
                      Include links to your lead magnets, community Discord, social media profiles, and affiliate gear lists. Always include proper FTC disclosures (e.g., <em>&quot;As an affiliate, I earn a commission from qualifying purchases&quot;</em>) to remain compliant.
                    </p>
                  </div>

                  <div className="bg-zinc-900/50 border border-zinc-800 p-6 rounded-3xl space-y-2">
                    <h3 className="text-lg font-bold text-purple-400">5. Curated Hashtags (Final Section)</h3>
                    <p className="text-zinc-400 text-sm leading-relaxed">
                      Include 3 to 5 targeted hashtags at the very bottom. The first three will be extracted and displayed prominently directly above the video title on YouTube's player interface.
                    </p>
                  </div>
                </div>
              </div>
            </section>

            {/* H2: YouTube Search Algorithm & Description SEO */}
            <section className="space-y-6">
              <h2 className="text-3xl font-extrabold text-zinc-100 flex items-center gap-3">
                <BarChart3 className="w-8 h-8 text-red-500 shrink-0" />
                YouTube Search Algorithm & Description SEO: Semantic Indexing
              </h2>
              <div className="prose prose-invert max-w-none text-zinc-400 leading-relaxed space-y-4">
                <p>
                  YouTube is the world's second-largest search engine, processing over 3 billion searches monthly. While video retention determines viral recommendations, text descriptions are the primary driver of search rankings.
                </p>
                <p>
                  When YouTube's web crawler evaluates a video, it performs semantic text analysis on the title, description, and backend <Link href="/tag-extractor" className="text-red-400 hover:underline">SEO tags</Link>. Google's Multitask Unified Model (MUM) and BERT algorithms scan for topical relevance, assessing not just exact keyword matches, but the surrounding vocabulary. For instance, a video about &quot;camera lenses&quot; ranks higher if its description mentions &quot;focal length&quot;, &quot;aperture&quot;, &quot;f-stop&quot;, and &quot;bokeh&quot;.
                </p>
                <p>
                  By using our Description Viewer to audit the descriptions of top-ranking videos for your focus query, you can build a comprehensive list of latent semantic keywords to include in your own copy.
                </p>
              </div>
            </section>

            {/* H2: Competitor Description Auditing: Reverse-Engineering Top Creator Funnels */}
            <section className="space-y-6">
              <h2 className="text-3xl font-extrabold text-zinc-100 flex items-center gap-3">
                <Eye className="w-8 h-8 text-red-500 shrink-0" />
                Competitor Description Auditing: Reverse-Engineering Top Creator Funnels
              </h2>
              <div className="prose prose-invert max-w-none text-zinc-400 leading-relaxed space-y-4">
                <p>
                  Content creation is only half the battle; monetization is where sustainable media businesses are built. Many channels generate tens of thousands of dollars per month without ever relying on YouTube AdSense. You can verify their monetization status with our <Link href="/monetization-checker" className="text-red-400 hover:underline">Monetization Checker</Link>.
                </p>
                <p>
                  When you audit competitor descriptions using this tool, pay special attention to:
                </p>
                <ul className="list-disc pl-6 space-y-2 text-zinc-300">
                  <li><strong>Sponsorship Link Attribution:</strong> Look for tracking parameters (e.g., <code>?utm_source=youtube&utm_campaign=creator</code>) to discover which brands actively sponsor channels in your vertical.</li>
                  <li><strong>Affiliate Networks Used:</strong> See whether they use Amazon Associates, Impact, ShareASale, or direct merchant partnerships.</li>
                  <li><strong>Lead Magnets & Freebies:</strong> Check what free templates, PDFs, or checklists they offer to capture viewer email addresses.</li>
                </ul>
              </div>
            </section>

            {/* H2: Frequently Asked Questions */}
            <section className="space-y-8">
              <h2 className="text-3xl font-extrabold text-zinc-100 flex items-center gap-3">
                <HelpCircle className="w-8 h-8 text-red-500 shrink-0" />
                Frequently Asked Questions About YouTube Descriptions & SEO
              </h2>
              <div className="grid gap-4 md:grid-cols-2">
                {[
                  {
                    q: "What is a YouTube Description Viewer?",
                    a: "A YouTube Description Viewer is an online tool that extracts and displays the full 5,000-character description text, hashtags, and links from any public YouTube video without truncated 'Show More' text or mobile app limitations."
                  },
                  {
                    q: "Why is the YouTube video description important for SEO?",
                    a: "YouTube and Google algorithms crawl descriptions using natural language processing to understand video context, index relevant keywords, rank videos in search queries, and match content to viewer watch history."
                  },
                  {
                    q: "What is the character limit for a YouTube video description?",
                    a: "YouTube allows up to 5,000 characters per video description. Top creators use this space for timestamps, keyword-rich summaries, affiliate links, and social channel links."
                  },
                  {
                    q: "What are the first 200 characters in a YouTube description?",
                    a: "The first 150 to 200 characters are the most critical because they appear 'above the fold' before the 'Show More' toggle and are displayed as the meta description snippet in Google search results."
                  },
                  {
                    q: "Can I copy someone's YouTube description?",
                    a: "You can extract and copy competitor descriptions for research and inspiration. However, directly copying someone else's text violates copyright. You should adapt their structure and format into your own original text."
                  },
                  {
                    q: "How do video timestamps create Google Key Moments?",
                    a: "When you include timestamp chapters (e.g., 01:25 Introduction) in your description, Google search indexes each chapter as a clickable 'Key Moment' directly inside Google search result carousels."
                  },
                  {
                    q: "How many hashtags should I add to a YouTube description?",
                    a: "Best practice is to add 3 to 5 relevant hashtags. YouTube shows the first three hashtags above your title. If you include more than 60 hashtags, YouTube ignores all hashtags on the video entirely."
                  },
                  {
                    q: "Does this tool work on mobile devices?",
                    a: "Yes, YTToolkits Description Viewer works flawlessly on iPhones, Android devices, tablets, and desktop browsers without requiring app downloads."
                  },
                  {
                    q: "Does this tool extract descriptions from unlisted videos?",
                    a: "Yes, as long as you have the direct link to the unlisted video. It cannot access private videos that require account authorization."
                  },
                  {
                    q: "Is this YouTube Description Viewer free to use?",
                    a: "Yes, our tool is 100% free with unlimited extractions, zero sign-up required, and no browser extensions to install."
                  }
                ].map((faq, i) => (
                  <div key={i} className="bg-zinc-900/40 border border-zinc-800 p-6 rounded-2xl flex flex-col justify-start">
                    <h3 className="font-bold text-zinc-100 mb-2 flex items-start gap-2 text-base">
                      <Info className="w-5 h-5 text-red-500 shrink-0 mt-0.5" />
                      <span>{faq.q}</span>
                    </h3>
                    <p className="text-zinc-400 text-sm leading-relaxed pl-7">{faq.a}</p>
                  </div>
                ))}
              </div>
            </section>

            {/* H2: Related YouTube Creator & SEO Tools */}
            <section className="space-y-6 bg-zinc-900/50 p-8 rounded-3xl border border-zinc-800">
              <h2 className="text-3xl font-extrabold text-zinc-100 flex items-center gap-3">
                <Layers className="w-8 h-8 text-red-500 shrink-0" />
                Related YouTube Creator & SEO Tools
              </h2>
              <p className="text-zinc-400 text-base">
                Explore our full suite of free video optimization tools to research competitors, inspect channel health, and enhance your creative workflow:
              </p>
              <div className="grid md:grid-cols-3 gap-4 mt-6">
                <Link href="/tag-extractor" className="block p-5 rounded-2xl border border-zinc-800 bg-zinc-950/60 hover:bg-zinc-900 hover:border-red-500/40 transition-all group">
                  <div className="flex items-center justify-between mb-2">
                    <Target className="w-6 h-6 text-red-500" />
                    <ArrowRight className="w-4 h-4 text-zinc-500 group-hover:text-red-400 group-hover:translate-x-1 transition-all" />
                  </div>
                  <h3 className="text-zinc-100 font-bold mb-1">Tag Extractor</h3>
                  <p className="text-zinc-400 text-xs leading-relaxed">
                    Extract hidden backend SEO keywords and tags from any YouTube video.
                  </p>
                </Link>

                <Link href="/channel-id-finder" className="block p-5 rounded-2xl border border-zinc-800 bg-zinc-950/60 hover:bg-zinc-900 hover:border-red-500/40 transition-all group">
                  <div className="flex items-center justify-between mb-2">
                    <Hash className="w-6 h-6 text-blue-500" />
                    <ArrowRight className="w-4 h-4 text-zinc-500 group-hover:text-blue-400 group-hover:translate-x-1 transition-all" />
                  </div>
                  <h3 className="text-zinc-100 font-bold mb-1">Channel ID Finder</h3>
                  <p className="text-zinc-400 text-xs leading-relaxed">
                    Retrieve the permanent 24-character UC Channel ID for API integrations and feeds.
                  </p>
                </Link>

                <Link href="/monetization-checker" className="block p-5 rounded-2xl border border-zinc-800 bg-zinc-950/60 hover:bg-zinc-900 hover:border-red-500/40 transition-all group">
                  <div className="flex items-center justify-between mb-2">
                    <BarChart3 className="w-6 h-6 text-green-500" />
                    <ArrowRight className="w-4 h-4 text-zinc-500 group-hover:text-green-400 group-hover:translate-x-1 transition-all" />
                  </div>
                  <h3 className="text-zinc-100 font-bold mb-1">Monetization Checker</h3>
                  <p className="text-zinc-400 text-xs leading-relaxed">
                    Check if any channel is approved for the YouTube Partner Program and earning ad revenue.
                  </p>
                </Link>

                <Link href="/upload-date-finder" className="block p-5 rounded-2xl border border-zinc-800 bg-zinc-950/60 hover:bg-zinc-900 hover:border-red-500/40 transition-all group">
                  <div className="flex items-center justify-between mb-2">
                    <Clock className="w-6 h-6 text-purple-500" />
                    <ArrowRight className="w-4 h-4 text-zinc-500 group-hover:text-purple-400 group-hover:translate-x-1 transition-all" />
                  </div>
                  <h3 className="text-zinc-100 font-bold mb-1">Upload Date Finder</h3>
                  <p className="text-zinc-400 text-xs leading-relaxed">
                    Discover exact publishing dates, age elapsed, and competitor posting schedules.
                  </p>
                </Link>

                <Link href="/thumbnail-downloader" className="block p-5 rounded-2xl border border-zinc-800 bg-zinc-950/60 hover:bg-zinc-900 hover:border-red-500/40 transition-all group">
                  <div className="flex items-center justify-between mb-2">
                    <Eye className="w-6 h-6 text-yellow-500" />
                    <ArrowRight className="w-4 h-4 text-zinc-500 group-hover:text-yellow-400 group-hover:translate-x-1 transition-all" />
                  </div>
                  <h3 className="text-zinc-100 font-bold mb-1">Thumbnail Downloader</h3>
                  <p className="text-zinc-400 text-xs leading-relaxed">
                    Download full HD and 4K YouTube thumbnails in original maximum resolution.
                  </p>
                </Link>

                <Link href="/video-downloader" className="block p-5 rounded-2xl border border-zinc-800 bg-zinc-950/60 hover:bg-zinc-900 hover:border-red-500/40 transition-all group">
                  <div className="flex items-center justify-between mb-2">
                    <PlaySquare className="w-6 h-6 text-red-500" />
                    <ArrowRight className="w-4 h-4 text-zinc-500 group-hover:text-red-400 group-hover:translate-x-1 transition-all" />
                  </div>
                  <h3 className="text-zinc-100 font-bold mb-1">Video Downloader</h3>
                  <p className="text-zinc-400 text-xs leading-relaxed">
                    Download high-quality MP4 video files safely for offline editing and research.
                  </p>
                </Link>
              </div>
            </section>

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