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 = "expense-tracker-freelancers" as const;

const copy = {
  de: {
    title: "Ausgaben-Tracker für Freelancer | ScanReceipts",
    description:
      "Ausgaben-Tracker für Selbstständige und Freelancer: Belege fotografieren, KI liest sie aus, Export als geprüfte Excel-Tabelle oder CSV.",
    keywords: [
      "ausgaben tracker selbstständige",
      "ausgaben app freiberufler",
      "belege scannen selbstständige",
      "receipt tracker app",
      "kassenbon scanner freelancer",
    ],
    breadcrumbHome: "Start",
    breadcrumbCurrent: "Ausgaben-Tracker für Selbstständige",
  },
  en: {
    title: "Expense Tracker for Freelancers | ScanReceipts",
    description:
      "The expense tracker built for freelancers and the self-employed: photograph a receipt, AI reads it, and export a verified Excel sheet or CSV.",
    keywords: [
      "expense tracker for freelancers",
      "receipt tracker app for freelancers",
      "receipt tracker app",
      "small business expense tracker",
      "track business expenses",
    ],
    breadcrumbHome: "Home",
    breadcrumbCurrent: "Expense Tracker for Freelancers",
  },
} 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-review-table.png`, width: 1914, height: 909 }],
    },
    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 ExpenseTrackerFreelancersPage({
  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: "Für wen ist der Ausgaben-Tracker gedacht?",
          a: "Für Freelancer, Kleinunternehmer, Handwerker und Privatpersonen gleichermaßen – überall dort, wo Belege schnell erfasst und übersichtlich exportiert werden sollen, ohne eine komplette Software einzurichten.",
        },
        {
          q: "Was ist der Unterschied zu einer Excel-Vorlage?",
          a: "Eine Vorlage verlangt, dass du jede Zahl selbst eintippst. ScanReceipts liest Händler, Datum, Betrag und Steuersatz direkt aus dem Beleg-Foto aus und trägt sie automatisch ein – die Vorlage bleibt leer, bis du sie brauchst.",
        },
        {
          q: "Welche Export-Formate gibt es?",
          a: "Dual-Sheet Excel (.xlsx) mit echten =SUM()-Formeln, eine schlanke CSV-Datei (auch tabellenfreundlich: UTF-8 mit BOM, semikolon-getrennt) oder ein PDF-Bericht – je nachdem, was du gerade brauchst.",
        },
        {
          q: "Sind meine Belege sicher gespeichert?",
          a: "Ja. Ohne Konto bleiben deine Daten lokal im Browser gespeichert. Mit Konto werden Belege sicher gespeichert und sind ausschließlich über dein Konto abrufbar – wir geben deine Daten nicht an Dritte weiter.",
        },
        {
          q: "Was kostet ScanReceipts?",
          a: "15 Scans pro Monat sind kostenlos, ganz ohne Konto. Für unbegrenzte Scans und geräteübergreifenden Zugriff gibt es flexible Pläne, inklusive einer Lifetime-Option.",
        },
        {
          q: "Ersetzt das Lexoffice oder meine Steuerberaterin?",
          a: "Nein. ScanReceipts digitalisiert und prüft Belege, damit du eine saubere Tabelle hast. Ausgangsrechnungen, USt-Voranmeldung und die steuerliche Einordnung bleiben bei deiner Rechnungssoftware bzw. deiner Beratung. Viele nutzen beides: scannen hier, verbuchen dort.",
        },
        {
          q: "Wie gehe ich mit Bewirtungsbelegen um?",
          a: "Trinkgeld und Anlass werden automatisch mit erfasst, sobald sie auf dem Beleg stehen oder als Feld vorgesehen sind. Genau diese zwei Angaben fehlen beim Abtippen am häufigsten und machen die eigene Dokumentation lückenhaft.",
        },
      ]
    : [
        {
          q: "Who is this expense tracker for?",
          a: "Freelancers, small business owners, tradespeople, and private individuals alike – anywhere receipts need to be captured quickly and exported cleanly, without setting up a full piece of software.",
        },
        {
          q: "How is this different from an Excel template?",
          a: "A template still requires you to type in every number yourself. ScanReceipts reads merchant, date, amount, and tax rate straight off the receipt photo and fills them in automatically – no typing required.",
        },
        {
          q: "What export formats are available?",
          a: "A dual-sheet Excel workbook (.xlsx) with live =SUM() formulas, a lean CSV file (also spreadsheet-friendly: UTF-8 with BOM, semicolon-delimited), or a PDF report – whichever fits what you need it for.",
        },
        {
          q: "Is my receipt data stored securely?",
          a: "Yes. Without an account, your data stays local in your browser. With an account, receipts are stored securely and are only accessible through your account – we never share your data with third parties.",
        },
        {
          q: "What does ScanReceipts cost?",
          a: "15 scans a month are free, no account required. For unlimited scans and cross-device access, flexible plans are available, including a lifetime option.",
        },
        {
          q: "Does this replace Lexoffice or my accountant?",
          a: "No. ScanReceipts digitizes and verifies receipts so you have a clean spreadsheet. Issuing invoices, VAT filings, and tax treatment stay with your invoicing software or advisor. Plenty of people use both: scan here, post there.",
        },
        {
          q: "How do business-meal receipts work?",
          a: "Tip and occasion are captured automatically when they appear on the slip or as dedicated fields. Those two details are the ones most often skipped when typing by hand, and they leave your own records incomplete.",
        },
      ];

  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 ? "FÜR SELBSTSTÄNDIGE & FREELANCER" : "FOR FREELANCERS & THE SELF-EMPLOYED"}
              </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
                ? "Ausgaben-Tracker für Selbstständige & Freelancer"
                : "Expense Tracker Built for Freelancers & the Self-Employed"}
            </h1>
            <p className="mt-6 text-base sm:text-lg text-[#475569] max-w-2xl leading-relaxed">
              {isDe
                ? "Belege fotografieren statt abtippen. Eine KI liest jeden Kassenbon und jede Rechnung aus, eine Nachrechnung prüft jede Summe, und am Ende steht eine fertige Excel-Tabelle oder CSV-Datei bereit – ohne Abtippen, ohne Konto nötig."
                : "Photograph receipts instead of typing them. AI reads every receipt and invoice, a math check verifies every total, and you end up with a finished Excel sheet or CSV file – no typing, no account required."}
            </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 starten" : "Start Tracking Free"}
              </Link>
              <Link
                href={publicPath(lang, "blog/receipt-scanning-vs-manual-bookkeeping")}
                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 ? "Scannen vs. manuelles Abtippen" : "Scanning vs. Manual Data Entry"}
              </Link>
            </div>
            <div className="mt-12 overflow-hidden border border-[#E2E8F0]">
              <Image
                src="/screenshot-review-table.png"
                alt={isDe ? "Screenshot: Beleg-Übersicht im Dashboard mit Prüfhinweis und Export-Buttons" : "Screenshot: the receipt overview dashboard with a review flag and export buttons"}
                width={1914}
                height={909}
                className="w-full h-auto"
                priority
              />
            </div>
          </div>
        </section>

        {/* The pain point */}
        <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 ? "DAS PROBLEM" : "THE PROBLEM"}
                  </span>
                </div>
                <h2 className="font-display text-3xl sm:text-4xl font-bold tracking-tightest text-black leading-tight">
                  {isDe
                    ? "Der Schuhkarton voller Belege am Monatsende."
                    : "The shoebox full of receipts at month-end."}
                </h2>
              </div>
              <div className="lg:col-span-7 space-y-5 text-[#475569] text-base leading-relaxed">
                <p>
                  {isDe
                    ? "Als Selbstständiger oder Freelancer kennst du das Muster: Tankquittungen, Büromaterial, Geschäftsessen und Software-Abos sammeln sich über Wochen an, bis am Monatsende ein Stapel Belege vor dir liegt. Jeden einzelnen von Hand in eine Excel-Tabelle abzutippen kostet Zeit, die du eigentlich für zahlende Kunden brauchst – und ist genau die Art von Arbeit, die niemand freiwillig macht."
                    : "If you're self-employed or freelancing, you know the pattern: gas receipts, office supplies, business meals and software subscriptions pile up over weeks until you're staring at a stack of paper at month-end. Typing each one into a spreadsheet by hand eats time you'd rather spend on billable client work – and it's exactly the kind of task nobody does voluntarily."}
                </p>
                <p>
                  {isDe
                    ? "Je länger ein Beleg liegen bleibt, desto größer das Risiko: Thermopapier verblasst, der Zettel geht in der Jackentasche verloren, oder du erinnerst dich Wochen später nicht mehr, wofür eine bestimmte Ausgabe eigentlich war. Was als kleiner Papierkram beginnt, wird so schnell zu einer lückenhaften Ausgabenübersicht."
                    : "The longer a receipt sits around, the bigger the risk: thermal paper fades, the slip gets lost in a jacket pocket, or weeks later you simply can't remember what a particular expense was even for. What starts as a small pile of paper quickly turns into an expense record full of gaps."}
                </p>
                <p>
                  {isDe
                    ? "Genau dieses Problem löst ein Ausgaben-Tracker, der Belege sofort beim Fotografieren digitalisiert – noch am Ort des Geschehens, bevor der Zettel verloren geht oder verblasst."
                    : "That's exactly the problem a receipt tracker app solves by digitizing expenses the moment you photograph them – right where the purchase happened, before the slip gets lost or fades."}
                </p>
              </div>
            </div>
          </div>
        </section>

        {/* How it fits the workflow */}
        <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 ? "SO PASST ES IN DEINEN WORKFLOW" : "HOW IT FITS YOUR WORKFLOW"}
                </span>
              </div>
              <h2 className="font-display text-3xl sm:text-4xl font-bold tracking-tightest text-black">
                {isDe ? "Vom Beleg zur fertigen Excel-Tabelle in drei Schritten." : "From receipt to finished spreadsheet in three steps."}
              </h2>
            </div>

            <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
              {[
                {
                  n: "01",
                  title: isDe ? "Foto machen" : "Snap a photo",
                  text: isDe
                    ? "Direkt nach dem Kauf mit dem Handy fotografieren – kein Konto nötig, alles läuft sofort lokal im Browser."
                    : "Photograph it on your phone right after the purchase – no account needed, everything runs locally in your browser first.",
                },
                {
                  n: "02",
                  title: isDe ? "KI liest & prüft" : "AI reads & verifies",
                  text: isDe
                    ? "Händler, Datum, Artikel und Steuersätze werden erkannt, eine deterministische Nachrechnung bestätigt jede Summe."
                    : "Merchant, date, line items and tax rates are extracted, and a deterministic check confirms every total.",
                },
                {
                  n: "03",
                  title: isDe ? "Exportieren & weiterverwenden" : "Export & reuse",
                  text: isDe
                    ? "Als Dual-Sheet Excel-Datei mit Formeln, als CSV oder als PDF – fertig zum Ablegen, Weiterrechnen oder Teilen."
                    : "As a dual-sheet Excel file with live formulas, a CSV, or a PDF – ready to file, calculate with, or share.",
                },
              ].map((step) => (
                <div key={step.n} className="p-6 border border-[#E2E8F0] bg-[#F8FAFC]">
                  <span className="font-mono text-xs text-[#94A3B8]">{step.n}</span>
                  <h3 className="font-display text-lg font-bold text-black mt-2 mb-2">{step.title}</h3>
                  <p className="text-sm text-[#475569] leading-relaxed">{step.text}</p>
                </div>
              ))}
            </div>
          </div>
        </section>

        {/* Export formats */}
        <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 ? "EXPORT-FORMATE" : "EXPORT FORMATS"}
                  </span>
                </div>
                <h2 className="font-display text-3xl sm:text-4xl font-bold tracking-tightest text-black leading-tight">
                  {isDe
                    ? "Ein Format, das wirklich zu deinen Zahlen passt."
                    : "A format that actually fits your numbers."}
                </h2>
              </div>
              <div className="lg:col-span-7 space-y-5 text-[#475569] text-base leading-relaxed">
                <p>
                  {isDe
                    ? "Jeder gescannte Beleg lässt sich als Dual-Sheet Excel-Datei (.xlsx) mit echten =SUM()-Formeln, als schlanke CSV-Datei oder als PDF-Bericht exportieren – je nachdem, was du gerade brauchst."
                    : "Every scanned receipt can be exported as a dual-sheet Excel workbook (.xlsx) with live =SUM() formulas, a lean CSV file, or a PDF report – whichever fits what you need it for."}
                </p>
                <p>
                  {isDe
                    ? "Die CSV-Variante ist tabellenfreundlich formatiert: UTF-8 mit BOM kodiert (damit Umlaute korrekt erscheinen) und semikolon-getrennt (damit Beträge im deutschen Zahlenformat nicht zerrissen werden), mit sauber aufgeschlüsselten Netto-, Steuer- und Bruttobeträgen je Beleg. Das ist reines Dateiformat – keine steuerliche Einordnung oder Beratung, nur ein Export, der sich sauber in gängige Tabellenkalkulationsprogramme importieren lässt."
                    : "The CSV variant is formatted to be spreadsheet-friendly: UTF-8 encoded with a BOM (so umlauts render correctly) and semicolon-delimited (so amounts in German number format don't get split apart), with net, tax and gross amounts cleanly broken out per receipt. That's purely a file-format choice – not tax categorization or advice, just an export that imports cleanly into common spreadsheet programs."}
                </p>
                <p>
                  {isDe
                    ? "Weil jede Summe vorher durch den Math-Check gelaufen ist, kannst du dich beim Weiterverarbeiten auf die Zahlen verlassen, statt jede Zeile von Hand gegenzuprüfen."
                    : "Because every total has already passed through the math check, you can trust the numbers when you reuse them, instead of manually re-checking every row."}
                </p>
              </div>
            </div>
          </div>
        </section>

        {/* Who it's for */}
        <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 ? "GEBAUT FÜR" : "BUILT FOR"}
                </span>
              </div>
              <h2 className="font-display text-3xl sm:text-4xl font-bold tracking-tightest text-black">
                {isDe ? "Egal wie du arbeitest." : "Whatever kind of work you do."}
              </h2>
            </div>
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
              {[
                {
                  title: isDe ? "Freiberufler" : "Freelancers",
                  text: isDe
                    ? "Design, Beratung, Texten – Ausgaben für Software, Coworking und Reisen im Griff behalten."
                    : "Design, consulting, writing – stay on top of software, coworking and travel expenses.",
                },
                {
                  title: isDe ? "Kleinunternehmer" : "Small business owners",
                  text: isDe
                    ? "Betriebsausgaben aller Art erfassen, ohne eine separate Tabellenkalkulations-Vorlage zu bauen."
                    : "Capture every kind of business expense without building a separate spreadsheet template.",
                },
                {
                  title: isDe ? "Handwerker & Dienstleister" : "Trades & service providers",
                  text: isDe
                    ? "Materialbelege direkt auf der Baustelle fotografieren, statt sie am Feierabend zu sortieren."
                    : "Photograph material receipts right on site instead of sorting them after hours.",
                },
                {
                  title: isDe ? "Nebenberuflich Selbstständige" : "Side-hustle entrepreneurs",
                  text: isDe
                    ? "Wenig Zeit, klare Ausgaben – schnelle Erfassung neben dem Hauptjob."
                    : "Little time, clear expenses – fast capture alongside a day job.",
                },
              ].map((item) => (
                <div key={item.title} className="p-6 border border-[#E2E8F0]">
                  <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>

        {/* A realistic freelance month */}
        <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 ? "EIN TYPISCHER MONAT" : "A TYPICAL MONTH"}
                  </span>
                </div>
                <h2 className="font-display text-3xl sm:text-4xl font-bold tracking-tightest text-black leading-tight">
                  {isDe
                    ? "Tankbeleg, Bewirtung, SaaS-PDF – derselbe Ablauf."
                    : "Fuel slip, client meal, SaaS PDF — same loop."}
                </h2>
              </div>
              <div className="lg:col-span-7 space-y-5 text-[#475569] text-base leading-relaxed">
                <p>
                  {isDe ? (
                    <>
                      Ein realistischer Freelancer-Monat ist selten „nur Kassenbons“. Montag
                      Tankquittung nach einem Kundentermin, Mittwoch ein Geschäftsessen mit
                      Trinkgeld und Anlass, Freitag die Adobe-Rechnung als PDF, dazu
                      Coworking, Material, vielleicht ein Bahnticket. Wenn jedes Dokument in
                      einem anderen Tool landet, baust du am Monatsende die Übersicht von Hand
                      zusammen. ScanReceipts hält denselben Stapel in einer Liste – Foto für
                      Papier, Upload für PDF. Den ehrlichen Zeitvergleich zum Abtippen findest
                      du unter{" "}
                      <SeoLink lang={lang} to="scanningVsManual">
                        Kassenbon scannen statt abtippen
                      </SeoLink>
                      .
                    </>
                  ) : (
                    <>
                      A realistic freelance month is rarely "just till slips." Monday a fuel
                      receipt after a client visit, Wednesday a business meal with tip and
                      occasion, Friday the Adobe invoice as a PDF, plus coworking, materials,
                      maybe a train ticket. If each document lives in a different tool, you
                      rebuild the overview by hand at month-end. ScanReceipts keeps the same
                      stack in one list — photo for paper, upload for PDF. The honest time
                      comparison against typing is in{" "}
                      <SeoLink lang={lang} to="scanningVsManual">
                        receipt scanning vs. manual data entry
                      </SeoLink>
                      .
                    </>
                  )}
                </p>
                <p>
                  {isDe ? (
                    <>
                      Bewirtungsbelege sind der Punkt, an dem viele Tracker dünn werden: Ohne
                      Trinkgeld und Anlass ist der Scan als Einkauf vollständig und als
                      Dokumentation lückenhaft. Reise- und Abo-Rechnungen brauchen oft
                      Rechnungsnummer und einen anderen Steuersatz als der Supermarktbon. Ein
                      Scanner, der diese Typen nicht kennt, zwingt dich zurück zum Tippen –
                      genau der Schritt, den du loswerden wolltest. Wie du die Gewohnheit hältst,
                      ohne 20 Kategorien zu pflegen, steht unter{" "}
                      <SeoLink lang={lang} to="simpleTracking">
                        einfache Ausgabenverfolgung
                      </SeoLink>
                      .
                    </>
                  ) : (
                    <>
                      Business-meal receipts are where many trackers go thin: without tip and
                      occasion the scan is complete as a purchase and incomplete as a record.
                      Travel and subscription invoices often need an invoice number and a
                      different tax treatment than a grocery slip. A scanner that does not know
                      those types pushes you back to typing — the step you were trying to drop.
                      How to keep the habit without maintaining 20 categories is in{" "}
                      <SeoLink lang={lang} to="simpleTracking">
                        simple expense tracking
                      </SeoLink>
                      .
                    </>
                  )}
                </p>
                <p>
                  {isDe ? (
                    <>
                      Was dieser Tracker nicht ist: eine vollständige Rechnungssoftware. Wenn du
                      Ausgangsrechnungen schreibst oder die USt-Voranmeldung direkt vorbereiten
                      willst, bleibt Lexoffice oder sevDesk das richtige Werkzeug – ScanReceipts
                      kann davor der schnelle Erfassungsschritt sein. Den Vergleich gibt es auf
                      der{" "}
                      <SeoLink lang={lang} to="lexoffice">
                        Lexoffice-Alternative
                      </SeoLink>
                      . Die Erkennung selbst erklärt die{" "}
                      <SeoLink lang={lang} to="ocr">
                        Beleg-OCR-Seite
                      </SeoLink>
                      .
                    </>
                  ) : (
                    <>
                      What this tracker is not: a full invoicing platform. If you issue client
                      invoices or want to prepare VAT filings directly, Lexoffice or sevDesk
                      stays the right tool — ScanReceipts can sit in front as the fast capture
                      step. That comparison is on the{" "}
                      <SeoLink lang={lang} to="lexoffice">
                        Lexoffice alternative
                      </SeoLink>
                      . The extraction itself is on the{" "}
                      <SeoLink lang={lang} to="ocr">
                        receipt OCR page
                      </SeoLink>
                      .
                    </>
                  )}
                </p>
              </div>
            </div>
          </div>
        </section>

        {/* FAQ */}
        <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 ? "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 zum Ausgaben-Tracker." : "Questions About the Expense Tracker."}
              </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">
          <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 ? "Fang mit deinem nächsten Beleg an." : "Start with your very next receipt."}
            </h2>
            <p className="text-[#475569] max-w-xl mx-auto mb-8 leading-relaxed">
              {isDe
                ? "15 Scans pro Monat kostenlos, sofort einsatzbereit ohne Konto. Für den geräteübergreifenden Zugriff und unbegrenzte Scans stehen flexible Pläne inklusive Lifetime-Option bereit."
                : "15 free scans per month, ready to use instantly without an account. For cross-device access and unlimited scans, flexible plans including a lifetime option are available."}
            </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 ? "Ausgaben jetzt erfassen" : "Track Your Expenses Now"}
            </Link>
            <div className="mt-10 max-w-5xl mx-auto text-left">
              <RelatedReading
                lang={lang}
                keys={["scanningVsManual", "simpleTracking", "lexoffice", "ocr"]}
              />
            </div>
          </div>
        </section>
      </main>
      <Footer />
    </div>
  );
}
