import React from 'react';
import type { Metadata } from 'next';
import TextGenerator from './TextGenerator';
import { Type, Shield, Zap, Smartphone, FileText, QrCode, Download, Share2 } from 'lucide-react';
import { QRCodeSVG } from 'qrcode.react';
import { ToolBreadcrumb } from '@/components/seo/BreadcrumbSchema';
import { RelatedTools } from '@/components/marketing/RelatedTools';
import sanitizeHtml from 'sanitize-html';
import { generateSoftwareAppSchema } from '@/lib/schema-utils';

// SEO Optimized Metadata
export const metadata: Metadata = {
    title: {
        absolute: 'Free Text QR Code Generator | Text zu QR Code | QR Master',
    },
    description: 'Create a QR code for any plain text message. Erstelle einen Text QR Code kostenlos. Works offline & 100% private. Nachricht als QR Code teilen.',
    keywords: ['text qr code', 'qr code text generator', 'message to qr code', 'offline qr code', 'text qr generator', 'free qr code', 'text zu qr code', 'qr code text erstellen', 'nachricht in qr code', 'textnachricht qr code', 'geheimnachricht qr code'],
    alternates: {
        canonical: 'https://www.qrmaster.net/tools/text-qr-code',
    },
    openGraph: {
        title: 'Free Text QR Code Generator | QR Master',
        description: 'Turn any text into a QR code instantly. No signup required. 100% text privacy.',
        type: 'website',
        url: 'https://www.qrmaster.net/tools/text-qr-code',
        images: [{ url: '/og-text-generator.png', width: 1200, height: 630 }],
    },
    twitter: {
        card: 'summary_large_image',
        title: 'Free Text QR Code Generator',
        description: 'Create QR codes for text. Instant, free, and private.',
    },
    robots: {
        index: true,
        follow: true,
    },
};

// Single source of truth for FAQs: rendered on the page AND emitted as
// FAQPage schema. Google requires every marked-up Q&A to be visible to the
// user on the source page, so never add one without the other.
const faqItems = [
    {
        question: 'Is there a character limit?',
        answer: 'Yes, we recommend keeping it under 300 characters for optimal scanning. While QR codes can hold more, more text makes the code denser and harder to scan.',
    },
    {
        question: 'Do I need internet to scan a Text QR code?',
        answer: 'No. Text QR codes work completely offline. The text content is embedded directly into the QR code pattern.',
    },
    {
        question: 'Is my text private?',
        answer: 'Yes. This generator runs 100% in your browser. We do not store or see the text you type.',
    },
    {
        question: 'How do I scan a text QR code?',
        answer: 'Open your phone camera or a QR scanner app and point it at the code. The text will appear on your screen automatically.',
    },
    {
        question: 'Can I edit the text later?',
        answer: 'No, this is a static QR code. The text is permanent. If you need to change it, you must create a new QR code.',
    },
    {
        question: 'Can I change the text after printing?',
        answer: 'No. Static QR codes are permanent. If you need to change the text later, you must generate a new QR code. For editable content, you would need a Dynamic QR Code (which we also offer).',
    },
];

// JSON-LD Structured Data
const jsonLd = {
    '@context': 'https://schema.org',
    '@graph': [
        generateSoftwareAppSchema(
            'Text QR Code Generator',
            'Generate QR codes for plain text messages. Works offline once generated. No data collection.',
            '/og-text-generator.png'
        ),
        {
            '@type': 'HowTo',
            name: 'How to Create a Text QR Code',
            description: 'Turn any plain text into a scannable QR code.',
            step: [
                {
                    '@type': 'HowToStep',
                    position: 1,
                    name: 'Enter Content',
                    text: 'Type or paste your text message into the input field.',
                },
                {
                    '@type': 'HowToStep',
                    position: 2,
                    name: 'Customize Design',
                    text: 'Choose a color and add a frame label like "Scan Me" or "Read".',
                },
                {
                    '@type': 'HowToStep',
                    position: 3,
                    name: 'Download QR Code',
                    text: 'Download your high-quality QR code in PNG or SVG format.',
                },
                {
                    '@type': 'HowToStep',
                    position: 4,
                    name: 'Test',
                    text: 'Scan the code to ensure the text appears correctly.',
                },
                {
                    '@type': 'HowToStep',
                    position: 5,
                    name: 'Share',
                    text: 'Print it or display it where you want people to read the message.',
                },
            ],
            totalTime: 'PT30S',
        },
        {
            '@type': 'FAQPage',
            '@id': 'https://www.qrmaster.net/tools/text-qr-code#faq',
            mainEntity: faqItems.map((item) => ({
                '@type': 'Question',
                name: item.question,
                acceptedAnswer: {
                    '@type': 'Answer',
                    text: item.answer.replace(/<[^>]+>/g, ''),
                },
            })),
        },
    ],
};

