"use client";

import React, { useState, useEffect, useRef } from "react";
import Image from "next/image";
import { useI18n } from "@/lib/i18n/context";
import {
  Play,
  Pause,
  RotateCcw,
  Sparkles,
  FileSpreadsheet,
  CheckCircle2,
  Scan,
  Cpu,
  Layers,
  ArrowRight,
  ShieldCheck,
  Zap,
  Volume2,
  VolumeX,
} from "lucide-react";
import gsap from "gsap";

interface VideoPreset {
  id: string;
  nameDe: string;
  nameEn: string;
  categoryDe: string;
  categoryEn: string;
  imageSrc: string;
  merchant: string;
  date: string;
  gross: number;
  net: number;
  tax19: number;
  tax7: number;
  itemsCount: number;
  boxes: {
    labelDe: string;
    labelEn: string;
    top: string;
    left: string;
    width: string;
    height: string;
    step: number;
  }[];
}

const PRESETS: VideoPreset[] = [
  {
    id: "fuel",
    nameDe: "Aral Tankstelle (Foto)",
    nameEn: "Aral Gas Station (Photo)",
    categoryDe: "KFZ & Kraftstoff",
    categoryEn: "Fuel & Vehicle",
    imageSrc: "/demo/fuel_receipt.jpg",
    merchant: "ARAL Station Berlin",
    date: "2024-05-27",
    gross: 75.5,
    net: 63.45,
    tax19: 12.05,
    tax7: 0.0,
    itemsCount: 1,
    boxes: [
      { labelDe: "HÄNDLER: ARAL STATION", labelEn: "MERCHANT: ARAL STATION", top: "24%", left: "30%", width: "40%", height: "9%", step: 2 },
      { labelDe: "DATUM: 27.05.2024", labelEn: "DATE: 2024-05-27", top: "44%", left: "30%", width: "40%", height: "5%", step: 2 },
      { labelDe: "SUPER E10: 42,68 Ltr", labelEn: "SUPER E10: 42.68 Ltr", top: "48%", left: "30%", width: "40%", height: "6%", step: 3 },
      { labelDe: "NETTO + MWST 19%", labelEn: "NET + TAX 19%", top: "54%", left: "30%", width: "40%", height: "8%", step: 3 },
      { labelDe: "GESAMT: 75,50 €", labelEn: "TOTAL: 75.50 €", top: "61%", left: "30%", width: "40%", height: "6%", step: 4 },
    ],
  },
  {
    id: "groceries",
    nameDe: "REWE Supermarkt (Foto)",
    nameEn: "REWE Supermarket (Photo)",
    categoryDe: "Verpflegung & 7%/19% Split",
    categoryEn: "Groceries & 7%/19% Split",
    imageSrc: "/demo/groceries_receipt.jpg",
    merchant: "REWE Markt GmbH Berlin",
    date: "2023-10-18",
    gross: 15.22,
    net: 13.51,
    tax19: 1.22,
    tax7: 0.49,
    itemsCount: 5,
    boxes: [
      { labelDe: "HÄNDLER: REWE MARKT", labelEn: "MERCHANT: REWE MARKET", top: "18%", left: "32%", width: "36%", height: "12%", step: 2 },
      { labelDe: "DATUM: 18.10.2023", labelEn: "DATE: 2023-10-18", top: "37%", left: "28%", width: "44%", height: "5%", step: 2 },
      { labelDe: "SPLIT-STEUER ARTIKEL", labelEn: "SPLIT-TAX ITEMS", top: "42%", left: "28%", width: "44%", height: "20%", step: 3 },
      { labelDe: "MWST 7% (0,49€) & 19% (1,22€)", labelEn: "TAX 7% (0.49€) & 19% (1.22€)", top: "66%", left: "28%", width: "44%", height: "6%", step: 3 },
      { labelDe: "ZAHLBETRAG: 15,22 €", labelEn: "TOTAL: 15.22 €", top: "74%", left: "28%", width: "44%", height: "6%", step: 4 },
    ],
  },
  {
    id: "restaurant",
    nameDe: "Trattoria Bewirtung (Foto)",
    nameEn: "Trattoria Restaurant (Photo)",
    categoryDe: "Bewirtung §4 Abs. 5 EStG",
    categoryEn: "Meals & Entertainment",
    imageSrc: "/demo/restaurant_receipt.jpg",
    merchant: "Trattoria Bella Vista München",
    date: "2023-10-12",
    gross: 36.8,
    net: 26.72,
    tax19: 5.08,
    tax7: 0.0,
    itemsCount: 3,
    boxes: [
      { labelDe: "HÄNDLER: TRATTORIA BELLA VISTA", labelEn: "MERCHANT: TRATTORIA BELLA VISTA", top: "18%", left: "30%", width: "40%", height: "10%", step: 2 },
      { labelDe: "DATUM: 12.10.2023", labelEn: "DATE: 2023-10-12", top: "37%", left: "30%", width: "40%", height: "5%", step: 2 },
      { labelDe: "BEWIRTUNG: 2x PIZZA & PELLEGRINO", labelEn: "MEALS: 2x PIZZA & PELLEGRINO", top: "46%", left: "30%", width: "40%", height: "10%", step: 3 },
      { labelDe: "TRINKGELD (TIP): 5,00 €", labelEn: "TIP: 5.00 €", top: "64%", left: "30%", width: "40%", height: "5%", step: 4 },
      { labelDe: "GESAMTBETRAG: 36,80 €", labelEn: "TOTAL AMOUNT: 36.80 €", top: "69%", left: "30%", width: "40%", height: "5%", step: 4 },
    ],
  },
];

