import React, { useMemo, useState } from "react";
import { Gamepad2, Music4, Joystick, PartyPopper, MapPin, Clock3, Users } from "lucide-react";

const pages = {
  accueil: {
    title: "Cosania",
    subtitle: "Loisirs et divertissement pour tous",
    description:
      "Bienvenue chez Cosania, un lieu moderne et convivial dédié au jeu, au fun et aux moments à partager en famille ou entre amis.",
    image:
      "/mnt/data/Gemini_Generated_Image_b5ja4mb5ja4mb5ja.png",
  },
  aire: {
    title: "Aire de jeux",
    subtitle: "Un espace coloré pour s’amuser en toute liberté",
    description:
      "Notre aire de jeux propose un univers ludique pensé pour les enfants, avec des zones adaptées, sécurisées et agréables pour bouger, grimper et explorer.",
    image:
      "https://images.unsplash.com/photo-1516627145497-ae6968895b74?auto=format&fit=crop&w=1400&q=80",
    features: ["Structures ludiques", "Espace sécurisé", "Ambiance familiale"],
  },
  arcade: {
    title: "Salle d’arcade",
    subtitle: "Des sensations rétro et modernes au même endroit",
    description:
      "Découvrez une salle d’arcade immersive avec des bornes emblématiques, des jeux d’adresse et une ambiance dynamique pour petits et grands joueurs.",
    image:
      "https://images.unsplash.com/photo-1511882150382-421056c89033?auto=format&fit=crop&w=1400&q=80",
    features: ["Bornes arcade", "Jeux multijoueurs", "Ambiance lumineuse"],
  },
  karaoke: {
    title: "Karaoké Box",
    subtitle: "Votre espace privé pour chanter sans limite",
    description:
      "Profitez de salles de karaoké confortables et intimistes pour chanter entre amis, célébrer un événement ou simplement passer un moment mémorable.",
    image:
      "https://images.unsplash.com/photo-1493225457124-a3eb161ffa5f?auto=format&fit=crop&w=1400&q=80",
    features: ["Salle privative", "Playlist variée", "Ambiance festive"],
  },
  gaming: {
    title: "Gaming",
    subtitle: "Des postes de jeu performants pour une expérience intense",
    description:
      "Notre espace gaming réunit confort, performance et immersion pour les amateurs de jeux vidéo, en solo comme en équipe.",
    image:
      "https://images.unsplash.com/photo-1542751371-adc38448a05e?auto=format&fit=crop&w=1400&q=80",
    features: ["Postes modernes", "Jeu en équipe", "Confort premium"],
  },
};

const navItems = [
  { key: "aire", label: "Aire de jeux", icon: PartyPopper },
  { key: "arcade", label: "Salle d’arcade", icon: Joystick },
  { key: "karaoke", label: "Karaoké Box", icon: Music4 },
  { key: "gaming", label: "Gaming", icon: Gamepad2 },
];

function Header({ currentPage, setCurrentPage }) {
  return (
    <header className="sticky top-0 z-30 border-b border-slate-200 bg-white/95 backdrop-blur">
      <div className="mx-auto max-w-7xl px-6 py-4 flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
        <button
          onClick={() => setCurrentPage("accueil")}
          className="text-left"
        >
          <div className="text-2xl font-bold tracking-tight text-slate-900">Cosania</div>
          <div className="text-sm text-slate-500">Loisirs • Arcade • Karaoké • Gaming</div>
        </button>

        <nav className="flex flex-wrap gap-2">
          {navItems.map((item) => {
            const Icon = item.icon;
            const active = currentPage === item.key;
            return (
              <button
                key={item.key}
                onClick={() => setCurrentPage(item.key)}
                className={`inline-flex items-center gap-2 rounded-2xl px-4 py-2 text-sm font-medium transition ${
                  active
                    ? "bg-slate-900 text-white shadow"
                    : "bg-slate-100 text-slate-700 hover:bg-slate-200"
                }`}
              >
                <Icon className="h-4 w-4" />
                {item.label}
              </button>
            );
          })}
        </nav>
      </div>
    </header>
  );
}

function Hero({ title, subtitle, description, image, children }) {
  return (
    <section className="mx-auto max-w-7xl px-6 pt-8 pb-10">
      <div className="grid gap-8 lg:grid-cols-2 items-center">
        <div>
          <div className="inline-flex rounded-full bg-slate-100 px-4 py-2 text-sm text-slate-600">
            Bienvenue chez Cosania
          </div>
          <h1 className="mt-5 text-4xl md:text-5xl font-bold tracking-tight text-slate-900">
            {title}
          </h1>
          <p className="mt-3 text-xl text-slate-600">{subtitle}</p>
          <p className="mt-6 text-base leading-8 text-slate-600 max-w-xl">{description}</p>
          {children}
        </div>

        <div className="overflow-hidden rounded-[2rem] border border-slate-200 bg-white shadow-xl">
          <img src={image} alt={title} className="h-[420px] w-full object-cover" />
        </div>
      </div>
    </section>
  );
}

