import React from 'react';
import type { Metadata } from 'next';
import EmailGenerator from './EmailGenerator';
import { Mail, Zap, Smartphone, Lock, Download, Sparkles } 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 Email QR Code Generator | Email QR Code Erstellen | QR Master',
    },
    description: 'Create an Email QR code to send emails instantly. Email QR Code erstellen mit Betreff und Text. 100% free and secure.',
    keywords: ['email qr code', 'mailto qr', 'email generator', 'free qr code', 'email qr code erstellen', 'email schreiben qr code', 'qr code für email', 'mailto qr code generator', 'email vorlage qr code'],
    alternates: {
        canonical: 'https://www.qrmaster.net/tools/email-qr-code',
    },
    openGraph: {
        title: 'Free Email QR Code Generator | QR Master',
        description: 'Send emails instantly with a custom QR code. Add recipient, subject, and body.',
        type: 'website',
        url: 'https://www.qrmaster.net/tools/email-qr-code',
        images: [{ url: '/og-email-generator.png', width: 1200, height: 630 }],
    },
};

// JSON-LD
const jsonLd = {
    '@context': 'https://schema.org',
    '@graph': [
        generateSoftwareAppSchema(
            'Email QR Code Generator',
            'Generate Email QR codes for mailto links with subject and body.',
            '/og-email-generator.png'
        ),
        {
            '@type': 'HowTo',
            name: 'How to Create an Email QR Code',
            step: [
                { '@type': 'HowToStep', position: 1, name: 'Enter Recipient', text: 'Type the email address you want to receive emails at.' },
                { '@type': 'HowToStep', position: 2, name: 'Add Details', text: 'Optional: Add a pre-filled subject line and body text.' },
                { '@type': 'HowToStep', position: 3, name: 'Customize', text: 'Choose a brand color and add a call-to-action frame.' },
                { '@type': 'HowToStep', position: 4, name: 'Download', text: 'Download your QR code in PNG or SVG.' },
                { '@type': 'HowToStep', position: 5, name: 'Share', text: 'Add to business cards or flyers.' },
            ],
            totalTime: 'PT30S',
        },
        generateFaqSchema({
            'How does it work?': {
                question: 'How does it work?',
                answer: 'When scanned, it opens the user\'s default email app (like Gmail or Outlook) with a new draft composed to your address.',
            },
            'Can I add a subject line?': {
                question: 'Can I add a subject line?',
                answer: 'Yes! You can pre-fill the subject line and the body content so the sender just has to hit send.',
            },
            'Is it free?': {
                question: 'Is it free?',
                answer: 'Yes, 100% free with unlimited scans.',
            },
            'Does it work with attachments?': {
                question: 'Does it work with attachments?',
                answer: 'No. The standard mailto format does not support attaching files automatically. Users will have to attach files manually.',
            },
            'Is it private?': {
                question: 'Is it private?',
                answer: 'Yes. The data is encoded directly into the QR code. We do not store your email or message data.',
            },
        }),
    ]
};

export default function EmailPage() {
    return (
        <>
            <script
                type="application/ld+json"
                dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
            />
            <ToolBreadcrumb toolName="Email QR Code Generator" toolSlug="email-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: '#dc2626' }}>

                    {/* Background Pattern */}
                    <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">

                        {/* Left: Text Content */}
                        <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">
                                The Smartest Way to <br className="hidden lg:block" />
                                <span className="text-transparent bg-clip-text bg-gradient-to-r from-red-200 to-rose-200">Receive Emails</span>
                            </h1>

                            <p className="text-lg md:text-xl text-red-50 max-w-2xl mx-auto lg:mx-0 mb-8 leading-relaxed">
                                Create a QR code that opens a pre-composed email instantly.
                                <strong className="text-white block sm:inline mt-2 sm:mt-0"> Perfect for feedback & inquiries.</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">
                                    <Mail className="w-4 h-4 text-red-300" />
                                    Instant Draft
                                </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-yellow-300" />
                                    Pre-filled Content
                                </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-red-300" />
                                    Mobile Ready
                                </div>
                            </div>
                        </div>

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

                            {/* Floating Glass Card */}
                            <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" />

                                {/* Mock QR */}
                                <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="#b91c1c" level="Q" />
                                    {/* Scan Line */}
                                    <div className="absolute top-1/2 left-0 w-full h-1 bg-red-500 shadow-[0_0_20px_rgba(220,38,38,1)] animate-pulse" />
                                </div>

                                <div className="w-full space-y-3">
                                    <div className="h-2 w-32 bg-white/20 rounded-full mx-auto" />
                                    <div className="h-2 w-20 bg-white/10 rounded-full mx-auto" />
                                </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">
                                        <Mail 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">Status</div>
                                        <div className="text-sm font-bold text-slate-900">Live</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>

                {/* GENERATOR SECTION */}
                <section className="py-12 px-4 sm:px-6 lg:px-8 -mt-8">
                    <EmailGenerator />
                </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 Email QR Codes Work
                        </h2>
                        <div className="grid md:grid-cols-3 lg:grid-cols-5 gap-8">
                            <article className="text-center">
                                <div className="w-12 h-12 rounded-2xl bg-[#1A1265]/10 flex items-center justify-center mx-auto mb-4">
                                    <Mail className="w-6 h-6 text-[#1A1265]" />
                                </div>
                                <h3 className="font-bold text-slate-900 mb-2">1. Add Email</h3>
                                <p className="text-slate-600 text-xs leading-relaxed">Enter the address and subject.</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">
                                    <Sparkles 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">Pick a brand color.</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">3. Style</h3>
                                <p className="text-slate-600 text-xs leading-relaxed">Add a cool 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">4. Download</h3>
                                <p className="text-slate-600 text-xs leading-relaxed">Save your 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">5. Share</h3>
                                <p className="text-slate-600 text-xs leading-relaxed">Print and get emails.</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 Email QR codes.</p>
                        <div className="space-y-4">
                            <FaqItem question="Does it work with Gmail?" answer="Yes, and Outlook, Apple Mail, Yahoo, etc. It opens the default mail app on the user's device." />
                            <FaqItem question="Is it reversible?" answer="Yes, if you made a mistake you would need to generate a new code, as static QR codes cannot be edited after creation." />
                            <FaqItem question="Is this tool free?" answer="Yes, completely free to use." />
                            <FaqItem question="Can I attach files?" answer="No. The mailto standard does not support automatic attachment of files. Users must attach them manually." />
                            <FaqItem question="Is it private?" answer="Yes. The data is encoded directly into the QR code. We do not store your email or message data." />
                        </div>
                    </div>
                </section>

            </div>
        </>
    );
}

// FAQ Item Component
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>
    );
}