'use client';

import { useState } from 'react';
import Link from 'next/link';
import { 
  Download, Search, Image as ImageIcon, CheckCircle2, ShieldCheck, 
  Sparkles, Layers, Monitor, Smartphone, Info, HelpCircle, 
  ArrowRight, Eye, Palette, PlaySquare, AlertCircle, FileImage
} from 'lucide-react';

export default function ProfilePictureDownloaderPage() {
  const [url, setUrl] = useState('');
  const [loading, setLoading] = useState(false);
  const [result, setResult] = useState<any>(null);
  const [error, setError] = useState('');

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

    try {
      const response = await fetch('/api/profile-picture', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ url }),
      });
      
      const data = await response.json();
      if (!response.ok) throw new Error(data.error || 'Failed to fetch profile picture');
      
      setResult(data);
    } catch (err: any) {
      setError(err.message);
    } finally {
      setLoading(false);
    }
  };

  const handleDownload = async (imageUrl: string, filename: string) => {
    try {
      const response = await fetch(imageUrl);
      const blob = await response.blob();
      const downloadUrl = window.URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.href = downloadUrl;
      a.download = `${filename}.jpg`;
      document.body.appendChild(a);
      a.click();
      window.URL.revokeObjectURL(downloadUrl);
      document.body.removeChild(a);
    } catch (downloadErr) {
      console.error('Download failed', downloadErr);
      // Fallback: open in new tab
      window.open(imageUrl, '_blank');
    }
  };

  const jsonLd = {
    "@context": "https://schema.org",
    "@graph": [
      {
        "@type": "WebApplication",
        "name": "YouTube Profile Picture Downloader",
        "url": "https://yttoolkits.site/profile-picture-downloader",
        "description": "Download high-resolution YouTube channel profile pictures, avatars, and icons in full HD 800x800 resolution for free.",
        "applicationCategory": "MultimediaApplication",
        "operatingSystem": "All",
        "offers": {
          "@type": "Offer",
          "price": "0",
          "priceCurrency": "USD"
        }
      },
      {
        "@type": "BreadcrumbList",
        "itemListElement": [
          {
            "@type": "ListItem",
            "position": 1,
            "name": "Home",
            "item": "https://yttoolkits.site/"
          },
          {
            "@type": "ListItem",
            "position": 2,
            "name": "Profile Picture Downloader",
            "item": "https://yttoolkits.site/profile-picture-downloader"
          }
        ]
      },
      {
        "@type": "FAQPage",
        "mainEntity": [
          {
            "@type": "Question",
            "name": "How do I download a YouTube channel profile picture in full resolution?",
            "acceptedAnswer": {
              "@type": "Answer",
              "text": "Simply copy the channel URL, handle URL (@channel), or any video link from that creator, paste it into the YTToolkits Profile Picture Downloader search bar, and click 'Find Picture'. Our server extracts the highest quality uncompressed source file directly from Google's image servers so you can download the 800x800 avatar with a single click."
            }
          },
          {
            "@type": "Question",
            "name": "What is the recommended size and resolution for a YouTube profile picture?",
            "acceptedAnswer": {
              "@type": "Answer",
              "text": "YouTube officially recommends uploading an image that is 800 x 800 pixels. The minimum allowed resolution is 98 x 98 pixels. The accepted image formats include JPG, PNG, BMP, and non-animated GIF, with a maximum file size limit of 4MB."
            }
          },
          {
            "@type": "Question",
            "name": "Can I download a channel avatar using just a video URL?",
            "acceptedAnswer": {
              "@type": "Answer",
              "text": "Yes! You can paste any standard YouTube video URL, YouTube Short URL, or live stream link. Our tool automatically discovers the parent channel associated with that video and extracts the full-resolution channel icon."
            }
          },
          {
            "@type": "Question",
            "name": "Is it legal to download someone else's YouTube profile picture?",
            "acceptedAnswer": {
              "@type": "Answer",
              "text": "Downloading a profile picture for personal reference, branding inspiration, research, or fair-use commentary is completely lawful. However, impersonating a creator, using their personal face or logo commercially, or re-uploading their trademarked branding without permission violates copyright and YouTube's Terms of Service."
            }
          },
          {
            "@type": "Question",
            "name": "Why does YouTube crop profile pictures into a circle?",
            "acceptedAnswer": {
              "@type": "Answer",
              "text": "YouTube adopted a circular display format to maintain modern visual consistency across mobile apps, smart TVs, search results, and comment threads. While you must upload a square 1:1 image, YouTube masks out the four corners, meaning all critical logos, text, and faces must sit within the circular safe zone."
            }
          },
          {
            "@type": "Question",
            "name": "Does this tool work on mobile devices like iPhone and Android?",
            "acceptedAnswer": {
              "@type": "Answer",
              "text": "Yes! YTToolkits is 100% cloud-based and responsive. You can paste links and download high-resolution channel avatars directly to your camera roll on iOS Safari, Android Chrome, iPadOS, or any desktop operating system without installing any software or app."
            }
          },
          {
            "@type": "Question",
            "name": "Can I download animated GIF profile pictures from YouTube?",
            "acceptedAnswer": {
              "@type": "Answer",
              "text": "YouTube does not support animated GIFs for profile pictures. Even if a user uploads a .gif file, YouTube automatically flattens it to a static first frame. Our downloader extracts the highest resolution static frame available on YouTube servers."
            }
          },
          {
            "@type": "Question",
            "name": "What is the difference between a YouTube profile picture and a channel banner?",
            "acceptedAnswer": {
              "@type": "Answer",
              "text": "A profile picture (avatar) is the square 800x800 image displayed next to your comments, channel name, and video author metadata. A channel banner (channel art) is the wide panoramic header image displayed at the very top of your channel homepage, recommended at 2560 x 1440 pixels."
            }
          },
          {
            "@type": "Question",
            "name": "Why is the avatar image showing in low quality on older channels?",
            "acceptedAnswer": {
              "@type": "Answer",
              "text": "YouTube stores multiple versions of an avatar across its content delivery network. Very old channels that haven't updated their icon since the early 2010s may have originally uploaded low-resolution images like 240x240 or 100x100. Our tool always searches for the highest resolution master copy stored on YouTube servers."
            }
          },
          {
            "@type": "Question",
            "name": "Is there any limit to how many profile photos I can download?",
            "acceptedAnswer": {
              "@type": "Answer",
              "text": "There are zero limits. YTToolkits provides free, unrestricted access with no account creation, no subscriptions, and no intrusive watermarks. You can analyze and download as many channel avatars as you require."
            }
          }
        ]
      }
    ]
  };

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

      <div className="min-h-screen bg-zinc-950 text-zinc-100 py-12 px-4 md:px-8 lg:px-16">
        <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">
              <ImageIcon className="w-10 h-10 text-red-500" />
              YouTube Profile Picture Downloader
            </h1>
            <p className="text-zinc-400 max-w-2xl mx-auto text-lg">
              View, inspect, and download original full-resolution YouTube channel avatars, profile icons, and branding logos in HD 800x800 quality.
            </p>
          </div>

          {/* Input Card */}
          <div className="bg-zinc-900/50 border border-zinc-800 rounded-3xl p-6 md:p-8">
            <form onSubmit={fetchProfilePicture} className="flex flex-col md:flex-row gap-4">
              <input
                type="url"
                placeholder="Paste YouTube Channel (@handle) or Video URL"
                value={url}
                onChange={(e) => setUrl(e.target.value)}
                required
                className="flex-1 bg-zinc-950 border border-zinc-800 focus:border-red-500/50 focus:ring-2 focus:ring-red-500/20 rounded-2xl px-6 py-4 outline-none transition-all text-zinc-100 placeholder-zinc-500"
              />
              <button
                type="submit"
                disabled={loading}
                className="bg-red-600 hover:bg-red-700 text-white rounded-2xl px-8 py-4 font-semibold flex items-center justify-center gap-2 transition-colors disabled:opacity-50"
              >
                {loading ? (
                  <div className="w-6 h-6 border-2 border-white/30 border-t-white rounded-full animate-spin" />
                ) : (
                  <>
                    <Search className="w-5 h-5" />
                    Find Picture
                  </>
                )}
              </button>
            </form>
            {error && (
              <p className="text-red-500 mt-4 text-sm bg-red-500/10 p-3 rounded-xl border border-red-500/20 flex items-center gap-2">
                <AlertCircle className="w-4 h-4 shrink-0" />
                {error}
              </p>
            )}
          </div>

          {/* Results Section */}
          {result && result.thumbnails && result.thumbnails.length > 0 && (
            <div className="space-y-6">
              <div className="bg-zinc-900/50 border border-zinc-800 rounded-3xl p-6 md:p-8 text-center">
                <h2 className="text-2xl font-bold mb-8 text-zinc-100">{result.channelName} Profile Picture</h2>
                
                <div className="flex justify-center mb-10">
                  <div className="relative group">
                    <img 
                      src={result.thumbnails[0].url} 
                      alt={`${result.channelName} highest quality profile avatar`} 
                      className="w-48 h-48 md:w-64 md:h-64 rounded-full object-cover border-4 border-zinc-800 shadow-2xl"
                    />
                    <div className="absolute inset-0 flex items-center justify-center bg-black/60 rounded-full opacity-0 group-hover:opacity-100 transition-opacity">
                      <button 
                        onClick={() => handleDownload(result.thumbnails[0].url, `${result.channelName}-avatar-hq`)}
                        className="bg-red-600 hover:bg-red-700 text-white rounded-full p-4 transform hover:scale-110 transition-all shadow-xl"
                        title="Download Full HD Avatar"
                      >
                        <Download className="w-6 h-6" />
                      </button>
                    </div>
                  </div>
                </div>

                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                  {result.thumbnails.slice(0, 6).map((thumb: any, idx: number) => (
                    <div key={idx} className="bg-zinc-950 p-4 rounded-2xl border border-zinc-800 flex flex-col items-center gap-4">
                      <img src={thumb.url} alt={`Resolution ${idx}`} className="w-24 h-24 rounded-full object-cover border border-zinc-800" />
                      <div className="text-center">
                        <p className="text-zinc-200 text-sm font-semibold">
                          {thumb.width ? `${thumb.width} x ${thumb.height} px` : 'High Definition'}
                        </p>
                        <p className="text-zinc-500 text-xs mt-1">{thumb.id || `Size variant #${idx + 1}`}</p>
                      </div>
                      <button
                        onClick={() => handleDownload(thumb.url, `${result.channelName}-avatar-${idx}`)}
                        className="w-full bg-zinc-800 hover:bg-zinc-700 text-white rounded-xl py-2 px-4 flex items-center justify-center gap-2 transition-colors text-sm font-medium mt-auto"
                      >
                        <Download className="w-4 h-4" />
                        Download
                      </button>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          )}

          {/* MASSIVE SEO CONTENT SECTION */}
          <article className="space-y-16 pt-12 border-t border-zinc-800/60 text-left">
            
            {/* H2: What is a YouTube Profile Picture Downloader? */}
            <section className="space-y-6">
              <h2 className="text-3xl font-extrabold text-zinc-100 flex items-center gap-3">
                <FileImage className="w-8 h-8 text-red-500" />
                What is a YouTube Profile Picture Downloader?
              </h2>
              <div className="prose prose-invert max-w-none text-zinc-400 text-lg leading-relaxed space-y-4">
                <p>
                  A <strong>YouTube Profile Picture Downloader</strong> (also frequently referred to as a YouTube channel avatar grabber or channel icon extractor) is an advanced online utility that extracts the uncompressed, original profile graphic associated with any YouTube account. While YouTube allows anyone to browse channels freely, the platform's interface intentionally conceals direct image links and disables traditional right-click downloading on avatars across its web and mobile applications.
                </p>
                <p>
                  When a channel creator uploads their profile picture via YouTube Studio, Google stores that graphic on high-speed content delivery network (CDN) edge servers—most notably hosted on domains like <code className="text-red-400 bg-zinc-900 px-2 py-0.5 rounded">yt3.ggpht.com</code> and <code className="text-red-400 bg-zinc-900 px-2 py-0.5 rounded">yt3.googleusercontent.com</code>. The YouTube front-end typically resizes and serves downsampled representations, such as 48x48 pixels in comment sections, 88x88 pixels on mobile subscriber feeds, and 176x176 pixels on desktop channel homepages.
                </p>
                <p>
                  Our tool resolves the underlying canonical channel identity, decodes Google's photo endpoint parameters (such as the resolution token <code className="text-red-400 bg-zinc-900 px-2 py-0.5 rounded">s800-c-k-c0x00ffffff-no-rj</code>), and reconstructs the unconstrained master source image up to 800x800 pixels. This gives graphic designers, brand strategists, digital marketers, and community managers access to crystal-clear artwork without screenshot artifacts or compression fuzziness.
                </p>
              </div>
            </section>

            {/* H2: How to Use YouTube Profile Picture Downloader */}
            <section className="space-y-8">
              <h2 className="text-3xl font-extrabold text-zinc-100 flex items-center gap-3">
                <Sparkles className="w-8 h-8 text-yellow-500" />
                How to Use the YouTube Profile Picture Downloader - Step-by-Step Guide
              </h2>
              <p className="text-zinc-400 text-lg">
                Extracting high-resolution channel branding takes less than five seconds. Follow our streamlined three-step workflow from any device:
              </p>
              <div className="grid gap-6 md:grid-cols-3">
                <div className="bg-zinc-900/50 border border-zinc-800 p-6 rounded-2xl relative overflow-hidden group hover:border-red-500/40 transition-colors">
                  <div className="absolute top-0 right-0 bg-red-500/10 text-red-500 font-black text-6xl opacity-20 -mt-2 -mr-2">1</div>
                  <div className="w-12 h-12 bg-red-500/10 rounded-xl flex items-center justify-center text-red-400 font-bold text-xl mb-4">
                    01
                  </div>
                  <h3 className="text-xl font-bold text-zinc-100 mb-2">Locate the Channel URL</h3>
                  <p className="text-zinc-400 text-sm leading-relaxed">
                    Open YouTube on your browser or app. Navigate to the desired channel or copy any video link produced by that creator. Supported formats include custom handles (<code className="text-xs text-zinc-300">@MrBeast</code>), full channel URLs (<code className="text-xs text-zinc-300">youtube.com/channel/UC...</code>), or direct watch links (<code className="text-xs text-zinc-300">youtube.com/watch?v=...</code>).
                  </p>
                </div>

                <div className="bg-zinc-900/50 border border-zinc-800 p-6 rounded-2xl relative overflow-hidden group hover:border-red-500/40 transition-colors">
                  <div className="absolute top-0 right-0 bg-red-500/10 text-red-500 font-black text-6xl opacity-20 -mt-2 -mr-2">2</div>
                  <div className="w-12 h-12 bg-red-500/10 rounded-xl flex items-center justify-center text-red-400 font-bold text-xl mb-4">
                    02
                  </div>
                  <h3 className="text-xl font-bold text-zinc-100 mb-2">Paste & Initiate Lookup</h3>
                  <p className="text-zinc-400 text-sm leading-relaxed">
                    Insert the copied address into the input field above and click the <strong>Find Picture</strong> button. Our intelligent background parser resolves the creator identity, fetches metadata from the YouTube backend, and requests the pristine CDN master image.
                  </p>
                </div>

                <div className="bg-zinc-900/50 border border-zinc-800 p-6 rounded-2xl relative overflow-hidden group hover:border-red-500/40 transition-colors">
                  <div className="absolute top-0 right-0 bg-red-500/10 text-red-500 font-black text-6xl opacity-20 -mt-2 -mr-2">3</div>
                  <div className="w-12 h-12 bg-red-500/10 rounded-xl flex items-center justify-center text-red-400 font-bold text-xl mb-4">
                    03
                  </div>
                  <h3 className="text-xl font-bold text-zinc-100 mb-2">Preview & Save in HD</h3>
                  <p className="text-zinc-400 text-sm leading-relaxed">
                    Inspect the interactive full-resolution preview and review the available size dimensions. Click the <strong>Download</strong> button to save the uncompressed JPEG directly to your computer, tablet, or smartphone photo library.
                  </p>
                </div>
              </div>
            </section>

            {/* H2: Key Features of Our Tool */}
            <section className="space-y-6">
              <h2 className="text-3xl font-extrabold text-zinc-100 flex items-center gap-3">
                <CheckCircle2 className="w-8 h-8 text-green-500" />
                Key Features of Our YouTube Profile Picture Downloader
              </h2>
              <div className="grid md:grid-cols-2 gap-6">
                <div className="bg-zinc-900/40 border border-zinc-800 p-6 rounded-2xl space-y-3">
                  <div className="flex items-center gap-3">
                    <Sparkles className="w-6 h-6 text-yellow-400" />
                    <h3 className="text-lg font-bold text-zinc-100">Full 800x800 Resolution Unlocked</h3>
                  </div>
                  <p className="text-zinc-400 text-sm leading-relaxed">
                    Never settle for blurry 100x100 browser thumbnails. Our server algorithm bypasses client-side downsampling constraints to fetch the maximum 800x800 master assets stored on Google servers.
                  </p>
                </div>

                <div className="bg-zinc-900/40 border border-zinc-800 p-6 rounded-2xl space-y-3">
                  <div className="flex items-center gap-3">
                    <Layers className="w-6 h-6 text-blue-400" />
                    <h3 className="text-lg font-bold text-zinc-100">Universal URL Resolution Engine</h3>
                  </div>
                  <p className="text-zinc-400 text-sm leading-relaxed">
                    Whether you supply modern YouTube handles (@username), legacy user URLs, channel IDs (<Link href="/channel-id-finder" className="text-red-400 hover:underline">UC IDs</Link>), or video URLs, our parser extracts the correct avatar every time.
                  </p>
                </div>

                <div className="bg-zinc-900/40 border border-zinc-800 p-6 rounded-2xl space-y-3">
                  <div className="flex items-center gap-3">
                    <ShieldCheck className="w-6 h-6 text-emerald-400" />
                    <h3 className="text-lg font-bold text-zinc-100">100% Free & Zero Account Needed</h3>
                  </div>
                  <p className="text-zinc-400 text-sm leading-relaxed">
                    We believe essential creator tools must remain open. No credit cards, no logins, no browser extensions, and no hidden subscriptions. Use it as often as you want.
                  </p>
                </div>

                <div className="bg-zinc-900/40 border border-zinc-800 p-6 rounded-2xl space-y-3">
                  <div className="flex items-center gap-3">
                    <Eye className="w-6 h-6 text-purple-400" />
                    <h3 className="text-lg font-bold text-zinc-100">Safe, Secure & Direct CDN Fetch</h3>
                  </div>
                  <p className="text-zinc-400 text-sm leading-relaxed">
                    We do not alter, watermark, or compress the downloaded image file. You receive the exact binary byte-stream delivered straight from official Google content networks.
                  </p>
                </div>
              </div>
            </section>

            {/* H2: Why Choose YTToolkits Profile Picture Downloader? */}
            <section className="space-y-6">
              <h2 className="text-3xl font-extrabold text-zinc-100 flex items-center gap-3">
                <Palette className="w-8 h-8 text-pink-500" />
                Why Choose YTToolkits Profile Picture Downloader?
              </h2>
              <div className="prose prose-invert max-w-none text-zinc-400 text-lg leading-relaxed space-y-4">
                <p>
                  Dozens of online utilities claim to download YouTube profile pictures, but the vast majority are plagued by intrusive pop-up advertisements, slow redirects, forced software installation prompts, or worst of all, low-grade screenshots captured at 100x100 resolution. Many websites fail completely when presented with contemporary YouTube handles (e.g., <code className="text-zinc-300">youtube.com/@mkbhd</code>) because their underlying scrapers still rely on deprecated 2018 YouTube API endpoints.
                </p>
                <p>
                  YTToolkits was built by creators for creators. We engineered a dedicated backend parser that seamlessly resolves handles, channel redirects, and video permalinks. Compare how our service stacks up against common alternative web tools:
                </p>
              </div>

              <div className="overflow-x-auto rounded-2xl border border-zinc-800 bg-zinc-900/50">
                <table className="w-full text-left border-collapse min-w-[620px]">
                  <thead>
                    <tr className="bg-zinc-900 border-b border-zinc-800 text-zinc-100 font-semibold">
                      <th className="p-4">Feature / Capability</th>
                      <th className="p-4 text-red-400">YTToolkits Downloader</th>
                      <th className="p-4 text-zinc-400">Generic Online Downloaders</th>
                      <th className="p-4 text-zinc-400">Manual Screenshot</th>
                    </tr>
                  </thead>
                  <tbody className="divide-y divide-zinc-800/50 text-zinc-300">
                    <tr className="hover:bg-zinc-800/20 transition-colors">
                      <td className="p-4 font-medium">Max Output Resolution</td>
                      <td className="p-4 font-bold text-green-400">800 x 800 HD Original</td>
                      <td className="p-4 text-zinc-400">176 x 176 or 240 x 240</td>
                      <td className="p-4 text-zinc-500">Blurred / Screen PPI limited</td>
                    </tr>
                    <tr className="hover:bg-zinc-800/20 transition-colors">
                      <td className="p-4 font-medium">Supports @Handles & Video URLs</td>
                      <td className="p-4 font-bold text-green-400">Yes (Auto-resolves)</td>
                      <td className="p-4 text-red-400">Frequently Broken</td>
                      <td className="p-4 text-zinc-400">Manual navigation needed</td>
                    </tr>
                    <tr className="hover:bg-zinc-800/20 transition-colors">
                      <td className="p-4 font-medium">Original Unmasked Square Crop</td>
                      <td className="p-4 font-bold text-green-400">Yes (Full source square)</td>
                      <td className="p-4 text-zinc-400">Often forced circle mask</td>
                      <td className="p-4 text-red-400">Clipped by circular UI</td>
                    </tr>
                    <tr className="hover:bg-zinc-800/20 transition-colors">
                      <td className="p-4 font-medium">Annoying Popups & Redirects</td>
                      <td className="p-4 font-bold text-green-400">Zero Ads / Clean UI</td>
                      <td className="p-4 text-red-400">Heavy aggressive ads</td>
                      <td className="p-4 text-zinc-400">N/A</td>
                    </tr>
                    <tr className="hover:bg-zinc-800/20 transition-colors">
                      <td className="p-4 font-medium">Cross-Device Compatibility</td>
                      <td className="p-4 font-bold text-green-400">Desktop, iOS & Android</td>
                      <td className="p-4 text-zinc-400">Desktop only or buggy</td>
                      <td className="p-4 text-zinc-400">Device dependent</td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </section>

            {/* H2: The Anatomy of an Irresistible YouTube Channel Avatar */}
            <section className="space-y-6">
              <h2 className="text-3xl font-extrabold text-zinc-100 flex items-center gap-3">
                <Palette className="w-8 h-8 text-blue-400" />
                The Anatomy of an Irresistible YouTube Avatar: Sizes, Dimensions & Branding Masterclass
              </h2>
              <div className="prose prose-invert max-w-none text-zinc-400 text-lg leading-relaxed space-y-4">
                <p>
                  Your YouTube channel profile picture is perhaps the single most frequently viewed graphic asset in your entire creator journey. While a <Link href="/thumbnail-downloader" className="text-red-400 hover:underline">YouTube thumbnail</Link> only appears when someone is browsing recommendations or search results, your profile picture follows you everywhere across the YouTube ecosystem:
                </p>
                <ul className="list-disc pl-6 space-y-2 text-zinc-300">
                  <li>In every YouTube comment you post, establishing your authority in the discussion.</li>
                  <li>In your community tab updates, polls, and creator announcements.</li>
                  <li>Directly underneath every video and YouTube Short on mobile feed cards.</li>
                  <li>In your subscribers' notification feeds when a new video or live stream premieres.</li>
                  <li>In the top corner of your official channel homepage, overlapping the desktop banner art.</li>
                </ul>
                <p>
                  Because your avatar is displayed as small as <strong>32x32 pixels</strong> in mobile live chats and comment lists, designing an effective avatar requires a vastly different approach compared to designing a billboard or a YouTube thumbnail. A great avatar must remain legible and iconic even at fingertip size on a budget smartphone.
                </p>

                <h3 className="text-2xl font-bold text-zinc-100 pt-4">1. Personal Face vs. Illustrated Brand Logo</h3>
                <p>
                  One of the first critical branding decisions every creator faces is whether to use a real photograph of their face or an illustrated brand logo.
                </p>
                <p>
                  <strong>When to use a personal photo:</strong> If you are a solo creator, vlogger, educator, commentary YouTuber, or personal brand, a high-contrast headshot with a friendly, high-energy facial expression consistently outperforms an abstract logo. Humans are biologically wired to recognize and connect with faces. Eye contact and clear expressions build immediate emotional rapport, driving higher click-through rates and deeper community loyalty.
                </p>
                <p>
                  <strong>When to use an illustrated icon or logo:</strong> If your channel is a multi-host show, a gaming clan, an animation studio, a tech media company, or a faceless tutorial channel, a bold vector logo or mascot is the superior option. Keep the logo minimalist with no more than 1 or 2 distinct visual elements.
                </p>

                <h3 className="text-2xl font-bold text-zinc-100 pt-4">2. The Circular Crop Trap and Safe Zones</h3>
                <p>
                  Although YouTube requests an 800 x 800 pixel square canvas, the live player immediately masks the image into a circle across all modern platforms. Many novice creators place text, borders, or logo corners near the perimeter of their canvas, only to find them abruptly chopped off in YouTube search results and subscriber tabs.
                </p>
                <p>
                  To ensure perfect presentation, always establish an internal circular guide when designing in software like Photoshop, Figma, or Canva. Keep all essential focal points—such as eyes, mouth, product silhouettes, and letters—inside the central 70% inner circle (approximately 560 x 560 pixels).
                </p>

                <h3 className="text-2xl font-bold text-zinc-100 pt-4">3. High-Contrast Vibrant Backgrounds</h3>
                <p>
                  Because YouTube offers both Dark Mode and Light Mode, avatars with pure black, dark grey, or transparent backgrounds can blend invisibly into YouTube's dark UI theme. Similarly, avatars with pure white backgrounds vanish on standard desktop light mode.
                </p>
                <p>
                  Top creators solve this problem by pairing their cut-out subject with a bold, saturated, solid or gradient background—such as neon yellow, vibrant cyan, electric purple, or fiery orange. This ensures immediate separation and punchiness regardless of whether the viewer is using day or night mode.
                </p>
              </div>
            </section>

            {/* H2: YouTube Avatar Specifications Table */}
            <section className="space-y-6">
              <h2 className="text-3xl font-extrabold text-zinc-100 flex items-center gap-3">
                <Monitor className="w-8 h-8 text-cyan-400" />
                YouTube Avatar Sizes, Technical Specifications & Display Guidelines
              </h2>
              <p className="text-zinc-400 text-lg">
                Refer to this complete technical reference table when preparing or analyzing profile graphics for YouTube:
              </p>
              <div className="overflow-x-auto rounded-2xl border border-zinc-800 bg-zinc-900/50">
                <table className="w-full text-left border-collapse min-w-[640px]">
                  <thead>
                    <tr className="bg-zinc-900 border-b border-zinc-800 text-zinc-100 font-semibold">
                      <th className="p-4">Specification Property</th>
                      <th className="p-4 text-red-400">Recommended Standard</th>
                      <th className="p-4 text-zinc-400">Technical Details / Limitations</th>
                    </tr>
                  </thead>
                  <tbody className="divide-y divide-zinc-800/50 text-zinc-300">
                    <tr className="hover:bg-zinc-800/20 transition-colors">
                      <td className="p-4 font-medium">Recommended Dimensions</td>
                      <td className="p-4 text-green-400 font-bold">800 x 800 pixels</td>
                      <td className="p-4">1:1 square aspect ratio uploaded; ensures crisp rendering on Retina and 4K displays.</td>
                    </tr>
                    <tr className="hover:bg-zinc-800/20 transition-colors">
                      <td className="p-4 font-medium">Minimum Allowed Dimensions</td>
                      <td className="p-4">98 x 98 pixels</td>
                      <td className="p-4">YouTube will accept this minimum, but quality will look severely pixelated on modern screens.</td>
                    </tr>
                    <tr className="hover:bg-zinc-800/20 transition-colors">
                      <td className="p-4 font-medium">Supported File Formats</td>
                      <td className="p-4">JPG, PNG, BMP, GIF</td>
                      <td className="p-4">PNG-24 is best for sharp vector logos; JPG (quality 95+) is optimal for photographic headshots.</td>
                    </tr>
                    <tr className="hover:bg-zinc-800/20 transition-colors">
                      <td className="p-4 font-medium">Maximum File Size</td>
                      <td className="p-4">4 Megabytes (4MB)</td>
                      <td className="p-4">Files exceeding 4MB will be rejected by YouTube Studio upload dialog.</td>
                    </tr>
                    <tr className="hover:bg-zinc-800/20 transition-colors">
                      <td className="p-4 font-medium">Animation Capabilities</td>
                      <td className="p-4 text-red-400">Static Only (No GIF loops)</td>
                      <td className="p-4">Animated GIFs are automatically converted to static single frames upon upload.</td>
                    </tr>
                    <tr className="hover:bg-zinc-800/20 transition-colors">
                      <td className="p-4 font-medium">Rendered Display Shapes</td>
                      <td className="p-4">Circular Crop Mask</td>
                      <td className="p-4">Masked as a perfect circle across all mobile applications and desktop web browsers.</td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </section>

            {/* H2: Cross-Device Compatibility */}
            <section className="space-y-6">
              <h2 className="text-3xl font-extrabold text-zinc-100 flex items-center gap-3">
                <Smartphone className="w-8 h-8 text-emerald-400" />
                Cross-Device Compatibility: Save Avatars on PC, Mac, iPhone & Android
              </h2>
              <div className="grid md:grid-cols-4 gap-4">
                <div className="bg-zinc-900/40 border border-zinc-800 p-6 rounded-2xl flex flex-col items-center text-center gap-3">
                  <Monitor className="w-10 h-10 text-zinc-400" />
                  <h3 className="font-bold text-zinc-100">Windows PC</h3>
                  <p className="text-sm text-zinc-500">Fast 1-click download directly to your downloads directory via Chrome, Edge, or Firefox.</p>
                </div>
                <div className="bg-zinc-900/40 border border-zinc-800 p-6 rounded-2xl flex flex-col items-center text-center gap-3">
                  <Monitor className="w-10 h-10 text-zinc-400" />
                  <h3 className="font-bold text-zinc-100">macOS Safari</h3>
                  <p className="text-sm text-zinc-500">Native high-speed download with automatic file naming and Retina display preview support.</p>
                </div>
                <div className="bg-zinc-900/40 border border-zinc-800 p-6 rounded-2xl flex flex-col items-center text-center gap-3">
                  <Smartphone className="w-10 h-10 text-zinc-400" />
                  <h3 className="font-bold text-zinc-100">Android Phones</h3>
                  <p className="text-sm text-zinc-500">Saves directly into your Google Photos / Files app with no background software needed.</p>
                </div>
                <div className="bg-zinc-900/40 border border-zinc-800 p-6 rounded-2xl flex flex-col items-center text-center gap-3">
                  <Smartphone className="w-10 h-10 text-zinc-400" />
                  <h3 className="font-bold text-zinc-100">Apple iPhone & iPad</h3>
                  <p className="text-sm text-zinc-500">Effortlessly save directly to your iOS Camera Roll via Safari or Chrome mobile browser.</p>
                </div>
              </div>
            </section>

            {/* H2: Frequently Asked Questions */}
            <section className="space-y-8">
              <h2 className="text-3xl font-extrabold text-zinc-100 flex items-center gap-3">
                <HelpCircle className="w-8 h-8 text-red-500" />
                Frequently Asked Questions About YouTube Profile Pictures
              </h2>
              <div className="grid gap-4 md:grid-cols-2">
                {[
                  {
                    q: "How do I download a YouTube channel profile picture in full resolution?",
                    a: "Simply copy the channel URL, handle URL (@channel), or any video link from that creator, paste it into our search bar, and click 'Find Picture'. Our server extracts the highest quality uncompressed source file directly from Google's image servers so you can download the 800x800 avatar with a single click."
                  },
                  {
                    q: "What is the recommended size and resolution for a YouTube profile picture?",
                    a: "YouTube officially recommends uploading an image that is 800 x 800 pixels. The minimum allowed resolution is 98 x 98 pixels. The accepted image formats include JPG, PNG, BMP, and non-animated GIF, with a maximum file size limit of 4MB."
                  },
                  {
                    q: "Can I download a channel avatar using just a video URL?",
                    a: "Yes! You can paste any standard YouTube video URL, YouTube Short URL, or live stream link. Our tool automatically discovers the parent channel associated with that video and extracts the full-resolution channel icon."
                  },
                  {
                    q: "Is it legal to download someone else's YouTube profile picture?",
                    a: "Downloading a profile picture for personal reference, branding inspiration, research, or fair-use commentary is completely lawful. However, impersonating a creator, using their personal face or logo commercially, or re-uploading their trademarked branding without permission violates copyright and YouTube's Terms of Service."
                  },
                  {
                    q: "Why does YouTube crop profile pictures into a circle?",
                    a: "YouTube adopted a circular display format to maintain modern visual consistency across mobile apps, smart TVs, search results, and comment threads. While you must upload a square 1:1 image, YouTube masks out the four corners, meaning all critical logos, text, and faces must sit within the circular safe zone."
                  },
                  {
                    q: "Does this tool work on mobile devices like iPhone and Android?",
                    a: "Yes! YTToolkits is 100% cloud-based and responsive. You can paste links and download high-resolution channel avatars directly to your camera roll on iOS Safari, Android Chrome, iPadOS, or any desktop operating system without installing any software or app."
                  },
                  {
                    q: "Can I download animated GIF profile pictures from YouTube?",
                    a: "YouTube does not support animated GIFs for profile pictures. Even if a user uploads a .gif file, YouTube automatically flattens it to a static first frame. Our downloader extracts the highest resolution static frame available on YouTube servers."
                  },
                  {
                    q: "What is the difference between a YouTube profile picture and a channel banner?",
                    a: "A profile picture (avatar) is the square 800x800 image displayed next to your comments, channel name, and video author metadata. A channel banner (channel art) is the wide panoramic header image displayed at the very top of your channel homepage, recommended at 2560 x 1440 pixels."
                  },
                  {
                    q: "Why is the avatar image showing in low quality on older channels?",
                    a: "YouTube stores multiple versions of an avatar across its content delivery network. Very old channels that haven't updated their icon since the early 2010s may have originally uploaded low-resolution images like 240x240 or 100x100. Our tool always searches for the highest resolution master copy stored on YouTube servers."
                  },
                  {
                    q: "Is there any limit to how many profile photos I can download?",
                    a: "There are zero limits. YTToolkits provides free, unrestricted access with no account creation, no subscriptions, and no intrusive watermarks. You can analyze and download as many channel avatars as you require."
                  }
                ].map((faq, i) => (
                  <div key={i} className="bg-zinc-900/40 border border-zinc-800 p-6 rounded-2xl flex flex-col justify-start">
                    <h3 className="font-bold text-zinc-100 mb-2 flex items-start gap-2">
                      <Info className="w-5 h-5 text-red-500 shrink-0 mt-0.5" />
                      <span>{faq.q}</span>
                    </h3>
                    <p className="text-zinc-400 text-sm leading-relaxed">{faq.a}</p>
                  </div>
                ))}
              </div>
            </section>

            {/* H2: Related YouTube Tools */}
            <section className="space-y-6 bg-zinc-900/50 p-8 rounded-3xl border border-zinc-800">
              <h2 className="text-3xl font-extrabold text-zinc-100 flex items-center gap-3">
                <PlaySquare className="w-8 h-8 text-red-500" />
                Related YouTube Creator Tools
              </h2>
              <p className="text-zinc-400 text-lg">
                Explore our full suite of free YouTube utilities to supercharge your channel analysis, branding, and optimization:
              </p>
              <div className="grid md:grid-cols-3 gap-4 mt-6">
                <Link href="/thumbnail-downloader" className="block p-5 rounded-2xl border border-zinc-800 bg-zinc-950 hover:bg-zinc-900 transition-all group">
                  <h3 className="text-zinc-100 font-bold mb-1 group-hover:text-red-400 transition-colors flex items-center justify-between">
                    Thumbnail Downloader <ArrowRight className="w-4 h-4 opacity-0 group-hover:opacity-100 transition-opacity" />
                  </h3>
                  <p className="text-zinc-400 text-sm">Download high-definition video thumbnails in 1080p and 4K resolution.</p>
                </Link>

                <Link href="/channel-id-finder" className="block p-5 rounded-2xl border border-zinc-800 bg-zinc-950 hover:bg-zinc-900 transition-all group">
                  <h3 className="text-zinc-100 font-bold mb-1 group-hover:text-red-400 transition-colors flex items-center justify-between">
                    Channel ID Finder <ArrowRight className="w-4 h-4 opacity-0 group-hover:opacity-100 transition-opacity" />
                  </h3>
                  <p className="text-zinc-400 text-sm">Instantly reveal the hidden canonical UC channel ID for any creator URL.</p>
                </Link>

                <Link href="/monetization-checker" className="block p-5 rounded-2xl border border-zinc-800 bg-zinc-950 hover:bg-zinc-900 transition-all group">
                  <h3 className="text-zinc-100 font-bold mb-1 group-hover:text-red-400 transition-colors flex items-center justify-between">
                    Monetization Checker <ArrowRight className="w-4 h-4 opacity-0 group-hover:opacity-100 transition-opacity" />
                  </h3>
                  <p className="text-zinc-400 text-sm">Verify if any YouTube channel or video is actively monetized through AdSense.</p>
                </Link>

                <Link href="/video-downloader" className="block p-5 rounded-2xl border border-zinc-800 bg-zinc-950 hover:bg-zinc-900 transition-all group">
                  <h3 className="text-zinc-100 font-bold mb-1 group-hover:text-red-400 transition-colors flex items-center justify-between">
                    Video Downloader <ArrowRight className="w-4 h-4 opacity-0 group-hover:opacity-100 transition-opacity" />
                  </h3>
                  <p className="text-zinc-400 text-sm">Save your videos and Shorts in 1080p MP4 or high quality MP3 audio format.</p>
                </Link>

                <Link href="/tag-extractor" className="block p-5 rounded-2xl border border-zinc-800 bg-zinc-950 hover:bg-zinc-900 transition-all group">
                  <h3 className="text-zinc-100 font-bold mb-1 group-hover:text-red-400 transition-colors flex items-center justify-between">
                    Tag Extractor <ArrowRight className="w-4 h-4 opacity-0 group-hover:opacity-100 transition-opacity" />
                  </h3>
                  <p className="text-zinc-400 text-sm">Inspect hidden keywords and SEO tags used by viral competitor videos.</p>
                </Link>

                <Link href="/seo-score-checker" className="block p-5 rounded-2xl border border-zinc-800 bg-zinc-950 hover:bg-zinc-900 transition-all group">
                  <h3 className="text-zinc-100 font-bold mb-1 group-hover:text-red-400 transition-colors flex items-center justify-between">
                    SEO Score Checker <ArrowRight className="w-4 h-4 opacity-0 group-hover:opacity-100 transition-opacity" />
                  </h3>
                  <p className="text-zinc-400 text-sm">Audit your title, description, and metadata against YouTube search ranking factors.</p>
                </Link>
              </div>
            </section>

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