import React from 'react';
import { useNavigate } from 'react-router-dom';
import { Sparkles, Users, Camera, Heart, ArrowRight } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { ADMIN_HOME_PATH } from '../constants';
import { useAuth } from '../auth/context';

const highlights = [
  {
    icon: Sparkles,
    title: 'Momente lenken, nicht das Handy',
    description:
      'Fotospiel liefert euch spielerische Aufgaben, damit eure Gäste das Fest genießen und gleichzeitig emotionale Motive festhalten.',
  },
  {
    icon: Users,
    title: 'Alle Gäste auf einer Reise',
    description:
      'Einladungslinks und QR-Codes führen direkt in eure Event-Galerie. Kein Technik-Know-how nötig – nur teilen und loslegen.',
  },
  {
    icon: Camera,
    title: 'Live-Galerie und Moderation',
    description:
      'Sammelt Bilder in Echtzeit, markiert Highlights und entscheidet gemeinsam, welche Erinnerungen groß rauskommen.',
  },
];

export default function WelcomeTeaserPage() {
  const navigate = useNavigate();
  const { login } = useAuth();

  return (
    <div className="min-h-screen bg-gradient-to-br from-rose-50 via-white to-sky-50 text-slate-800">
      <header className="mx-auto flex w-full max-w-5xl flex-col gap-6 px-6 pb-12 pt-16 text-center md:pt-20">
        <div className="mx-auto w-fit rounded-full border border-rose-100 bg-white/80 px-4 py-1 text-sm font-medium text-rose-500 shadow-sm">
          Willkommen bei Fotospiel
        </div>
        <h1 className="font-display text-4xl font-semibold tracking-tight text-slate-900 md:text-5xl">
          Eure Gäste als Geschichtenerzähler – ohne Technikstress
        </h1>
        <p className="mx-auto max-w-2xl text-base leading-relaxed text-slate-600 md:text-lg">
          Dieses Kontrollzentrum zeigt euch, wie ihr Fotospiel für Hochzeit, Jubiläum oder Team-Event einsetzt.
          Wir führen euch Schritt für Schritt durch Aufgaben, Event-Setup und Einladungen.
        </p>
        <div className="flex flex-col justify-center gap-3 md:flex-row">
          
          <button
            type="button"
            className="group inline-flex items-center justify-center gap-2 rounded-full border border-transparent bg-white px-6 py-3 text-base font-semibold text-rose-500 shadow-sm transition hover:border-rose-200 hover:text-rose-600"
            onClick={() => login(ADMIN_HOME_PATH)}
          >
            Ich habe bereits Zugang
            <ArrowRight className="h-4 w-4 transition group-hover:translate-x-0.5" />
          </button>
        </div>
      </header>

      <main className="mx-auto w-full max-w-5xl space-y-12 px-6 pb-16">
        <section className="grid gap-6 rounded-3xl border border-white/60 bg-white/80 p-6 shadow-xl shadow-rose-100/40 backdrop-blur-md md:grid-cols-3 md:p-8">
          {highlights.map((item) => (
            <article key={item.title} className="flex flex-col gap-4 rounded-2xl bg-white/70 p-5 shadow-sm">
              <div className="flex h-12 w-12 items-center justify-center rounded-full bg-rose-100 text-rose-500">
                <item.icon className="h-6 w-6" />
              </div>
              <h2 className="text-lg font-semibold text-slate-900">{item.title}</h2>
              <p className="text-sm leading-relaxed text-slate-600">{item.description}</p>
            </article>
          ))}
        </section>

        <section className="grid gap-8 rounded-3xl border border-sky-100 bg-gradient-to-br from-white via-sky-50 to-white p-6 shadow-lg md:grid-cols-2 md:p-10">
          <div className="space-y-5">
            <div className="inline-flex items-center gap-2 rounded-full bg-sky-100 px-3 py-1 text-xs font-semibold text-sky-700">
              <Heart className="h-4 w-4" />
              So startet ihr
            </div>
            <h2 className="text-2xl font-semibold text-slate-900 md:text-3xl">In drei Schritten zu eurer Story</h2>
            <ol className="space-y-4 text-sm leading-relaxed text-slate-600">
              <li>
                <span className="font-semibold text-slate-900">1. Aufgaben entdecken&nbsp;</span>
                Stellt euer erstes Aufgabenpaket zusammen, das zu eurer Feier passt.
              </li>
              <li>
                <span className="font-semibold text-slate-900">2. Event anlegen&nbsp;</span>
                Benennt euer Event, legt Farben fest und erstellt den QR-Einladungslink.
              </li>
              <li>
                <span className="font-semibold text-slate-900">3. Link teilen&nbsp;</span>
                Gäste scannen, laden Fotos hoch und ihr entscheidet, was in euer Album kommt.
              </li>
            </ol>
          </div>
          <aside className="space-y-4 rounded-2xl border border-rose-100 bg-white/90 p-6 text-sm leading-relaxed text-slate-600 shadow-md">
            <p>
              Ihr könnt jederzeit unterbrechen und später weiter machen. Falls ihr Fragen habt, meldet euch unter{' '}
              <a className="font-medium text-rose-500 underline" href="mailto:hallo@fotospiel.de">
                hallo@fotospiel.de
              </a>
              .
            </p>
            <p>
              Nach dem Login geleiten wir euch automatisch zur geführten Einrichtung. Dort entscheidet ihr auch,
              wann eure Gästegalerie sichtbar wird.
            </p>
          </aside>
        </section>
      </main>

      <footer className="border-t border-white/60 bg-white/70 py-6 text-center text-xs text-slate-500">
        Fotospiel • Eure Gäste gestalten eure Lieblingsmomente
      </footer>
    </div>
  );
}