function InfoCard({ icon: Icon, title, text }) {
  return (
    <div className="rounded-3xl border border-slate-200 bg-white p-6 shadow-sm">
      <div className="flex h-12 w-12 items-center justify-center rounded-2xl bg-slate-100">
        <Icon className="h-6 w-6 text-slate-800" />
      </div>
      <h3 className="mt-4 text-lg font-semibold text-slate-900">{title}</h3>
      <p className="mt-2 text-slate-600 leading-7">{text}</p>
    </div>
  );
}

function PageSection({ page }) {
  return (
    <>
      <Hero
        title={page.title}
        subtitle={page.subtitle}
        description={page.description}
        image={page.image}
      >
        <div className="mt-8 flex flex-wrap gap-3">
          {page.features?.map((feature) => (
            <span
              key={feature}
              className="rounded-full border border-slate-200 bg-white px-4 py-2 text-sm text-slate-700"
            >
              {feature}
            </span>
          ))}
        </div>
      </Hero>

      <section className="mx-auto max-w-7xl px-6 pb-16">
        <div className="grid gap-5 md:grid-cols-3">
          <InfoCard
            icon={Users}
            title="Pour tous les groupes"
            text="Un lieu adapté aux sorties en famille, anniversaires, moments entre amis ou événements de groupe."
          />
          <InfoCard
            icon={Clock3}
            title="Moments flexibles"
            text="Profitez d’espaces pensés pour des sessions courtes ou des soirées complètes selon vos envies."
          />
          <InfoCard
            icon={MapPin}
            title="Lieu convivial"
            text="Une ambiance moderne et chaleureuse pour vivre une expérience de loisir agréable et mémorable."
          />
        </div>
      </section>
    </>
  );
}

function HomePage({ setCurrentPage }) {
  return (
    <>
      <Hero
        title="Un univers de divertissement en un seul lieu"
        subtitle="Aire de jeux, salle d’arcade, karaoké box et gaming"
        description="Cosania réunit plusieurs espaces de loisirs dans un environnement moderne, accueillant et pensé pour tous les âges. Découvrez nos univers et choisissez votre expérience."
        image={pages.accueil.image}
      >
        <div className="mt-8 flex flex-wrap gap-3">
          {navItems.map((item) => {
            const Icon = item.icon;
            return (
              <button
                key={item.key}
                onClick={() => setCurrentPage(item.key)}
                className="inline-flex items-center gap-2 rounded-2xl bg-slate-900 px-5 py-3 text-white shadow hover:bg-slate-800"
              >
                <Icon className="h-4 w-4" />
                {item.label}
              </button>
            );
          })}
        </div>
      </Hero>

      <section className="mx-auto max-w-7xl px-6 pb-16">
        <div className="grid gap-6 md:grid-cols-2 xl:grid-cols-4">
          {navItems.map((item) => {
            const data = pages[item.key];
            const Icon = item.icon;
            return (
              <button
                key={item.key}
                onClick={() => setCurrentPage(item.key)}
                className="overflow-hidden rounded-[1.75rem] border border-slate-200 bg-white text-left shadow-sm transition hover:-translate-y-1 hover:shadow-lg"
              >
                <img src={data.image} alt={data.title} className="h-52 w-full object-cover" />
                <div className="p-5">
                  <div className="inline-flex h-11 w-11 items-center justify-center rounded-2xl bg-slate-100">
                    <Icon className="h-5 w-5 text-slate-800" />
                  </div>
                  <h3 className="mt-4 text-xl font-semibold text-slate-900">{data.title}</h3>
                  <p className="mt-2 text-sm leading-7 text-slate-600">{data.description}</p>
                </div>
              </button>
            );
          })}
        </div>
      </section>
    </>
  );
}

export default function CosaniaWebsite() {
  const [currentPage, setCurrentPage] = useState("accueil");

  const content = useMemo(() => {
    if (currentPage === "accueil") {
      return <HomePage setCurrentPage={setCurrentPage} />;
    }
    return <PageSection page={pages[currentPage]} />;
  }, [currentPage]);

  return (
    <div className="min-h-screen bg-slate-50 text-slate-900">
      <Header currentPage={currentPage} setCurrentPage={setCurrentPage} />
      {content}

      <footer className="border-t border-slate-200 bg-white">
        <div className="mx-auto max-w-7xl px-6 py-8 flex flex-col gap-2 md:flex-row md:items-center md:justify-between">
          <div>
            <div className="text-lg font-semibold">Cosania</div>
            <div className="text-sm text-slate-500">Site vitrine loisirs et divertissement</div>
          </div>
          <div className="text-sm text-slate-500">Aire de jeux • Salle d’arcade • Karaoké Box • Gaming</div>
        </div>
      </footer>
    </div>
  );
}