import type { Metadata } from "next";
import { notFound } from "next/navigation";
import Link from "next/link";
import Image from "next/image";
import { Header } from "@/components/landing/Header";
import { Footer } from "@/components/landing/Footer";
import { RelatedReading, SeoLink } from "@/components/landing/RelatedReading";
import { siteUrl } from "@/lib/seo/site";
import { publicPath, publicUrl, seoLanguageAlternates } from "@/lib/seo/slugs";

type Locale = "de" | "en";

function isLocale(value: string): value is Locale {
  return value === "de" || value === "en";
}

const ROUTE = "ocr-receipt-scanner" as const;

const copy = {
  de: {
    title: "Beleg OCR: KI liest Kassenbons aus | ScanReceipts",
    description:
      "Beleg-OCR mit deterministischem Math-Check: Unsere KI liest Kassenbons, Rechnungen und Bewirtungsbelege aus, eine TypeScript-Engine rechnet jede Summe nach.",
    keywords: [
      "beleg ocr",
      "ocr kassenbon",
      "kassenbon ocr",
      "rechnung ocr",
      "belege digitalisieren",
    ],
    breadcrumbHome: "Start",
    breadcrumbCurrent: "Beleg-OCR",
  },
  en: {
    title: "OCR Receipt Scanner: AI Reads Receipts | ScanReceipts",
    description:
      "An OCR receipt scanner with a deterministic math-check: AI reads merchant, date, line items and tax rates, then a TypeScript engine re-verifies every total.",
    keywords: [
      "ocr receipt scanner",
      "receipt ocr",
      "ai receipt scanner",
      "smart receipt scanner",
      "receipt data extraction",
      "invoice ocr",
      "iphone receipt scanner",
    ],
    breadcrumbHome: "Home",
    breadcrumbCurrent: "OCR Receipt Scanner",
  },
} as const;

export async function generateMetadata({
  params,
}: {
  params: Promise<{ locale: string }>;
}): Promise<Metadata> {
  const { locale } = await params;
  const lang: Locale = isLocale(locale) ? locale : "en";
  const canonical = publicUrl(lang, ROUTE);
  const c = copy[lang];

  return {
    title: c.title,
    description: c.description,
    keywords: [...c.keywords],
    alternates: {
      canonical,
      languages: seoLanguageAlternates(ROUTE),
    },
    openGraph: {
      type: "website",
      url: canonical,
      siteName: "ScanReceipts",
      title: c.title,
      description: c.description,
      locale: lang === "de" ? "de_DE" : "en_US",
      alternateLocale: lang === "de" ? "en_US" : "de_DE",
      images: [{ url: `${siteUrl}/screenshot-upload-processing.png`, width: 1919, height: 911 }],
    },
    twitter: {
      card: "summary_large_image",
      title: c.title,
      description: c.description,
    },
    robots: {
      index: true,
      follow: true,
      googleBot: { index: true, follow: true, "max-image-preview": "large" },
    },
  };
}

