import { motion, useScroll, useTransform } from "framer-motion";

const navLinks = [
  { href: "#leistungen", label: "Leistungen" },
  { href: "#events", label: "Events" },
  { href: "#pakete", label: "Pakete" },
  { href: "#kontakt", label: "Kontakt" },
];

const eventTypes = [
  "Hochzeiten",
  "Firmenfeiern",
  "Geburtstage",
  "Sommerfeste",
  "Messen",
  "Stadtfeste",
  "Empfänge",
  "Private Feiern",
];

const packages = [
  {
    title: "Kaffeepause",
    dark: false,
    items: ["Mobiler Kaffeewagen", "Kaffeespezialitäten", "Service vor Ort"],
  },
  {
    title: "Genusspause",
    dark: true,
    items: ["Kaffee & Snacks", "Flexible Planung", "Eventbetreuung"],
  },
  {
    title: "Eventpaket",
    dark: false,
    items: ["Individuelle Planung", "Kaffee & Snacks", "Größere Events"],
  },
];

const serviceCards = [
  ["Mobiler Kaffeewagen", "Frisch zubereitete Kaffeespezialitäten für Events jeder Größe."],
  ["Snackwagen", "Süße und herzhafte Snacks für zwischendurch."],
  ["Flexibler Einsatz", "Perfekt für Hochzeiten, Firmenfeiern oder Märkte."],
] as const;

const heroStats = [
  ["Mobil", "direkt vor Ort"],
  ["Flexibel", "individuell planbar"],
  ["Persönlich", "direkter Kontakt"],
] as const;

function runDevelopmentChecks() {
  if (typeof process !== "undefined" && process.env.NODE_ENV === "production") {
    return;
  }

  console.assert(navLinks.length === 4, "Expected exactly 4 navigation links.");
  console.assert(new Set(navLinks.map((link) => link.href)).size === navLinks.length, "Navigation hrefs must be unique.");
  console.assert(eventTypes.length === 8, "Expected exactly 8 event types.");
  console.assert(packages.length === 3, "Expected exactly 3 package cards.");
  console.assert(packages.every((pkg) => pkg.items.length === 3), "Each package should have 3 bullet points.");
  console.assert(serviceCards.length === 3, "Expected exactly 3 service cards.");
  console.assert(heroStats.length === 3, "Expected exactly 3 hero stats.");
}

runDevelopmentChecks();

const fadeUp = {
  hidden: { opacity: 0, y: 28 },
  show: {
    opacity: 1,
    y: 0,
    transition: {
      duration: 0.7,
      ease: [0.22, 1, 0.36, 1] as const,
    },
  },
};

const stagger = {
  hidden: {},
  show: {
    transition: {
      staggerChildren: 0.1,
      delayChildren: 0.05,
    },
  },
};

function SectionHeading({ title, subtitle }: { title: string; subtitle?: string }) {
  return (
    <>
      <h2 className="text-3xl font-semibold sm:text-4xl">{title}</h2>
      {subtitle ? <p className="mt-2 text-stone-600">{subtitle}</p> : null}
    </>
  );
}

