import React from 'react';
import { Sparkles, Users, Camera, Heart, ArrowRight } from 'lucide-react';
import { ADMIN_DEFAULT_AFTER_LOGIN_PATH, ADMIN_LOGIN_PATH } from '../constants';
import { encodeReturnTo, resolveReturnTarget } from '../lib/returnTo';

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 [isRedirecting, setIsRedirecting] = React.useState(false);

  const handleLoginRedirect = React.useCallback(() => {
    if (isRedirecting) {
      return;
    }

    setIsRedirecting(true);

    const params = new URLSearchParams(window.location.search);
    const rawReturnTo = params.get('return_to');
    const { finalTarget, encodedFinal } = resolveReturnTarget(rawReturnTo, ADMIN_DEFAULT_AFTER_LOGIN_PATH);
    const target = new URL(ADMIN_LOGIN_PATH, window.location.origin);
    target.searchParams.set('return_to', encodedFinal ?? encodeReturnTo(finalTarget));
    window.location.href = `${target.pathname}${target.search}`;
  }, [isRedirecting]);

  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={handleLoginRedirect}
            disabled={isRedirecting}
          >
            {isRedirecting ? 'Weiterleitung ...' : '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>
  );
}