import { Button } from '@/components/ui/button'
import Link from 'next/link'
import { ArrowRight, CheckCircle2, ShoppingCart, Utensils, Layers } from 'lucide-react'
import { Navbar } from '@/components/Navbar'

export default function Home() {
  return (
    <>
      {/* Hero Section: Zielgerichtet auf Lizenzen */}
      <section className="w-full py-12 md:py-24 lg:py-32 xl:py-48 px-4 overflow-hidden relative">
        <div className="absolute top-0 left-1/2 -translate-x-1/2 w-[1000px] h-[600px] bg-blue-600/10 blur-[120px] rounded-full -z-10 opacity-30" />
        <div className="container mx-auto">
          <div className="flex flex-col items-center space-y-4 text-center">
            <div className="space-y-2">
              <div className="inline-block rounded-full bg-blue-500/10 px-3 py-1 text-sm text-blue-600 dark:text-blue-400 font-medium border border-blue-500/20 mb-4">
                CASPOS Lizenz-Management-Server
              </div>
              <h1 className="text-3xl font-bold tracking-tighter sm:text-4xl md:text-5xl lg:text-7xl/none">
                POS Software <span className="text-blue-600 dark:text-blue-500">Lizenzen & Module</span>
              </h1>
              <p className="mx-auto max-w-[700px] text-slate-600 dark:text-slate-400 md:text-xl mt-6">
                Erwerben und verwalten Sie digitale Lizenzen für CASPOS Kassensysteme. Sofortige Aktivierung und automatische Bereitstellung für Ihre Kunden.
              </p>
            </div>

            {/* High-Contrast Buttons (Light/Dark Ready) */}
            <div className="space-x-4 mt-8">
              <Link href="/order">
                <Button size="lg" className="h-12 px-8 text-lg font-bold transition-all hover:scale-105 bg-slate-900 text-white hover:bg-slate-800 border border-slate-200 dark:bg-white dark:text-black dark:hover:bg-slate-200 dark:border-none">
                  Lizenz bestellen <ArrowRight className="ml-2 h-5 w-5" />
                </Button>
              </Link>
              <Link href="https://caspos.de/kontakt/" target="_blank" rel="noopener noreferrer">
                <Button size="lg" variant="outline" className="h-12 px-8 text-lg font-semibold bg-transparent border-slate-400 text-slate-900 hover:bg-slate-100 dark:border-white/40 dark:text-white dark:hover:bg-white/10">
                  Fragen? Kontaktieren Sie uns
                </Button>
              </Link>
            </div>
          </div>
        </div>
      </section>

      {/* Feature Grid: Aufgeteilt nach echten POS-Modulen */}
      <section className="w-full py-12 md:py-24 lg:py-32 border-t border-slate-200 dark:border-white/5 bg-slate-50 dark:bg-white/[0.02]">
        <div className="container mx-auto px-4 md:px-6">
          <div className="grid gap-12 lg:grid-cols-3">

            {/* Modul 1 */}
            <div className="flex flex-col items-center space-y-4 text-center p-6 rounded-2xl border border-slate-200 dark:border-white/5 bg-white dark:bg-slate-900/50 shadow-sm">
              <div className="p-3 bg-blue-600/10 rounded-xl">
                <ShoppingCart className="h-8 w-8 text-blue-600 dark:text-blue-500" />
              </div>
              <h3 className="text-xl font-bold">Handel & ERP</h3>
              <p className="text-slate-600 dark:text-slate-400">Erweiterungen für Handelskassen, Bestandsführung und vollwertige Warenwirtschaftssysteme (ERP).</p>
            </div>

            {/* Modul 2 */}
            <div className="flex flex-col items-center space-y-4 text-center p-6 rounded-2xl border border-slate-200 dark:border-white/5 bg-white dark:bg-slate-900/50 shadow-sm">
              <div className="p-3 bg-blue-600/10 rounded-xl">
                <Utensils className="h-8 w-8 text-blue-600 dark:text-blue-500" />
              </div>
              <h3 className="text-xl font-bold">Gastronomie</h3>
              <p className="text-slate-600 dark:text-slate-400">Lizenzen für mobiles Bestellen (Orderman), digitale Küchen-Monitore und interaktive Abhol-Boards.</p>
            </div>

            {/* Modul 3 */}
            <div className="flex flex-col items-center space-y-4 text-center p-6 rounded-2xl border border-slate-200 dark:border-white/5 bg-white dark:bg-slate-900/50 shadow-sm">
              <div className="p-3 bg-blue-600/10 rounded-xl">
                <Layers className="h-8 w-8 text-blue-600 dark:text-blue-500" />
              </div>
              <h3 className="text-xl font-bold">Hybride Systeme</h3>
              <p className="text-slate-600 dark:text-slate-400">Das beste aus beiden Welten. Handel mit Gastronomie und umgekehrt. </p>
            </div>

          </div>
        </div>
      </section>

      {/* Kurze Info-Sektion für Partner / Händler */}
      <section className="w-full py-12 md:py-24 border-t border-slate-200 dark:border-white/5">
        <div className="container mx-auto px-4 max-w-4xl text-center">
          <h2 className="text-2xl font-bold tracking-tight sm:text-3xl mb-6">Wie funktioniert die Bereitstellung?</h2>
          <div className="grid gap-6 sm:grid-cols-3 text-left">
            <div className="flex gap-2 items-start">
              <CheckCircle2 className="h-5 w-5 text-blue-600 dark:text-blue-500 shrink-0 mt-0.5" />
              <p className="text-sm text-slate-600 dark:text-slate-400"><strong>1. Lizenz wählen:</strong> Gewünschtes POS-Modul im Shop selektieren.</p>
            </div>
            <div className="flex gap-2 items-start">
              <CheckCircle2 className="h-5 w-5 text-blue-600 dark:text-blue-500 shrink-0 mt-0.5" />
              <p className="text-sm text-slate-600 dark:text-slate-400"><strong>2. Kunde zuweisen:</strong> Lizenz direkt einem Kunden-Account zuordnen.</p>
            </div>
            <div className="flex gap-2 items-start">
              <CheckCircle2 className="h-5 w-5 text-blue-600 dark:text-blue-500 shrink-0 mt-0.5" />
              <p className="text-sm text-slate-600 dark:text-slate-400"><strong>3. Live gehen:</strong> Lizenz-Key (`.key`) wird sofort serverseitig aktiviert.</p>
            </div>
          </div>
        </div>
      </section>

      {/* Footer */}
      <footer className="flex flex-col gap-2 sm:flex-row py-6 w-full shrink-0 items-center px-4 md:px-6 border-t border-slate-200 dark:border-white/5 bg-slate-50 dark:bg-[#020617]">
        <p className="text-xs text-slate-500">© 2026 CASPOS GmbH. Alle Rechte vorbehalten.</p>
        <nav className="sm:ml-auto flex gap-4 sm:gap-6">
          <Link className="text-xs hover:underline underline-offset-4 text-slate-500" href="https://caspos.de/impressum/" target="_blank" rel="noopener noreferrer">Impressum</Link>
          <Link className="text-xs hover:underline underline-offset-4 text-slate-500" href="https://caspos.de/datenschutz/" target="_blank" rel="noopener noreferrer">Datenschutz</Link>
        </nav>
      </footer>
    </>
  )
}