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 = "expensify-alternative" as const;

const copy = {
  en: {
    title: "Expensify Alternative for Receipt Scanning | ScanReceipts",
    description:
      "Looking for an Expensify or Dext alternative? ScanReceipts turns a receipt photo into a verified Excel export in seconds — no account, no setup.",
    keywords: [
      "expensify alternative",
      "dext alternative",
      "receipt bank alternative",
      "best receipt scanner app",
      "free expensify alternative",
    ],
    breadcrumb: "Expensify Alternative",
  },
  de: {
    title: "Expensify-Alternative: Belege scannen | ScanReceipts",
    description:
      "Auf der Suche nach einer Expensify-Alternative? ScanReceipts macht aus einem Beleg-Foto in Sekunden eine geprüfte Excel-Tabelle — ohne Konto, ohne Setup.",
    keywords: ["expensify deutsch", "alternative zu expensify", "beleg app vergleich"],
    breadcrumb: "Expensify 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 ExpensifyAlternativePage({
  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 ? "Beleg-Foto → geprüfte Excel/CSV in Sekunden" : "Receipt photo → verified Excel/CSV in seconds",
      suite: isDe ? "Komplette Spesen- & Ausgabenverwaltung" : "Full expense-management suite",
    },
    {
      feature: isDe ? "Ohne Konto startklar" : "Usable without an account",
      scan: true,
      suite: false,
    },
    {
      feature: isDe ? "Dual-Sheet Excel mit echten =SUM()-Formeln" : "Dual-sheet Excel with live =SUM() formulas",
      scan: true,
      suite: isDe ? "Unterschiedlich je nach Anbieter" : "Varies by provider",
    },
    {
      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 ? "Genehmigungs-Workflows, Firmenkarten, Erstattung" : "Approval workflows, corporate cards, reimbursement",
      scan: false,
      suite: true,
    },
    {
      feature: isDe ? "CSV-Export" : "CSV export",
      scan: true,
      suite: isDe ? "Nicht der Fokus" : "Not the focus",
    },
    {
      feature: isDe ? "Preismodell" : "Pricing model",
      scan: isDe ? "Flexible Pläne, inkl. Lifetime-Option" : "Flexible plans, including a lifetime option",
      suite: isDe ? "Abo je nach Nutzerzahl/Modul" : "Subscription, often per-seat or per-module",
    },
  ];

  const faqs = isDe
    ? [
        {
          q: "Ist ScanReceipts ein direkter Ersatz für Expensify?",
          a: "Nicht in jedem Fall. Expensify, Dext und Receipt Bank sind breite Ausgabenmanagement-Suiten mit Genehmigungs-Workflows, Firmenkarten-Anbindung und Erstattungsprozessen. ScanReceipts ist bewusst schmaler zugeschnitten: Ein Foto rein, eine geprüfte Excel- oder CSV-Datei raus. Wer genau das braucht — schnelle, korrekte Digitalisierung ohne Verwaltungs-Overhead — bekommt mit ScanReceipts oft den direkteren Weg zum Ergebnis.",
        },
        {
          q: "Kann ich ScanReceipts ohne Konto testen?",
          a: "Ja. Du kannst sofort loslegen, ohne Konto anzulegen — deine Daten liegen dabei in einer Gastsitzung auf dem Server. Für geräteübergreifenden Zugriff kannst du später ein Konto anlegen. 15 Scans pro Monat sind kostenlos.",
        },
        {
          q: "Wie genau ist die Belegerkennung im Vergleich zu klassischen OCR-Scannern?",
          a: "Ein multimodales KI-Modell liest Händler, Datum, Positionen, Mengen und Steuersätze direkt vom Foto. Anschließend prüft eine deterministische TypeScript-Engine jede Summe nach (Netto + MwSt = Brutto, Summe der Positionen = Gesamtbetrag) und markiert Abweichungen zur manuellen Prüfung, statt sie unbemerkt zu übernehmen.",
        },
        {
          q: "Funktioniert ScanReceipts auch auf dem Handy?",
          a: "Ja. ScanReceipts läuft direkt im mobilen Browser, auch in Safari auf dem iPhone – kein App-Download nötig, kein Konto für die ersten Scans.",
        },
        {
          q: "Welches Export-Format sollte ich wählen?",
          a: "Für eigene Auswertungen eignet sich das Dual-Sheet Excel mit fertigen Formeln am besten. Für die Weitergabe an gängige Software ist die CSV (UTF-8 mit BOM, semikolon-getrennt) die sicherere Wahl.",
        },
        {
          q: "Kann ich ScanReceipts parallel zu Expensify nutzen?",
          a: "Ja. Viele behalten die Suite für Team-Freigaben und scannen persönliche oder kleine Stapel hier – ohne Onboarding. Der Export geht danach in Excel, CSV oder in die bestehende Software.",
        },
        {
          q: "Gibt es Genehmigungs-Workflows oder Firmenkarten?",
          a: "Nein, bewusst nicht. Wenn du genau das brauchst, bleibt Expensify oder Dext das richtige Werkzeug. ScanReceipts ist der direkte Weg von Foto zu geprüfter Tabelle.",
        },
      ]
    : [
        {
          q: "Is ScanReceipts a drop-in replacement for Expensify?",
          a: "Not always, and that's by design. Expensify, Dext, and Receipt Bank are broad expense-management suites with approval workflows, corporate-card integrations, and reimbursement processes built in. ScanReceipts is intentionally narrower: a photo goes in, a verified Excel or CSV comes out. If that's the actual job — fast, accurate digitization without the administrative overhead — ScanReceipts is often the more direct path.",
        },
        {
          q: "Can I try ScanReceipts without creating an account?",
          a: "Yes. You can start scanning immediately with no signup — your data stays in a guest session on the server. Create an account later if you need cross-device access. 15 scans per month are free.",
        },
        {
          q: "How accurate is the extraction compared to a traditional OCR scanner?",
          a: "A multimodal AI model reads merchant, date, line items, quantities, and tax rates straight from the photo. A deterministic TypeScript engine then re-verifies every total (net + VAT = gross, line items sum to the total) and flags anything that doesn't reconcile for manual review instead of silently trusting the AI.",
        },
        {
          q: "Does ScanReceipts work on mobile?",
          a: "Yes. ScanReceipts runs right in your mobile browser, including Safari on iPhone – no app download needed, no account required for the first scans.",
        },
        {
          q: "Which export format should I choose?",
          a: "For your own analysis, the dual-sheet Excel workbook with built-in formulas works best. For handing data off to other software, the CSV (UTF-8 with BOM, semicolon-delimited) is the safer choice.",
        },
        {
          q: "Can I run ScanReceipts alongside Expensify?",
          a: "Yes. Plenty of people keep the suite for team approvals and scan personal or small stacks here — no onboarding. The export then goes to Excel, CSV, or the existing software.",
        },
        {
          q: "Are there approval workflows or corporate cards?",
          a: "No, on purpose. If that is what you need, Expensify or Dext stays the right tool. ScanReceipts is the direct path from photo to a verified spreadsheet.",
        },
      ];

  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: EXPENSIFY-ALTERNATIVE" : "COMPARISON: EXPENSIFY 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
                  ? "Expensify-Alternative mit direktem Excel-Export"
                  : "The Expensify Alternative Built Around Receipt-to-Excel Export"}
              </h1>
              <p className="text-base sm:text-lg text-[#475569] leading-relaxed mb-8">
                {isDe
                  ? "Expensify, Dext und Receipt Bank sind mächtige Ausgabenmanagement-Suiten — mit entsprechendem Setup-Aufwand. Wenn du eigentlich nur einen Stapel Belege in eine korrekte, geprüfte Tabelle verwandeln willst, ist ScanReceipts der direktere Weg: ein Foto rein, eine geprüfte Dual-Sheet Excel-Datei oder CSV raus."
                  : "Expensify, Dext, and Receipt Bank are powerful expense-management suites — with the setup effort to match. If what you actually need is to turn a stack of receipts into a correct, verified spreadsheet, ScanReceipts is the more direct route: a photo in, a verified dual-sheet Excel file or CSV out."}
              </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>

        {/* Why look for an alternative */}
        <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 ? "WARUM ÜBERHAUPT WECHSELN?" : "WHY LOOK AT AN ALTERNATIVE?"}
                </span>
              </div>
              <h2 className="font-display text-2xl sm:text-3xl font-bold tracking-tightest text-black mb-6">
                {isDe ? "Zwei unterschiedliche Werkzeuge, zwei unterschiedliche Jobs." : "Two different tools for two different jobs."}
              </h2>
              <div className="space-y-4 text-sm sm:text-base text-[#475569] leading-relaxed">
                {isDe ? (
                  <>
                    <p>
                      Expensify, Dext und Receipt Bank wurden für Unternehmen gebaut, die eine vollständige
                      Ausgabenverwaltung brauchen: Genehmigungsketten, Firmenkreditkarten-Abgleich, Erstattungsläufe,
                      Rollen und Rechte über ganze Teams hinweg. Das ist wertvoll — wenn man diesen Umfang tatsächlich
                      benötigt. Für viele Freelancer, kleine Teams oder alle, die einfach nur schnell einen Stapel
                      Kassenbons und Rechnungen in eine saubere, rechnerisch geprüfte Tabelle verwandeln wollen, ist
                      dieser Umfang jedoch reiner Overhead: mehr Einrichtung, mehr Menüs, mehr Dinge, die man lernen muss,
                      bevor der erste Beleg überhaupt digitalisiert ist.
                    </p>
                    <p>
                      ScanReceipts löst genau ein Problem sehr gut: Belege und Rechnungen so schnell wie möglich in eine
                      korrekte Tabelle bringen. Ein multimodales KI-Modell liest Händler, Datum, Positionen, Mengen und
                      deutsche MwSt-Sätze (7 % und 19 %) direkt vom Foto. Eine deterministische TypeScript-Engine rechnet
                      danach jede Summe nach — Netto plus MwSt muss den Bruttobetrag ergeben, die Positionen müssen sich
                      zur Gesamtsumme addieren — und markiert alles, was nicht aufgeht, statt es stillschweigend zu
                      übernehmen. Das Ergebnis: eine Dual-Sheet Excel-Datei mit echten =SUM()-Formeln, eine
                      CSV oder ein PDF, exportierbar in Sekunden.
                    </p>
                    <p>
                      Wer beides braucht, muss sich nicht entscheiden: Viele Nutzer setzen ScanReceipts als schnellen
                      Erfassungsschritt ein und übergeben den Export anschließend an ihre bestehende
                      Ausgabenmanagement-Software.
                    </p>
                  </>
                ) : (
                  <>
                    <p>
                      Expensify, Dext, and Receipt Bank were built for organizations that need full expense-management
                      infrastructure: approval chains, corporate-card reconciliation, reimbursement runs, and
                      role-based access across entire teams. That's genuinely valuable — if you actually need that
                      scope. But for many freelancers, small teams, or anyone who just wants to turn a stack of
                      receipts and invoices into a clean, mathematically verified spreadsheet, that scope is pure
                      overhead: more setup, more menus, more to learn before the first receipt is even digitized.
                    </p>
                    <p>
                      ScanReceipts solves one problem very well: getting receipts and invoices into a correct
                      spreadsheet as fast as possible. A multimodal AI model reads merchant, date, line items,
                      quantities, and tax rates (including German VAT at 7% and 19%) directly from the photo. A
                      deterministic TypeScript engine then re-verifies every total — net plus VAT must equal the gross
                      amount, line items must sum to the total — and flags anything that doesn't reconcile instead of
                      silently trusting the AI. The result: a dual-sheet Excel file with live =SUM() formulas, a
                      CSV, or a PDF, exportable in seconds.
                    </p>
                    <p>
                      If you need both, you don't have to choose one or the other: plenty of users run ScanReceipts as
                      the fast capture step and hand the export off to their existing expense-management software
                      downstream.
                    </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. Expensify-Suiten." : "ScanReceipts vs. Expensify-Style Suites."}
              </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">
                      {isDe ? "EXPENSIFY / DEXT / RECEIPT BANK" : "EXPENSIFY / DEXT / RECEIPT BANK"}
                    </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
                    ? [
                        "schnell einen Stapel Belege in Excel oder CSV brauchst, ohne Konto anzulegen",
                        "Wert auf eine rechnerisch geprüfte Summe legst statt blindem KI-Vertrauen",
                        "einen CSV-Export (UTF-8, semikolon-getrennt) brauchst",
                        "Bewirtungsbelege mit Trinkgeld und Anlass separat erfassen musst",
                        "keine Genehmigungs-Workflows oder Firmenkarten-Integration brauchst",
                      ]
                    : [
                        "need to turn a stack of receipts into Excel or CSV fast, without creating an account",
                        "care about a mathematically verified total rather than blind AI trust",
                        "need a CSV export (UTF-8, semicolon-delimited)",
                        "need business-meal receipts captured with tip and occasion fields",
                        "don't need approval workflows or corporate-card integration",
                      ]
                  ).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 ? "Eine Suite wie Expensify passt, wenn du..." : "A suite like Expensify fits when you..."}
                </h3>
                <ul className="space-y-2 text-sm text-[#475569]">
                  {(isDe
                    ? [
                        "mehrstufige Genehmigungs-Workflows über ein ganzes Team brauchst",
                        "Firmenkreditkarten direkt mit Transaktionen abgleichen willst",
                        "automatisierte Erstattungsläufe an Mitarbeitende benötigst",
                        "granulare Rollen- und Rechteverwaltung über Abteilungen hinweg brauchst",
                      ]
                    : [
                        "need multi-step approval workflows across an entire team",
                        "want corporate credit cards reconciled directly against transactions",
                        "need automated reimbursement runs to employees",
                        "require granular role-based access across departments",
                      ]
                  ).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>

        {/* Switching without a migration project */}
        <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 ? "WECHSEL OHNE GROSSPROJEKT" : "SWITCH WITHOUT A PROJECT"}
                  </span>
                </div>
                <h2 className="font-display text-2xl sm:text-3xl font-bold tracking-tightest text-black leading-tight">
                  {isDe
                    ? "Du musst Expensify nicht „ablösen“. Du kannst den Erfassungsschritt austauschen."
                    : "You don't have to \"replace\" Expensify. You can swap the capture step."}
                </h2>
              </div>
              <div className="lg:col-span-7 space-y-5 text-[#475569] text-base leading-relaxed">
                <p>
                  {isDe ? (
                    <>
                      Die teuerste Art, eine Suite zu nutzen, ist sie nur als Scanner zu
                      gebrauchen. Genehmigungsstrecken, Firmenkarten und Erstattungen bleiben
                      ungenutzt, das Abo läuft trotzdem. Wenn dein tatsächlicher Job „Foto rein,
                      Tabelle raus“ ist, zahlst du für Infrastruktur, die du nicht anfasst.
                      ScanReceipts ersetzt in dem Fall nicht das Unternehmen – es ersetzt den
                      Schritt, der bei dir sowieso nie in der Suite stattgefunden hat. Wie die
                      Tabelle danach aussieht, steht im Guide{" "}
                      <SeoLink lang={lang} to="excelGuide">
                        Kassenbon in Excel umwandeln
                      </SeoLink>
                      .
                    </>
                  ) : (
                    <>
                      The most expensive way to use a suite is to treat it as a scanner.
                      Approval chains, corporate cards, and reimbursements sit unused; the
                      subscription still runs. If your actual job is "photo in, spreadsheet
                      out," you are paying for infrastructure you never touch. ScanReceipts
                      does not replace the company in that case — it replaces the step that
                      never happened inside the suite anyway. What the sheet looks like
                      afterward is in{" "}
                      <SeoLink lang={lang} to="excelGuide">
                        receipt to Excel
                      </SeoLink>
                      .
                    </>
                  )}
                </p>
                <p>
                  {isDe ? (
                    <>
                      Ein harter Cut ist selten nötig. Viele behalten Expensify oder Dext für
                      das Team und scannen persönliche oder kleine Stapel in ScanReceipts –
                      ohne Konto, ohne Onboarding. Deutsche MwSt-Sätze, Bewirtung mit Trinkgeld
                      und ein CSV, das sich in gängige Programme importieren lässt, sind dabei
                      der praktische Unterschied zu einem US-lastigen Spesen-Workflow. Die
                      Erkennung dahinter erklärt die{" "}
                      <SeoLink lang={lang} to="ocr">
                        Beleg-OCR
                      </SeoLink>
                      . Wer eher Lexoffice als Expensify im Kopf hat, liest die{" "}
                      <SeoLink lang={lang} to="lexoffice">
                        Lexoffice-Alternative
                      </SeoLink>
                      .
                    </>
                  ) : (
                    <>
                      A hard cut is rarely required. Plenty of people keep Expensify or Dext
                      for the team and scan personal or small stacks in ScanReceipts — no
                      account, no onboarding. German VAT rates, meals with tip, and a CSV that
                      imports into common software are the practical difference versus a
                      US-centric expense workflow. The extraction behind that is on{" "}
                      <SeoLink lang={lang} to="ocr">
                        receipt OCR
                      </SeoLink>
                      . If Lexoffice is the tool in your head, not Expensify, read the{" "}
                      <SeoLink lang={lang} to="lexoffice">
                        Lexoffice alternative
                      </SeoLink>
                      .
                    </>
                  )}
                </p>
                <p>
                  {isDe ? (
                    <>
                      Technik, die du verstehen solltest, bevor du einer Suite oder einem
                      Scanner vertraust:{" "}
                      <SeoLink lang={lang} to="ocrBlog">
                        So funktioniert Beleg-OCR wirklich
                      </SeoLink>
                      . Für den Freelancer-Alltag ohne Suite reicht oft der{" "}
                      <SeoLink lang={lang} to="freelancer">
                        Ausgaben-Tracker
                      </SeoLink>
                      .
                    </>
                  ) : (
                    <>
                      The tech you should understand before you trust a suite or a scanner:{" "}
                      <SeoLink lang={lang} to="ocrBlog">
                        how receipt OCR actually works
                      </SeoLink>
                      . For freelance life without a suite, the{" "}
                      <SeoLink lang={lang} to="freelancer">
                        expense tracker
                      </SeoLink>{" "}
                      is often enough.
                    </>
                  )}
                </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 Expensify-Alternative." : "Questions About the Expensify 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, "ocr-receipt-scanner")} className="underline hover:text-black transition-colors">
                    {isDe ? "→ Beleg-OCR" : "→ Receipt OCR"}
                  </Link>
                  <Link href={publicPath(lang, "lexoffice-alternative")} className="underline hover:text-black transition-colors">
                    {isDe ? "→ Lexoffice-Alternative" : "→ Lexoffice 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={["lexoffice", "ocr", "excelGuide", "ocrBlog"]}
            />
          </div>
        </section>
      </main>
      <Footer />
    </div>
  );
}
