import React from 'react';
import type { Metadata } from 'next';
import YoutubeGenerator from './YouTubeGenerator';
import { Youtube, Shield, Zap, Smartphone, Play, Radio, Download, Share2 } from 'lucide-react';
import { QRCodeSVG } from 'qrcode.react';
import { ToolBreadcrumb } from '@/components/seo/BreadcrumbSchema';
import { RelatedTools } from '@/components/marketing/RelatedTools';
import { generateSoftwareAppSchema, generateFaqSchema } from '@/lib/schema-utils';

// SEO Optimized Metadata
export const metadata: Metadata = {
    title: {
        absolute: 'Free YouTube QR Code Generator | Get Views & Subscribers | QR Master',
    },
    description: 'Create a QR code for your YouTube video or channel. YouTube QR Code erstellen. Scanners watch instantly. Free & Fast.',
    keywords: ['youtube qr code', 'video qr code', 'youtube channel qr', 'youtube subscribe qr', 'social media qr code', 'youtube qr code erstellen', 'video qr code erstellen', 'kanal qr code', 'youtube abonnenten qr code', 'youtube video teilen qr'],
    alternates: {
        canonical: 'https://www.qrmaster.net/tools/youtube-qr-code',
    },
    openGraph: {
        title: 'Free YouTube QR Code Generator | QR Master',
        description: 'Generate QR codes to grow your YouTube channel. Instant video play.',
        type: 'website',
        url: 'https://www.qrmaster.net/tools/youtube-qr-code',
        images: [{ url: '/og-youtube-generator.png', width: 1200, height: 630 }],
    },
    twitter: {
        card: 'summary_large_image',
        title: 'Free YouTube QR Code Generator',
        description: 'Create QR codes for YouTube videos. Get more views.',
    },
    robots: {
        index: true,
        follow: true,
    },
};

// JSON-LD Structured Data
const jsonLd = {
    '@context': 'https://schema.org',
    '@graph': [
        generateSoftwareAppSchema(
            'YouTube QR Code Generator',
            'Generate QR codes that direct users to a YouTube video or channel.',
            '/og-youtube-generator.png'
        ),
        {
            '@type': 'HowTo',
            name: 'How to Create a YouTube QR Code',
            description: 'Create a QR code that opens a YouTube video.',
            step: [
                {
                    '@type': 'HowToStep',
                    position: 1,
                    name: 'Copy URL',
                    text: 'Copy the link of your YouTube video or channel.',
                },
                {
                    '@type': 'HowToStep',
                    position: 2,
                    name: 'Paste',
                    text: 'Paste the link into the generator input.',
                },
                {
                    '@type': 'HowToStep',
                    position: 3,
                    name: 'Customize',
                    text: 'Add a "Watch Now" frame or change the color to YouTube Red.',
                },
                {
                    '@type': 'HowToStep',
                    position: 4,
                    name: 'Download',
                    text: 'Save your QR code image for printing.',
                },
                {
                    '@type': 'HowToStep',
                    position: 5,
                    name: 'Share',
                    text: 'Place it on posters, merch, or video end screens.',
                },
            ],
            totalTime: 'PT30S',
        },
        generateFaqSchema({
            'Does it open the YouTube app?': {
                question: 'Does it open the YouTube app?',
                answer: 'Yes! If the user has the YouTube app installed, the QR code will automatically launch the app and play the video.',
            },
            'Can I link to a specific timestamp?': {
                question: 'Can I link to a specific timestamp?',
                answer: 'Yes. If you include the timestamp in your YouTube link (e.g., ?t=60s), the video will start playing from that exact moment.',
            },
            'Can I use this for a playlist?': {
                question: 'Can I use this for a playlist?',
                answer: 'Absolutely. Just paste the playlist URL, and users will be taken to the full list of videos.',
            },
            'Is it free?': {
                question: 'Is it free?',
                answer: 'Yes, this tool is 100% free forever.',
            },
            'Does it work for YouTube Shorts?': {
                question: 'Does it work for YouTube Shorts?',
                answer: 'Yes, just paste the "Share" link from any YouTube Short.',
            },
        }),
    ],
};

