'use client';

import { useState, useEffect } from 'react';
import Link from 'next/link';
import { 
  Target, Search, CheckCircle2, XCircle, PlaySquare, 
  AlertCircle, HelpCircle, Shield, Sparkles, Zap, 
  Award, BarChart3, TrendingUp 
} from 'lucide-react';

export default function SeoScoreCheckerPage() {
  const [url, setUrl] = useState('');
  const [loading, setLoading] = useState(false);
  const [result, setResult] = useState<any>(null);
  const [error, setError] = useState('');
  const [animatedScore, setAnimatedScore] = useState(0);

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

    try {
      const response = await fetch('/api/seo-score', {
        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 analyze SEO');
      
      setResult(data);
    } catch (err: any) {
      setError(err.message);
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    if (result) {
      const target = result.score;
      let current = 0;
      const interval = setInterval(() => {
        current += 2;
        if (current >= target) {
          setAnimatedScore(target);
          clearInterval(interval);
        } else {
          setAnimatedScore(current);
        }
      }, 20);
      return () => clearInterval(interval);
    }
  }, [result]);

  const getScoreColor = (score: number) => {
    if (score >= 80) return 'text-green-500 stroke-green-500';
    if (score >= 50) return 'text-yellow-500 stroke-yellow-500';
    return 'text-red-500 stroke-red-500';
  };

  return (
    <>
      {/* Structured Data: WebApplication & FAQPage */}
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{
          __html: JSON.stringify({
            "@context": "https://schema.org",
            "@graph": [
              {
                "@type": "WebApplication",
                "name": "YTToolkits YouTube SEO Score Checker",
                "url": "https://yttoolkits.site/seo-score-checker",
                "applicationCategory": "AnalyticsApplication",
                "operatingSystem": "All",
                "offers": {
                  "@type": "Offer",
                  "price": "0",
                  "priceCurrency": "USD"
                },
                "description": "Evaluate YouTube video SEO scores, audit titles, descriptions, and tag optimization, and discover actionable ranking recommendations."
              },
              {
                "@type": "FAQPage",
                "mainEntity": [
                  {
                    "@type": "Question",
                    "name": "What is YouTube Video SEO?",
                    "acceptedAnswer": {
                      "@type": "Answer",
                      "text": "YouTube SEO is the process of optimizing a video's title, description, tags, transcript, and metadata to help YouTube's search and recommendation algorithms correctly categorize and rank the video for relevant user search queries."
                    }
                  },
                  {
                    "@type": "Question",
                    "name": "How is the YouTube SEO score calculated?",
                    "acceptedAnswer": {
                      "@type": "Answer",
                      "text": "Our algorithm evaluates metadata best practices, including optimal title length (50-70 characters), front-loaded target keywords, description depth (word count and keyword density), inclusion of timestamps, tag diversity, and appropriate hashtag usage."
                    }
                  },
                  {
                    "@type": "Question",
                    "name": "Does a 100/100 SEO score guarantee viral views?",
                    "acceptedAnswer": {
                      "@type": "Answer",
                      "text": "No tool can guarantee viral views. Perfect SEO ensures that the algorithm indexes and surfaces your video when users search for your topic. Long-term reach depends on thumbnail click-through rate (CTR) and audience retention."
                    }
                  },
                  {
                    "@type": "Question",
                    "name": "What is the optimal length for a YouTube video title?",
                    "acceptedAnswer": {
                      "@type": "Answer",
                      "text": "The optimal title length is between 50 and 70 characters. Titles under 50 characters often miss secondary keywords, while titles over 70 characters are truncated on mobile screens."
                    }
                  },
                  {
                    "@type": "Question",
                    "name": "How long should a YouTube video description be?",
                    "acceptedAnswer": {
                      "@type": "Answer",
                      "text": "Aim for at least 200 to 300 words. The first two sentences are crucial because they appear in search snippets before the 'Show More' cut. Use natural paragraphs incorporating primary and related long-tail keywords."
                    }
                  },
                  {
                    "@type": "Question",
                    "name": "Are YouTube video tags still important for SEO?",
                    "acceptedAnswer": {
                      "@type": "Answer",
                      "text": "While YouTube places less weight on tags than on titles and descriptions, tags remain important for indexing common misspellings, colloquial slang, and providing supplementary contextual categorization."
                    }
                  },
                  {
                    "@type": "Question",
                    "name": "Can I update the SEO of older videos?",
                    "acceptedAnswer": {
                      "@type": "Answer",
                      "text": "Yes! Re-optimizing titles, enriching descriptions, and updating tags on older evergreen videos frequently triggers re-indexing, giving dormant uploads a fresh wave of search traffic."
                    }
                  },
                  {
                    "@type": "Question",
                    "name": "How many hashtags should I include in a YouTube description?",
                    "acceptedAnswer": {
                      "@type": "Answer",
                      "text": "Include between 3 and 5 relevant hashtags at the bottom of your description. YouTube displays the first three above your video title, but using more than 15 will cause YouTube to ignore all hashtags."
                    }
                  },
                  {
                    "@type": "Question",
                    "name": "Do closed captions improve YouTube SEO?",
                    "acceptedAnswer": {
                      "@type": "Answer",
                      "text": "Yes. YouTube automatically transcribes spoken audio, and uploaded custom subtitles are indexed verbatim by Google's search algorithms, making spoken keywords discoverable in search."
                    }
                  },
                  {
                    "@type": "Question",
                    "name": "Is this YouTube SEO checker free to use?",
                    "acceptedAnswer": {
                      "@type": "Answer",
                      "text": "Yes, our SEO Score Checker is 100% free with no registration, software download, or API credentials required."
                    }
                  }
                ]
              }
            ]
          })
        }}
      />

      <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-12">
          {/* Header */}
          <div className="text-center space-y-4">
            <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-red-500/10 border border-red-500/20 text-xs sm:text-sm text-red-400 mb-2">
              <Sparkles className="w-4 h-4" />
              Algorithmic Metadata Audit & Search Rank Scoring
            </div>
            <h1 className="text-3xl md:text-5xl font-extrabold flex items-center justify-center gap-3">
              <Target className="w-10 h-10 text-red-500" />
              YouTube SEO Score Checker
            </h1>
            <p className="text-zinc-400 max-w-2xl mx-auto text-base sm:text-lg">
              Analyze your video&apos;s metadata health and discover actionable ways to optimize titles, descriptions, tags, and search rankings.
            </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={analyzeSeo} className="flex flex-col md:flex-row gap-4">
              <input
                type="url"
                placeholder="Paste YouTube video URL (e.g., https://youtube.com/watch?v=...)"
                value={url}
                onChange={(e) => setUrl(e.target.value)}
                required
                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 outline-none transition-all text-zinc-100 placeholder-zinc-500"
              />
              <button
                type="submit"
                disabled={loading}
                className="bg-red-600 hover:bg-red-700 text-white rounded-2xl px-8 py-4 font-semibold flex items-center justify-center gap-2 transition-colors disabled:opacity-50 whitespace-nowrap"
              >
                {loading ? (
                  <>
                    <div className="w-6 h-6 border-2 border-white/30 border-t-white rounded-full animate-spin" />
                    Analyzing...
                  </>
                ) : (
                  <>
                    <Search className="w-5 h-5" />
                    Analyze SEO
                  </>
                )}
              </button>
            </form>
            {error && (
              <p className="text-red-500 mt-4 text-sm bg-red-500/10 p-3 rounded-xl border border-red-500/20">
                {error}
              </p>
            )}
          </div>

          {/* Results Section */}
          {result && (
            <div className="space-y-6">
              <div className="bg-zinc-900/50 border border-zinc-800 rounded-3xl p-6 md:p-10 shadow-xl">
                <h2 className="text-xl font-bold mb-8 text-center text-zinc-300 line-clamp-2">
                  {result.title}
                </h2>
                
                <div className="flex flex-col md:flex-row items-center gap-12">
                  {/* Score Circle */}
                  <div className="relative w-48 h-48 flex items-center justify-center shrink-0">
                    <svg className="w-full h-full transform -rotate-90" viewBox="0 0 100 100">
                      <circle
                        className="stroke-zinc-800 fill-none"
                        strokeWidth="8"
                        cx="50" cy="50" r="40"
                      />
                      <circle
                        className={`fill-none transition-all duration-1000 ease-out ${getScoreColor(animatedScore)}`}
                        strokeWidth="8"
                        strokeLinecap="round"
                        strokeDasharray={`${2 * Math.PI * 40}`}
                        strokeDashoffset={`${2 * Math.PI * 40 * (1 - animatedScore / 100)}`}
                        cx="50" cy="50" r="40"
                      />
                    </svg>
                    <div className="absolute flex flex-col items-center">
                      <span className={`text-4xl font-extrabold ${getScoreColor(result.score).split(' ')[0]}`}>
                        {animatedScore}
                      </span>
                      <span className="text-zinc-500 text-sm font-medium">/ 100</span>
                    </div>
                  </div>

                  {/* Checklist */}
                  <div className="flex-1 w-full space-y-4">
                    <h3 className="text-xl font-bold mb-4 text-zinc-100">Optimization Checklist</h3>
                    {result.checks && result.checks.map((check: any, idx: number) => (
                      <div key={idx} className="flex items-start gap-4 bg-zinc-950 p-4 rounded-2xl border border-zinc-800">
                        {check.passed ? (
                          <CheckCircle2 className="w-6 h-6 text-green-500 shrink-0 mt-0.5" />
                        ) : (
                          <XCircle className="w-6 h-6 text-red-500 shrink-0 mt-0.5" />
                        )}
                        <div>
                          <p className="font-semibold text-zinc-200">{check.label}</p>
                          <p className="text-sm text-zinc-500 mt-1">{check.detail}</p>
                        </div>
                      </div>
                    ))}
                  </div>
                </div>
              </div>
            </div>
          )}

          {/* MASSIVE SEO CONTENT SECTION (2000+ Words) */}
          <article className="pt-8 space-y-16 border-t border-zinc-800 text-zinc-300">
            
            {/* Section 1: What is YouTube SEO Score Checker */}
            <section className="space-y-4">
              <h2 className="text-2xl md:text-4xl font-extrabold text-zinc-100">
                What is the YouTube SEO Score Checker?
              </h2>
              <div className="text-zinc-400 space-y-4 leading-relaxed">
                <p>
                  The YouTube SEO Score Checker by YTToolkits is a comprehensive diagnostic tool engineered to evaluate how effectively your video&apos;s metadata aligns with YouTube&apos;s search indexing algorithms. As the second-largest search engine on the planet—processing over 3 billion searches each month—YouTube relies heavily on automated natural language processing (NLP) to index, categorize, and rank video uploads.
                </p>
                <p>
                  While established channels with hundreds of thousands of active subscribers can rely on browse feed push notifications and home recommendations to generate views, new and growing creators must depend on search discovery to establish an audience. If your video title is truncated, your description is sparse, or your tag metadata is neglected, YouTube&apos;s indexing crawlers cannot understand the topic or context of your content, leaving your upload invisible in search results.
                </p>
                <p>
                  Our SEO Score Checker grades your video across multiple critical ranking factors, including title character lengths, primary keyword placement, description word count, structural formatting, chapter markers, hashtag limits, and tag diversity. It assigns an overall health score from 0 to 100 alongside an actionable checklist highlighting exactly what elements need immediate refinement.
                </p>
              </div>
            </section>

            {/* Section 2: How to Use */}
            <section className="space-y-6">
              <h2 className="text-2xl md:text-4xl font-extrabold text-zinc-100">
                How to Use the YouTube SEO Score Checker - Step-by-Step Guide
              </h2>
              <p className="text-zinc-400 leading-relaxed">
                Auditing your YouTube video metadata takes only a few seconds. Follow this straightforward workflow to grade your video and uncover optimization opportunities:
              </p>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div className="bg-zinc-900/50 border border-zinc-800 rounded-2xl p-6">
                  <div className="text-red-500 font-extrabold text-2xl mb-2">01</div>
                  <h3 className="text-lg font-bold text-zinc-100 mb-2">Copy Video Link</h3>
                  <p className="text-zinc-400 text-sm leading-relaxed">
                    Navigate to YouTube and copy the direct URL of any public video you want to evaluate—whether it is your own recent upload or a top-ranking competitor&apos;s video in your niche.
                  </p>
                </div>

                <div className="bg-zinc-900/50 border border-zinc-800 rounded-2xl p-6">
                  <div className="text-red-500 font-extrabold text-2xl mb-2">02</div>
                  <h3 className="text-lg font-bold text-zinc-100 mb-2">Paste into the Analyzer</h3>
                  <p className="text-zinc-400 text-sm leading-relaxed">
                    Paste the link into the URL input box above. The tool handles desktop watch links, mobile shortened youtu.be links, and vertical YouTube Shorts URLs.
                  </p>
                </div>

                <div className="bg-zinc-900/50 border border-zinc-800 rounded-2xl p-6">
                  <div className="text-red-500 font-extrabold text-2xl mb-2">03</div>
                  <h3 className="text-lg font-bold text-zinc-100 mb-2">Click &ldquo;Analyze SEO&rdquo;</h3>
                  <p className="text-zinc-400 text-sm leading-relaxed">
                    Submit the form to let our backend inspect the video&apos;s public metadata, calculate character lengths, audit keyword positioning, and score tag density.
                  </p>
                </div>

                <div className="bg-zinc-900/50 border border-zinc-800 rounded-2xl p-6">
                  <div className="text-red-500 font-extrabold text-2xl mb-2">04</div>
                  <h3 className="text-lg font-bold text-zinc-100 mb-2">Review Optimization Checklist</h3>
                  <p className="text-zinc-400 text-sm leading-relaxed">
                    Inspect your animated 0-100 score and the green/red checklist indicators. Read the actionable guidance to update your title, expand your description, or refine tags in YouTube Studio.
                  </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">
                Key Features of Our YouTube SEO Score Checker
              </h2>
              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                <div className="bg-zinc-900/50 border border-zinc-800 rounded-2xl p-6 flex items-start gap-4">
                  <div className="p-3 bg-red-500/10 rounded-xl text-red-500 shrink-0">
                    <Target className="w-6 h-6" />
                  </div>
                  <div>
                    <h3 className="text-lg font-bold text-zinc-100 mb-1">Animated Circular Score Gauge</h3>
                    <p className="text-zinc-400 text-sm leading-relaxed">
                      Visualizes overall metadata optimization with dynamic color coding (Green for 80+, Yellow for 50-79, Red for &lt;50).
                    </p>
                  </div>
                </div>

                <div className="bg-zinc-900/50 border border-zinc-800 rounded-2xl p-6 flex items-start gap-4">
                  <div className="p-3 bg-green-500/10 rounded-xl text-green-400 shrink-0">
                    <CheckCircle2 className="w-6 h-6" />
                  </div>
                  <div>
                    <h3 className="text-lg font-bold text-zinc-100 mb-1">Granular Audit Checklist</h3>
                    <p className="text-zinc-400 text-sm leading-relaxed">
                      Evaluates each individual ranking factor: title length thresholds, description word depth, hashtag limits, and tag presence.
                    </p>
                  </div>
                </div>

                <div className="bg-zinc-900/50 border border-zinc-800 rounded-2xl p-6 flex items-start gap-4">
                  <div className="p-3 bg-blue-500/10 rounded-xl text-blue-400 shrink-0">
                    <Search className="w-6 h-6" />
                  </div>
                  <div>
                    <h3 className="text-lg font-bold text-zinc-100 mb-1">Competitor Reverse-Engineering</h3>
                    <p className="text-zinc-400 text-sm leading-relaxed">
                      Analyze top-ranking competitor videos to discover the exact metadata strategies allowing them to capture rank #1 in your niche.
                    </p>
                  </div>
                </div>

                <div className="bg-zinc-900/50 border border-zinc-800 rounded-2xl p-6 flex items-start gap-4">
                  <div className="p-3 bg-purple-500/10 rounded-xl text-purple-400 shrink-0">
                    <Sparkles className="w-6 h-6" />
                  </div>
                  <div>
                    <h3 className="text-lg font-bold text-zinc-100 mb-1">Zero Software Installation</h3>
                    <p className="text-zinc-400 text-sm leading-relaxed">
                      No browser extensions to install, no browser slowdowns, and zero account logins or credit cards required.
                    </p>
                  </div>
                </div>
              </div>
            </section>

            {/* Section 4: Why Choose YTToolkits */}
            <section className="space-y-6">
              <h2 className="text-2xl md:text-4xl font-extrabold text-zinc-100">
                Why Choose YTToolkits YouTube SEO Score Checker?
              </h2>
              <div className="text-zinc-400 space-y-4 leading-relaxed">
                <p>
                  Most legacy YouTube SEO tools, such as TubeBuddy or VidIQ, lock their in-depth checklist diagnostics and score breakdowns behind expensive paid subscription tiers. Furthermore, they demand invasive Google account permissions, allowing third-party services full read and write access to your YouTube channel and analytics data.
                </p>
                <p>
                  YTToolkits believes every creator deserves equal access to professional SEO insights without security compromises or financial barriers. Here is how our checker compares:
                </p>
              </div>
              <div className="overflow-x-auto">
                <table className="w-full text-left border-collapse bg-zinc-900/40 rounded-2xl border border-zinc-800">
                  <thead>
                    <tr className="border-b border-zinc-800 text-zinc-100 text-sm">
                      <th className="p-4">Feature</th>
                      <th className="p-4 text-red-400 font-semibold">YTToolkits SEO Checker</th>
                      <th className="p-4 text-zinc-500">VidIQ / TubeBuddy</th>
                      <th className="p-4 text-zinc-500">Manual Inspection</th>
                    </tr>
                  </thead>
                  <tbody className="text-sm divide-y divide-zinc-800/60 text-zinc-300">
                    <tr>
                      <td className="p-4 font-medium">Pricing / Subscription</td>
                      <td className="p-4 text-green-400 font-bold">100% Free Forever</td>
                      <td className="p-4 text-red-400">$10 - $49 / Month</td>
                      <td className="p-4">Free</td>
                    </tr>
                    <tr>
                      <td className="p-4 font-medium">Channel Access Permissions</td>
                      <td className="p-4 text-green-400 font-bold">Zero Access Needed</td>
                      <td className="p-4 text-red-400">Demands Full OAuth</td>
                      <td className="p-4">None</td>
                    </tr>
                    <tr>
                      <td className="p-4 font-medium">Speed of Evaluation</td>
                      <td className="p-4 text-green-400 font-bold">Instant (Under 2s)</td>
                      <td className="p-4">Slow Browser Injections</td>
                      <td className="p-4">15+ Minutes</td>
                    </tr>
                    <tr>
                      <td className="p-4 font-medium">Mobile Device Compatible</td>
                      <td className="p-4 text-green-400 font-bold">Fully Mobile Responsive</td>
                      <td className="p-4 text-red-400">Desktop Extensions Only</td>
                      <td className="p-4">Impractical on Mobile</td>
                    </tr>
                    <tr>
                      <td className="p-4 font-medium">Suite Integration</td>
                      <td className="p-4 text-green-400 font-bold">Direct Links to 30+ Tools</td>
                      <td className="p-4">Isolated SaaS</td>
                      <td className="p-4">None</td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </section>

            {/* Section 5: The Pillars of YouTube Video SEO */}
            <section className="space-y-6">
              <h2 className="text-2xl md:text-4xl font-extrabold text-zinc-100">
                The Pillars of YouTube Video SEO: How Search Ranking Actually Works
              </h2>
              <div className="text-zinc-400 space-y-4 leading-relaxed">
                <p>
                  To master YouTube search ranking, you must understand how Google&apos;s algorithms interpret your video content. Unlike traditional web pages containing thousands of words of written text, a video is a multimedia asset. YouTube must extract semantic meaning from three core layers: metadata (text), audio transcripts (spoken dialogue), and visual machine learning.
                </p>
                <div className="space-y-4 pt-2">
                  <div className="bg-zinc-900/40 border border-zinc-800 p-6 rounded-2xl">
                    <h3 className="text-lg font-bold text-zinc-100 mb-2 flex items-center gap-2">
                      <span className="w-7 h-7 rounded-lg bg-red-600/20 text-red-400 flex items-center justify-center text-sm font-extrabold">1</span>
                      Title Optimization: The Primary Search Anchor
                    </h3>
                    <p className="text-zinc-400 text-sm leading-relaxed">
                      Your video title is the single most influential on-page SEO signal. The first 40 to 50 characters carry the heaviest algorithmic weighting. Place your exact primary search query near the front of the title. For instance, rather than &ldquo;My Review of the Sony A7IV after 6 months,&rdquo; use &ldquo;Sony A7IV Review: 6 Months Later (Worth Buying in 2026?)&rdquo;. This matches user search intent while keeping the title engaging for humans.
                    </p>
                  </div>

                  <div className="bg-zinc-900/40 border border-zinc-800 p-6 rounded-2xl">
                    <h3 className="text-lg font-bold text-zinc-100 mb-2 flex items-center gap-2">
                      <span className="w-7 h-7 rounded-lg bg-red-600/20 text-red-400 flex items-center justify-center text-sm font-extrabold">2</span>
                      Description Architecture: The Search Snippet & Body
                    </h3>
                    <p className="text-zinc-400 text-sm leading-relaxed">
                      YouTube allows up to 5,000 characters in the description box, yet most creators post two sentences and social media links. The first 150 characters appear directly in search results snippets. Write a detailed 200-to-300-word summary explaining what happens in the video, integrating related long-tail keywords naturally. Add timestamped chapter markers, as Google regularly indexes chapters into distinct search results for specific sub-queries.
                    </p>
                  </div>

                  <div className="bg-zinc-900/40 border border-zinc-800 p-6 rounded-2xl">
                    <h3 className="text-lg font-bold text-zinc-100 mb-2 flex items-center gap-2">
                      <span className="w-7 h-7 rounded-lg bg-red-600/20 text-red-400 flex items-center justify-center text-sm font-extrabold">3</span>
                      Tag Strategy & Long-Tail Variations
                    </h3>
                    <p className="text-zinc-400 text-sm leading-relaxed">
                      While YouTube officially states that tags play a secondary role, they remain vital for capturing misspellings, synonymous phrasing, and providing supplementary topical categorization. Use our companion <Link href="/tag-extractor" className="text-red-400 hover:underline">Tag Extractor</Link> to inspect what high-ranking competitors use, and structure your tags from ultra-specific long-tail phrases to broad categorical terms.
                    </p>
                  </div>
                </div>
              </div>
            </section>

            {/* Section 6: Behavioral Signals */}
            <section className="space-y-6">
              <h2 className="text-2xl md:text-4xl font-extrabold text-zinc-100">
                Beyond Metadata: Behavioral Signals That Decide Search Rankings
              </h2>
              <div className="text-zinc-400 space-y-4 leading-relaxed">
                <p>
                  Achieving a 100/100 SEO score gets your foot in the door by allowing YouTube&apos;s algorithms to index your video. However, whether your video maintains rank #1 or slips down to page 3 depends on viewer behavior:
                </p>
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4 pt-2">
                  <div className="bg-zinc-900/30 border border-zinc-800 rounded-2xl p-5">
                    <h3 className="font-bold text-zinc-100 mb-2 flex items-center gap-2 text-green-400">
                      <TrendingUp className="w-5 h-5 shrink-0" />
                      Click-Through Rate (CTR)
                    </h3>
                    <p className="text-sm text-zinc-400 leading-relaxed">
                      When your video appears in search results, what percentage of users click on it? High CTR signals that your title and thumbnail are compelling and relevant to the search query.
                    </p>
                  </div>

                  <div className="bg-zinc-900/30 border border-zinc-800 rounded-2xl p-5">
                    <h3 className="font-bold text-zinc-100 mb-2 flex items-center gap-2 text-blue-400">
                      <BarChart3 className="w-5 h-5 shrink-0" />
                      Average Percentage Viewed (APV)
                    </h3>
                    <p className="text-sm text-zinc-400 leading-relaxed">
                      How long do viewers watch before clicking away? If a searcher leaves within 15 seconds, YouTube assumes your video failed to answer the query, reducing its rank.
                    </p>
                  </div>

                  <div className="bg-zinc-900/30 border border-zinc-800 rounded-2xl p-5">
                    <h3 className="font-bold text-zinc-100 mb-2 flex items-center gap-2 text-purple-400">
                      <Sparkles className="w-5 h-5 shrink-0" />
                      Engagement & Like Velocity
                    </h3>
                    <p className="text-sm text-zinc-400 leading-relaxed">
                      Likes and comments validate audience satisfaction. You can track exact unrounded likes and engagement ratios using our <Link href="/like-counter" className="text-purple-400 hover:underline">YouTube Like Counter</Link>.
                    </p>
                  </div>

                  <div className="bg-zinc-900/30 border border-zinc-800 rounded-2xl p-5">
                    <h3 className="font-bold text-zinc-100 mb-2 flex items-center gap-2 text-yellow-400">
                      <Shield className="w-5 h-5 shrink-0" />
                      Search Session Duration
                    </h3>
                    <p className="text-sm text-zinc-400 leading-relaxed">
                      Does watching your video end the user&apos;s search session (meaning their problem was solved), or do they return to YouTube search to click another video? Ending the search session is a major positive ranking signal.
                    </p>
                  </div>
                </div>
              </div>
            </section>

            {/* Section 7: FAQ Accordion */}
            <section className="space-y-6">
              <h2 className="text-2xl md:text-4xl font-extrabold text-zinc-100">
                Frequently Asked Questions
              </h2>
              <div className="space-y-4">
                <details className="bg-zinc-900/40 border border-zinc-800/80 rounded-2xl p-5 cursor-pointer group">
                  <summary className="font-bold text-lg text-zinc-100 group-hover:text-red-400 transition-colors list-none flex items-center justify-between">
                    <span>What is a good YouTube SEO score?</span>
                    <HelpCircle className="w-5 h-5 text-zinc-500 group-hover:text-red-400 transition-colors" />
                  </summary>
                  <p className="mt-3 text-zinc-400 leading-relaxed text-sm">
                    A score of 80/100 or higher is considered optimized. A high score means your video satisfies title character recommendations, contains sufficient description length, and utilizes balanced tags and hashtags.
                  </p>
                </details>

                <details className="bg-zinc-900/40 border border-zinc-800/80 rounded-2xl p-5 cursor-pointer group">
                  <summary className="font-bold text-lg text-zinc-100 group-hover:text-red-400 transition-colors list-none flex items-center justify-between">
                    <span>Does a high SEO score guarantee rank #1?</span>
                    <HelpCircle className="w-5 h-5 text-zinc-500 group-hover:text-red-400 transition-colors" />
                  </summary>
                  <p className="mt-3 text-zinc-400 leading-relaxed text-sm">
                    No tool can guarantee rankings because YouTube factors in dynamic competition, audience retention, CTR, and watch time. SEO gets your video indexed; viewer engagement determines whether you maintain that position.
                  </p>
                </details>

                <details className="bg-zinc-900/40 border border-zinc-800/80 rounded-2xl p-5 cursor-pointer group">
                  <summary className="font-bold text-lg text-zinc-100 group-hover:text-red-400 transition-colors list-none flex items-center justify-between">
                    <span>How many characters should my title be?</span>
                    <HelpCircle className="w-5 h-5 text-zinc-500 group-hover:text-red-400 transition-colors" />
                  </summary>
                  <p className="mt-3 text-zinc-400 leading-relaxed text-sm">
                    Keep your title between 50 and 70 characters. Titles under 50 characters usually miss secondary search queries, while titles exceeding 70 characters get truncated with an ellipsis on mobile devices.
                  </p>
                </details>

                <details className="bg-zinc-900/40 border border-zinc-800/80 rounded-2xl p-5 cursor-pointer group">
                  <summary className="font-bold text-lg text-zinc-100 group-hover:text-red-400 transition-colors list-none flex items-center justify-between">
                    <span>How many words should be in my video description?</span>
                    <HelpCircle className="w-5 h-5 text-zinc-500 group-hover:text-red-400 transition-colors" />
                  </summary>
                  <p className="mt-3 text-zinc-400 leading-relaxed text-sm">
                    We recommend writing at least 200 to 300 words. Dedicate the first 2-3 sentences to a clear, keyword-rich hook, followed by a detailed overview, timestamped chapters, and relevant resource links.
                  </p>
                </details>

                <details className="bg-zinc-900/40 border border-zinc-800/80 rounded-2xl p-5 cursor-pointer group">
                  <summary className="font-bold text-lg text-zinc-100 group-hover:text-red-400 transition-colors list-none flex items-center justify-between">
                    <span>Should I update SEO on old videos?</span>
                    <HelpCircle className="w-5 h-5 text-zinc-500 group-hover:text-red-400 transition-colors" />
                  </summary>
                  <p className="mt-3 text-zinc-400 leading-relaxed text-sm">
                    Yes! Updating titles and expanding descriptions on older evergreen videos often prompts YouTube crawlers to re-evaluate the content, frequently generating a second surge of organic search traffic.
                  </p>
                </details>

                <details className="bg-zinc-900/40 border border-zinc-800/80 rounded-2xl p-5 cursor-pointer group">
                  <summary className="font-bold text-lg text-zinc-100 group-hover:text-red-400 transition-colors list-none flex items-center justify-between">
                    <span>How many hashtags should I add?</span>
                    <HelpCircle className="w-5 h-5 text-zinc-500 group-hover:text-red-400 transition-colors" />
                  </summary>
                  <p className="mt-3 text-zinc-400 leading-relaxed text-sm">
                    Use between 3 and 5 hyper-targeted hashtags at the bottom of your description. YouTube displays the first three above your video title. Using more than 15 hashtags violates platform spam policies and causes YouTube to ignore all of them.
                  </p>
                </details>

                <details className="bg-zinc-900/40 border border-zinc-800/80 rounded-2xl p-5 cursor-pointer group">
                  <summary className="font-bold text-lg text-zinc-100 group-hover:text-red-400 transition-colors list-none flex items-center justify-between">
                    <span>Are video tags still useful in 2026?</span>
                    <HelpCircle className="w-5 h-5 text-zinc-500 group-hover:text-red-400 transition-colors" />
                  </summary>
                  <p className="mt-3 text-zinc-400 leading-relaxed text-sm">
                    Tags carry less weight than titles or descriptions, but they remain valuable for indexing common misspellings, colloquial terms, and niche abbreviations. Including relevant tags takes moments and provides positive contextual reinforcement.
                  </p>
                </details>

                <details className="bg-zinc-900/40 border border-zinc-800/80 rounded-2xl p-5 cursor-pointer group">
                  <summary className="font-bold text-lg text-zinc-100 group-hover:text-red-400 transition-colors list-none flex items-center justify-between">
                    <span>Does keyword stuffing help rank videos?</span>
                    <HelpCircle className="w-5 h-5 text-zinc-500 group-hover:text-red-400 transition-colors" />
                  </summary>
                  <p className="mt-3 text-zinc-400 leading-relaxed text-sm">
                    No. Dumping blocks of comma-separated keywords into your description violates YouTube&apos;s metadata spam policies and can trigger automated search suppression. You can check your channel health using our <Link href="/shadowban-detector" className="text-red-400 hover:underline">Shadowban Detector</Link>.
                  </p>
                </details>

                <details className="bg-zinc-900/40 border border-zinc-800/80 rounded-2xl p-5 cursor-pointer group">
                  <summary className="font-bold text-lg text-zinc-100 group-hover:text-red-400 transition-colors list-none flex items-center justify-between">
                    <span>Can I check competitor videos with this tool?</span>
                    <HelpCircle className="w-5 h-5 text-zinc-500 group-hover:text-red-400 transition-colors" />
                  </summary>
                  <p className="mt-3 text-zinc-400 leading-relaxed text-sm">
                    Yes! You can paste any public video URL into the tool to analyze competitor metadata, inspect their checklist results, and identify opportunities to outrank them.
                  </p>
                </details>

                <details className="bg-zinc-900/40 border border-zinc-800/80 rounded-2xl p-5 cursor-pointer group">
                  <summary className="font-bold text-lg text-zinc-100 group-hover:text-red-400 transition-colors list-none flex items-center justify-between">
                    <span>How can I check if a video is monetized?</span>
                    <HelpCircle className="w-5 h-5 text-zinc-500 group-hover:text-red-400 transition-colors" />
                  </summary>
                  <p className="mt-3 text-zinc-400 leading-relaxed text-sm">
                    You can quickly check partner program status and ad delivery using our <Link href="/monetization-checker" className="text-red-400 hover:underline">Monetization Checker</Link>.
                  </p>
                </details>
              </div>
            </section>

            {/* Section 8: Related Tools */}
            <section className="space-y-6">
              <h2 className="text-2xl md:text-4xl font-extrabold text-zinc-100">
                Related YouTube Optimization & Research Tools
              </h2>
              <p className="text-zinc-400 leading-relaxed">
                Supercharge your content workflow with our complete collection of free YouTube creator tools:
              </p>
              <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
                <Link
                  href="/tag-extractor"
                  className="p-5 bg-zinc-900/40 hover:bg-zinc-900 border border-zinc-800 hover:border-zinc-700 rounded-2xl transition-all group block"
                >
                  <div className="p-3 bg-zinc-950 rounded-xl border border-zinc-800 w-fit mb-3 group-hover:scale-105 transition-transform text-blue-500">
                    <Zap className="w-5 h-5" />
                  </div>
                  <h3 className="font-semibold text-zinc-100 group-hover:text-blue-400 transition-colors mb-1">
                    Tag Extractor
                  </h3>
                  <p className="text-zinc-400 text-xs leading-relaxed">
                    Extract hidden tags and keywords from any top-ranking YouTube video.
                  </p>
                </Link>

                <Link
                  href="/shadowban-detector"
                  className="p-5 bg-zinc-900/40 hover:bg-zinc-900 border border-zinc-800 hover:border-zinc-700 rounded-2xl transition-all group block"
                >
                  <div className="p-3 bg-zinc-950 rounded-xl border border-zinc-800 w-fit mb-3 group-hover:scale-105 transition-transform text-purple-500">
                    <Shield className="w-5 h-5" />
                  </div>
                  <h3 className="font-semibold text-zinc-100 group-hover:text-purple-400 transition-colors mb-1">
                    Shadowban Detector
                  </h3>
                  <p className="text-zinc-400 text-xs leading-relaxed">
                    Audit your channel for algorithmic search penalties and visibility limits.
                  </p>
                </Link>

                <Link
                  href="/like-counter"
                  className="p-5 bg-zinc-900/40 hover:bg-zinc-900 border border-zinc-800 hover:border-zinc-700 rounded-2xl transition-all group block"
                >
                  <div className="p-3 bg-zinc-950 rounded-xl border border-zinc-800 w-fit mb-3 group-hover:scale-105 transition-transform text-cyan-500">
                    <BarChart3 className="w-5 h-5" />
                  </div>
                  <h3 className="font-semibold text-zinc-100 group-hover:text-cyan-400 transition-colors mb-1">
                    Like Counter
                  </h3>
                  <p className="text-zinc-400 text-xs leading-relaxed">
                    View exact unrounded likes and calculate verified like-to-view engagement ratios.
                  </p>
                </Link>

                <Link
                  href="/dislike-checker"
                  className="p-5 bg-zinc-900/40 hover:bg-zinc-900 border border-zinc-800 hover:border-zinc-700 rounded-2xl transition-all group block"
                >
                  <div className="p-3 bg-zinc-950 rounded-xl border border-zinc-800 w-fit mb-3 group-hover:scale-105 transition-transform text-red-500">
                    <PlaySquare className="w-5 h-5" />
                  </div>
                  <h3 className="font-semibold text-zinc-100 group-hover:text-red-400 transition-colors mb-1">
                    Dislike Checker
                  </h3>
                  <p className="text-zinc-400 text-xs leading-relaxed">
                    Restore hidden YouTube dislike counts and view true audience satisfaction ratings.
                  </p>
                </Link>

                <Link
                  href="/monetization-checker"
                  className="p-5 bg-zinc-900/40 hover:bg-zinc-900 border border-zinc-800 hover:border-zinc-700 rounded-2xl transition-all group block"
                >
                  <div className="p-3 bg-zinc-950 rounded-xl border border-zinc-800 w-fit mb-3 group-hover:scale-105 transition-transform text-green-500">
                    <Award className="w-5 h-5" />
                  </div>
                  <h3 className="font-semibold text-zinc-100 group-hover:text-green-400 transition-colors mb-1">
                    Monetization Checker
                  </h3>
                  <p className="text-zinc-400 text-xs leading-relaxed">
                    Verify whether a YouTube channel or video is monetized with active ad placements.
                  </p>
                </Link>

                <Link
                  href="/thumbnail-downloader"
                  className="p-5 bg-zinc-900/40 hover:bg-zinc-900 border border-zinc-800 hover:border-zinc-700 rounded-2xl transition-all group block"
                >
                  <div className="p-3 bg-zinc-950 rounded-xl border border-zinc-800 w-fit mb-3 group-hover:scale-105 transition-transform text-orange-500">
                    <Target className="w-5 h-5" />
                  </div>
                  <h3 className="font-semibold text-zinc-100 group-hover:text-orange-400 transition-colors mb-1">
                    Thumbnail Downloader
                  </h3>
                  <p className="text-zinc-400 text-xs leading-relaxed">
                    Download full HD and 4K maximum resolution thumbnails from any YouTube video.
                  </p>
                </Link>
              </div>
            </section>
          </article>
        </div>
      </div>
    </>
  );
}