export default async function OcrReceiptScannerPage({
  params,
}: {
  params: Promise<{ locale: string }>;
}) {
  const { locale } = await params;
  const lang: Locale = isLocale(locale) ? locale : "en";
  if (!isLocale(locale)) notFound();
  const isDe = lang === "de";
  const c = copy[lang];
  const canonical = publicUrl(lang, ROUTE);

  const faqs = isDe
    ? [
        {
          q: "Wie genau ist die KI-Erkennung?",
          a: "Ein aktuelles multimodales KI-Modell liest Händler, Datum, Artikel, Mengen und alle Steuersätze vom Foto ab. Direkt danach rechnet eine deterministische TypeScript-Engine jede Summe nach – unklare oder unlesbare Werte werden markiert statt geraten, sodass die Trefferquote auch bei verblassten oder schräg fotografierten Belegen hoch bleibt.",
        },
        {
          q: "Welche Belegarten werden unterstützt?",
          a: "Kassenbons, Rechnungen und Bewirtungsbelege im selben Workflow. Bei Bewirtungsbelegen werden Trinkgeld und Anlass-Feld automatisch mit erfasst, bei Rechnungen auch mehrere Steuersätze und die Rechnungsnummer.",
        },
        {
          q: "Brauche ich ein Konto, um loszulegen?",
          a: "Nein. Die ersten 15 Scans im Monat laufen direkt in einer Gastsitzung auf dem Server – kein Konto, keine Kreditkarte. Ein Konto lohnt sich erst, wenn du geräteübergreifend zugreifen willst.",
        },
        {
          q: "Was passiert, wenn die KI einen Wert falsch liest?",
          a: "Die deterministische Nachrechnung prüft jede Summe unabhängig von der KI: Ergibt Netto plus MwSt exakt den Bruttobetrag? Stimmt die Summe der Einzelposten? Findet die Engine eine Abweichung, wird der Beleg markiert und dir zur kurzen Bestätigung vorgelegt – statt unbemerkt in deinem Export zu landen.",
        },
        {
          q: "Muss ich eine App herunterladen?",
          a: "Nein. ScanReceipts läuft direkt im Browser, auch auf dem iPhone in Safari – kein App-Store-Download nötig. Eine native iPhone-App ist zusätzlich in Arbeit.",
        },
        {
          q: "Welche Dateiformate kann ich hochladen?",
          a: "Fotos als JPEG, PNG oder HEIC (iPhone) und Rechnungen als PDF. Sehr lange Kassenbons fotografierst du besser in zwei scharfen Bildern statt in einem verwackelten Panorama. Abgeschnittene Summen sind die häufigste Ursache für unvollständige Scans.",
        },
        {
          q: "Kann ich die ausgelesenen Daten nach Excel oder CSV exportieren?",
          a: "Ja. Nach der Erkennung und dem Math-Check exportierst du als Dual-Sheet-Excel mit echten =SUM()-Formeln oder als CSV (UTF-8 mit BOM, semikolongetrennt). Details zum Tabellenaufbau stehen im Guide „Kassenbon in Excel umwandeln“.",
        },
      ]
    : [
        {
          q: "How accurate is the OCR?",
          a: "A current multimodal AI model reads merchant, date, items, quantities, and every tax rate straight off the photo. Immediately afterward, a deterministic TypeScript engine re-verifies every total – unclear or unreadable values get flagged instead of guessed, keeping accuracy high even on faded or crooked receipt photos.",
        },
        {
          q: "What kinds of receipts does it handle?",
          a: "Retail receipts, invoices, and business-meal receipts in the same workflow. For business-meal receipts, tip amount and occasion are captured automatically; for invoices, multiple tax rates and the invoice number are extracted too.",
        },
        {
          q: "Do I need an account to get started?",
          a: "No. The first 15 scans a month run right in a guest session on the server – no account, no credit card. An account is only worth creating once you want cross-device access.",
        },
        {
          q: "What happens if the AI misreads a value?",
          a: "The deterministic re-check verifies every total independently of the AI: does net plus VAT equal the exact gross amount? Do the line items sum correctly? If the engine finds a mismatch, the receipt is flagged and shown to you for a quick confirmation – instead of landing unnoticed in your export.",
        },
        {
          q: "Do I need to download an app?",
          a: "No. ScanReceipts runs right in your browser, including Safari on iPhone – no App Store download required. A native iPhone app is also in the works.",
        },
        {
          q: "Which file formats can I upload?",
          a: "Photos as JPEG, PNG or HEIC (iPhone), and invoices as PDF. For very long receipts, two sharp photos beat one blurry panorama. Cropped totals are the most common reason a scan comes back incomplete.",
        },
        {
          q: "Can I export the extracted data to Excel or CSV?",
          a: "Yes. After extraction and the math-check you export a dual-sheet Excel file with live =SUM() formulas, or a CSV (UTF-8 with BOM, semicolon-delimited). The spreadsheet layout is covered in the receipt-to-Excel guide.",
        },
      ];

  const jsonLd = {
    "@context": "https://schema.org",
    "@graph": [
      {
        "@type": "BreadcrumbList",
        itemListElement: [
          { "@type": "ListItem", position: 1, name: c.breadcrumbHome, item: `${siteUrl}/${lang}` },
          { "@type": "ListItem", position: 2, name: c.breadcrumbCurrent, item: canonical },
        ],
      },
      {
        "@type": "WebPage",
        "@id": canonical,
        url: canonical,
        name: c.title,
        description: c.description,
        inLanguage: lang,
      },
      {
        "@type": "FAQPage",
        mainEntity: faqs.map((f) => ({
          "@type": "Question",
          name: f.q,
          acceptedAnswer: { "@type": "Answer", text: f.a },
        })),
      },
    ],
  };

  return (
    <div className="flex min-h-screen flex-col bg-[#F6F9FF] text-[#161C22] font-sans">
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd).replace(/</g, "\\u003c") }}
      />
      <Header />
      <main className="flex-1 w-full">
        {/* Hero */}
        <section className="w-full bg-white border-b border-[#E2E8F0]">
          <div className="max-w-[1440px] mx-auto px-4 sm:px-8 border-x border-[#E2E8F0] py-16 sm:py-24">
            <div className="flex items-center gap-2 mb-5">
              <span className="w-2.5 h-2.5 bg-black" />
              <span className="font-mono text-xs uppercase tracking-caps font-semibold text-[#475569]">
                {isDe ? "KI-BELEG-OCR" : "AI OCR ENGINE"}
              </span>
            </div>
            <h1 className="font-display font-bold tracking-tightest text-4xl sm:text-5xl lg:text-6xl text-black max-w-4xl leading-[1.05]">
              {isDe
                ? "KI-Beleg-OCR: Kassenbons automatisch auslesen"
                : "AI OCR Receipt Scanner: Turn Any Receipt Into Clean Data"}
            </h1>
            <p className="mt-6 text-base sm:text-lg text-[#475569] max-w-2xl leading-relaxed">
              {isDe
                ? "Ein Foto genügt: Ein multimodales KI-Modell liest Händler, Datum, Artikel, Mengen und Steuersätze aus jedem Kassenbon, jeder Rechnung und jedem Bewirtungsbeleg aus – anschließend rechnet eine deterministische TypeScript-Engine jede Summe eigenständig nach, bevor irgendetwas in deinem Export landet."
                : "One photo is enough: a multimodal AI model reads merchant, date, line items, quantities and tax rates off any receipt, invoice or business meal receipt – then a deterministic TypeScript engine independently re-verifies every total before anything reaches your export."}
            </p>
            <div className="mt-8 flex flex-wrap items-center gap-4">
              <Link
                href={`/${lang}`}
                className="px-8 py-4 bg-black text-white font-mono text-xs uppercase tracking-caps font-bold hover:bg-[#334155] transition-all"
              >
                {isDe ? "Jetzt kostenlos scannen" : "Scan a Receipt Free"}
              </Link>
              <Link
                href={publicPath(lang, "blog/how-receipt-ocr-works")}
                className="px-8 py-4 bg-white border border-[#CBD5E1] text-black font-mono text-xs uppercase tracking-caps font-bold hover:border-black hover:bg-[#F1F5F9] transition-all"
              >
                {isDe ? "So funktioniert die OCR-Pipeline" : "How the OCR Pipeline Works"}
              </Link>
            </div>
            <div className="mt-12 overflow-hidden border border-[#E2E8F0]">
              <Image
                src="/screenshot-upload-processing.png"
                alt={isDe ? "Screenshot: Ein Beleg wird im Dashboard hochgeladen und per KI analysiert" : "Screenshot: a receipt being uploaded and analyzed by AI in the dashboard"}
                width={1919}
                height={911}
                className="w-full h-auto"
                priority
              />
            </div>
          </div>
        </section>

        {/* How it works */}
        <section className="w-full">
          <div className="max-w-[1440px] mx-auto px-4 sm:px-8 border-x border-[#E2E8F0] py-16 sm:py-20">
            <div className="mb-10 pb-6 border-b border-[#E2E8F0]">
              <div className="flex items-center gap-2 mb-3">
                <span className="w-2.5 h-2.5 bg-black" />
                <span className="font-mono text-xs uppercase tracking-caps font-semibold text-[#475569]">
                  {isDe ? "SO FUNKTIONIERT DIE OCR-PIPELINE" : "HOW THE OCR PIPELINE WORKS"}
                </span>
              </div>
              <h2 className="font-display text-3xl sm:text-4xl font-bold tracking-tightest text-black">
                {isDe ? "Zwei Schritte statt blindem Vertrauen." : "Two steps, not blind trust."}
              </h2>
            </div>

            <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
              <div className="bg-white border border-[#E2E8F0] p-8">
                <span className="font-mono text-xs text-[#94A3B8]">01</span>
                <h3 className="font-display text-xl font-bold text-black mt-2 mb-3">
                  {isDe ? "Multimodale Texterkennung" : "Multimodal extraction"}
                </h3>
                <p className="text-sm text-[#475569] leading-relaxed">
                  {isDe
                    ? "Sobald du ein Foto hochlädst, analysiert ein aktuelles multimodales KI-Modell das Bild direkt – nicht nur den Text, sondern auch Layout, Tabellenstruktur und handschriftliche Zusätze. Erkannt werden Händlername, Belegdatum, jede einzelne Artikelzeile mit Menge und Einzelpreis sowie die deutschen Mehrwertsteuersätze von 7 % und 19 %, jeweils separat ausgewiesen. Auch unscharfe, schräg fotografierte oder thermisch verblasste Kassenbons werden zuverlässig verarbeitet, weil das Modell auf echte Kassenbon-Layouts trainiert ist statt auf reinen Fließtext."
                    : "The moment you upload a photo, a current multimodal AI model reads the image directly – not just the text, but layout, table structure and handwritten additions too. It extracts the merchant name, receipt date, every individual line item with quantity and unit price, and the German VAT rates of 7% and 19%, broken out separately. Blurry, angled, or thermally faded receipts are handled reliably because the model is trained on real receipt layouts, not plain text."}
                </p>
              </div>
              <div className="bg-white border border-[#E2E8F0] p-8">
                <span className="font-mono text-xs text-[#94A3B8]">02</span>
                <h3 className="font-display text-xl font-bold text-black mt-2 mb-3">
                  {isDe ? "Deterministischer Math-Check" : "Deterministic math check"}
                </h3>
                <p className="text-sm text-[#475569] leading-relaxed">
                  {isDe
                    ? "Direkt nach der KI-Erkennung übernimmt eine separate, deterministische TypeScript-Engine – keine weitere KI, sondern reine Arithmetik. Sie prüft: Ergibt Netto plus MwSt exakt den Bruttobetrag? Summieren sich alle Artikelzeilen zur ausgewiesenen Gesamtsumme? Stimmen die Steuerbeträge mit ihren Steuersätzen überein? Findet die Engine eine Abweichung, wird der Beleg klar markiert und dir zur kurzen Prüfung vorgelegt – statt den Fehler unbemerkt in deinen Export durchrutschen zu lassen. Genau das unterscheidet uns von einem reinen KI-Wrapper."
                    : "Right after AI extraction, a separate deterministic TypeScript engine takes over – no further AI, just plain arithmetic. It checks whether net plus VAT equals the exact gross total, whether every line item sums to the stated total, and whether tax amounts match their declared rates. If the engine finds a mismatch, the receipt is clearly flagged for a quick review instead of letting the error slip unnoticed into your export. That's exactly what separates a real product from a naive LLM wrapper."}
                </p>
              </div>
            </div>
          </div>
        </section>

        {/* What it handles */}
        <section className="w-full bg-white border-y border-[#E2E8F0]">
          <div className="max-w-[1440px] mx-auto px-4 sm:px-8 border-x border-[#E2E8F0] py-16 sm:py-20">
            <div className="mb-10 pb-6 border-b border-[#E2E8F0]">
              <div className="flex items-center gap-2 mb-3">
                <span className="w-2.5 h-2.5 bg-black" />
                <span className="font-mono text-xs uppercase tracking-caps font-semibold text-[#475569]">
                  {isDe ? "DOKUMENTTYPEN" : "DOCUMENT TYPES"}
                </span>
              </div>
              <h2 className="font-display text-3xl sm:text-4xl font-bold tracking-tightest text-black">
                {isDe
                  ? "Ein Scanner für jeden Belegtyp."
                  : "One scanner for every kind of receipt."}
              </h2>
            </div>

            <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
              {[
                {
                  title: isDe ? "Kassenbons" : "Retail receipts",
                  text: isDe
                    ? "Supermarkt, Tankstelle, Baumarkt oder Restaurant – jede Artikelzeile inklusive Menge und Steuersatz wird sauber erfasst."
                    : "Grocery, gas station, hardware store or restaurant – every line item, quantity and tax rate is captured cleanly.",
                },
                {
                  title: isDe ? "Rechnungen" : "Invoices",
                  text: isDe
                    ? "Auch mehrseitige Rechnungen mit Rechnungsnummer, Zahlungsziel und mehreren Steuersätzen werden strukturiert ausgelesen."
                    : "Even multi-page invoices with an invoice number, due date and multiple tax rates are extracted in structured form.",
                },
                {
                  title: isDe ? "Bewirtungsbelege" : "Business meal receipts",
                  text: isDe
                    ? "Trinkgeld und Anlass-Feld werden automatisch mit erfasst – wichtig für die steuerlich korrekte Bewirtungsbeleg-Dokumentation."
                    : "Tip amount and the occasion field are captured automatically – essential for correctly documented business meal expenses.",
                },
              ].map((item) => (
                <div key={item.title} className="p-6 border border-[#E2E8F0] bg-[#F8FAFC]">
                  <h3 className="font-display text-lg font-bold text-black mb-2">{item.title}</h3>
                  <p className="text-sm text-[#475569] leading-relaxed">{item.text}</p>
                </div>
              ))}
            </div>
          </div>
        </section>

        {/* iPhone / Safari */}
        <section className="w-full bg-white border-b border-[#E2E8F0]">
          <div className="max-w-[1440px] mx-auto px-4 sm:px-8 border-x border-[#E2E8F0] py-16 sm:py-20">
            <div className="grid grid-cols-1 lg:grid-cols-12 gap-10 items-center">
              <div className="lg:col-span-5">
                <div className="flex items-center gap-2 mb-3">
                  <span className="w-2.5 h-2.5 bg-black" />
                  <span className="font-mono text-xs uppercase tracking-caps font-semibold text-[#475569]">
                    {isDe ? "KEIN APP-DOWNLOAD NÖTIG" : "NO APP DOWNLOAD NEEDED"}
                  </span>
                </div>
                <h2 className="font-display text-3xl sm:text-4xl font-bold tracking-tightest text-black leading-tight">
                  {isDe
                    ? "Läuft direkt in Safari auf deinem iPhone."
                    : "Works right in Safari on your iPhone."}
                </h2>
              </div>
              <div className="lg:col-span-7 space-y-5 text-[#475569] text-base leading-relaxed">
                <p>
                  {isDe
                    ? "ScanReceipts ist eine Web-App – du öffnest sie einfach in Safari auf deinem iPhone, tippst auf die Kamera und scannst direkt los. Kein App-Store, keine Installation, kein Warten auf ein Update. Foto machen, KI-Erkennung und Math-Check laufen sofort, und der Beleg landet direkt in deiner Belegübersicht."
                    : "ScanReceipts is a web app – just open it in Safari on your iPhone, tap the camera, and start scanning immediately. No App Store, no install, no waiting on an update. Snap the photo and AI extraction plus the math-check run right away, with the receipt landing straight in your list."}
                </p>
                <p>
                  {isDe
                    ? "Für alle, die lieber eine native App wollen: Eine iPhone-App ist in Arbeit – trag dich über die Warteliste auf der Startseite ein, um informiert zu werden, sobald sie verfügbar ist."
                    : "If you'd rather have a native app: an iPhone app is in the works – join the waitlist on the homepage to get notified when it ships."}
                </p>
              </div>
            </div>
          </div>
        </section>

        {/* Why the math check matters */}
        <section className="w-full">
          <div className="max-w-[1440px] mx-auto px-4 sm:px-8 border-x border-[#E2E8F0] py-16 sm:py-20">
            <div className="grid grid-cols-1 lg:grid-cols-12 gap-10">
              <div className="lg:col-span-5">
                <div className="flex items-center gap-2 mb-3">
                  <span className="w-2.5 h-2.5 bg-black" />
                  <span className="font-mono text-xs uppercase tracking-caps font-semibold text-[#475569]">
                    {isDe ? "WARUM DAS WICHTIG IST" : "WHY IT MATTERS"}
                  </span>
                </div>
                <h2 className="font-display text-3xl sm:text-4xl font-bold tracking-tightest text-black leading-tight">
                  {isDe
                    ? "KI-Fehler landen nicht mehr unbemerkt in deiner Tabelle."
                    : "AI misreads no longer slip silently into your spreadsheet."}
                </h2>
              </div>
              <div className="lg:col-span-7 space-y-5 text-[#475569] text-base leading-relaxed">
                <p>
                  {isDe
                    ? "Reine KI-Modelle erkennen Zahlen erstaunlich gut – aber nicht perfekt. Eine verblasste Ziffer, ein doppelt gedrucktes Komma oder ein schräg fotografierter Rand kann aus 19,90 € schnell 79,90 € machen. Bei einem reinen 'KI-Wrapper' würde dieser Fehler unbemerkt in deiner Excel-Tabelle landen – und im schlimmsten Fall erst viel später auffallen, wenn du deine eigenen Aufzeichnungen durchgehst."
                    : "AI models are remarkably good at reading numbers – but not perfect. A faded digit, a doubled decimal separator, or a crooked photo edge can turn $19.90 into $79.90 in an instant. In a naive 'AI wrapper' tool, that mistake would land unnoticed in your spreadsheet – and in the worst case, only surface much later when you're reviewing your own records."}
                </p>
                <p>
                  {isDe
                    ? "Unser Ansatz ist anders: Die KI-Erkennung ist nur der erste Schritt. Die deterministische Nachrechnung ist reiner, reproduzierbarer Code – kein zweites KI-Modell, das genauso danebenliegen könnte. Stimmt eine Summe nicht, wird der Beleg als prüfbedürftig markiert und du bekommst genau angezeigt, welcher Wert nicht zusammenpasst. Ein Klick genügt, um den Wert zu bestätigen oder zu korrigieren."
                    : "Our approach is different: AI extraction is only the first step. The deterministic re-verification is plain, reproducible code – not a second AI model that could make the exact same kind of mistake. If a total doesn't add up, the receipt is flagged for review and you see exactly which value is inconsistent. One click is enough to confirm or correct it."}
                </p>
                <p>
                  {isDe
                    ? "Das Ergebnis: Du kannst deiner Excel-Tabelle tatsächlich vertrauen, statt jede Zeile händisch gegenzuprüfen. Genau diese Kombination aus KI-Geschwindigkeit und deterministischer Genauigkeit macht diesen Beleg-OCR-Scanner zu mehr als nur einem weiteren Texterkennungs-Tool."
                    : "The result: you can actually trust your Excel spreadsheet instead of manually re-checking every row. That combination of AI speed and deterministic accuracy is what makes this OCR receipt scanner more than just another text-recognition tool."}
                </p>
              </div>
            </div>
            <div className="mt-12 overflow-hidden border border-[#E2E8F0]">
              <Image
                src="/screenshot-inspector-review.png"
                alt={isDe ? "Screenshot: Der Inspector zeigt eine Validierungswarnung, wenn eine Summe nicht aufgeht" : "Screenshot: the receipt inspector flagging a validation warning when a total doesn't reconcile"}
                width={1295}
                height={868}
                className="w-full h-auto"
              />
            </div>
          </div>
        </section>

        {/* What a scan actually returns */}
        <section className="w-full bg-white border-y border-[#E2E8F0]">
          <div className="max-w-[1440px] mx-auto px-4 sm:px-8 border-x border-[#E2E8F0] py-16 sm:py-20">
            <div className="grid grid-cols-1 lg:grid-cols-12 gap-10">
              <div className="lg:col-span-5">
                <div className="flex items-center gap-2 mb-3">
                  <span className="w-2.5 h-2.5 bg-black" />
                  <span className="font-mono text-xs uppercase tracking-caps font-semibold text-[#475569]">
                    {isDe ? "WAS RAUSKOMMT" : "WHAT YOU GET"}
                  </span>
                </div>
                <h2 className="font-display text-3xl sm:text-4xl font-bold tracking-tightest text-black leading-tight">
                  {isDe
                    ? "Nicht nur Text – Felder, die du sortieren kannst."
                    : "Not just text — fields you can actually sort."}
                </h2>
              </div>
              <div className="lg:col-span-7 space-y-5 text-[#475569] text-base leading-relaxed">
                <p>
                  {isDe ? (
                    <>
                      Ein generischer OCR-Durchlauf liefert einen Textblock. Ein Beleg-OCR-Scanner
                      muss Felder trennen: Händler, Datum, Rechnungsnummer falls vorhanden, jede
                      Position mit Menge und Einzelpreis, Netto, die ausgewiesenen Steuersätze
                      (in Deutschland oft 7 % und 19 % auf demselben Bon), Brutto, und bei
                      Bewirtung Trinkgeld plus Anlass. Ohne diese Trennung kannst du den Scan
                      nicht in Excel filtern – du hast nur ein durchsuchbares Foto mit Extra-
                      Arbeit. Den technischen Hintergrund erklärt der Artikel{" "}
                      <SeoLink lang={lang} to="ocrBlog">
                        So funktioniert Beleg-OCR wirklich
                      </SeoLink>
                      .
                    </>
                  ) : (
                    <>
                      A generic OCR pass returns a blob of text. A receipt OCR scanner has to
                      split fields: merchant, date, invoice number if present, every line item
                      with quantity and unit price, net, the stated tax rates (in Germany often
                      7% and 19% on the same slip), gross, and on a business meal the tip plus
                      occasion. Without that split you cannot filter the scan in Excel — you
                      just have a searchable photo with extra work attached. The technical
                      background is in{" "}
                      <SeoLink lang={lang} to="ocrBlog">
                        how receipt OCR actually works
                      </SeoLink>
                      .
                    </>
                  )}
                </p>
                <p>
                  {isDe ? (
                    <>
                      Fotos (JPEG, HEIC vom iPhone) und PDF-Rechnungen laufen durch denselben
                      Workflow. Das Foto braucht eine halbwegs gerade Aufnahme ohne abgeschnittene
                      Summe. Das PDF braucht eine Engine, die die Betragstabelle findet und nicht
                      den Footer. Beides landet danach in derselben Übersicht und demselben{" "}
                      <SeoLink lang={lang} to="excelGuide">
                        Excel- oder CSV-Export
                      </SeoLink>
                      .
                    </>
                  ) : (
                    <>
                      Photos (JPEG, HEIC from iPhone) and PDF invoices go through the same
                      workflow. The photo needs a reasonably straight shot without a cropped
                      total. The PDF needs an engine that finds the amount table and ignores the
                      footer. Both then land in the same list and the same{" "}
                      <SeoLink lang={lang} to="excelGuide">
                        Excel or CSV export
                      </SeoLink>
                      .
                    </>
                  )}
                </p>
                <p>
                  {isDe ? (
                    <>
                      Wenn ein Wert unlesbar ist, rät ScanReceipts nicht still. Der Beleg wird
                      markiert. Das ist unbequemer als eine „fertige“ Zahl – und genau deshalb
                      kannst du der Tabelle hinterher trauen. Für den Alltag als Selbstständige:r
                      sitzt dieselbe Engine im{" "}
                      <SeoLink lang={lang} to="freelancer">
                        Ausgaben-Tracker für Freelancer
                      </SeoLink>
                      . Wer eine große Suite ablösen will, liest besser zuerst den Vergleich zur{" "}
                      <SeoLink lang={lang} to="expensify">
                        Expensify-Alternative
                      </SeoLink>
                      .
                    </>
                  ) : (
                    <>
                      If a value is unreadable, ScanReceipts does not silently guess. The receipt
                      is flagged. That is less comfortable than a "finished" number — and it is
                      why you can trust the sheet afterward. For day-to-day freelance work the
                      same engine sits in the{" "}
                      <SeoLink lang={lang} to="freelancer">
                        expense tracker for freelancers
                      </SeoLink>
                      . If you are trying to replace a large suite, start with the{" "}
                      <SeoLink lang={lang} to="expensify">
                        Expensify alternative
                      </SeoLink>
                      .
                    </>
                  )}
                </p>
              </div>
            </div>
          </div>
        </section>

        {/* FAQ */}
        <section className="w-full bg-white border-t border-[#E2E8F0]">
          <div className="max-w-[1440px] mx-auto px-4 sm:px-8 border-x border-[#E2E8F0] py-16 sm:py-20">
            <div className="mb-10 pb-6 border-b border-[#E2E8F0]">
              <div className="flex items-center gap-2 mb-3">
                <span className="w-2.5 h-2.5 bg-black" />
                <span className="font-mono text-xs uppercase tracking-caps font-semibold text-[#475569]">
                  {isDe ? "HÄUFIGE FRAGEN" : "FREQUENTLY ASKED QUESTIONS"}
                </span>
              </div>
              <h2 className="font-display text-3xl sm:text-4xl font-bold tracking-tightest text-black">
                {isDe ? "Fragen zur Beleg-OCR." : "Questions About the OCR Engine."}
              </h2>
            </div>
            <div className="max-w-4xl space-y-4">
              {faqs.map((faq, idx) => (
                <div key={idx} className="bg-[#F8FAFC] border border-[#E2E8F0] p-6">
                  <h3 className="font-display text-lg font-bold text-black tracking-tight mb-2">{faq.q}</h3>
                  <p className="text-sm text-[#475569] leading-relaxed">{faq.a}</p>
                </div>
              ))}
            </div>
          </div>
        </section>

        {/* CTA */}
        <section className="w-full border-t border-[#E2E8F0]">
          <div className="max-w-[1440px] mx-auto px-4 sm:px-8 border-x border-[#E2E8F0] py-16 sm:py-20 text-center">
            <h2 className="font-display text-3xl sm:text-4xl font-bold tracking-tightest text-black mb-4">
              {isDe ? "Teste die Beleg-OCR direkt am eigenen Beleg." : "Try the OCR engine on your own receipt."}
            </h2>
            <p className="text-[#475569] max-w-xl mx-auto mb-8 leading-relaxed">
              {isDe
                ? "Kein Konto nötig für den Start: 15 Scans pro Monat kostenlos, deine Daten bleiben lokal im Browser gespeichert."
                : "No account needed to start: 15 free scans per month, with your data kept locally in your browser."}
            </p>
            <Link
              href={`/${lang}`}
              className="inline-block px-8 py-4 bg-black text-white font-mono text-xs uppercase tracking-caps font-bold hover:bg-[#334155] transition-all"
            >
              {isDe ? "Jetzt Beleg hochladen" : "Upload a Receipt Now"}
            </Link>
            <div className="mt-10 max-w-5xl mx-auto text-left">
              <RelatedReading
                lang={lang}
                keys={["ocrBlog", "excelGuide", "expensify", "freelancer"]}
              />
            </div>
          </div>
        </section>
      </main>
      <Footer />
    </div>
  );
}
