import React, { useMemo, useState } from "react";
import { motion } from "framer-motion";
import { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import {
  Mail,
  Instagram,
  Facebook,
  Linkedin,
  Youtube,
  ExternalLink,
  CheckCircle2,
} from "lucide-react";

export default function FightToEndLandingPage() {
  const [email, setEmail] = useState("");
  const [submitted, setSubmitted] = useState(false);

  const config = useMemo(
    () => ({
      titleTop: "WE ARE BACK",
      subtitle:
        "Fight To End returns November 19, 2026. Join the list for updates, announcements, and early access.",
      moreInfoUrl: "https://fight-to-end-london-2026.raiselysite.com/",

      // YouTube background video
      youtubeVideoId: "QPiBostkKGk",

      socials: [
        {
          label: "Instagram",
          href: "https://www.instagram.com/fighttoend.ldn/",
          icon: Instagram,
        },
        {
          label: "Facebook",
          href: "https://www.facebook.com/profile.php?id=61590487610566",
          icon: Facebook,
        },
        {
          label: "LinkedIn",
          href: "https://www.linkedin.com/company/fighttoendldn/",
          icon: Linkedin,
        },
        {
          label: "YouTube",
          href: "https://www.youtube.com/@fighttoendlondon2019",
          icon: Youtube,
        },
        {
          label: "X",
          href: "https://x.com/FightToEndLdn",
          icon: ExternalLink,
        },
      ],

      consentText:
        "I agree to receive email updates from Fight To End about the event, announcements, and related campaigns. I understand I can unsubscribe at any time.",

      formAction: "",
      formMethod: "POST",
    }),
    []
  );

  const handleDemoSubmit = (e) => {
    if (config.formAction) return;
    e.preventDefault();
    if (!email) return;
    setSubmitted(true);
  };

  const youtubeEmbedUrl = `https://www.youtube.com/embed/${config.youtubeVideoId}?autoplay=1&mute=1&controls=0&loop=1&playlist=${config.youtubeVideoId}&playsinline=1&rel=0&modestbranding=1&showinfo=0&enablejsapi=1`;

  return (
    <div className="min-h-screen bg-black text-white relative overflow-hidden">
      <div className="absolute inset-0 overflow-hidden">
        <iframe
          className="pointer-events-none absolute left-1/2 top-1/2 h-[56.25vw] min-h-full w-[177.78vh] min-w-full -translate-x-1/2 -translate-y-1/2"
          src={youtubeEmbedUrl}
          title="Fight To End background video"
          allow="autoplay; encrypted-media; picture-in-picture"
          referrerPolicy="strict-origin-when-cross-origin"
        />
      </div>

      <div className="absolute inset-0 bg-black/60" />
      <div className="absolute inset-0 bg-gradient-to-t from-black via-black/40 to-black/35" />

      <main className="relative z-10 mx-auto flex min-h-screen max-w-7xl items-center px-6 py-10 md:px-10">
        <div className="grid w-full gap-8 lg:grid-cols-[1.2fr_0.8fr] lg:gap-12">
          <motion.section
            initial={{ opacity: 0, y: 18 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6 }}
            className="flex flex-col justify-center"
          >
            logo-png-bc7efd.png

            <h1 className="max-w-4xl text-5xl font-black uppercase tracking-tight sm:text-6xl md:text-7xl lg:text-8xl">
              {config.titleTop}
            </h1>

            <p className="mt-5 max-w-2xl text-base leading-7 text-white/80 sm:text-lg">
              {config.subtitle}
            </p>

            <div className="mt-8 flex flex-col gap-3 sm:flex-row">
              <Button
                asChild
                className="rounded-2xl bg-red-600 px-6 py-6 text-base font-semibold text-white hover:bg-red-500"
              >
                <a href={config.moreInfoUrl} target="_blank" rel="noreferrer">
                  More info
                  <ExternalLink className="ml-2 h-4 w-4" />
                </a>
              </Button>
            </div>

            <div className="mt-8 flex flex-wrap gap-3">
              {config.socials.map((item) => {
                const Icon = item.icon;
                return (
                  <a
                    key={item.label}
                    href={item.href}
                    target="_blank"
                    rel="noreferrer"
                    className="inline-flex items-center gap-2 rounded-2xl border border-white/15 bg-white/10 px-4 py-3 text-sm text-white/90 backdrop-blur transition hover:bg-white/15"
                  >
                    <Icon className="h-4 w-4" />
                    {item.label}
                  </a>
                );
              })}
            </div>
          </motion.section>

          <motion.aside
            initial={{ opacity: 0, y: 18 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.7, delay: 0.1 }}
            className="flex items-center"
          >
            <Card className="w-full rounded-[2rem] border-white/10 bg-white/10 text-white shadow-2xl backdrop-blur-xl">
              <CardContent className="p-6 sm:p-8">
                <div className="mb-4 inline-flex items-center rounded-full border border-emerald-400/20 bg-emerald-400/10 px-3 py-1 text-xs font-medium uppercase tracking-[0.2em] text-emerald-200">
                  Email updates
                </div>

                <h2 className="text-2xl font-bold sm:text-3xl">Stay in the loop</h2>
                <p className="mt-3 text-sm leading-6 text-white/75 sm:text-base">
                  Get event news, announcements, and campaign updates delivered to your inbox.
                </p>

                {submitted ? (
                  <div className="mt-6 rounded-2xl border border-emerald-400/20 bg-emerald-400/10 p-4 text-emerald-100">
                    <div className="flex items-start gap-3">
                      <CheckCircle2 className="mt-0.5 h-5 w-5 shrink-0" />
                      <div>
                        <p className="font-semibold">Thanks for signing up</p>
                        <p className="mt-1 text-sm text-emerald-50/90">
                          This demo shows the on-page experience. In production, connect this form to Brevo or Mailchimp with double opt-in enabled.
                        </p>
                      </div>
                    </div>
                  </div>
                ) : (
                  <form
                    className="mt-6 space-y-4"
                    action={config.formAction || undefined}
                    method={config.formMethod}
                    onSubmit={handleDemoSubmit}
                  >
                    <label className="block">
                      <span className="mb-2 block text-sm text-white/85">Email address</span>
                      <div className="relative">
                        <Mail className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-white/45" />
                        <Input
                          type="email"
                          name="EMAIL"
                          required
                          value={email}
                          onChange={(e) => setEmail(e.target.value)}
                          placeholder="you@example.com"
                          className="h-12 rounded-2xl border-white/15 bg-black/30 pl-10 text-white placeholder:text-white/35"
                        />
                      </div>
                    </label>

                    <label className="flex items-start gap-3 rounded-2xl border border-white/10 bg-black/20 p-4 text-sm leading-6 text-white/80">
                      <input type="checkbox" required className="mt-1 h-4 w-4 rounded border-white/30 bg-transparent" />
                      <span>{config.consentText}</span>
                    </label>

                    <p className="text-xs leading-5 text-white/55">
                      By signing up, you confirm your consent. Every campaign email should identify the sender and include an unsubscribe link.
                    </p>

                    <Button className="h-12 w-full rounded-2xl bg-white text-black hover:bg-white/90">
                      Sign up for updates
                    </Button>
                  </form>
                )}
              </CardContent>
            </Card>
          </motion.aside>
        </div>
      </main>
    </div>
  );
}