export default function YoutubeQRCodePage() {
    return (
        <>
            <script
                type="application/ld+json"
                dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
            />
            <ToolBreadcrumb toolName="YouTube QR Code Generator" toolSlug="youtube-qr-code" />

            <div className="min-h-screen" style={{ backgroundColor: '#EBEBDF' }}>

                {/* HERO SECTION */}
                <section className="relative pt-20 pb-20 lg:pt-32 lg:pb-32 px-4 sm:px-6 lg:px-8 overflow-hidden bg-[#FF0000]">
                    <div className="absolute inset-0 opacity-10">
                        {/* Play Button Pattern */}
                        <svg className="w-full h-full" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
                            <defs>
                                <pattern id="yt_pattern" width="60" height="60" patternUnits="userSpaceOnUse">
                                    <path d="M20 20 L40 30 L20 40 Z" fill="white" />
                                </pattern>
                            </defs>
                            <rect width="100%" height="100%" fill="url(#yt_pattern)" />
                        </svg>
                    </div>

                    <div className="max-w-7xl mx-auto grid lg:grid-cols-2 gap-12 items-center relative z-10">
                        <div className="text-center lg:text-left">
                            <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white/10 text-white/90 text-sm font-medium mb-6 backdrop-blur-sm border border-white/10 hover:bg-white/20 transition-colors cursor-default">
                                <span className="flex h-2 w-2 relative">
                                    <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-red-300 opacity-75"></span>
                                    <span className="relative inline-flex rounded-full h-2 w-2 bg-red-300"></span>
                                </span>
                                Free Tool — No Signup Required
                            </div>

                            <h1 className="text-4xl md:text-5xl lg:text-6xl font-extrabold text-white tracking-tight leading-tight mb-6">
                                Get More Views with <br className="hidden lg:block" />
                                <span className="text-white drop-shadow-md">YouTube QR Codes</span>
                            </h1>

                            <p className="text-lg md:text-xl text-red-50 max-w-2xl mx-auto lg:mx-0 mb-8 leading-relaxed">
                                From print to play in one scan. Direct your audience to your latest video, channel, or playlist instantly.
                                <strong className="text-white block sm:inline mt-2 sm:mt-0"> Boost subscriber growth.</strong>
                            </p>

                            <div className="flex flex-wrap justify-center lg:justify-start gap-4 text-sm font-medium text-white/80">
                                <div className="flex items-center gap-2 bg-white/10 px-4 py-2.5 rounded-xl border border-white/10 backdrop-blur-sm">
                                    <Play className="w-4 h-4 text-white" />
                                    Instant Play
                                </div>
                                <div className="flex items-center gap-2 bg-white/10 px-4 py-2.5 rounded-xl border border-white/10 backdrop-blur-sm">
                                    <Radio className="w-4 h-4 text-white" />
                                    Grow Channel
                                </div>
                                <div className="flex items-center gap-2 bg-white/10 px-4 py-2.5 rounded-xl border border-white/10 backdrop-blur-sm">
                                    <Smartphone className="w-4 h-4 text-white" />
                                    App Friendly
                                </div>
                            </div>
                        </div>

                        {/* Visual Abstract */}
                        <div className="hidden lg:flex relative items-center justify-center min-h-[400px]">
                            <div className="absolute w-[500px] h-[500px] bg-red-600/30 rounded-full blur-[100px] -top-20 -right-20 animate-pulse" />

                            <div className="relative w-80 h-96 bg-white/5 backdrop-blur-xl border border-white/20 rounded-3xl shadow-2xl flex flex-col items-center justify-center p-8 transform rotate-3 hover:rotate-0 transition-all duration-700 group">
                                <div className="absolute inset-0 bg-gradient-to-br from-white/10 to-transparent rounded-3xl" />

                                <div className="w-full bg-black rounded-xl shadow-lg h-40 mb-6 relative overflow-hidden group-hover:scale-105 transition-transform flex items-center justify-center">
                                    <div className="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1611162617474-5b21e879e113?q=80&w=1000&auto=format&fit=crop')] bg-cover bg-center opacity-70"></div>
                                    <div className="w-12 h-12 bg-red-600 rounded-full flex items-center justify-center relative z-10 shadow-xl">
                                        <Play className="w-6 h-6 text-white ml-1" fill="white" />
                                    </div>
                                    <div className="absolute bottom-2 right-2 bg-black/80 px-2 rounded text-xs text-white font-bold">10:24</div>
                                </div>

                                <div className="w-44 h-44 bg-white rounded-xl p-2 shadow-inner relative overflow-hidden flex items-center justify-center">
                                    <QRCodeSVG value="https://www.qrmaster.net" size={160} fgColor="#FF0000" level="Q" />
                                </div>

                                {/* Floating Badge */}
                                <div className="absolute -bottom-6 -left-6 bg-white py-3 px-5 rounded-xl shadow-xl flex items-center gap-3 transform transition-transform hover:scale-105 duration-300">
                                    <div className="bg-red-100 p-2 rounded-full">
                                        <Youtube className="w-5 h-5 text-red-600" />
                                    </div>
                                    <div className="text-left">
                                        <div className="text-[10px] text-slate-400 font-bold uppercase tracking-wider">Subscribers</div>
                                        <div className="text-sm font-bold text-slate-900">+10 New</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>

                {/* GENERATOR SECTION */}
                <section className="py-12 px-4 sm:px-6 lg:px-8 -mt-8">
                    <YoutubeGenerator />
                </section>

                {/* HOW IT WORKS */}
                <section className="py-16 px-4 sm:px-6 lg:px-8 bg-white">
                    <div className="max-w-4xl mx-auto">
                        <h2 className="text-3xl font-bold text-slate-900 text-center mb-12">
                            How YouTube QR Codes Work
                        </h2>

                        <div className="grid md:grid-cols-3 lg:grid-cols-5 gap-8">
                            <article className="text-center">
                                <div className="w-14 h-14 rounded-2xl bg-[#FF0000]/10 flex items-center justify-center mx-auto mb-4">
                                    <Youtube className="w-7 h-7 text-[#FF0000]" />
                                </div>
                                <h3 className="font-bold text-slate-900 mb-2">1. Paste Link</h3>
                                <p className="text-slate-600 text-sm">
                                    Copy the URL of your video, channel, or playlist.
                                </p>
                            </article>

                            <article className="text-center">
                                <div className="w-14 h-14 rounded-2xl bg-[#FF0000]/10 flex items-center justify-center mx-auto mb-4">
                                    <Smartphone className="w-7 h-7 text-[#FF0000]" />
                                </div>
                                <h3 className="font-bold text-slate-900 mb-2">2. Print Code</h3>
                                <p className="text-slate-600 text-sm">
                                    Place the QR code on flyers, posters, or merchandise.
                                </p>
                            </article>

                            <article className="text-center">
                                <div className="w-12 h-12 rounded-2xl bg-[#FF0000]/10 flex items-center justify-center mx-auto mb-4">
                                    <Download className="w-6 h-6 text-[#FF0000]" />
                                </div>
                                <h3 className="font-bold text-slate-900 mb-2">3. Download</h3>
                                <p className="text-slate-600 text-xs leading-relaxed">
                                    Save your high-quality QR code.
                                </p>
                            </article>

                            <article className="text-center">
                                <div className="w-12 h-12 rounded-2xl bg-[#FF0000]/10 flex items-center justify-center mx-auto mb-4">
                                    <Play className="w-6 h-6 text-[#FF0000]" />
                                </div>
                                <h3 className="font-bold text-slate-900 mb-2">4. Scan</h3>
                                <p className="text-slate-600 text-xs leading-relaxed">
                                    Customers scan the code.
                                </p>
                            </article>

                            <article className="text-center">
                                <div className="w-12 h-12 rounded-2xl bg-[#FF0000]/10 flex items-center justify-center mx-auto mb-4">
                                    <Share2 className="w-6 h-6 text-[#FF0000]" />
                                </div>
                                <h3 className="font-bold text-slate-900 mb-2">5. Watch</h3>
                                <p className="text-slate-600 text-xs leading-relaxed">
                                    The video plays instantly.
                                </p>
                            </article>
                        </div>
                    </div>
                </section>

                {/* RELATED TOOLS */}
                <RelatedTools />

                {/* FAQ SECTION */}
                <section className="py-16 px-4 sm:px-6 lg:px-8" style={{ backgroundColor: '#EBEBDF' }}>
                    <div className="max-w-3xl mx-auto">
                        <h2 className="text-3xl font-bold text-slate-900 text-center mb-4">
                            Frequently Asked Questions
                        </h2>
                        <p className="text-slate-600 text-center mb-10">
                            Common questions about YouTube QR codes.
                        </p>

                        <div className="space-y-4">
                            <FaqItem
                                question="Can I link to my Live Stream?"
                                answer="Yes! Paste your channel's live link (e.g., youtube.com/c/YourChannel/live) and it will always go to your current live stream."
                            />
                            <FaqItem
                                question="Does the video auto-play?"
                                answer="Most smartphones will open the YouTube app and auto-play the video, but it depends on the user's specific settings."
                            />
                            <FaqItem
                                question="Can I change the video later?"
                                answer="Only if you use our Dynamic QR Code service. This static code will always point to the original link you entered."
                            />
                            <FaqItem
                                question="Is it safe?"
                                answer="Yes. The QR code simply contains your video link. No personal data is stored or tracked by this free tool."
                            />
                            <FaqItem
                                question="Does it work for YouTube Shorts?"
                                answer="Yes, just paste the 'Share' link from any YouTube Short."
                            />
                        </div>
                    </div>
                </section>

            </div>
        </>
    );
}

function FaqItem({ question, answer }: { question: string; answer: string }) {
    return (
        <details className="group bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden">
            <summary className="flex items-center justify-between p-5 cursor-pointer list-none text-slate-900 font-semibold hover:bg-slate-50 transition-colors">
                {question}
                <span className="transition group-open:rotate-180 text-slate-400">
                    <svg fill="none" height="20" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" viewBox="0 0 24 24" width="20">
                        <path d="M6 9l6 6 6-6" />
                    </svg>
                </span>
            </summary>
            <div className="text-slate-600 px-5 pb-5 pt-0 leading-relaxed text-sm">
                {answer}
            </div>
        </details>
    );
}