"use client";

import React, { useState } from 'react';
import { 
  PlaySquare, Search, AlertCircle, Lock, Unlock, ShieldAlert, ExternalLink,
  Clock, ShieldCheck, Database, HelpCircle, FileText, ArrowRight, Sparkles, 
  Globe, RefreshCw, Zap, Compass, CheckCircle2, ChevronDown, Layers, Video, Archive, History
} from 'lucide-react';
import Link from 'next/link';

export default function PrivateYouTubeViewerPage() {
  const [videoUrl, setVideoUrl] = useState('');
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState('');
  const [result, setResult] = useState<{ available: boolean; snapshotUrl?: string; timestamp?: string } | null>(null);
  const [openFaq, setOpenFaq] = useState<number | null>(null);

  const extractVideoId = (url: string) => {
    const regExp = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=)([^#\&\?]*).*/;
    const match = url.match(regExp);
    return match && match[2].length === 11 ? match[2] : null;
  };

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

    const videoId = extractVideoId(videoUrl);
    
    if (!videoId) {
      setError('Please enter a valid YouTube video URL or 11-character video ID');
      return;
    }

    setLoading(true);

    try {
      const res = await fetch('/api/wayback-video', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ videoId }),
      });

      if (!res.ok) {
        throw new Error('Failed to fetch archive data');
      }

      const data = await res.json();
      setResult(data);
    } catch (err) {
      setError('An error occurred while searching the archive. Please try again later.');
    } finally {
      setLoading(false);
    }
  };

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

  const jsonLd = {
    "@context": "https://schema.org",
    "@graph": [
      {
        "@type": "WebApplication",
        "name": "Private YouTube Viewer & Archive Recovery",
        "url": "https://yttoolkits.site/private-youtube-viewer",
        "description": "Recover metadata, historical titles, descriptions, and view public archived snapshots of private YouTube videos using web archive intelligence.",
        "applicationCategory": "MultimediaApplication",
        "operatingSystem": "All",
        "offers": {
          "@type": "Offer",
          "price": "0",
          "priceCurrency": "USD"
        }
      },
      {
        "@type": "FAQPage",
        "mainEntity": [
          {
            "@type": "Question",
            "name": "Is it possible to view a video that was set to private immediately upon upload?",
            "acceptedAnswer": {
              "@type": "Answer",
              "text": "No. If a creator uploaded a video as private and never changed its status to public or unlisted, external search crawlers and the Wayback Machine could never access the URL. Historical archival tools only work for videos that spent time as public or unlisted before being switched to private."
            }
          },
          {
            "@type": "Question",
            "name": "Does this tool hack, crack, or bypass YouTube's privacy security?",
            "acceptedAnswer": {
              "@type": "Answer",
              "text": "No. This tool does not penetrate YouTube's private servers, exploit authentication mechanisms, or bypass Google security credentials. It strictly queries open, legal public archival databases like the Internet Archive to determine whether a public record of the video was preserved prior to privatization."
            }
          },
          {
            "@type": "Question",
            "name": "What information can be recovered from an archived snapshot of a private video?",
            "acceptedAnswer": {
              "@type": "Answer",
              "text": "An archived snapshot frequently recovers the exact original video title, upload date, channel attribution, full description text, community comments, view counts, and thumbnail graphics. In some fortunate instances where crawlers downloaded the raw media container, video playback is also restored."
            }
          },
          {
            "@type": "Question",
            "name": "Why does an archived video page load, but the player won't start playback?",
            "acceptedAnswer": {
              "@type": "Answer",
              "text": "Web archival crawlers prioritize HTML, stylesheets, and text over heavy multi-megabyte video streams to conserve storage. When an archive is discovered, the page DOM is preserved, but the underlying MP4 stream may not have been saved. You can still use the recovered title to search for mirrors on other platforms."
            }
          },
          {
            "@type": "Question",
            "name": "How does the Wayback Machine decide which YouTube videos to archive?",
            "acceptedAnswer": {
              "@type": "Answer",
              "text": "The Internet Archive discovers videos through automated web crawlers scanning links across Twitter/X, Reddit, Wikipedia, blogs, news sites, and through direct submissions by web users using the 'Save Page Now' feature on web.archive.org."
            }
          },
          {
            "@type": "Question",
            "name": "Can creators request the removal of their archived videos from the Wayback Machine?",
            "acceptedAnswer": {
              "@type": "Answer",
              "text": "Yes. The Internet Archive honors legitimate DMCA takedown requests and creator exclusion requests sent to info@archive.org. If a creator explicitly requests the removal of their URL history, the Internet Archive will exclude those snapshots from public search results."
            }
          },
          {
            "@type": "Question",
            "name": "What is the difference between this tool and the Private Video Checker?",
            "acceptedAnswer": {
              "@type": "Answer",
              "text": "The Private Video Checker analyzes YouTube's live API to verify whether a video is currently public, private, or unlisted. The Private YouTube Viewer queries historical web archives to discover whether an older public snapshot of that privatized video was preserved."
            }
          },
          {
            "@type": "Question",
            "name": "Can I see comments and engagement metrics from when the video was public?",
            "acceptedAnswer": {
              "@type": "Answer",
              "text": "Yes! When an archived snapshot is retrieved, you can often read early audience reactions, comment threads, top comments, and view counts as they existed on the date the snapshot was taken."
            }
          },
          {
            "@type": "Question",
            "name": "Is there any risk to my Google account when using this tool?",
            "acceptedAnswer": {
              "@type": "Answer",
              "text": "Zero risk. You do not log in or connect your Google account to use our tool. Archival searches occur independently of your personal identity and browser session."
            }
          },
          {
            "@type": "Question",
            "name": "What should I do if no archive snapshot exists for my private video link?",
            "acceptedAnswer": {
              "@type": "Answer",
              "text": "If no snapshot exists, try searching the exact 11-character video ID in Google with quotes ('VIDEO_ID') to locate old forum threads, Reddit posts, or blogs that may have discussed the video or shared alternative mirror links."
            }
          }
        ]
      }
    ]
  };

  const faqs = [
    {
      q: "Is it possible to view a video that was set to private immediately upon upload?",
      a: "No. If a creator uploaded a video as private and never changed its status to public or unlisted, external search crawlers and the Wayback Machine could never access the URL. Historical archival tools only work for videos that spent time as public or unlisted before being switched to private."
    },
    {
      q: "Does this tool hack, crack, or bypass YouTube's privacy security?",
      a: "No. This tool does not penetrate YouTube's private servers, exploit authentication mechanisms, or bypass Google security credentials. It strictly queries open, legal public archival databases like the Internet Archive to determine whether a public record of the video was preserved prior to privatization."
    },
    {
      q: "What information can be recovered from an archived snapshot of a private video?",
      a: "An archived snapshot frequently recovers the exact original video title, upload date, channel attribution, full description text, community comments, view counts, and thumbnail graphics. In some fortunate instances where crawlers downloaded the raw media container, video playback is also restored."
    },
    {
      q: "Why does an archived video page load, but the player won't start playback?",
      a: "Web archival crawlers prioritize HTML, stylesheets, and text over heavy multi-megabyte video streams to conserve storage. When an archive is discovered, the page DOM is preserved, but the underlying MP4 stream may not have been saved. You can still use the recovered title to search for mirrors on other platforms."
    },
    {
      q: "How does the Wayback Machine decide which YouTube videos to archive?",
      a: "The Internet Archive discovers videos through automated web crawlers scanning links across Twitter/X, Reddit, Wikipedia, blogs, news sites, and through direct submissions by web users using the 'Save Page Now' feature on web.archive.org."
    },
    {
      q: "Can creators request the removal of their archived videos from the Wayback Machine?",
      a: "Yes. The Internet Archive honors legitimate DMCA takedown requests and creator exclusion requests sent to info@archive.org. If a creator explicitly requests the removal of their URL history, the Internet Archive will exclude those snapshots from public search results."
    },
    {
      q: "What is the difference between this tool and the Private Video Checker?",
      a: "The Private Video Checker analyzes YouTube's live API to verify whether a video is currently public, private, or unlisted. The Private YouTube Viewer queries historical web archives to discover whether an older public snapshot of that privatized video was preserved."
    },
    {
      q: "Can I see comments and engagement metrics from when the video was public?",
      a: "Yes! When an archived snapshot is retrieved, you can often read early audience reactions, comment threads, top comments, and view counts as they existed on the date the snapshot was taken."
    },
    {
      q: "Is there any risk to my Google account when using this tool?",
      a: "Zero risk. You do not log in or connect your Google account to use our tool. Archival searches occur independently of your personal identity and browser session."
    },
    {
      q: "What should I do if no archive snapshot exists for my private video link?",
      a: "If no snapshot exists, try searching the exact 11-character video ID in Google with quotes ('VIDEO_ID') to locate old forum threads, Reddit posts, or blogs that may have discussed the video or shared alternative mirror links."
    }
  ];

  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-purple-500/10 border border-purple-500/20 text-xs sm:text-sm text-purple-400 font-medium">
            <Sparkles className="w-4 h-4" />
            Historical Archive Intelligence & Metadata Retrieval
          </div>
          <h1 className="text-3xl md:text-5xl font-extrabold flex items-center justify-center gap-4 text-white">
            <Lock className="w-10 h-10 md:w-12 md:h-12 text-purple-500" />
            Private YouTube Viewer
          </h1>
          <p className="text-lg text-zinc-400 max-w-2xl mx-auto leading-relaxed">
            Recover lost metadata and inspect historical public versions of videos recently set to private.
            Discover if the Internet Archive captured a public snapshot when the video was openly accessible.
          </p>
        </div>

        {/* Search Tool Section */}
        <div className="bg-zinc-900/50 border border-zinc-800 rounded-3xl p-6 md:p-8 shadow-xl">
          <form onSubmit={handleSearch} className="space-y-6">
            <div className="space-y-2">
              <label htmlFor="videoUrl" className="block text-sm font-medium text-zinc-300">
                Private 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="videoUrl"
                  value={videoUrl}
                  onChange={(e) => setVideoUrl(e.target.value)}
                  placeholder="https://www.youtube.com/watch?v=..."
                  className="block w-full pl-10 pr-3 py-4 bg-zinc-950 border border-zinc-800 rounded-2xl focus:ring-2 focus:ring-purple-500/20 focus:border-purple-500/50 transition-colors text-zinc-100 placeholder-zinc-500"
                  required
                />
              </div>
              <p className="text-xs text-zinc-500">
                Paste any watch link, youtu.be shortlink, Shorts URL, or raw 11-digit video ID.
              </p>
            </div>

            <button
              type="submit"
              disabled={loading || !videoUrl}
              className="w-full flex items-center justify-center gap-2 bg-purple-600 hover:bg-purple-700 text-white py-4 px-8 rounded-2xl font-bold text-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed shadow-lg shadow-purple-600/20"
            >
              {loading ? (
                <>
                  <div className="animate-spin rounded-full h-5 w-5 border-b-2 border-white"></div>
                  Searching Historical Repositories...
                </>
              ) : (
                <>
                  <Unlock className="w-5 h-5" />
                  Attempt to Uncover Video Archive
                </>
              )}
            </button>
          </form>

          {/* Results Section */}
          {error && (
            <div className="mt-6 p-4 bg-red-500/10 border border-red-500/20 rounded-2xl flex items-start gap-3">
              <AlertCircle className="w-5 h-5 text-red-500 flex-shrink-0 mt-0.5" />
              <p className="text-red-400">{error}</p>
            </div>
          )}

          {result && (
            <div className={`mt-6 p-6 border rounded-2xl ${result.available ? 'bg-purple-500/10 border-purple-500/20' : 'bg-zinc-800/50 border-zinc-700'}`}>
              {result.available ? (
                <div className="space-y-4">
                  <div className="flex items-center gap-3">
                    <div className="bg-purple-500/20 p-2 rounded-full">
                      <Unlock className="w-6 h-6 text-purple-500" />
                    </div>
                    <div>
                      <h3 className="text-xl font-bold text-purple-400">Public Snapshot Discovered!</h3>
                      <p className="text-sm text-zinc-400">
                        Archived on: {result.timestamp?.substring(0, 4)}-{result.timestamp?.substring(4, 6)}-{result.timestamp?.substring(6, 8)}
                      </p>
                    </div>
                  </div>
                  <p className="text-sm text-zinc-300">
                    A public historical record was found in the Internet Archive. You can view the original page layout, read old descriptions, inspect comments, and check if video playback was preserved.
                  </p>
                  <a
                    href={result.snapshotUrl}
                    target="_blank"
                    rel="noopener noreferrer"
                    className="inline-flex items-center justify-center gap-2 w-full bg-zinc-800 hover:bg-zinc-700 text-white py-3 px-6 rounded-xl font-medium transition-colors border border-zinc-700"
                  >
                    View Archived Public Version
                    <ExternalLink className="w-4 h-4" />
                  </a>
                </div>
              ) : (
                <div className="flex flex-col items-center justify-center text-center py-6 space-y-3">
                  <ShieldAlert className="w-12 h-12 text-zinc-600" />
                  <h3 className="text-lg font-semibold text-zinc-300">Video Remains Private</h3>
                  <p className="text-zinc-500 max-w-sm">
                    No public historical snapshot was located. If the video was private from initial upload or was quickly locked, archival crawlers could not capture it. You can check current status using our <Link href="/private-video-checker" className="text-purple-400 hover:underline">Private Video Checker</Link>.
                  </p>
                </div>
              )}
            </div>
          )}
        </div>

        {/* MASSIVE SEO CONTENT SECTION */}
        <div className="space-y-16 pt-8 text-zinc-300">
          
          {/* Section 1: What is Private YouTube Viewer? */}
          <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">
              <Lock className="w-7 h-7 text-purple-500 flex-shrink-0" />
              What is Private YouTube Viewer?
            </h2>
            <div className="prose prose-invert max-w-none text-zinc-400 leading-relaxed space-y-4">
              <p>
                The Private YouTube Viewer is an archival research engine designed to investigate and retrieve historical public versions of YouTube videos that have subsequently been placed behind private access locks. Across the digital sphere, creators frequently adjust video visibility settings—switching previously viral, informative, or iconic videos from public viewing to private status for legal, brand, or personal reasons.
              </p>
              <p>
                When a user encounters the message <strong className="text-zinc-200">"This video is private"</strong> on YouTube, modern servers block all incoming video requests unless the viewer is logged into an authorized Google account approved by the uploader. However, if that video existed as "Public" or "Unlisted" for any substantial duration, there is a very high probability that automated internet preservation initiatives—such as the Internet Archive's Wayback Machine—crawled, indexed, and immortalized the webpage.
              </p>
              <p>
                Our tool serves as an intelligent bridge to these massive public archives. By extracting the canonical 11-character video hash from your URL and querying distributed archive indexes, we locate saved historical snapshots. This allows you to inspect the original video's title, description links, upload timestamps, comment threads, and in select cases, restored media streams. It transforms what appeared to be an inaccessible dead end into a valuable investigative opportunity.
              </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-purple-500 flex-shrink-0" />
              How to Use Private YouTube Viewer - Step by Step Guide
            </h2>
            <p className="text-zinc-400 leading-relaxed">
              Uncovering historical snapshots of locked media is simple and requires zero technical expertise. Follow these five steps to query archival repositories:
            </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-purple-500/20 text-purple-400 font-bold flex items-center justify-center text-lg">
                  1
                </div>
                <h3 className="text-xl font-bold text-zinc-200">Obtain the Video Link</h3>
                <p className="text-sm text-zinc-400 leading-relaxed">
                  Locate the URL of the private video from your browser history, playlist, saved document, or forum discussion. Make sure the URL contains the 11-character video ID (e.g., <code className="text-purple-400 bg-zinc-950 px-1 py-0.5 rounded">v=abcdefghijk</code>).
                </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-purple-500/20 text-purple-400 font-bold flex items-center justify-center text-lg">
                  2
                </div>
                <h3 className="text-xl font-bold text-zinc-200">Insert URL into the Search Field</h3>
                <p className="text-sm text-zinc-400 leading-relaxed">
                  Paste the address into our input box above. Our intelligent regex engine sanitizes unnecessary parameters, separating the fundamental video ID from playlist and referral variables.
                </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-purple-500/20 text-purple-400 font-bold flex items-center justify-center text-lg">
                  3
                </div>
                <h3 className="text-xl font-bold text-zinc-200">Initiate the Archival Scan</h3>
                <p className="text-sm text-zinc-400 leading-relaxed">
                  Click <strong className="text-zinc-200">Attempt to Uncover Video Archive</strong>. Our backend sends an asynchronous query to the Wayback Machine CDX server API, cross-referencing millions of stored snapshots.
                </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-purple-500/20 text-purple-400 font-bold flex items-center justify-center text-lg">
                  4
                </div>
                <h3 className="text-xl font-bold text-zinc-200">Review Historical Snapshot Data</h3>
                <p className="text-sm text-zinc-400 leading-relaxed">
                  If an archive exists, our tool presents the snapshot timestamp and a direct access portal. Click the link to view the preserved webpage rendered exactly as it appeared prior to privatization.
                </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-purple-500/20 text-purple-400 font-bold flex items-center justify-center text-lg">
                  5
                </div>
                <h3 className="text-xl font-bold text-zinc-200">Extract Metadata & Explore Mirrors</h3>
                <p className="text-sm text-zinc-400 leading-relaxed">
                  Extract the recovered title, description, and keywords to search for secondary mirrors across platforms like Vimeo, Dailymotion, or Archive.org. You can also explore the creator's upload timeline with our <Link href="/channel-history-viewer" className="text-purple-400 hover:underline">Channel History Viewer</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-purple-500 flex-shrink-0" />
              Key Features of Our Private YouTube Viewer
            </h2>
            <p className="text-zinc-400 leading-relaxed">
              Built on powerful archival lookup protocols, our viewer offers unmatched capabilities for historical media investigation:
            </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-purple-500/10 text-purple-400 rounded-xl w-fit">
                  <Database className="w-6 h-6" />
                </div>
                <h3 className="text-lg font-bold text-zinc-100">Deep Wayback API Scanning</h3>
                <p className="text-sm text-zinc-400 leading-relaxed">
                  Connects directly to the Internet Archive's CDX index clusters, scanning decades of web history in seconds without manual timeline navigation.
                </p>
              </div>

              <div className="bg-zinc-900/50 border border-zinc-800 rounded-2xl p-6 space-y-3">
                <div className="p-3 bg-purple-500/10 text-purple-400 rounded-xl w-fit">
                  <ShieldCheck className="w-6 h-6" />
                </div>
                <h3 className="text-lg font-bold text-zinc-100">100% Legal & Ethical</h3>
                <p className="text-sm text-zinc-400 leading-relaxed">
                  No hacking, cracking, or security bypasses. Relies solely on publicly archived historical data preserved by registered digital repositories.
                </p>
              </div>

              <div className="bg-zinc-900/50 border border-zinc-800 rounded-2xl p-6 space-y-3">
                <div className="p-3 bg-purple-500/10 text-purple-400 rounded-xl w-fit">
                  <RefreshCw className="w-6 h-6" />
                </div>
                <h3 className="text-lg font-bold text-zinc-100">Universal Link Parser</h3>
                <p className="text-sm text-zinc-400 leading-relaxed">
                  Handles full watch URLs, youtu.be shortlinks, embed codes, mobile links, Shorts URLs, and raw 11-digit video strings effortlessly.
                </p>
              </div>

              <div className="bg-zinc-900/50 border border-zinc-800 rounded-2xl p-6 space-y-3">
                <div className="p-3 bg-purple-500/10 text-purple-400 rounded-xl w-fit">
                  <FileText className="w-6 h-6" />
                </div>
                <h3 className="text-lg font-bold text-zinc-100">Rich Metadata Retrieval</h3>
                <p className="text-sm text-zinc-400 leading-relaxed">
                  Recovers valuable contextual information including original descriptions, publish dates, channel handles, and community comments.
                </p>
              </div>

              <div className="bg-zinc-900/50 border border-zinc-800 rounded-2xl p-6 space-y-3">
                <div className="p-3 bg-purple-500/10 text-purple-400 rounded-xl w-fit">
                  <Globe className="w-6 h-6" />
                </div>
                <h3 className="text-lg font-bold text-zinc-100">Zero Accounts or Downloads</h3>
                <p className="text-sm text-zinc-400 leading-relaxed">
                  Operates entirely in your web browser. No browser extensions, no Google account logins, and no software downloads required.
                </p>
              </div>

              <div className="bg-zinc-900/50 border border-zinc-800 rounded-2xl p-6 space-y-3">
                <div className="p-3 bg-purple-500/10 text-purple-400 rounded-xl w-fit">
                  <Layers className="w-6 h-6" />
                </div>
                <h3 className="text-lg font-bold text-zinc-100">Integrated Ecosystem</h3>
                <p className="text-sm text-zinc-400 leading-relaxed">
                  Direct synergy with our companion tools, including <Link href="/private-video-checker" className="text-purple-400 hover:underline">Private Video Checker</Link> and <Link href="/deleted-video-finder" className="text-purple-400 hover:underline">Deleted Video Finder</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-purple-500 flex-shrink-0" />
              Why Choose YTToolkits Private YouTube Viewer?
            </h2>
            <div className="prose prose-invert max-w-none text-zinc-400 leading-relaxed space-y-4">
              <p>
                When searching for ways to view private YouTube videos, internet users are constantly targeted by fraudulent websites advertising "YouTube Password Cracker", "Private Video Hack 2026", or "Instant Private Video Unlocker". These dangerous scams demand survey completion, malware downloads, or credential theft.
              </p>
              <p>
                YTToolkits provides a transparent, realistic, and fully legitimate alternative. We educate users on how YouTube's security works while providing authentic access to legitimate historical records stored in public internet libraries.
              </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">Feature</th>
                    <th className="py-4 px-6 border-b border-zinc-800 text-purple-400 font-bold">YTToolkits Viewer</th>
                    <th className="py-4 px-6 border-b border-zinc-800">Scam "Bypass" Sites</th>
                    <th className="py-4 px-6 border-b border-zinc-800">Manual Archive Search</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">Legitimacy & Safety</td>
                    <td className="py-4 px-6 text-green-400 font-semibold">100% Legal & Safe</td>
                    <td className="py-4 px-6 text-red-400">Dangerous / Phishing</td>
                    <td className="py-4 px-6 text-green-400 font-semibold">100% Safe</td>
                  </tr>
                  <tr className="hover:bg-zinc-900/30">
                    <td className="py-4 px-6 font-medium text-zinc-200">Password / Survey Requirement</td>
                    <td className="py-4 px-6 text-green-400 font-semibold">None (Completely Free)</td>
                    <td className="py-4 px-6 text-red-400">Demands surveys / logins</td>
                    <td className="py-4 px-6 text-green-400 font-semibold">None</td>
                  </tr>
                  <tr className="hover:bg-zinc-900/30">
                    <td className="py-4 px-6 font-medium text-zinc-200">Query Resolution Speed</td>
                    <td className="py-4 px-6 text-green-400 font-semibold">Instant (&lt; 2 seconds)</td>
                    <td className="py-4 px-6 text-zinc-400">Fake loading bars</td>
                    <td className="py-4 px-6 text-zinc-400">Slow calendar lookup</td>
                  </tr>
                  <tr className="hover:bg-zinc-900/30">
                    <td className="py-4 px-6 font-medium text-zinc-200">Metadata Recovery</td>
                    <td className="py-4 px-6 text-green-400 font-semibold">Automated & Preserved</td>
                    <td className="py-4 px-6 text-red-400">Fake results</td>
                    <td className="py-4 px-6 text-zinc-400">Manual inspection</td>
                  </tr>
                  <tr className="hover:bg-zinc-900/30">
                    <td className="py-4 px-6 font-medium text-zinc-200">Privacy Protection</td>
                    <td className="py-4 px-6 text-green-400 font-semibold">No logs or data collection</td>
                    <td className="py-4 px-6 text-red-400">Harvests personal data</td>
                    <td className="py-4 px-6 text-zinc-400">Standard logging</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </section>

          {/* Section 5: Educational Deep Dive - Mechanics of Web Archives */}
          <section className="space-y-6">
            <h2 className="text-2xl sm:text-3xl font-bold text-zinc-100 flex items-center gap-3">
              <Archive className="w-7 h-7 text-purple-500 flex-shrink-0" />
              How Archived Private Videos Work: The Mechanics of Web Archives
            </h2>
            <div className="prose prose-invert max-w-none text-zinc-400 leading-relaxed space-y-4">
              <p>
                To understand why some private videos can be inspected through our tool while others cannot, it helps to explore the technical architecture of digital web preservation.
              </p>
              <p>
                The Internet Archive operates automated crawling spiders (like Heritrix) that navigate the World Wide Web, traversing hyperlinks and storing copies of HTML, CSS, JavaScript, and associated media assets into WARC (Web ARChive) container files. When a YouTube video is published as Public, these crawlers may discover the link through social media posts, news blogs, or sitemaps.
              </p>
              <p>
                The crawler renders the page DOM, freezing the text, channel author, upload timestamp, and comment section into a timestamped snapshot. When the creator subsequently sets the video to Private weeks or months later, YouTube updates its internal database flag from <code className="text-green-400 bg-zinc-950 px-1 py-0.5 rounded">status: public</code> to <code className="text-red-400 bg-zinc-950 px-1 py-0.5 rounded">status: private</code>. However, the Internet Archive's historical record remains preserved in the state it was originally captured.
              </p>
              <p>
                Our Private YouTube Viewer queries the Wayback Machine's CDX server API with the video's unique identifier. If a snapshot was taken during the video's public lifecycle, we route you directly to that historical portal.
              </p>
            </div>
          </section>

          {/* Section 6: Ethical & Legal Guidelines */}
          <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">
              <ShieldCheck className="w-7 h-7 text-purple-500 flex-shrink-0" />
              Ethical & Legal Guidelines for Lost Media Research
            </h2>
            <div className="prose prose-invert max-w-none text-zinc-400 leading-relaxed space-y-4">
              <p>
                Exploring archived digital media involves important ethical and legal considerations. As digital researchers and content historians, observing best practices ensures responsible archival exploration:
              </p>
              <ul className="list-disc pl-6 space-y-3 text-zinc-400 leading-relaxed">
                <li>
                  <strong className="text-zinc-200">Respect Creator Privacy:</strong> If a creator made a video private due to personal safety concerns, doxxing, harassment, or private family matters, researchers should respect their right to privacy and avoid re-uploading or spreading personal material across public forums.
                </li>
                <li>
                  <strong className="text-zinc-200">Copyright & Fair Use:</strong> Archival preservation and historical inspection fall under Fair Use doctrines for research and educational purposes. However, downloading archived media and re-uploading it to monetize on your own channel constitutes direct copyright infringement.
                </li>
                <li>
                  <strong className="text-zinc-200">Historical & Academic Merit:</strong> Archival recovery serves vital historical purposes—such as documenting internet culture, political discourse, retracted corporate announcements, and lost creative works. Always keep educational and historical integrity at the forefront.
                </li>
              </ul>
            </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-purple-500 flex-shrink-0" />
                Frequently Asked Questions
              </h2>
              <p className="text-zinc-400">
                Detailed answers to common questions about private video recovery, archival mechanics, and YouTube security protocols.
              </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-purple-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-purple-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-purple-500 flex-shrink-0" />
                Related YouTube Creator & Archival Tools
              </h2>
              <p className="text-zinc-400">
                Explore our comprehensive suite of free utilities designed to enhance video analysis, SEO optimization, and channel diagnostics:
              </p>
            </div>

            <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3 pt-2">
              <Link
                href="/private-video-checker"
                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">
                    <ShieldAlert className="w-6 h-6" />
                  </div>
                  <h3 className="text-lg font-bold text-zinc-100 group-hover:text-red-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-red-400 group-hover:translate-x-1 transition-transform">
                  Check Video Status <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="/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">
                    <History 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">
                    Explore historical YouTube channel layouts, banners, branding evolutions, and early video grids.
                  </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">
                    <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 active public and unlisted YouTube videos in full 1080p, 4K, or MP3 audio format.
                  </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 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">
                    <Globe 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 user engagement, community discussions, sentiment trends, and feedback metrics.
                  </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>
  );
}