import React from 'react';
import type { Metadata } from 'next';
import TwitterGenerator from './TwitterGenerator';
import { Twitter, Shield, Zap, Smartphone, MessageCircle, UserPlus, 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 Twitter (X) QR Code Generator | Follow & Connect | QR Master',
    },
    description: 'Create a QR code for your X (Twitter) profile. Twitter QR Code erstellen. Scanners follow you instantly. Free & Customizable.',
    keywords: ['twitter qr code', 'x qr generator', 'twitter follow qr', 'social media qr code', 'x profile qr', 'twitter qr code erstellen', 'x qr code erstellen', 'twitter profil qr code', 'x profil qr code'],
    alternates: {
        canonical: 'https://www.qrmaster.net/tools/twitter-qr-code',
    },
    openGraph: {
        title: 'Free Twitter (X) QR Code Generator | QR Master',
        description: 'Generate QR codes to grow your X (Twitter) following. Instant app redirect.',
        type: 'website',
        url: 'https://www.qrmaster.net/tools/twitter-qr-code',
        images: [{ url: '/og-twitter-generator.png', width: 1200, height: 630 }],
    },
    twitter: {
        card: 'summary_large_image',
        title: 'Free Twitter (X) QR Code Generator',
        description: 'Create QR codes for X. Boost your following.',
    },
    robots: {
        index: true,
        follow: true,
    },
};

// JSON-LD Structured Data
const jsonLd = {
    '@context': 'https://schema.org',
    '@graph': [
        generateSoftwareAppSchema(
            'Twitter (X) QR Code Generator',
            'Generate QR codes that direct users to an X (Twitter) profile or tweet.',
            '/og-twitter-generator.png'
        ),
        {
            '@type': 'HowTo',
            name: 'How to Create a Twitter QR Code',
            description: 'Create a QR code that opens an X profile.',
            step: [
                {
                    '@type': 'HowToStep',
                    position: 1,
                    name: 'Enter Username',
                    text: 'Enter your X handle (e.g. @elonmusk).',
                },
                {
                    '@type': 'HowToStep',
                    position: 2,
                    name: 'Design',
                    text: 'Choose a black frame or custom color.',
                },
                {
                    '@type': 'HowToStep',
                    position: 3,
                    name: 'Download',
                    text: 'Save the QR code.',
                },
                {
                    '@type': 'HowToStep',
                    position: 4,
                    name: 'Test',
                    text: 'Scan to verify it goes to the correct profile.',
                },
                {
                    '@type': 'HowToStep',
                    position: 5,
                    name: 'Share',
                    text: 'Add to your business cards or conference badges.',
                },
            ],
            totalTime: 'PT30S',
        },
        generateFaqSchema({
            'Does it work for both Twitter and X?': {
                question: 'Does it work for both Twitter and X?',
                answer: 'Yes, they are the same platform. The QR code links to x.com, which is the current standard, but works for twitter.com links too.',
            },
            'Can I link to a specific tweet?': {
                question: 'Can I link to a specific tweet?',
                answer: 'Yes! Just paste the full URL of the tweet into the input field instead of your username.',
            },
            'Is it free?': {
                question: 'Is it free?',
                answer: 'Yes, generating this QR code is completely free and requires no signup.',
            },
            'Can I track scans?': {
                question: 'Can I track scans?',
                answer: 'This is a static QR code, so tracking is not included. Use our Dynamic QR Code generator for analytics.',
            },
            'What if I change my handle?': {
                question: 'What if I change my handle?',
                answer: 'If you change your handle, the link in the QR code will break. You will need to generate a new QR code.',
            },
        }),
    ],
};