export default function PaeuschenEventsLandingpage() {
  const { scrollYProgress } = useScroll();
  const heroY = useTransform(scrollYProgress, [0, 0.3], [0, 70]);
  const heroOpacity = useTransform(scrollYProgress, [0, 0.22], [1, 0.72]);
  const cardY = useTransform(scrollYProgress, [0, 0.25], [0, 40]);
  const glowOneY = useTransform(scrollYProgress, [0, 0.3], [0, -90]);
  const glowTwoY = useTransform(scrollYProgress, [0, 0.3], [0, 60]);

  return (
    <div className="min-h-screen bg-gradient-to-b from-amber-50 via-white to-stone-50 text-stone-900">
      <header className="sticky top-0 z-50 border-b border-stone-200 bg-white/90 backdrop-blur">
        <div className="mx-auto flex max-w-7xl items-center justify-between px-6 py-4">
          <div>
            <h1 className="text-lg font-semibold">Päuschen Events</h1>
            <p className="text-sm text-stone-500">Kaffeewagen & Snackwagen</p>
          </div>

          <nav className="hidden gap-6 text-sm md:flex">
            {navLinks.map((link) => (
              <a key={link.href} href={link.href} className="transition hover:text-black">
                {link.label}
              </a>
            ))}
          </nav>

          <a
            href="#kontakt"
            className="rounded-full bg-stone-900 px-4 py-2 text-sm text-white transition hover:-translate-y-0.5"
          >
            Anfrage
          </a>
        </div>
      </header>

      <main className="relative overflow-hidden">
        <motion.div
          aria-hidden
          style={{ y: glowOneY }}
          className="pointer-events-none fixed left-[-6rem] top-24 z-0 h-72 w-72 rounded-full bg-amber-200/30 blur-3xl"
        />
        <motion.div
          aria-hidden
          style={{ y: glowTwoY }}
          className="pointer-events-none fixed right-[-4rem] top-16 z-0 h-80 w-80 rounded-full bg-orange-200/25 blur-3xl"
        />

        <section className="relative z-10 mx-auto grid max-w-7xl items-center gap-12 px-6 py-24 lg:grid-cols-2">
          <motion.div
            initial="hidden"
            animate="show"
            variants={stagger}
            style={{ y: heroY, opacity: heroOpacity }}
          >
            <motion.span
              variants={fadeUp}
              className="inline-block rounded-full bg-amber-100 px-4 py-2 text-sm text-amber-900 shadow-sm"
            >
              Mobile Genussmomente
            </motion.span>

            <motion.h2 variants={fadeUp} className="mt-6 text-4xl font-semibold leading-tight sm:text-5xl">
              Kaffee, Snacks und gute Stimmung für Ihr Event
            </motion.h2>

            <motion.p variants={fadeUp} className="mt-6 max-w-2xl text-lg text-stone-600">
              Päuschen Events bringt einen stilvollen mobilen Kaffeewagen und Snackwagen direkt zu Ihrer Veranstaltung.
              Perfekt für Hochzeiten, Firmenfeiern, Märkte und private Events.
            </motion.p>

            <motion.div variants={fadeUp} className="mt-8 flex flex-col gap-4 sm:flex-row">
              <a
                href="#kontakt"
                className="rounded-full bg-stone-900 px-6 py-3 text-center text-white shadow-sm transition hover:-translate-y-0.5"
              >
                Event anfragen
              </a>
              <a
                href="#pakete"
                className="rounded-full border bg-white/80 px-6 py-3 text-center backdrop-blur transition hover:-translate-y-0.5"
              >
                Pakete ansehen
              </a>
            </motion.div>

            <motion.div variants={stagger} className="mt-10 grid grid-cols-1 gap-4 sm:grid-cols-3">
              {heroStats.map(([title, text]) => (
                <motion.div
                  key={title}
                  variants={fadeUp}
                  whileHover={{ y: -6, transition: { duration: 0.25 } }}
                  className="rounded-xl border bg-white/90 p-4 shadow-sm backdrop-blur"
                >
                  <p className="font-semibold">{title}</p>
                  <p className="text-sm text-stone-500">{text}</p>
                </motion.div>
              ))}
            </motion.div>
          </motion.div>

          <motion.div
            initial={{ opacity: 0, y: 24, scale: 0.97 }}
            animate={{ opacity: 1, y: 0, scale: 1 }}
            transition={{ duration: 0.9, ease: [0.22, 1, 0.36, 1], delay: 0.12 }}
            style={{ y: cardY }}
            className="relative"
          >
            <motion.div
              animate={{ y: [0, -10, 0], rotate: [0, 0.4, 0] }}
              transition={{ duration: 7, repeat: Infinity, ease: "easeInOut" }}
              className="rounded-3xl bg-gradient-to-br from-stone-900 to-amber-500 p-10 text-white shadow-xl"
            >
              <h3 className="text-3xl font-semibold">Der mobile Treffpunkt für Kaffee & Snacks</h3>

              <div className="mt-8 space-y-4">
                <motion.div
                  whileHover={{ x: 4 }}
                  transition={{ duration: 0.2 }}
                  className="rounded-xl bg-white/10 p-4 backdrop-blur-sm"
                >
                  <p className="text-sm">Beliebt für</p>
                  <p className="font-medium">Hochzeiten, Firmenfeiern, Märkte</p>
                </motion.div>

                <motion.div
                  whileHover={{ x: 4 }}
                  transition={{ duration: 0.2 }}
                  className="rounded-xl bg-white/10 p-4 backdrop-blur-sm"
                >
                  <p className="text-sm">Individuell planbar</p>
                  <p className="font-medium">Getränke und Snacks nach Wunsch</p>
                </motion.div>
              </div>
            </motion.div>
          </motion.div>
        </section>

        <motion.section
          id="leistungen"
          initial="hidden"
          whileInView="show"
          viewport={{ once: true, amount: 0.2 }}
          variants={stagger}
          className="relative z-10 mx-auto max-w-7xl px-6 py-20"
        >
          <motion.div variants={fadeUp}>
            <SectionHeading
              title="Leistungen"
              subtitle="Alles für eine entspannte Pause mit Eventcharakter."
            />
          </motion.div>

          <div className="mt-10 grid gap-6 md:grid-cols-3">
            {serviceCards.map(([title, text]) => (
              <motion.div
                key={title}
                variants={fadeUp}
                whileHover={{ y: -8, transition: { duration: 0.25 } }}
                className="rounded-2xl border bg-white p-6 shadow-sm transition-shadow hover:shadow-lg"
              >
                <h3 className="text-xl font-semibold">{title}</h3>
                <p className="mt-3 text-stone-600">{text}</p>
              </motion.div>
            ))}
          </div>
        </motion.section>

        <motion.section
          id="events"
          initial="hidden"
          whileInView="show"
          viewport={{ once: true, amount: 0.15 }}
          variants={stagger}
          className="relative z-10 bg-white/80 py-20 backdrop-blur-sm"
        >
          <div className="mx-auto max-w-7xl px-6">
            <motion.div variants={fadeUp}>
              <SectionHeading title="Geeignet für viele Events" />
            </motion.div>

            <div className="mt-10 grid gap-4 md:grid-cols-4">
              {eventTypes.map((eventType) => (
                <motion.div
                  key={eventType}
                  variants={fadeUp}
                  whileHover={{ y: -4, scale: 1.02 }}
                  className="rounded-xl border bg-white p-4 shadow-sm"
                >
                  {eventType}
                </motion.div>
              ))}
            </div>
          </div>
        </motion.section>

        <motion.section
          id="pakete"
          initial="hidden"
          whileInView="show"
          viewport={{ once: true, amount: 0.15 }}
          variants={stagger}
          className="relative z-10 mx-auto max-w-7xl px-6 py-20"
        >
          <motion.div variants={fadeUp}>
            <SectionHeading title="Beispiel Pakete" />
          </motion.div>

          <div className="mt-10 grid gap-6 md:grid-cols-3">
            {packages.map((pkg) => (
              <motion.div
                key={pkg.title}
                variants={fadeUp}
                whileHover={{ y: -10, scale: 1.01 }}
                transition={{ duration: 0.25 }}
                className={`rounded-2xl border p-6 shadow-sm ${pkg.dark ? "bg-stone-900 text-white shadow-xl" : "bg-white"}`}
              >
                <h3 className="text-xl font-semibold">{pkg.title}</h3>
                <ul className={`mt-4 space-y-2 ${pkg.dark ? "text-white" : "text-stone-600"}`}>
                  {pkg.items.map((item) => (
                    <li key={item}>{item}</li>
                  ))}
                </ul>
              </motion.div>
            ))}
          </div>
        </motion.section>

        <motion.section
          id="kontakt"
          initial={{ opacity: 0, y: 40 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true, amount: 0.2 }}
          transition={{ duration: 0.8, ease: [0.22, 1, 0.36, 1] }}
          className="relative z-10 bg-stone-900 py-20 text-white"
        >
          <div className="mx-auto grid max-w-6xl gap-10 px-6 md:grid-cols-2">
            <div>
              <h2 className="text-3xl font-semibold">Event anfragen</h2>
              <p className="mt-4 text-stone-300">
                Schicken Sie uns Datum, Ort und Gästezahl – wir melden uns mit einem passenden Angebot.
              </p>

              <div className="mt-6 space-y-2 text-stone-300">
                <p>Email: kontakt@paeuschen-events.de</p>
                <p>Website: paeuschen-events.de</p>
              </div>
            </div>

            <motion.form
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true, amount: 0.3 }}
              transition={{ duration: 0.7, delay: 0.15, ease: [0.22, 1, 0.36, 1] }}
              className="space-y-4 rounded-2xl bg-white/10 p-6 backdrop-blur-sm"
            >
              <input
                type="text"
                placeholder="Name"
                className="w-full rounded-xl bg-white/20 p-3 placeholder-white outline-none ring-0"
              />

              <input
                type="email"
                placeholder="Email"
                className="w-full rounded-xl bg-white/20 p-3 placeholder-white outline-none ring-0"
              />

              <input
                type="text"
                placeholder="Event"
                className="w-full rounded-xl bg-white/20 p-3 placeholder-white outline-none ring-0"
              />

              <textarea
                placeholder="Nachricht"
                className="min-h-32 w-full rounded-xl bg-white/20 p-3 placeholder-white outline-none ring-0"
              />

              <button
                type="button"
                className="w-full rounded-full bg-amber-400 px-6 py-3 text-black transition hover:-translate-y-0.5"
              >
                Anfrage senden
              </button>
            </motion.form>
          </div>
        </motion.section>
      </main>

      <footer className="border-t py-6 text-center text-sm text-stone-500">© 2026 Päuschen Events</footer>
    </div>
  );
}