import { Header } from "@ui/components/header";
import { Button } from "@xtablo/ui/components/button";
import { Link } from "react-router-dom";
import { twMerge } from "tailwind-merge";
import logo from "../assets/icon.jpg";

export const LandingPage = () => {
  localStorage.setItem("xtablo-has-seen-landing-page", "true");
  window.location.href = "https://www.xtablo.com";
  return null;

  const CheckIcon = () => {
    return (
      <svg
        className="w-5 h-5 text-green-500 mr-3"
        fill="none"
        stroke="currentColor"
        viewBox="0 0 24 24"
      >
        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7" />
      </svg>
    );
  };

  return (
    <div className="min-h-screen bg-linear-to-br from-gray-50 via-white to-gray-100/50 dark:from-slate-900 dark:via-slate-800 dark:to-slate-700">
      <Header />
      <div className="container mx-auto px-4">
        {/* Hero Section */}
        <section className="py-20 text-center relative">
          <div className="absolute inset-0 flex items-center justify-center pointer-events-none">
            <div className="w-[500px] h-[500px] bg-blue-500/10 rounded-full blur-3xl" />
          </div>

          {/* Beta Badge */}
          <div className="mb-6 relative">
            <span className="inline-flex items-center gap-2 bg-blue-100 dark:bg-blue-900/30 text-blue-800 dark:text-blue-300 px-4 py-2 rounded-full text-sm font-medium border border-blue-200 dark:border-blue-800">
              Version Bêta
            </span>
          </div>

          <h1 className="text-6xl font-bold text-slate-900 dark:text-white mb-6 relative">
            Un client, un tablo, un espace de travail
          </h1>
          <p className="text-xl text-slate-700 dark:text-white mb-12 max-w-3xl mx-auto relative">
            Avec XTablo, créez un groupe et discutez avec vos clients et collaborateurs sans email,
            sans friction.
          </p>
          <div className="flex flex-col sm:flex-row items-center justify-center gap-4 mb-16 relative">
            <Link to="/">
              <Button
                className={twMerge(
                  "inline-flex items-center gap-2 bg-blue-700 px-8 py-4 rounded-full",
                  "text-white font-semibold hover:bg-blue-600 transition-colors",
                  "shadow-lg hover:shadow-xl shadow-blue-700/20",
                  "text-lg"
                )}
              >
                👉 Testez la version bêta (gratuite)
                <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    strokeWidth="2"
                    d="M13 7l5 5m0 0l-5 5m5-5H6"
                  />
                </svg>
              </Button>
            </Link>
          </div>
          <div
            className={twMerge(
              "bg-white dark:bg-slate-800/50 backdrop-blur-lg rounded-2xl",
              "shadow-xl",
              "relative"
            )}
          >
            <iframe
              className="aspect-video rounded-lg w-full"
              src="https://www.youtube.com/embed/1-UlzZQ0lMw"
              title="XTablo Demo"
              frameBorder="0"
              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
              allowFullScreen
            ></iframe>
          </div>
        </section>
        {/* Problem Section */}
        <section className="py-20">
          <div className="text-center mb-16">
            <h2 className="text-4xl font-bold text-slate-900 dark:text-white mb-4">
              🤔 Le problème aujourd&apos;hui
            </h2>
            <p className="text-xl text-slate-700 dark:text-white max-w-2xl mx-auto mb-8">
              Vous lancez un tablo avec un client ?<br />
              Vous jonglez entre messages WhatsApp, briefs Notion, liens Calendly, et retours par
              e-mail ?
            </p>
          </div>

          <div className="grid md:grid-cols-3 gap-8 mb-12">
            <div
              className={twMerge(
                "bg-red-50 dark:bg-red-900/20 backdrop-blur-lg rounded-xl p-6",
                "border border-red-200 dark:border-red-800/50 text-center"
              )}
            >
              <div className="text-3xl mb-4">❌</div>
              <h3 className="text-xl font-semibold text-red-800 dark:text-red-300 mb-2">
                Infos dispersées
              </h3>
              <p className="text-red-700 dark:text-red-200">
                Informations éparpillées sur plusieurs plateformes
              </p>
            </div>
            <div
              className={twMerge(
                "bg-red-50 dark:bg-red-900/20 backdrop-blur-lg rounded-xl p-6",
                "border border-red-200 dark:border-red-800/50 text-center"
              )}
            >
              <div className="text-3xl mb-4">❌</div>
              <h3 className="text-xl font-semibold text-red-800 dark:text-red-300 mb-2">
                Risque d&apos;oubli
              </h3>
              <p className="text-red-700 dark:text-red-200">
                Messages perdus et malentendus fréquents
              </p>
            </div>
            <div
              className={twMerge(
                "bg-red-50 dark:bg-red-900/20 backdrop-blur-lg rounded-xl p-6",
                "border border-red-200 dark:border-red-800/50 text-center"
              )}
            >
              <div className="text-3xl mb-4">❌</div>
              <h3 className="text-xl font-semibold text-red-800 dark:text-red-300 mb-2">
                Impression de flou
              </h3>
              <p className="text-red-700 dark:text-red-200">Confusion dès le départ du tablo</p>
            </div>
          </div>
        </section>
        {/* Current Solution Section */}
        <section className="py-20 bg-green-50 dark:bg-green-900/10">
          <div className="container mx-auto px-4">
            <div className="text-center mb-16">
              <h2 className="text-4xl font-bold text-slate-900 dark:text-white mb-4">
                ✅ Ce que fait XTablo aujourd&apos;hui
              </h2>
              <p className="text-xl text-slate-700 dark:text-white max-w-2xl mx-auto">
                Avec XTablo (version bêta), vous pouvez déjà :
              </p>
            </div>

            <div className="grid md:grid-cols-3 gap-8 mb-12">
              <div
                className={twMerge(
                  "bg-white dark:bg-slate-800/50 backdrop-blur-lg rounded-xl p-6",
                  "border border-green-200 dark:border-green-800/50 text-center"
                )}
              >
                <div className="text-3xl mb-4">✔️</div>
                <h3 className="text-xl font-semibold text-green-800 dark:text-green-300 mb-2">
                  Créer un groupe dédié
                </h3>
                <p className="text-green-700 dark:text-green-200">
                  Un espace unique pour chaque tablo
                </p>
              </div>
              <div
                className={twMerge(
                  "bg-white dark:bg-slate-800/50 backdrop-blur-lg rounded-xl p-6",
                  "border border-green-200 dark:border-green-800/50 text-center"
                )}
              >
                <div className="text-3xl mb-4">✔️</div>
                <h3 className="text-xl font-semibold text-green-800 dark:text-green-300 mb-2">
                  Inviter votre équipe
                </h3>
                <p className="text-green-700 dark:text-green-200">
                  Client, freelances, collaborateurs en un clic
                </p>
              </div>
              <div
                className={twMerge(
                  "bg-white dark:bg-slate-800/50 backdrop-blur-lg rounded-xl p-6",
                  "border border-green-200 dark:border-green-800/50 text-center"
                )}
              >
                <div className="text-3xl mb-4">✔️</div>
                <h3 className="text-xl font-semibold text-green-800 dark:text-green-300 mb-2">
                  Discuter simplement
                </h3>
                <p className="text-green-700 dark:text-green-200">
                  Un seul espace clair, sans rien installer
                </p>
              </div>
            </div>

            <div className="text-center">
              <p className="text-lg font-medium text-green-800 dark:text-green-300">
                Objectif : poser les bases d&apos;un tablo aligné, dès le jour 1.
              </p>
            </div>
          </div>
        </section>
        {/* Future Roadmap Section */}
        <section className="py-20">
          <div className="text-center mb-16">
            <h2 className="text-4xl font-bold text-slate-900 dark:text-white mb-4">
              🚧 Ce qu&apos;on construit avec vous
            </h2>
            <p className="text-xl text-slate-700 dark:text-white max-w-2xl mx-auto mb-8">
              XTablo deviendra bientôt un hub tablo tout-en-un :
            </p>
          </div>

          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6 mb-12">
            <div
              className={twMerge(
                "bg-white dark:bg-slate-800/50 backdrop-blur-lg rounded-xl p-6",
                "border border-blue-200 dark:border-slate-700/50 text-center"
              )}
            >
              <div className="text-2xl mb-3">📋</div>
              <h3 className="font-semibold text-slate-900 dark:text-white">Brief partagé</h3>
            </div>
            <div
              className={twMerge(
                "bg-white dark:bg-slate-800/50 backdrop-blur-lg rounded-xl p-6",
                "border border-blue-200 dark:border-slate-700/50 text-center"
              )}
            >
              <div className="text-2xl mb-3">📅</div>
              <h3 className="font-semibold text-slate-900 dark:text-white">
                Prise de RDV intégrée
              </h3>
            </div>
            <div
              className={twMerge(
                "bg-white dark:bg-slate-800/50 backdrop-blur-lg rounded-xl p-6",
                "border border-blue-200 dark:border-slate-700/50 text-center"
              )}
            >
              <div className="text-2xl mb-3">⏰</div>
              <h3 className="font-semibold text-slate-900 dark:text-white">Timeline et tâches</h3>
            </div>
            <div
              className={twMerge(
                "bg-white dark:bg-slate-800/50 backdrop-blur-lg rounded-xl p-6",
                "border border-blue-200 dark:border-slate-700/50 text-center"
              )}
            >
              <div className="text-2xl mb-3">🤖</div>
              <h3 className="font-semibold text-slate-900 dark:text-white">IA pour vos clients</h3>
            </div>
          </div>

          <div className="text-center">
            <p className="text-lg text-slate-700 dark:text-white">
              Mais dès maintenant, vous pouvez poser les fondations avec la messagerie partagée.
            </p>
          </div>
        </section>
        {/* Why We Need You Section */}
        <section className="py-20 bg-blue-50 dark:bg-blue-900/10">
          <div className="container mx-auto px-4">
            <div className="text-center mb-16">
              <h2 className="text-4xl font-bold text-slate-900 dark:text-white mb-4">
                👋 Pourquoi on a besoin de vous
              </h2>
              <p className="text-xl text-slate-700 dark:text-white max-w-3xl mx-auto">
                On cherche des pros du terrain pour tester notre prototype, nous dire ce qui
                fonctionne, ce qu&apos;on doit améliorer, et co-construire la suite.
              </p>
            </div>

            <div className="grid md:grid-cols-2 gap-8 mb-12">
              <div
                className={twMerge(
                  "bg-white dark:bg-slate-800/50 backdrop-blur-lg rounded-xl p-8",
                  "border border-blue-200 dark:border-slate-700/50"
                )}
              >
                <h3 className="text-2xl font-bold text-slate-900 dark:text-white mb-4">
                  C&apos;est une version simple
                </h3>
                <p className="text-slate-700 dark:text-white text-lg">
                  Mais déjà utile. Nous sommes en phase de prototype et nous perfectionnons
                  l&apos;expérience grâce à vos retours concrets.
                </p>
              </div>
              <div
                className={twMerge(
                  "bg-white dark:bg-slate-800/50 backdrop-blur-lg rounded-xl p-8",
                  "border border-blue-200 dark:border-slate-700/50"
                )}
              >
                <h3 className="text-2xl font-bold text-slate-900 dark:text-white mb-4">
                  Votre retour compte
                </h3>
                <p className="text-slate-700 dark:text-white text-lg">
                  Fera toute la différence. Chaque suggestion nous aide à construire l&apos;outil
                  dont vous avez vraiment besoin.
                </p>
              </div>
            </div>

            <div className="text-center">
              <div
                className={twMerge(
                  "bg-white dark:bg-slate-800/50 backdrop-blur-lg rounded-xl p-8",
                  "border border-blue-200 dark:border-slate-700/50 inline-block"
                )}
              >
                <p className="text-lg font-medium text-blue-800 dark:text-blue-300 mb-2">
                  🎯 Notre objectif
                </p>
                <p className="text-slate-700 dark:text-white">
                  Construire ensemble l&apos;outil parfait pour lancer vos tablos sereinement
                </p>
              </div>
            </div>
          </div>
        </section>
        {/* Beta Join Section */}
        <section id="beta" className="py-20">
          <div className="text-center mb-16">
            <h2 className="text-4xl font-bold text-slate-900 dark:text-white mb-4">
              🚀 Rejoignez la bêta
            </h2>
            <p className="text-xl text-slate-700 dark:text-white max-w-3xl mx-auto">
              Testez XTablo gratuitement en 30 secondes.
              <br />
              Pas de CB, pas d&apos;engagement — juste un groupe, un lien, une discussion fluide.
            </p>
          </div>

          <div className="max-w-4xl mx-auto">
            <div
              className={twMerge(
                "bg-white dark:bg-slate-800/50 backdrop-blur-lg rounded-2xl p-12",
                "border border-blue-200 dark:border-slate-700/50 relative",
                "shadow-xl hover:shadow-2xl transition-all duration-300"
              )}
            >
              <div className="absolute -top-4 left-1/2 transform -translate-x-1/2">
                <span className="bg-green-500 text-white px-6 py-2 rounded-full text-sm font-semibold">
                  Gratuit pendant la bêta
                </span>
              </div>

              <div className="text-center mb-8">
                <h3 className="text-3xl font-bold text-slate-900 dark:text-white mb-4">
                  Accès bêta gratuit
                </h3>
                <p className="text-lg text-slate-700 dark:text-white">
                  Profitez de toutes les fonctionnalités actuelles sans aucun coût
                </p>
              </div>

              <div className="grid md:grid-cols-2 gap-8 mb-8">
                <div>
                  <h4 className="text-xl font-semibold text-slate-900 dark:text-white mb-4">
                    ✅ Inclus dans la bêta :
                  </h4>
                  <ul className="space-y-3">
                    <li className="flex items-center text-slate-700 dark:text-white">
                      <CheckIcon />
                      Groupes de tablo illimités
                    </li>
                    <li className="flex items-center text-slate-700 dark:text-white">
                      <CheckIcon />
                      Invitations clients & équipe
                    </li>
                    <li className="flex items-center text-slate-700 dark:text-white">
                      <CheckIcon />
                      Chat en temps réel
                    </li>
                  </ul>
                </div>
                <div>
                  <h4 className="text-xl font-semibold text-slate-900 dark:text-white mb-4">
                    🎁 Vos avantages :
                  </h4>
                  <ul className="space-y-3">
                    <li className="flex items-center text-slate-700 dark:text-white">
                      <CheckIcon />
                      Accès aux futures fonctionnalités
                    </li>
                    <li className="flex items-center text-slate-700 dark:text-white">
                      <CheckIcon />
                      Support direct avec l&apos;équipe
                    </li>
                    <li className="flex items-center text-slate-700 dark:text-white">
                      <CheckIcon />
                      Influence sur le développement
                    </li>
                  </ul>
                </div>
              </div>

              <div className="text-center">
                <Link to="/">
                  <Button
                    className={twMerge(
                      "px-12 py-4 bg-blue-700 rounded-full text-white font-semibold text-xl",
                      "hover:bg-blue-600 transition-all duration-300 hover:scale-[1.02]",
                      "shadow-xl hover:shadow-2xl shadow-blue-700/30"
                    )}
                  >
                    👉 Créer mon premier groupe
                  </Button>
                </Link>
                <p className="text-sm text-slate-500 dark:text-slate-400 mt-4">
                  Inscription en 30 secondes • Aucune carte bancaire requise
                </p>
              </div>
            </div>
          </div>
        </section>
      </div>

      {/* Footer */}
      <footer className={twMerge("py-12 border-t border-slate-200 dark:border-slate-800")}>
        <div className="container mx-auto px-4">
          <div className="grid md:grid-cols-4 gap-8">
            <div>
              <div className="flex items-center gap-2 mb-4">
                <img src={logo} alt="Logo XTablo" className="w-8 h-8" />
                <h3 className="text-xl font-bold text-slate-900 dark:text-white">XTablo</h3>
              </div>
              <p className="text-slate-600 dark:text-slate-400">
                Révolutionnez votre productivité avec XTablo
              </p>
            </div>
            <div>
              <h4 className="text-lg font-semibold text-slate-900 dark:text-white mb-4">Produit</h4>
              <ul className="space-y-2">
                <li>
                  <span className="text-slate-600 dark:text-slate-40">Version Bêta</span>
                </li>
                <li>
                  <span className="text-slate-600 dark:text-slate-40">Rejoindre</span>
                </li>
                <li>
                  <span className="text-slate-600 dark:text-slate-40">Intégrations</span>
                </li>
              </ul>
            </div>
            <div>
              <h4 className="text-lg font-semibold text-slate-900 dark:text-white mb-4">
                Entreprise
              </h4>
              <ul className="space-y-2">
                <li>
                  <span className="text-slate-600 dark:text-slate-40">À propos</span>
                </li>
                <li>
                  <span className="text-slate-600 dark:text-slate-40">Blog</span>
                </li>
                <li>
                  <span className="text-slate-600 dark:text-slate-40">Carrières</span>
                </li>
              </ul>
            </div>
            <div>
              <h4 className="text-lg font-semibold text-slate-900 dark:text-white mb-4">Légal</h4>
              <ul className="space-y-2">
                <li>
                  <a
                    href="/privacy-policy"
                    className="text-slate-600 dark:text-slate-400 hover:text-blue-700 dark:hover:text-blue-400 transition-colors"
                  >
                    Politique de confidentialité
                  </a>
                </li>
                <li>
                  <a
                    href="/legal-notice"
                    className="text-slate-600 dark:text-slate-400 hover:text-blue-700 dark:hover:text-blue-400 transition-colors"
                  >
                    Mentions légales
                  </a>
                </li>
                <li>
                  <span className="text-slate-600 dark:text-slate-40">Cookies</span>
                </li>
              </ul>
            </div>
          </div>
          <div className="mt-12 pt-8 border-t border-slate-200 dark:border-slate-800 text-center">
            <p className="text-slate-600 dark:text-slate-400 text-sm">
              © {new Date().getFullYear()} XTablo. Tous droits réservés.
            </p>
            <p className="text-slate-500 dark:text-slate-500 text-xs mt-2">
              XTablo est une marque déposée. Les logos et noms de marques sont des marques déposées
              de leurs propriétaires respectifs.
            </p>
          </div>
        </div>
      </footer>
    </div>
  );
};
