"use client";

import React from "react";
import Link from "next/link";
import Image from "next/image";
import {
  FileSpreadsheet,
  ArrowUpRight,
  Sparkles,
  CheckCircle2,
  ChevronRight,
  Cpu,
  FileCheck,
} from "lucide-react";
import { useI18n } from "@/lib/i18n/context";
import { seoCatalog } from "@/lib/seo/catalog";

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

  return (
    <footer className="w-full bg-[#F6F9FF] font-sans text-black relative select-none overflow-hidden">
      {/* 1. Pre-Footer High-Impact Architectural Banner */}
      <div className="w-full bg-white border-b border-[#E2E8F0] py-20 relative">
        <div className="max-w-[1440px] mx-auto px-4 sm:px-8">
          <div className="relative bg-[#F8FAFC] border border-[#CBD5E1] p-8 sm:p-14 overflow-hidden">
            {/* Subtle Architectural Dot Pattern Overlay */}
            <div
              className="absolute inset-0 opacity-[0.35] pointer-events-none"
              style={{
                backgroundImage: `radial-gradient(#94A3B8 1px, transparent 1px)`,
                backgroundSize: "20px 20px",
              }}
            />

            {/* Corner Decorative Crosshairs */}
            <div className="absolute top-2 left-2 font-mono text-xs text-[#94A3B8] select-none">+</div>
            <div className="absolute top-2 right-2 font-mono text-xs text-[#94A3B8] select-none">+</div>
            <div className="absolute bottom-2 left-2 font-mono text-xs text-[#94A3B8] select-none">+</div>
            <div className="absolute bottom-2 right-2 font-mono text-xs text-[#94A3B8] select-none">+</div>

            <div className="relative z-10 flex flex-col lg:flex-row lg:items-center lg:justify-between gap-10">
              <div className="space-y-4 max-w-2xl">
                <div className="inline-flex items-center gap-2 px-3 py-1 bg-white border border-[#E2E8F0] text-[#161C22] font-mono text-[11px] uppercase tracking-caps font-semibold shadow-xs">
                  <Sparkles className="w-3.5 h-3.5 text-black" />
                  <span>{isDe ? "Live Engine Bereit" : "Engine Online"}</span>
                </div>

                <h3 className="font-display text-3xl sm:text-4xl lg:text-5xl font-bold tracking-tight text-black leading-[1.08]">
                  {isDe
                    ? "Schluss mit manuellem Abtippen von Belegen."
                    : "Eliminate manual receipt data entry forever."}
                </h3>

                <p className="text-sm sm:text-base text-[#475569] leading-relaxed max-w-xl">
                  {isDe
                    ? "Vom Foto zur geprüften Dual-Sheet Excel-Tabelle mit echten Formeln und sofortigem CSV- & PDF-Export."
                    : "From photo to a verified Dual-Sheet Excel spreadsheet with live formulas and instant CSV & PDF export."}
                </p>

                {/* Micro-Features Row */}
                <div className="flex flex-wrap items-center gap-4 sm:gap-6 pt-2 font-mono text-xs text-[#475569]">
                  <div className="flex items-center gap-1.5 bg-white/80 border border-[#E2E8F0] px-2.5 py-1">
                    <CheckCircle2 className="w-3.5 h-3.5 text-emerald-600" />
                    <span>{isDe ? "Summen geprüft" : "Totals verified"}</span>
                  </div>
                  <div className="flex items-center gap-1.5 bg-white/80 border border-[#E2E8F0] px-2.5 py-1">
                    <FileCheck className="w-3.5 h-3.5 text-black" />
                    <span>{isDe ? "Dual-Sheet .XLSX" : "Dual-Sheet .XLSX"}</span>
                  </div>
                  <div className="flex items-center gap-1.5 bg-white/80 border border-[#E2E8F0] px-2.5 py-1">
                    <Cpu className="w-3.5 h-3.5 text-black" />
                    <span>{isDe ? "Einzelposten-Blatt" : "Line-item sheet"}</span>
                  </div>
                </div>
              </div>

              {/* Action Buttons */}
              <div className="flex flex-col sm:flex-row items-stretch sm:items-center gap-4 shrink-0">
                <a
                  href="#hero"
                  className="px-8 py-4 bg-black text-white font-mono text-xs uppercase tracking-caps font-bold hover:bg-[#334155] transition-all flex items-center justify-center gap-2 shadow-md group"
                >
                  <span>{isDe ? "Jetzt Belege importieren" : "Ingest Receipts"}</span>
                  <ArrowUpRight className="w-4 h-4 transition-transform group-hover:translate-x-0.5 group-hover:-translate-y-0.5" />
                </a>
                <Link
                  href="/dashboard"
                  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 flex items-center justify-center gap-2 shadow-xs"
                >
                  <FileSpreadsheet className="w-4 h-4" />
                  <span>{isDe ? "Live Dashboard" : "Dashboard"}</span>
                </Link>
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* 2. Main Structured Architectural Columns */}
      <div className="w-full py-20 relative">
        <div className="max-w-[1440px] mx-auto px-4 sm:px-8">
          <div className="grid grid-cols-1 md:grid-cols-12 gap-12 lg:gap-16 pb-20 border-b border-[#E2E8F0]">
            {/* Column 1: Brand Spec */}
            <div className="md:col-span-4 lg:col-span-5 space-y-6">
              <Link href={`/${language}`} className="inline-flex items-center gap-4 group">
                <div className="w-20 h-20 sm:w-24 sm:h-24 bg-white border-2 border-black p-1.5 shadow-lg overflow-hidden flex items-center justify-center transition-transform group-hover:scale-95 shrink-0">
                  <Image
                    src="/icon.png"
                    alt="ScanReceipts Icon"
                    width={96}
                    height={96}
                    className="w-full h-full object-contain"
                  />
                </div>
                <div className="flex flex-col">
                  <span className="font-display font-black text-2xl sm:text-3xl tracking-tight text-black leading-none">
                    SCANRECEIPTS
                  </span>
                  <span className="font-mono text-xs uppercase tracking-caps text-[#475569] font-medium mt-1">
                    Instant AI Receipt & Spreadsheet Engine
                  </span>
                </div>
              </Link>

              <p className="text-xs sm:text-sm text-[#475569] max-w-sm leading-relaxed">
                {isDe
                  ? "Belege auslesen, jede Summe nachrechnen und blitzschnell nach Excel, CSV und PDF exportieren."
                  : "Scan receipts, verify calculations, and export instantly to Excel, CSV, and PDF."}
              </p>

              {/* Export Formats Box */}
              <div className="p-4 bg-white border border-[#E2E8F0] space-y-2 max-w-sm">
                <div className="flex items-center gap-2 font-mono text-xs">
                  <span className="w-2 h-2 bg-black" />
                  <span className="font-bold text-black uppercase tracking-caps">
                    {isDe ? "Export-Formate" : "Export Formats"}
                  </span>
                </div>
                <div className="flex items-center justify-between font-mono text-[11px] text-[#64748B] pt-1 border-t border-[#F1F5F9]">
                  <span>Excel (.xlsx) · CSV · PDF</span>
                  <span>{isDe ? "Dual-Sheet · Berichte" : "Dual-Sheet · Reports"}</span>
                </div>
              </div>
            </div>

            {/* Column 2: Produkt Links */}
            <div className="md:col-span-2 space-y-4 font-mono text-xs">
              <div className="flex items-center gap-2 pb-2 border-b border-[#CBD5E1]">
                <span className="w-1.5 h-1.5 bg-black" />
                <span className="text-black font-bold uppercase tracking-caps">
                  {isDe ? "Produkt" : "Product"}
                </span>
              </div>
              <ul className="space-y-3 text-[#475569]">
                <li>
                  <a href="#features" className="hover:text-black transition-colors flex items-center gap-1 group">
                    <ChevronRight className="w-3 h-3 text-[#CBD5E1] group-hover:text-black transition-colors" />
                    <span>{isDe ? "Features & Engine" : "Features & Engine"}</span>
                  </a>
                </li>
                <li>
                  <a href="#workflow" className="hover:text-black transition-colors flex items-center gap-1 group">
                    <ChevronRight className="w-3 h-3 text-[#CBD5E1] group-hover:text-black transition-colors" />
                    <span>{isDe ? "3-Schritt Workflow" : "Workflow"}</span>
                  </a>
                </li>
                <li>
                  <a href="#comparison" className="hover:text-black transition-colors flex items-center gap-1 group">
                    <ChevronRight className="w-3 h-3 text-[#CBD5E1] group-hover:text-black transition-colors" />
                    <span>{isDe ? "Systemvergleich" : "Comparison"}</span>
                  </a>
                </li>
                <li>
                  <a href="#pricing" className="hover:text-black transition-colors flex items-center gap-1 group">
                    <ChevronRight className="w-3 h-3 text-[#CBD5E1] group-hover:text-black transition-colors" />
                    <span>{isDe ? "Preise & Lizenzen" : "Pricing"}</span>
                  </a>
                </li>
                <li>
                  <a href="#faq" className="hover:text-black transition-colors flex items-center gap-1 group">
                    <ChevronRight className="w-3 h-3 text-[#CBD5E1] group-hover:text-black transition-colors" />
                    <span>{isDe ? "Häufige Fragen" : "FAQ"}</span>
                  </a>
                </li>
                <li>
                  <Link href={seoCatalog.ocr.href(language)} className="hover:text-black transition-colors flex items-center gap-1 group">
                    <ChevronRight className="w-3 h-3 text-[#CBD5E1] group-hover:text-black transition-colors" />
                    <span>{isDe ? "Beleg OCR" : "OCR Receipt Scanner"}</span>
                  </Link>
                </li>
                <li>
                  <Link href={seoCatalog.freelancer.href(language)} className="hover:text-black transition-colors flex items-center gap-1 group">
                    <ChevronRight className="w-3 h-3 text-[#CBD5E1] group-hover:text-black transition-colors" />
                    <span>{isDe ? "Für Selbstständige" : "For Freelancers"}</span>
                  </Link>
                </li>
                <li>
                  <Link href={seoCatalog.expensify.href(language)} className="hover:text-black transition-colors flex items-center gap-1 group">
                    <ChevronRight className="w-3 h-3 text-[#CBD5E1] group-hover:text-black transition-colors" />
                    <span>{isDe ? "Expensify-Alternative" : "Expensify Alternative"}</span>
                  </Link>
                </li>
                <li>
                  <Link href={seoCatalog.lexoffice.href(language)} className="hover:text-black transition-colors flex items-center gap-1 group">
                    <ChevronRight className="w-3 h-3 text-[#CBD5E1] group-hover:text-black transition-colors" />
                    <span>{isDe ? "Lexoffice-Alternative" : "Lexoffice Alternative"}</span>
                  </Link>
                </li>
                <li>
                  <Link href={`/${language}/blog`} className="hover:text-black transition-colors flex items-center gap-1 group">
                    <ChevronRight className="w-3 h-3 text-[#CBD5E1] group-hover:text-black transition-colors" />
                    <span>Blog</span>
                  </Link>
                </li>
              </ul>
            </div>

            {/* Column 3: Dashboard & Plattform */}
            <div className="md:col-span-3 lg:col-span-2 space-y-4 font-mono text-xs">
              <div className="flex items-center gap-2 pb-2 border-b border-[#CBD5E1]">
                <span className="w-1.5 h-1.5 bg-black" />
                <span className="text-black font-bold uppercase tracking-caps">
                  {isDe ? "Plattform" : "Platform"}
                </span>
              </div>
              <ul className="space-y-3 text-[#475569]">
                <li>
                  <Link href="/dashboard" className="hover:text-black transition-colors flex items-center gap-1 group">
                    <ChevronRight className="w-3 h-3 text-[#CBD5E1] group-hover:text-black transition-colors" />
                    <span>{isDe ? "Dashboard Übersicht" : "Dashboard Overview"}</span>
                  </Link>
                </li>
                <li>
                  <Link href="/dashboard/activity" className="hover:text-black transition-colors flex items-center gap-1 group">
                    <ChevronRight className="w-3 h-3 text-[#CBD5E1] group-hover:text-black transition-colors" />
                    <span>{isDe ? "Belegsammlung" : "Activity Log"}</span>
                  </Link>
                </li>
                <li>
                  <Link href="/dashboard/export" className="hover:text-black transition-colors flex items-center gap-1 group">
                    <ChevronRight className="w-3 h-3 text-[#CBD5E1] group-hover:text-black transition-colors" />
                    <span>{isDe ? "Excel / CSV / PDF Export" : "Export Hub"}</span>
                  </Link>
                </li>
                <li>
                  <Link href="/dashboard/settings" className="hover:text-black transition-colors flex items-center gap-1 group">
                    <ChevronRight className="w-3 h-3 text-[#CBD5E1] group-hover:text-black transition-colors" />
                    <span>{isDe ? "Einstellungen" : "Settings"}</span>
                  </Link>
                </li>
                <li>
                  <Link href="/auth/login" className="hover:text-black transition-colors flex items-center gap-1 group">
                    <ChevronRight className="w-3 h-3 text-[#CBD5E1] group-hover:text-black transition-colors" />
                    <span>{isDe ? "Login / Zugang" : "Sign In"}</span>
                  </Link>
                </li>
              </ul>
            </div>

            {/* Column 4: Rechtliches & Datenschutz */}
            <div className="md:col-span-3 space-y-4 font-mono text-xs">
              <div className="flex items-center gap-2 pb-2 border-b border-[#CBD5E1]">
                <span className="w-1.5 h-1.5 bg-black" />
                <span className="text-black font-bold uppercase tracking-caps">
                  {isDe ? "Rechtliches & Datenschutz" : "Legal & Privacy"}
                </span>
              </div>
              <ul className="space-y-3 text-[#475569]">
                <li>
                  <Link href="/terms" className="hover:text-black transition-colors flex items-center gap-1 group">
                    <ChevronRight className="w-3 h-3 text-[#CBD5E1] group-hover:text-black transition-colors" />
                    <span>{isDe ? "Nutzungsbedingungen" : "Terms of Service"}</span>
                  </Link>
                </li>
                <li>
                  <Link href="/privacy" className="hover:text-black transition-colors flex items-center gap-1 group">
                    <ChevronRight className="w-3 h-3 text-[#CBD5E1] group-hover:text-black transition-colors" />
                    <span>{isDe ? "Datenschutzerklärung" : "Privacy Policy"}</span>
                  </Link>
                </li>
                <li>
                  <Link href="/disclaimer" className="hover:text-black transition-colors flex items-center gap-1 group">
                    <ChevronRight className="w-3 h-3 text-[#CBD5E1] group-hover:text-black transition-colors" />
                    <span>{isDe ? "Haftungsausschluss" : "Disclaimer"}</span>
                  </Link>
                </li>
              </ul>
            </div>
          </div>

          {/* 3. Massive Typographic Architectural Watermark */}
          <div className="pt-12 pb-6 overflow-hidden">
            <div className="font-display font-black text-4xl sm:text-6xl md:text-7xl lg:text-8xl tracking-tightest text-[#E2E8F0]/70 select-none uppercase pointer-events-none whitespace-nowrap">
              SCAN-RECEIPTS.APP
            </div>
          </div>

          {/* 4. Bottom Meta Bar */}
          <div className="pt-6 border-t border-[#E2E8F0] flex flex-col sm:flex-row items-center justify-between gap-4 font-mono text-xs text-[#64748B]">
            <div className="flex items-center gap-3">
              <span className="font-semibold text-black">
                © {new Date().getFullYear()} SCAN-RECEIPTS.APP
              </span>
            </div>

            <div className="flex items-center gap-3">
              <span className="px-2.5 py-0.5 bg-white border border-[#E2E8F0] text-black font-bold text-[11px]">
                UTC+1 BERLIN
              </span>
            </div>
          </div>
        </div>
      </div>
    </footer>
  );
}
