"use client";

import React, { useState } from 'react';
import Link from 'next/link';
import { 
  PlaySquare, AlertTriangle, CheckCircle, Search, ShieldAlert, 
  UserX, UserCheck, HelpCircle, Shield, Sparkles, DollarSign, 
  EyeOff, Lock, CheckCircle2, Award 
} from 'lucide-react';

export default function AgeRestrictedViewer() {
  const [url, setUrl] = useState('');
  const [loading, setLoading] = useState(false);
  const [result, setResult] = useState<{ isRestricted?: boolean; ageLimit?: number; title?: string; error?: string } | null>(null);

  const checkVideo = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!url) return;
    
    setLoading(true);
    setResult(null);
    try {
      const res = await fetch('/api/age-restricted', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ url }),
      });
      const data = await res.json();
      setResult(data);
    } catch (error) {
      setResult({ error: 'An unexpected error occurred.' });
    } finally {
      setLoading(false);
    }
  };

  return (
    <>
      {/* Structured Data: WebApplication & FAQPage */}
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{
          __html: JSON.stringify({
            "@context": "https://schema.org",
            "@graph": [
              {
                "@type": "WebApplication",
                "name": "YTToolkits YouTube Age Restriction Checker",
                "url": "https://yttoolkits.site/age-restricted-viewer",
                "applicationCategory": "UtilitiesApplication",
                "operatingSystem": "All",
                "offers": {
                  "@type": "Offer",
                  "price": "0",
                  "priceCurrency": "USD"
                },
                "description": "Check if a YouTube video has an 18+ age restriction applied. Verify embed compatibility, monetization eligibility, and family-friendly status."
              },
              {
                "@type": "FAQPage",
                "mainEntity": [
                  {
                    "@type": "Question",
                    "name": "What is a YouTube age restriction?",
                    "acceptedAnswer": {
                      "@type": "Answer",
                      "text": "A YouTube age restriction is a platform policy enforcement applied to content deemed unsuitable for viewers under 18 years old. Age-restricted videos require users to sign in with an age-verified Google account to watch."
                    }
                  },
                  {
                    "@type": "Question",
                    "name": "Can you watch age-restricted YouTube videos without signing in?",
                    "acceptedAnswer": {
                      "@type": "Answer",
                      "text": "Officially, YouTube completely blocks playback for signed-out viewers or users under 18. Embedding the video on third-party websites also triggers an age-gated warning player."
                    }
                  },
                  {
                    "@type": "Question",
                    "name": "Does an age restriction cause video demonetization?",
                    "acceptedAnswer": {
                      "@type": "Answer",
                      "text": "Yes, in nearly all instances. Age-restricted videos are either heavily limited or completely ineligible for Google AdSense advertising because mainstream advertisers opt out of mature content."
                    }
                  },
                  {
                    "@type": "Question",
                    "name": "Is an age restriction considered a Community Guidelines strike?",
                    "acceptedAnswer": {
                      "@type": "Answer",
                      "text": "No. An age restriction does not give your channel a Community Guidelines strike. It simply gates the video behind an 18+ sign-in wall and limits its monetization and algorithmic recommendation reach."
                    }
                  },
                  {
                    "@type": "Question",
                    "name": "Can creators appeal an automated age restriction?",
                    "acceptedAnswer": {
                      "@type": "Answer",
                      "text": "Yes. Creators can submit a one-time appeal through YouTube Studio if they believe the automated review system incorrectly flagged their video."
                    }
                  },
                  {
                    "@type": "Question",
                    "name": "Why do schools and educators check for age restrictions?",
                    "acceptedAnswer": {
                      "@type": "Answer",
                      "text": "School networks and enterprise Google Workspace domains enforce strict Restricted Mode. If a video is age-restricted, it will fail to load or display error screens when embedded in classroom slides or educational portals."
                    }
                  },
                  {
                    "@type": "Question",
                    "name": "What topics trigger YouTube age restrictions?",
                    "acceptedAnswer": {
                      "@type": "Answer",
                      "text": "Content depicting graphic violence, vulgar profanity, sexually suggestive themes, dangerous stunts or challenges, regulated substances (alcohol/tobacco), and firearms frequently triggers age restrictions."
                    }
                  },
                  {
                    "@type": "Question",
                    "name": "Will an age restriction hurt my channel's growth?",
                    "acceptedAnswer": {
                      "@type": "Answer",
                      "text": "Yes. Age-restricted videos are completely excluded from the YouTube Kids app, signed-out home pages, and general browse feeds, reducing organic discovery by over 80%."
                    }
                  },
                  {
                    "@type": "Question",
                    "name": "Can a creator age-restrict their own video voluntarily?",
                    "acceptedAnswer": {
                      "@type": "Answer",
                      "text": "Yes. During upload in YouTube Studio under the 'Audience' section, creators can proactively select 'Yes, restrict my video to viewers over 18' to protect younger audiences."
                    }
                  },
                  {
                    "@type": "Question",
                    "name": "Is this YouTube Age Restriction Checker tool free?",
                    "acceptedAnswer": {
                      "@type": "Answer",
                      "text": "Yes, our tool is 100% free with unlimited checks and requires no account creation or login."
                    }
                  }
                ]
              }
            ]
          })
        }}
      />

      <div className="min-h-screen bg-zinc-950 text-zinc-100 py-12 px-4 sm:px-6 lg:px-8">
        <div className="max-w-4xl mx-auto space-y-12">
          {/* Header section */}
          <div className="text-center space-y-4">
            <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-orange-500/10 border border-orange-500/20 text-xs sm:text-sm text-orange-400 mb-2">
              <ShieldAlert className="w-4 h-4" />
              18+ Content Rating & Embed Verification
            </div>
            <h1 className="text-3xl md:text-5xl font-extrabold text-white flex items-center justify-center gap-3">
              <UserX className="w-10 h-10 text-orange-500" />
              Age Restriction Checker
            </h1>
            <p className="text-lg text-zinc-400 max-w-2xl mx-auto">
              Find out if a YouTube video has an 18+ age restriction applied. Perfect for educators, parents, website publishers, and creators checking embed suitability.
            </p>
          </div>

          {/* Main tool section */}
          <div className="bg-zinc-900/50 border border-zinc-800 rounded-3xl p-6 md:p-10 shadow-2xl">
            <form onSubmit={checkVideo} className="space-y-6">
              <div>
                <label htmlFor="url" className="block text-sm font-medium text-zinc-300 mb-2">
                  YouTube Video URL
                </label>
                <div className="relative">
                  <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                    <PlaySquare className="h-5 w-5 text-zinc-500" />
                  </div>
                  <input
                    type="text"
                    id="url"
                    value={url}
                    onChange={(e) => setUrl(e.target.value)}
                    className="block w-full pl-10 pr-3 py-4 bg-zinc-950 border border-zinc-800 rounded-2xl text-zinc-100 placeholder-zinc-500 focus:outline-none focus:border-red-500/50 focus:ring-2 focus:ring-red-500/20 transition-all"
                    placeholder="https://www.youtube.com/watch?v=... or https://youtu.be/..."
                    required
                  />
                </div>
              </div>
              <button
                type="submit"
                disabled={loading}
                className="w-full flex items-center justify-center py-4 px-4 border border-transparent rounded-2xl shadow-sm text-lg font-medium text-white bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
              >
                {loading ? (
                  <span className="flex items-center gap-2">
                    <div className="w-5 h-5 border-2 border-white/30 border-t-white rounded-full animate-spin" />
                    Checking Restriction...
                  </span>
                ) : (
                  <span className="flex items-center gap-2">
                    <Search className="w-5 h-5" />
                    Check Restriction
                  </span>
                )}
              </button>
            </form>

            {/* Results section */}
            {result && (
              <div className="mt-8 pt-8 border-t border-zinc-800">
                {result.error ? (
                  <div className="bg-red-500/10 border border-red-500/20 rounded-2xl p-6 text-center">
                    <AlertTriangle className="w-12 h-12 text-red-500 mx-auto mb-3" />
                    <h3 className="text-xl font-bold text-red-400 mb-2">Error Checking Video</h3>
                    <p className="text-red-300/80">{result.error}</p>
                  </div>
                ) : (
                  <div className="space-y-6">
                    {result.isRestricted ? (
                      <div className="bg-orange-500/10 border border-orange-500/20 rounded-2xl p-6 text-center space-y-4">
                        <div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-orange-500/20 mb-2">
                          <span className="text-2xl font-bold text-orange-500">18+</span>
                        </div>
                        <div>
                          <h3 className="text-2xl font-bold text-orange-400">Age Restricted (18+)</h3>
                          <p className="text-zinc-400 mt-2">
                            This video requires users to be signed into a verified YouTube account over 18 years old to view. Third-party embeds will be blocked.
                          </p>
                        </div>
                      </div>
                    ) : (
                      <div className="bg-green-500/10 border border-green-500/20 rounded-2xl p-6 text-center space-y-4">
                        <div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-green-500/20 mb-2">
                          <UserCheck className="w-8 h-8 text-green-500" />
                        </div>
                        <div>
                          <h3 className="text-2xl font-bold text-green-400">Family Friendly / General Audience</h3>
                          <p className="text-zinc-400 mt-2">
                            This video does not have an age restriction applied. It is safe for embedding, school viewing, and signed-out audiences.
                          </p>
                        </div>
                      </div>
                    )}
                    {result.title && (
                      <div className="p-4 bg-zinc-950 rounded-xl border border-zinc-800 text-left">
                        <p className="text-sm text-zinc-500 mb-1">Video Title</p>
                        <p className="font-medium text-zinc-200 line-clamp-2">{result.title}</p>
                      </div>
                    )}
                  </div>
                )}
              </div>
            )}
          </div>

          {/* MASSIVE SEO CONTENT SECTION (2000+ Words) */}
          <article className="pt-8 space-y-16 border-t border-zinc-800 text-zinc-300">
            
            {/* Section 1: What is YouTube Age Restriction? */}
            <section className="space-y-4">
              <h2 className="text-2xl md:text-4xl font-extrabold text-zinc-100">
                What is YouTube Age Restriction?
              </h2>
              <div className="text-zinc-400 space-y-4 leading-relaxed">
                <p>
                  YouTube Age Restriction is an automated and manual safety gating system deployed by Google to prevent viewers under 18 years old from accessing mature or sensitive video content. When a video is placed behind an age restriction barrier, it is locked within a strict authentication wall. To watch the video on YouTube, viewers must be signed into a registered Google account with verified date-of-birth credentials proving they are 18 years of age or older.
                </p>
                <p>
                  Unlike videos that violate YouTube&apos;s Community Guidelines—which are removed from the platform entirely and issue a disciplinary &ldquo;strike&rdquo; to the creator—age-restricted content is legally permitted on the platform. However, YouTube treats it as inappropriate for general family audiences, children, and brand advertising.
                </p>
                <p>
                  The operational repercussions of an age gate are extensive. Age-restricted uploads cannot be played on third-party websites when embedded using standard iframe players. They are completely excluded from the YouTube Kids application, blocked on networks operating under Restricted Mode (such as schools, universities, and public libraries), and stripped of standard home feed and recommended video distribution.
                </p>
              </div>
            </section>

            {/* Section 2: How to Use */}
            <section className="space-y-6">
              <h2 className="text-2xl md:text-4xl font-extrabold text-zinc-100">
                How to Use the YouTube Age Restriction Checker - Step-by-Step Guide
              </h2>
              <p className="text-zinc-400 leading-relaxed">
                Verifying whether a YouTube video is age-gated before sharing or embedding takes only seconds with our free diagnostic tool. Follow this simple guide:
              </p>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div className="bg-zinc-900/50 border border-zinc-800 rounded-2xl p-6">
                  <div className="text-orange-500 font-extrabold text-2xl mb-2">01</div>
                  <h3 className="text-lg font-bold text-zinc-100 mb-2">Copy Video Link</h3>
                  <p className="text-zinc-400 text-sm leading-relaxed">
                    Navigate to YouTube and find the video you wish to inspect. Copy the URL from your browser address bar or use the &ldquo;Share&rdquo; button to copy the link.
                  </p>
                </div>

                <div className="bg-zinc-900/50 border border-zinc-800 rounded-2xl p-6">
                  <div className="text-orange-500 font-extrabold text-2xl mb-2">02</div>
                  <h3 className="text-lg font-bold text-zinc-100 mb-2">Paste into Checker Input</h3>
                  <p className="text-zinc-400 text-sm leading-relaxed">
                    Paste the link into the search box above. Our tool handles desktop URLs, shortened youtu.be links, and vertical YouTube Shorts formats.
                  </p>
                </div>

                <div className="bg-zinc-900/50 border border-zinc-800 rounded-2xl p-6">
                  <div className="text-orange-500 font-extrabold text-2xl mb-2">03</div>
                  <h3 className="text-lg font-bold text-zinc-100 mb-2">Run Instant Verification</h3>
                  <p className="text-zinc-400 text-sm leading-relaxed">
                    Click &ldquo;Check Restriction&rdquo;. Our servers make an anonymous server-side metadata query directly to YouTube&apos;s authentication endpoints.
                  </p>
                </div>

                <div className="bg-zinc-900/50 border border-zinc-800 rounded-2xl p-6">
                  <div className="text-orange-500 font-extrabold text-2xl mb-2">04</div>
                  <h3 className="text-lg font-bold text-zinc-100 mb-2">Inspect Rating Status</h3>
                  <p className="text-zinc-400 text-sm leading-relaxed">
                    Instantly view whether the content is flagged as 18+ Mature or General Audience Family Friendly, along with the verified title and embed safety advice.
                  </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">
                Key Features of Our Age Restriction Checker
              </h2>
              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                <div className="bg-zinc-900/50 border border-zinc-800 rounded-2xl p-6 flex items-start gap-4">
                  <div className="p-3 bg-orange-500/10 rounded-xl text-orange-400 shrink-0">
                    <ShieldAlert className="w-6 h-6" />
                  </div>
                  <div>
                    <h3 className="text-lg font-bold text-zinc-100 mb-1">Instant 18+ Detection</h3>
                    <p className="text-zinc-400 text-sm leading-relaxed">
                      Detects age limits without requiring you to log out of your personal Google account or open private browser sessions.
                    </p>
                  </div>
                </div>

                <div className="bg-zinc-900/50 border border-zinc-800 rounded-2xl p-6 flex items-start gap-4">
                  <div className="p-3 bg-green-500/10 rounded-xl text-green-400 shrink-0">
                    <CheckCircle className="w-6 h-6" />
                  </div>
                  <div>
                    <h3 className="text-lg font-bold text-zinc-100 mb-1">Website Embed Compatibility</h3>
                    <p className="text-zinc-400 text-sm leading-relaxed">
                      Verifies whether a video can be embedded on your blog, educational LMS, or corporate website without showing black error boxes.
                    </p>
                  </div>
                </div>

                <div className="bg-zinc-900/50 border border-zinc-800 rounded-2xl p-6 flex items-start gap-4">
                  <div className="p-3 bg-blue-500/10 rounded-xl text-blue-400 shrink-0">
                    <Shield className="w-6 h-6" />
                  </div>
                  <div>
                    <h3 className="text-lg font-bold text-zinc-100 mb-1">Restricted Mode Verification</h3>
                    <p className="text-zinc-400 text-sm leading-relaxed">
                      Identifies if content will be blocked by school Wi-Fi firewalls, library computers, and parental safety filters.
                    </p>
                  </div>
                </div>

                <div className="bg-zinc-900/50 border border-zinc-800 rounded-2xl p-6 flex items-start gap-4">
                  <div className="p-3 bg-purple-500/10 rounded-xl text-purple-400 shrink-0">
                    <Sparkles className="w-6 h-6" />
                  </div>
                  <div>
                    <h3 className="text-lg font-bold text-zinc-100 mb-1">100% Free & Anonymous</h3>
                    <p className="text-zinc-400 text-sm leading-relaxed">
                      No Google sign-in required, zero age verification documents uploaded, and complete user privacy guaranteed.
                    </p>
                  </div>
                </div>
              </div>
            </section>

            {/* Section 4: Why Choose YTToolkits */}
            <section className="space-y-6">
              <h2 className="text-2xl md:text-4xl font-extrabold text-zinc-100">
                Why Choose YTToolkits Age Restriction Checker?
              </h2>
              <div className="text-zinc-400 space-y-4 leading-relaxed">
                <p>
                  Testing whether a video has an age barrier manually is frustrating. If you are already logged into YouTube with your adult Google profile, YouTube seamlessly plays the video without any warning. To test it manually, you must open an incognito browser window, paste the URL, and see if the player displays a &ldquo;Sign in to confirm your age&rdquo; screen.
                </p>
                <p>
                  YTToolkits eliminates the hassle by performing automated server-side verification in a fraction of a second:
                </p>
              </div>
              <div className="overflow-x-auto">
                <table className="w-full text-left border-collapse bg-zinc-900/40 rounded-2xl border border-zinc-800">
                  <thead>
                    <tr className="border-b border-zinc-800 text-zinc-100 text-sm">
                      <th className="p-4">Feature</th>
                      <th className="p-4 text-orange-400 font-semibold">YTToolkits Checker</th>
                      <th className="p-4 text-zinc-500">Manual Incognito Testing</th>
                      <th className="p-4 text-zinc-500">Third-Party Proxy Players</th>
                    </tr>
                  </thead>
                  <tbody className="text-sm divide-y divide-zinc-800/60 text-zinc-300">
                    <tr>
                      <td className="p-4 font-medium">Check Speed</td>
                      <td className="p-4 text-green-400 font-bold">Under 2 Seconds</td>
                      <td className="p-4">1-2 Minutes per video</td>
                      <td className="p-4 text-zinc-400">Slow buffering</td>
                    </tr>
                    <tr>
                      <td className="p-4 font-medium">Login Requirement</td>
                      <td className="p-4 text-green-400 font-bold">Zero Login Needed</td>
                      <td className="p-4">Must be signed out</td>
                      <td className="p-4 text-red-400">Risky third-party sites</td>
                    </tr>
                    <tr>
                      <td className="p-4 font-medium">Embed Failure Alerts</td>
                      <td className="p-4 text-green-400 font-bold">Instant Status Display</td>
                      <td className="p-4 text-red-400">No embed warnings</td>
                      <td className="p-4 text-red-400">None</td>
                    </tr>
                    <tr>
                      <td className="p-4 font-medium">Safety & Privacy</td>
                      <td className="p-4 text-green-400 font-bold">100% Safe (No Ads/Malware)</td>
                      <td className="p-4">Safe</td>
                      <td className="p-4 text-red-400">Adware & popups</td>
                    </tr>
                    <tr>
                      <td className="p-4 font-medium">Ecosystem Integration</td>
                      <td className="p-4 text-green-400 font-bold">30+ Companion Creator Tools</td>
                      <td className="p-4">None</td>
                      <td className="p-4">Isolated tool</td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </section>

            {/* Section 5: What Triggers an Age Gate? */}
            <section className="space-y-6">
              <h2 className="text-2xl md:text-4xl font-extrabold text-zinc-100">
                YouTube Content Ratings & Guidelines: What Triggers an Age Gate?
              </h2>
              <div className="text-zinc-400 space-y-4 leading-relaxed">
                <p>
                  YouTube uses automated computer vision models, audio transcription scanners, and user flagging systems to enforce age restrictions. While Community Guidelines infractions result in total video deletion, content that is permitted on the platform but restricted to adults generally falls into these specific policy categories:
                </p>
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4 pt-2">
                  <div className="bg-zinc-900/30 border border-zinc-800 rounded-2xl p-5 space-y-2">
                    <h3 className="font-bold text-zinc-100 flex items-center gap-2 text-orange-400">
                      <AlertTriangle className="w-5 h-5 shrink-0" />
                      Violence and Graphic Imagery
                    </h3>
                    <p className="text-sm text-zinc-400">
                      Dramatic news footage, combat documentation, violent video game gameplay, medical procedures, or intense sports injuries without sufficient educational context.
                    </p>
                  </div>

                  <div className="bg-zinc-900/30 border border-zinc-800 rounded-2xl p-5 space-y-2">
                    <h3 className="font-bold text-zinc-100 flex items-center gap-2 text-orange-400">
                      <Lock className="w-5 h-5 shrink-0" />
                      Sexually Suggestive Content
                    </h3>
                    <p className="text-sm text-zinc-400">
                      Videos featuring provocative dancing, lingerie try-on hauls, sexual education discussions, or fetish-adjacent imagery that does not cross into banned explicit nudity.
                    </p>
                  </div>

                  <div className="bg-zinc-900/30 border border-zinc-800 rounded-2xl p-5 space-y-2">
                    <h3 className="font-bold text-zinc-100 flex items-center gap-2 text-orange-400">
                      <ShieldAlert className="w-5 h-5 shrink-0" />
                      Dangerous Stunts and Pranks
                    </h3>
                    <p className="text-sm text-zinc-400">
                      Activities that present a serious risk of physical injury that could be easily imitated by minors, such as extreme parkour stunts, fireworks misuse, or dangerous challenges.
                    </p>
                  </div>

                  <div className="bg-zinc-900/30 border border-zinc-800 rounded-2xl p-5 space-y-2">
                    <h3 className="font-bold text-zinc-100 flex items-center gap-2 text-orange-400">
                      <UserX className="w-5 h-5 shrink-0" />
                      Vulgar Language & Regulated Goods
                    </h3>
                    <p className="text-sm text-zinc-400">
                      Excessive, continuous profanity throughout the audio track, or detailed demonstrations involving the consumption of alcohol, vaping, or legal cannabis.
                    </p>
                  </div>
                </div>
              </div>
            </section>

            {/* Section 6: Financial Impact on Monetization */}
            <section className="space-y-6">
              <h2 className="text-2xl md:text-4xl font-extrabold text-zinc-100">
                The Financial Impact: How Age Restriction Destroys Monetization
              </h2>
              <div className="text-zinc-400 space-y-4 leading-relaxed">
                <p>
                  For monetized creators in the YouTube Partner Program (YPP), an age restriction is essentially a death sentence for video revenue. When an age gate is triggered, the green monetization dollar sign in YouTube Studio immediately flips to yellow (&ldquo;Limited or No Ads&rdquo;) or grey (&ldquo;Ineligible&rdquo;).
                </p>
                <p>
                  Major corporate advertisers configure their Google Ads brand suitability settings to strictly exclude mature content. As a result:
                </p>
                <ul className="list-disc list-inside space-y-2 text-zinc-300 pl-2">
                  <li><strong>Revenue Collapse:</strong> Ad impressions collapse by 90% to 99%. Even if a video accumulates 100,000 views, the creator may earn less than $5 in total ad revenue. You can verify your channel monetization status with our <Link href="/monetization-checker" className="text-orange-400 hover:underline">Monetization Checker</Link>.</li>
                  <li><strong>Algorithmic Suppression:</strong> YouTube&apos;s home feed and recommended video algorithms deprioritize age-restricted uploads because they cannot serve standard programmatic advertising.</li>
                  <li><strong>Total Embed Invalidation:</strong> Websites that attempt to embed the video will display a broken player prompting viewers to open YouTube, completely crippling external referral traffic.</li>
                  <li><strong>Viewer Friction:</strong> Over 40% of viewers abandon the video immediately when presented with a Google account sign-in prompt on mobile devices.</li>
                </ul>
              </div>
            </section>

            {/* Section 7: How Creators Can Appeal */}
            <section className="space-y-6">
              <h2 className="text-2xl md:text-4xl font-extrabold text-zinc-100">
                How Creators Can Appeal a False Age Restriction
              </h2>
              <div className="text-zinc-400 space-y-4 leading-relaxed">
                <p>
                  Because YouTube relies heavily on automated artificial intelligence classifiers to scan video frames and audio transcripts, false age restrictions happen frequently. Educational documentaries, gaming streams, and harmless comedy skits are often misclassified. If your video has been wrongly age-gated, follow this recovery protocol:
                </p>
                <div className="space-y-3 pt-2">
                  <div className="bg-zinc-900/40 border border-zinc-800 p-5 rounded-2xl">
                    <h3 className="font-bold text-zinc-100 mb-1">1. Review Video Content and Metadata</h3>
                    <p className="text-sm text-zinc-400">
                      Before filing an appeal, audit your thumbnail, title, and tags. Sometimes, a provocative title or sensationalized thumbnail causes an automated AI trigger even if the video itself is benign. Optimize your metadata with our <Link href="/seo-score-checker" className="text-orange-400 hover:underline">SEO Score Checker</Link>.
                    </p>
                  </div>
                  <div className="bg-zinc-900/40 border border-zinc-800 p-5 rounded-2xl">
                    <h3 className="font-bold text-zinc-100 mb-1">2. Submit an Appeal via YouTube Studio</h3>
                    <p className="text-sm text-zinc-400">
                      Log into YouTube Studio on desktop. Go to &ldquo;Content&rdquo;, hover over the &ldquo;Restrictions&rdquo; column next to the flagged video, click &ldquo;Age restriction&rdquo;, and select &ldquo;Appeal&rdquo;. You only get one opportunity to appeal per video.
                    </p>
                  </div>
                  <div className="bg-zinc-900/40 border border-zinc-800 p-5 rounded-2xl">
                    <h3 className="font-bold text-zinc-100 mb-1">3. Write a Factual, Policy-Focused Justification</h3>
                    <p className="text-sm text-zinc-400">
                      In the appeal box, explain clearly why the video complies with Community Guidelines. Emphasize educational, scientific, or artistic context (EDSA guidelines). State specifically that there is no real-world danger or graphic nudity. Appeals are generally reviewed by a human moderator within 24 to 72 hours.
                    </p>
                  </div>
                </div>
              </div>
            </section>

            {/* Section 8: FAQ Accordion */}
            <section className="space-y-6">
              <h2 className="text-2xl md:text-4xl font-extrabold text-zinc-100">
                Frequently Asked Questions
              </h2>
              <div className="space-y-4">
                <details className="bg-zinc-900/40 border border-zinc-800/80 rounded-2xl p-5 cursor-pointer group">
                  <summary className="font-bold text-lg text-zinc-100 group-hover:text-orange-400 transition-colors list-none flex items-center justify-between">
                    <span>What is an age-restricted video?</span>
                    <HelpCircle className="w-5 h-5 text-zinc-500 group-hover:text-orange-400 transition-colors" />
                  </summary>
                  <p className="mt-3 text-zinc-400 leading-relaxed text-sm">
                    An age-restricted video is content that YouTube has deemed unsuitable for viewers under 18 years old. It requires users to be logged into an age-verified Google account to watch.
                  </p>
                </details>

                <details className="bg-zinc-900/40 border border-zinc-800/80 rounded-2xl p-5 cursor-pointer group">
                  <summary className="font-bold text-lg text-zinc-100 group-hover:text-orange-400 transition-colors list-none flex items-center justify-between">
                    <span>Can you watch age-restricted videos without logging in?</span>
                    <HelpCircle className="w-5 h-5 text-zinc-500 group-hover:text-orange-400 transition-colors" />
                  </summary>
                  <p className="mt-3 text-zinc-400 leading-relaxed text-sm">
                    No, YouTube officially enforces an authentication wall. Users must sign in with a verified account indicating they are 18 or older to watch directly on the platform.
                  </p>
                </details>

                <details className="bg-zinc-900/40 border border-zinc-800/80 rounded-2xl p-5 cursor-pointer group">
                  <summary className="font-bold text-lg text-zinc-100 group-hover:text-orange-400 transition-colors list-none flex items-center justify-between">
                    <span>Does an age restriction give you a copyright strike?</span>
                    <HelpCircle className="w-5 h-5 text-zinc-500 group-hover:text-orange-400 transition-colors" />
                  </summary>
                  <p className="mt-3 text-zinc-400 leading-relaxed text-sm">
                    No. An age restriction is unrelated to copyright and does not issue a Community Guidelines strike. It only restricts audience access and limits advertising monetization.
                  </p>
                </details>

                <details className="bg-zinc-900/40 border border-zinc-800/80 rounded-2xl p-5 cursor-pointer group">
                  <summary className="font-bold text-lg text-zinc-100 group-hover:text-orange-400 transition-colors list-none flex items-center justify-between">
                    <span>Why do embedded videos fail to play?</span>
                    <HelpCircle className="w-5 h-5 text-zinc-500 group-hover:text-orange-400 transition-colors" />
                  </summary>
                  <p className="mt-3 text-zinc-400 leading-relaxed text-sm">
                    YouTube disables embedded playback for age-restricted videos to prevent underage users from bypassing age gates on external websites and forums. The embed displays an error directing the viewer to YouTube.com.
                  </p>
                </details>

                <details className="bg-zinc-900/40 border border-zinc-800/80 rounded-2xl p-5 cursor-pointer group">
                  <summary className="font-bold text-lg text-zinc-100 group-hover:text-orange-400 transition-colors list-none flex items-center justify-between">
                    <span>How can educators use this tool?</span>
                    <HelpCircle className="w-5 h-5 text-zinc-500 group-hover:text-orange-400 transition-colors" />
                  </summary>
                  <p className="mt-3 text-zinc-400 leading-relaxed text-sm">
                    Teachers can test videos prior to class presentations or curriculum uploads. If a video is age-restricted, it will be blocked by school Wi-Fi and Restricted Mode filters, allowing teachers to find alternative materials in advance.
                  </p>
                </details>

                <details className="bg-zinc-900/40 border border-zinc-800/80 rounded-2xl p-5 cursor-pointer group">
                  <summary className="font-bold text-lg text-zinc-100 group-hover:text-orange-400 transition-colors list-none flex items-center justify-between">
                    <span>How many times can a creator appeal an age restriction?</span>
                    <HelpCircle className="w-5 h-5 text-zinc-500 group-hover:text-orange-400 transition-colors" />
                  </summary>
                  <p className="mt-3 text-zinc-400 leading-relaxed text-sm">
                    YouTube only permits one appeal per video. If the human review team rejects the appeal, the age restriction becomes permanent on that specific upload.
                  </p>
                </details>

                <details className="bg-zinc-900/40 border border-zinc-800/80 rounded-2xl p-5 cursor-pointer group">
                  <summary className="font-bold text-lg text-zinc-100 group-hover:text-orange-400 transition-colors list-none flex items-center justify-between">
                    <span>Does age restriction affect channel standing?</span>
                    <HelpCircle className="w-5 h-5 text-zinc-500 group-hover:text-orange-400 transition-colors" />
                  </summary>
                  <p className="mt-3 text-zinc-400 leading-relaxed text-sm">
                    While an occasional age restriction does not harm overall channel health, having multiple consecutive age-restricted videos can lower your channel&apos;s trust score and reduce broader algorithmic recommendations.
                  </p>
                </details>

                <details className="bg-zinc-900/40 border border-zinc-800/80 rounded-2xl p-5 cursor-pointer group">
                  <summary className="font-bold text-lg text-zinc-100 group-hover:text-orange-400 transition-colors list-none flex items-center justify-between">
                    <span>Can I check private or unlisted videos?</span>
                    <HelpCircle className="w-5 h-5 text-zinc-500 group-hover:text-orange-400 transition-colors" />
                  </summary>
                  <p className="mt-3 text-zinc-400 leading-relaxed text-sm">
                    Unlisted videos can be checked if you possess the direct link. Truly private videos cannot be checked by external tools because they require creator account authentication.
                  </p>
                </details>

                <details className="bg-zinc-900/40 border border-zinc-800/80 rounded-2xl p-5 cursor-pointer group">
                  <summary className="font-bold text-lg text-zinc-100 group-hover:text-orange-400 transition-colors list-none flex items-center justify-between">
                    <span>How does this tool check age restrictions?</span>
                    <HelpCircle className="w-5 h-5 text-zinc-500 group-hover:text-orange-400 transition-colors" />
                  </summary>
                  <p className="mt-3 text-zinc-400 leading-relaxed text-sm">
                    Our servers inspect live public metadata, query age_limit parameters, and verify player response headers to check if an 18+ authentication gate is active.
                  </p>
                </details>

                <details className="bg-zinc-900/40 border border-zinc-800/80 rounded-2xl p-5 cursor-pointer group">
                  <summary className="font-bold text-lg text-zinc-100 group-hover:text-orange-400 transition-colors list-none flex items-center justify-between">
                    <span>Is this tool completely free?</span>
                    <HelpCircle className="w-5 h-5 text-zinc-500 group-hover:text-orange-400 transition-colors" />
                  </summary>
                  <p className="mt-3 text-zinc-400 leading-relaxed text-sm">
                    Yes, 100% free with unlimited checks and no login or subscription required.
                  </p>
                </details>
              </div>
            </section>

            {/* Section 9: Related Tools */}
            <section className="space-y-6">
              <h2 className="text-2xl md:text-4xl font-extrabold text-zinc-100">
                Related YouTube Safety & Creator Tools
              </h2>
              <p className="text-zinc-400 leading-relaxed">
                Explore our full suite of free YouTube analytics and optimization utilities:
              </p>
              <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
                <Link
                  href="/shadowban-detector"
                  className="p-5 bg-zinc-900/40 hover:bg-zinc-900 border border-zinc-800 hover:border-zinc-700 rounded-2xl transition-all group block"
                >
                  <div className="p-3 bg-zinc-950 rounded-xl border border-zinc-800 w-fit mb-3 group-hover:scale-105 transition-transform text-purple-500">
                    <ShieldAlert className="w-5 h-5" />
                  </div>
                  <h3 className="font-semibold text-zinc-100 group-hover:text-purple-400 transition-colors mb-1">
                    Shadowban Detector
                  </h3>
                  <p className="text-zinc-400 text-xs leading-relaxed">
                    Check if your YouTube channel is experiencing algorithmic penalties or search suppression.
                  </p>
                </Link>

                <Link
                  href="/monetization-checker"
                  className="p-5 bg-zinc-900/40 hover:bg-zinc-900 border border-zinc-800 hover:border-zinc-700 rounded-2xl transition-all group block"
                >
                  <div className="p-3 bg-zinc-950 rounded-xl border border-zinc-800 w-fit mb-3 group-hover:scale-105 transition-transform text-green-500">
                    <DollarSign className="w-5 h-5" />
                  </div>
                  <h3 className="font-semibold text-zinc-100 group-hover:text-green-400 transition-colors mb-1">
                    Monetization Checker
                  </h3>
                  <p className="text-zinc-400 text-xs leading-relaxed">
                    Check if any channel or video is actively monetized through Google AdSense.
                  </p>
                </Link>

                <Link
                  href="/seo-score-checker"
                  className="p-5 bg-zinc-900/40 hover:bg-zinc-900 border border-zinc-800 hover:border-zinc-700 rounded-2xl transition-all group block"
                >
                  <div className="p-3 bg-zinc-950 rounded-xl border border-zinc-800 w-fit mb-3 group-hover:scale-105 transition-transform text-red-500">
                    <Search className="w-5 h-5" />
                  </div>
                  <h3 className="font-semibold text-zinc-100 group-hover:text-red-400 transition-colors mb-1">
                    SEO Score Checker
                  </h3>
                  <p className="text-zinc-400 text-xs leading-relaxed">
                    Grade video metadata, character counts, and keyword optimization on a 0-100 scale.
                  </p>
                </Link>

                <Link
                  href="/dislike-checker"
                  className="p-5 bg-zinc-900/40 hover:bg-zinc-900 border border-zinc-800 hover:border-zinc-700 rounded-2xl transition-all group block"
                >
                  <div className="p-3 bg-zinc-950 rounded-xl border border-zinc-800 w-fit mb-3 group-hover:scale-105 transition-transform text-red-400">
                    <PlaySquare className="w-5 h-5" />
                  </div>
                  <h3 className="font-semibold text-zinc-100 group-hover:text-red-400 transition-colors mb-1">
                    Dislike Checker
                  </h3>
                  <p className="text-zinc-400 text-xs leading-relaxed">
                    Reveal hidden YouTube dislikes and inspect true audience sentiment ratios.
                  </p>
                </Link>

                <Link
                  href="/like-counter"
                  className="p-5 bg-zinc-900/40 hover:bg-zinc-900 border border-zinc-800 hover:border-zinc-700 rounded-2xl transition-all group block"
                >
                  <div className="p-3 bg-zinc-950 rounded-xl border border-zinc-800 w-fit mb-3 group-hover:scale-105 transition-transform text-blue-500">
                    <CheckCircle className="w-5 h-5" />
                  </div>
                  <h3 className="font-semibold text-zinc-100 group-hover:text-blue-400 transition-colors mb-1">
                    Like Counter
                  </h3>
                  <p className="text-zinc-400 text-xs leading-relaxed">
                    View exact unrounded likes and verify like-to-view engagement ratios.
                  </p>
                </Link>

                <Link
                  href="/video-downloader"
                  className="p-5 bg-zinc-900/40 hover:bg-zinc-900 border border-zinc-800 hover:border-zinc-700 rounded-2xl transition-all group block"
                >
                  <div className="p-3 bg-zinc-950 rounded-xl border border-zinc-800 w-fit mb-3 group-hover:scale-105 transition-transform text-orange-500">
                    <PlaySquare className="w-5 h-5" />
                  </div>
                  <h3 className="font-semibold text-zinc-100 group-hover:text-orange-400 transition-colors mb-1">
                    Video Downloader
                  </h3>
                  <p className="text-zinc-400 text-xs leading-relaxed">
                    Download YouTube videos in 1080p, 4K, and MP3 audio for offline viewing.
                  </p>
                </Link>
              </div>
            </section>
          </article>
        </div>
      </div>
    </>
  );
}