import React from 'react';
import type { Metadata } from 'next';
import SeoJsonLd from '@/components/SeoJsonLd';
import { organizationSchema, websiteSchema } from '@/lib/schema';
import { generateFaqSchema } from '@/lib/schema-utils';
import { Hero } from '@/components/marketing/Hero';
import { InstantGenerator } from '@/components/marketing/InstantGenerator';
import { StaticVsDynamic } from '@/components/marketing/StaticVsDynamic';
import { Features } from '@/components/marketing/Features';
import { Pricing } from '@/components/marketing/Pricing';
import { FAQ } from '@/components/marketing/FAQ';
import { ScrollToTop } from '@/components/ui/ScrollToTop';
import { FreeToolsGrid } from '@/components/marketing/FreeToolsGrid';
import de from '@/i18n/de.json';
import { AnswerFirstBlock } from '@/components/marketing/AnswerFirstBlock';

function truncateAtWord(text: string, maxLength: number): string {
    if (text.length <= maxLength) return text;
    const truncated = text.slice(0, maxLength);
    const lastSpace = truncated.lastIndexOf(' ');
    return lastSpace > 0 ? truncated.slice(0, lastSpace) : truncated;
}

export async function generateMetadata(): Promise<Metadata> {
    const title = 'QR Code Erstellen – Kostenlos | QR Master';
    const description = 'Erstellen Sie QR Codes kostenlos in Sekunden. Dynamische QR-Codes für Feedback, PDF und mehr. Mit Tracking, Branding und Massen-Erstellung.';

    return {
        title: {
            absolute: title
        },
        description,
        keywords: [
            'qr code erstellen',
            'qr code generator',
            'qr code kostenlos',
            'qr-code-generatoren',
            'qr codes erstellen',
            'qr code erstellen kostenlos',
            'dynamischer qr code',
            'qr code mit logo',
            'feedback qr code',
            'pdf qr code',
            'coupon qr code',
            'app store qr code'
        ],
        alternates: {
            canonical: 'https://www.qrmaster.net/qr-code-erstellen',
            languages: {
                'x-default': 'https://www.qrmaster.net/',
                en: 'https://www.qrmaster.net/',
                de: 'https://www.qrmaster.net/qr-code-erstellen',
            },
        },
        openGraph: {
            title: 'QR Code Erstellen – Kostenlos & Sofort | QR Master',
            description: 'Erstellen Sie QR Codes kostenlos in Sekunden. Mit Tracking, Branding und Massen-Erstellung.',
            url: 'https://www.qrmaster.net/qr-code-erstellen',
            type: 'website',
            locale: 'de_DE',
            images: [
                {
                    url: 'https://www.qrmaster.net/og-image.png',
                    width: 1200,
                    height: 630,
                    alt: 'QR Code Erstellen - Kostenlos & Sofort',
                },
            ],
        },
        twitter: {
            title: 'QR Code Erstellen – Kostenlos | QR Master',
            description: 'QR Codes erstellen in Sekunden. Kostenlos, mit Tracking und individuellem Branding.',
        },
    };
}

export default function QRCodeErstellenPage() {
    // Use German translations
    const t = de;

    return (
        <>
            <SeoJsonLd data={[organizationSchema(), websiteSchema(), generateFaqSchema(t.faq.questions)]} />



            {/* Server-rendered SEO content for crawlers - GERMAN */}
            <div className="sr-only" aria-hidden="false">
                <p>
                    Erstellen Sie professionelle QR Codes für Ihr Unternehmen mit QR Master. Unser dynamischer QR Code Generator
                    ermöglicht es Ihnen, trackbare QR Codes für Feedback, PDF-Dateien, Coupons und App Stores zu erstellen, Ziel-URLs jederzeit zu ändern und detaillierte Statistiken einzusehen.
                    Perfekt für Restaurants, Einzelhandel, Events und Marketing-Kampagnen.
                </p>
                <p>
                    Funktionen: Dynamische QR Codes mit Echtzeit-Tracking, Massen-QR-Code-Erstellung aus Excel/CSV,
                    individuelles Branding mit Farben und Logos, erweiterte Scan-Statistiken mit Gerätetypen und Standorten,
                    vCard QR Codes für digitale Visitenkarten und QR Codes für Restaurant-Speisekarten.
                </p>
                <p>
                    Starten Sie kostenlos mit 3 aktiven dynamischen QR Codes (8 Typen verfügbar) und unbegrenzten statischen Codes. Upgrade auf Pro für 50 Codes
                    mit erweiterten Statistiken, oder Business für 500 Codes mit Massen-Erstellung und Prioritäts-Support.
                </p>
            </div>

            <Hero t={t} />

            {/* Answer First Block (SEO/AEO) - German */}
            <div className="container mx-auto px-4 sm:px-6 lg:px-8 max-w-7xl">
                <AnswerFirstBlock
                    whatIsIt="Ein QR-Code (Quick Response Code) ist ein zweidimensionaler Barcode, der von Smartphones gescannt werden kann, um sofort auf Informationen wie Webseiten, Kontaktdaten oder Speisekarten zuzugreifen. Mit QR Master erstellen Sie dynamische Codes, die Sie nachträglich ändern und statistisch auswerten können."
                    whenToUse={[
                        "Wenn Sie Printmaterialien (Flyer, Plakate) drucken und den Link später ändern möchten",
                        "Wenn Sie wissen wollen, wie oft und wo Ihr Code gescannt wurde",
                        "Wenn Sie professionelles Branding mit eigenem Logo benötigen"
                    ]}
                    comparison={{
                        leftTitle: "Statisch",
                        rightTitle: "Dynamisch",
                        items: [
                            { label: "Inhalt änderbar", value: true, text: "Nein" },
                            { label: "Scan-Statistik", value: true, text: "Nein" },
                            { label: "Druckqualität", value: true, text: "Hoch" }
                        ]
                    }}
                    howTo={{
                        steps: [
                            "Kostenlos bei QR Master anmelden",
                            "Ziel-URL eingeben und QR-Code Design anpassen",
                            "Code herunterladen, testen und drucken. Der Inhalt ist jederzeit änderbar."
                        ]
                    }}
                />
            </div>

            {/* Main Interaction: Generator */}
            <InstantGenerator t={t} />

            {/* Free Tools Grid */}
            <FreeToolsGrid />

            <StaticVsDynamic t={t} />
            <Features t={t} />

            {/* Pricing Section */}
            <Pricing t={t} />

            {/* FAQ Section */}
            <FAQ t={t} />

            {/* Scroll to Top Button */}
            <ScrollToTop />
        </>
    );
}