export default function TwitterQRCodePage() {
    return (
        <>
            <script
                type="application/ld+json"
                dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
            />
            <ToolBreadcrumb toolName="Twitter QR Code Generator" toolSlug="twitter-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-slate-950">
                    <div className="absolute inset-0 opacity-20">
                        {/* X Pattern */}
                        <svg className="w-full h-full" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
                            <defs>
                                <pattern id="x_pattern" width="60" height="60" patternUnits="userSpaceOnUse">
                                    <path d="M20 20L40 40M40 20L20 40" stroke="white" strokeWidth="1" />
                                </pattern>
                            </defs>
                            <rect width="100%" height="100%" fill="url(#x_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-blue-500 opacity-75"></span>
                                    <span className="relative inline-flex rounded-full h-2 w-2 bg-blue-500"></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">
                                Connect on X with <br className="hidden lg:block" />
                                <span className="text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-white">Twitter QR Codes</span>
                            </h1>

                            <p className="text-lg md:text-xl text-slate-400 max-w-2xl mx-auto lg:mx-0 mb-8 leading-relaxed">
                                Share your X profile instantly. A quick scan takes users directly to your timeline to follow and interact.
                                <strong className="text-white block sm:inline mt-2 sm:mt-0"> Grow your community.</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/5 px-4 py-2.5 rounded-xl border border-white/10 backdrop-blur-sm">
                                    <UserPlus className="w-4 h-4 text-white" />
                                    Get Followers
                                </div>
                                <div className="flex items-center gap-2 bg-white/5 px-4 py-2.5 rounded-xl border border-white/10 backdrop-blur-sm">
                                    <MessageCircle className="w-4 h-4 text-white" />
                                    Start Conversions
                                </div>
                                <div className="flex items-center gap-2 bg-white/5 px-4 py-2.5 rounded-xl border border-white/10 backdrop-blur-sm">
                                    <Zap className="w-4 h-4 text-white" />
                                    Instant Connect
                                </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-blue-500/10 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-2 hover:-rotate-1 transition-all duration-700 group">
                                <div className="absolute inset-0 bg-gradient-to-br from-white/5 to-transparent rounded-3xl" />

                                <div className="w-full bg-black rounded-xl shadow-lg p-5 mb-6 relative overflow-hidden flex items-center gap-4">
                                    <div className="w-12 h-12 bg-white rounded-full flex items-center justify-center">
                                        <Twitter className="w-6 h-6 text-black" fill="black" />
                                    </div>
                                    <div className="text-white">
                                        <div className="font-bold text-sm">QR Master</div>
                                        <div className="text-xs text-slate-400">@qrmaster</div>
                                    </div>
                                    <button className="ml-auto bg-white text-black px-4 py-1.5 rounded-full text-xs font-bold hover:bg-slate-200">
                                        Follow
                                    </button>
                                </div>

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

                                {/* Floating Badge */}
                                <div className="absolute -bottom-6 -right-6 bg-black border border-white/10 py-3 px-5 rounded-xl shadow-xl flex items-center gap-3 transform transition-transform hover:scale-105 duration-300">
                                    <div className="bg-white/10 p-2 rounded-full">
                                        <Twitter className="w-5 h-5 text-white" fill="white" />
                                    </div>
                                    <div className="text-left">
                                        <div className="text-[10px] text-slate-400 font-bold uppercase tracking-wider">Twitter / X</div>
                                        <div className="text-sm font-bold text-white">Profile Link</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>

                {/* GENERATOR SECTION */}
                <section className="py-12 px-4 sm:px-6 lg:px-8 -mt-8">
                    <TwitterGenerator />
                </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 X (Twitter) 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-black flex items-center justify-center mx-auto mb-4">
                                    <Twitter className="w-7 h-7 text-white" />
                                </div>
                                <h3 className="font-bold text-slate-900 mb-2">1. Input Handle</h3>
                                <p className="text-slate-600 text-sm">
                                    Simply type your @handle or paste your profile link.
                                </p>
                            </article>

                            <article className="text-center">
                                <div className="w-14 h-14 rounded-2xl bg-black flex items-center justify-center mx-auto mb-4">
                                    <Smartphone className="w-7 h-7 text-white" />
                                </div>
                                <h3 className="font-bold text-slate-900 mb-2">2. Snap</h3>
                                <p className="text-slate-600 text-sm">
                                    Put the code on your networking gear. People scan it in seconds.
                                </p>
                            </article>

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

                            <article className="text-center">
                                <div className="w-12 h-12 rounded-2xl bg-black flex items-center justify-center mx-auto mb-4">
                                    <UserPlus className="w-6 h-6 text-white" />
                                </div>
                                <h3 className="font-bold text-slate-900 mb-2">4. Scan</h3>
                                <p className="text-slate-600 text-xs leading-relaxed">
                                    People scan to find you.
                                </p>
                            </article>

                            <article className="text-center">
                                <div className="w-12 h-12 rounded-2xl bg-black flex items-center justify-center mx-auto mb-4">
                                    <Share2 className="w-6 h-6 text-white" />
                                </div>
                                <h3 className="font-bold text-slate-900 mb-2">5. Connect</h3>
                                <p className="text-slate-600 text-xs leading-relaxed">
                                    They are instantly on your profile.
                                </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 Twitter QR codes.
                        </p>

                        <div className="space-y-4">
                            <FaqItem
                                question="Why create a QR code for X?"
                                answer="It's much faster than telling someone your handle and hoping they spell it right. A scan is instant and error-proof."
                            />
                            <FaqItem
                                question="Will links to twitter.com still work?"
                                answer="Yes, twitter.com links redirect to x.com, so both work perfectly fine."
                            />
                            <FaqItem
                                question="Can I change the destination later?"
                                answer="No, this is a static QR code. If you change your handle, you will need a new QR code. Our Dynamic QR codes allow you to edit the link anytime."
                            />
                            <FaqItem
                                question="Can I track scans?"
                                answer="This is a static QR code, so tracking is not included. Use our Dynamic QR Code generator for analytics."
                            />
                            <FaqItem
                                question="What if I change my handle?"
                                answer="If you change your handle, the link in the QR code will break. You will need to generate a new QR code."
                            />
                        </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>
    );
}
