import React from 'react';
import type { Metadata } from 'next';
import SMSGenerator from './SMSGenerator';
import { MessageSquare, Shield, Zap, Smartphone, Send } 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 SMS QR Code Generator | SMS QR Code Erstellen | QR Master',
    },
    description: 'Create a QR code to send an SMS text message instantly. SMS QR Code erstellen mit vorgefertigtem Text. Free, private, and works on all phones.',
    keywords: ['sms qr code', 'text message qr code', 'send sms qr', 'sms generator', 'text qr', 'sms qr code erstellen', 'qr code für sms', 'nachricht qr code', 'sms vorlage qr code', 'sms versenden qr'],
    alternates: {
        canonical: 'https://www.qrmaster.net/tools/sms-qr-code',
    },
    openGraph: {
        title: 'Free SMS QR Code Generator | QR Master',
        description: 'Generate QR codes for instant SMS messages. Pre-fill text and number.',
        type: 'website',
        url: 'https://www.qrmaster.net/tools/sms-qr-code',
        images: [{ url: '/og-sms-generator.png', width: 1200, height: 630 }],
    },
    twitter: {
        card: 'summary_large_image',
        title: 'Free SMS QR Code Generator',
        description: 'Create QR codes to send texts. Instant and free.',
    },
    robots: {
        index: true,
        follow: true,
    },
};

// JSON-LD Structured Data
const jsonLd = {
    '@context': 'https://schema.org',
    '@graph': [
        generateSoftwareAppSchema(
            'SMS QR Code Generator',
            'Generate QR codes that open the user\'s SMS app with a pre-filled message.',
            '/og-sms-generator.png'
        ),
        {
            '@type': 'HowTo',
            name: 'How to Create an SMS QR Code',
            description: 'Create a QR code that prepares a text message.',
            step: [
                {
                    '@type': 'HowToStep',
                    position: 1,
                    name: 'Enter Phone Number',
                    text: 'Type the destination phone number.',
                },
                {
                    '@type': 'HowToStep',
                    position: 2,
                    name: 'Enter Message',
                    text: 'Type the message you want pre-filled (e.g., "Send me info!").',
                },
                {
                    '@type': 'HowToStep',
                    position: 3,
                    name: 'Download',
                    text: 'Save the QR code and share it.',
                },
            ],
            totalTime: 'PT30S',
        },
        generateFaqSchema({
            'Does the text send automatically?': {
                question: 'Does the text send automatically?',
                answer: 'No. The QR code opens the messaging app with the text typed out. The user must simply tap "Send". This is a security feature of all smartphones.',
            },
            'Is there a cost?': {
                question: 'Is there a cost?',
                answer: 'Generating the code is free. Standard SMS rates apply for the person sending the text message, depending on their carrier plan.',
            },
            'Can I change the message later?': {
                question: 'Can I change the message later?',
                answer: 'No. Static QR codes have the message embedded in them. To change the message, you need a new QR code.',
            },
            'What uses are there for SMS QR codes?': {
                question: 'What uses are there for SMS QR codes?',
                answer: 'They are great for SMS marketing opt-ins ("Text JOIN to 12345"), customer support requests, or voting via text.',
            },
        }),
    ],
};

export default function SMSQRCodePage() {
    return (
        <>
            <script
                type="application/ld+json"
                dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
            />
            <ToolBreadcrumb toolName="SMS QR Code Generator" toolSlug="sms-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: '#ea580c' }}>
                    <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-amber-400 opacity-75"></span>
                                    <span className="relative inline-flex rounded-full h-2 w-2 bg-amber-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">
                                Make Texting Easy with <br className="hidden lg:block" />
                                <span className="text-transparent bg-clip-text bg-gradient-to-r from-amber-200 to-orange-100">SMS QR Codes</span>
                            </h1>

                            <p className="text-lg md:text-xl text-orange-50 max-w-2xl mx-auto lg:mx-0 mb-8 leading-relaxed">
                                Let users send you a pre-written text with one scan. Ideal for opt-ins and support.
                                <strong className="text-white block sm:inline mt-2 sm:mt-0"> Universal compatibility.</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">
                                    <MessageSquare className="w-4 h-4 text-amber-300" />
                                    Pre-fill Texts
                                </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-300" />
                                    Instant Open
                                </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">
                                    <Shield className="w-4 h-4 text-amber-300" />
                                    Zero Friction
                                </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-orange-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-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-white rounded-xl shadow-lg p-3 mb-6 relative overflow-hidden flex gap-3 items-center">
                                    <div className="w-10 h-10 rounded-full bg-orange-100 flex items-center justify-center shrink-0">
                                        <MessageSquare className="w-5 h-5 text-orange-600" />
                                    </div>
                                    <div className="bg-slate-100 rounded-2xl rounded-tl-none p-3 text-xs text-slate-600 w-full">
                                        Hi, I want to join the club!
                                    </div>
                                </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="#0f172a" 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-orange-100 p-2 rounded-full">
                                        <Send className="w-5 h-5 text-orange-600" />
                                    </div>
                                    <div className="text-left">
                                        <div className="text-[10px] text-slate-400 font-bold uppercase tracking-wider">SMS</div>
                                        <div className="text-sm font-bold text-slate-900">Sent!</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>

                {/* GENERATOR SECTION */}
                <section className="py-12 px-4 sm:px-6 lg:px-8 -mt-8">
                    <SMSGenerator />
                </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 SMS QR Codes Work
                        </h2>

                        <div className="grid md:grid-cols-3 gap-8">
                            <article className="text-center">
                                <div className="w-14 h-14 rounded-2xl bg-orange-50 flex items-center justify-center mx-auto mb-4">
                                    <MessageSquare className="w-7 h-7 text-orange-600" />
                                </div>
                                <h3 className="font-bold text-slate-900 mb-2">1. Compose</h3>
                                <p className="text-slate-600 text-sm">
                                    Enter the number and the message you want your customers to send.
                                </p>
                            </article>

                            <article className="text-center">
                                <div className="w-14 h-14 rounded-2xl bg-orange-50 flex items-center justify-center mx-auto mb-4">
                                    <Smartphone className="w-7 h-7 text-orange-600" />
                                </div>
                                <h3 className="font-bold text-slate-900 mb-2">2. Scan</h3>
                                <p className="text-slate-600 text-sm">
                                    User scans the code. The messages app opens automatically.
                                </p>
                            </article>

                            <article className="text-center">
                                <div className="w-14 h-14 rounded-2xl bg-orange-50 flex items-center justify-center mx-auto mb-4">
                                    <Send className="w-7 h-7 text-orange-600" />
                                </div>
                                <h3 className="font-bold text-slate-900 mb-2">3. Send</h3>
                                <p className="text-slate-600 text-sm">
                                    User hits "Send" to trigger the text. Perfect for quick sign-ups or votes.
                                </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 SMS QR codes.
                        </p>

                        <div className="space-y-4">
                            <FaqItem
                                question="Does the user need an internet connection?"
                                answer="No. The QR code contains all the info offline. However, the user needs a cellular signal to actually send the SMS message."
                            />
                            <FaqItem
                                question="Is it free for the user to send?"
                                answer="It depends on their mobile plan. Standard SMS rates apply, though most modern plans include unlimited texting."
                            />
                            <FaqItem
                                question="Can I use shortcodes?"
                                answer="Yes. You can enter a shortcode (e.g. 55555) in the phone number field instead of a regular number."
                            />
                            <FaqItem
                                question="Is my phone number visible?"
                                answer="Yes. Since the user is sending a text to you, they will see your number (or shortcode) in their messaging app."
                            />
                        </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>
    );
}