"use client";

import React, { useState } from 'react';
import { PlaySquare, Code, Copy, CheckCircle2, Monitor, Layout, Globe, Sparkles, ShieldCheck, Zap, Laptop, ArrowRight, HelpCircle, Smartphone, Check, Settings2, Sliders } from 'lucide-react';
import Link from 'next/link';

export default function EmbedViewerPage() {
  const [url, setUrl] = useState('');
  const [videoId, setVideoId] = useState<string | null>(null);
  
  // Options
  const [autoplay, setAutoplay] = useState(false);
  const [loop, setLoop] = useState(false);
  const [controls, setControls] = useState(true);
  const [startTime, setStartTime] = useState('');
  const [copiedStates, setCopiedStates] = useState<{ [key: string]: boolean }>({});

  const extractVideoId = (url: string) => {
    const regExp = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|&v=)([^#&?]*).*/;
    const match = url.match(regExp);
    return (match && match[2].length === 11) ? match[2] : null;
  };

  const handleGenerate = (e: React.FormEvent) => {
    e.preventDefault();
    const id = extractVideoId(url);
    if (id) {
      setVideoId(id);
    }
  };

  const buildEmbedUrl = () => {
    if (!videoId) return '';
    let baseUrl = `https://www.youtube.com/embed/${videoId}`;
    const params = [];
    
    if (autoplay) params.push('autoplay=1');
    if (loop) params.push(`loop=1&playlist=${videoId}`); // loop requires playlist param
    if (!controls) params.push('controls=0');
    if (startTime) {
      const seconds = parseInt(startTime);
      if (!isNaN(seconds)) params.push(`start=${seconds}`);
    }

    if (params.length > 0) {
      baseUrl += `?${params.join('&')}`;
    }
    
    return baseUrl;
  };

  const codes = {
    standard: `<iframe width="560" height="315" src="${buildEmbedUrl()}" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>`,
    
    responsive: `<div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%;">\n  <iframe src="${buildEmbedUrl()}" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0;" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>\n</div>`,
    
    wordpress: `[youtube ${buildEmbedUrl()}]`
  };

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

  const embedSchema = {
    "@context": "https://schema.org",
    "@graph": [
      {
        "@type": "WebApplication",
        "name": "YTToolkits YouTube Embed Code Generator & Viewer",
        "url": "https://yttoolkits.site/embed-viewer",
        "applicationCategory": "MultimediaApplication",
        "operatingSystem": "All",
        "description": "Generate responsive, customized YouTube embed codes, iframes, and WordPress shortcodes with live interactive previews.",
        "offers": {
          "@type": "Offer",
          "price": "0",
          "priceCurrency": "USD"
        }
      },
      {
        "@type": "FAQPage",
        "mainEntity": [
          {
            "@type": "Question",
            "name": "How do I make a YouTube video embed responsive on mobile?",
            "acceptedAnswer": {
              "@type": "Answer",
              "text": "To make a YouTube embed fully responsive, wrap the iframe in a parent container with relative positioning, an overflow of hidden, and padding-bottom set to 56.25% (representing the 16:9 aspect ratio). Set the iframe's styling to position absolute, top 0, left 0, width 100%, and height 100%. Our tool provides this ready-to-paste Responsive CSS snippet automatically."
            }
          },
          {
            "@type": "Question",
            "name": "Why does autoplay not work on embedded YouTube videos?",
            "acceptedAnswer": {
              "@type": "Answer",
              "text": "Modern web browsers like Google Chrome, Apple Safari, and Mozilla Firefox enforce strict media autoplay policies that block videos from playing audio uninvited. If you enable autoplay, you must also append &mute=1 to your embed URL for the browser to allow automatic playback."
            }
          },
          {
            "@type": "Question",
            "name": "What is the difference between standard YouTube embeds and youtube-nocookie.com?",
            "acceptedAnswer": {
              "@type": "Answer",
              "text": "The standard youtube.com domain sets tracking cookies on visitors' browsers immediately when the webpage loads, even if they never press play. The privacy-enhanced domain youtube-nocookie.com does not store tracking cookies until the user explicitly clicks the video player, ensuring full compliance with European GDPR and ePrivacy regulations."
            }
          },
          {
            "@type": "Question",
            "name": "How do I loop an embedded YouTube video continuously?",
            "acceptedAnswer": {
              "@type": "Answer",
              "text": "Due to YouTube API specifications, looping a single video requires two parameters: loop=1 AND playlist=VIDEO_ID (where VIDEO_ID is the exact 11-character identifier of the video). Our generator automatically appends both parameters when you toggle the Loop option."
            }
          },
          {
            "@type": "Question",
            "name": "Can I embed a YouTube video starting at a specific timestamp?",
            "acceptedAnswer": {
              "@type": "Answer",
              "text": "Yes. Add start=SECONDS to the embed URL query parameters (e.g., start=90 for 1 minute and 30 seconds). When visitors view the page, playback starts directly at that exact second."
            }
          },
          {
            "@type": "Question",
            "name": "How do I hide YouTube player controls on my embed?",
            "acceptedAnswer": {
              "@type": "Answer",
              "text": "You can append controls=0 to the iframe URL. This completely removes the bottom progress bar, volume button, and play/pause controls, creating a clean background video or presentation showcase."
            }
          },
          {
            "@type": "Question",
            "name": "Can I embed private YouTube videos on my website?",
            "acceptedAnswer": {
              "@type": "Answer",
              "text": "No. Private videos cannot be viewed by anyone other than specifically invited Google accounts who are logged in. To share a video securely on your website without making it searchable to the public, set its visibility to 'Unlisted'."
            }
          },
          {
            "@type": "Question",
            "name": "Does embedding YouTube videos slow down my website?",
            "acceptedAnswer": {
              "@type": "Answer",
              "text": "Standard YouTube iframes load JavaScript bundles and assets that can impact initial PageSpeed and Core Web Vitals (LCP and TBT). To eliminate slowdowns, add loading='lazy' to your iframe or implement a lightweight facade that loads the heavy player only when clicked."
            }
          },
          {
            "@type": "Question",
            "name": "How do I embed a YouTube video into WordPress?",
            "acceptedAnswer": {
              "@type": "Answer",
              "text": "In WordPress Gutenberg, you can add a YouTube block and paste the URL, or add a Custom HTML block and paste our Responsive Iframe code. For classic WordPress editors or shortcode plugins, our generator also supplies the native [youtube URL] shortcode."
            }
          },
          {
            "@type": "Question",
            "name": "Is the YTToolkits YouTube Embed Generator free to use?",
            "acceptedAnswer": {
              "@type": "Answer",
              "text": "Yes, our YouTube Embed Viewer and Generator is 100% free with unlimited embed configurations, live previews, and instant code export."
            }
          }
        ]
      }
    ]
  };

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

      <div className="min-h-screen bg-zinc-950 text-zinc-100 p-4 sm:p-8">
        <div className="max-w-4xl mx-auto space-y-12">
          
          {/* Header */}
          <div className="text-center space-y-4">
            <h1 className="text-3xl md:text-5xl font-extrabold flex items-center justify-center gap-3">
              <Code className="w-10 h-10 text-purple-500" />
              YouTube Embed Viewer & Generator
            </h1>
            <p className="text-zinc-400 max-w-2xl mx-auto text-base md:text-lg">
              Preview embeddings in real time and generate customizable, fully responsive iframe codes for websites, blogs, WordPress, and web apps.
            </p>
          </div>

          {/* Generator Form and Preview Card */}
          <div className="bg-zinc-900/50 border border-zinc-800 rounded-3xl p-6 sm:p-8 space-y-8 shadow-2xl backdrop-blur-sm">
            <form onSubmit={handleGenerate} className="space-y-4">
              <div className="flex flex-col md:flex-row gap-4">
                <input
                  type="url"
                  value={url}
                  onChange={(e) => setUrl(e.target.value)}
                  placeholder="https://www.youtube.com/watch?v=... or https://youtu.be/..."
                  className="flex-1 bg-zinc-950 border border-zinc-800 focus:border-purple-500/50 focus:ring-2 focus:ring-purple-500/20 rounded-2xl p-4 text-zinc-100 placeholder-zinc-500 outline-none text-base"
                  required
                />
                <button
                  type="submit"
                  disabled={!url}
                  className="bg-purple-600 hover:bg-purple-700 text-white rounded-2xl px-8 py-4 font-bold transition-all disabled:opacity-50 disabled:cursor-not-allowed whitespace-nowrap shadow-lg shadow-purple-600/20"
                >
                  Generate Embed
                </button>
              </div>
            </form>

            {videoId && (
              <div className="space-y-8 animate-in fade-in slide-in-from-bottom-4 duration-300">
                {/* Live Preview */}
                <div className="space-y-4">
                  <h3 className="text-xl font-bold flex items-center gap-2 text-zinc-200">
                    <Monitor className="w-5 h-5 text-purple-500" /> Live Interactive Preview
                  </h3>
                  <div className="aspect-video w-full rounded-2xl overflow-hidden border-2 border-zinc-800 bg-black shadow-2xl">
                    <iframe
                      width="100%"
                      height="100%"
                      src={buildEmbedUrl()}
                      title="Preview"
                      frameBorder="0"
                      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                      allowFullScreen
                    ></iframe>
                  </div>
                </div>

                {/* Options Panel */}
                <div className="bg-zinc-950 p-6 rounded-2xl border border-zinc-800 space-y-4">
                  <h3 className="text-lg font-bold text-zinc-200 flex items-center gap-2">
                    <Sliders className="w-5 h-5 text-purple-400" /> Embed Configuration Parameters
                  </h3>
                  <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 pt-2">
                    <label className="flex items-center gap-3 cursor-pointer bg-zinc-900/60 p-3 rounded-xl border border-zinc-800/80 hover:border-zinc-700 transition-colors">
                      <input 
                        type="checkbox" 
                        checked={autoplay} 
                        onChange={e => setAutoplay(e.target.checked)}
                        className="w-5 h-5 rounded border-zinc-700 bg-zinc-900 text-purple-500 focus:ring-purple-500/50"
                      />
                      <span className="text-zinc-300 text-sm font-medium">Autoplay</span>
                    </label>

                    <label className="flex items-center gap-3 cursor-pointer bg-zinc-900/60 p-3 rounded-xl border border-zinc-800/80 hover:border-zinc-700 transition-colors">
                      <input 
                        type="checkbox" 
                        checked={loop} 
                        onChange={e => setLoop(e.target.checked)}
                        className="w-5 h-5 rounded border-zinc-700 bg-zinc-900 text-purple-500 focus:ring-purple-500/50"
                      />
                      <span className="text-zinc-300 text-sm font-medium">Loop Video</span>
                    </label>

                    <label className="flex items-center gap-3 cursor-pointer bg-zinc-900/60 p-3 rounded-xl border border-zinc-800/80 hover:border-zinc-700 transition-colors">
                      <input 
                        type="checkbox" 
                        checked={controls} 
                        onChange={e => setControls(e.target.checked)}
                        className="w-5 h-5 rounded border-zinc-700 bg-zinc-900 text-purple-500 focus:ring-purple-500/50"
                      />
                      <span className="text-zinc-300 text-sm font-medium">Show Controls</span>
                    </label>

                    <div className="flex items-center justify-between bg-zinc-900/60 p-3 rounded-xl border border-zinc-800/80">
                      <span className="text-zinc-300 text-sm font-medium">Start at (sec):</span>
                      <input 
                        type="number" 
                        value={startTime}
                        onChange={e => setStartTime(e.target.value)}
                        placeholder="0"
                        min="0"
                        className="w-20 bg-zinc-950 border border-zinc-800 rounded-lg px-2.5 py-1 text-zinc-100 outline-none focus:border-purple-500/50 text-right text-sm font-mono"
                      />
                    </div>
                  </div>
                </div>

                {/* Generated Code Boxes */}
                <div className="space-y-6">
                  
                  {/* Standard Iframe */}
                  <div className="space-y-2">
                    <div className="flex justify-between items-center">
                      <h4 className="font-bold text-zinc-200 flex items-center gap-2">
                        <Layout className="w-4 h-4 text-purple-400" /> Standard Fixed Iframe (560x315)
                      </h4>
                      <button
                        onClick={() => copyToClipboard(codes.standard, 'standard')}
                        className="text-sm flex items-center gap-1.5 text-purple-400 hover:text-purple-300 bg-zinc-900 hover:bg-zinc-800 border border-zinc-800 px-3 py-1.5 rounded-lg transition-colors"
                      >
                        {copiedStates['standard'] ? (
                          <>
                            <CheckCircle2 className="w-4 h-4 text-green-500" /> Copied!
                          </>
                        ) : (
                          <>
                            <Copy className="w-4 h-4" /> Copy Code
                          </>
                        )}
                      </button>
                    </div>
                    <pre className="bg-zinc-950 p-4 rounded-xl border border-zinc-800 text-zinc-400 text-xs sm:text-sm overflow-x-auto whitespace-pre-wrap font-mono">
                      {codes.standard}
                    </pre>
                  </div>

                  {/* Responsive CSS Container */}
                  <div className="space-y-2">
                    <div className="flex justify-between items-center">
                      <h4 className="font-bold text-zinc-200 flex items-center gap-2">
                        <Smartphone className="w-4 h-4 text-purple-400" /> Responsive CSS Container (Mobile & Desktop Fluid)
                      </h4>
                      <button
                        onClick={() => copyToClipboard(codes.responsive, 'responsive')}
                        className="text-sm flex items-center gap-1.5 text-purple-400 hover:text-purple-300 bg-zinc-900 hover:bg-zinc-800 border border-zinc-800 px-3 py-1.5 rounded-lg transition-colors"
                      >
                        {copiedStates['responsive'] ? (
                          <>
                            <CheckCircle2 className="w-4 h-4 text-green-500" /> Copied!
                          </>
                        ) : (
                          <>
                            <Copy className="w-4 h-4" /> Copy Responsive Code
                          </>
                        )}
                      </button>
                    </div>
                    <pre className="bg-zinc-950 p-4 rounded-xl border border-zinc-800 text-zinc-400 text-xs sm:text-sm overflow-x-auto whitespace-pre-wrap font-mono">
                      {codes.responsive}
                    </pre>
                  </div>

                  {/* WordPress Shortcode */}
                  <div className="space-y-2">
                    <div className="flex justify-between items-center">
                      <h4 className="font-bold text-zinc-200 flex items-center gap-2">
                        <Globe className="w-4 h-4 text-purple-400" /> WordPress Shortcode / Classic Embed
                      </h4>
                      <button
                        onClick={() => copyToClipboard(codes.wordpress, 'wordpress')}
                        className="text-sm flex items-center gap-1.5 text-purple-400 hover:text-purple-300 bg-zinc-900 hover:bg-zinc-800 border border-zinc-800 px-3 py-1.5 rounded-lg transition-colors"
                      >
                        {copiedStates['wordpress'] ? (
                          <>
                            <CheckCircle2 className="w-4 h-4 text-green-500" /> Copied!
                          </>
                        ) : (
                          <>
                            <Copy className="w-4 h-4" /> Copy Shortcode
                          </>
                        )}
                      </button>
                    </div>
                    <pre className="bg-zinc-950 p-4 rounded-xl border border-zinc-800 text-zinc-400 text-xs sm:text-sm overflow-x-auto whitespace-pre-wrap font-mono">
                      {codes.wordpress}
                    </pre>
                  </div>

                </div>
              </div>
            )}
          </div>

          {/* MASSIVE SEO CONTENT SECTION */}
          <article className="space-y-16 mt-16 pt-12 border-t border-zinc-800 text-zinc-300">
            
            {/* Section 1: What is the Tool */}
            <section className="space-y-6">
              <h2 className="text-2xl md:text-4xl font-extrabold text-zinc-100 flex items-center gap-3">
                <Code className="w-8 h-8 text-purple-500" />
                What is the YouTube Embed Code Generator?
              </h2>
              <div className="space-y-4 text-zinc-400 leading-relaxed text-base md:text-lg">
                <p>
                  The <strong className="text-zinc-200">YTToolkits YouTube Embed Code Generator</strong> is a specialized developer and content creator tool designed to simplify video integration on modern websites, publishing platforms, content management systems, and web applications. Embedding YouTube videos onto external web pages is one of the most effective methods to increase average session duration, reduce bounce rates, and enrich written articles with high-value audiovisual media.
                </p>
                <p>
                  When you grab an embed code directly from YouTube's native share modal, you are handed a basic HTML <code className="text-purple-400 bg-zinc-900 px-2 py-0.5 rounded">&lt;iframe&gt;</code> element with hardcoded, static dimensions (typically 560 pixels wide by 315 pixels tall). In today's responsive web ecosystem—where mobile and tablet devices account for over 60% of all global web traffic—fixed-pixel iframes overflow screen viewports, cause horizontal scrollbars, and degrade the user experience.
                </p>
                <p>
                  Our tool eliminates this problem entirely. It allows you to parse any YouTube video link, visually preview the player in an interactive sandbox, customize critical playback flags (including autoplay, video looping, player controls, and start timestamps), and instantly export clean HTML, CSS-fluid responsive containers, and CMS-compatible shortcodes.
                </p>
              </div>
            </section>

            {/* Section 2: How to Use - Step-by-Step Guide */}
            <section className="space-y-6">
              <h2 className="text-2xl md:text-4xl font-extrabold text-zinc-100 flex items-center gap-3">
                <Sparkles className="w-8 h-8 text-purple-500" />
                How to Use the YouTube Embed Generator - Step-by-Step Guide
              </h2>
              <p className="text-zinc-400 text-base md:text-lg leading-relaxed">
                Follow this quick, comprehensive guide to generate custom, device-ready YouTube embed codes for any web project:
              </p>
              <div className="grid gap-4 md:grid-cols-2">
                <div className="bg-zinc-900/50 border border-zinc-800 p-6 rounded-2xl space-y-3">
                  <div className="w-10 h-10 rounded-xl bg-purple-500/10 border border-purple-500/30 flex items-center justify-center font-bold text-purple-400 text-lg">
                    1
                  </div>
                  <h3 className="text-lg font-bold text-zinc-100">Paste Your YouTube URL</h3>
                  <p className="text-zinc-400 text-sm leading-relaxed">
                    Copy the video link from your browser or mobile app. Our parser supports standard watch links (<code className="text-purple-400 bg-zinc-950 px-1.5 py-0.5 rounded text-xs">youtube.com/watch?v=...</code>), short links (<code className="text-purple-400 bg-zinc-950 px-1.5 py-0.5 rounded text-xs">youtu.be/...</code>), and Shorts URLs. Paste it in the input above and click "Generate Embed".
                  </p>
                </div>

                <div className="bg-zinc-900/50 border border-zinc-800 p-6 rounded-2xl space-y-3">
                  <div className="w-10 h-10 rounded-xl bg-purple-500/10 border border-purple-500/30 flex items-center justify-center font-bold text-purple-400 text-lg">
                    2
                  </div>
                  <h3 className="text-lg font-bold text-zinc-100">Configure Playback Options</h3>
                  <p className="text-zinc-400 text-sm leading-relaxed">
                    Toggle your preferred parameters. Check <strong className="text-zinc-200">Autoplay</strong> to trigger immediate playback upon load, <strong className="text-zinc-200">Loop</strong> to continuously repeat the video, hide player controls for a sleek presentation, or specify a precise starting second.
                  </p>
                </div>

                <div className="bg-zinc-900/50 border border-zinc-800 p-6 rounded-2xl space-y-3">
                  <div className="w-10 h-10 rounded-xl bg-purple-500/10 border border-purple-500/30 flex items-center justify-center font-bold text-purple-400 text-lg">
                    3
                  </div>
                  <h3 className="text-lg font-bold text-zinc-100">Review in Live Preview</h3>
                  <p className="text-zinc-400 text-sm leading-relaxed">
                    Test the video directly in our interactive preview box. Verify that the video plays correctly, starts at your chosen timestamp, loops smoothly, and renders properly within a standard 16:9 aspect ratio.
                  </p>
                </div>

                <div className="bg-zinc-900/50 border border-zinc-800 p-6 rounded-2xl space-y-3">
                  <div className="w-10 h-10 rounded-xl bg-purple-500/10 border border-purple-500/30 flex items-center justify-center font-bold text-purple-400 text-lg">
                    4
                  </div>
                  <h3 className="text-lg font-bold text-zinc-100">Copy & Paste Code</h3>
                  <p className="text-zinc-400 text-sm leading-relaxed">
                    Select your preferred output code: Standard Iframe for fixed-width containers, Responsive CSS for modern mobile-first websites, or WordPress Shortcode. Click "Copy Code" and paste it into your CMS HTML block or frontend template.
                  </p>
                </div>
              </div>
            </section>

            {/* Section 3: Key Features */}
            <section className="space-y-6">
              <h2 className="text-2xl md:text-4xl font-extrabold text-zinc-100 flex items-center gap-3">
                <Settings2 className="w-8 h-8 text-purple-500" />
                Key Features of Our YouTube Embed Code Generator
              </h2>
              <p className="text-zinc-400 text-base md:text-lg leading-relaxed">
                Our embed generator includes advanced developer controls and performance features designed for modern web standards:
              </p>
              <div className="grid gap-6 md:grid-cols-3">
                <div className="bg-zinc-900/50 border border-zinc-800 p-6 rounded-2xl space-y-3">
                  <Smartphone className="w-6 h-6 text-purple-400" />
                  <h3 className="text-lg font-bold text-zinc-100">Pure Responsive CSS Wrapper</h3>
                  <p className="text-zinc-400 text-sm leading-relaxed">
                    Generates clean, inline CSS using the intrinsic 56.25% padding aspect-ratio formula. No external JavaScript libraries, dependencies, or CSS frameworks needed.
                  </p>
                </div>

                <div className="bg-zinc-900/50 border border-zinc-800 p-6 rounded-2xl space-y-3">
                  <Sliders className="w-6 h-6 text-purple-400" />
                  <h3 className="text-lg font-bold text-zinc-100">Automated Playlist Looping</h3>
                  <p className="text-zinc-400 text-sm leading-relaxed">
                    Solves YouTube's notorious loop bug. YouTube requires both <code className="text-purple-400 bg-zinc-950 px-1 rounded">loop=1</code> and <code className="text-purple-400 bg-zinc-950 px-1 rounded">playlist=VIDEO_ID</code> to loop properly; our generator writes this automatically.
                  </p>
                </div>

                <div className="bg-zinc-900/50 border border-zinc-800 p-6 rounded-2xl space-y-3">
                  <Monitor className="w-6 h-6 text-purple-400" />
                  <h3 className="text-lg font-bold text-zinc-100">Zero-Delay Live Sandbox</h3>
                  <p className="text-zinc-400 text-sm leading-relaxed">
                    Test how your embedded video behaves in real time before pushing code changes live to your production website or staging environment.
                  </p>
                </div>

                <div className="bg-zinc-900/50 border border-zinc-800 p-6 rounded-2xl space-y-3">
                  <ShieldCheck className="w-6 h-6 text-purple-400" />
                  <h3 className="text-lg font-bold text-zinc-100">Modern Iframe Security Flags</h3>
                  <p className="text-zinc-400 text-sm leading-relaxed">
                    Includes contemporary <code className="text-purple-400 bg-zinc-950 px-1 rounded">allow</code> directives for accelerometer, clipboard-write, encrypted-media, gyroscope, picture-in-picture, and web-share.
                  </p>
                </div>

                <div className="bg-zinc-900/50 border border-zinc-800 p-6 rounded-2xl space-y-3">
                  <Globe className="w-6 h-6 text-purple-400" />
                  <h3 className="text-lg font-bold text-zinc-100">Multi-Platform Ready</h3>
                  <p className="text-zinc-400 text-sm leading-relaxed">
                    Compatible with WordPress, Webflow, Squarespace, Shopify, Wix, Ghost, Notion, React, Next.js, Vue, and vanilla HTML5.
                  </p>
                </div>

                <div className="bg-zinc-900/50 border border-zinc-800 p-6 rounded-2xl space-y-3">
                  <Zap className="w-6 h-6 text-purple-400" />
                  <h3 className="text-lg font-bold text-zinc-100">Timestamp Precision</h3>
                  <p className="text-zinc-400 text-sm leading-relaxed">
                    Start playback at the exact second you want your readers to see, cutting straight to the core demonstration or relevant clip.
                  </p>
                </div>
              </div>
            </section>

            {/* Section 4: Why Choose YTToolkits - USP Comparison */}
            <section className="space-y-6">
              <h2 className="text-2xl md:text-4xl font-extrabold text-zinc-100 flex items-center gap-3">
                <Laptop className="w-8 h-8 text-purple-500" />
                Why Choose YTToolkits YouTube Embed Generator?
              </h2>
              <div className="space-y-4 text-zinc-400 leading-relaxed text-base md:text-lg">
                <p>
                  While YouTube provides a built-in "Share &gt; Embed" modal, it is notoriously limited. It locks you into fixed dimensions, provides no responsive stylesheet, omits loop playlist workarounds, and lacks multi-format exports. 
                </p>
                <p>
                  Compare the capabilities of YTToolkits Embed Viewer with default native embedding:
                </p>
              </div>

              <div className="overflow-x-auto">
                <table className="w-full text-left border-collapse border border-zinc-800 rounded-2xl overflow-hidden">
                  <thead>
                    <tr className="bg-zinc-900 border-b border-zinc-800">
                      <th className="p-4 text-zinc-100 font-bold">Feature</th>
                      <th className="p-4 text-purple-400 font-bold">YTToolkits Embed Generator</th>
                      <th className="p-4 text-zinc-400 font-bold">YouTube Native Share Modal</th>
                      <th className="p-4 text-zinc-400 font-bold">Generic Web Tools</th>
                    </tr>
                  </thead>
                  <tbody className="divide-y divide-zinc-800/60 bg-zinc-950">
                    <tr className="hover:bg-zinc-900/30">
                      <td className="p-4 text-zinc-200 font-medium">Responsive Mobile Container</td>
                      <td className="p-4 text-green-400">Yes (Auto 16:9 CSS included)</td>
                      <td className="p-4 text-red-400">No (Fixed 560x315 only)</td>
                      <td className="p-4 text-amber-400">Requires separate CSS files</td>
                    </tr>
                    <tr className="hover:bg-zinc-900/30">
                      <td className="p-4 text-zinc-200 font-medium">Video Looping Bugfix</td>
                      <td className="p-4 text-green-400">Yes (Auto appends playlist param)</td>
                      <td className="p-4 text-red-400">No (Fails to loop single videos)</td>
                      <td className="p-4 text-red-400">No</td>
                    </tr>
                    <tr className="hover:bg-zinc-900/30">
                      <td className="p-4 text-zinc-200 font-medium">WordPress Shortcode Export</td>
                      <td className="p-4 text-green-400">Yes ([youtube URL] snippet)</td>
                      <td className="p-4 text-red-400">No</td>
                      <td className="p-4 text-zinc-400">Rarely available</td>
                    </tr>
                    <tr className="hover:bg-zinc-900/30">
                      <td className="p-4 text-zinc-200 font-medium">Live In-Page Sandbox</td>
                      <td className="p-4 text-green-400">Yes (Real-time iframe test)</td>
                      <td className="p-4 text-zinc-300">Basic preview</td>
                      <td className="p-4 text-red-400">Often static thumbnail only</td>
                    </tr>
                    <tr className="hover:bg-zinc-900/30">
                      <td className="p-4 text-zinc-200 font-medium">Ad-Free & Tracking-Free</td>
                      <td className="p-4 text-green-400">100% Free, Zero invasive popups</td>
                      <td className="p-4 text-green-400">Free</td>
                      <td className="p-4 text-red-400">Cluttered with intrusive ads</td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </section>

            {/* Section 5: Educational Masterclass on Iframe Embedding */}
            <section className="space-y-6">
              <h2 className="text-2xl md:text-4xl font-extrabold text-zinc-100 flex items-center gap-3">
                <Monitor className="w-8 h-8 text-purple-500" />
                The Complete Guide to YouTube Embeds, Performance & SEO
              </h2>
              <div className="space-y-6 text-zinc-400 leading-relaxed text-base md:text-lg">
                <p>
                  Embedding video content is one of the highest-return activities you can undertake for your website's organic SEO strategy. According to digital marketing analytics, articles that incorporate an embedded explanatory video enjoy an average dwell time increase of over 150%, sending powerful positive engagement signals to Google Search algorithms.
                </p>

                <h3 className="text-xl md:text-2xl font-bold text-zinc-100 pt-2">1. The Mathematics Behind Responsive 16:9 Embeds</h3>
                <p>
                  Standard high-definition video follows a strict aspect ratio of <strong className="text-zinc-200">16 units of width to 9 units of height</strong>. In responsive web design, standard HTML elements resize naturally based on screen width, but iframes do not automatically preserve their height, leading to hideous black letterboxing bars or squished video players.
                </p>
                <p>
                  To solve this without JavaScript, web developers use the CSS "Padding Hack":
                </p>
                <div className="bg-zinc-900/50 p-4 rounded-xl border border-zinc-800 font-mono text-sm text-purple-300">
                  Padding Bottom % = (9 / 16) * 100% = 56.25%
                </div>
                <p>
                  By creating a container div with <code className="text-purple-400 bg-zinc-900 px-2 py-0.5 rounded">position: relative</code>, <code className="text-purple-400 bg-zinc-900 px-2 py-0.5 rounded">padding-bottom: 56.25%</code>, and <code className="text-purple-400 bg-zinc-900 px-2 py-0.5 rounded">height: 0</code>, the container maintains an exact 16:9 proportional height regardless of whether the screen is 320px wide on a mobile phone or 2560px wide on an ultrawide monitor. Setting the child iframe to <code className="text-purple-400 bg-zinc-900 px-2 py-0.5 rounded">position: absolute; top: 0; left: 0; width: 100%; height: 100%;</code> ensures the player fills the box flawlessly without any layout shift.
                </p>

                <h3 className="text-xl md:text-2xl font-bold text-zinc-100 pt-2">2. Deep Dive: Key YouTube Iframe URL Parameters</h3>
                <p>
                  YouTube's player API supports an extensive variety of query string parameters that alter player functionality. Understanding how these parameters interact enables you to create bespoke user experiences:
                </p>
                <ul className="list-disc pl-6 space-y-3 text-zinc-400">
                  <li>
                    <strong className="text-zinc-200">autoplay=1</strong> — Instructs the player to start immediately upon loading. <em>Note:</em> Browsers block audible autoplay. If you enable this, pair it with <code className="text-purple-400 bg-zinc-900 px-2 py-0.5 rounded">mute=1</code> or users will see a paused video.
                  </li>
                  <li>
                    <strong className="text-zinc-200">controls=0</strong> — Hides the player controls completely. Useful for ambient hero background videos, interactive presentations, or micro-demonstrations.
                  </li>
                  <li>
                    <strong className="text-zinc-200">loop=1 & playlist=VIDEO_ID</strong> — Continuously loops the video. Without the <code className="text-purple-400 bg-zinc-900 px-2 py-0.5 rounded">playlist</code> parameter pointing to the current video's ID, YouTube ignores the loop command.
                  </li>
                  <li>
                    <strong className="text-zinc-200">start=SECONDS</strong> — Sets the playback start point in seconds. For example, <code className="text-purple-400 bg-zinc-900 px-2 py-0.5 rounded">start=125</code> begins playback at the 2-minute 5-second mark.
                  </li>
                  <li>
                    <strong className="text-zinc-200">rel=0</strong> — Restricts suggested related videos shown at the conclusion of playback to other videos from the <em>same channel</em>, rather than recommending competing creators.
                  </li>
                  <li>
                    <strong className="text-zinc-200">modestbranding=1</strong> — Minimizes YouTube branding by removing the large YouTube logo watermark from the control bar.
                  </li>
                </ul>

                <h3 className="text-xl md:text-2xl font-bold text-zinc-100 pt-2">3. PageSpeed Optimization: Preventing Embed Bloat</h3>
                <p>
                  A standard YouTube iframe loads approximately 500KB to 1MB of JavaScript scripts, stylesheets, fonts, and assets. If your blog article embeds four or five videos, this can severely hurt your Google Lighthouse score, Total Blocking Time (TBT), and Largest Contentful Paint (LCP).
                </p>
                <p>
                  To optimize page speed while retaining embedded videos:
                </p>
                <ol className="list-decimal pl-6 space-y-2 text-zinc-400">
                  <li>Always include <code className="text-purple-400 bg-zinc-900 px-2 py-0.5 rounded">loading="lazy"</code> on your iframes to ensure browsers defer fetching player resources until the user scrolls near the video.</li>
                  <li>Consider implementing a "Click-to-Play Facade"—rendering a lightweight thumbnail image with a faux play button (using our <Link href="/thumbnail-downloader" className="text-purple-400 underline hover:text-purple-300">Thumbnail Downloader</Link>), and dynamically mounting the iframe only when the user clicks play.</li>
                </ol>

                <h3 className="text-xl md:text-2xl font-bold text-zinc-100 pt-2">4. Privacy & GDPR Compliance: The No-Cookie Alternative</h3>
                <p>
                  Under European General Data Protection Regulation (GDPR) and California Consumer Privacy Act (CCPA) statutes, embedding third-party trackers without explicit cookie banner consent can expose website owners to severe legal penalties. The default <code className="text-purple-400 bg-zinc-900 px-2 py-0.5 rounded">youtube.com/embed</code> URL places tracking cookies on user machines immediately on page arrival.
                </p>
                <p>
                  To safeguard your website, you can swap the domain to <code className="text-purple-400 bg-zinc-900 px-2 py-0.5 rounded">https://www.youtube-nocookie.com/embed/VIDEO_ID</code>. In privacy-enhanced mode, YouTube guarantees that no tracking cookies will be stored on visitor devices until the visitor explicitly clicks play on the player.
                </p>
              </div>
            </section>

            {/* Section 6: Frequently Asked Questions (10 Detailed Q&As) */}
            <section className="space-y-6">
              <h2 className="text-2xl md:text-4xl font-extrabold text-zinc-100 flex items-center gap-3">
                <HelpCircle className="w-8 h-8 text-purple-500" />
                Frequently Asked Questions About YouTube Embeds
              </h2>
              <p className="text-zinc-400 text-base md:text-lg">
                Find clear, authoritative answers to the most common questions regarding embedding YouTube media:
              </p>

              <div className="space-y-4">
                <details className="bg-zinc-900/50 border border-zinc-800 rounded-2xl p-6 cursor-pointer group transition-all">
                  <summary className="font-bold text-lg text-zinc-100 flex justify-between items-center outline-none list-none">
                    <span>1. How do I make a YouTube video embed responsive on mobile?</span>
                    <span className="text-purple-500 group-open:rotate-180 transition-transform">▼</span>
                  </summary>
                  <p className="mt-4 text-zinc-400 leading-relaxed text-sm md:text-base">
                    Wrap the standard iframe in a container div with relative positioning, hidden overflow, and padding-bottom set to 56.25% (which represents the 16:9 ratio). Then give the iframe absolute positioning covering 100% width and height. Our "Responsive CSS" snippet generates this exact container ready to copy and paste.
                  </p>
                </details>

                <details className="bg-zinc-900/50 border border-zinc-800 rounded-2xl p-6 cursor-pointer group transition-all">
                  <summary className="font-bold text-lg text-zinc-100 flex justify-between items-center outline-none list-none">
                    <span>2. Why does autoplay not work on embedded YouTube videos?</span>
                    <span className="text-purple-500 group-open:rotate-180 transition-transform">▼</span>
                  </summary>
                  <p className="mt-4 text-zinc-400 leading-relaxed text-sm md:text-base">
                    All modern web browsers (Chrome, Safari, Firefox, Edge) enforce strict autoplay blocking policies against uninvited audio playback. If you configure autoplay=1, browsers will halt playback unless the player is also muted. To ensure consistent autoplay across desktop and mobile, append &mute=1 to your embed URL.
                  </p>
                </details>

                <details className="bg-zinc-900/50 border border-zinc-800 rounded-2xl p-6 cursor-pointer group transition-all">
                  <summary className="font-bold text-lg text-zinc-100 flex justify-between items-center outline-none list-none">
                    <span>3. What is the difference between standard YouTube embeds and youtube-nocookie.com?</span>
                    <span className="text-purple-500 group-open:rotate-180 transition-transform">▼</span>
                  </summary>
                  <p className="mt-4 text-zinc-400 leading-relaxed text-sm md:text-base">
                    Standard youtube.com embeds store advertising cookies in the user's browser the second your webpage renders, which violates strict European GDPR rules without prior consent. The youtube-nocookie.com domain implements privacy-enhanced mode, which does not store cookies until the viewer actively presses the play button.
                  </p>
                </details>

                <details className="bg-zinc-900/50 border border-zinc-800 rounded-2xl p-6 cursor-pointer group transition-all">
                  <summary className="font-bold text-lg text-zinc-100 flex justify-between items-center outline-none list-none">
                    <span>4. How do I loop an embedded YouTube video continuously?</span>
                    <span className="text-purple-500 group-open:rotate-180 transition-transform">▼</span>
                  </summary>
                  <p className="mt-4 text-zinc-400 leading-relaxed text-sm md:text-base">
                    Looping a single video requires two simultaneous query parameters: loop=1 and playlist=VIDEO_ID. YouTube's API requires the playlist parameter to point to the exact same video ID in order to cycle back to the beginning indefinitely. Our tool generates this combined syntax automatically when you toggle the loop checkbox.
                  </p>
                </details>

                <details className="bg-zinc-900/50 border border-zinc-800 rounded-2xl p-6 cursor-pointer group transition-all">
                  <summary className="font-bold text-lg text-zinc-100 flex justify-between items-center outline-none list-none">
                    <span>5. Can I embed a YouTube video starting at a specific timestamp?</span>
                    <span className="text-purple-500 group-open:rotate-180 transition-transform">▼</span>
                  </summary>
                  <p className="mt-4 text-zinc-400 leading-relaxed text-sm md:text-base">
                    Yes. Enter the desired start second into our tool or append ?start=SECONDS (e.g., start=120 to begin at two minutes) to the embed URL. When the user plays the video, playback will begin right at that designated marker.
                  </p>
                </details>

                <details className="bg-zinc-900/50 border border-zinc-800 rounded-2xl p-6 cursor-pointer group transition-all">
                  <summary className="font-bold text-lg text-zinc-100 flex justify-between items-center outline-none list-none">
                    <span>6. How do I hide YouTube player controls on my embed?</span>
                    <span className="text-purple-500 group-open:rotate-180 transition-transform">▼</span>
                  </summary>
                  <p className="mt-4 text-zinc-400 leading-relaxed text-sm md:text-base">
                    Uncheck the "Show Controls" checkbox in our tool or append controls=0 to the iframe's src URL. This strips out the progress bar, volume controls, and playback buttons, which is great for background video presentations and clean user interfaces.
                  </p>
                </details>

                <details className="bg-zinc-900/50 border border-zinc-800 rounded-2xl p-6 cursor-pointer group transition-all">
                  <summary className="font-bold text-lg text-zinc-100 flex justify-between items-center outline-none list-none">
                    <span>7. Can I embed private YouTube videos on my website?</span>
                    <span className="text-purple-500 group-open:rotate-180 transition-transform">▼</span>
                  </summary>
                  <p className="mt-4 text-zinc-400 leading-relaxed text-sm md:text-base">
                    No. Private videos can only be viewed by accounts specifically whitelisted in the creator's YouTube Studio who are actively logged in. If you want a video to be accessible on your website without showing up in YouTube search or channel listings, set its visibility to "Unlisted".
                  </p>
                </details>

                <details className="bg-zinc-900/50 border border-zinc-800 rounded-2xl p-6 cursor-pointer group transition-all">
                  <summary className="font-bold text-lg text-zinc-100 flex justify-between items-center outline-none list-none">
                    <span>8. Does embedding YouTube videos hurt Core Web Vitals?</span>
                    <span className="text-purple-500 group-open:rotate-180 transition-transform">▼</span>
                  </summary>
                  <p className="mt-4 text-zinc-400 leading-relaxed text-sm md:text-base">
                    If unoptimized, standard iframes can negatively impact your Total Blocking Time (TBT) and Largest Contentful Paint (LCP) scores by downloading heavy third-party JavaScript assets immediately. To prevent performance degradation, add loading="lazy" to the iframe tag or implement facade placeholders that initialize the player on click.
                  </p>
                </details>

                <details className="bg-zinc-900/50 border border-zinc-800 rounded-2xl p-6 cursor-pointer group transition-all">
                  <summary className="font-bold text-lg text-zinc-100 flex justify-between items-center outline-none list-none">
                    <span>9. How do I embed a YouTube video into WordPress?</span>
                    <span className="text-purple-500 group-open:rotate-180 transition-transform">▼</span>
                  </summary>
                  <p className="mt-4 text-zinc-400 leading-relaxed text-sm md:text-base">
                    In modern WordPress (Gutenberg), you can add a Custom HTML block and paste our Responsive CSS iframe code directly. For older classic editors, you can copy our WordPress Shortcode option [youtube URL] or paste the clean embed URL directly onto an empty line.
                  </p>
                </details>

                <details className="bg-zinc-900/50 border border-zinc-800 rounded-2xl p-6 cursor-pointer group transition-all">
                  <summary className="font-bold text-lg text-zinc-100 flex justify-between items-center outline-none list-none">
                    <span>10. Can I remove related videos completely at the end of playback?</span>
                    <span className="text-purple-500 group-open:rotate-180 transition-transform">▼</span>
                  </summary>
                  <p className="mt-4 text-zinc-400 leading-relaxed text-sm md:text-base">
                    In 2018, YouTube updated its API so that rel=0 no longer disables related videos entirely. Instead, appending rel=0 forces YouTube to show suggested videos exclusively from your channel rather than recommending videos from competing creators.
                  </p>
                </details>
              </div>
            </section>

            {/* Section 7: Related YouTube Tools */}
            <section className="space-y-6">
              <h2 className="text-2xl md:text-4xl font-extrabold text-zinc-100 flex items-center gap-3">
                <PlaySquare className="w-8 h-8 text-purple-500" />
                Explore Related YouTube Creator Tools
              </h2>
              <p className="text-zinc-400 text-base md:text-lg">
                Discover more free utilities to optimize, inspect, and enhance your YouTube video workflow:
              </p>

              <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
                <Link
                  href="/link-viewer"
                  className="bg-zinc-900/50 border border-zinc-800 hover:border-purple-500/50 p-6 rounded-2xl transition-all group flex flex-col justify-between"
                >
                  <div className="space-y-2">
                    <div className="flex items-center justify-between">
                      <Layout className="w-6 h-6 text-teal-500" />
                      <ArrowRight className="w-4 h-4 text-zinc-500 group-hover:text-teal-400 group-hover:translate-x-1 transition-all" />
                    </div>
                    <h3 className="font-bold text-zinc-100 text-lg group-hover:text-teal-400 transition-colors">
                      YouTube Link Viewer
                    </h3>
                    <p className="text-zinc-400 text-sm leading-relaxed">
                      Deconstruct YouTube URLs to extract video IDs, clean tracking parameters, and generate canonical links.
                    </p>
                  </div>
                </Link>

                <Link
                  href="/thumbnail-downloader"
                  className="bg-zinc-900/50 border border-zinc-800 hover:border-purple-500/50 p-6 rounded-2xl transition-all group flex flex-col justify-between"
                >
                  <div className="space-y-2">
                    <div className="flex items-center justify-between">
                      <PlaySquare className="w-6 h-6 text-blue-500" />
                      <ArrowRight className="w-4 h-4 text-zinc-500 group-hover:text-blue-400 group-hover:translate-x-1 transition-all" />
                    </div>
                    <h3 className="font-bold text-zinc-100 text-lg group-hover:text-blue-400 transition-colors">
                      Thumbnail Downloader
                    </h3>
                    <p className="text-zinc-400 text-sm leading-relaxed">
                      Download original high-definition and 4K thumbnails to use as lightweight video facades.
                    </p>
                  </div>
                </Link>

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

                <Link
                  href="/tag-extractor"
                  className="bg-zinc-900/50 border border-zinc-800 hover:border-purple-500/50 p-6 rounded-2xl transition-all group flex flex-col justify-between"
                >
                  <div className="space-y-2">
                    <div className="flex items-center justify-between">
                      <Code className="w-6 h-6 text-orange-500" />
                      <ArrowRight className="w-4 h-4 text-zinc-500 group-hover:text-orange-400 group-hover:translate-x-1 transition-all" />
                    </div>
                    <h3 className="font-bold text-zinc-100 text-lg group-hover:text-orange-400 transition-colors">
                      YouTube Tag Extractor
                    </h3>
                    <p className="text-zinc-400 text-sm leading-relaxed">
                      Analyze competitor video tags to understand their SEO keyword targeting strategy.
                    </p>
                  </div>
                </Link>

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

                <Link
                  href="/clickbait-title-generator"
                  className="bg-zinc-900/50 border border-zinc-800 hover:border-purple-500/50 p-6 rounded-2xl transition-all group flex flex-col justify-between"
                >
                  <div className="space-y-2">
                    <div className="flex items-center justify-between">
                      <Zap className="w-6 h-6 text-red-500" />
                      <ArrowRight className="w-4 h-4 text-zinc-500 group-hover:text-red-400 group-hover:translate-x-1 transition-all" />
                    </div>
                    <h3 className="font-bold text-zinc-100 text-lg group-hover:text-red-400 transition-colors">
                      Clickbait Title Generator
                    </h3>
                    <p className="text-zinc-400 text-sm leading-relaxed">
                      Draft captivating titles engineered to boost Click-Through Rates (CTR) and capture viewer curiosity.
                    </p>
                  </div>
                </Link>
              </div>
            </section>

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