import type { Metadata } from "next";
import { notFound } from "next/navigation";
import Link from "next/link";
import { CheckCircle2, X, ArrowUpRight } from "lucide-react";
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 = "lexoffice-alternative" as const;

const copy = {
  de: {
    title: "Lexoffice-Alternative: Kassenbons scannen | ScanReceipts",
    description:
      "Lexoffice und sevDesk sind vollständige Rechnungs-Suiten. ScanReceipts ist das schnelle Front-End: Kassenbons fotografieren, geprüfte Excel- oder CSV-Datei exportieren — in Sekunden.",
    keywords: ["lexoffice alternative", "alternative zu lexoffice", "sevdesk kassenbon scannen", "kassenbon scanner deutschland"],
    breadcrumb: "Lexoffice Alternative",
  },
  en: {
    title: "Lexoffice Alternative: Fast Receipt Scans | ScanReceipts",
    description:
      "Lexoffice and sevDesk are full invoicing suites. ScanReceipts is the fast front-end: photograph a receipt, export a verified Excel or CSV — in seconds.",
    keywords: ["lexoffice alternative", "receipt scanner for germany", "german receipt scanner app"],
    breadcrumb: "Lexoffice Alternative",
  },
} 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}/receipt-vs-suite-diagram.png`, width: 1254, height: 1254 }],
    },
    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 LexofficeAlternativePage({
  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 comparisonRows = [
    {
      feature: isDe ? "Fokus" : "Focus",
      scan: isDe ? "Belege scannen → geprüfte Excel/CSV in Sekunden" : "Scan receipts → verified Excel/CSV in seconds",
      suite: isDe ? "Vollständige Rechnungsstellung: USt-Voranmeldung, Kontenrahmen" : "Full invoicing: VAT filing, chart of accounts",
    },
    {
      feature: isDe ? "Ohne Konto sofort nutzbar" : "Usable instantly without an account",
      scan: true,
      suite: false,
    },
    {
      feature: isDe ? "CSV (UTF-8 BOM, Semikolon)" : "CSV (UTF-8 BOM, semicolon)",
      scan: true,
      suite: true,
    },
    {
      feature: isDe ? "Dual-Sheet Excel mit echten =SUM()-Formeln" : "Dual-sheet Excel with live =SUM() formulas",
      scan: true,
      suite: isDe ? "Nicht der Fokus" : "Not the focus",
    },
    {
      feature: isDe ? "Deterministischer Math-Check jeder Summe" : "Deterministic math-check on every total",
      scan: true,
      suite: isDe ? "In der Regel nicht" : "Typically not",
    },
    {
      feature: isDe ? "USt-Voranmeldung, Rechnungen schreiben, GoBD-Archivierung" : "VAT pre-filing, invoicing, GoBD-compliant archiving",
      scan: false,
      suite: true,
    },
    {
      feature: isDe ? "Bewirtungsbelege mit Trinkgeld & Anlass" : "Business-meal receipts with tip & occasion field",
      scan: true,
      suite: isDe ? "Teilweise" : "Partially",
    },
    {
      feature: isDe ? "Preismodell" : "Pricing model",
      scan: isDe ? "Flexible Pläne, inkl. Lifetime-Option" : "Flexible plans, including a lifetime option",
      suite: isDe ? "Monatliches Software-Abo" : "Monthly software subscription",
    },
  ];

  const faqs = isDe
    ? [
        {
          q: "Ersetzt ScanReceipts Lexoffice oder sevDesk?",
          a: "Nicht als vollständige Rechnungssoftware — und das ist auch nicht das Ziel. Lexoffice und sevDesk decken Rechnungsstellung, USt-Voranmeldung, Kontenrahmen und GoBD-konforme Archivierung ab. ScanReceipts löst den vorgelagerten Schritt: einen Stapel Kassenbons und Rechnungen so schnell wie möglich in eine geprüfte, strukturierte Tabelle zu verwandeln. Viele Nutzer setzen beides ein — ScanReceipts zum schnellen Digitalisieren, Lexoffice nachgelagert für die vollständige Rechnungsstellung.",
        },
        {
          q: "Wie ist der CSV-Export formatiert?",
          a: "Der Export nutzt UTF-8 mit BOM und Semikolon als Trennzeichen — das Format, das gängige deutsche Programme erwarten. So lässt sich die Datei direkt importieren, ohne Encoding-Probleme oder verrutschte Spalten.",
        },
        {
          q: "Kann ich Kassenbons und Bewirtungsbelege gemischt scannen?",
          a: "Ja. ScanReceipts erkennt reguläre Kassenbons, Rechnungen und Bewirtungsbelege im selben Workflow. Bei Bewirtungsbelegen werden Trinkgeld und Anlass-Feld automatisch mit erfasst, damit die Angaben vollständig dokumentiert sind.",
        },
        {
          q: "Kann ich ScanReceipts ohne Konto testen?",
          a: "Ja. Die ersten 15 Scans im Monat sind kostenlos und laufen direkt im Browser (Gast-Sitzung, gespeichert auf dem Server) — kein Konto, keine Kreditkarte. Für geräteübergreifenden Zugriff kannst du später jederzeit ein Konto anlegen.",
        },
        {
          q: "Was passiert, wenn die KI einen Betrag falsch liest?",
          a: "Nach der KI-Erkennung rechnet eine deterministische TypeScript-Engine jede Summe nach: Netto plus MwSt muss exakt dem Bruttobetrag entsprechen. Stimmt das nicht überein, wird der Beleg markiert und dir zur kurzen Prüfung vorgelegt — statt unbemerkt in deinem Export zu landen.",
        },
        {
          q: "Kann ich den Export direkt in Lexoffice importieren?",
          a: "Der CSV-Export nutzt UTF-8 mit BOM und Semikolon – das Format, das gängige deutsche Programme erwarten. Den konkreten Import-Dialog steuert Lexoffice; wir erfinden keine Klickpfade, die sich ändern können. Viele prüfen die Dual-Sheet-Excel zuerst und importieren danach.",
        },
        {
          q: "Für wen ist der Wechsel die falsche Idee?",
          a: "Wenn dein Kernjob Ausgangsrechnungen, DATEV-Übergabe oder GoBD-Archiv ist, bleib in Lexoffice oder sevDesk. ScanReceipts ist der schnellere Eingang für den Belegstapel, nicht das ganze Büro.",
        },
      ]
    : [
        {
          q: "Does ScanReceipts replace Lexoffice or sevDesk?",
          a: "Not as a full invoicing platform — and that's not the goal. Lexoffice and sevDesk cover invoicing, VAT pre-filing, chart-of-accounts management, and GoBD-compliant archiving. ScanReceipts solves the upstream step: turning a stack of receipts and invoices into a verified, structured spreadsheet as fast as possible. Many users run both — ScanReceipts to digitize quickly, Lexoffice downstream for full invoicing.",
        },
        {
          q: "How is the CSV export formatted?",
          a: "The export uses UTF-8 with a BOM and semicolon as the delimiter — the format common German business software expects. That means it imports cleanly without encoding issues or misaligned columns.",
        },
        {
          q: "Can I scan regular receipts and business-meal receipts together?",
          a: "Yes. ScanReceipts recognizes regular Kassenbons, invoices, and Bewirtungsbelege (business-meal receipts) in the same workflow. For business-meal receipts, tip amount and occasion are captured automatically so the documentation is complete.",
        },
        {
          q: "Can I try ScanReceipts without an account?",
          a: "Yes. The first 15 scans a month are free and run right in your browser (a guest session stored on the server) — no account, no credit card. You can create an account later any time you want cross-device access.",
        },
        {
          q: "What happens if the AI misreads an amount?",
          a: "After the AI pass, a deterministic TypeScript engine re-verifies every total: net plus VAT must equal the gross amount exactly. If it doesn't reconcile, the receipt is flagged and shown to you for a quick review — instead of landing unnoticed in your export.",
        },
        {
          q: "Can I import the export straight into Lexoffice?",
          a: "The CSV export uses UTF-8 with a BOM and semicolons — the format common German programs expect. Lexoffice owns the import dialog; we do not invent click-paths that change. Many people review the dual-sheet Excel first, then import.",
        },
        {
          q: "Who should not switch?",
          a: "If your core job is issuing invoices, DATEV handoff, or GoBD archiving, stay in Lexoffice or sevDesk. ScanReceipts is the faster front door for the receipt stack, not the whole office.",
        },
      ];

  const jsonLd = {
    "@context": "https://schema.org",
    "@graph": [
      {
        "@type": "BreadcrumbList",
        itemListElement: [
          { "@type": "ListItem", position: 1, name: isDe ? "Start" : "Home", item: `${siteUrl}/${lang}` },
          { "@type": "ListItem", position: 2, name: c.breadcrumb, 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-20">
            <div className="max-w-3xl mx-auto text-center">
              <div className="flex items-center justify-center gap-2 mb-4">
                <span className="w-2.5 h-2.5 bg-black" />
                <span className="font-mono text-xs uppercase tracking-caps font-semibold text-[#475569]">
                  {isDe ? "VERGLEICH: LEXOFFICE-ALTERNATIVE" : "COMPARISON: LEXOFFICE ALTERNATIVE"}
                </span>
              </div>
              <h1 className="font-display text-3xl sm:text-4xl lg:text-5xl font-bold tracking-tightest text-black leading-[1.08] mb-6">
                {isDe
                  ? "Lexoffice-Alternative für schnelles Belege-Scannen ohne Extra-Software"
                  : "The Lexoffice Alternative for Fast Receipt Digitization"}
              </h1>
              <p className="text-base sm:text-lg text-[#475569] leading-relaxed mb-8">
                {isDe
                  ? "Lexoffice und sevDesk sind vollständige Rechnungs-Suiten für Rechnungsstellung, USt-Voranmeldung und Kontenrahmen. Wenn du nur schnell einen Stapel Kassenbons digitalisieren willst, ist ScanReceipts das direktere Werkzeug: Foto rein, geprüfte Dual-Sheet Excel- oder CSV-Datei raus — ohne zusätzliche Software einzurichten."
                  : "Lexoffice and sevDesk are full invoicing suites covering customer invoices, VAT pre-filing, and chart-of-accounts management. If you just need to digitize a stack of receipts fast, ScanReceipts is the more direct tool: a photo in, a verified dual-sheet Excel file or CSV out — no extra software setup required."}
              </p>
              <div className="flex flex-wrap items-center justify-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 flex items-center gap-2 shadow-md group"
                >
                  <span>{isDe ? "Jetzt kostenlos scannen" : "Start Scanning Free"}</span>
                  <ArrowUpRight className="w-4 h-4 transition-transform group-hover:translate-x-0.5 group-hover:-translate-y-0.5" />
                </Link>
                <Link
                  href="/auth/signup"
                  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 ? "Konto erstellen" : "Create an Account"}
                </Link>
              </div>
            </div>
            <div className="mt-12 max-w-md mx-auto overflow-hidden border border-[#E2E8F0]">
              <Image
                src="/receipt-vs-suite-diagram.png"
                alt={isDe ? "Ein komplexes Netzwerk-Diagramm links, ein einfacher Beleg mit Häkchen rechts" : "A tangled network diagram on the left, a simple checked receipt on the right"}
                width={1254}
                height={1254}
                className="w-full h-auto"
                priority
              />
            </div>
          </div>
        </section>

        {/* Positioning section */}
        <section className="w-full py-16 sm:py-20">
          <div className="max-w-[1440px] mx-auto px-4 sm:px-8 border-x border-[#E2E8F0]">
            <div className="max-w-3xl mb-10">
              <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 ? "NICHT UNBEDINGT ENTWEDER-ODER" : "NOT NECESSARILY EITHER/OR"}
                </span>
              </div>
              <h2 className="font-display text-2xl sm:text-3xl font-bold tracking-tightest text-black mb-6">
                {isDe ? "Zwei Werkzeuge, die sich ergänzen." : "Two tools that complement each other."}
              </h2>
              <div className="space-y-4 text-sm sm:text-base text-[#475569] leading-relaxed">
                {isDe ? (
                  <>
                    <p>
                      Lexoffice und sevDesk sind vollständige Rechnungsprogramme: Sie schreiben Rechnungen, bereiten
                      die Umsatzsteuervoranmeldung vor, verwalten den Kontenrahmen und archivieren GoBD-konform. Das ist
                      genau richtig, wenn du deine komplette Rechnungsstellung digital abbilden willst. Aber der erste
                      Schritt — ein Stapel Kassenbons und Rechnungen, die erst einmal erfasst werden müssen — ist in
                      solchen Suiten oft der langsamste Teil: Belege einzeln hochladen, Felder von Hand prüfen oder
                      nachtragen, sich durch mehrere Menüs klicken.
                    </p>
                    <p>
                      ScanReceipts ist auf genau diesen ersten Schritt spezialisiert. Ein Foto, und eine KI liest
                      Händler, Datum, Positionen, Mengen und beide deutschen MwSt-Sätze (7 % und 19 %) automatisch aus.
                      Eine deterministische Prüfung rechnet direkt danach jede Summe nach, bevor du sie überhaupt zu
                      Gesicht bekommst. Das Ergebnis exportierst du als Dual-Sheet Excel-Datei mit echten
                      =SUM()-Formeln oder als CSV (UTF-8 mit BOM, semikolongetrennt) — bereit für den
                      direkten Import in Lexoffice, sevDesk oder vergleichbare Programme.
                    </p>
                    <p>
                      Viele ScanReceipts-Nutzer haben deshalb parallel ein Lexoffice- oder sevDesk-Konto: ScanReceipts
                      übernimmt das schnelle Digitalisieren und Vorprüfen, die andere Software übernimmt danach die
                      vollständige Verbuchung. Kein Entweder-oder — ein Workflow mit zwei spezialisierten Werkzeugen.
                    </p>
                  </>
                ) : (
                  <>
                    <p>
                      Lexoffice and sevDesk are full invoicing platforms: they issue invoices, prepare VAT
                      pre-filings, manage the chart of accounts, and archive documents in a GoBD-compliant way. That's
                      exactly right if you want your entire invoicing digitized. But the first step — a stack of
                      receipts and invoices that still need to be captured — is often the slowest part of that
                      workflow inside a full suite: uploading receipts one by one, manually checking or correcting
                      fields, clicking through multiple menus.
                    </p>
                    <p>
                      ScanReceipts specializes in exactly that first step. One photo, and an AI model automatically
                      reads merchant, date, line items, quantities, and both German VAT rates (7% and 19%). A
                      deterministic check re-verifies every total immediately afterward, before you ever see it. You
                      then export the result as a dual-sheet Excel file with live =SUM() formulas, or as a
                      CSV (UTF-8 with BOM, semicolon-separated) — ready to import straight into
                      Lexoffice, sevDesk, or similar software.
                    </p>
                    <p>
                      That's why many ScanReceipts users also keep a Lexoffice or sevDesk account running in parallel:
                      ScanReceipts handles fast digitization and pre-verification, and the other software handles
                      full posting afterward. Not either/or — one workflow, two specialized tools.
                    </p>
                  </>
                )}
              </div>
            </div>
          </div>
        </section>

        {/* Comparison table */}
        <section className="w-full bg-[#F6F9FF] py-16 sm:py-20">
          <div className="max-w-[1440px] mx-auto px-4 sm:px-8 border-x border-[#E2E8F0]">
            <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 ? "FUNKTIONSVERGLEICH" : "FEATURE COMPARISON"}
                </span>
              </div>
              <h2 className="font-display text-2xl sm:text-3xl lg:text-4xl font-bold tracking-tightest text-black">
                {isDe ? "ScanReceipts vs. Lexoffice / sevDesk." : "ScanReceipts vs. Lexoffice / sevDesk."}
              </h2>
            </div>

            <div className="overflow-x-auto border border-[#E2E8F0] bg-white">
              <table className="w-full text-left border-collapse font-sans">
                <thead>
                  <tr className="border-b border-[#E2E8F0] bg-[#F8FAFC]">
                    <th className="p-4 sm:p-5 font-mono text-xs uppercase tracking-caps text-[#475569] font-semibold w-2/5">
                      {isDe ? "Merkmal" : "Capability"}
                    </th>
                    <th className="p-4 sm:p-5 font-mono text-xs uppercase tracking-caps text-black font-bold bg-[#EEF4FC] border-x border-[#E2E8F0] w-[30%] text-center">
                      SCANRECEIPTS
                    </th>
                    <th className="p-4 sm:p-5 font-mono text-xs uppercase tracking-caps text-[#64748B] w-[30%] text-center">
                      LEXOFFICE / SEVDESK
                    </th>
                  </tr>
                </thead>
                <tbody className="divide-y divide-[#E2E8F0] text-sm">
                  {comparisonRows.map((row, idx) => (
                    <tr key={idx} className="hover:bg-[#F8FAFC]/60 transition-colors">
                      <td className="p-4 sm:p-5 font-medium text-black">{row.feature}</td>
                      <td className="p-4 sm:p-5 bg-[#EEF4FC]/50 border-x border-[#E2E8F0] text-center">
                        {typeof row.scan === "boolean" ? (
                          row.scan ? (
                            <CheckCircle2 className="w-4 h-4 text-emerald-600 mx-auto" />
                          ) : (
                            <X className="w-4 h-4 text-red-500 mx-auto" />
                          )
                        ) : (
                          <span className="font-mono text-xs text-black">{row.scan}</span>
                        )}
                      </td>
                      <td className="p-4 sm:p-5 text-center text-xs text-[#64748B] font-mono">
                        {typeof row.suite === "boolean" ? (
                          row.suite ? (
                            <CheckCircle2 className="w-4 h-4 text-emerald-600 mx-auto" />
                          ) : (
                            <X className="w-4 h-4 text-red-400 mx-auto" />
                          )
                        ) : (
                          <span>{row.suite}</span>
                        )}
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
            <p className="mt-4 text-xs text-[#64748B] font-mono max-w-2xl">
              {isDe
                ? "Positionierung basiert auf öffentlich bekannten Produktkategorien, keine Herstellerangaben. Wir erfinden keine Preise oder Behauptungen über Wettbewerber."
                : "Positioning is based on publicly known product categories, not vendor claims. We do not invent competitor pricing or claims."}
            </p>
          </div>
        </section>

        {/* Who it's for */}
        <section className="w-full py-16 sm:py-20 bg-white border-y border-[#E2E8F0]">
          <div className="max-w-[1440px] mx-auto px-4 sm:px-8 border-x border-[#E2E8F0]">
            <div className="grid grid-cols-1 md:grid-cols-2 gap-10">
              <div className="p-6 sm:p-8 border border-[#E2E8F0] bg-[#F8FAFC]">
                <h3 className="font-display text-xl font-bold text-black mb-3">
                  {isDe ? "ScanReceipts passt, wenn du..." : "ScanReceipts fits when you..."}
                </h3>
                <ul className="space-y-2 text-sm text-[#475569]">
                  {(isDe
                    ? [
                        "einen Stapel Kassenbons oder Rechnungen schnell digitalisieren willst",
                        "einen CSV-Export (UTF-8, semikolon-getrennt) brauchst",
                        "Bewirtungsbelege mit Trinkgeld und Anlass separat erfassen musst",
                        "keine vollständige Rechnungssoftware einrichten willst",
                        "ScanReceipts als schnellen Erfassungsschritt vor deiner Rechnungsstellung nutzen willst",
                      ]
                    : [
                        "need to digitize a stack of receipts or invoices fast",
                        "need a CSV export (UTF-8, semicolon-delimited)",
                        "need business-meal receipts captured with tip and occasion fields",
                        "don't want to set up a full invoicing platform",
                        "want to use ScanReceipts as the fast capture step ahead of your invoicing",
                      ]
                  ).map((item, i) => (
                    <li key={i} className="flex items-start gap-2">
                      <CheckCircle2 className="w-4 h-4 text-emerald-600 mt-0.5 shrink-0" />
                      <span>{item}</span>
                    </li>
                  ))}
                </ul>
              </div>
              <div className="p-6 sm:p-8 border border-[#E2E8F0] bg-[#F8FAFC]">
                <h3 className="font-display text-xl font-bold text-black mb-3">
                  {isDe ? "Lexoffice / sevDesk passt, wenn du..." : "Lexoffice / sevDesk fits when you..."}
                </h3>
                <ul className="space-y-2 text-sm text-[#475569]">
                  {(isDe
                    ? [
                        "Rechnungen an Kunden schreiben und verwalten musst",
                        "die Umsatzsteuervoranmeldung direkt vorbereiten willst",
                        "einen vollständigen Kontenrahmen und Buchungssätze brauchst",
                        "GoBD-konforme Langzeitarchivierung all deiner Rechnungen und Belege benötigst",
                      ]
                    : [
                        "need to create and manage invoices for customers",
                        "want to prepare VAT pre-filings directly",
                        "need a full chart of accounts and journal entries",
                        "require GoBD-compliant long-term archiving of all your invoices and records",
                      ]
                  ).map((item, i) => (
                    <li key={i} className="flex items-start gap-2">
                      <CheckCircle2 className="w-4 h-4 text-[#64748B] mt-0.5 shrink-0" />
                      <span>{item}</span>
                    </li>
                  ))}
                </ul>
              </div>
            </div>
          </div>
        </section>

        {/* CSV into Lexoffice */}
        <section className="w-full py-16 sm:py-20">
          <div className="max-w-[1440px] mx-auto px-4 sm:px-8 border-x border-[#E2E8F0]">
            <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 ? "ZUSAMMENSPIEL, KEIN ERSATZ" : "COMPLEMENT, NOT A REPLACEMENT"}
                  </span>
                </div>
                <h2 className="font-display text-2xl sm:text-3xl font-bold tracking-tightest text-black leading-tight">
                  {isDe
                    ? "CSV raus, in Lexoffice rein – der langsame Teil wird schnell."
                    : "CSV out, Lexoffice in — the slow part gets fast."}
                </h2>
              </div>
              <div className="lg:col-span-7 space-y-5 text-[#475569] text-base leading-relaxed">
                <p>
                  {isDe ? (
                    <>
                      Der typische Reibungspunkt in Lexoffice oder sevDesk ist nicht die
                      USt-Voranmeldung. Es ist der Stapel davor: zehn Kassenbons, drei
                      Bewirtungen, zwei PDF-Rechnungen, jedes Dokument einzeln hochladen und
                      Felder nachziehen. ScanReceipts übernimmt genau diesen Stapel. Der Export
                      kommt als CSV mit UTF-8-BOM und Semikolon – das Format, das deutsche
                      Programme erwarten – oder als Dual-Sheet-Excel, wenn du erst selbst
                      prüfen willst. Wie die Tabelle aufgebaut ist, steht unter{" "}
                      <SeoLink lang={lang} to="excelGuide">
                        Kassenbon in Excel umwandeln
                      </SeoLink>
                      .
                    </>
                  ) : (
                    <>
                      The usual friction in Lexoffice or sevDesk is not the VAT filing. It is
                      the stack before it: ten till slips, three meals, two PDF invoices, each
                      document uploaded one by one with fields to correct. ScanReceipts takes
                      that stack. The export comes as a CSV with a UTF-8 BOM and semicolons —
                      the format German software expects — or as dual-sheet Excel if you want
                      to review first. How the sheet is structured is in{" "}
                      <SeoLink lang={lang} to="excelGuide">
                        receipt to Excel
                      </SeoLink>
                      .
                    </>
                  )}
                </p>
                <p>
                  {isDe ? (
                    <>
                      Deutsche Belegtypen sind hier kein Extra, sondern der Normalfall:
                      Mischsteuersätze 7/19, Bewirtung mit Trinkgeld und Anlass, Kleinbeträge
                      vom Baumarkt, Tankbelege auf Thermopapier. Ein Scanner, der für US-Spesen
                      gebaut ist, stolpert genau dort. Wer eher Expensify als Lexoffice
                      vergleicht, landet auf der{" "}
                      <SeoLink lang={lang} to="expensify">
                        Expensify-Alternative
                      </SeoLink>
                      . Für den Alltag ohne Suite reicht oft der{" "}
                      <SeoLink lang={lang} to="freelancer">
                        Ausgaben-Tracker für Selbstständige
                      </SeoLink>
                      .
                    </>
                  ) : (
                    <>
                      German document types are not an add-on here — they are the default:
                      mixed 7/19 tax rates, meals with tip and occasion, small hardware-store
                      slips, thermal fuel receipts. A scanner built for US expense reports
                      trips there. If you are comparing Expensify rather than Lexoffice, go to
                      the{" "}
                      <SeoLink lang={lang} to="expensify">
                        Expensify alternative
                      </SeoLink>
                      . For day-to-day work without a suite, the{" "}
                      <SeoLink lang={lang} to="freelancer">
                        expense tracker for the self-employed
                      </SeoLink>{" "}
                      is often enough.
                    </>
                  )}
                </p>
                <p>
                  {isDe ? (
                    <>
                      Wen ScanReceipts nicht ersetzen soll: alle, die Ausgangsrechnungen,
                      DATEV-Übergabe oder GoBD-Archiv als Kern brauchen. Das bleibt in
                      Lexoffice. Der Scanner ist der schnellere Eingang, nicht das ganze Büro.
                      Wie du den Stapel vorher nicht mehr abtippst, erklärt{" "}
                      <SeoLink lang={lang} to="scanningVsManual">
                        Kassenbon scannen statt abtippen
                      </SeoLink>
                      . Die Engine dahinter:{" "}
                      <SeoLink lang={lang} to="ocr">
                        Beleg-OCR
                      </SeoLink>
                      .
                    </>
                  ) : (
                    <>
                      Who ScanReceipts should not replace: anyone whose core job is issuing
                      invoices, DATEV handoff, or GoBD archiving. That stays in Lexoffice. The
                      scanner is the faster front door, not the whole office. How to stop
                      typing the stack first is in{" "}
                      <SeoLink lang={lang} to="scanningVsManual">
                        receipt scanning vs. manual data entry
                      </SeoLink>
                      . The engine behind it:{" "}
                      <SeoLink lang={lang} to="ocr">
                        receipt OCR
                      </SeoLink>
                      .
                    </>
                  )}
                </p>
              </div>
            </div>
          </div>
        </section>

        {/* FAQ */}
        <section className="w-full py-16 sm:py-20">
          <div className="max-w-[1440px] mx-auto px-4 sm:px-8 border-x border-[#E2E8F0]">
            <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-2xl sm:text-3xl font-bold tracking-tightest text-black">
                {isDe ? "Fragen zur Lexoffice-Alternative." : "Questions About the Lexoffice Alternative."}
              </h2>
            </div>
            <div className="max-w-4xl space-y-4">
              {faqs.map((faq, idx) => (
                <div key={idx} className="bg-white 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>

        {/* Internal links + CTA */}
        <section className="w-full py-16 sm:py-20 bg-white border-t border-[#E2E8F0]">
          <div className="max-w-[1440px] mx-auto px-4 sm:px-8 border-x border-[#E2E8F0]">
            <div className="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-8 p-8 sm:p-10 bg-[#F8FAFC] border border-[#CBD5E1]">
              <div className="max-w-xl">
                <h2 className="font-display text-2xl sm:text-3xl font-bold tracking-tightest text-black mb-3">
                  {isDe ? "Bereit, deine Belege zu digitalisieren?" : "Ready to digitize your receipts?"}
                </h2>
                <p className="text-sm sm:text-base text-[#475569] leading-relaxed">
                  {isDe
                    ? "Teste ScanReceipts kostenlos — 15 Scans pro Monat, kein Konto nötig. Mehr Guides zum Thema Belege scannen im Blog."
                    : "Try ScanReceipts free — 15 scans a month, no account required. More guides on receipt scanning in the blog."}
                </p>
                <div className="mt-4 flex flex-wrap gap-x-6 gap-y-2 font-mono text-xs text-[#475569]">
                  <Link href={`/${lang}/blog`} className="underline hover:text-black transition-colors">
                    {isDe ? "→ Zum Blog" : "→ Visit the Blog"}
                  </Link>
                  <Link href={publicPath(lang, "expense-tracker-freelancers")} className="underline hover:text-black transition-colors">
                    {isDe ? "→ Für Selbstständige" : "→ For freelancers"}
                  </Link>
                  <Link href={publicPath(lang, "expensify-alternative")} className="underline hover:text-black transition-colors">
                    {isDe ? "→ Expensify-Alternative" : "→ Expensify alternative"}
                  </Link>
                  <Link href={`/${lang}`} className="underline hover:text-black transition-colors">
                    {isDe ? "→ Zurück zur Startseite" : "→ Back to Home"}
                  </Link>
                </div>
              </div>
              <Link
                href={`/${lang}`}
                className="shrink-0 px-8 py-4 bg-black text-white font-mono text-xs uppercase tracking-caps font-bold hover:bg-[#334155] transition-all flex items-center justify-center gap-2 shadow-md group"
              >
                <span>{isDe ? "Jetzt kostenlos scannen" : "Start Scanning Free"}</span>
                <ArrowUpRight className="w-4 h-4 transition-transform group-hover:translate-x-0.5 group-hover:-translate-y-0.5" />
              </Link>
            </div>
            <RelatedReading
              lang={lang}
              keys={["expensify", "freelancer", "scanningVsManual", "ocr"]}
            />
          </div>
        </section>
      </main>
      <Footer />
    </div>
  );
}