const STEPS = [
  { id: 1, label: "01 UPLOAD", titleDe: "Beleg-Upload & Kontrast-Optimierung", titleEn: "Receipt Upload & Contrast Optimization" },
  { id: 2, label: "02 OCR SCAN", titleDe: "Multimodale KI-Vision Laser-Erkennung", titleEn: "Multimodal AI Vision Sweep & Recognition" },
  { id: 3, label: "03 EXTRACTION", titleDe: "Strukturierte Aufschlüsselung & MwSt-Split", titleEn: "Structured Parsing & Tax Split" },
  { id: 4, label: "04 VALIDATION", titleDe: "Deterministischer Math-Check (Netto + MwSt)", titleEn: "Deterministic Math Check (Net + Tax)" },
  { id: 5, label: "05 EXCEL DUAL-SHEET", titleDe: "Generierung der .xlsx mit =SUM() Formeln", titleEn: "Dual-Sheet .xlsx Generation with =SUM() Formulas" },
];

export function InteractiveVideoSimulation() {
  const { language } = useI18n();
  const isDe = language === "de";

  const [activePreset, setActivePreset] = useState<VideoPreset>(PRESETS[0]);
  const [currentStep, setCurrentStep] = useState<number>(1);
  const [isPlaying, setIsPlaying] = useState<boolean>(true);
  const [playbackSpeed, setPlaybackSpeed] = useState<number>(1);
  const [activeExcelTab, setActiveExcelTab] = useState<"summary" | "items">("summary");

  const laserRef = useRef<HTMLDivElement>(null);
  const videoFrameRef = useRef<HTMLDivElement>(null);

  // Auto-play timeline simulation loop
  useEffect(() => {
    if (!isPlaying) return;

    const intervalTime = 2200 / playbackSpeed;
    const interval = setInterval(() => {
      setCurrentStep((prev) => (prev >= 5 ? 1 : prev + 1));
    }, intervalTime);

    return () => clearInterval(interval);
  }, [isPlaying, playbackSpeed]);

  // GSAP Laser Sweep Animation triggered on step changes
  useEffect(() => {
    if (laserRef.current && currentStep === 2) {
      gsap.fromTo(
        laserRef.current,
        { top: "0%", opacity: 1 },
        { top: "100%", opacity: 0.9, duration: 1.6 / playbackSpeed, ease: "power2.inOut" }
      );
    }
  }, [currentStep, playbackSpeed]);

  return (
    <section className="py-20 px-4 sm:px-8 max-w-[1440px] mx-auto w-full font-sans border-b border-[#E2E8F0]">
      {/* Section Header */}
      <div className="flex flex-col md:flex-row md:items-end justify-between mb-10 gap-6">
        <div>
          <div className="flex items-center gap-2 mb-3">
            <span className="w-2.5 h-2.5 bg-black animate-pulse"></span>
            <span className="font-mono text-xs uppercase tracking-caps font-semibold text-[#475569]">
              {isDe ? "INTERAKTIVE VIDEO-SIMULATION // LIVE-EXTRAKTION" : "INTERACTIVE VIDEO SIMULATION // LIVE EXTRACTION"}
            </span>
          </div>
          <h2 className="font-display text-3xl sm:text-4xl md:text-5xl font-bold tracking-tight text-black max-w-2xl leading-[1.08]">
            {isDe
              ? "Sieh zu, wie echte Belege in Sekunden zu Excel werden."
              : "Watch real receipts transform into live Excel in seconds."}
          </h2>
        </div>
        <p className="font-sans text-sm text-[#475569] max-w-md leading-relaxed">
          {isDe
            ? "Erlebe die multimodale KI-Pipeline in Echtzeit an echten Fotos von Tank-, Supermarkt- und Bewirtungsbelegen."
            : "Experience the multimodal AI pipeline in real-time on real photos of fuel, grocery, and restaurant receipts."}
        </p>
      </div>

      {/* Preset Photo Selector */}
      <div className="flex flex-wrap items-center gap-3 mb-6">
        <span className="font-mono text-xs text-[#64748B] uppercase tracking-caps mr-1 hidden sm:inline">
          {isDe ? "BELEG-FOTO:" : "SAMPLE RECEIPT:"}
        </span>
        {PRESETS.map((p) => (
          <button
            key={p.id}
            onClick={() => {
              setActivePreset(p);
              setCurrentStep(1);
            }}
            className={`px-4 py-2 font-mono text-xs uppercase tracking-caps transition-all flex items-center gap-2 border ${
              activePreset.id === p.id
                ? "bg-black text-white border-black font-semibold"
                : "bg-white text-[#475569] border-[#E2E8F0] hover:border-black hover:text-black"
            }`}
          >
            <Scan className="w-3.5 h-3.5" />
            <span>{isDe ? p.nameDe : p.nameEn}</span>
            <span className="text-[10px] opacity-75">({p.gross.toFixed(2)} €)</span>
          </button>
        ))}
      </div>

      {/* Video Simulation Canvas Window */}
      <div
        ref={videoFrameRef}
        className="bg-black text-white border-2 border-black overflow-hidden flex flex-col justify-between shadow-2xl"
      >
        {/* Top Video HUD Controls Bar */}
        <div className="bg-[#161C22] px-4 sm:px-6 py-3 border-b border-white/10 flex flex-wrap items-center justify-between gap-4 font-mono text-xs">
          {/* Left: Play/Pause & Live Step Status */}
          <div className="flex items-center gap-3">
            <button
              onClick={() => setIsPlaying(!isPlaying)}
              className="p-1.5 bg-white text-black hover:bg-slate-200 transition-colors"
              title={isPlaying ? "Pause Simulation" : "Play Simulation"}
            >
              {isPlaying ? <Pause className="w-4 h-4" /> : <Play className="w-4 h-4" />}
            </button>

            <button
              onClick={() => setCurrentStep(1)}
              className="p-1.5 bg-white/10 text-white hover:bg-white/20 transition-colors"
              title="Restart Simulation"
            >
              <RotateCcw className="w-4 h-4" />
            </button>

            <div className="hidden sm:flex items-center gap-2 text-xs">
              <div className="w-2 h-2 bg-emerald-400 animate-pulse"></div>
              <span className="text-white font-bold uppercase tracking-wider">
                {STEPS[currentStep - 1].label}: {isDe ? STEPS[currentStep - 1].titleDe : STEPS[currentStep - 1].titleEn}
              </span>
            </div>
          </div>

          {/* Right: Speed & Telemetry */}
          <div className="flex items-center gap-4 text-[11px] text-[#94A3B8]">
            <button
              onClick={() => setPlaybackSpeed(playbackSpeed === 1 ? 2 : 1)}
              className="px-2 py-1 bg-white/10 text-white border border-white/20 hover:border-white font-mono uppercase"
            >
              Speed: {playbackSpeed}x
            </button>
            <span className="hidden md:inline text-emerald-400">
              FPS: 60 // 4K PIPELINE
            </span>
          </div>
        </div>

        {/* Video Scrubber Steps Bar */}
        <div className="grid grid-cols-5 bg-[#0B0F14] border-b border-white/10">
          {STEPS.map((step) => (
            <button
              key={step.id}
              onClick={() => setCurrentStep(step.id)}
              className={`py-2 px-2 sm:px-3 text-left font-mono text-[10px] transition-all border-r border-white/10 last:border-r-0 ${
                currentStep === step.id
                  ? "bg-white text-black font-bold"
                  : currentStep > step.id
                  ? "bg-white/10 text-emerald-400 font-semibold"
                  : "text-[#64748B] hover:text-white hover:bg-white/5"
              }`}
            >
              <div className="truncate">{step.label}</div>
            </button>
          ))}
        </div>

        {/* Video Main Body (Split View: Real Photo Viewfinder & Live Excel Engine) */}
        <div className="grid grid-cols-1 lg:grid-cols-12 min-h-[500px] bg-[#090D12]">
          {/* Left: Real Photo with Camera Viewfinder & Laser (6 cols) */}
          <div className="lg:col-span-6 p-6 sm:p-8 flex flex-col items-center justify-center relative border-b lg:border-b-0 lg:border-r border-white/10 overflow-hidden select-none">
            {/* Corner Viewfinder Reticles */}
            <div className="absolute top-4 left-4 w-4 h-4 border-t-2 border-l-2 border-emerald-400"></div>
            <div className="absolute top-4 right-4 w-4 h-4 border-t-2 border-r-2 border-emerald-400"></div>
            <div className="absolute bottom-4 left-4 w-4 h-4 border-b-2 border-l-2 border-emerald-400"></div>
            <div className="absolute bottom-4 right-4 w-4 h-4 border-b-2 border-r-2 border-emerald-400"></div>

            {/* Viewfinder Telemetry Overlay */}
            <div className="absolute top-6 left-8 right-8 flex justify-between font-mono text-[10px] text-emerald-400 pointer-events-none z-20">
              <span>REC [●] LIVE FEED</span>
              <span>ISO 100 • 1/500s • 4K</span>
              <span>AI SCAN_ID: #{activePreset.id.toUpperCase()}</span>
            </div>

            {/* Photo Container */}
            <div className="relative w-full max-w-[340px] aspect-[3/4] overflow-hidden border border-white/20 shadow-2xl bg-black">
              {/* Real Photo */}
              <Image
                src={activePreset.imageSrc}
                alt={isDe ? activePreset.nameDe : activePreset.nameEn}
                fill
                priority
                className={`object-cover transition-transform duration-700 ${
                  currentStep >= 2 ? "scale-[1.02]" : "scale-100"
                }`}
              />

              {/* Scanning Laser Line */}
              {currentStep === 2 && (
                <div
                  ref={laserRef}
                  className="absolute left-0 right-0 h-1 bg-emerald-400 z-30 pointer-events-none shadow-[0_0_12px_#34d399]"
                />
              )}

              {/* OCR Bounding Boxes */}
              {currentStep >= 2 &&
                activePreset.boxes.map((box, idx) => (
                  <div
                    key={idx}
                    className={`absolute border transition-all duration-500 z-20 ${
                      currentStep >= box.step
                        ? "border-emerald-400 bg-emerald-400/20 shadow-[0_0_8px_rgba(52,211,153,0.4)]"
                        : "border-transparent"
                    }`}
                    style={{
                      top: box.top,
                      left: box.left,
                      width: box.width,
                      height: box.height,
                    }}
                  >
                    {currentStep >= box.step && (
                      <span className="absolute -top-3.5 left-0 bg-black text-emerald-400 font-mono text-[7.5px] px-1 py-0.2 border border-emerald-400 whitespace-nowrap">
                        {isDe ? box.labelDe : box.labelEn}
                      </span>
                    )}
                  </div>
                ))}
            </div>

            {/* Status Bottom Overlay */}
            <div className="mt-4 font-mono text-[11px] text-[#94A3B8] flex items-center justify-between w-full max-w-[340px]">
              <span className="flex items-center gap-1.5 text-emerald-400">
                <CheckCircle2 className="w-3.5 h-3.5" />
                <span>{isDe ? "Bild optimiert (Sharp Kernel)" : "Image optimized (Sharp Engine)"}</span>
              </span>
              <span>{isDe ? "Summen nachgerechnet" : "Math verified"}</span>
            </div>
          </div>

          {/* Right: Live Dual-Sheet Excel Spreadsheet Screen (6 cols) */}
          <div className="lg:col-span-6 p-6 sm:p-8 bg-[#0D131A] flex flex-col justify-between">
            <div>
              {/* Excel Application Titlebar */}
              <div className="flex items-center justify-between pb-3 mb-4 border-b border-white/10">
                <div className="flex items-center gap-2 font-mono text-xs">
                  <FileSpreadsheet className="w-4 h-4 text-emerald-400" />
                  <span className="font-bold text-white uppercase tracking-wider">
                    EXCELJS DUAL-SHEET GENERATOR (.XLSX)
                  </span>
                </div>
                <span className="font-mono text-[10px] bg-emerald-500/20 text-emerald-300 border border-emerald-500/40 px-2 py-0.5 font-bold">
                  {currentStep >= 4 ? "✓ MATH VALIDATED" : "PROCESSING..."}
                </span>
              </div>

              {/* Sheet Tabs */}
              <div className="flex items-center gap-1 mb-4 border-b border-white/10">
                <button
                  onClick={() => setActiveExcelTab("summary")}
                  className={`px-3 py-1.5 font-mono text-[11px] uppercase tracking-caps transition-colors flex items-center gap-1.5 border-b-2 ${
                    activeExcelTab === "summary"
                      ? "border-emerald-400 text-white font-bold bg-white/5"
                      : "border-transparent text-[#94A3B8] hover:text-white"
                  }`}
                >
                  <Layers className="w-3 h-3 text-emerald-400" />
                  <span>{isDe ? "Sheet 1: Zusammenfassung" : "Sheet 1: Summary"}</span>
                </button>
                <button
                  onClick={() => setActiveExcelTab("items")}
                  className={`px-3 py-1.5 font-mono text-[11px] uppercase tracking-caps transition-colors flex items-center gap-1.5 border-b-2 ${
                    activeExcelTab === "items"
                      ? "border-emerald-400 text-white font-bold bg-white/5"
                      : "border-transparent text-[#94A3B8] hover:text-white"
                  }`}
                >
                  <Layers className="w-3 h-3 text-emerald-400" />
                  <span>{isDe ? "Sheet 2: Einzelpositionen" : "Sheet 2: Line Items"}</span>
                </button>
              </div>

              {/* Formula Bar */}
              <div className="flex items-center gap-2 px-3 py-1.5 bg-[#090D12] border border-white/10 mb-4 font-mono text-xs text-[#94A3B8]">
                <span className="text-emerald-400 font-bold">fx</span>
                <span className="text-white font-semibold">
                  {currentStep >= 4 ? "=SUM(G2:G4)" : "PARSING_INPUT_TOKENS..."}
                </span>
              </div>

              {/* Live Excel Table Grid */}
              <div className="border border-white/10 overflow-x-auto bg-[#090D12]">
                {activeExcelTab === "summary" ? (
                  <table className="w-full text-left font-mono text-xs border-collapse">
                    <thead>
                      <tr className="bg-white/10 text-white border-b border-white/10 text-[10px] uppercase tracking-wider">
                        <th className="p-2 border-r border-white/10">A: ID</th>
                        <th className="p-2 border-r border-white/10">B: {isDe ? "DATUM" : "DATE"}</th>
                        <th className="p-2 border-r border-white/10">C: {isDe ? "HÄNDLER" : "MERCHANT"}</th>
                        <th className="p-2 border-r border-white/10 text-right">D: {isDe ? "NETTO" : "NET"}</th>
                        <th className="p-2 border-r border-white/10 text-right">E: {isDe ? "MWST" : "TAX"}</th>
                        <th className="p-2 text-right">F: {isDe ? "BRUTTO" : "GROSS"}</th>
                      </tr>
                    </thead>
                    <tbody className="divide-y divide-white/10 text-slate-200">
                      {/* Active scanned receipt row with live animated typing effect */}
                      <tr className="bg-emerald-500/10 transition-colors">
                        <td className="p-2 border-r border-white/10 text-[#94A3B8]">
                          REC-001
                        </td>
                        <td className="p-2 border-r border-white/10">
                          {currentStep >= 2 ? activePreset.date : "..."}
                        </td>
                        <td className="p-2 border-r border-white/10 text-white font-semibold">
                          {currentStep >= 2 ? activePreset.merchant : "..."}
                        </td>
                        <td className="p-2 border-r border-white/10 text-right">
                          {currentStep >= 3 ? `${activePreset.net.toFixed(2)} €` : "..."}
                        </td>
                        <td className="p-2 border-r border-white/10 text-right">
                          {currentStep >= 3
                            ? `${(activePreset.tax19 + activePreset.tax7).toFixed(2)} €`
                            : "..."}
                        </td>
                        <td className="p-2 text-right font-bold text-emerald-400">
                          {currentStep >= 4 ? `${activePreset.gross.toFixed(2)} €` : "..."}
                        </td>
                      </tr>

                      {/* Other dummy rows for realistic spreadsheet look */}
                      <tr className="hover:bg-white/5 opacity-60">
                        <td className="p-2 border-r border-white/10 text-[#94A3B8]">REC-002</td>
                        <td className="p-2 border-r border-white/10">2026-08-14</td>
                        <td className="p-2 border-r border-white/10">DB Fahrkarte Berlin</td>
                        <td className="p-2 border-r border-white/10 text-right">41,12 €</td>
                        <td className="p-2 border-r border-white/10 text-right">2,88 € (7%)</td>
                        <td className="p-2 text-right">44,00 €</td>
                      </tr>

                      {/* Total =SUM() row */}
                      <tr className="bg-black text-white font-bold border-t-2 border-emerald-400">
                        <td colSpan={3} className="p-2 border-r border-white/10 uppercase tracking-caps text-emerald-400">
                          {isDe ? "SUMME (FORMEL =SUM)" : "TOTAL (FORMULA =SUM)"}
                        </td>
                        <td className="p-2 border-r border-white/10 text-right">
                          {currentStep >= 4
                            ? `${(activePreset.net + 41.12).toFixed(2)} €`
                            : "..."}
                        </td>
                        <td className="p-2 border-r border-white/10 text-right">
                          {currentStep >= 4
                            ? `${(activePreset.tax19 + activePreset.tax7 + 2.88).toFixed(2)} €`
                            : "..."}
                        </td>
                        <td className="p-2 text-right text-emerald-400 font-extrabold">
                          {currentStep >= 4
                            ? `${(activePreset.gross + 44.0).toFixed(2)} €`
                            : "..."}
                        </td>
                      </tr>
                    </tbody>
                  </table>
                ) : (
                  <table className="w-full text-left font-mono text-xs border-collapse">
                    <thead>
                      <tr className="bg-white/10 text-white border-b border-white/10 text-[10px] uppercase tracking-wider">
                        <th className="p-2 border-r border-white/10">{isDe ? "BELEG" : "RECEIPT"}</th>
                        <th className="p-2 border-r border-white/10">{isDe ? "ARTIKEL" : "ITEM"}</th>
                        <th className="p-2 border-r border-white/10 text-center">{isDe ? "MENGE" : "QTY"}</th>
                        <th className="p-2 border-r border-white/10 text-center">{isDe ? "MWST %" : "TAX %"}</th>
                        <th className="p-2 text-right">{isDe ? "BETRAG" : "AMOUNT"}</th>
                      </tr>
                    </thead>
                    <tbody className="divide-y divide-white/10 text-slate-200">
                      <tr>
                        <td className="p-2 border-r border-white/10 text-[#94A3B8]">
                          {(isDe ? activePreset.nameDe : activePreset.nameEn).split(" ")[0]}
                        </td>
                        <td className="p-2 border-r border-white/10 text-white">
                          {isDe ? "Position 1 (Extrahierter Artikel)" : "Line Item 1 (Extracted)"}
                        </td>
                        <td className="p-2 border-r border-white/10 text-center">1</td>
                        <td className="p-2 border-r border-white/10 text-center">19%</td>
                        <td className="p-2 text-right font-bold text-emerald-400">
                          {activePreset.gross.toFixed(2)} €
                        </td>
                      </tr>
                    </tbody>
                  </table>
                )}
              </div>
            </div>

            {/* Bottom Actions */}
            <div className="mt-6 pt-4 border-t border-white/10 flex flex-col sm:flex-row sm:items-center justify-between gap-4">
              <div className="font-mono text-xs text-[#94A3B8] flex items-center gap-2">
                <ShieldCheck className="w-4 h-4 text-emerald-400" />
                <span>{isDe ? "Dual-Sheet .xlsx · CSV (UTF-8)" : "Dual-Sheet .xlsx · CSV (UTF-8)"}</span>
              </div>

              <a
                href="/dashboard"
                className="px-5 py-2.5 bg-white text-black font-mono text-xs uppercase tracking-caps font-bold hover:bg-slate-200 transition-colors flex items-center justify-center gap-2"
              >
                <span>{isDe ? "Jetzt eigene Belege testen" : "Test Your Own Receipts"}</span>
                <ArrowRight className="w-4 h-4" />
              </a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}