export default function TextQRCodePage() {
    return (
        <>
            <script
                type="application/ld+json"
                dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
            />
            <ToolBreadcrumb toolName="Text QR Code Generator" toolSlug="text-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" style={{ backgroundColor: '#1A1265' }}>
                    <div className="absolute inset-0 opacity-10">
                        <svg className="w-full h-full" viewBox="0 0 100 100" preserveAspectRatio="none">
                            <path d="M0 100 C 20 0 50 0 100 100 Z" fill="url(#grad1)" />
                            <defs>
                                <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
                                    <stop offset="0%" style={{ stopColor: 'white', stopOpacity: 1 }} />
                                    <stop offset="100%" style={{ stopColor: 'white', stopOpacity: 0 }} />
                                </linearGradient>
                            </defs>
                        </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-emerald-400 opacity-75"></span>
                                    <span className="relative inline-flex rounded-full h-2 w-2 bg-emerald-400"></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">
                                Turn Text content into <br className="hidden lg:block" />
                                <span className="text-transparent bg-clip-text bg-gradient-to-r from-emerald-400 to-cyan-400">Scannable QR Codes</span>
                            </h1>

                            <p className="text-lg md:text-xl text-indigo-100 max-w-2xl mx-auto lg:mx-0 mb-8 leading-relaxed">
                                Share notes, codes, keys, or messages instantly. Scan to read without internet.
                                <strong className="text-white block sm:inline mt-2 sm:mt-0"> 100% Private.</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/5 backdrop-blur-sm">
                                    <Shield className="w-4 h-4 text-emerald-400" />
                                    No Data Storage
                                </div>
                                <div className="flex items-center gap-2 bg-white/5 px-4 py-2.5 rounded-xl border border-white/5 backdrop-blur-sm">
                                    <Zap className="w-4 h-4 text-amber-400" />
                                    Instant Create
                                </div>
                                <div className="flex items-center gap-2 bg-white/5 px-4 py-2.5 rounded-xl border border-white/5 backdrop-blur-sm">
                                    <Smartphone className="w-4 h-4 text-purple-400" />
                                    Offline Readable
                                </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-indigo-500/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-6 hover:rotate-3 transition-all duration-700 group">
                                <div className="absolute inset-0 bg-gradient-to-br from-white/10 to-transparent rounded-3xl" />

                                <div className="w-48 h-48 bg-white rounded-xl p-2 shadow-inner mb-6 relative overflow-hidden flex items-center justify-center">
                                    <QRCodeSVG value="https://www.qrmaster.net" size={170} fgColor="#0f172a" level="Q" />
                                    <div className="absolute top-1/2 left-0 w-full h-1 bg-emerald-500 shadow-[0_0_20px_rgba(16,185,129,1)] animate-pulse" />
                                </div>

                                <div className="w-full bg-white/10 rounded-xl p-4 backdrop-blur-sm border border-white/10">
                                    <div className="flex items-center gap-3">
                                        <div className="w-8 h-8 rounded-full bg-indigo-500/20 flex items-center justify-center">
                                            <FileText className="w-4 h-4 text-indigo-300" />
                                        </div>
                                        <div className="space-y-1">
                                            <div className="h-1.5 w-20 bg-white/30 rounded-full" />
                                            <div className="h-1.5 w-12 bg-white/20 rounded-full" />
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>

                {/* GENERATOR SECTION */}
                <section className="py-12 px-4 sm:px-6 lg:px-8 -mt-8">
                    <TextGenerator />
                </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 Text 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-[#1A1265]/10 flex items-center justify-center mx-auto mb-4">
                                    <Type className="w-7 h-7 text-[#1A1265]" />
                                </div>
                                <h3 className="font-bold text-slate-900 mb-2">1. Enter Text</h3>
                                <p className="text-slate-600 text-sm">
                                    Type your message, code, or note. It is instantly encoded into the QR pattern.
                                </p>
                            </article>

                            <article className="text-center">
                                <div className="w-12 h-12 rounded-2xl bg-[#1A1265]/10 flex items-center justify-center mx-auto mb-4">
                                    <Zap className="w-6 h-6 text-[#1A1265]" />
                                </div>
                                <h3 className="font-bold text-slate-900 mb-2">2. Customize</h3>
                                <p className="text-slate-600 text-xs leading-relaxed">
                                    Choose a color and add a call-to-action frame.
                                </p>
                            </article>

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

                            <article className="text-center">
                                <div className="w-12 h-12 rounded-2xl bg-[#1A1265]/10 flex items-center justify-center mx-auto mb-4">
                                    <Smartphone className="w-6 h-6 text-[#1A1265]" />
                                </div>
                                <h3 className="font-bold text-slate-900 mb-2">4. Test</h3>
                                <p className="text-slate-600 text-xs leading-relaxed">
                                    Point camera to read text.
                                </p>
                            </article>

                            <article className="text-center">
                                <div className="w-12 h-12 rounded-2xl bg-[#1A1265]/10 flex items-center justify-center mx-auto mb-4">
                                    <Share2 className="w-6 h-6 text-[#1A1265]" />
                                </div>
                                <h3 className="font-bold text-slate-900 mb-2">5. Share</h3>
                                <p className="text-slate-600 text-xs leading-relaxed">
                                    Pass information 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 Text QR codes.
                        </p>

                        <div className="space-y-4">
                            {faqItems.map((item) => (
                                <FaqItem
                                    key={item.question}
                                    question={item.question}
                                    answer={item.answer}
                                />
                            ))}
                        </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 [&_a]:text-indigo-600 [&_a]:underline"
                dangerouslySetInnerHTML={{
                    __html: sanitizeHtml(answer, {
                        allowedTags: ['p', 'strong', 'em', 'ul', 'ol', 'li', 'a', 'br', 'code'],
                        allowedAttributes: { a: ['href'] },
                    }),
                }}
            />
        </details>
    );
}