"use client";

import React from "react";
import Link from "next/link";
import Image from "next/image";
import {
  ArrowLeft,
  Scale,
  ShieldAlert,
  FileText,
  AlertTriangle,
  Building2,
  Mail,
  CheckCircle2,
} from "lucide-react";
import { useI18n } from "@/lib/i18n/context";
import { LanguageSwitch } from "@/components/common/LanguageSwitch";
import { Footer } from "@/components/landing/Footer";

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

  return (
    <div className="min-h-screen bg-[#F6F9FF] flex flex-col justify-between font-sans text-[#161C22]">
      {/* Top Sticky Header */}
      <header className="sticky top-0 z-40 w-full bg-[#F6F9FF]/95 backdrop-blur-md border-b border-[#E2E8F0]">
        <div className="max-w-[1440px] mx-auto px-4 sm:px-8 h-20 flex items-center justify-between">
          <Link href="/" className="flex items-center gap-3 group">
            <div className="w-10 h-10 bg-white border-2 border-black p-1 shadow-xs overflow-hidden flex items-center justify-center shrink-0 transition-transform group-hover:scale-95">
              <Image
                src="/app-icon-original.png"
                alt="ScanReceipts logo"
                width={40}
                height={40}
                className="w-full h-full object-contain"
                priority
              />
            </div>
            <div className="flex flex-col">
              <span className="font-display font-black text-lg tracking-tight text-black leading-none">
                SCANRECEIPTS
              </span>
              <span className="font-mono text-[10px] uppercase tracking-caps text-[#475569] font-medium mt-0.5">
                Legal Notice & Disclaimers
              </span>
            </div>
          </Link>

          <div className="flex items-center gap-4">
            <LanguageSwitch />
            <Link
              href="/"
              className="hidden sm:inline-flex items-center gap-1.5 font-mono text-xs uppercase tracking-caps px-3 py-2 border border-[#E2E8F0] bg-white text-black hover:border-black transition-colors"
            >
              <ArrowLeft className="w-3.5 h-3.5" />
              <span>{isDe ? "Zur Startseite" : "Back to Home"}</span>
            </Link>
          </div>
        </div>
      </header>

      {/* Main Content Container */}
      <main className="max-w-5xl w-full mx-auto px-4 sm:px-8 py-10 sm:py-16 flex-1">
        {/* Breadcrumb & Meta */}
        <div className="flex flex-wrap items-center justify-between gap-4 mb-8">
          <div className="flex items-center gap-2 font-mono text-xs text-[#64748B] uppercase tracking-caps">
            <Link href="/" className="hover:text-black transition-colors">
              HOME
            </Link>
            <span>/</span>
            <span className="text-black font-bold">LEGAL NOTICE &amp; DISCLAIMER</span>
          </div>

          <div className="flex items-center gap-2 font-mono text-[11px] bg-white border border-[#E2E8F0] px-3 py-1 text-[#475569]">
            <span className="w-2 h-2 rounded-full bg-emerald-500 animate-pulse"></span>
            <span>JURISDICTION: UNITED STATES</span>
          </div>
        </div>

        {/* Hero Title Section */}
        <div className="bg-white border border-[#CBD5E1] p-6 sm:p-10 mb-10 shadow-xs relative overflow-hidden">
          <div
            className="absolute inset-0 opacity-[0.25] pointer-events-none"
            style={{
              backgroundImage: `radial-gradient(#94A3B8 1px, transparent 1px)`,
              backgroundSize: "16px 16px",
            }}
          />

          <div className="relative z-10 space-y-3">
            <div className="inline-flex items-center gap-2 px-2.5 py-1 bg-[#F8FAFC] border border-[#E2E8F0] font-mono text-[11px] uppercase tracking-caps font-semibold text-black">
              <Scale className="w-3.5 h-3.5 text-black" />
              <span>General Legal Disclosure & Disclaimer of Liability</span>
            </div>

            <h1 className="font-display text-3xl sm:text-4xl lg:text-5xl font-black tracking-tight text-black">
              Legal Notice &amp; Disclaimers
            </h1>

            <p className="text-sm sm:text-base text-[#475569] max-w-2xl leading-relaxed">
              Official legal declarations, intellectual property rights, DMCA policy, and liability limitations for the ScanReceipts software platform.
            </p>
          </div>
        </div>

        {/* Content Cards */}
        <div className="space-y-8">
          {/* Card 1: Operator Information */}
          <section className="bg-white border border-[#E2E8F0] p-6 sm:p-8 shadow-xs">
            <div className="flex items-center gap-2 pb-4 mb-6 border-b border-[#E2E8F0]">
              <Building2 className="w-5 h-5 text-black" />
              <h2 className="font-display text-xl sm:text-2xl font-bold text-black">
                1. Operating Entity &amp; Contact
              </h2>
            </div>

            <div className="grid grid-cols-1 md:grid-cols-2 gap-6 text-sm text-[#334155]">
              <div className="space-y-2 bg-[#F8FAFC] border border-[#E2E8F0] p-4">
                <div className="font-mono text-xs uppercase tracking-caps text-[#64748B] font-semibold">
                  Service Provider / Operator
                </div>
                <div className="font-bold text-black text-base">
                  ScanReceipts Systems
                </div>
                <div className="text-xs text-[#64748B]">
                  Online Software Services &amp; Developer Operations
                </div>
                <div className="text-xs text-[#64748B] font-mono pt-2 border-t border-[#E2E8F0]">
                  Governing Law: State of Delaware, USA
                </div>
              </div>

              <div className="space-y-2 bg-[#F8FAFC] border border-[#E2E8F0] p-4">
                <div className="font-mono text-xs uppercase tracking-caps text-[#64748B] font-semibold">
                  Electronic Correspondence
                </div>
                <div className="font-medium text-black">
                  Legal &amp; Operational Inquiries
                </div>
                <div className="text-xs text-[#475569] space-y-1">
                  <div>Legal: <a href="mailto:legal@scan-receipts.app" className="text-black underline font-semibold">legal@scan-receipts.app</a></div>
                  <div>Support: <a href="mailto:support@scan-receipts.app" className="text-black underline font-semibold">support@scan-receipts.app</a></div>
                  <div>Privacy: <a href="mailto:privacy@scan-receipts.app" className="text-black underline font-semibold">privacy@scan-receipts.app</a></div>
                </div>
              </div>
            </div>
          </section>

          {/* Card 2: AI & OCR Inaccuracy Disclaimer */}
          <section className="bg-white border-2 border-black p-6 sm:p-8 shadow-xs space-y-4">
            <div className="flex items-center gap-2 pb-4 border-b border-black">
              <AlertTriangle className="w-5 h-5 text-black" />
              <h2 className="font-display text-xl sm:text-2xl font-black text-black uppercase tracking-tight">
                2. AI Extraction &amp; Calculation Disclaimers
              </h2>
            </div>

            <div className="space-y-3 text-sm text-[#161C22] leading-relaxed">
              <p>
                ScanReceipts utilizes artificial intelligence and machine learning models to parse receipt text, line items, and totals. Artificial intelligence outputs are inherently probabilistic and subject to interpretation errors, arithmetic inaccuracies, and document layout variations.
              </p>
              <p className="p-4 bg-[#F8FAFC] border border-[#CBD5E1] font-mono text-xs text-[#334155] uppercase leading-relaxed font-bold">
                UNDER NO CIRCUMSTANCES SHALL SCANRECEIPTS SYSTEMS BE HELD LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL LOSSES, TAX PENALTIES, BOOKKEEPING DISCREPANCIES, AUDIT FINDINGS, OR FINANCIAL LOSSES RESULTING FROM THE USE OF OR RELIANCE UPON DATA EXTRACTED BY THIS SOFTWARE. USERS RETAIN 100% EXCLUSIVE RESPONSIBILITY FOR VERIFYING ALL FIGURES BEFORE USE.
              </p>
            </div>
          </section>

          {/* Card 3: DMCA / Copyright Policy */}
          <section className="bg-white border border-[#E2E8F0] p-6 sm:p-8 shadow-xs">
            <div className="flex items-center gap-2 pb-4 mb-6 border-b border-[#E2E8F0]">
              <FileText className="w-5 h-5 text-black" />
              <h2 className="font-display text-xl sm:text-2xl font-bold text-black">
                3. Digital Millennium Copyright Act (DMCA) Notice
              </h2>
            </div>

            <div className="space-y-4 text-sm text-[#334155] leading-relaxed">
              <p>
                We respect the intellectual property rights of others. If you believe that any material available on or through the Service infringes upon any copyright you own or control, please send a written notification to our Designated Copyright Agent at <a href="mailto:legal@scan-receipts.app" className="text-black underline font-semibold">legal@scan-receipts.app</a> including:
              </p>
              <ul className="list-disc pl-5 space-y-1 text-xs text-[#475569]">
                <li>Identification of the copyrighted work claimed to have been infringed;</li>
                <li>Identification of the material claimed to be infringing with sufficient detail to locate it;</li>
                <li>Your contact information (name, address, telephone number, email);</li>
                <li>A statement made under penalty of perjury that you have a good faith belief that the disputed use is unauthorized.</li>
              </ul>
            </div>
          </section>

          {/* Card 4: Third-Party Trademarks */}
          <section className="bg-white border border-[#E2E8F0] p-6 sm:p-8 shadow-xs">
            <div className="flex items-center gap-2 pb-4 mb-4 border-b border-[#E2E8F0]">
              <ShieldAlert className="w-5 h-5 text-black" />
              <h2 className="font-display text-xl sm:text-2xl font-bold text-black">
                4. Third-Party Trademarks &amp; Services
              </h2>
            </div>

            <div className="space-y-3 text-sm text-[#334155] leading-relaxed">
              <p>
                Excel is a registered trademark of Microsoft Corporation. Stripe is a registered trademark of Stripe, Inc. All other product names, logos, and brands referenced on this site are property of their respective owners. Mention of third-party trademarks does not imply any affiliation, sponsorship, or endorsement.
              </p>
            </div>
          </section>
        </div>
      </main>

      {/* Standard Landing Footer */}
      <Footer />
    </div>
  );
}
