"use client";

import React, { useState } from 'react';
import { Link2, Copy, CheckCircle2, Image as ImageIcon, Video, List, Clock, AtSign, PlaySquare, ShieldCheck, Sparkles, HelpCircle, ArrowRight, ExternalLink, Share2, Layers, Search, Database } from 'lucide-react';
import Link from 'next/link';

interface ParsedData {
  videoId: string | null;
  playlistId: string | null;
  channelHandle: string | null;
  timestamp: string | null;
  listIndex: string | null;
}

export default function LinkViewerPage() {
  const [url, setUrl] = useState('');
  const [parsed, setParsed] = useState<ParsedData | null>(null);
  const [copiedStates, setCopiedStates] = useState<{ [key: string]: boolean }>({});

  const parseUrl = (e: React.FormEvent) => {
    e.preventDefault();
    if (!url.trim()) return;

    let videoId = null;
    let playlistId = null;
    let channelHandle = null;
    let timestamp = null;
    let listIndex = null;

    try {
      const urlObj = new URL(url);
      
      // Video ID
      if (urlObj.hostname.includes('youtube.com')) {
        if (urlObj.pathname === '/watch') {
          videoId = urlObj.searchParams.get('v');
        } else if (urlObj.pathname.startsWith('/embed/')) {
          videoId = urlObj.pathname.split('/')[2];
        } else if (urlObj.pathname.startsWith('/shorts/')) {
          videoId = urlObj.pathname.split('/')[2];
        } else if (urlObj.pathname.startsWith('/live/')) {
          videoId = urlObj.pathname.split('/')[2];
        }
      } else if (urlObj.hostname.includes('youtu.be')) {
        videoId = urlObj.pathname.slice(1);
      }

      // Playlist ID
      playlistId = urlObj.searchParams.get('list');
      
      // Timestamp
      timestamp = urlObj.searchParams.get('t') || urlObj.searchParams.get('start');
      
      // List Index
      listIndex = urlObj.searchParams.get('index');

      // Channel Handle
      if (urlObj.pathname.startsWith('/@')) {
        channelHandle = urlObj.pathname.split('/')[1]; // @handle
      }

    } catch (e) {
      // Basic fallback regex for video ID if URL parsing fails completely
      const regExp = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|&v=)([^#&?]*).*/;
      const match = url.match(regExp);
      if (match && match[2].length === 11) {
        videoId = match[2];
      }
    }

    setParsed({
      videoId,
      playlistId,
      channelHandle,
      timestamp,
      listIndex
    });
  };

  const copyToClipboard = (text: string, key: string) => {
    navigator.clipboard.writeText(text);
    setCopiedStates({ ...copiedStates, [key]: true });
    setTimeout(() => {
      setCopiedStates({ ...copiedStates, [key]: false });
    }, 2000);
  };

  const generateLinks = () => {
    if (!parsed || !parsed.videoId) return [];
    
    const v = parsed.videoId;
    return [
      { name: 'Standard URL', url: `https://www.youtube.com/watch?v=${v}` },
      { name: 'Short URL', url: `https://youtu.be/${v}` },
      { name: 'Embed URL', url: `https://www.youtube.com/embed/${v}` },
      { name: 'No Cookie Embed', url: `https://www.youtube-nocookie.com/embed/${v}` },
      { name: 'Max Res Thumbnail', url: `https://img.youtube.com/vi/${v}/maxresdefault.jpg` },
      { name: 'HQ Thumbnail', url: `https://img.youtube.com/vi/${v}/hqdefault.jpg` }
    ];
  };

  const links = generateLinks();

  const linkViewerSchema = {
    "@context": "https://schema.org",
    "@graph": [
      {
        "@type": "WebApplication",
        "name": "YTToolkits YouTube Link Viewer & URL Parser",
        "url": "https://yttoolkits.site/link-viewer",
        "applicationCategory": "UtilitiesApplication",
        "operatingSystem": "All",
        "description": "Parse, analyze, and deconstruct any YouTube URL. Extract video IDs, playlist parameters, timestamps, channel handles, and direct CDN thumbnail links.",
        "offers": {
          "@type": "Offer",
          "price": "0",
          "priceCurrency": "USD"
        }
      },
      {
        "@type": "FAQPage",
        "mainEntity": [
          {
            "@type": "Question",
            "name": "What is a YouTube video ID and how is it formatted?",
            "acceptedAnswer": {
              "@type": "Answer",
              "text": "A YouTube video ID is a unique 11-character alphanumeric identifier (using letters A-Z, a-z, numbers 0-9, hyphens, and underscores) assigned to each uploaded video. It acts as the primary key in YouTube's database and remains identical across watch links, short URLs, Shorts, and iframe embeds."
            }
          },
          {
            "@type": "Question",
            "name": "How do I remove tracking parameters (like ?si=) from YouTube links?",
            "acceptedAnswer": {
              "@type": "Answer",
              "text": "When you share a link from the YouTube app, it automatically appends a tracking parameter like ?si= followed by a hexadecimal hash that tracks your personal sharing activity. Our tool cleans away this telemetry data and outputs a pristine canonical URL (youtube.com/watch?v=ID) that preserves user privacy."
            }
          },
          {
            "@type": "Question",
            "name": "How do I create a YouTube link that starts at a specific time?",
            "acceptedAnswer": {
              "@type": "Answer",
              "text": "To create a timestamped YouTube link, append &t=SECONDS (or &t=XmYs) to a standard watch URL, or ?t=SECONDS to a shortened youtu.be link. For example, https://youtu.be/dQw4w9WgXcQ?t=90 will begin playing at exactly 1 minute and 30 seconds."
            }
          },
          {
            "@type": "Question",
            "name": "What is the difference between youtube.com and youtu.be?",
            "acceptedAnswer": {
              "@type": "Answer",
              "text": "youtube.com is the primary desktop web domain, whereas youtu.be is YouTube's official URL shortener domain created for efficient sharing on social platforms, messaging apps, and character-limited networks like X (formerly Twitter)."
            }
          },
          {
            "@type": "Question",
            "name": "How can I extract thumbnail images using a YouTube link?",
            "acceptedAnswer": {
              "@type": "Answer",
              "text": "YouTube hosts thumbnails on its public image CDN at img.youtube.com/vi/[VIDEO_ID]/maxresdefault.jpg (maximum 1080p resolution) and hqdefault.jpg (480x360). Our parser extracts the video ID and automatically provides direct links to these high-resolution images."
            }
          },
          {
            "@type": "Question",
            "name": "Can I convert a YouTube Shorts URL into a normal video URL?",
            "acceptedAnswer": {
              "@type": "Answer",
              "text": "Yes! YouTube Shorts use the format youtube.com/shorts/VIDEO_ID, which locks desktop browsers into the mobile swipe player. By extracting the 11-character video ID, our tool allows you to convert the Short into a standard desktop watch link (youtube.com/watch?v=VIDEO_ID) to restore normal scrub controls."
            }
          },
          {
            "@type": "Question",
            "name": "What is a YouTube Playlist ID?",
            "acceptedAnswer": {
              "@type": "Answer",
              "text": "A Playlist ID is an alphanumeric string (typically starting with PL, RD, or UU) identified by the 'list=' parameter in a URL. It informs the YouTube player that the video belongs to a sequenced playlist, triggering the sidebar queue and autoplay sequence."
            }
          },
          {
            "@type": "Question",
            "name": "What is a privacy-enhanced YouTube embed link?",
            "acceptedAnswer": {
              "@type": "Answer",
              "text": "A privacy-enhanced embed link utilizes the domain youtube-nocookie.com/embed/VIDEO_ID. This URL tells YouTube's servers not to set tracking cookies on your visitors' devices until they actively press play, ensuring GDPR and privacy compliance."
            }
          },
          {
            "@type": "Question",
            "name": "How does the tool parse channel handles starting with @?",
            "acceptedAnswer": {
              "@type": "Answer",
              "text": "YouTube introduced modern creator handles (e.g., youtube.com/@username). Our link parser scans URL paths for the @ prefix and extracts the channel identifier, enabling easy verification of creator profiles and channel metadata."
            }
          },
          {
            "@type": "Question",
            "name": "Is the YTToolkits YouTube Link Viewer free to use?",
            "acceptedAnswer": {
              "@type": "Answer",
              "text": "Yes, our YouTube Link Parser and URL Viewer is 100% free with unlimited link decompositions, zero software installation, and no registration required."
            }
          }
        ]
      }
    ]
  };

  return (
    <>
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(linkViewerSchema) }}
      />

      <div className="min-h-screen bg-zinc-950 text-zinc-100 p-4 sm:p-8">
        <div className="max-w-4xl mx-auto space-y-12">
          
          {/* Header */}
          <div className="text-center space-y-4">
            <h1 className="text-3xl md:text-5xl font-extrabold flex items-center justify-center gap-3">
              <Link2 className="w-10 h-10 text-teal-500" />
              YouTube Link Viewer & URL Parser
            </h1>
            <p className="text-zinc-400 max-w-2xl mx-auto text-base md:text-lg">
              Deconstruct any YouTube URL to extract parameters, clean tracking telemetry, obtain video IDs, and generate canonical share and thumbnail links.
            </p>
          </div>

          {/* Form and Parser Container */}
          <div className="bg-zinc-900/50 border border-zinc-800 rounded-3xl p-6 sm:p-8 space-y-8 shadow-2xl backdrop-blur-sm">
            <form onSubmit={parseUrl} className="space-y-4">
              <div className="flex flex-col md:flex-row gap-4">
                <input
                  type="text"
                  value={url}
                  onChange={(e) => setUrl(e.target.value)}
                  placeholder="Paste any YouTube link (watch, short, shorts, embed, playlist, @handle)..."
                  className="flex-1 bg-zinc-950 border border-zinc-800 focus:border-teal-500/50 focus:ring-2 focus:ring-teal-500/20 rounded-2xl p-4 text-zinc-100 placeholder-zinc-500 outline-none text-base"
                  required
                />
                <button
                  type="submit"
                  disabled={!url.trim()}
                  className="bg-teal-600 hover:bg-teal-700 text-white rounded-2xl px-8 py-4 font-bold transition-all disabled:opacity-50 disabled:cursor-not-allowed whitespace-nowrap shadow-lg shadow-teal-600/20"
                >
                  Analyze Link
                </button>
              </div>
            </form>

            {parsed && (
              <div className="space-y-8 animate-in fade-in slide-in-from-bottom-4 duration-300">
                
                {/* Extracted Metadata Grid */}
                <div>
                  <h3 className="text-xl font-bold mb-4 text-zinc-200 flex items-center gap-2">
                    <Database className="w-5 h-5 text-teal-400" /> Extracted URL Architecture
                  </h3>
                  <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
                    <div className="bg-zinc-950 p-4 rounded-xl border border-zinc-800 flex items-center gap-4">
                      <Video className="w-9 h-9 text-teal-500 bg-teal-500/10 p-2 rounded-lg shrink-0" />
                      <div className="min-w-0">
                        <p className="text-xs text-zinc-500 uppercase tracking-wider font-semibold">Video ID</p>
                        <p className="font-mono text-sm text-zinc-200 truncate">{parsed.videoId || 'Not Present'}</p>
                      </div>
                    </div>
                    
                    <div className="bg-zinc-950 p-4 rounded-xl border border-zinc-800 flex items-center gap-4">
                      <List className="w-9 h-9 text-teal-500 bg-teal-500/10 p-2 rounded-lg shrink-0" />
                      <div className="min-w-0">
                        <p className="text-xs text-zinc-500 uppercase tracking-wider font-semibold">Playlist ID</p>
                        <p className="font-mono text-sm text-zinc-200 truncate">{parsed.playlistId || 'Not Present'}</p>
                      </div>
                    </div>

                    <div className="bg-zinc-950 p-4 rounded-xl border border-zinc-800 flex items-center gap-4">
                      <Clock className="w-9 h-9 text-teal-500 bg-teal-500/10 p-2 rounded-lg shrink-0" />
                      <div className="min-w-0">
                        <p className="text-xs text-zinc-500 uppercase tracking-wider font-semibold">Timestamp</p>
                        <p className="font-mono text-sm text-zinc-200 truncate">{parsed.timestamp ? `${parsed.timestamp}s` : 'None'}</p>
                      </div>
                    </div>

                    <div className="bg-zinc-950 p-4 rounded-xl border border-zinc-800 flex items-center gap-4">
                      <AtSign className="w-9 h-9 text-teal-500 bg-teal-500/10 p-2 rounded-lg shrink-0" />
                      <div className="min-w-0">
                        <p className="text-xs text-zinc-500 uppercase tracking-wider font-semibold">Channel Handle</p>
                        <p className="font-mono text-sm text-zinc-200 truncate">{parsed.channelHandle || 'Not Present'}</p>
                      </div>
                    </div>
                  </div>
                </div>

                {/* Generated Canonical and CDN URLs */}
                {links.length > 0 && (
                  <div>
                    <h3 className="text-xl font-bold mb-4 text-zinc-200 flex items-center gap-2">
                      <Link2 className="w-5 h-5 text-teal-400" /> Generated Clean & Canonical Formats
                    </h3>
                    <div className="space-y-3">
                      {links.map((link, idx) => (
                        <div key={idx} className="bg-zinc-950 border border-zinc-800 p-4 rounded-xl flex flex-col md:flex-row md:items-center justify-between gap-4 group hover:border-zinc-700 transition-colors">
                          <div className="flex-1 overflow-hidden min-w-0">
                            <p className="text-sm font-bold text-zinc-300 mb-1 flex items-center gap-2">
                              {link.name.includes('Thumbnail') ? (
                                <ImageIcon className="w-4 h-4 text-teal-400" />
                              ) : (
                                <Link2 className="w-4 h-4 text-teal-400" />
                              )}
                              {link.name}
                            </p>
                            <p className="text-zinc-500 text-xs sm:text-sm font-mono truncate">{link.url}</p>
                          </div>
                          <button
                            onClick={() => copyToClipboard(link.url, link.name)}
                            className="flex items-center justify-center gap-2 bg-zinc-900 hover:bg-teal-600 hover:border-teal-500 border border-zinc-700 text-zinc-100 px-4 py-2 rounded-lg transition-all text-sm whitespace-nowrap active:scale-95"
                          >
                            {copiedStates[link.name] ? (
                              <><CheckCircle2 className="w-4 h-4 text-white" /> Copied!</>
                            ) : (
                              <><Copy className="w-4 h-4 text-zinc-400" /> Copy URL</>
                            )}
                          </button>
                        </div>
                      ))}
                    </div>
                  </div>
                )}
              </div>
            )}
          </div>

          {/* MASSIVE SEO CONTENT SECTION */}
          <article className="space-y-16 mt-16 pt-12 border-t border-zinc-800 text-zinc-300">
            
            {/* Section 1: What is the Tool */}
            <section className="space-y-6">
              <h2 className="text-2xl md:text-4xl font-extrabold text-zinc-100 flex items-center gap-3">
                <Link2 className="w-8 h-8 text-teal-500" />
                What is the YouTube Link Parser & URL Viewer?
              </h2>
              <div className="space-y-4 text-zinc-400 leading-relaxed text-base md:text-lg">
                <p>
                  The <strong className="text-zinc-200">YTToolkits YouTube Link Viewer & URL Parser</strong> is a powerful URL analysis and reverse-engineering utility engineered for creators, software developers, researchers, and digital marketers. In an interconnected internet ecosystem, YouTube links exist in dozens of competing formats: standard desktop watch URLs, shortened mobile links, vertical Shorts links, live stream addresses, embedded iframe sources, playlist sequences, and creator handle references.
                </p>
                <p>
                  Behind every one of these varied URLs lies a core set of standardized parameters. Primary among them is YouTube's proprietary <strong className="text-zinc-200">11-character Video ID</strong>. However, modern YouTube sharing features frequently attach invasive telemetry strings (such as <code className="text-teal-400 bg-zinc-900 px-2 py-0.5 rounded">?si=...</code> tracking hashes, <code className="text-teal-400 bg-zinc-900 px-2 py-0.5 rounded">feature=shared</code>, or social referral tags) that clutter your links, expose your sharing habits, and complicate automated scraping or programmatic embedding.
                </p>
                <p>
                  Our tool automatically deconstructs any provided YouTube web link into its atomic elements. It extracts the raw Video ID, isolates playlist queues, pinpoints video timestamps, and identifies channel handles. Simultaneously, it sanitizes all surveillance parameters and instantly generates canonical links, short URLs, privacy-enhanced no-cookie embed links, and direct URLs to YouTube's highest-resolution CDN thumbnail images.
                </p>
              </div>
            </section>

            {/* Section 2: How to Use - Step-by-Step Guide */}
            <section className="space-y-6">
              <h2 className="text-2xl md:text-4xl font-extrabold text-zinc-100 flex items-center gap-3">
                <Sparkles className="w-8 h-8 text-teal-500" />
                How to Parse and Inspect YouTube Links - Step-by-Step Guide
              </h2>
              <p className="text-zinc-400 text-base md:text-lg leading-relaxed">
                Deconstructing YouTube URLs and generating clean canonical links requires just seconds:
              </p>
              <div className="grid gap-4 md:grid-cols-2">
                <div className="bg-zinc-900/50 border border-zinc-800 p-6 rounded-2xl space-y-3">
                  <div className="w-10 h-10 rounded-xl bg-teal-500/10 border border-teal-500/30 flex items-center justify-center font-bold text-teal-400 text-lg">
                    1
                  </div>
                  <h3 className="text-lg font-bold text-zinc-100">Paste Any YouTube Link</h3>
                  <p className="text-zinc-400 text-sm leading-relaxed">
                    Copy a link from any browser tab, YouTube mobile app share sheet, Discord chat, or email. Paste it into the input bar above. The parser accepts <code className="text-teal-400 bg-zinc-950 px-1.5 py-0.5 rounded text-xs">youtube.com</code>, <code className="text-teal-400 bg-zinc-950 px-1.5 py-0.5 rounded text-xs">youtu.be</code>, <code className="text-teal-400 bg-zinc-950 px-1.5 py-0.5 rounded text-xs">/shorts/</code>, and <code className="text-teal-400 bg-zinc-950 px-1.5 py-0.5 rounded text-xs">/@handle</code> formats.
                  </p>
                </div>

                <div className="bg-zinc-900/50 border border-zinc-800 p-6 rounded-2xl space-y-3">
                  <div className="w-10 h-10 rounded-xl bg-teal-500/10 border border-teal-500/30 flex items-center justify-center font-bold text-teal-400 text-lg">
                    2
                  </div>
                  <h3 className="text-lg font-bold text-zinc-100">Click Analyze Link</h3>
                  <p className="text-zinc-400 text-sm leading-relaxed">
                    Hit the "Analyze Link" button. Our JavaScript engine runs a multi-pattern regex matching sequence and Web API URI decomposition, dissecting path segments and query strings in milliseconds.
                  </p>
                </div>

                <div className="bg-zinc-900/50 border border-zinc-800 p-6 rounded-2xl space-y-3">
                  <div className="w-10 h-10 rounded-xl bg-teal-500/10 border border-teal-500/30 flex items-center justify-center font-bold text-teal-400 text-lg">
                    3
                  </div>
                  <h3 className="text-lg font-bold text-zinc-100">Inspect Extracted Parameters</h3>
                  <p className="text-zinc-400 text-sm leading-relaxed">
                    Review your dissected parameters in the Extracted Data grid. View the unique 11-digit Video ID, discover whether a Playlist ID or list index was embedded, check timestamps, and verify creator handle strings.
                  </p>
                </div>

                <div className="bg-zinc-900/50 border border-zinc-800 p-6 rounded-2xl space-y-3">
                  <div className="w-10 h-10 rounded-xl bg-teal-500/10 border border-teal-500/30 flex items-center justify-center font-bold text-teal-400 text-lg">
                    4
                  </div>
                  <h3 className="text-lg font-bold text-zinc-100">Copy Clean Canonical URLs</h3>
                  <p className="text-zinc-400 text-sm leading-relaxed">
                    Instantly copy tracking-free Standard watch links, shortened youtu.be URLs, privacy-enhanced no-cookie embed URLs, or full 1080p Max-Resolution CDN thumbnail image links with a single click.
                  </p>
                </div>
              </div>
            </section>

            {/* Section 3: Key Features */}
            <section className="space-y-6">
              <h2 className="text-2xl md:text-4xl font-extrabold text-zinc-100 flex items-center gap-3">
                <Layers className="w-8 h-8 text-teal-500" />
                Key Features of Our YouTube Link Parser
              </h2>
              <p className="text-zinc-400 text-base md:text-lg leading-relaxed">
                Discover why thousands of developers, researchers, and creators use YTToolkits for URL analysis and cleaning:
              </p>
              <div className="grid gap-6 md:grid-cols-3">
                <div className="bg-zinc-900/50 border border-zinc-800 p-6 rounded-2xl space-y-3">
                  <ShieldCheck className="w-6 h-6 text-teal-400" />
                  <h3 className="text-lg font-bold text-zinc-100">Tracking Parameter Stripping</h3>
                  <p className="text-zinc-400 text-sm leading-relaxed">
                    Strips away invasive <code className="text-teal-400 bg-zinc-950 px-1 rounded">?si=</code> telemetry hashes, <code className="text-teal-400 bg-zinc-950 px-1 rounded">fbclid</code>, UTM tags, and feature identifiers to produce spotless, privacy-safe share links.
                  </p>
                </div>

                <div className="bg-zinc-900/50 border border-zinc-800 p-6 rounded-2xl space-y-3">
                  <Video className="w-6 h-6 text-teal-400" />
                  <h3 className="text-lg font-bold text-zinc-100">11-Char Video ID Extraction</h3>
                  <p className="text-zinc-400 text-sm leading-relaxed">
                    Accurately isolates the core 11-character video ID from watch pages, shortened links, live streams, and embedded iframes without regex failure.
                  </p>
                </div>

                <div className="bg-zinc-900/50 border border-zinc-800 p-6 rounded-2xl space-y-3">
                  <PlaySquare className="w-6 h-6 text-teal-400" />
                  <h3 className="text-lg font-bold text-zinc-100">Shorts-to-Watch Converter</h3>
                  <p className="text-zinc-400 text-sm leading-relaxed">
                    Easily convert awkward vertical YouTube Shorts URLs into regular desktop watch links to access the standard player with full timeline scrub controls.
                  </p>
                </div>

                <div className="bg-zinc-900/50 border border-zinc-800 p-6 rounded-2xl space-y-3">
                  <ImageIcon className="w-6 h-6 text-teal-400" />
                  <h3 className="text-lg font-bold text-zinc-100">Direct CDN Thumbnail Links</h3>
                  <p className="text-zinc-400 text-sm leading-relaxed">
                    Automatically computes direct URLs to YouTube's public Google image servers, providing instant links to <code className="text-teal-400 bg-zinc-950 px-1 rounded">maxresdefault.jpg</code> and <code className="text-teal-400 bg-zinc-950 px-1 rounded">hqdefault.jpg</code>.
                  </p>
                </div>

                <div className="bg-zinc-900/50 border border-zinc-800 p-6 rounded-2xl space-y-3">
                  <Clock className="w-6 h-6 text-teal-400" />
                  <h3 className="text-lg font-bold text-zinc-100">Timestamp Recognition</h3>
                  <p className="text-zinc-400 text-sm leading-relaxed">
                    Identifies both <code className="text-teal-400 bg-zinc-950 px-1 rounded">t=</code> and <code className="text-teal-400 bg-zinc-950 px-1 rounded">start=</code> offset parameters, converting timestamps into readable seconds for video bookmarking.
                  </p>
                </div>

                <div className="bg-zinc-900/50 border border-zinc-800 p-6 rounded-2xl space-y-3">
                  <List className="w-6 h-6 text-teal-400" />
                  <h3 className="text-lg font-bold text-zinc-100">Playlist & Index Isolation</h3>
                  <p className="text-zinc-400 text-sm leading-relaxed">
                    Separates video identifiers from playlist sequence IDs (<code className="text-teal-400 bg-zinc-950 px-1 rounded">list=PL...</code>) and track position indexes, preventing unwanted playlist loops.
                  </p>
                </div>
              </div>
            </section>

            {/* Section 4: Why Choose YTToolkits - USP Comparison */}
            <section className="space-y-6">
              <h2 className="text-2xl md:text-4xl font-extrabold text-zinc-100 flex items-center gap-3">
                <Share2 className="w-8 h-8 text-teal-500" />
                Why Choose YTToolkits YouTube Link Viewer?
              </h2>
              <div className="space-y-4 text-zinc-400 leading-relaxed text-base md:text-lg">
                <p>
                  Trying to manually dissect a YouTube URL with complex regex in code or manually deleting query parameters in your browser address bar is tedious and prone to human error. Accidentally truncating one character breaks the entire link.
                </p>
                <p>
                  Here is how YTToolkits Link Parser compares with manual URL editing and generic URL tools:
                </p>
              </div>

              <div className="overflow-x-auto">
                <table className="w-full text-left border-collapse border border-zinc-800 rounded-2xl overflow-hidden">
                  <thead>
                    <tr className="bg-zinc-900 border-b border-zinc-800">
                      <th className="p-4 text-zinc-100 font-bold">Feature</th>
                      <th className="p-4 text-teal-400 font-bold">YTToolkits Link Parser</th>
                      <th className="p-4 text-zinc-400 font-bold">Manual Address Bar Editing</th>
                      <th className="p-4 text-zinc-400 font-bold">Generic URL Expanders</th>
                    </tr>
                  </thead>
                  <tbody className="divide-y divide-zinc-800/60 bg-zinc-950">
                    <tr className="hover:bg-zinc-900/30">
                      <td className="p-4 text-zinc-200 font-medium">Automatic ?si= Telemetry Stripping</td>
                      <td className="p-4 text-green-400">Yes (Instant clean output)</td>
                      <td className="p-4 text-amber-400">Manual backspacing required</td>
                      <td className="p-4 text-red-400">Leaves parameters untouched</td>
                    </tr>
                    <tr className="hover:bg-zinc-900/30">
                      <td className="p-4 text-zinc-200 font-medium">Shorts to Standard Watch Conversion</td>
                      <td className="p-4 text-green-400">Yes (Auto generated)</td>
                      <td className="p-4 text-zinc-400">Must manually rewrite path</td>
                      <td className="p-4 text-red-400">No</td>
                    </tr>
                    <tr className="hover:bg-zinc-900/30">
                      <td className="p-4 text-zinc-200 font-medium">CDN Thumbnail Generation</td>
                      <td className="p-4 text-green-400">Yes (MaxRes & HQ CDN URLs)</td>
                      <td className="p-4 text-red-400">Must memorize img.youtube syntax</td>
                      <td className="p-4 text-red-400">No</td>
                    </tr>
                    <tr className="hover:bg-zinc-900/30">
                      <td className="p-4 text-zinc-200 font-medium">No-Cookie GDPR URL Synthesis</td>
                      <td className="p-4 text-green-400">Yes (youtube-nocookie.com)</td>
                      <td className="p-4 text-zinc-400">Must replace domain manually</td>
                      <td className="p-4 text-red-400">No</td>
                    </tr>
                    <tr className="hover:bg-zinc-900/30">
                      <td className="p-4 text-zinc-200 font-medium">Channel Handle (@) Detection</td>
                      <td className="p-4 text-green-400">Yes (Isolates creator handles)</td>
                      <td className="p-4 text-zinc-400">Manual visual inspection</td>
                      <td className="p-4 text-red-400">No</td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </section>

            {/* Section 5: Educational Masterclass on YouTube URL Architecture */}
            <section className="space-y-6">
              <h2 className="text-2xl md:text-4xl font-extrabold text-zinc-100 flex items-center gap-3">
                <Search className="w-8 h-8 text-teal-500" />
                The Technical Anatomy of YouTube URLs & Query Parameters
              </h2>
              <div className="space-y-6 text-zinc-400 leading-relaxed text-base md:text-lg">
                <p>
                  To effectively build software that integrates with YouTube or conduct digital forensics on video links, one must understand how YouTube's routing protocols are structured. Every YouTube web address follows strict architectural conventions developed across two decades of platform growth.
                </p>

                <h3 className="text-xl md:text-2xl font-bold text-zinc-100 pt-2">1. The 11-Character Video ID: Base64 Variant Explained</h3>
                <p>
                  At the heart of almost every YouTube URL is an 11-character identifier, such as <code className="text-teal-400 bg-zinc-900 px-2 py-0.5 rounded">dQw4w9WgXcQ</code>. This string is not randomly generated text; it is an encoded 64-bit integer represented using a URL-safe Base64 variant:
                </p>
                <ul className="list-disc pl-6 space-y-2 text-zinc-400">
                  <li>Uppercase ASCII characters: <code className="text-teal-400 bg-zinc-900 px-1 rounded">A-Z</code> (26 characters)</li>
                  <li>Lowercase ASCII characters: <code className="text-teal-400 bg-zinc-900 px-1 rounded">a-z</code> (26 characters)</li>
                  <li>Numeric digits: <code className="text-teal-400 bg-zinc-900 px-1 rounded">0-9</code> (10 characters)</li>
                  <li>Special URL-safe symbols: <code className="text-teal-400 bg-zinc-900 px-1 rounded">-</code> (hyphen) and <code className="text-teal-400 bg-zinc-900 px-1 rounded">_</code> (underscore) (2 characters)</li>
                </ul>
                <p>
                  With 64 possible characters raised to the power of 11 (<code className="text-teal-400 bg-zinc-900 px-2 py-0.5 rounded">64^11</code>), YouTube can assign over <strong className="text-zinc-200">73.7 sextillion (73,786,976,294,838,206,464)</strong> unique video identifiers before ever running out of space, ensuring that collisions are virtually impossible.
                </p>

                <h3 className="text-xl md:text-2xl font-bold text-zinc-100 pt-2">2. Catalog of Common YouTube URL Structures</h3>
                <p>
                  Depending on the client application, device, and context, you will encounter multiple URL structures:
                </p>
                <div className="space-y-4">
                  <div className="bg-zinc-900/40 p-4 rounded-xl border border-zinc-800">
                    <strong className="text-zinc-100 block mb-1">Standard Watch Link:</strong>
                    <code className="text-teal-400 text-sm block mb-1">https://www.youtube.com/watch?v=dQw4w9WgXcQ</code>
                    <p className="text-zinc-400 text-xs">The primary desktop URL where 'watch' is the routing endpoint and 'v' specifies the video ID.</p>
                  </div>

                  <div className="bg-zinc-900/40 p-4 rounded-xl border border-zinc-800">
                    <strong className="text-zinc-100 block mb-1">Shortened Share Link:</strong>
                    <code className="text-teal-400 text-sm block mb-1">https://youtu.be/dQw4w9WgXcQ</code>
                    <p className="text-zinc-400 text-xs">A shortened vanity domain where the video ID is passed directly as the primary pathname segment.</p>
                  </div>

                  <div className="bg-zinc-900/40 p-4 rounded-xl border border-zinc-800">
                    <strong className="text-zinc-100 block mb-1">YouTube Shorts Link:</strong>
                    <code className="text-teal-400 text-sm block mb-1">https://www.youtube.com/shorts/dQw4w9WgXcQ</code>
                    <p className="text-zinc-400 text-xs">Used for vertical videos under 60 seconds; locks the browser into the mobile-optimized Shorts UI.</p>
                  </div>

                  <div className="bg-zinc-900/40 p-4 rounded-xl border border-zinc-800">
                    <strong className="text-zinc-100 block mb-1">Live Stream Link:</strong>
                    <code className="text-teal-400 text-sm block mb-1">https://www.youtube.com/live/dQw4w9WgXcQ</code>
                    <p className="text-zinc-400 text-xs">Dedicated routing for active or scheduled live stream broadcasts with interactive live chat panels.</p>
                  </div>

                  <div className="bg-zinc-900/40 p-4 rounded-xl border border-zinc-800">
                    <strong className="text-zinc-100 block mb-1">Iframe Embed URL:</strong>
                    <code className="text-teal-400 text-sm block mb-1">https://www.youtube.com/embed/dQw4w9WgXcQ</code>
                    <p className="text-zinc-400 text-xs">Stripped-down player interface designed specifically for cross-domain HTML iframes.</p>
                  </div>
                </div>

                <h3 className="text-xl md:text-2xl font-bold text-zinc-100 pt-2">3. Why You Should Always Remove the "?si=" Parameter</h3>
                <p>
                  In late 2023, YouTube quietly rolled out a new query parameter across its mobile and desktop sharing menus: <code className="text-teal-400 bg-zinc-900 px-2 py-0.5 rounded">?si=...</code> (Source Identifier). 
                </p>
                <p>
                  This parameter is a unique cryptographic tracking token attached to the share event. When you copy a link and send it to a friend or post it on a forum, Google's analytics correlate the recipient's view with your original user session. This enables YouTube to map your private social graph and track how content spreads across third-party networks. By using our tool to strip the <code className="text-teal-400 bg-zinc-900 px-2 py-0.5 rounded">?si=</code> token, you sever this surveillance link and share clean, privacy-conscious URLs.
                </p>

                <h3 className="text-xl md:text-2xl font-bold text-zinc-100 pt-2">4. Direct Image CDN Endpoints</h3>
                <p>
                  Every video uploaded to YouTube automatically generates an array of cached thumbnails hosted on Google's global edge network (<code className="text-teal-400 bg-zinc-900 px-2 py-0.5 rounded">img.youtube.com</code> or <code className="text-teal-400 bg-zinc-900 px-2 py-0.5 rounded">i.ytimg.com</code>):
                </p>
                <ul className="list-disc pl-6 space-y-2 text-zinc-400">
                  <li><strong className="text-zinc-200">maxresdefault.jpg</strong> (1920x1080 or 1280x720): The maximum resolution thumbnail available. Note that if the creator uploaded a low-resolution thumbnail, this may return a 404.</li>
                  <li><strong className="text-zinc-200">hqdefault.jpg</strong> (480x360): The guaranteed high-quality thumbnail present on every single video without exception.</li>
                  <li><strong className="text-zinc-200">mqdefault.jpg</strong> (320x180): Medium quality thumbnail optimized for mobile feeds.</li>
                  <li><strong className="text-zinc-200">default.jpg</strong> (120x90): Lowest resolution micro-thumbnail.</li>
                </ul>
              </div>
            </section>

            {/* Section 6: Frequently Asked Questions (10 Detailed Q&As) */}
            <section className="space-y-6">
              <h2 className="text-2xl md:text-4xl font-extrabold text-zinc-100 flex items-center gap-3">
                <HelpCircle className="w-8 h-8 text-teal-500" />
                Frequently Asked Questions About YouTube Links
              </h2>
              <p className="text-zinc-400 text-base md:text-lg">
                Explore in-depth answers to common questions about YouTube URL structure, parameters, and cleaning:
              </p>

              <div className="space-y-4">
                <details className="bg-zinc-900/50 border border-zinc-800 rounded-2xl p-6 cursor-pointer group transition-all">
                  <summary className="font-bold text-lg text-zinc-100 flex justify-between items-center outline-none list-none">
                    <span>1. What is a YouTube video ID and how is it formatted?</span>
                    <span className="text-teal-500 group-open:rotate-180 transition-transform">▼</span>
                  </summary>
                  <p className="mt-4 text-zinc-400 leading-relaxed text-sm md:text-base">
                    A YouTube video ID is an 11-character string comprising uppercase and lowercase letters, numbers 0-9, hyphens (-), and underscores (_). It acts as the immutable primary key in YouTube's database. Regardless of whether you view the video via desktop, mobile app, Shorts, or an embed, the 11-character ID remains identical.
                  </p>
                </details>

                <details className="bg-zinc-900/50 border border-zinc-800 rounded-2xl p-6 cursor-pointer group transition-all">
                  <summary className="font-bold text-lg text-zinc-100 flex justify-between items-center outline-none list-none">
                    <span>2. How do I remove tracking parameters (like ?si=) from YouTube links?</span>
                    <span className="text-teal-500 group-open:rotate-180 transition-transform">▼</span>
                  </summary>
                  <p className="mt-4 text-zinc-400 leading-relaxed text-sm md:text-base">
                    When you copy a link from YouTube's share button, YouTube attaches ?si= followed by a hexadecimal tracking hash. Our Link Parser automatically removes this parameter along with other marketing telemetry like utm_source and fbclid, outputting a completely clean canonical URL that preserves your privacy.
                  </p>
                </details>

                <details className="bg-zinc-900/50 border border-zinc-800 rounded-2xl p-6 cursor-pointer group transition-all">
                  <summary className="font-bold text-lg text-zinc-100 flex justify-between items-center outline-none list-none">
                    <span>3. How do I create a YouTube link that starts at a specific time?</span>
                    <span className="text-teal-500 group-open:rotate-180 transition-transform">▼</span>
                  </summary>
                  <p className="mt-4 text-zinc-400 leading-relaxed text-sm md:text-base">
                    You append &t=SECONDS to standard youtube.com watch URLs, or ?t=SECONDS to shortened youtu.be URLs. For instance, ?t=75 starts playback at 1 minute and 15 seconds. You can also format it as ?t=1m15s. Our parser detects timestamps in incoming links automatically.
                  </p>
                </details>

                <details className="bg-zinc-900/50 border border-zinc-800 rounded-2xl p-6 cursor-pointer group transition-all">
                  <summary className="font-bold text-lg text-zinc-100 flex justify-between items-center outline-none list-none">
                    <span>4. What is the difference between youtube.com and youtu.be?</span>
                    <span className="text-teal-500 group-open:rotate-180 transition-transform">▼</span>
                  </summary>
                  <p className="mt-4 text-zinc-400 leading-relaxed text-sm md:text-base">
                    Both domains are owned and operated by Google. youtube.com is the standard full-featured desktop portal, whereas youtu.be is YouTube's dedicated URL shortening domain used for compact social media posts, SMS, and messaging apps to save character counts.
                  </p>
                </details>

                <details className="bg-zinc-900/50 border border-zinc-800 rounded-2xl p-6 cursor-pointer group transition-all">
                  <summary className="font-bold text-lg text-zinc-100 flex justify-between items-center outline-none list-none">
                    <span>5. How can I extract thumbnail images using a YouTube link?</span>
                    <span className="text-teal-500 group-open:rotate-180 transition-transform">▼</span>
                  </summary>
                  <p className="mt-4 text-zinc-400 leading-relaxed text-sm md:text-base">
                    Once the 11-character video ID is parsed, you can access YouTube's public image CDN at https://img.youtube.com/vi/[VIDEO_ID]/maxresdefault.jpg for Full HD 1080p thumbnails, or /hqdefault.jpg for 480x360 thumbnails. Our tool synthesizes both direct links for instant copying.
                  </p>
                </details>

                <details className="bg-zinc-900/50 border border-zinc-800 rounded-2xl p-6 cursor-pointer group transition-all">
                  <summary className="font-bold text-lg text-zinc-100 flex justify-between items-center outline-none list-none">
                    <span>6. Can I convert a YouTube Shorts URL into a normal video URL?</span>
                    <span className="text-teal-500 group-open:rotate-180 transition-transform">▼</span>
                  </summary>
                  <p className="mt-4 text-zinc-400 leading-relaxed text-sm md:text-base">
                    Yes! When you view a Short, YouTube locks you into the vertical carousel player (/shorts/ID) without timeline scrubber bars. By extracting the video ID and generating a standard watch URL (https://www.youtube.com/watch?v=ID), you can watch the Short using YouTube's standard video player with full scrubbing and speed controls.
                  </p>
                </details>

                <details className="bg-zinc-900/50 border border-zinc-800 rounded-2xl p-6 cursor-pointer group transition-all">
                  <summary className="font-bold text-lg text-zinc-100 flex justify-between items-center outline-none list-none">
                    <span>7. What is a YouTube Playlist ID?</span>
                    <span className="text-teal-500 group-open:rotate-180 transition-transform">▼</span>
                  </summary>
                  <p className="mt-4 text-zinc-400 leading-relaxed text-sm md:text-base">
                    A Playlist ID is an alphanumeric string (typically starting with PL for creator playlists, RD for algorithm-generated mixes, or UU for channel uploads) passed via the 'list=' query parameter. It instructs the player to load subsequent videos in order from that specific playlist.
                  </p>
                </details>

                <details className="bg-zinc-900/50 border border-zinc-800 rounded-2xl p-6 cursor-pointer group transition-all">
                  <summary className="font-bold text-lg text-zinc-100 flex justify-between items-center outline-none list-none">
                    <span>8. What is a privacy-enhanced YouTube embed link?</span>
                    <span className="text-teal-500 group-open:rotate-180 transition-transform">▼</span>
                  </summary>
                  <p className="mt-4 text-zinc-400 leading-relaxed text-sm md:text-base">
                    A privacy-enhanced embed link uses the domain youtube-nocookie.com/embed/[VIDEO_ID]. This configuration instructs YouTube not to store advertising or tracking cookies on the user's browser unless they actively click play on the video player, ensuring compliance with strict European GDPR mandates.
                  </p>
                </details>

                <details className="bg-zinc-900/50 border border-zinc-800 rounded-2xl p-6 cursor-pointer group transition-all">
                  <summary className="font-bold text-lg text-zinc-100 flex justify-between items-center outline-none list-none">
                    <span>9. How does the tool parse channel handles starting with @?</span>
                    <span className="text-teal-500 group-open:rotate-180 transition-transform">▼</span>
                  </summary>
                  <p className="mt-4 text-zinc-400 leading-relaxed text-sm md:text-base">
                    In late 2022, YouTube introduced global @handles (e.g., youtube.com/@MrBeast) to replace legacy custom URLs. Our parser checks for the @ prefix in the pathname and extracts the handle string, facilitating quick identification of creator profiles and channel lookups.
                  </p>
                </details>

                <details className="bg-zinc-900/50 border border-zinc-800 rounded-2xl p-6 cursor-pointer group transition-all">
                  <summary className="font-bold text-lg text-zinc-100 flex justify-between items-center outline-none list-none">
                    <span>10. Is the YTToolkits YouTube Link Viewer free to use?</span>
                    <span className="text-teal-500 group-open:rotate-180 transition-transform">▼</span>
                  </summary>
                  <p className="mt-4 text-zinc-400 leading-relaxed text-sm md:text-base">
                    Yes, our YouTube Link Parser and URL Viewer is completely free forever. You can parse as many links as you want with zero fees, no rate limits, no software downloads, and no account creation required.
                  </p>
                </details>
              </div>
            </section>

            {/* Section 7: Related YouTube Tools */}
            <section className="space-y-6">
              <h2 className="text-2xl md:text-4xl font-extrabold text-zinc-100 flex items-center gap-3">
                <PlaySquare className="w-8 h-8 text-teal-500" />
                Explore Related YouTube Creator Tools
              </h2>
              <p className="text-zinc-400 text-base md:text-lg">
                Pair our Link Parser with other powerful tools from YTToolkits to streamline your creator workflow:
              </p>

              <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
                <Link
                  href="/embed-viewer"
                  className="bg-zinc-900/50 border border-zinc-800 hover:border-teal-500/50 p-6 rounded-2xl transition-all group flex flex-col justify-between"
                >
                  <div className="space-y-2">
                    <div className="flex items-center justify-between">
                      <ExternalLink className="w-6 h-6 text-purple-400" />
                      <ArrowRight className="w-4 h-4 text-zinc-500 group-hover:text-purple-400 group-hover:translate-x-1 transition-all" />
                    </div>
                    <h3 className="font-bold text-zinc-100 text-lg group-hover:text-purple-400 transition-colors">
                      YouTube Embed Code Generator
                    </h3>
                    <p className="text-zinc-400 text-sm leading-relaxed">
                      Generate responsive, customized iframe embed codes and WordPress shortcodes with live interactive previews.
                    </p>
                  </div>
                </Link>

                <Link
                  href="/thumbnail-downloader"
                  className="bg-zinc-900/50 border border-zinc-800 hover:border-teal-500/50 p-6 rounded-2xl transition-all group flex flex-col justify-between"
                >
                  <div className="space-y-2">
                    <div className="flex items-center justify-between">
                      <ImageIcon className="w-6 h-6 text-blue-400" />
                      <ArrowRight className="w-4 h-4 text-zinc-500 group-hover:text-blue-400 group-hover:translate-x-1 transition-all" />
                    </div>
                    <h3 className="font-bold text-zinc-100 text-lg group-hover:text-blue-400 transition-colors">
                      Thumbnail Downloader
                    </h3>
                    <p className="text-zinc-400 text-sm leading-relaxed">
                      Download HD and 4K max-resolution cover images directly from any YouTube video in seconds.
                    </p>
                  </div>
                </Link>

                <Link
                  href="/channel-id-finder"
                  className="bg-zinc-900/50 border border-zinc-800 hover:border-teal-500/50 p-6 rounded-2xl transition-all group flex flex-col justify-between"
                >
                  <div className="space-y-2">
                    <div className="flex items-center justify-between">
                      <AtSign className="w-6 h-6 text-emerald-400" />
                      <ArrowRight className="w-4 h-4 text-zinc-500 group-hover:text-emerald-400 group-hover:translate-x-1 transition-all" />
                    </div>
                    <h3 className="font-bold text-zinc-100 text-lg group-hover:text-emerald-400 transition-colors">
                      Channel ID Finder
                    </h3>
                    <p className="text-zinc-400 text-sm leading-relaxed">
                      Find the permanent 24-character YouTube Channel ID (UC...) from any handle, custom link, or video URL.
                    </p>
                  </div>
                </Link>

                <Link
                  href="/tag-extractor"
                  className="bg-zinc-900/50 border border-zinc-800 hover:border-teal-500/50 p-6 rounded-2xl transition-all group flex flex-col justify-between"
                >
                  <div className="space-y-2">
                    <div className="flex items-center justify-between">
                      <Layers className="w-6 h-6 text-orange-400" />
                      <ArrowRight className="w-4 h-4 text-zinc-500 group-hover:text-orange-400 group-hover:translate-x-1 transition-all" />
                    </div>
                    <h3 className="font-bold text-zinc-100 text-lg group-hover:text-orange-400 transition-colors">
                      YouTube Tag Extractor
                    </h3>
                    <p className="text-zinc-400 text-sm leading-relaxed">
                      Extract all hidden SEO keywords and metadata tags from any public YouTube video for competitive analysis.
                    </p>
                  </div>
                </Link>

                <Link
                  href="/video-downloader"
                  className="bg-zinc-900/50 border border-zinc-800 hover:border-teal-500/50 p-6 rounded-2xl transition-all group flex flex-col justify-between"
                >
                  <div className="space-y-2">
                    <div className="flex items-center justify-between">
                      <PlaySquare className="w-6 h-6 text-purple-400" />
                      <ArrowRight className="w-4 h-4 text-zinc-500 group-hover:text-purple-400 group-hover:translate-x-1 transition-all" />
                    </div>
                    <h3 className="font-bold text-zinc-100 text-lg group-hover:text-purple-400 transition-colors">
                      Video Downloader
                    </h3>
                    <p className="text-zinc-400 text-sm leading-relaxed">
                      Save YouTube videos in full 1080p, 2K, and 4K resolutions or extract high-bitrate MP3 audio.
                    </p>
                  </div>
                </Link>

                <Link
                  href="/hashtag-generator"
                  className="bg-zinc-900/50 border border-zinc-800 hover:border-teal-500/50 p-6 rounded-2xl transition-all group flex flex-col justify-between"
                >
                  <div className="space-y-2">
                    <div className="flex items-center justify-between">
                      <Sparkles className="w-6 h-6 text-pink-400" />
                      <ArrowRight className="w-4 h-4 text-zinc-500 group-hover:text-pink-400 group-hover:translate-x-1 transition-all" />
                    </div>
                    <h3 className="font-bold text-zinc-100 text-lg group-hover:text-pink-400 transition-colors">
                      Hashtag Generator
                    </h3>
                    <p className="text-zinc-400 text-sm leading-relaxed">
                      Generate optimized, trending hashtags for YouTube videos and Shorts to maximize search discoverability.
                    </p>
                  </div>
                </Link>
              </div>
            </section>

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