"use client";

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

export default function DeletedVideoFinderPage() {
  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": "YouTube Deleted Video Finder",
        "url": "https://yttoolkits.site/deleted-video-finder",
        "description": "Find and recover deleted YouTube videos using Wayback Machine snapshots and historical web archives. Retrieve lost video metadata, titles, and media.",
        "applicationCategory": "MultimediaApplication",
        "operatingSystem": "All",
        "offers": {
          "@type": "Offer",
          "price": "0",
          "priceCurrency": "USD"
        }
      },
      {
        "@type": "FAQPage",
        "mainEntity": [
          {
            "@type": "Question",
            "name": "Can I find a deleted YouTube video if I don't have the original URL?",
            "acceptedAnswer": {
              "@type": "Answer",
              "text": "The Wayback Machine and archive databases require the exact 11-character YouTube video ID or the complete video URL to locate historical snapshots. If you do not possess the URL directly, inspect your browser history, old playlist entries where the video title disappeared, saved bookmarks, Reddit discussions, Twitter/X shares, or email confirmations to locate the original link before running a search."
            }
          },
          {
            "@type": "Question",
            "name": "Why does an archive snapshot show 'Video Unavailable' or a static black player?",
            "acceptedAnswer": {
              "@type": "Answer",
              "text": "The Internet Archive prioritizes HTML pages, CSS stylesheets, images, and text metadata over heavy streaming video files. While the webpage layout, video title, description, and comment section were successfully archived, the crawler may not have downloaded the raw MP4 video stream. However, discovering the exact title and description frequently allows you to find mirrors on alternative video platforms."
            }
          },
          {
            "@type": "Question",
            "name": "How long after a video is deleted can it still be recovered?",
            "acceptedAnswer": {
              "@type": "Answer",
              "text": "Once a video is deleted from YouTube's primary servers, it disappears from live circulation instantly. However, if the Wayback Machine or external web crawlers crawled that URL while it was still public, the archived record remains permanently stored in the Internet Archive digital library, irrespective of whether the video was deleted days, months, or over a decade ago."
            }
          },
          {
            "@type": "Question",
            "name": "Does the Wayback Machine save all YouTube videos automatically?",
            "acceptedAnswer": {
              "@type": "Answer",
              "text": "No. The Internet Archive cannot archive every single video uploaded to YouTube due to storage constraints and crawler limitations. Videos with higher view counts, widespread social media shares, embeds on blogs, or those manually submitted to web.archive.org by users have a significantly higher probability of being archived."
            }
          },
          {
            "@type": "Question",
            "name": "Can I download the recovered video file from the Wayback Machine?",
            "acceptedAnswer": {
              "@type": "Answer",
              "text": "If the crawler succeeded in archiving the actual video file, you can often right-click the video player on the Wayback Machine page and select 'Save Video As...' to download the MP4 file. Alternatively, you can use our YouTube Video Downloader tool for any currently available or unlisted video content."
            }
          },
          {
            "@type": "Question",
            "name": "What is the difference between a deleted video and a private video?",
            "acceptedAnswer": {
              "@type": "Answer",
              "text": "A deleted video is permanently purged from YouTube's active databases by either the creator or YouTube administration. A private video still exists on YouTube's servers, but access is restricted exclusively to the uploader and explicitly invited Google accounts. To verify privacy restrictions, use our Private Video Checker or Private YouTube Viewer tools."
            }
          },
          {
            "@type": "Question",
            "name": "Is it legal to watch and inspect deleted YouTube videos via web archives?",
            "acceptedAnswer": {
              "@type": "Answer",
              "text": "Yes. Accessing historical snapshots preserved by non-profit digital repositories like the Internet Archive is legal under fair use and public interest archival protections. However, you must not re-upload, commercialize, or infringe on copyrighted media retrieved from historical archives without explicit permission from the original copyright holder."
            }
          },
          {
            "@type": "Question",
            "name": "How do I find the video URL of a deleted video inside my YouTube playlist?",
            "acceptedAnswer": {
              "@type": "Answer",
              "text": "Open your YouTube playlist in a desktop browser. Look for the placeholder that says '[Deleted video]'. Click the three-dots menu or open the link directly in a new tab. Although the video will not play, the URL bar will contain the unique video identifier: 'watch?v=VIDEO_ID&list=...'. Copy that 11-character video ID and paste it into our tool."
            }
          },
          {
            "@type": "Question",
            "name": "Why did YouTube delete my own video, and can I get it back from YouTube Studio?",
            "acceptedAnswer": {
              "@type": "Answer",
              "text": "Videos are typically removed by YouTube due to Community Guidelines strikes, copyright infringement notices, terms of service violations, or inadvertent user deletion. If YouTube removed your video, check your email and YouTube Studio dashboard for a dispute or appeal option. If you deleted it manually, YouTube does not retain a backup, making web archives your best recovery avenue."
            }
          },
          {
            "@type": "Question",
            "name": "Can I use this tool to find deleted YouTube Shorts and live streams?",
            "acceptedAnswer": {
              "@type": "Answer",
              "text": "Yes. YouTube Shorts use the same 11-character identifier system (e.g., youtube.com/shorts/VIDEO_ID). Archived live streams can also be retrieved provided the stream was archived while it was public or after it was converted into an on-demand video archive."
            }
          }
        ]
      }
    ]
  };

  const faqs = [
    {
      q: "Can I find a deleted YouTube video if I don't have the original URL?",
      a: "The Wayback Machine and archive databases require the exact 11-character YouTube video ID or the complete video URL to locate historical snapshots. If you do not possess the URL directly, inspect your browser history, old playlist entries where the video title disappeared, saved bookmarks, Reddit discussions, Twitter/X shares, or email confirmations to locate the original link before running a search."
    },
    {
      q: "Why does an archive snapshot show 'Video Unavailable' or a static black player?",
      a: "The Internet Archive prioritizes HTML pages, CSS stylesheets, images, and text metadata over heavy streaming video files. While the webpage layout, video title, description, and comment section were successfully archived, the crawler may not have downloaded the raw MP4 video stream. However, discovering the exact title and description frequently allows you to find mirrors on alternative video platforms."
    },
    {
      q: "How long after a video is deleted can it still be recovered?",
      a: "Once a video is deleted from YouTube's primary servers, it disappears from live circulation instantly. However, if the Wayback Machine or external web crawlers crawled that URL while it was still public, the archived record remains permanently stored in the Internet Archive digital library, irrespective of whether the video was deleted days, months, or over a decade ago."
    },
    {
      q: "Does the Wayback Machine save all YouTube videos automatically?",
      a: "No. The Internet Archive cannot archive every single video uploaded to YouTube due to storage constraints and crawler limitations. Videos with higher view counts, widespread social media shares, embeds on blogs, or those manually submitted to web.archive.org by users have a significantly higher probability of being archived."
    },
    {
      q: "Can I download the recovered video file from the Wayback Machine?",
      a: "If the crawler succeeded in archiving the actual video file, you can often right-click the video player on the Wayback Machine page and select 'Save Video As...' to download the MP4 file. Alternatively, you can use our YouTube Video Downloader tool for any currently available or unlisted video content."
    },
    {
      q: "What is the difference between a deleted video and a private video?",
      a: "A deleted video is permanently purged from YouTube's active databases by either the creator or YouTube administration. A private video still exists on YouTube's servers, but access is restricted exclusively to the uploader and explicitly invited Google accounts. To verify privacy restrictions, use our Private Video Checker or Private YouTube Viewer tools."
    },
    {
      q: "Is it legal to watch and inspect deleted YouTube videos via web archives?",
      a: "Yes. Accessing historical snapshots preserved by non-profit digital repositories like the Internet Archive is legal under fair use and public interest archival protections. However, you must not re-upload, commercialize, or infringe on copyrighted media retrieved from historical archives without explicit permission from the original copyright holder."
    },
    {
      q: "How do I find the video URL of a deleted video inside my YouTube playlist?",
      a: "Open your YouTube playlist in a desktop browser. Look for the placeholder that says '[Deleted video]'. Click the three-dots menu or open the link directly in a new tab. Although the video will not play, the URL bar will contain the unique video identifier: 'watch?v=VIDEO_ID&list=...'. Copy that 11-character video ID and paste it into our tool."
    },
    {
      q: "Why did YouTube delete my own video, and can I get it back from YouTube Studio?",
      a: "Videos are typically removed by YouTube due to Community Guidelines strikes, copyright infringement notices, terms of service violations, or inadvertent user deletion. If YouTube removed your video, check your email and YouTube Studio dashboard for a dispute or appeal option. If you deleted it manually, YouTube does not retain a backup, making web archives your best recovery avenue."
    },
    {
      q: "Can I use this tool to find deleted YouTube Shorts and live streams?",
      a: "Yes. YouTube Shorts use the same 11-character identifier system (e.g., youtube.com/shorts/VIDEO_ID). Archived live streams can also be retrieved provided the stream was archived while it was public or after it was converted into an on-demand video archive."
    }
  ];

  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" />
            Digital Media Recovery & Archival Intelligence
          </div>
          <h1 className="text-3xl md:text-5xl font-extrabold flex items-center justify-center gap-4 text-white">
            <History className="w-10 h-10 md:w-12 md:h-12 text-red-500" />
            Deleted Video Finder
          </h1>
          <p className="text-lg text-zinc-400 max-w-2xl mx-auto leading-relaxed">
            Discover, track down, and recover deleted YouTube videos using Wayback Machine archives.
            Uncover lost titles, descriptions, upload metadata, and historical video playback streams.
          </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">
                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="videoUrl"
                  value={videoUrl}
                  onChange={(e) => setVideoUrl(e.target.value)}
                  placeholder="https://www.youtube.com/watch?v=dQw4w9WgXcQ or dQw4w9WgXcQ"
                  className="block w-full pl-10 pr-3 py-4 bg-zinc-950 border border-zinc-800 rounded-2xl focus:ring-2 focus:ring-red-500/20 focus:border-red-500/50 transition-colors text-zinc-100 placeholder-zinc-500"
                  required
                />
              </div>
              <p className="text-xs text-zinc-500">
                Supports standard watch links, youtu.be shortlinks, Shorts URLs, embed links, and raw 11-character video IDs.
              </p>
            </div>

            <button
              type="submit"
              disabled={loading || !videoUrl}
              className="w-full flex items-center justify-center gap-2 bg-red-600 hover:bg-red-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-red-600/20"
            >
              {loading ? (
                <>
                  <div className="animate-spin rounded-full h-5 w-5 border-b-2 border-white"></div>
                  Querying Archive Repositories...
                </>
              ) : (
                <>
                  <Search className="w-5 h-5" />
                  Find Deleted Video
                </>
              )}
            </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-green-500/10 border-green-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-green-500/20 p-2 rounded-full">
                      <Clock className="w-6 h-6 text-green-500" />
                    </div>
                    <div>
                      <h3 className="text-xl font-bold text-green-400">Archived Snapshot Discovered!</h3>
                      <p className="text-sm text-zinc-400">
                        Historical snapshot captured 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 historical snapshot of this YouTube page exists in the Internet Archive database. You can inspect the preserved page, read original comments, reconstruct tags, and verify playback availability.
                  </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 Deleted Video on Internet Archive
                    <ExternalLink className="w-4 h-4" />
                  </a>
                </div>
              ) : (
                <div className="flex flex-col items-center justify-center text-center py-6 space-y-3">
                  <FileVideo className="w-12 h-12 text-zinc-600" />
                  <h3 className="text-lg font-semibold text-zinc-300">No Web Snapshot Located</h3>
                  <p className="text-zinc-500 max-w-sm">
                    The Wayback Machine has not archived this specific video page. Try checking Google Cache, alternative mirrors, or verifying whether the video was changed to private using our <Link href="/private-video-checker" className="text-red-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 Deleted Video Finder? */}
          <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">
              <History className="w-7 h-7 text-red-500 flex-shrink-0" />
              What is YouTube Deleted Video Finder?
            </h2>
            <div className="prose prose-invert max-w-none text-zinc-400 leading-relaxed space-y-4">
              <p>
                The YouTube Deleted Video Finder is an advanced forensic utility built to help content creators, media researchers, digital archivists, and everyday viewers locate and restore access to videos that have vanished from YouTube. In the fast-moving landscape of online media, millions of videos disappear every year. Whether caused by sudden creator account deletion, copyright strikes, Community Guidelines enforcement, music licensing expiration, or accidental misclicks, encountering the stark grey screen reading <strong className="text-zinc-200">"This video has been removed"</strong> or <strong className="text-zinc-200">"This video is unavailable"</strong> is one of the most frustrating experiences on the internet.
              </p>
              <p>
                Our tool bridges the gap between YouTube's dynamic deletion policies and persistent internet preservation initiatives. By interfacing directly with the Internet Archive's Wayback Machine CDX API, our platform cross-references the video's distinct 11-character alphanumeric identifier across billions of saved web records. It identifies the precise moment in digital history when automated web crawlers or user-submitted snapshot engines captured that specific video webpage.
              </p>
              <p>
                Beyond simple URL validation, the Deleted Video Finder serves as a gateway to critical lost media metadata. Even when the heavy video stream itself cannot be retrieved, recovering the original video title, full description box, channel name, upload date, tags, and user comment discussions provides the exact clues needed to locate mirror re-uploads across community forums, Reddit threads, and alternative video platforms. For anyone conducting academic research, competitive intelligence, or simply recovering a treasured piece of nostalgic media, this tool is an indispensable resource.
              </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 Deleted Video Finder - Step by Step Guide
            </h2>
            <p className="text-zinc-400 leading-relaxed">
              Recovering lost digital media might seem intimidating, but our intuitive workflow streamlines the entire recovery pipeline into five straightforward steps. Follow this comprehensive walkthrough to trace and inspect your deleted content:
            </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">Locate Your Target Video URL or ID</h3>
                <p className="text-sm text-zinc-400 leading-relaxed">
                  Every YouTube video is cataloged by an immutable 11-character string (such as <code className="text-red-400 bg-zinc-950 px-1 py-0.5 rounded">dQw4w9WgXcQ</code>). Even when a video is deleted, that identifier remains inside your browser history, bookmarks, saved playlist slots, or email notifications. Locate this URL or copy the isolated 11-character identifier.
                </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 YTToolkits</h3>
                <p className="text-sm text-zinc-400 leading-relaxed">
                  Enter the URL into our search field above. Our intelligent regex parser automatically sanitizes tracking parameters, playlist IDs (<code className="text-zinc-300">&list=</code>), and timestamp anchors (<code className="text-zinc-300">&t=</code>), isolating the pure video entity for an exact archival query.
                </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">Execute the Archival Query</h3>
                <p className="text-sm text-zinc-400 leading-relaxed">
                  Click the <strong className="text-zinc-200">Find Deleted Video</strong> button. Our background engine makes an asynchronous request to the Internet Archive's database clusters, scanning historical indexes spanning from 2005 through the present day in a matter of seconds.
                </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">Inspect the Historical Snapshot</h3>
                <p className="text-sm text-zinc-400 leading-relaxed">
                  If an archive snapshot is discovered, our tool returns the exact timestamp and a direct access button. Clicking this link loads the saved page inside the Wayback Machine interface, rendering the original layout, video title, description, and creator attribution.
                </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-red-500/20 text-red-400 font-bold flex items-center justify-center text-lg">
                  5
                </div>
                <h3 className="text-xl font-bold text-zinc-200">Recover Playback or Leverage Metadata for Mirrors</h3>
                <p className="text-sm text-zinc-400 leading-relaxed">
                  If the archival crawler captured the underlying media stream, click play or right-click to download the video. If only metadata was preserved, copy the recovered video title, author, and description keywords to search community archives like Reddit, Archive.org collections, or Bilibili. You can also explore the creator's past using our <Link href="/channel-history-viewer" className="text-red-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-red-500 flex-shrink-0" />
              Key Features of Our Deleted Video Finder
            </h2>
            <p className="text-zinc-400 leading-relaxed">
              Engineered with speed, precision, and privacy in mind, YTToolkits offers industry-leading media archival discovery capabilities:
            </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">
                  <Database className="w-6 h-6" />
                </div>
                <h3 className="text-lg font-bold text-zinc-100">Direct Wayback API Integration</h3>
                <p className="text-sm text-zinc-400 leading-relaxed">
                  Direct connection with high-speed Internet Archive CDX indexing nodes eliminates manual calendar navigation and retrieves the most complete snapshots instantly.
                </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">Universal URL Normalization</h3>
                <p className="text-sm text-zinc-400 leading-relaxed">
                  Accepts standard watch URLs, shortlinks (youtu.be), embedded players, YouTube Shorts, mobile strings, and raw 11-digit alphanumeric hashes 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">Full Metadata Reconstruction</h3>
                <p className="text-sm text-zinc-400 leading-relaxed">
                  Recover crucial context including the original channel name, upload date, description links, tags, and comment discussions even when video streaming is offline.
                </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">
                  <ShieldCheck className="w-6 h-6" />
                </div>
                <h3 className="text-lg font-bold text-zinc-100">100% Private & No Logs</h3>
                <p className="text-sm text-zinc-400 leading-relaxed">
                  Your search queries are processed anonymously. We do not log submitted URLs, build user profiles, or store search histories on our servers.
                </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">Zero Paywalls or Restrictions</h3>
                <p className="text-sm text-zinc-400 leading-relaxed">
                  Enjoy unlimited searches with no subscription fees, no credit card requirements, no rate-limiting, and zero intrusive ads or software installations.
                </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">
                  <Layers className="w-6 h-6" />
                </div>
                <h3 className="text-lg font-bold text-zinc-100">Complementary Creator Tools</h3>
                <p className="text-sm text-zinc-400 leading-relaxed">
                  Seamlessly connect with our suite of creator tools, including our <Link href="/private-video-checker" className="text-red-400 hover:underline">Private Video Checker</Link> and <Link href="/tag-extractor" className="text-red-400 hover:underline">Tag Extractor</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-red-500 flex-shrink-0" />
              Why Choose YTToolkits Deleted Video Finder?
            </h2>
            <div className="prose prose-invert max-w-none text-zinc-400 leading-relaxed space-y-4">
              <p>
                Navigating the Internet Archive manually can be a sluggish, confusing ordeal. Entering a raw YouTube URL into the Wayback Machine search bar frequently returns cryptic calendar grids, redirect loops, 302 errors, or multiple duplicate snapshots that lead to broken landing pages. Most users give up assuming their video is permanently gone forever.
              </p>
              <p>
                YTToolkits solves this friction by automating the intelligence layer. Our algorithm doesn't just ping a generic homepage; it parses and queries multiple canonical YouTube URL permutations, identifying the exact timestamp containing the most viable, fully rendered snapshot.
              </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-red-400 font-bold">YTToolkits Finder</th>
                    <th className="py-4 px-6 border-b border-zinc-800">Manual Archive Search</th>
                    <th className="py-4 px-6 border-b border-zinc-800">Browser Extensions</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">Query 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">Slow (15-45 seconds)</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">URL Normalization</td>
                    <td className="py-4 px-6 text-green-400 font-semibold">Automatic Regex Parsing</td>
                    <td className="py-4 px-6 text-red-400">Manual input only</td>
                    <td className="py-4 px-6 text-zinc-400">Basic</td>
                  </tr>
                  <tr className="hover:bg-zinc-900/30">
                    <td className="py-4 px-6 font-medium text-zinc-200">Installation Required</td>
                    <td className="py-4 px-6 text-green-400 font-semibold">None (Web-based)</td>
                    <td className="py-4 px-6 text-green-400 font-semibold">None</td>
                    <td className="py-4 px-6 text-red-400">Yes (Risk of bloat)</td>
                  </tr>
                  <tr className="hover:bg-zinc-900/30">
                    <td className="py-4 px-6 font-medium text-zinc-200">Shorts & Mobile Links</td>
                    <td className="py-4 px-6 text-green-400 font-semibold">Fully Supported</td>
                    <td className="py-4 px-6 text-red-400">Often Fails</td>
                    <td className="py-4 px-6 text-zinc-400">Inconsistent</td>
                  </tr>
                  <tr className="hover:bg-zinc-900/30">
                    <td className="py-4 px-6 font-medium text-zinc-200">Privacy & Ad-Free</td>
                    <td className="py-4 px-6 text-green-400 font-semibold">Zero tracking, Clean UI</td>
                    <td className="py-4 px-6 text-zinc-400">High server latency</td>
                    <td className="py-4 px-6 text-red-400">Data collection risks</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </section>

          {/* Section 5: Why Do YouTube Videos Get Deleted? */}
          <section className="space-y-6">
            <h2 className="text-2xl sm:text-3xl font-bold text-zinc-100 flex items-center gap-3">
              <AlertCircle className="w-7 h-7 text-red-500 flex-shrink-0" />
              Why Do YouTube Videos Get Deleted? Common Causes & Recovery Likelihood
            </h2>
            <div className="prose prose-invert max-w-none text-zinc-400 leading-relaxed space-y-4">
              <p>
                Understanding why a video disappeared is critical when assessing whether it can be recovered or mirrored. YouTube operates under strict regulatory, legal, and operational constraints that prompt the removal of hundreds of thousands of videos on a weekly basis. Here are the primary drivers of video deletion:
              </p>
            </div>

            <div className="grid gap-6 md:grid-cols-2 pt-2">
              <div className="bg-zinc-900/50 border border-zinc-800 rounded-2xl p-6 space-y-3">
                <h3 className="text-lg font-bold text-zinc-200 flex items-center gap-2">
                  <ShieldCheck className="w-5 h-5 text-red-500" />
                  Copyright Takedowns (DMCA Notices)
                </h3>
                <p className="text-sm text-zinc-400 leading-relaxed">
                  Record labels, movie studios, gaming publishers, and independent creators frequently file formal DMCA takedown requests when proprietary audio, visual clips, or software are used without licensing. When three copyright strikes occur, entire channels are terminated, wiping all associated video catalogs instantaneously.
                </p>
              </div>

              <div className="bg-zinc-900/50 border border-zinc-800 rounded-2xl p-6 space-y-3">
                <h3 className="text-lg font-bold text-zinc-200 flex items-center gap-2">
                  <AlertCircle className="w-5 h-5 text-yellow-500" />
                  Community Guidelines Enforcement
                </h3>
                <p className="text-sm text-zinc-400 leading-relaxed">
                  YouTube continuously updates algorithms to detect policy violations covering hate speech, misinformation, violent extremism, cyberbullying, sexual content, and harmful challenges. Algorithmic flags often result in automated video removal with little advance warning.
                </p>
              </div>

              <div className="bg-zinc-900/50 border border-zinc-800 rounded-2xl p-6 space-y-3">
                <h3 className="text-lg font-bold text-zinc-200 flex items-center gap-2">
                  <History className="w-5 h-5 text-blue-500" />
                  Voluntary Creator Pruning & Rebranding
                </h3>
                <p className="text-sm text-zinc-400 leading-relaxed">
                  As creators mature and secure high-value brand partnerships, they often purge their early content catalogs to maintain a polished public image. Videos containing outdated opinions, lower production quality, or defunct sponsorships are voluntarily set to private or permanently deleted.
                </p>
              </div>

              <div className="bg-zinc-900/50 border border-zinc-800 rounded-2xl p-6 space-y-3">
                <h3 className="text-lg font-bold text-zinc-200 flex items-center gap-2">
                  <Lock className="w-5 h-5 text-purple-500" />
                  The 2021 Unlisted Video Security Update
                </h3>
                <p className="text-sm text-zinc-400 leading-relaxed">
                  In July 2021, YouTube executed a security patch affecting unlisted videos uploaded prior to January 1, 2017. Unless creators manually opted out, YouTube automatically converted millions of vintage unlisted videos to private status, causing widespread playlist breakage across the web.
                </p>
              </div>
            </div>
          </section>

          {/* Section 6: Educational Deep Dive - Advanced Recovery Techniques */}
          <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">
              <FileVideo className="w-7 h-7 text-red-500 flex-shrink-0" />
              Advanced Techniques for Recovering Lost & Deleted Media
            </h2>
            <div className="prose prose-invert max-w-none text-zinc-400 leading-relaxed space-y-4">
              <p>
                What happens if the Wayback Machine does not contain a full video stream for your target URL? Don't lose hope. Expert digital detectives employ a multi-layered verification strategy to track down mirrors and community archives:
              </p>
              <h3 className="text-xl font-bold text-zinc-200 pt-2">1. Searching Google & Bing Search Caches</h3>
              <p>
                Search engines maintain brief server cache copies of active webpages. While Google has deprecated the standard cache link in search results, you can still test <code className="text-zinc-200 bg-zinc-950 px-2 py-0.5 rounded">cache:https://www.youtube.com/watch?v=VIDEO_ID</code> on alternative search engines. If the deletion occurred recently, the cached text often provides the complete transcript and description.
              </p>
              <h3 className="text-xl font-bold text-zinc-200 pt-2">2. Reverse-Searching the Video Identifier Across the Open Web</h3>
              <p>
                A video's 11-character ID is globally unique. Take that exact ID and wrap it in quotation marks when searching Google or DuckDuckGo (e.g., <code className="text-zinc-200 bg-zinc-950 px-2 py-0.5 rounded">"dQw4w9WgXcQ"</code>). This queries blogs, forum threads, Reddit submissions, Twitter/X posts, and Tumblr feeds where someone originally shared the video. Often, forum users discussed the content or posted direct mirrors.
              </p>
              <h3 className="text-xl font-bold text-zinc-200 pt-2">3. Checking Secondary Video Repositories</h3>
              <p>
                Popular YouTube videos are routinely mirrored across secondary video hosts by fans or automated content syndicators. Once our tool helps you uncover the original video title and creator name, search those exact phrases on platforms such as Bilibili, Dailymotion, Vimeo, VKontakte, and Internet Archive community collections.
              </p>
              <h3 className="text-xl font-bold text-zinc-200 pt-2">4. Differentiating Deleted from Private Status</h3>
              <p>
                Frequently, a video is not actually deleted; it has merely been locked down. Before assuming total loss, run your URL through our <Link href="/private-video-checker" className="text-red-400 hover:underline">Private Video Checker</Link> and <Link href="/private-youtube-viewer" className="text-red-400 hover:underline">Private YouTube Viewer</Link> to distinguish between private permissions and genuine server-side purge.
              </p>
            </div>
          </section>

          {/* Section 7: Frequently Asked Questions (Accordion) */}
          <section className="space-y-6">
            <div className="space-y-2">
              <h2 className="text-2xl sm:text-3xl font-bold text-zinc-100 flex items-center gap-3">
                <HelpCircle className="w-7 h-7 text-red-500 flex-shrink-0" />
                Frequently Asked Questions
              </h2>
              <p className="text-zinc-400">
                Detailed answers to the most common questions regarding deleted YouTube videos, archival integrity, and recovery feasibility.
              </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 & 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">
                    <ShieldCheck 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 needing to sign into an account.
                  </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="/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">
                    <Clock 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">
                    Recover metadata and explore historical public snapshots of videos that were subsequently locked down.
                  </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="/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">
                    Travel back in time to inspect vintage channel layouts, old banner artwork, and early subscriber milestones.
                  </p>
                </div>
                <div className="pt-4 flex items-center text-sm font-medium text-blue-400 group-hover:translate-x-1 transition-transform">
                  Explore Channel History <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">
                    Save active videos, presentations, and tutorials in full 1080p, 4K, or MP3 audio before they disappear.
                  </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="/channel-id-finder"
                className="group bg-zinc-900/50 border border-zinc-800 hover:border-cyan-500/50 rounded-2xl p-6 transition-all duration-200 flex flex-col justify-between"
              >
                <div className="space-y-3">
                  <div className="p-3 bg-cyan-500/10 text-cyan-400 rounded-xl w-fit group-hover:scale-110 transition-transform">
                    <Search className="w-6 h-6" />
                  </div>
                  <h3 className="text-lg font-bold text-zinc-100 group-hover:text-cyan-400 transition-colors">
                    Channel ID Finder
                  </h3>
                  <p className="text-sm text-zinc-400">
                    Find the immutable 24-character YouTube Channel ID for any user handle, custom vanity URL, or video.
                  </p>
                </div>
                <div className="pt-4 flex items-center text-sm font-medium text-cyan-400 group-hover:translate-x-1 transition-transform">
                  Extract Channel ID <ArrowRight className="w-4 h-4 ml-1" />
                </div>
              </Link>

              <Link
                href="/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 user engagement, community discussions, feedback sentiment, and comment moderation 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>
  );
}