"use client";

import React, { useState } from 'react';
import { 
  Search, AlertCircle, Calendar, ExternalLink, UserSquare2, MonitorPlay,
  PlaySquare, HelpCircle, Sparkles, ArrowRight, CheckCircle2, ChevronDown, 
  RefreshCw, Zap, Compass, FileText, Database, History, TrendingUp, Laptop, 
  Layers, ShieldCheck, Globe, Clock, BarChart3
} from 'lucide-react';
import Link from 'next/link';

export default function ChannelHistoryViewerPage() {
  const [channelUrl, setChannelUrl] = 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 handleSearch = async (e: React.FormEvent) => {
    e.preventDefault();
    setError('');
    setResult(null);

    // Basic validation to ensure it looks somewhat like a channel URL
    if (!channelUrl.includes('youtube.com/')) {
      setError('Please enter a valid YouTube channel URL (e.g., youtube.com/@channel or youtube.com/c/channel)');
      return;
    }

    setLoading(true);

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

      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 formatTimestamp = (ts?: string) => {
    if (!ts || ts.length < 8) return 'Unknown Date';
    const year = ts.substring(0, 4);
    const month = ts.substring(4, 6);
    const day = ts.substring(6, 8);
    return `${year}-${month}-${day}`;
  };

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

  const jsonLd = {
    "@context": "https://schema.org",
    "@graph": [
      {
        "@type": "WebApplication",
        "name": "YouTube Channel History Viewer",
        "url": "https://yttoolkits.site/channel-history-viewer",
        "description": "Travel back in time to inspect vintage YouTube channel layouts, old banners, historic branding evolutions, and early video catalogs using web archives.",
        "applicationCategory": "MultimediaApplication",
        "operatingSystem": "All",
        "offers": {
          "@type": "Offer",
          "price": "0",
          "priceCurrency": "USD"
        }
      },
      {
        "@type": "FAQPage",
        "mainEntity": [
          {
            "@type": "Question",
            "name": "Why does an archived channel snapshot sometimes look broken or miss video thumbnails?",
            "acceptedAnswer": {
              "@type": "Answer",
              "text": "YouTube channels heavily depend on client-side JavaScript, dynamic API requests, and CDN-hosted media. Older web archives captured the raw HTML structure and stylesheets, but may not have saved dynamic AJAX scripts or image servers. Even when thumbnails fail to render, textual video titles, descriptions, and channel statistics remain fully intact."
            }
          },
          {
            "@type": "Question",
            "name": "How far back in time can I view a YouTube channel's history?",
            "acceptedAnswer": {
              "@type": "Answer",
              "text": "The Internet Archive began indexing YouTube shortly after its public launch in 2005. For channels that existed during early eras (like Smosh, PewDiePie, or early tech channels), you can explore snapshots dating back to 2006-2008, capturing the vintage channel layouts."
            }
          },
          {
            "@type": "Question",
            "name": "Can I use this tool to discover deleted videos that used to be listed on a creator's channel?",
            "acceptedAnswer": {
              "@type": "Answer",
              "text": "Yes! Historical channel snapshots freeze the creator's upload grid on the date of capture. You can review titles and thumbnails of videos that have since been purged. If you find a vanished title, you can copy its link and input it into our Deleted Video Finder to check for playback archives."
            }
          },
          {
            "@type": "Question",
            "name": "How do I look up old channels if their URL format changed to modern @handles?",
            "acceptedAnswer": {
              "@type": "Answer",
              "text": "Because modern @handles were introduced recently, web crawlers may have archived the channel under older URL formats such as youtube.com/user/username or youtube.com/c/customname. You can use our Channel ID Finder to retrieve the canonical 'UC' channel ID, which yields the most consistent historical records across all eras."
            }
          },
          {
            "@type": "Question",
            "name": "Can I see historical subscriber counts and view statistics from past years?",
            "acceptedAnswer": {
              "@type": "Answer",
              "text": "Yes. Most historical channel layouts prominently showcased exact public subscriber counts, channel view counts, joined dates, and country tags directly on the channel header or sidebar, providing an authentic record of creator milestones."
            }
          },
          {
            "@type": "Question",
            "name": "Is it possible to see what channel banner artwork a YouTuber used 10 years ago?",
            "acceptedAnswer": {
              "@type": "Answer",
              "text": "Yes. If the crawler preserved the image assets, you can view early custom channel backgrounds (from the 2008-2012 era) and vintage 2560x1440 channel art banners from the 2013 'One Channel' redesign era."
            }
          },
          {
            "@type": "Question",
            "name": "Why doesn't a newly created channel show any historical snapshots?",
            "acceptedAnswer": {
              "@type": "Answer",
              "text": "Web archive crawlers prioritize channels with high inbound links, large subscriber counts, or those submitted manually to web.archive.org. Channels launched within recent months or with minimal external web presence may not have been cataloged yet."
            }
          },
          {
            "@type": "Question",
            "name": "Does checking a channel's history notify or alert the channel owner?",
            "acceptedAnswer": {
              "@type": "Answer",
              "text": "No. Querying historical web archives is completely external to YouTube's active servers. Channel owners receive zero alerts or analytic indications that their historical snapshots were accessed."
            }
          },
          {
            "@type": "Question",
            "name": "Can I save or download historical channel assets like old banners and logos?",
            "acceptedAnswer": {
              "@type": "Answer",
              "text": "Yes. Once you open the archived channel page in the Wayback Machine, you can right-click any rendered avatar, logo, or banner image and choose 'Save Image As...' to store a copy locally for research or design reference."
            }
          },
          {
            "@type": "Question",
            "name": "How can studying channel history help me grow my own YouTube channel?",
            "acceptedAnswer": {
              "@type": "Answer",
              "text": "Analyzing channel history allows you to reverse-engineer how top creators evolved over time. You can observe the exact content shifts, branding changes, thumbnail upgrades, and title formatting pivots that transformed struggling creators into viral superstars."
            }
          }
        ]
      }
    ]
  };

  const faqs = [
    {
      q: "Why does an archived channel snapshot sometimes look broken or miss video thumbnails?",
      a: "YouTube channels heavily depend on client-side JavaScript, dynamic API requests, and CDN-hosted media. Older web archives captured the raw HTML structure and stylesheets, but may not have saved dynamic AJAX scripts or image servers. Even when thumbnails fail to render, textual video titles, descriptions, and channel statistics remain fully intact."
    },
    {
      q: "How far back in time can I view a YouTube channel's history?",
      a: "The Internet Archive began indexing YouTube shortly after its public launch in 2005. For channels that existed during early eras (like Smosh, PewDiePie, or early tech channels), you can explore snapshots dating back to 2006-2008, capturing the vintage channel layouts."
    },
    {
      q: "Can I use this tool to discover deleted videos that used to be listed on a creator's channel?",
      a: "Yes! Historical channel snapshots freeze the creator's upload grid on the date of capture. You can review titles and thumbnails of videos that have since been purged. If you find a vanished title, you can copy its link and input it into our Deleted Video Finder to check for playback archives."
    },
    {
      q: "How do I look up old channels if their URL format changed to modern @handles?",
      a: "Because modern @handles were introduced recently, web crawlers may have archived the channel under older URL formats such as youtube.com/user/username or youtube.com/c/customname. You can use our Channel ID Finder to retrieve the canonical 'UC' channel ID, which yields the most consistent historical records across all eras."
    },
    {
      q: "Can I see historical subscriber counts and view statistics from past years?",
      a: "Yes. Most historical channel layouts prominently showcased exact public subscriber counts, channel view counts, joined dates, and country tags directly on the channel header or sidebar, providing an authentic record of creator milestones."
    },
    {
      q: "Is it possible to see what channel banner artwork a YouTuber used 10 years ago?",
      a: "Yes. If the crawler preserved the image assets, you can view early custom channel backgrounds (from the 2008-2012 era) and vintage 2560x1440 channel art banners from the 2013 'One Channel' redesign era."
    },
    {
      q: "Why doesn't a newly created channel show any historical snapshots?",
      a: "Web archive crawlers prioritize channels with high inbound links, large subscriber counts, or those submitted manually to web.archive.org. Channels launched within recent months or with minimal external web presence may not have been cataloged yet."
    },
    {
      q: "Does checking a channel's history notify or alert the channel owner?",
      a: "No. Querying historical web archives is completely external to YouTube's active servers. Channel owners receive zero alerts or analytic indications that their historical snapshots were accessed."
    },
    {
      q: "Can I save or download historical channel assets like old banners and logos?",
      a: "Yes. Once you open the archived channel page in the Wayback Machine, you can right-click any rendered avatar, logo, or banner image and choose 'Save Image As...' to store a copy locally for research or design reference."
    },
    {
      q: "How can studying channel history help me grow my own YouTube channel?",
      a: "Analyzing channel history allows you to reverse-engineer how top creators evolved over time. You can observe the exact content shifts, branding changes, thumbnail upgrades, and title formatting pivots that transformed struggling creators into viral superstars."
    }
  ];

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

      <div className="max-w-4xl mx-auto space-y-12">
        {/* Header Section */}
        <div className="text-center space-y-4">
          <div className="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-blue-500/10 border border-blue-500/20 text-xs sm:text-sm text-blue-400 font-medium">
            <Sparkles className="w-4 h-4" />
            Digital History Portal & Layout Evolution Analysis
          </div>
          <h1 className="text-3xl md:text-5xl font-extrabold flex items-center justify-center gap-4 text-white">
            <UserSquare2 className="w-10 h-10 md:w-12 md:h-12 text-blue-500" />
            Channel History Viewer
          </h1>
          <p className="text-lg text-zinc-400 max-w-2xl mx-auto leading-relaxed">
            Travel back in time and experience what your favorite YouTube channels looked like years ago.
            Discover vintage channel layouts, retro banner art, and early creator video catalogs.
          </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="channelUrl" className="block text-sm font-medium text-zinc-300">
                YouTube Channel URL or Handle
              </label>
              <div className="relative">
                <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                  <MonitorPlay className="h-5 w-5 text-zinc-500" />
                </div>
                <input
                  type="text"
                  id="channelUrl"
                  value={channelUrl}
                  onChange={(e) => setChannelUrl(e.target.value)}
                  placeholder="https://www.youtube.com/@mkbhd or youtube.com/user/marquesbrownlee"
                  className="block w-full pl-10 pr-3 py-4 bg-zinc-950 border border-zinc-800 rounded-2xl focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500/50 transition-colors text-zinc-100 placeholder-zinc-500"
                  required
                />
              </div>
              <p className="text-xs text-zinc-500">
                Supports @handle URLs, legacy /user/ usernames, /c/ custom links, and canonical /channel/ IDs.
              </p>
            </div>

            <button
              type="submit"
              disabled={loading || !channelUrl}
              className="w-full flex items-center justify-center gap-2 bg-blue-600 hover:bg-blue-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-blue-600/20"
            >
              {loading ? (
                <>
                  <div className="animate-spin rounded-full h-5 w-5 border-b-2 border-white"></div>
                  Searching Historical Timelines...
                </>
              ) : (
                <>
                  <Search className="w-5 h-5" />
                  View Channel History
                </>
              )}
            </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-blue-500/10 border-blue-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-blue-500/20 p-2 rounded-full">
                      <Calendar className="w-6 h-6 text-blue-500" />
                    </div>
                    <div>
                      <h3 className="text-xl font-bold text-blue-400">Historical Snapshot Found!</h3>
                      <p className="text-sm text-zinc-400">
                        Snapshot captured on: {formatTimestamp(result.timestamp)}
                      </p>
                    </div>
                  </div>
                  
                  <div className="pt-2">
                    <p className="text-sm text-zinc-300 mb-4 leading-relaxed">
                      We've located an authentic snapshot of this channel in the Internet Archive. Click below to browse the channel as it appeared on that date, examine old subscriber counts, and navigate through different years using the interactive top timeline!
                    </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"
                    >
                      Enter the Wayback Machine Channel Archive
                      <ExternalLink className="w-4 h-4" />
                    </a>
                  </div>
                </div>
              ) : (
                <div className="flex flex-col items-center justify-center text-center py-6 space-y-3">
                  <UserSquare2 className="w-12 h-12 text-zinc-600" />
                  <h3 className="text-lg font-semibold text-zinc-300">No Channel History Found</h3>
                  <p className="text-zinc-500 max-w-sm">
                    This specific URL format hasn't been archived yet. Try converting the handle to an immutable Channel ID using our <Link href="/channel-id-finder" className="text-blue-400 hover:underline">Channel ID Finder</Link> and searching again.
                  </p>
                </div>
              )}
            </div>
          )}
        </div>

        {/* MASSIVE SEO CONTENT SECTION */}
        <div className="space-y-16 pt-8 text-zinc-300">
          
          {/* Section 1: What is YouTube Channel History 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">
              <UserSquare2 className="w-7 h-7 text-blue-500 flex-shrink-0" />
              What is YouTube Channel History Viewer?
            </h2>
            <div className="prose prose-invert max-w-none text-zinc-400 leading-relaxed space-y-4">
              <p>
                The YouTube Channel History Viewer is a digital time machine built for content creators, media historians, brand strategists, and passionate YouTube enthusiasts. YouTube is no longer just a video-sharing site; it is a cultural archive that has shaped global entertainment for over two decades. Yet, as YouTube continuously modernizes its interface, the nostalgic designs, early creative experiments, and milestone achievements of legendary creators are quietly overwritten.
              </p>
              <p>
                Our tool interfaces directly with the Internet Archive's expansive historical indexing nodes. By parsing any modern YouTube channel link, handle, or custom username, our engine traces historical snapshots taken by web crawlers dating back to the platform's formative years in 2005. It uncovers how creators branded themselves when they had fewer than 10,000 subscribers, what banner artwork they designed, what their very first uploads looked like, and how their channel presentation evolved.
              </p>
              <p>
                For aspiring creators, the Channel History Viewer is far more than a nostalgic trip down memory lane—it is a masterclass in creator growth. Being able to inspect the modest, unpolished beginnings of today's 10-million-subscriber giants proves that every major media enterprise started with humble experiments. It provides the historical context and tactical insights needed to analyze competitive trajectories and inspire your own content journey.
              </p>
            </div>
          </section>

          {/* Section 2: How to Use - Step by Step Guide */}
          <section className="space-y-6">
            <h2 className="text-2xl sm:text-3xl font-bold text-zinc-100 flex items-center gap-3">
              <Compass className="w-7 h-7 text-blue-500 flex-shrink-0" />
              How to Use Channel History Viewer - Step by Step Guide
            </h2>
            <p className="text-zinc-400 leading-relaxed">
              Exploring historical channel iterations is effortless. Follow this structured walkthrough to travel through any creator's digital timeline:
            </p>
            <div className="grid gap-6 md:grid-cols-2">
              <div className="bg-zinc-900/50 border border-zinc-800 rounded-2xl p-6 space-y-3">
                <div className="w-10 h-10 rounded-xl bg-blue-500/20 text-blue-400 font-bold flex items-center justify-center text-lg">
                  1
                </div>
                <h3 className="text-xl font-bold text-zinc-200">Copy the Target Channel URL</h3>
                <p className="text-sm text-zinc-400 leading-relaxed">
                  Go to YouTube and navigate to the creator's channel page. Copy their link from the browser URL bar. Our tool supports modern handles (<code className="text-blue-400 bg-zinc-950 px-1 py-0.5 rounded">youtube.com/@handle</code>), legacy usernames (<code className="text-zinc-300">/user/name</code>), and custom URLs (<code className="text-zinc-300">/c/name</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-blue-500/20 text-blue-400 font-bold flex items-center justify-center text-lg">
                  2
                </div>
                <h3 className="text-xl font-bold text-zinc-200">Paste into Our Archival Search Bar</h3>
                <p className="text-sm text-zinc-400 leading-relaxed">
                  Paste the channel URL into the search field above. If you only know their handle or suspect their older URL was different, you can also use our <Link href="/channel-id-finder" className="text-blue-400 hover:underline">Channel ID Finder</Link> to look up their permanent "UC" channel ID.
                </p>
              </div>

              <div className="bg-zinc-900/50 border border-zinc-800 rounded-2xl p-6 space-y-3">
                <div className="w-10 h-10 rounded-xl bg-blue-500/20 text-blue-400 font-bold flex items-center justify-center text-lg">
                  3
                </div>
                <h3 className="text-xl font-bold text-zinc-200">Launch Timeline Investigation</h3>
                <p className="text-sm text-zinc-400 leading-relaxed">
                  Click the <strong className="text-zinc-200">View Channel History</strong> button. Our backend initiates a real-time query against the Wayback Machine's CDX cluster, identifying the most comprehensive historical snapshot recorded.
                </p>
              </div>

              <div className="bg-zinc-900/50 border border-zinc-800 rounded-2xl p-6 space-y-3">
                <div className="w-10 h-10 rounded-xl bg-blue-500/20 text-blue-400 font-bold flex items-center justify-center text-lg">
                  4
                </div>
                <h3 className="text-xl font-bold text-zinc-200">Navigate the Historical Timeline</h3>
                <p className="text-sm text-zinc-400 leading-relaxed">
                  Click the generated archive link to enter the Wayback Machine interface. Use the interactive calendar timeline bar across the top of the screen to jump across different years (e.g., 2008, 2012, 2016, 2020) and observe year-over-year channel evolution.
                </p>
              </div>

              <div className="bg-zinc-900/50 border border-zinc-800 rounded-2xl p-6 space-y-3 md:col-span-2">
                <div className="w-10 h-10 rounded-xl bg-blue-500/20 text-blue-400 font-bold flex items-center justify-center text-lg">
                  5
                </div>
                <h3 className="text-xl font-bold text-zinc-200">Extract Lost Content & Milestone Data</h3>
                <p className="text-sm text-zinc-400 leading-relaxed">
                  Inspect the channel's historic video grid. If you spot titles of legendary videos that have since been removed, you can feed their video URLs directly into our <Link href="/deleted-video-finder" className="text-blue-400 hover:underline">Deleted Video Finder</Link> to check for individual video playback archives.
                </p>
              </div>
            </div>
          </section>

          {/* Section 3: Key Features */}
          <section className="space-y-6">
            <h2 className="text-2xl sm:text-3xl font-bold text-zinc-100 flex items-center gap-3">
              <Zap className="w-7 h-7 text-blue-500 flex-shrink-0" />
              Key Features of Our Channel History Viewer
            </h2>
            <p className="text-zinc-400 leading-relaxed">
              Designed for digital preservationists and YouTube creators, our tool provides a comprehensive toolkit for examining historical creator assets:
            </p>
            <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
              <div className="bg-zinc-900/50 border border-zinc-800 rounded-2xl p-6 space-y-3">
                <div className="p-3 bg-blue-500/10 text-blue-400 rounded-xl w-fit">
                  <Calendar className="w-6 h-6" />
                </div>
                <h3 className="text-lg font-bold text-zinc-100">Multi-Decade Timeline Access</h3>
                <p className="text-sm text-zinc-400 leading-relaxed">
                  Query snapshots spanning from 2005 through the present day. Discover what channels looked like across every era of YouTube's design history.
                </p>
              </div>

              <div className="bg-zinc-900/50 border border-zinc-800 rounded-2xl p-6 space-y-3">
                <div className="p-3 bg-blue-500/10 text-blue-400 rounded-xl w-fit">
                  <RefreshCw className="w-6 h-6" />
                </div>
                <h3 className="text-lg font-bold text-zinc-100">Supports All URL Formats</h3>
                <p className="text-sm text-zinc-400 leading-relaxed">
                  Accepts modern @handle links, vintage /user/ paths, vanity URLs (/c/), and permanent 24-character /channel/ identifiers seamlessly.
                </p>
              </div>

              <div className="bg-zinc-900/50 border border-zinc-800 rounded-2xl p-6 space-y-3">
                <div className="p-3 bg-blue-500/10 text-blue-400 rounded-xl w-fit">
                  <TrendingUp className="w-6 h-6" />
                </div>
                <h3 className="text-lg font-bold text-zinc-100">Historic Milestone Discovery</h3>
                <p className="text-sm text-zinc-400 leading-relaxed">
                  Inspect historical subscriber counts, view counts, and joined dates as they were recorded at exact moments in creator careers.
                </p>
              </div>

              <div className="bg-zinc-900/50 border border-zinc-800 rounded-2xl p-6 space-y-3">
                <div className="p-3 bg-blue-500/10 text-blue-400 rounded-xl w-fit">
                  <Laptop className="w-6 h-6" />
                </div>
                <h3 className="text-lg font-bold text-zinc-100">Vintage Layout Visualizer</h3>
                <p className="text-sm text-zinc-400 leading-relaxed">
                  Experience retro YouTube designs including the 2008 customizable color boxes, 2011 Cosmic Panda, and 2013 One Channel layout.
                </p>
              </div>

              <div className="bg-zinc-900/50 border border-zinc-800 rounded-2xl p-6 space-y-3">
                <div className="p-3 bg-blue-500/10 text-blue-400 rounded-xl w-fit">
                  <ShieldCheck className="w-6 h-6" />
                </div>
                <h3 className="text-lg font-bold text-zinc-100">Safe, Anonymous & Free</h3>
                <p className="text-sm text-zinc-400 leading-relaxed">
                  Zero logins, zero cookies tracked, and zero creator notifications. Run unlimited historical queries completely anonymously.
                </p>
              </div>

              <div className="bg-zinc-900/50 border border-zinc-800 rounded-2xl p-6 space-y-3">
                <div className="p-3 bg-blue-500/10 text-blue-400 rounded-xl w-fit">
                  <Layers className="w-6 h-6" />
                </div>
                <h3 className="text-lg font-bold text-zinc-100">Integrated Toolkit Synergy</h3>
                <p className="text-sm text-zinc-400 leading-relaxed">
                  Seamlessly paired with our <Link href="/channel-id-finder" className="text-blue-400 hover:underline">Channel ID Finder</Link> and <Link href="/monetization-checker" className="text-blue-400 hover:underline">Monetization Checker</Link> for end-to-end channel analysis.
                </p>
              </div>
            </div>
          </section>

          {/* Section 4: Why Choose YTToolkits? */}
          <section className="space-y-6 bg-zinc-900/30 border border-zinc-800/60 rounded-3xl p-6 sm:p-10">
            <h2 className="text-2xl sm:text-3xl font-bold text-zinc-100 flex items-center gap-3">
              <Sparkles className="w-7 h-7 text-blue-500 flex-shrink-0" />
              Why Choose YTToolkits Channel History Viewer?
            </h2>
            <div className="prose prose-invert max-w-none text-zinc-400 leading-relaxed space-y-4">
              <p>
                Navigating the Wayback Machine directly for YouTube channels is notoriously tricky. When YouTube rolled out "@handles" globally in late 2022, billions of historical channel links broke inside archival search bars. If you type a modern @handle URL into the Wayback Machine, it often reports that zero snapshots exist—because all historical crawls occurred under the creator's legacy username or Channel ID!
              </p>
              <p>
                YTToolkits eliminates this confusion. Our intelligent backend performs automated URL pattern resolution and snapshot detection, identifying the closest matching active snapshot cluster without requiring you to manually guess the channel's 2011 URL syntax.
              </p>
            </div>

            {/* Comparison Table */}
            <div className="overflow-x-auto pt-4">
              <table className="w-full text-left text-sm text-zinc-400 border border-zinc-800 rounded-2xl overflow-hidden">
                <thead className="bg-zinc-900 text-zinc-200 text-xs uppercase tracking-wider">
                  <tr>
                    <th className="py-4 px-6 border-b border-zinc-800">Capability</th>
                    <th className="py-4 px-6 border-b border-zinc-800 text-blue-400 font-bold">YTToolkits Channel Viewer</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">Social Blade / Stats Trackers</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">Handle to Archive Mapping</td>
                    <td className="py-4 px-6 text-green-400 font-semibold">Automatic Detection</td>
                    <td className="py-4 px-6 text-red-400">Fails on @handles</td>
                    <td className="py-4 px-6 text-zinc-400">Text-only statistics</td>
                  </tr>
                  <tr className="hover:bg-zinc-900/30">
                    <td className="py-4 px-6 font-medium text-zinc-200">Visual Layout Reconstruction</td>
                    <td className="py-4 px-6 text-green-400 font-semibold">Full Historical UI</td>
                    <td className="py-4 px-6 text-green-400 font-semibold">Full Historical UI</td>
                    <td className="py-4 px-6 text-red-400">None (Graphs only)</td>
                  </tr>
                  <tr className="hover:bg-zinc-900/30">
                    <td className="py-4 px-6 font-medium text-zinc-200">Historical Video Grid View</td>
                    <td className="py-4 px-6 text-green-400 font-semibold">Yes (Titles & Thumbnails)</td>
                    <td className="py-4 px-6 text-green-400 font-semibold">Yes</td>
                    <td className="py-4 px-6 text-red-400">No</td>
                  </tr>
                  <tr className="hover:bg-zinc-900/30">
                    <td className="py-4 px-6 font-medium text-zinc-200">Cost & Subscription</td>
                    <td className="py-4 px-6 text-green-400 font-semibold">100% Free Forever</td>
                    <td className="py-4 px-6 text-green-400 font-semibold">100% Free</td>
                    <td className="py-4 px-6 text-zinc-400">Paid tiers for old history</td>
                  </tr>
                  <tr className="hover:bg-zinc-900/30">
                    <td className="py-4 px-6 font-medium text-zinc-200">Ease of Navigation</td>
                    <td className="py-4 px-6 text-green-400 font-semibold">One-Click Portal</td>
                    <td className="py-4 px-6 text-zinc-400">Complex calendar grids</td>
                    <td className="py-4 px-6 text-zinc-400">Moderate</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </section>

          {/* Section 5: The Evolution of YouTube Channel Layouts */}
          <section className="space-y-6">
            <h2 className="text-2xl sm:text-3xl font-bold text-zinc-100 flex items-center gap-3">
              <History className="w-7 h-7 text-blue-500 flex-shrink-0" />
              The Evolution of YouTube Channel Layouts (2005 - Present)
            </h2>
            <div className="prose prose-invert max-w-none text-zinc-400 leading-relaxed space-y-4">
              <p>
                To fully appreciate what you encounter inside our Channel History Viewer, it helps to understand the distinct architectural eras of YouTube channel design. YouTube has fundamentally rewritten its frontend layout five times over its history:
              </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">
                  <Laptop className="w-5 h-5 text-blue-400" />
                  2005 - 2007: The Modular MySpace Era
                </h3>
                <p className="text-sm text-zinc-400 leading-relaxed">
                  During YouTube's genesis, channels mirrored classic Web 2.0 social profiles. Creators had full freedom to customize background tile patterns, border hex colors, font choices, and modular box arrangements. Channels featured "Bulletin Boards", interactive comment walls, and the iconic 5-star rating widget.
                </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">
                  <Laptop className="w-5 h-5 text-green-400" />
                  2008 - 2011: The Grid & Featured Video Era
                </h3>
                <p className="text-sm text-zinc-400 leading-relaxed">
                  YouTube standardized the channel layout while retaining custom full-bleed background wallpapers. Channels spotlighted a large autoplaying "Featured Video" player on top, surrounded by customizable sidebar modules displaying subscribers, friends, subscriptions, and recent favorites.
                </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">
                  <Laptop className="w-5 h-5 text-purple-400" />
                  2011 - 2012: The Cosmic Panda Redesign
                </h3>
                <p className="text-sm text-zinc-400 leading-relaxed">
                  Dubbed "Cosmic Panda", this experimental redesign removed colorful full-page backgrounds in favor of a sleek, dark-slate gray aesthetic. It introduced modular tabs for uploads, playlists, and feed activities, paving the way for YouTube's transition into a living television network.
                </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">
                  <Laptop className="w-5 h-5 text-orange-400" />
                  2013 - Present: One Channel & Material Design
                </h3>
                <p className="text-sm text-zinc-400 leading-relaxed">
                  In March 2013, YouTube introduced the "One Channel" layout, replacing custom page skins with responsive 2560x1440 channel art banners that looked uniform across TVs, desktops, and mobile devices. Modern updates added Shorts shelves, community tabs, and @handle navigation.
                </p>
              </div>
            </div>
          </section>

          {/* Section 6: How Creators Can Reverse-Engineer Growth */}
          <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">
              <TrendingUp className="w-7 h-7 text-blue-500 flex-shrink-0" />
              How Creators Can Reverse-Engineer Competitor Growth
            </h2>
            <div className="prose prose-invert max-w-none text-zinc-400 leading-relaxed space-y-4">
              <p>
                Studying a top competitor's channel history provides deep tactical intelligence that modern analytics tools cannot replicate. When you step through a major creator's historical snapshots, look for these transformative pivot patterns:
              </p>
              <h3 className="text-xl font-bold text-zinc-200 pt-2">1. Pinpointing Content Niche Pivots</h3>
              <p>
                Hardly any top YouTuber started making the exact type of content they are famous for today. By looking at 2014-2017 snapshots of top gaming or lifestyle channels, you can identify the exact upload where they pivoted from generic gameplay to high-concept challenges, storytelling, or high-retention formats.
              </p>
              <h3 className="text-xl font-bold text-zinc-200 pt-2">2. Thumbnail & Visual Hook Evolution</h3>
              <p>
                Compare the thumbnail design philosophies of a channel across different years. You will witness firsthand the transition from crowded, low-contrast text overlays to hyper-focused, expressive three-color visual hooks that maximize Click-Through Rate (CTR).
              </p>
              <h3 className="text-xl font-bold text-zinc-200 pt-2">3. Video Title Psychology Shifts</h3>
              <p>
                Early YouTube titles were keyword-stuffed or phrased like personal diary entries (e.g., "Playing Minecraft Part 4"). By observing how titles transformed into emotionally provocative, curiositiy-driven hooks, you learn how the algorithm's reward mechanisms matured over the last decade.
              </p>
            </div>
          </section>

          {/* Section 7: Frequently Asked Questions (Accordion) */}
          <section className="space-y-6">
            <div className="space-y-2">
              <h2 className="text-2xl sm:text-3xl font-bold text-zinc-100 flex items-center gap-3">
                <HelpCircle className="w-7 h-7 text-blue-500 flex-shrink-0" />
                Frequently Asked Questions
              </h2>
              <p className="text-zinc-400">
                Detailed answers to common questions about viewing past channel layouts, archival accuracy, and creator timeline discovery.
              </p>
            </div>

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

          {/* Section 8: Related YouTube Tools */}
          <section className="space-y-6 pt-4 border-t border-zinc-800">
            <div className="space-y-2">
              <h2 className="text-2xl sm:text-3xl font-bold text-zinc-100 flex items-center gap-3">
                <PlaySquare className="w-7 h-7 text-blue-500 flex-shrink-0" />
                Related YouTube Creator & Channel Tools
              </h2>
              <p className="text-zinc-400">
                Expand your YouTube research and channel management toolkit with our complementary free utilities:
              </p>
            </div>

            <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3 pt-2">
              <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, 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">
                  Find Channel ID <ArrowRight className="w-4 h-4 ml-1" />
                </div>
              </Link>

              <Link
                href="/deleted-video-finder"
                className="group bg-zinc-900/50 border border-zinc-800 hover:border-red-500/50 rounded-2xl p-6 transition-all duration-200 flex flex-col justify-between"
              >
                <div className="space-y-3">
                  <div className="p-3 bg-red-500/10 text-red-400 rounded-xl w-fit group-hover:scale-110 transition-transform">
                    <History className="w-6 h-6" />
                  </div>
                  <h3 className="text-lg font-bold text-zinc-100 group-hover:text-red-400 transition-colors">
                    Deleted Video Finder
                  </h3>
                  <p className="text-sm text-zinc-400">
                    Recover vanished or deleted YouTube videos discovered during your channel history audits.
                  </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="/monetization-checker"
                className="group bg-zinc-900/50 border border-zinc-800 hover:border-green-500/50 rounded-2xl p-6 transition-all duration-200 flex flex-col justify-between"
              >
                <div className="space-y-3">
                  <div className="p-3 bg-green-500/10 text-green-400 rounded-xl w-fit group-hover:scale-110 transition-transform">
                    <BarChart3 className="w-6 h-6" />
                  </div>
                  <h3 className="text-lg font-bold text-zinc-100 group-hover:text-green-400 transition-colors">
                    Monetization Checker
                  </h3>
                  <p className="text-sm text-zinc-400">
                    Check whether any YouTube channel is officially approved and monetized in the YouTube Partner Program.
                  </p>
                </div>
                <div className="pt-4 flex items-center text-sm font-medium text-green-400 group-hover:translate-x-1 transition-transform">
                  Check Monetization <ArrowRight className="w-4 h-4 ml-1" />
                </div>
              </Link>

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

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

              <Link
                href="/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>
  );
}