"use client";

import React from "react";
import { useI18n } from "@/lib/i18n/context";
import { ShieldCheck, CheckCircle2, Zap, FileSpreadsheet } from "lucide-react";

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

  return (
    <section className="w-full bg-white font-sans relative py-14">
      <div className="max-w-[1440px] mx-auto px-4 sm:px-8 border-x border-[#E2E8F0] relative">
        {/* Metric Cards Grid - 3 Columns */}
        <div className="grid grid-cols-1 md:grid-cols-3 gap-4 sm:gap-6 mb-8">
          {/* Card 1: Accuracy */}
          <div className="p-6 bg-[#F8FAFC] border border-[#E2E8F0] hover:border-black transition-all hover:bg-white group">
            <div className="flex items-center justify-between mb-3">
              <span className="font-mono text-[11px] uppercase tracking-caps font-semibold text-[#64748B] group-hover:text-black transition-colors">
                {isDe ? "Summenprüfung" : "Total Check"}
              </span>
              <CheckCircle2 className="w-4 h-4 text-emerald-600" />
            </div>
            <div className="font-display text-3xl sm:text-4xl font-bold text-black tracking-tight mb-1">
              {isDe ? "Cent-genau" : "Cent-exact"}
            </div>
            <p className="text-xs text-[#475569] leading-relaxed">
              {isDe
                ? "Netto + 7% + 19% MwSt wird gegen den Bruttobetrag gerechnet."
                : "Net + 7% + 19% VAT is recalculated against the gross total."}
            </p>
          </div>

          {/* Card 2: Scan Latency / Try */}
          <div className="p-6 bg-[#F8FAFC] border border-[#E2E8F0] hover:border-black transition-all hover:bg-white group">
            <div className="flex items-center justify-between mb-3">
              <span className="font-mono text-[11px] uppercase tracking-caps font-semibold text-[#64748B] group-hover:text-black transition-colors">
                {isDe ? "Zum Testen" : "Free To Try"}
              </span>
              <Zap className="w-4 h-4 text-amber-500" />
            </div>
            <div className="font-display text-3xl sm:text-4xl font-bold text-black tracking-tight mb-1">
              {isDe ? "15 Belege" : "15 receipts"}
            </div>
            <p className="text-xs text-[#475569] leading-relaxed">
              {isDe
                ? "Ohne Anmeldung und ohne Konto direkt im Browser."
                : "No signup, no account – straight in your browser."}
            </p>
          </div>

          {/* Card 3: Excel Engine */}
          <div className="p-6 bg-[#F8FAFC] border border-[#E2E8F0] hover:border-black transition-all hover:bg-white group">
            <div className="flex items-center justify-between mb-3">
              <span className="font-mono text-[11px] uppercase tracking-caps font-semibold text-[#64748B] group-hover:text-black transition-colors">
                {isDe ? "Excel Engine" : "Excel Engine"}
              </span>
              <FileSpreadsheet className="w-4 h-4 text-[#161C22]" />
            </div>
            <div className="font-display text-3xl sm:text-4xl font-bold text-black tracking-tight mb-1">
              Dual-Sheet
            </div>
            <p className="text-xs text-[#475569] leading-relaxed">
              {isDe
                ? "Zusammenfassung + Einzelpositionen mit =SUM() Formeln."
                : "Master summary + line items with live =SUM() formulas."}
            </p>
          </div>
        </div>

        {/* Technical Standard Compliance Bar */}
        <div className="pt-6 border-t border-[#E2E8F0] flex flex-wrap items-center justify-between gap-6 text-xs text-[#64748B] font-mono">
          <div className="flex items-center gap-2">
            <ShieldCheck className="w-4 h-4 text-black" />
            <span className="uppercase tracking-wider font-semibold text-black">
              {isDe ? "Jede Summe nachgerechnet: Netto + MwSt = Brutto" : "Every total recalculated: net + VAT = gross"}
            </span>
          </div>
          <div className="flex items-center gap-6 sm:gap-8 uppercase tracking-wider text-[11px]">
            <span className="flex items-center gap-1.5 font-medium text-[#475569]">
              <CheckCircle2 className="w-3.5 h-3.5 text-black" />
              Native .XLSX Formulas
            </span>
            <span className="flex items-center gap-1.5 font-medium text-[#475569]">
              <CheckCircle2 className="w-3.5 h-3.5 text-black" />
              ISO 8601 Dates
            </span>
            <span className="flex items-center gap-1.5 font-medium text-[#475569]">
              <CheckCircle2 className="w-3.5 h-3.5 text-black" />
              UTF-8 BOM CSV
            </span>
          </div>
        </div>
      </div>
    </section>
  );
}
