import React from 'react';
import type { Metadata } from 'next';
import SeoJsonLd from '@/components/SeoJsonLd';
import { organizationSchema, websiteSchema } from '@/lib/schema';
import {
  generateFaqSchema,
  generateSoftwareAppSchema,
} from '@/lib/schema-utils';
import { FreeToolsGrid } from '@/components/marketing/FreeToolsGrid';
import de from '@/i18n/de.json';
import { FAQ } from '@/components/marketing/FAQ';
import { ScrollToTop } from '@/components/ui/ScrollToTop';
import {
  Barcode as BarcodeIcon,
  Check,
  Shield,
  Zap,
  Printer,
  Download,
} from 'lucide-react';

export const metadata: Metadata = {
  title: {
    absolute: 'Barcode Generator Kostenlos – EAN, UPC, Code 128 Online',
  },
  description:
    'Erstellen Sie Barcodes kostenlos online: EAN-13, UPC-A und Code 128. Sofort druckfertig. Für Einzelhandel, Lager und Logistik. Keine Anmeldung erforderlich.',
  keywords: [
    'barcode generator',
    'barcode generator kostenlos',
    'ean-13 generator',
    'upc-a generator',
    'code 128 generator',
    'barcode erstellen',
    'barcode online erstellen',
    'strichcode generator',
    'barcode für amazon erstellen',
    'ean barcode generator',
    'produktbarcode erstellen',
    'lagerverwaltung barcode',
    'barcode drucken',
  ],
  alternates: {
    canonical: 'https://www.qrmaster.net/tools/barcode-generator',
    languages: {
      'x-default': 'https://www.qrmaster.net/tools/barcode-generator',
      en: 'https://www.qrmaster.net/tools/barcode-generator',
      de: 'https://www.qrmaster.net/tools/barcode-generator',
    },
  },
  openGraph: {
    title: 'Barcode Generator – Kostenlos EAN, UPC & Code 128 erstellen',
    description:
      'Barcode Generator: Erstellen Sie professionelle Barcodes für Einzelhandel, Lager und Logistik. Kostenlos, ohne Anmeldung. Sofort druckfertig.',
    url: 'https://www.qrmaster.net/tools/barcode-generator',
    locale: 'de_DE',
    type: 'website',
    images: [
      {
        url: 'https://www.qrmaster.net/barcode-generator-preview.png',
        width: 1200,
        height: 630,
      },
    ],
  },
  twitter: {
    card: 'summary_large_image',
    title: 'Barcode Generator – Kostenlos Online erstellen',
    description:
      'EAN-13, UPC-A und Code 128 Barcodes kostenlos erstellen. Sofort druckfertig.',
  },
  robots: {
    index: true,
    follow: true,
  },
};

