"use client";

import React, { useState } from 'react';
import { 
  PlaySquare, AlertTriangle, CheckCircle, Search, ShieldAlert, Lock, Unlock,
  ShieldCheck, Eye, EyeOff, Globe, Share2, HelpCircle, Sparkles, ArrowRight, 
  CheckCircle2, ChevronDown, RefreshCw, Zap, Compass, FileText, Database, 
  History, Users, Laptop
} from 'lucide-react';
import Link from 'next/link';

export default function PrivateVideoChecker() {
  const [url, setUrl] = useState('');
  const [loading, setLoading] = useState(false);
  const [result, setResult] = useState<{ isPrivate?: boolean; title?: string; error?: string } | null>(null);
  const [openFaq, setOpenFaq] = useState<number | null>(null);

  const checkVideo = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!url) return;
    
    setLoading(true);
    setResult(null);
    try {
      const res = await fetch('/api/private-video', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ url }),
      });
      const data = await res.json();
      setResult(data);
    } catch (error) {
      setResult({ error: 'An unexpected error occurred while checking video availability.' });
    } finally {
      setLoading(false);
    }
  };

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

  const jsonLd = {
    "@context": "https://schema.org",
    "@graph": [
      {
        "@type": "WebApplication",
        "name": "YouTube Private Video Checker",
        "url": "https://yttoolkits.site/private-video-checker",
        "description": "Instantly verify if a YouTube video is private, public, unlisted, or removed without needing to log in. Analyze YouTube video privacy parameters with zero tracking.",
        "applicationCategory": "UtilityApplication",
        "operatingSystem": "All",
        "offers": {
          "@type": "Offer",
          "price": "0",
          "priceCurrency": "USD"
        }
      },
      {
        "@type": "FAQPage",
        "mainEntity": [
          {
            "@type": "Question",
            "name": "Can anyone watch a private YouTube video without an explicit invitation?",
            "acceptedAnswer": {
              "@type": "Answer",
              "text": "No. Private YouTube videos are protected by server-side authentication protocols on Google's infrastructure. Only the original uploader and up to 50 specific Google accounts invited by email can access the stream. There are no legitimate tools, software scripts, or browser extensions that can bypass YouTube's authentication servers."
            }
          },
          {
            "@type": "Question",
            "name": "What is the difference between an Unlisted video and a Private video?",
            "acceptedAnswer": {
              "@type": "Answer",
              "text": "An Unlisted video does not appear in search results, subscriber feeds, or channel pages, but anyone with the direct URL can watch and share it without signing in. A Private video requires the viewer to be logged into a specific invited Google account; uninvited users with the link are met with a permission error."
            }
          },
          {
            "@type": "Question",
            "name": "How does this tool check video status without requiring me to sign in?",
            "acceptedAnswer": {
              "@type": "Answer",
              "text": "Our Private Video Checker sends an automated server request to YouTube's public metadata endpoints. By analyzing the returned HTTP response codes, player status objects, and error flags (such as UNPLAYABLE or LOGIN_REQUIRED), our system identifies whether the video is private, public, unlisted, or non-existent."
            }
          },
          {
            "@type": "Question",
            "name": "Will the YouTube channel creator know that I checked their video status?",
            "acceptedAnswer": {
              "@type": "Answer",
              "text": "No. The inspection process is 100% anonymous. YouTube does not notify video creators or track viewer identity during public endpoint availability handshakes."
            }
          },
          {
            "@type": "Question",
            "name": "Why did a video in my playlist suddenly become private?",
            "acceptedAnswer": {
              "@type": "Answer",
              "text": "Creators routinely change video privacy settings when updating sponsorships, re-editing content, managing copyright warnings, preparing for a delayed launch, or retiring older portfolio clips. In 2021, YouTube also automatically converted older unlisted videos uploaded prior to 2017 to private unless the uploader opted out."
            }
          },
          {
            "@type": "Question",
            "name": "Can private YouTube videos be indexed by Google Search?",
            "acceptedAnswer": {
              "@type": "Answer",
              "text": "No. Private videos cannot be crawled or indexed by Google, Bing, or any search engine spiders. Because the player requires authenticated session credentials, crawlers encounter a 403 or unavailable barrier and drop the URL from index records."
            }
          },
          {
            "@type": "Question",
            "name": "Can I download a private video if I am invited to view it?",
            "acceptedAnswer": {
              "@type": "Answer",
              "text": "Standard YouTube downloaders cannot access private videos because external downloader servers do not possess your authenticated Google session cookies. However, creators themselves can download their own original MP4 files directly through the YouTube Studio dashboard."
            }
          },
          {
            "@type": "Question",
            "name": "How many accounts can a creator invite to watch a private video?",
            "acceptedAnswer": {
              "@type": "Answer",
              "text": "YouTube currently allows creators to share a private video with up to 50 distinct Google account email addresses. Each invited viewer must be signed in with that exact email address to load the video player."
            }
          },
          {
            "@type": "Question",
            "name": "What is the difference between a private video and an age-restricted video?",
            "acceptedAnswer": {
              "@type": "Answer",
              "text": "An age-restricted video is public but requires the viewer to verify they are 18 or older by logging into their Google account. A private video is restricted strictly to designated invited email addresses regardless of age verification."
            }
          },
          {
            "@type": "Question",
            "name": "Can a private video be viewed using historical web archives?",
            "acceptedAnswer": {
              "@type": "Answer",
              "text": "If the video was originally uploaded as Public and crawled by the Wayback Machine before being switched to Private, historical snapshots may preserve the video metadata, titles, descriptions, and occasionally playback. You can check historical snapshots using our Private YouTube Viewer tool."
            }
          }
        ]
      }
    ]
  };

  const faqs = [
    {
      q: "Can anyone watch a private YouTube video without an explicit invitation?",
      a: "No. Private YouTube videos are protected by server-side authentication protocols on Google's infrastructure. Only the original uploader and up to 50 specific Google accounts invited by email can access the stream. There are no legitimate tools, software scripts, or browser extensions that can bypass YouTube's authentication servers."
    },
    {
      q: "What is the difference between an Unlisted video and a Private video?",
      a: "An Unlisted video does not appear in search results, subscriber feeds, or channel pages, but anyone with the direct URL can watch and share it without signing in. A Private video requires the viewer to be logged into a specific invited Google account; uninvited users with the link are met with a permission error."
    },
    {
      q: "How does this tool check video status without requiring me to sign in?",
      a: "Our Private Video Checker sends an automated server request to YouTube's public metadata endpoints. By analyzing the returned HTTP response codes, player status objects, and error flags (such as UNPLAYABLE or LOGIN_REQUIRED), our system identifies whether the video is private, public, unlisted, or non-existent."
    },
    {
      q: "Will the YouTube channel creator know that I checked their video status?",
      a: "No. The inspection process is 100% anonymous. YouTube does not notify video creators or track viewer identity during public endpoint availability handshakes."
    },
    {
      q: "Why did a video in my playlist suddenly become private?",
      a: "Creators routinely change video privacy settings when updating sponsorships, re-editing content, managing copyright warnings, preparing for a delayed launch, or retiring older portfolio clips. In 2021, YouTube also automatically converted older unlisted videos uploaded prior to 2017 to private unless the uploader opted out."
    },
    {
      q: "Can private YouTube videos be indexed by Google Search?",
      a: "No. Private videos cannot be crawled or indexed by Google, Bing, or any search engine spiders. Because the player requires authenticated session credentials, crawlers encounter a 403 or unavailable barrier and drop the URL from index records."
    },
    {
      q: "Can I download a private video if I am invited to view it?",
      a: "Standard YouTube downloaders cannot access private videos because external downloader servers do not possess your authenticated Google session cookies. However, creators themselves can download their own original MP4 files directly through the YouTube Studio dashboard."
    },
    {
      q: "How many accounts can a creator invite to watch a private video?",
      a: "YouTube currently allows creators to share a private video with up to 50 distinct Google account email addresses. Each invited viewer must be signed in with that exact email address to load the video player."
    },
    {
      q: "What is the difference between a private video and an age-restricted video?",
      a: "An age-restricted video is public but requires the viewer to verify they are 18 or older by logging into their Google account. A private video is restricted strictly to designated invited email addresses regardless of age verification."
    },
    {
      q: "Can a private video be viewed using historical web archives?",
      a: "If the video was originally uploaded as Public and crawled by the Wayback Machine before being switched to Private, historical snapshots may preserve the video metadata, titles, descriptions, and occasionally playback. You can check historical snapshots using our Private YouTube Viewer tool."
    }
  ];

  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-red-500/10 border border-red-500/20 text-xs sm:text-sm text-red-400 font-medium">
            <Sparkles className="w-4 h-4" />
            Privacy Verification & Link Health Diagnostics
          </div>
          <h1 className="text-3xl md:text-5xl font-extrabold text-white flex items-center justify-center gap-3">
            <ShieldAlert className="w-10 h-10 md:w-12 md:h-12 text-red-500" />
            Private Video Checker
          </h1>
          <p className="text-lg text-zinc-400 max-w-2xl mx-auto leading-relaxed">
            Instantly check if a YouTube video is private, public, unlisted, or deleted. Verify video visibility status safely without signing into your Google account.
          </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={checkVideo} className="space-y-6">
            <div>
              <label htmlFor="url" className="block text-sm font-medium text-zinc-300 mb-2">
                YouTube Video URL or Video ID
              </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-red-500/50 focus:ring-2 focus:ring-red-500/20 transition-all"
                  placeholder="https://www.youtube.com/watch?v=..."
                  required
                />
              </div>
              <p className="text-xs text-zinc-500 mt-2">
                Enter any valid YouTube video link, shortlink, embed link, or 11-digit video identifier.
              </p>
            </div>
            <button
              type="submit"
              disabled={loading}
              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-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 disabled:opacity-50 disabled:cursor-not-allowed transition-colors shadow-lg shadow-red-600/20"
            >
              {loading ? (
                <span className="flex items-center gap-2">
                  <div className="w-5 h-5 border-2 border-white/30 border-t-white rounded-full animate-spin"></div>
                  Inspecting Video Permissions...
                </span>
              ) : (
                <span className="flex items-center gap-2">
                  <Search className="w-5 h-5" />
                  Check Video Status
                </span>
              )}
            </button>
          </form>

          {/* Results section */}
          {result && (
            <div className="mt-8 pt-8 border-t border-zinc-800">
              {result.error ? (
                <div className="bg-red-500/10 border border-red-500/20 rounded-2xl p-6 text-center">
                  <AlertTriangle className="w-12 h-12 text-red-500 mx-auto mb-3" />
                  <h3 className="text-xl font-bold text-red-400 mb-2">Error Checking Video</h3>
                  <p className="text-red-300/80">{result.error}</p>
                </div>
              ) : (
                <div className="space-y-6">
                  {result.isPrivate ? (
                    <div className="bg-red-500/10 border border-red-500/20 rounded-2xl p-6 text-center space-y-4">
                      <div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-red-500/20 mb-2">
                        <Lock className="w-8 h-8 text-red-500" />
                      </div>
                      <div>
                        <h3 className="text-2xl font-bold text-red-400">Private Video Detected</h3>
                        <p className="text-zinc-400 mt-2 max-w-md mx-auto">
                          This video is set to Private. It can only be viewed by the creator and invited Google accounts.
                        </p>
                      </div>
                      <div className="pt-2">
                        <Link
                          href={`/private-youtube-viewer`}
                          className="inline-flex items-center gap-2 px-5 py-2.5 bg-zinc-800 hover:bg-zinc-700 text-white rounded-xl text-sm font-medium transition-colors border border-zinc-700"
                        >
                          Check Historical Web Archives
                          <ArrowRight className="w-4 h-4" />
                        </Link>
                      </div>
                    </div>
                  ) : (
                    <div className="bg-green-500/10 border border-green-500/20 rounded-2xl p-6 text-center space-y-4">
                      <div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-green-500/20 mb-2">
                        <Unlock className="w-8 h-8 text-green-500" />
                      </div>
                      <div>
                        <h3 className="text-2xl font-bold text-green-400">Public or Unlisted Video</h3>
                        <p className="text-zinc-400 mt-2">This video is currently accessible and available to watch.</p>
                      </div>
                      {result.title && (
                        <div className="mt-4 p-4 bg-zinc-950 rounded-xl border border-zinc-800 text-left">
                          <p className="text-xs text-zinc-500 mb-1 uppercase tracking-wider font-semibold">Verified Title</p>
                          <p className="font-medium text-zinc-200 line-clamp-2">{result.title}</p>
                        </div>
                      )}
                    </div>
                  )}
                </div>
              )}
            </div>
          )}
        </div>

        {/* MASSIVE SEO CONTENT SECTION */}
        <div className="space-y-16 pt-8 text-zinc-300">
          
          {/* Section 1: What is YouTube Private Video Checker? */}
          <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-red-500 flex-shrink-0" />
              What is YouTube Private Video Checker?
            </h2>
            <div className="prose prose-invert max-w-none text-zinc-400 leading-relaxed space-y-4">
              <p>
                The YouTube Private Video Checker is a precision diagnostic tool built for content creators, digital marketers, researchers, and playlist curators who need to instantly verify the accessibility and permission status of YouTube URLs. When browsing playlists, bookmark libraries, client deliverables, or reference archives, few things disrupt workflow more than encountering a generic black screen with the message <strong className="text-zinc-200">"This video is private"</strong>.
              </p>
              <p>
                In standard web browsers, clicking a private link while signed into your personal Google account can produce misleading or ambiguous results. Sometimes videos appear unavailable due to regional geoblocking, age-gate restrictions, account suspension, or community guideline strikes. Our tool cuts through ambiguity by querying YouTube's authoritative endpoint directly. Without requiring you to sign in, share browser cookies, or authenticate with Google, our system conducts a headless inspection and identifies the exact visibility state of the video.
              </p>
              <p>
                Whether you manage extensive client video audits, monitor competitor video retirements, or maintain link integrity across blogs and educational LMS platforms, the Private Video Checker gives you clear, immediate answers. It helps you quickly distinguish between temporary private drafts, unlisted review links, and fully deleted media—saving countless hours of manual troubleshooting.
              </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-red-500 flex-shrink-0" />
              How to Use Private Video Checker - Step by Step Guide
            </h2>
            <p className="text-zinc-400 leading-relaxed">
              Verifying whether a video is private, unlisted, or active takes just seconds. Follow this straightforward four-step guide to run diagnostic audits on any YouTube URL:
            </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-red-500/20 text-red-400 font-bold flex items-center justify-center text-lg">
                  1
                </div>
                <h3 className="text-xl font-bold text-zinc-200">Copy the Questionable YouTube Link</h3>
                <p className="text-sm text-zinc-400 leading-relaxed">
                  Navigate to your playlist, shared document, email thread, or browser bookmark containing the video in question. Copy the entire URL (e.g., <code className="text-red-400 bg-zinc-950 px-1 py-0.5 rounded">https://www.youtube.com/watch?v=VIDEO_ID</code>) or simply copy the isolated 11-character video ID.
                </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-red-500/20 text-red-400 font-bold flex items-center justify-center text-lg">
                  2
                </div>
                <h3 className="text-xl font-bold text-zinc-200">Paste the URL into Our Diagnostic Field</h3>
                <p className="text-sm text-zinc-400 leading-relaxed">
                  Paste the link into the input box above. Our backend engine automatically cleans unnecessary tracking query strings (such as <code className="text-zinc-300">?si=</code>, <code className="text-zinc-300">&feature=</code>, or playlist indexes) so you test the exact standalone 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-red-500/20 text-red-400 font-bold flex items-center justify-center text-lg">
                  3
                </div>
                <h3 className="text-xl font-bold text-zinc-200">Trigger the Status Inspection</h3>
                <p className="text-sm text-zinc-400 leading-relaxed">
                  Click the <strong className="text-zinc-200">Check Video Status</strong> button. Our system initiates a secure server-to-server inquiry against YouTube's verification endpoints to test playback rights without caching your personal identity.
                </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-red-500/20 text-red-400 font-bold flex items-center justify-center text-lg">
                  4
                </div>
                <h3 className="text-xl font-bold text-zinc-200">Interpret Results & Explore Next Steps</h3>
                <p className="text-sm text-zinc-400 leading-relaxed">
                  If the video is public or unlisted, you will receive confirmation alongside the confirmed video title. If it is marked private, you can immediately check whether an archived version was preserved using our companion <Link href="/private-youtube-viewer" className="text-red-400 hover:underline">Private YouTube Viewer</Link> or <Link href="/deleted-video-finder" className="text-red-400 hover:underline">Deleted Video Finder</Link>.
                </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-red-500 flex-shrink-0" />
              Key Features of Our Private Video Checker
            </h2>
            <p className="text-zinc-400 leading-relaxed">
              Designed for speed, reliability, and precision, our privacy detection suite provides essential capabilities for digital media operators:
            </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-red-500/10 text-red-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">
                  You never need to log in, link your Google account, or install intrusive third-party browser add-ons. Tests are executed via isolated server pings.
                </p>
              </div>

              <div className="bg-zinc-900/50 border border-zinc-800 rounded-2xl p-6 space-y-3">
                <div className="p-3 bg-red-500/10 text-red-400 rounded-xl w-fit">
                  <EyeOff className="w-6 h-6" />
                </div>
                <h3 className="text-lg font-bold text-zinc-100">100% Anonymous Checking</h3>
                <p className="text-sm text-zinc-400 leading-relaxed">
                  Channel owners receive zero alerts, notifications, or analytic breadcrumbs when you verify the privacy status of their videos.
                </p>
              </div>

              <div className="bg-zinc-900/50 border border-zinc-800 rounded-2xl p-6 space-y-3">
                <div className="p-3 bg-red-500/10 text-red-400 rounded-xl w-fit">
                  <RefreshCw className="w-6 h-6" />
                </div>
                <h3 className="text-lg font-bold text-zinc-100">Intelligent URL Support</h3>
                <p className="text-sm text-zinc-400 leading-relaxed">
                  Accepts standard watch links, mobile shortlinks (youtu.be), YouTube Shorts, embed codes, and isolated 11-digit video identifiers without formatting 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-red-500/10 text-red-400 rounded-xl w-fit">
                  <FileText className="w-6 h-6" />
                </div>
                <h3 className="text-lg font-bold text-zinc-100">Title & Metadata Verification</h3>
                <p className="text-sm text-zinc-400 leading-relaxed">
                  When a video is confirmed public or unlisted, our tool extracts and displays the active video title to verify link accuracy.
                </p>
              </div>

              <div className="bg-zinc-900/50 border border-zinc-800 rounded-2xl p-6 space-y-3">
                <div className="p-3 bg-red-500/10 text-red-400 rounded-xl w-fit">
                  <Database className="w-6 h-6" />
                </div>
                <h3 className="text-lg font-bold text-zinc-100">Distinguishes Errors Accurately</h3>
                <p className="text-sm text-zinc-400 leading-relaxed">
                  Differentiates between authentic private video states, completely deleted URLs, and network connectivity failures.
                </p>
              </div>

              <div className="bg-zinc-900/50 border border-zinc-800 rounded-2xl p-6 space-y-3">
                <div className="p-3 bg-red-500/10 text-red-400 rounded-xl w-fit">
                  <Globe className="w-6 h-6" />
                </div>
                <h3 className="text-lg font-bold text-zinc-100">Free & Uncapped Audits</h3>
                <p className="text-sm text-zinc-400 leading-relaxed">
                  Run as many checks as your production workflow demands without subscription walls, captcha walls, or credit limits.
                </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-red-500 flex-shrink-0" />
              Why Choose YTToolkits Private Video Checker?
            </h2>
            <div className="prose prose-invert max-w-none text-zinc-400 leading-relaxed space-y-4">
              <p>
                When a YouTube video fails to play in your browser, diagnosing the root cause manually is frustrating. If you are signed into an account with specific organizational controls or regional network rules, your personal browser session can mask the true visibility status of the video.
              </p>
              <p>
                YTToolkits acts as an unbiased diagnostic evaluator. Our system isolates network requests and tests video endpoints directly, providing transparent status diagnostics without session bias.
              </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">Verification Dimension</th>
                    <th className="py-4 px-6 border-b border-zinc-800 text-red-400 font-bold">YTToolkits Checker</th>
                    <th className="py-4 px-6 border-b border-zinc-800">Incognito Browser Tab</th>
                    <th className="py-4 px-6 border-b border-zinc-800">Generic Link Checkers</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">YouTube Player API Integration</td>
                    <td className="py-4 px-6 text-green-400 font-semibold">Native & Tailored</td>
                    <td className="py-4 px-6 text-zinc-400">Loads Heavy Web Page</td>
                    <td className="py-4 px-6 text-red-400">Generic HTTP 200 (Fails)</td>
                  </tr>
                  <tr className="hover:bg-zinc-900/30">
                    <td className="py-4 px-6 font-medium text-zinc-200">Execution Speed</td>
                    <td className="py-4 px-6 text-green-400 font-semibold">&lt; 1 Second</td>
                    <td className="py-4 px-6 text-zinc-400">5-10 Seconds</td>
                    <td className="py-4 px-6 text-zinc-400">Variable</td>
                  </tr>
                  <tr className="hover:bg-zinc-900/30">
                    <td className="py-4 px-6 font-medium text-zinc-200">Data & Bandwidth Consumption</td>
                    <td className="py-4 px-6 text-green-400 font-semibold">Minimal (Lightweight JSON)</td>
                    <td className="py-4 px-6 text-red-400">Heavy (Loads JS/CSS/Ads)</td>
                    <td className="py-4 px-6 text-zinc-400">Moderate</td>
                  </tr>
                  <tr className="hover:bg-zinc-900/30">
                    <td className="py-4 px-6 font-medium text-zinc-200">Archival Handoff</td>
                    <td className="py-4 px-6 text-green-400 font-semibold">Integrated with Archive Tools</td>
                    <td className="py-4 px-6 text-red-400">None</td>
                    <td className="py-4 px-6 text-red-400">None</td>
                  </tr>
                  <tr className="hover:bg-zinc-900/30">
                    <td className="py-4 px-6 font-medium text-zinc-200">Account Safety & Privacy</td>
                    <td className="py-4 px-6 text-green-400 font-semibold">No Cookies Transmitted</td>
                    <td className="py-4 px-6 text-zinc-400">IP Still Exposed</td>
                    <td className="py-4 px-6 text-zinc-400">Often Sells Data</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </section>

          {/* Section 5: Educational Section - Privacy Breakdown */}
          <section className="space-y-6">
            <h2 className="text-2xl sm:text-3xl font-bold text-zinc-100 flex items-center gap-3">
              <Lock className="w-7 h-7 text-red-500 flex-shrink-0" />
              Understanding YouTube Privacy Settings: Public vs Private vs Unlisted
            </h2>
            <div className="prose prose-invert max-w-none text-zinc-400 leading-relaxed space-y-4">
              <p>
                YouTube provides creators with three core visibility settings for every uploaded video. Understanding how these permissions operate under the hood is critical for troubleshooting missing content, managing marketing assets, and protecting confidential video productions.
              </p>
            </div>

            <div className="grid gap-6 md:grid-cols-3 pt-2">
              <div className="bg-zinc-900/50 border border-zinc-800 rounded-2xl p-6 space-y-4">
                <div className="p-3 bg-green-500/10 text-green-400 rounded-xl w-fit">
                  <Globe className="w-6 h-6" />
                </div>
                <h3 className="text-xl font-bold text-zinc-100">Public Videos</h3>
                <ul className="text-sm text-zinc-400 space-y-2 leading-relaxed">
                  <li>• <strong className="text-zinc-200">Audience:</strong> Accessible to anyone across the globe.</li>
                  <li>• <strong className="text-zinc-200">Discovery:</strong> Appears in YouTube search, Home feed, Recommended sidebar, and external search engines like Google.</li>
                  <li>• <strong className="text-zinc-200">Subscribers:</strong> Notifications and feed entries are broadcast to all channel subscribers.</li>
                  <li>• <strong className="text-zinc-200">Embedding:</strong> Can be embedded across any website or blog.</li>
                </ul>
              </div>

              <div className="bg-zinc-900/50 border border-zinc-800 rounded-2xl p-6 space-y-4">
                <div className="p-3 bg-blue-500/10 text-blue-400 rounded-xl w-fit">
                  <Share2 className="w-6 h-6" />
                </div>
                <h3 className="text-xl font-bold text-zinc-100">Unlisted Videos</h3>
                <ul className="text-sm text-zinc-400 space-y-2 leading-relaxed">
                  <li>• <strong className="text-zinc-200">Audience:</strong> Anyone possessing the exact direct link.</li>
                  <li>• <strong className="text-zinc-200">Discovery:</strong> Hidden from YouTube search, subscriber feeds, and channel tabs.</li>
                  <li>• <strong className="text-zinc-200">Authentication:</strong> Viewers do not need a Google account or login to watch.</li>
                  <li>• <strong className="text-zinc-200">Sharing:</strong> Anyone with the link can freely forward it to third parties or embed it in private portals.</li>
                </ul>
              </div>

              <div className="bg-zinc-900/50 border border-zinc-800 rounded-2xl p-6 space-y-4">
                <div className="p-3 bg-red-500/10 text-red-400 rounded-xl w-fit">
                  <Lock className="w-6 h-6" />
                </div>
                <h3 className="text-xl font-bold text-zinc-100">Private Videos</h3>
                <ul className="text-sm text-zinc-400 space-y-2 leading-relaxed">
                  <li>• <strong className="text-zinc-200">Audience:</strong> Strictly the uploader and up to 50 invited Google emails.</li>
                  <li>• <strong className="text-zinc-200">Discovery:</strong> Completely invisible to search bots, crawlers, and algorithmic engines.</li>
                  <li>• <strong className="text-zinc-200">Authentication:</strong> Strict server-side verification; uninvited users receive a lock banner.</li>
                  <li>• <strong className="text-zinc-200">Sharing:</strong> Cannot be shared via URL forward or public embed.</li>
                </ul>
              </div>
            </div>
          </section>

          {/* Section 6: How to Legally & Safely Access Restricted Videos */}
          <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">
              <Users className="w-7 h-7 text-red-500 flex-shrink-0" />
              How to Legally & Safely Access Restricted or Private YouTube Videos
            </h2>
            <div className="prose prose-invert max-w-none text-zinc-400 leading-relaxed space-y-4">
              <p>
                A quick search across the internet reveals dozens of websites claiming to offer "Private Video Viewers", "YouTube Unlockers", or "Password Bypassers". It is vital to understand that <strong className="text-red-400">every single website promising to bypass YouTube's private video security without an invitation is a scam</strong>.
              </p>
              <p>
                YouTube's media streams are encrypted and delivered through tokenized content delivery networks. When a video is designated Private, the streaming CDN manifest file is never generated for unauthorized clients. Any site demanding you complete surveys, install executable files, or input your Google account credentials is attempting phishing or malware delivery.
              </p>
              <h3 className="text-xl font-bold text-zinc-200 pt-2">The Only Legitimate Methods for Viewing Private Content:</h3>
              <ol className="list-decimal pl-6 space-y-3 text-zinc-400">
                <li>
                  <strong className="text-zinc-200">Direct Creator Invitation:</strong> Contact the video uploader and request that they add your specific Google email address under the video's "Share Privately" settings inside YouTube Studio. Once added, you will receive an official email invitation from Google.
                </li>
                <li>
                  <strong className="text-zinc-200">Google Workspace Domain Sharing:</strong> If you are working within a corporate or educational Google Workspace environment, creators can share private videos across the entire organization domain (e.g., everyone @yourcompany.com).
                </li>
                <li>
                  <strong className="text-zinc-200">Historical Web Archives (If Previously Public):</strong> If a video was initially published as Public before being made private, historical web crawlers may have captured the page. You can use our <Link href="/private-youtube-viewer" className="text-red-400 hover:underline">Private YouTube Viewer</Link> to inspect archived snapshots on the Wayback Machine.
                </li>
              </ol>
            </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-red-500 flex-shrink-0" />
                Frequently Asked Questions
              </h2>
              <p className="text-zinc-400">
                Detailed answers to key questions regarding YouTube video privacy controls, unlisted video behavior, and verification diagnostics.
              </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-red-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-red-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-red-500 flex-shrink-0" />
                Related YouTube Creator & Diagnostic Tools
              </h2>
              <p className="text-zinc-400">
                Explore our full lineup of free, browser-based utilities designed to accelerate YouTube workflow and media management:
              </p>
            </div>

            <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3 pt-2">
              <Link
                href="/private-youtube-viewer"
                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">
                    <Lock className="w-6 h-6" />
                  </div>
                  <h3 className="text-lg font-bold text-zinc-100 group-hover:text-purple-400 transition-colors">
                    Private YouTube Viewer
                  </h3>
                  <p className="text-sm text-zinc-400">
                    Search historical web archives to retrieve metadata, titles, and past public snapshots of private videos.
                  </p>
                </div>
                <div className="pt-4 flex items-center text-sm font-medium text-purple-400 group-hover:translate-x-1 transition-transform">
                  View Private Archives <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">
                    <History 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">
                    Find and restore vanished YouTube videos using the Internet Archive's Wayback Machine repository.
                  </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="/channel-history-viewer"
                className="group bg-zinc-900/50 border border-zinc-800 hover:border-blue-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-blue-500/10 text-blue-400 rounded-xl w-fit group-hover:scale-110 transition-transform">
                    <Laptop className="w-6 h-6" />
                  </div>
                  <h3 className="text-lg font-bold text-zinc-100 group-hover:text-blue-400 transition-colors">
                    Channel History Viewer
                  </h3>
                  <p className="text-sm text-zinc-400">
                    Step back in time to inspect historical YouTube channel layouts, banners, branding evolutions, and milestone changes.
                  </p>
                </div>
                <div className="pt-4 flex items-center text-sm font-medium text-blue-400 group-hover:translate-x-1 transition-transform">
                  Inspect Channel Timeline <ArrowRight className="w-4 h-4 ml-1" />
                </div>
              </Link>

              <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">
                    <PlaySquare 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 active public and unlisted videos in full 1080p, 4K resolutions or convert directly to MP3.
                  </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 public 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="/comments-viewer"
                className="group bg-zinc-900/50 border border-zinc-800 hover:border-emerald-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-emerald-500/10 text-emerald-400 rounded-xl w-fit group-hover:scale-110 transition-transform">
                    <Share2 className="w-6 h-6" />
                  </div>
                  <h3 className="text-lg font-bold text-zinc-100 group-hover:text-emerald-400 transition-colors">
                    Comments Viewer
                  </h3>
                  <p className="text-sm text-zinc-400">
                    Analyze community engagement, comment sentiments, feedback trends, and viewer discussion patterns.
                  </p>
                </div>
                <div className="pt-4 flex items-center text-sm font-medium text-emerald-400 group-hover:translate-x-1 transition-transform">
                  Analyze Comments <ArrowRight className="w-4 h-4 ml-1" />
                </div>
              </Link>
            </div>
          </section>

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