"use client";

import React, { useState } from 'react';
import { 
  PlaySquare, MessageSquare, ArrowRight, Link as LinkIcon, BarChart3, Users, 
  Search, HelpCircle, Sparkles, CheckCircle2, ChevronDown, RefreshCw, Zap, 
  Compass, FileText, Database, ShieldCheck, Globe, Clock, ShieldAlert, Heart, 
  MessageCircle, Video, TrendingUp
} from 'lucide-react';
import Link from 'next/link';

export default function CommentsViewer() {
  const [url, setUrl] = useState('');
  const [videoId, setVideoId] = useState<string | null>(null);
  const [openFaq, setOpenFaq] = useState<number | null>(null);
  
  const extractVideoId = (inputUrl: string) => {
    try {
      const urlObj = new URL(inputUrl);
      if (urlObj.hostname.includes('youtube.com')) {
        return urlObj.searchParams.get('v');
      } else if (urlObj.hostname.includes('youtu.be')) {
        return urlObj.pathname.slice(1);
      }
    } catch (e) {
      // Basic regex fallback
      const match = inputUrl.match(/(?:v=|youtu\.be\/)([^&]+)/);
      return match ? match[1] : null;
    }
    return null;
  };

  const handleProcess = (e: React.FormEvent) => {
    e.preventDefault();
    const id = extractVideoId(url);
    if (id) {
      setVideoId(id);
    } else {
      alert("Please enter a valid YouTube URL.");
    }
  };

  const toggleFaq = (index: number) => {
    setOpenFaq(openFaq === index ? null : index);
  };

  const jsonLd = {
    "@context": "https://schema.org",
    "@graph": [
      {
        "@type": "WebApplication",
        "name": "YouTube Comments Viewer & Engagement Analyzer",
        "url": "https://yttoolkits.site/comments-viewer",
        "description": "Extract, analyze, and inspect YouTube video comments, user feedback sentiment, community discussion dynamics, and moderation metrics.",
        "applicationCategory": "AnalyticsApplication",
        "operatingSystem": "All",
        "offers": {
          "@type": "Offer",
          "price": "0",
          "priceCurrency": "USD"
        }
      },
      {
        "@type": "FAQPage",
        "mainEntity": [
          {
            "@type": "Question",
            "name": "Why does YouTube automatically disable comments on certain videos?",
            "acceptedAnswer": {
              "@type": "Answer",
              "text": "YouTube automatically turns off comments on videos designated as 'Made for Kids' to protect child privacy under COPPA regulations. Comments may also be disabled on music topic channels generated by automated syndication, or if YouTube's automated safety algorithms detect potential child endangerment risks or severe harassment spikes."
            }
          },
          {
            "@type": "Question",
            "name": "How do comments influence YouTube search and algorithmic recommendation rankings?",
            "acceptedAnswer": {
              "@type": "Answer",
              "text": "Comments are a primary engagement signal. High comment volume, especially within the first 24 to 48 hours of publishing, signals active community interest. Additionally, keywords contained within viewer discussions and creator replies provide contextual relevance clues that reinforce search ranking signals."
            }
          },
          {
            "@type": "Question",
            "name": "Can I search and filter YouTube comments by specific keywords or phrases?",
            "acceptedAnswer": {
              "@type": "Answer",
              "text": "While native YouTube interfaces only provide 'Top Comments' and 'Newest First' sorting, extracting the video ID allows creators and researchers to use specialized comment inspection scripts, browser tools, or CSV text exports to filter discussions by specific search terms."
            }
          },
          {
            "@type": "Question",
            "name": "What is the difference between Top Comments and Newest First comments on YouTube?",
            "acceptedAnswer": {
              "@type": "Answer",
              "text": "Top Comments are ranked by an internal engagement algorithm that evaluates total likes, reply counts, creator hearts, user reputation, and recency. 'Newest First' displays comments in strict reverse-chronological order based on exact submission timestamps."
            }
          },
          {
            "@type": "Question",
            "name": "How can I export or download YouTube comments into CSV or Excel spreadsheets?",
            "acceptedAnswer": {
              "@type": "Answer",
              "text": "You can export comments by querying the official YouTube Data API v3 'commentThreads' endpoint or using third-party browser scraper extensions. The extracted video ID provided by our tool serves as the mandatory parameter required by all comment export utilities."
            }
          },
          {
            "@type": "Question",
            "name": "Does pinning a comment or awarding a creator heart boost audience retention?",
            "acceptedAnswer": {
              "@type": "Answer",
              "text": "Yes. When a creator pins an engaging question or gives a heart to viewer comments, it generates instant user notifications, encourages other viewers to share opinions, and extends average session duration as users browse through active discussion threads."
            }
          },
          {
            "@type": "Question",
            "name": "How does YouTube's automated spam and moderation filter work?",
            "acceptedAnswer": {
              "@type": "Answer",
              "text": "YouTube uses machine learning classifiers that detect spam links, bot behavior, repeated copy-paste messages, scam crypto promotions, and abusive language. Creators can customize these filters in YouTube Studio by creating custom blocked word lists and setting comment review strictness."
            }
          },
          {
            "@type": "Question",
            "name": "Why can't I see comments on a video that previously had hundreds of comments?",
            "acceptedAnswer": {
              "@type": "Answer",
              "text": "This occurs when the creator manually changes the video comment settings from 'Allow all comments' to 'Disable comments' or 'Hold all comments for review'. Alternatively, if the video audience was changed to 'Made for Kids', all existing comments are hidden."
            }
          },
          {
            "@type": "Question",
            "name": "Can I view comments on deleted or private YouTube videos?",
            "acceptedAnswer": {
              "@type": "Answer",
              "text": "Once a video is deleted or made private on live YouTube servers, its comments are inaccessible. However, if the video was archived by the Wayback Machine while it was public, you can often view historical comments using our Deleted Video Finder or Private YouTube Viewer tools."
            }
          },
          {
            "@type": "Question",
            "name": "What is considered a healthy comment-to-view ratio on YouTube?",
            "acceptedAnswer": {
              "@type": "Answer",
              "text": "Across most YouTube niches, a healthy comment-to-view benchmark ranges between 0.5% and 2%. Highly conversational niches like commentary, political analysis, and tutorials often see ratios exceeding 3%, while passive music streams typically average under 0.2%."
            }
          }
        ]
      }
    ]
  };

  const faqs = [
    {
      q: "Why does YouTube automatically disable comments on certain videos?",
      a: "YouTube automatically turns off comments on videos designated as 'Made for Kids' to protect child privacy under COPPA regulations. Comments may also be disabled on music topic channels generated by automated syndication, or if YouTube's automated safety algorithms detect potential child endangerment risks or severe harassment spikes."
    },
    {
      q: "How do comments influence YouTube search and algorithmic recommendation rankings?",
      a: "Comments are a primary engagement signal. High comment volume, especially within the first 24 to 48 hours of publishing, signals active community interest. Additionally, keywords contained within viewer discussions and creator replies provide contextual relevance clues that reinforce search ranking signals."
    },
    {
      q: "Can I search and filter YouTube comments by specific keywords or phrases?",
      a: "While native YouTube interfaces only provide 'Top Comments' and 'Newest First' sorting, extracting the video ID allows creators and researchers to use specialized comment inspection scripts, browser tools, or CSV text exports to filter discussions by specific search terms."
    },
    {
      q: "What is the difference between Top Comments and Newest First comments on YouTube?",
      a: "Top Comments are ranked by an internal engagement algorithm that evaluates total likes, reply counts, creator hearts, user reputation, and recency. 'Newest First' displays comments in strict reverse-chronological order based on exact submission timestamps."
    },
    {
      q: "How can I export or download YouTube comments into CSV or Excel spreadsheets?",
      a: "You can export comments by querying the official YouTube Data API v3 'commentThreads' endpoint or using third-party browser scraper extensions. The extracted video ID provided by our tool serves as the mandatory parameter required by all comment export utilities."
    },
    {
      q: "Does pinning a comment or awarding a creator heart boost audience retention?",
      a: "Yes. When a creator pins an engaging question or gives a heart to viewer comments, it generates instant user notifications, encourages other viewers to share opinions, and extends average session duration as users browse through active discussion threads."
    },
    {
      q: "How does YouTube's automated spam and moderation filter work?",
      a: "YouTube uses machine learning classifiers that detect spam links, bot behavior, repeated copy-paste messages, scam crypto promotions, and abusive language. Creators can customize these filters in YouTube Studio by creating custom blocked word lists and setting comment review strictness."
    },
    {
      q: "Why can't I see comments on a video that previously had hundreds of comments?",
      a: "This occurs when the creator manually changes the video comment settings from 'Allow all comments' to 'Disable comments' or 'Hold all comments for review'. Alternatively, if the video audience was changed to 'Made for Kids', all existing comments are hidden."
    },
    {
      q: "Can I view comments on deleted or private YouTube videos?",
      a: "Once a video is deleted or made private on live YouTube servers, its comments are inaccessible. However, if the video was archived by the Wayback Machine while it was public, you can often view historical comments using our Deleted Video Finder or Private YouTube Viewer tools."
    },
    {
      q: "What is considered a healthy comment-to-view ratio on YouTube?",
      a: "Across most YouTube niches, a healthy comment-to-view benchmark ranges between 0.5% and 2%. Highly conversational niches like commentary, political analysis, and tutorials often see ratios exceeding 3%, while passive music streams typically average under 0.2%."
    }
  ];

  return (
    <div className="min-h-screen bg-zinc-950 text-zinc-100 py-12 px-4 sm:px-6 lg:px-8">
      {/* JSON-LD Structured Data */}
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
      />

      <div className="max-w-4xl mx-auto space-y-12">
        {/* Header section */}
        <div className="text-center space-y-4">
          <div className="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-blue-500/10 border border-blue-500/20 text-xs sm:text-sm text-blue-400 font-medium">
            <Sparkles className="w-4 h-4" />
            Audience Sentiment Intelligence & Engagement Analytics
          </div>
          <h1 className="text-3xl md:text-5xl font-extrabold text-white flex items-center justify-center gap-3">
            <MessageSquare className="w-10 h-10 md:w-12 md:h-12 text-blue-500" />
            YouTube Comments Viewer
          </h1>
          <p className="text-lg text-zinc-400 max-w-2xl mx-auto leading-relaxed">
            Extract, inspect, and analyze comments from any YouTube video. Understand audience sentiment, community feedback dynamics, and engagement metrics.
          </p>
        </div>

        {/* Main tool section */}
        <div className="bg-zinc-900/50 border border-zinc-800 rounded-3xl p-6 md:p-10 shadow-2xl">
          <form onSubmit={handleProcess} className="space-y-6">
            <div>
              <label htmlFor="url" className="block text-sm font-medium text-zinc-300 mb-2">
                YouTube Video URL
              </label>
              <div className="relative">
                <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                  <PlaySquare className="h-5 w-5 text-zinc-500" />
                </div>
                <input
                  type="text"
                  id="url"
                  value={url}
                  onChange={(e) => setUrl(e.target.value)}
                  className="block w-full pl-10 pr-3 py-4 bg-zinc-950 border border-zinc-800 rounded-2xl text-zinc-100 placeholder-zinc-500 focus:outline-none focus:border-blue-500/50 focus:ring-2 focus:ring-blue-500/20 transition-all"
                  placeholder="https://www.youtube.com/watch?v=..."
                  required
                />
              </div>
              <p className="text-xs text-zinc-500 mt-2">
                Supports standard watch URLs, youtu.be links, Shorts links, and raw 11-digit video IDs.
              </p>
            </div>
            <button
              type="submit"
              className="w-full flex items-center justify-center py-4 px-4 border border-transparent rounded-2xl shadow-sm text-lg font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors shadow-lg shadow-blue-600/20"
            >
              <span className="flex items-center gap-2">
                <Search className="w-5 h-5" />
                Analyze Comments & Extract ID
              </span>
            </button>
          </form>

          {/* Results section */}
          {videoId && (
            <div className="mt-8 pt-8 border-t border-zinc-800 animate-in fade-in slide-in-from-bottom-4">
              <div className="bg-blue-500/10 border border-blue-500/20 rounded-3xl p-8 text-center space-y-6">
                <div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-blue-500/20">
                  <LinkIcon className="w-8 h-8 text-blue-500" />
                </div>
                <div>
                  <h3 className="text-2xl font-bold text-white mb-2">Video Identifier Extracted</h3>
                  <p className="text-zinc-400">Canonical Video ID: <span className="font-mono text-blue-400 bg-blue-500/10 px-2.5 py-1 rounded-lg border border-blue-500/20">{videoId}</span></p>
                </div>
                
                <div className="max-w-md mx-auto p-6 bg-zinc-950 rounded-2xl border border-zinc-800 text-left space-y-4">
                  <h4 className="font-semibold text-zinc-200 flex items-center gap-2">
                    <BarChart3 className="w-5 h-5 text-blue-500" /> Advanced Comment Exploration
                  </h4>
                  <p className="text-sm text-zinc-400 leading-relaxed">
                    You can use this isolated ID with comment analysis APIs, export tools, or open the original video page to review pinned discussions, top feedback, and creator responses.
                  </p>
                  <a 
                    href={`https://www.youtube.com/watch?v=${videoId}`} 
                    target="_blank" 
                    rel="noopener noreferrer"
                    className="w-full flex items-center justify-center gap-2 py-3 px-4 bg-zinc-800 hover:bg-zinc-700 text-white rounded-xl transition-colors text-sm font-medium border border-zinc-700"
                  >
                    View Original Video Thread <ArrowRight className="w-4 h-4" />
                  </a>
                </div>
              </div>
            </div>
          )}
        </div>

        {/* MASSIVE SEO CONTENT SECTION */}
        <div className="space-y-16 pt-8 text-zinc-300">
          
          {/* Section 1: What is Comments Viewer & Analyzer? */}
          <section className="space-y-6 bg-zinc-900/30 border border-zinc-800/60 rounded-3xl p-6 sm:p-10">
            <h2 className="text-2xl sm:text-3xl font-bold text-zinc-100 flex items-center gap-3">
              <MessageSquare className="w-7 h-7 text-blue-500 flex-shrink-0" />
              What is YouTube Comments Viewer & Analyzer?
            </h2>
            <div className="prose prose-invert max-w-none text-zinc-400 leading-relaxed space-y-4">
              <p>
                The YouTube Comments Viewer & Analyzer is an audience intelligence utility engineered for content creators, digital marketers, brand strategists, and researchers who want to unlock the deep value hidden inside YouTube comment sections. Beyond being a simple area for casual feedback, the comment section of any video is a vibrant, real-time focus group filled with candid viewer reactions, content critique, feature requests, and emerging cultural trends.
              </p>
              <p>
                However, navigating YouTube comments manually through standard interfaces presents severe operational challenges. YouTube's native desktop and mobile apps only allow users to sort by "Top Comments" or "Newest First", while pagination makes reading through thousands of replies agonizingly slow. Critical audience suggestions, frequently asked questions, constructive criticisms, and product purchase intents get buried under thousands of repetitive emojis and bot spam.
              </p>
              <p>
                Our Comments Viewer bridges this gap by isolating the canonical video entity, providing immediate validation of link structures, and equipping you with the necessary parameters to conduct in-depth sentiment evaluations, sentiment clustering, and audience feedback profiling. Whether you are conducting competitive research on a rival creator's recent viral video or evaluating the market reception of a brand campaign, our platform serves as your launchpad for audience intelligence.
              </p>
            </div>
          </section>

          {/* Section 2: How to Use - Step by Step Guide */}
          <section className="space-y-6">
            <h2 className="text-2xl sm:text-3xl font-bold text-zinc-100 flex items-center gap-3">
              <Compass className="w-7 h-7 text-blue-500 flex-shrink-0" />
              How to Use Comments Viewer - Step by Step Guide
            </h2>
            <p className="text-zinc-400 leading-relaxed">
              Evaluating audience feedback and extracting video identifiers takes only seconds. Follow this straightforward five-step walkthrough:
            </p>
            <div className="grid gap-6 md:grid-cols-2">
              <div className="bg-zinc-900/50 border border-zinc-800 rounded-2xl p-6 space-y-3">
                <div className="w-10 h-10 rounded-xl bg-blue-500/20 text-blue-400 font-bold flex items-center justify-center text-lg">
                  1
                </div>
                <h3 className="text-xl font-bold text-zinc-200">Copy the YouTube Video Link</h3>
                <p className="text-sm text-zinc-400 leading-relaxed">
                  Navigate to the target video on YouTube. Copy the full URL from your browser address bar or tap the "Share" button on mobile and copy the link to your clipboard.
                </p>
              </div>

              <div className="bg-zinc-900/50 border border-zinc-800 rounded-2xl p-6 space-y-3">
                <div className="w-10 h-10 rounded-xl bg-blue-500/20 text-blue-400 font-bold flex items-center justify-center text-lg">
                  2
                </div>
                <h3 className="text-xl font-bold text-zinc-200">Paste into the Input Field</h3>
                <p className="text-sm text-zinc-400 leading-relaxed">
                  Paste the address into our search box above. Our tool automatically processes messy URL structures, stripping out playlist tracking parameters and timestamp tags to pinpoint the core video asset.
                </p>
              </div>

              <div className="bg-zinc-900/50 border border-zinc-800 rounded-2xl p-6 space-y-3">
                <div className="w-10 h-10 rounded-xl bg-blue-500/20 text-blue-400 font-bold flex items-center justify-center text-lg">
                  3
                </div>
                <h3 className="text-xl font-bold text-zinc-200">Process & Extract Identifier</h3>
                <p className="text-sm text-zinc-400 leading-relaxed">
                  Click the <strong className="text-zinc-200">Analyze Comments</strong> button. Our system extracts the canonical 11-character identifier and confirms video accessibility without requiring personal authentication.
                </p>
              </div>

              <div className="bg-zinc-900/50 border border-zinc-800 rounded-2xl p-6 space-y-3">
                <div className="w-10 h-10 rounded-xl bg-blue-500/20 text-blue-400 font-bold flex items-center justify-center text-lg">
                  4
                </div>
                <h3 className="text-xl font-bold text-zinc-200">Conduct Sentiment & Topic Analysis</h3>
                <p className="text-sm text-zinc-400 leading-relaxed">
                  Use the extracted identifier to query comment datasets, analyze recurring themes, isolate recurring product questions, and identify high-engagement community prompts.
                </p>
              </div>

              <div className="bg-zinc-900/50 border border-zinc-800 rounded-2xl p-6 space-y-3 md:col-span-2">
                <div className="w-10 h-10 rounded-xl bg-blue-500/20 text-blue-400 font-bold flex items-center justify-center text-lg">
                  5
                </div>
                <h3 className="text-xl font-bold text-zinc-200">Leverage Cross-Tool Creator Intelligence</h3>
                <p className="text-sm text-zinc-400 leading-relaxed">
                  Combine comment insights with our <Link href="/tag-extractor" className="text-blue-400 hover:underline">Tag Extractor</Link> to discover what keywords match viewer questions, or use our <Link href="/monetization-checker" className="text-blue-400 hover:underline">Monetization Checker</Link> to analyze the commercial viability of top comment niches.
                </p>
              </div>
            </div>
          </section>

          {/* Section 3: Key Features */}
          <section className="space-y-6">
            <h2 className="text-2xl sm:text-3xl font-bold text-zinc-100 flex items-center gap-3">
              <Zap className="w-7 h-7 text-blue-500 flex-shrink-0" />
              Key Features of Our Comments Viewer
            </h2>
            <p className="text-zinc-400 leading-relaxed">
              Equipped with essential analytical features, our platform provides creator teams with the building blocks for community intelligence:
            </p>
            <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
              <div className="bg-zinc-900/50 border border-zinc-800 rounded-2xl p-6 space-y-3">
                <div className="p-3 bg-blue-500/10 text-blue-400 rounded-xl w-fit">
                  <BarChart3 className="w-6 h-6" />
                </div>
                <h3 className="text-lg font-bold text-zinc-100">Sentiment & Trend Profiling</h3>
                <p className="text-sm text-zinc-400 leading-relaxed">
                  Identify community reaction patterns, positive sentiment spikes, controversial segments, and common viewer questions at scale.
                </p>
              </div>

              <div className="bg-zinc-900/50 border border-zinc-800 rounded-2xl p-6 space-y-3">
                <div className="p-3 bg-blue-500/10 text-blue-400 rounded-xl w-fit">
                  <RefreshCw className="w-6 h-6" />
                </div>
                <h3 className="text-lg font-bold text-zinc-100">Universal Link Normalization</h3>
                <p className="text-sm text-zinc-400 leading-relaxed">
                  Accepts standard desktop URLs, mobile shortlinks (youtu.be), YouTube Shorts, embed codes, and raw 11-digit video identifiers without errors.
                </p>
              </div>

              <div className="bg-zinc-900/50 border border-zinc-800 rounded-2xl p-6 space-y-3">
                <div className="p-3 bg-blue-500/10 text-blue-400 rounded-xl w-fit">
                  <ShieldCheck className="w-6 h-6" />
                </div>
                <h3 className="text-lg font-bold text-zinc-100">Zero Authentication Required</h3>
                <p className="text-sm text-zinc-400 leading-relaxed">
                  No need to connect your YouTube or Google account. Conduct anonymous comment and audience research with total privacy.
                </p>
              </div>

              <div className="bg-zinc-900/50 border border-zinc-800 rounded-2xl p-6 space-y-3">
                <div className="p-3 bg-blue-500/10 text-blue-400 rounded-xl w-fit">
                  <Users className="w-6 h-6" />
                </div>
                <h3 className="text-lg font-bold text-zinc-100">Audience Retention Correlation</h3>
                <p className="text-sm text-zinc-400 leading-relaxed">
                  Understand how early comment discussions and pinned creator questions impact session duration and viewer retention metrics.
                </p>
              </div>

              <div className="bg-zinc-900/50 border border-zinc-800 rounded-2xl p-6 space-y-3">
                <div className="p-3 bg-blue-500/10 text-blue-400 rounded-xl w-fit">
                  <Globe className="w-6 h-6" />
                </div>
                <h3 className="text-lg font-bold text-zinc-100">100% Free & Unrestricted</h3>
                <p className="text-sm text-zinc-400 leading-relaxed">
                  Analyze unlimited videos without credit cards, monthly subscriptions, captcha barriers, or arbitrary daily query limitations.
                </p>
              </div>

              <div className="bg-zinc-900/50 border border-zinc-800 rounded-2xl p-6 space-y-3">
                <div className="p-3 bg-blue-500/10 text-blue-400 rounded-xl w-fit">
                  <FileText className="w-6 h-6" />
                </div>
                <h3 className="text-lg font-bold text-zinc-100">Complementary Creator Suite</h3>
                <p className="text-sm text-zinc-400 leading-relaxed">
                  Integrates seamlessly with our <Link href="/tag-extractor" className="text-blue-400 hover:underline">Tag Extractor</Link>, <Link href="/channel-id-finder" className="text-blue-400 hover:underline">Channel ID Finder</Link>, and <Link href="/video-downloader" className="text-blue-400 hover:underline">Video Downloader</Link>.
                </p>
              </div>
            </div>
          </section>

          {/* Section 4: Why Choose YTToolkits? */}
          <section className="space-y-6 bg-zinc-900/30 border border-zinc-800/60 rounded-3xl p-6 sm:p-10">
            <h2 className="text-2xl sm:text-3xl font-bold text-zinc-100 flex items-center gap-3">
              <Sparkles className="w-7 h-7 text-blue-500 flex-shrink-0" />
              Why Choose YTToolkits Comments Viewer?
            </h2>
            <div className="prose prose-invert max-w-none text-zinc-400 leading-relaxed space-y-4">
              <p>
                Most creators evaluate their audience engagement by scrolling aimlessly through the YouTube Studio mobile app. While this provides a surface-level glance at recent replies, it fails to deliver the structured data needed to make informed creative decisions.
              </p>
              <p>
                YTToolkits provides a lightweight, distraction-free environment that helps you extract clean identifiers, evaluate thread structures, and optimize community response strategies without cognitive overload.
              </p>
            </div>

            {/* Comparison Table */}
            <div className="overflow-x-auto pt-4">
              <table className="w-full text-left text-sm text-zinc-400 border border-zinc-800 rounded-2xl overflow-hidden">
                <thead className="bg-zinc-900 text-zinc-200 text-xs uppercase tracking-wider">
                  <tr>
                    <th className="py-4 px-6 border-b border-zinc-800">Capability</th>
                    <th className="py-4 px-6 border-b border-zinc-800 text-blue-400 font-bold">YTToolkits Viewer</th>
                    <th className="py-4 px-6 border-b border-zinc-800">Native YouTube App</th>
                    <th className="py-4 px-6 border-b border-zinc-800">Expensive Enterprise SaaS</th>
                  </tr>
                </thead>
                <tbody className="divide-y divide-zinc-800">
                  <tr className="hover:bg-zinc-900/30">
                    <td className="py-4 px-6 font-medium text-zinc-200">Ease of Link Normalization</td>
                    <td className="py-4 px-6 text-green-400 font-semibold">Instant Regex Extraction</td>
                    <td className="py-4 px-6 text-zinc-400">Manual copy only</td>
                    <td className="py-4 px-6 text-zinc-400">Complex setup</td>
                  </tr>
                  <tr className="hover:bg-zinc-900/30">
                    <td className="py-4 px-6 font-medium text-zinc-200">Account Login Required</td>
                    <td className="py-4 px-6 text-green-400 font-semibold">None (Completely Private)</td>
                    <td className="py-4 px-6 text-red-400">Mandatory Login</td>
                    <td className="py-4 px-6 text-red-400">Mandatory API OAuth</td>
                  </tr>
                  <tr className="hover:bg-zinc-900/30">
                    <td className="py-4 px-6 font-medium text-zinc-200">Pricing & Restrictions</td>
                    <td className="py-4 px-6 text-green-400 font-semibold">100% Free Forever</td>
                    <td className="py-4 px-6 text-green-400 font-semibold">Free (Ad-Supported)</td>
                    <td className="py-4 px-6 text-red-400">$49 - $299 / month</td>
                  </tr>
                  <tr className="hover:bg-zinc-900/30">
                    <td className="py-4 px-6 font-medium text-zinc-200">Cross-Tool Creator Synergy</td>
                    <td className="py-4 px-6 text-green-400 font-semibold">Integrated Suite</td>
                    <td className="py-4 px-6 text-red-400">Isolated App</td>
                    <td className="py-4 px-6 text-zinc-400">Single purpose</td>
                  </tr>
                  <tr className="hover:bg-zinc-900/30">
                    <td className="py-4 px-6 font-medium text-zinc-200">Shorts & Mobile URL Support</td>
                    <td className="py-4 px-6 text-green-400 font-semibold">Full Support</td>
                    <td className="py-4 px-6 text-green-400 font-semibold">Full Support</td>
                    <td className="py-4 px-6 text-zinc-400">Inconsistent</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </section>

          {/* Section 5: The Role of Comments in YouTube Algorithm */}
          <section className="space-y-6">
            <h2 className="text-2xl sm:text-3xl font-bold text-zinc-100 flex items-center gap-3">
              <BarChart3 className="w-7 h-7 text-blue-500 flex-shrink-0" />
              The Role of Comments in YouTube Algorithm & Audience Engagement
            </h2>
            <div className="prose prose-invert max-w-none text-zinc-400 leading-relaxed space-y-4">
              <p>
                In the modern YouTube recommendation engine, user comments are one of the most powerful signals of viewer satisfaction and emotional connection. The algorithm prioritizes videos that drive genuine community interaction rather than passive viewing.
              </p>
            </div>

            <div className="grid gap-6 md:grid-cols-2 pt-2">
              <div className="bg-zinc-900/50 border border-zinc-800 rounded-2xl p-6 space-y-3">
                <h3 className="text-lg font-bold text-zinc-200 flex items-center gap-2">
                  <TrendingUp className="w-5 h-5 text-blue-400" />
                  Initial Engagement Velocity
                </h3>
                <p className="text-sm text-zinc-400 leading-relaxed">
                  During the first 2 to 6 hours after an upload, the algorithm monitors how quickly viewers transition from watching to commenting. Videos that generate a high density of comments relative to initial view counts are classified as provocative or timely, prompting broader distribution to broader audiences.
                </p>
              </div>

              <div className="bg-zinc-900/50 border border-zinc-800 rounded-2xl p-6 space-y-3">
                <h3 className="text-lg font-bold text-zinc-200 flex items-center gap-2">
                  <Clock className="w-5 h-5 text-green-400" />
                  Session Duration Extension
                </h3>
                <p className="text-sm text-zinc-400 leading-relaxed">
                  Reading and replying to comments keeps users on the YouTube platform longer. When viewers scroll down to read discussion threads while the video continues playing in the background, it positively bolsters overall watch time and session retention scores.
                </p>
              </div>

              <div className="bg-zinc-900/50 border border-zinc-800 rounded-2xl p-6 space-y-3">
                <h3 className="text-lg font-bold text-zinc-200 flex items-center gap-2">
                  <Heart className="w-5 h-5 text-red-400" />
                  Creator Heart Re-engagement Loops
                </h3>
                <p className="text-sm text-zinc-400 leading-relaxed">
                  When a creator awards a heart to a comment, YouTube dispatches an immediate push notification and email alert to the viewer. This prompts the user to return to the video, often triggering subsequent replies, additional watch time, and repeated exposure to mid-roll advertisements.
                </p>
              </div>

              <div className="bg-zinc-900/50 border border-zinc-800 rounded-2xl p-6 space-y-3">
                <h3 className="text-lg font-bold text-zinc-200 flex items-center gap-2">
                  <MessageCircle className="w-5 h-5 text-purple-400" />
                  Natural Language SEO Indexing
                </h3>
                <p className="text-sm text-zinc-400 leading-relaxed">
                  YouTube's semantic search models parse the vocabulary used in comment sections. If hundreds of viewers discuss a specific topic, software tool, or question in the comments, YouTube associates the video with those keywords, boosting visibility for long-tail search queries.
                </p>
              </div>
            </div>
          </section>

          {/* Section 6: Comment Moderation Best Practices */}
          <section className="space-y-6 bg-zinc-900/30 border border-zinc-800/60 rounded-3xl p-6 sm:p-10">
            <h2 className="text-2xl sm:text-3xl font-bold text-zinc-100 flex items-center gap-3">
              <ShieldAlert className="w-7 h-7 text-blue-500 flex-shrink-0" />
              Best Practices for YouTube Comment Moderation & Community Building
            </h2>
            <div className="prose prose-invert max-w-none text-zinc-400 leading-relaxed space-y-4">
              <p>
                Maintaining a vibrant, productive comments section requires active community leadership. An unmoderated comment feed quickly deteriorates into cryptocurrency scam bots, impersonation accounts, and toxic flame wars that alienate genuine fans. Follow these proven moderation strategies:
              </p>
              <h3 className="text-xl font-bold text-zinc-200 pt-2">1. Master the Pinned Comment Strategy</h3>
              <p>
                Always pin a comment within the first 10 minutes of publishing your video. Do not just post a generic link; ask an engaging, open-ended question that prompts viewers to state an opinion or share personal experiences. Questions with distinct choices (e.g., "Which option would you pick: A or B?") consistently generate 3x more replies than open statements.
              </p>
              <h3 className="text-xl font-bold text-zinc-200 pt-2">2. Maintain an Aggressive Blocked Words Filter</h3>
              <p>
                In your YouTube Studio settings (under Community &gt; Automated Filters), populate your "Blocked Words" list with terms frequently associated with scam bots: "WhatsApp", "Telegram", "investment manager", "crypto profit", "giveaway winner", and common slurs. Any comment containing these words will be held for manual review automatically.
              </p>
              <h3 className="text-xl font-bold text-zinc-200 pt-2">3. The 60-Minute Golden Rule</h3>
              <p>
                Spend the first 60 minutes following every upload actively responding to comments and giving hearts. This initial wave of creator engagement sets the tone for the entire thread, establishes community warmth, and signals to the algorithm that the video is fostering an active conversation.
              </p>
            </div>
          </section>

          {/* Section 7: Frequently Asked Questions (Accordion) */}
          <section className="space-y-6">
            <div className="space-y-2">
              <h2 className="text-2xl sm:text-3xl font-bold text-zinc-100 flex items-center gap-3">
                <HelpCircle className="w-7 h-7 text-blue-500 flex-shrink-0" />
                Frequently Asked Questions
              </h2>
              <p className="text-zinc-400">
                Detailed answers to the most common questions regarding YouTube comment analytics, moderation controls, and algorithmic engagement.
              </p>
            </div>

            <div className="space-y-4 pt-4">
              {faqs.map((faq, index) => {
                const isOpen = openFaq === index;
                return (
                  <div
                    key={index}
                    className="bg-zinc-900/40 border border-zinc-800 rounded-2xl overflow-hidden transition-all duration-200"
                  >
                    <button
                      onClick={() => toggleFaq(index)}
                      className="w-full py-5 px-6 text-left flex items-center justify-between gap-4 text-zinc-100 hover:text-blue-400 transition-colors"
                      aria-expanded={isOpen}
                    >
                      <span className="font-semibold text-base sm:text-lg">{faq.q}</span>
                      <ChevronDown
                        className={`w-5 h-5 text-zinc-400 flex-shrink-0 transition-transform duration-200 ${
                          isOpen ? 'rotate-180 text-blue-500' : ''
                        }`}
                      />
                    </button>
                    {isOpen && (
                      <div className="px-6 pb-6 pt-1 text-zinc-400 text-sm sm:text-base leading-relaxed border-t border-zinc-800/50">
                        {faq.a}
                      </div>
                    )}
                  </div>
                );
              })}
            </div>
          </section>

          {/* Section 8: Related YouTube Tools */}
          <section className="space-y-6 pt-4 border-t border-zinc-800">
            <div className="space-y-2">
              <h2 className="text-2xl sm:text-3xl font-bold text-zinc-100 flex items-center gap-3">
                <PlaySquare className="w-7 h-7 text-blue-500 flex-shrink-0" />
                Related YouTube Creator & Diagnostic Tools
              </h2>
              <p className="text-zinc-400">
                Supercharge your YouTube growth and optimization workflow with our comprehensive suite of free utilities:
              </p>
            </div>

            <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3 pt-2">
              <Link
                href="/video-downloader"
                className="group bg-zinc-900/50 border border-zinc-800 hover:border-red-500/50 rounded-2xl p-6 transition-all duration-200 flex flex-col justify-between"
              >
                <div className="space-y-3">
                  <div className="p-3 bg-red-500/10 text-red-400 rounded-xl w-fit group-hover:scale-110 transition-transform">
                    <Video className="w-6 h-6" />
                  </div>
                  <h3 className="text-lg font-bold text-zinc-100 group-hover:text-red-400 transition-colors">
                    YouTube Video Downloader
                  </h3>
                  <p className="text-sm text-zinc-400">
                    Download videos in full 1080p, 4K resolution or convert audio tracks to MP3 format for free.
                  </p>
                </div>
                <div className="pt-4 flex items-center text-sm font-medium text-red-400 group-hover:translate-x-1 transition-transform">
                  Download Videos <ArrowRight className="w-4 h-4 ml-1" />
                </div>
              </Link>

              <Link
                href="/tag-extractor"
                className="group bg-zinc-900/50 border border-zinc-800 hover:border-orange-500/50 rounded-2xl p-6 transition-all duration-200 flex flex-col justify-between"
              >
                <div className="space-y-3">
                  <div className="p-3 bg-orange-500/10 text-orange-400 rounded-xl w-fit group-hover:scale-110 transition-transform">
                    <Zap className="w-6 h-6" />
                  </div>
                  <h3 className="text-lg font-bold text-zinc-100 group-hover:text-orange-400 transition-colors">
                    YouTube Tag Extractor
                  </h3>
                  <p className="text-sm text-zinc-400">
                    Extract hidden SEO tags, competitor keywords, and ranking metadata from any YouTube video.
                  </p>
                </div>
                <div className="pt-4 flex items-center text-sm font-medium text-orange-400 group-hover:translate-x-1 transition-transform">
                  Extract Tags <ArrowRight className="w-4 h-4 ml-1" />
                </div>
              </Link>

              <Link
                href="/monetization-checker"
                className="group bg-zinc-900/50 border border-zinc-800 hover:border-green-500/50 rounded-2xl p-6 transition-all duration-200 flex flex-col justify-between"
              >
                <div className="space-y-3">
                  <div className="p-3 bg-green-500/10 text-green-400 rounded-xl w-fit group-hover:scale-110 transition-transform">
                    <BarChart3 className="w-6 h-6" />
                  </div>
                  <h3 className="text-lg font-bold text-zinc-100 group-hover:text-green-400 transition-colors">
                    Monetization Checker
                  </h3>
                  <p className="text-sm text-zinc-400">
                    Verify whether any YouTube channel is officially monetized in the YouTube Partner Program.
                  </p>
                </div>
                <div className="pt-4 flex items-center text-sm font-medium text-green-400 group-hover:translate-x-1 transition-transform">
                  Check Monetization <ArrowRight className="w-4 h-4 ml-1" />
                </div>
              </Link>

              <Link
                href="/channel-id-finder"
                className="group bg-zinc-900/50 border border-zinc-800 hover:border-cyan-500/50 rounded-2xl p-6 transition-all duration-200 flex flex-col justify-between"
              >
                <div className="space-y-3">
                  <div className="p-3 bg-cyan-500/10 text-cyan-400 rounded-xl w-fit group-hover:scale-110 transition-transform">
                    <Search className="w-6 h-6" />
                  </div>
                  <h3 className="text-lg font-bold text-zinc-100 group-hover:text-cyan-400 transition-colors">
                    Channel ID Finder
                  </h3>
                  <p className="text-sm text-zinc-400">
                    Find the immutable 24-character YouTube Channel ID for any user handle or vanity URL.
                  </p>
                </div>
                <div className="pt-4 flex items-center text-sm font-medium text-cyan-400 group-hover:translate-x-1 transition-transform">
                  Extract Channel ID <ArrowRight className="w-4 h-4 ml-1" />
                </div>
              </Link>

              <Link
                href="/deleted-video-finder"
                className="group bg-zinc-900/50 border border-zinc-800 hover:border-red-500/50 rounded-2xl p-6 transition-all duration-200 flex flex-col justify-between"
              >
                <div className="space-y-3">
                  <div className="p-3 bg-red-500/10 text-red-400 rounded-xl w-fit group-hover:scale-110 transition-transform">
                    <Clock className="w-6 h-6" />
                  </div>
                  <h3 className="text-lg font-bold text-zinc-100 group-hover:text-red-400 transition-colors">
                    Deleted Video Finder
                  </h3>
                  <p className="text-sm text-zinc-400">
                    Recover vanished or deleted YouTube videos using Wayback Machine snapshot archives.
                  </p>
                </div>
                <div className="pt-4 flex items-center text-sm font-medium text-red-400 group-hover:translate-x-1 transition-transform">
                  Find Deleted Videos <ArrowRight className="w-4 h-4 ml-1" />
                </div>
              </Link>

              <Link
                href="/private-video-checker"
                className="group bg-zinc-900/50 border border-zinc-800 hover:border-purple-500/50 rounded-2xl p-6 transition-all duration-200 flex flex-col justify-between"
              >
                <div className="space-y-3">
                  <div className="p-3 bg-purple-500/10 text-purple-400 rounded-xl w-fit group-hover:scale-110 transition-transform">
                    <ShieldAlert className="w-6 h-6" />
                  </div>
                  <h3 className="text-lg font-bold text-zinc-100 group-hover:text-purple-400 transition-colors">
                    Private Video Checker
                  </h3>
                  <p className="text-sm text-zinc-400">
                    Instantly check if a YouTube video is private, public, or unlisted without logging into Google.
                  </p>
                </div>
                <div className="pt-4 flex items-center text-sm font-medium text-purple-400 group-hover:translate-x-1 transition-transform">
                  Check Video Status <ArrowRight className="w-4 h-4 ml-1" />
                </div>
              </Link>
            </div>
          </section>

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