const faqQuestions = {
  'Was ist ein Barcode Generator?': {
    question: 'Was ist ein Barcode Generator?',
    answer:
      'Ein Barcode Generator ist ein Online-Tool, das Zahlen oder Texte in scannbare Barcode-Bilder umwandelt. Diese können für Produkte, Etiketten und Inventarsysteme verwendet werden.',
  },
  'Ist der Barcode Generator kostenlos?': {
    question: 'Ist der Barcode Generator kostenlos?',
    answer:
      'Ja, unser Barcode Generator ist vollständig kostenlos nutzbar. Sie können Barcodes ohne Anmeldung generieren, herunterladen und drucken.',
  },
  'Welches Barcode-Format brauche ich?': {
    question: 'Welches Barcode-Format brauche ich?',
    answer:
      'EAN-13 ist der Standard für Einzelhandel in Europa und weltweit. UPC-A wird hauptsächlich in den USA und Kanada verwendet. Code 128 eignet sich am besten für Logistik und interne Verfolgung, da er Buchstaben und Zahlen unterstützt.',
  },
  'Kann ich Barcodes als Vektorgrafik (SVG) herunterladen?': {
    question: 'Kann ich Barcodes als Vektorgrafik (SVG) herunterladen?',
    answer:
      'Ja! SVG-Dateien sind vektorbasiert und können ohne Qualitätsverlust auf jede Größe skaliert werden. Perfekt für professionelle Produktverpackungen und Etiketten.',
  },
  'Wie erstelle ich einen Barcode online?': {
    question: 'Wie erstelle ich einen Barcode online?',
    answer:
      'Geben Sie Ihre Produktnummer oder Ihren Text ein, wählen Sie das gewünschte Barcode-Format (z.B. EAN-13 oder Code 128) und der Barcode wird sofort erstellt. Dann können Sie ihn als PNG oder SVG herunterladen.',
  },
  'Sind die erstellten Barcodes scannbar?': {
    question: 'Sind die erstellten Barcodes scannbar?',
    answer:
      'Ja, wir generieren standardkonforme Barcodes, die von jedem handelsüblichen Barcode-Scanner gelesen werden können, einschließlich Smartphone-Kamera-Apps.',
  },
  'Kann ich diese Barcodes für Amazon verwenden?': {
    question: 'Kann ich diese Barcodes für Amazon verwenden?',
    answer:
      'Sie können hier das Barcode-Bild erstellen, wenn Sie bereits eine gültige EAN/UPC-Nummer haben. Offizielle GS1-Registrierungsnummern erhalten Sie jedoch nur direkt bei GS1, um Produkte auf Amazon oder in großen Einzelhandelssystemen zu listen.',
  },
  'Was ist der Unterschied zwischen Barcode und QR-Code?': {
    question: 'Was ist der Unterschied zwischen Barcode und QR-Code?',
    answer:
      'Ein Barcode speichert Daten horizontal (1D) und wird hauptsächlich für Produktkennungen verwendet. Ein QR-Code speichert Daten in 2D (Matrix) und kann viel mehr Informationen enthalten, wie URLs, Kontaktdaten oder WLAN-Zugangsdaten.',
  },
  'Kann ich mehrere Barcodes gleichzeitig erstellen?': {
    question: 'Kann ich mehrere Barcodes gleichzeitig erstellen?',
    answer:
      'Ja, mit einem PRO-Account können Sie mehrere Barcodes gleichzeitig generieren. Dies ist ideal für große Produktmengen oder Lagerverwaltung.',
  },
  'Was ist eine Prüfziffer bei Barcodes?': {
    question: 'Was ist eine Prüfziffer bei Barcodes?',
    answer:
      'Die Prüfziffer ist die letzte Ziffer in einem Barcode, die mathematisch aus den anderen Ziffern berechnet wird. Sie stellt sicher, dass der Barcode korrekt gescannt wird, selbst wenn er leicht beschädigt oder verkratzt ist.',
  },
};

const jsonLd = {
  '@context': 'https://schema.org',
  '@graph': [
    generateSoftwareAppSchema(
      'Barcode Generator',
      'Erstellen Sie druckfertige Barcodes für EAN, UPC, Code 128 und weitere Formate. Kostenlos und ohne Anmeldung.',
      '/barcode-generator-preview.png',
      'UtilitiesApplication'
    ),
    generateFaqSchema(faqQuestions),
  ],
};

