"use client";

import React from "react";
import { useI18n } from "@/lib/i18n/context";
import { Check, X } from "lucide-react";

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

  const rows = [
    {
      feature: "Dual-Sheet Excel Export (.xlsx)",
      scan: true,
      manual: isDe ? "Manuell anlegen" : "Create manually",
    },
    {
      feature: isDe ? "Echte native =SUM() Formeln" : "Live Native =SUM() Formulas",
      scan: true,
      manual: isDe ? "Selbst anlegen" : "Build yourself",
    },
    {
      feature: isDe ? "Deterministischer Math-Check (Netto + MwSt)" : "Deterministic Math Cross-Check",
      scan: true,
      manual: isDe ? "Selbst prüfen" : "Check yourself",
    },
    {
      feature: isDe ? "Einzelpositionen & Mengen extrahieren" : "Itemized Line Items & Quantities",
      scan: true,
      manual: isDe ? "Zeitaufwändig" : "Time consuming",
    },
    {
      feature: isDe ? "CSV (Semikolon, Dezimalkomma)" : "CSV (semicolon, decimal commas)",
      scan: true,
      manual: isDe ? "Formatierungsfehler" : "Formatting errors",
    },
    {
      feature: isDe ? "Keine Weitergabe an Dritte" : "Never Sold to Third Parties",
      scan: true,
      manual: isDe ? "Lokal / selbst verwaltet" : "Local / self-managed",
    },
    {
      feature: isDe ? "1-Klick Instant Gast-Zugang (Kein Zwangszugang)" : "1-Click Instant Guest Access",
      scan: true,
      manual: isDe ? "Nicht relevant" : "Not applicable",
    },
  ];

  return (
    <section id="comparison" className="w-full bg-[#F6F9FF] font-sans py-20 relative">
      <div className="max-w-[1440px] mx-auto px-4 sm:px-8 border-x border-[#E2E8F0] relative">
        <div className="mb-14 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 ? "SYSTEMVERGLEICH" : "FEATURE COMPARISON"}
            </span>
          </div>
          <h2 className="font-display text-3xl sm:text-4xl lg:text-5xl font-bold tracking-tightest text-black">
            {isDe ? "ScanReceipts vs. manuelle Excel-Eingabe." : "ScanReceipts vs. Manual Excel Entry."}
          </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-1/2">
                  {isDe ? "Funktion / Leistungsmerkmal" : "Capability / Feature"}
                </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-1/4 text-center">
                  SCANRECEIPTS (.APP)
                </th>
                <th className="p-4 sm:p-5 font-mono text-xs uppercase tracking-caps text-[#64748B] w-1/4 text-center">
                  {isDe ? "Manuelle Tabellenkalkulation" : "Manual Excel Entry"}
                </th>
              </tr>
            </thead>
            <tbody className="divide-y divide-[#E2E8F0] text-sm">
              {rows.map((row) => (
                <tr key={row.feature} 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">
                    <span className="inline-flex items-center gap-1 font-mono text-xs text-black font-bold">
                      <Check className="w-4 h-4 text-emerald-600 stroke-[3]" />
                      <span>{isDe ? "JA" : "YES"}</span>
                    </span>
                  </td>
                  <td className="p-4 sm:p-5 text-center text-xs text-[#64748B] font-mono">
                    {typeof row.manual === "boolean" ? (
                      row.manual ? <Check className="w-4 h-4 text-emerald-600 mx-auto" /> : <X className="w-4 h-4 text-red-400 mx-auto" />
                    ) : (
                      <span>{row.manual}</span>
                    )}
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </section>
  );
}
