"use client";

import React from "react";
import { useI18n } from "@/lib/i18n/context";
import {
  FileSpreadsheet,
  CheckCheck,
  Zap,
  Eye,
  UploadCloud,
  FolderKanban,
} from "lucide-react";

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

  const features = [
    {
      id: "01",
      icon: FileSpreadsheet,
      title: isDe ? "Dual-Sheet Excel Engine" : "Dual-Sheet Excel Engine",
      desc: isDe
        ? "Blatt 1 liefert die Übersicht mit echten =SUM() Formeln. Blatt 2 listet alle Einzelartikel, Mengen und Steuersätze auf."
        : "Sheet 1 gives the summary with native =SUM() formulas. Sheet 2 details all individual line items, quantities and taxes.",
      tag: "CORE .XLSX",
    },
    {
      id: "02",
      icon: CheckCheck,
      title: isDe ? "Deterministischer Math-Proof" : "Deterministic Math Cross-Check",
      desc: isDe
        ? "Netto + 7% MwSt + 19% MwSt = Brutto wird auf den Cent genau geprüft. Verhindert KI-Halluzinationen und Kassenfehler."
        : "Net + 7% VAT + 19% VAT = Gross verified down to 0.01€. Eliminates hallucinations and cashier errors.",
      tag: "MATH-CHECK",
    },
    {
      id: "03",
      icon: Zap,
      title: isDe ? "1-Klick Micro-Prompting" : "1-Click Micro-Prompting",
      desc: isDe
        ? "Bei unsicheren Werten genügt ein Klick auf 'Bestätigen'. Kein mühsames manuelles Abtippen mehr nötig."
        : "On ambiguous values, a single tap on 'Confirm' resolves discrepancies immediately.",
      tag: "SPEED",
    },
    {
      id: "04",
      icon: Eye,
      title: isDe ? "Multimodale KI-Vision" : "Multimodal AI Vision",
      desc: isDe
        ? "Liest zerknittertes Thermopapier, verblasste Tankbelege und handbeschriebene Bewirtungsquittungen. Unsichere Werte werden markiert statt geraten."
        : "Parses crumpled thermal paper, faded fuel receipts, and handwritten hospitality bills. Uncertain values get flagged instead of guessed.",
      tag: "AI VISION",
    },
    {
      id: "05",
      icon: UploadCloud,
      title: isDe ? "Stapel-Upload & Multi-Scan" : "Batch Upload & Multi-Scan",
      desc: isDe
        ? "Lade dutzende Belege und Rechnungen gleichzeitig per Drag & Drop hoch. Die KI verarbeitet alle Dokumente parallel und ohne Wartezeiten."
        : "Upload dozens of receipts and invoices at once via drag & drop. The AI processes all documents concurrently without delays.",
      tag: "MULTI-UPLOAD",
    },
    {
      id: "06",
      icon: FolderKanban,
      title: isDe ? "Projekt- & Ausgabenverwaltung" : "Project & Expense Organization",
      desc: isDe
        ? "Ordne Belege Kunden, Projekten oder Kostenstellen zu. Behalte stets den Überblick über Budgets, Zeiträume und Netto-/Bruttosummen."
        : "Assign receipts to clients, projects, or cost centers. Maintain full visibility over budgets, date ranges, and net/gross totals.",
      tag: "PROJECTS",
    },
  ];

  return (
    <section id="features" className="w-full bg-white font-sans py-24 relative">
      <div className="max-w-[1440px] mx-auto px-4 sm:px-8 border-x border-[#E2E8F0] relative">

        {/* Clean Header */}
        <div className="flex flex-col md:flex-row md:items-end justify-between mb-16 gap-6">
          <div>
            <div className="flex items-center gap-2 mb-3">
              <span className="w-2.5 h-2.5 bg-black"></span>
              <span className="font-mono text-xs uppercase tracking-caps font-semibold text-[#475569]">
                {isDe ? "LEISTUNGSMERKMALE & ARCHITEKTUR" : "CORE ARCHITECTURE & FEATURES"}
              </span>
            </div>
            <h2 className="font-display text-3xl sm:text-4xl lg:text-5xl font-bold tracking-tightest text-black max-w-xl">
              {isDe ? "Präzision statt Schätzungen." : "Precision Over Approximations."}
            </h2>
          </div>
          <p className="text-sm text-[#64748B] max-w-md font-sans leading-relaxed">
            {isDe
              ? "Entwickelt für Selbstständige und Unternehmen, die fehlerfreie Excel-Tabellen ohne manuelle Arbeit fordern."
              : "Built for businesses and individuals requiring flawless Excel exports without manual transcription."}
          </p>
        </div>

        {/* 6 Clean Connected Feature Cards */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-px bg-[#E2E8F0] border border-[#E2E8F0]">
          {features.map((item) => {
            const Icon = item.icon;
            return (
              <div
                key={item.id}
                className="group p-8 bg-white hover:bg-[#F8FAFC] transition-colors space-y-4 flex flex-col justify-between"
              >
                <div className="space-y-4">
                  <div className="flex items-center justify-between">
                    <div className="w-10 h-10 bg-[#F8FAFC] border border-[#E2E8F0] flex items-center justify-center text-black group-hover:bg-black group-hover:text-white transition-colors">
                      <Icon className="w-5 h-5" />
                    </div>
                    <span className="font-mono text-[10px] bg-[#EEF4FC] border border-[#E2E8F0] px-2.5 py-1 text-black font-semibold uppercase tracking-wider">
                      {item.tag}
                    </span>
                  </div>

                  <div className="space-y-1.5 pt-2">
                    <h3 className="font-display text-lg font-bold text-black tracking-tight">
                      {item.title}
                    </h3>
                    <p className="text-xs text-[#475569] leading-relaxed">
                      {item.desc}
                    </p>
                  </div>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}