export default function BarcodeGeneratorDEPage() {
  const t = de;

  return (
    <>
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
      />

      {/* SEO Content für Suchmaschinen */}
      <div className="sr-only" aria-hidden="false">
        <p>
          QR Masters kostenloser Barcode Generator ermöglicht es Ihnen,
          professionelle Barcodes für Produkte, Etiketten und Inventarsysteme zu
          erstellen. Unterstützt EAN-13 für europäischen Einzelhandel, UPC-A für
          US-Markt und Code 128 für Logistik und interne Verwendung. Alle
          Barcodes sind standardkonform und sofort druckfertig.
        </p>
        <p>
          Unser Barcode Generator funktioniert vollständig im Browser. Keine
          Software-Installation erforderlich. Exportieren Sie Ihre Barcodes als
          PNG für den sofortigen Druck oder als SVG für professionelle
          Verpackungsdesigns. Perfekt für kleine Unternehmen, Online-Händler und
          Lagerverwaltung.
        </p>
      </div>

      {/* Hero Section */}
      <section className="relative bg-gradient-to-b from-slate-900 to-slate-800 text-white py-16 md:py-24">
        <div className="absolute inset-0 opacity-10">
          <svg className="w-full h-full" width="100%" height="100%">
            <defs>
              <pattern
                id="barcode_pattern_de"
                width="60"
                height="60"
                patternUnits="userSpaceOnUse"
              >
                <path
                  d="M5 0 V 60 M15 0 V 60 M20 0 V 60 M35 0 V 60 M40 0 V 60 M55 0 V 60"
                  stroke="white"
                  strokeWidth="2"
                  strokeOpacity="0.5"
                />
              </pattern>
            </defs>
            <rect width="100%" height="100%" fill="url(#barcode_pattern_de)" />
          </svg>
        </div>

        <div className="container mx-auto px-4 sm:px-6 lg:px-8 max-w-7xl relative z-10">
          <div className="max-w-3xl mx-auto text-center">
            <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">
              <span className="flex h-2 w-2 relative">
                <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-blue-400 opacity-75"></span>
                <span className="relative inline-flex rounded-full h-2 w-2 bg-blue-400"></span>
              </span>
              Kostenloses Tool – Professionell & Schnell
            </div>

            <h1 className="text-4xl md:text-5xl lg:text-6xl font-extrabold tracking-tight mb-6">
              Kostenloser{' '}
              <span className="text-blue-400">Barcode Generator</span>
            </h1>

            <p className="text-lg md:text-xl text-slate-300 mb-8 leading-relaxed">
              Erstellen Sie professionelle Barcodes in Sekunden. Für{' '}
              <strong className="text-white">
                Einzelhandel, Lager und Logistik
              </strong>
              . Unterstützt EAN-13, UPC-A und Code 128. Keine Anmeldung
              erforderlich.
            </p>

            <div className="flex flex-wrap justify-center gap-4 text-sm font-medium">
              <div className="flex items-center gap-2 bg-white/5 px-4 py-2.5 rounded-xl border border-white/10">
                <Check className="w-4 h-4 text-blue-400" />
                Einzelhandel-fähig
              </div>
              <div className="flex items-center gap-2 bg-white/5 px-4 py-2.5 rounded-xl border border-white/10">
                <Check className="w-4 h-4 text-blue-400" />
                SVG-Export
              </div>
              <div className="flex items-center gap-2 bg-white/5 px-4 py-2.5 rounded-xl border border-white/10">
                <Check className="w-4 h-4 text-blue-400" />
                Ohne Anmeldung
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Generator Section */}
      <section className="py-12 px-4 bg-slate-100">
        <div className="container mx-auto max-w-7xl">
          <div className="text-center mb-6">
            <h2 className="text-2xl font-bold mb-2">Barcode jetzt erstellen</h2>
            <p className="text-muted-foreground">
              Geben Sie Ihre Daten ein und laden Sie den Barcode herunter
            </p>
          </div>
          <div className="bg-white rounded-3xl shadow-xl overflow-hidden border border-slate-200">
            <div className="bg-slate-900 px-6 py-3 flex items-center gap-2">
              <div className="flex gap-1.5">
                <div className="w-3 h-3 rounded-full bg-red-500"></div>
                <div className="w-3 h-3 rounded-full bg-yellow-500"></div>
                <div className="w-3 h-3 rounded-full bg-green-500"></div>
              </div>
              <span className="text-white/60 text-sm ml-2">
                qrmaster.net/tools/barcode-generator
              </span>
            </div>
            <iframe
              src="https://www.qrmaster.net/tools/barcode-generator"
              className="w-full h-[650px] border-0"
              title="Barcode Generator"
            />
          </div>
          <div className="text-center mt-6">
            <a
              href="https://www.qrmaster.net/tools/barcode-generator"
              target="_blank"
              rel="noopener noreferrer"
              className="inline-flex items-center gap-2 text-sm text-muted-foreground hover:text-slate-900 transition-colors"
            >
              <span>Vollbild öffnen</span>
              <svg
                className="w-4 h-4"
                fill="none"
                stroke="currentColor"
                viewBox="0 0 24 24"
              >
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  strokeWidth={2}
                  d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
                />
              </svg>
            </a>
          </div>
        </div>
      </section>

      {/* Barcode Types Info */}
      <section className="py-16 px-4 bg-white">
        <div className="container mx-auto max-w-7xl">
          <h2 className="text-3xl font-bold text-center mb-12">
            Barcode-Formate im Überblick
          </h2>
          <div className="grid md:grid-cols-3 gap-8">
            <div className="p-6 border rounded-xl">
              <div className="w-12 h-12 bg-blue-100 rounded-xl flex items-center justify-center mb-4">
                <BarcodeIcon className="w-6 h-6 text-blue-600" />
              </div>
              <h3 className="font-bold text-lg mb-2">EAN-13</h3>
              <p className="text-sm text-muted-foreground mb-3">
                Internationaler Standard für Einzelhandel. 13 Ziffern, weltweit
                anerkannt.
              </p>
              <div className="text-xs text-muted-foreground">
                <strong>Einsatz:</strong> Produkte in Europa & global
              </div>
            </div>
            <div className="p-6 border rounded-xl">
              <div className="w-12 h-12 bg-green-100 rounded-xl flex items-center justify-center mb-4">
                <BarcodeIcon className="w-6 h-6 text-green-600" />
              </div>
              <h3 className="font-bold text-lg mb-2">UPC-A</h3>
              <p className="text-sm text-muted-foreground mb-3">
                Amerikanischer Standard. 12 Ziffern, hauptsächlich in
                Nordamerika.
              </p>
              <div className="text-xs text-muted-foreground">
                <strong>Einsatz:</strong> USA & Kanada Einzelhandel
              </div>
            </div>
            <div className="p-6 border rounded-xl">
              <div className="w-12 h-12 bg-purple-100 rounded-xl flex items-center justify-center mb-4">
                <BarcodeIcon className="w-6 h-6 text-purple-600" />
              </div>
              <h3 className="font-bold text-lg mb-2">Code 128</h3>
              <p className="text-sm text-muted-foreground mb-3">
                Flexible Lösung für Logistik. Alphanumerisch, hohe Datendichte.
              </p>
              <div className="text-xs text-muted-foreground">
                <strong>Einsatz:</strong> Versand, Lager, Inventar
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* How It Works */}
      <section className="py-16 px-4 bg-slate-50">
        <div className="container mx-auto max-w-7xl">
          <h2 className="text-3xl font-bold text-center mb-12">
            So funktioniert unser Barcode Generator
          </h2>
          <div className="grid md:grid-cols-5 gap-8">
            <div className="text-center">
              <div className="w-12 h-12 bg-slate-900 text-white rounded-full flex items-center justify-center mx-auto mb-4 font-bold">
                1
              </div>
              <h3 className="font-bold mb-2">Daten eingeben</h3>
              <p className="text-sm text-muted-foreground">
                Geben Sie Ihre Produktnummer oder Text ein.
              </p>
            </div>
            <div className="text-center">
              <div className="w-12 h-12 bg-slate-900 text-white rounded-full flex items-center justify-center mx-auto mb-4 font-bold">
                2
              </div>
              <h3 className="font-bold mb-2">Format wählen</h3>
              <p className="text-sm text-muted-foreground">
                EAN-13, UPC-A oder Code 128 auswählen.
              </p>
            </div>
            <div className="text-center">
              <div className="w-12 h-12 bg-slate-900 text-white rounded-full flex items-center justify-center mx-auto mb-4 font-bold">
                3
              </div>
              <h3 className="font-bold mb-2">Vorschau</h3>
              <p className="text-sm text-muted-foreground">
                Barcode wird in Echtzeit aktualisiert.
              </p>
            </div>
            <div className="text-center">
              <div className="w-12 h-12 bg-slate-900 text-white rounded-full flex items-center justify-center mx-auto mb-4 font-bold">
                4
              </div>
              <h3 className="font-bold mb-2">Herunterladen</h3>
              <p className="text-sm text-muted-foreground">
                Als PNG oder SVG speichern.
              </p>
            </div>
            <div className="text-center">
              <div className="w-12 h-12 bg-slate-900 text-white rounded-full flex items-center justify-center mx-auto mb-4 font-bold">
                5
              </div>
              <h3 className="font-bold mb-2">Drucken</h3>
              <p className="text-sm text-muted-foreground">
                Sofort auf Etiketten drucken.
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* Use Cases */}
      <section className="py-16 px-4 bg-white">
        <div className="container mx-auto max-w-7xl">
          <h2 className="text-3xl font-bold text-center mb-4">
            Für wen ist unser Barcode Generator geeignet?
          </h2>
          <p className="text-center text-muted-foreground mb-12 max-w-2xl mx-auto">
            Ob Kleinunternehmer, Online-Händler oder Lagerverwaltung – unser
            Tool unterstützt Sie bei allen Barcode-Bedarfen.
          </p>

          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
            <div className="p-6 bg-slate-50 rounded-xl">
              <Printer className="w-8 h-8 text-blue-600 mb-3" />
              <h3 className="font-bold mb-2">Einzelhandel</h3>
              <p className="text-sm text-muted-foreground">
                EAN-13 Barcodes für Produktetiketten im stationären Handel.
              </p>
            </div>
            <div className="p-6 bg-slate-50 rounded-xl">
              <Shield className="w-8 h-8 text-green-600 mb-3" />
              <h3 className="font-bold mb-2">E-Commerce</h3>
              <p className="text-sm text-muted-foreground">
                UPC/EAN für Amazon, eBay und andere Marktplätze.
              </p>
            </div>
            <div className="p-6 bg-slate-50 rounded-xl">
              <Zap className="w-8 h-8 text-orange-600 mb-3" />
              <h3 className="font-bold mb-2">Lager & Logistik</h3>
              <p className="text-sm text-muted-foreground">
                Code 128 für interne Bestandsverfolgung und Versand.
              </p>
            </div>
            <div className="p-6 bg-slate-50 rounded-xl">
              <Download className="w-8 h-8 text-purple-600 mb-3" />
              <h3 className="font-bold mb-2">Druckerei</h3>
              <p className="text-sm text-muted-foreground">
                SVG-Export für professionelle Verpackungsdesigns.
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* FAQ Section */}
      <FAQ
        t={{
          faq: { title: 'Häufig gestellte Fragen', questions: faqQuestions },
        }}
      />

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

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