'use client'
// Home.tsx ou page.tsx
// Placer les images dans /public/images/
import Image from "next/image";
import GallerySection from "./components/slider";

export default function Home() {

  return (
    <main className="bg-[#F8FAFC] min-h-screen text-[#283142] font-sans">
      {/* HEADER AVEC BANDEAU BLEU */}
      <header className="fixed w-full top-0 left-0 z-40">
        <div className="backdrop-blur-lg bg-white/70 border-b border-[#C3E5F9] shadow-sm flex justify-between items-center px-4 md:px-16 py-4">
          <h1 className="text-2xl font-bold tracking-widest text-[#2178aa]">
            MONELIA NAILS
          </h1>
          <nav className="space-x-8 text-lg font-medium">
            <a href="#" className="text-[#2D3D53] hover:text-[#2178aa] transition">Accueil</a>
            <a href="#" className="text-[#2D3D53] hover:text-[#2178aa] transition">Formations</a>
            <a href="#" className="text-[#2D3D53] hover:text-[#2178aa] transition">Réservation</a>
          </nav>
          <button className="px-5 py-2 bg-[#7CB9E8] hover:bg-[#2178aa] text-white rounded-xl font-semibold shadow transition">
            Connexion
          </button>
        </div>
      </header>


      {/* HERO */}
     <section
  className="relative flex items-center justify-center min-h-[70vh] md:min-h-[80vh] mt-20 overflow-hidden"
>
  {/* Image de fond : Lisa en action ou zoom ongles */}
  <Image
    src="/images/lisa-nails.jpg"
    alt="Nail art par Lisa"
    fill
    style={{ objectFit: "cover", objectPosition: "center" }}
    className="z-0"
    priority
  />
  {/* Overlay doux avec motif, couleur, ou dégradé */}
  <div className="absolute inset-0 bg-gradient-to-b from-[#EEC8C3]/70 via-[#F5EBDD]/40 to-[#C3E5F9]/80 pointer-events-none z-10" />
  {/* Petits éléments nail art décoratifs (SVG, png) */}
  <div className="absolute top-10 left-12 z-20 hidden md:block">
    {/* exemple : flacon de vernis, étoile, etc. */}
    <svg width="48" height="48" /* ... */> {/* ... */} </svg>
  </div>
  {/* Contenu principal */}
  <div className="relative z-30 flex flex-col items-center text-center px-4">
    <h2 className="text-4xl md:text-5xl font-bold mb-4 text-[#2178aa] drop-shadow-xl font-[Dancing_Script,serif]">
      Le nail art, la douceur & la créativité à portée de main
    </h2>
    <p className="text-xl md:text-2xl text-[#C97A44] mb-6 font-semibold drop-shadow">
      Bienvenue chez Monelia Nails – Manucure, formations & bonne humeur
    </p>
    <button className="px-7 py-3 bg-[#7CB9E8] hover:bg-[#2178aa] text-white rounded-2xl text-lg shadow-md transition font-semibold flex items-center gap-2">
      <svg width="20" height="20" /* ... */> {/* icône vernis */} </svg>
      Prendre rendez-vous
    </button>
    <span className="block mt-2 text-[#CBAE9E] text-sm">Réservez votre parenthèse beauté !</span>
  </div>
</section>



      {/* CARROUSEL "NOS CLIENTES AD ORENT..." */}
      <GallerySection />

      {/* À PROPOS DE LISA - GRAND, CENTRÉ */}
      <section className="flex flex-col items-center px-4 md:px-0 mt-20 mb-16">
        <div className="bg-[#E9F5FB] rounded-3xl shadow-xl px-8 py-10 flex flex-col items-center max-w-2xl w-full">
          <Image
            src="/images/lisa-profil.jpg"
            alt="Lisa, prothésiste ongulaire"
            width={140}
            height={140}
            className="rounded-full border-4 border-[#7CB9E8] shadow mb-5"
          />
          <h4 className="text-2xl font-bold text-[#2178aa] mb-3 text-center">
            À propos de Lisa
          </h4>
          <p className="text-lg text-[#2D3D53] text-center leading-relaxed">
            Lisa, prothésiste ongulaire passionnée, formée à l’art de la manucure.
            Toujours un sourire, une blague, et deux mascottes à vos pieds !<br />
            <span className="block text-[#C97A44] font-semibold mt-2">Envie de paillettes et de douceur ? C’est par ici !</span>
          </p>
        </div>
      </section>

      {/* SECTION MASCOTTES */}
      <section className="px-6 md:px-16 flex flex-col items-center md:flex-row md:justify-between gap-8 mt-8">
        <div>
          <h4 className="text-2xl font-semibold text-[#2D3D53] mb-2">
            Voici Kiki & Ryo, les mascottes du salon !
          </h4>
          <p className="text-md text-[#283142]">
            Toujours là pour accueillir les clientes avec douceur et bonne humeur !
          </p>
        </div>
        <div className="flex gap-7 mt-3">
          {/* SVG mascottes stylisées (placeholder) */}
          <svg width="70" height="70" viewBox="0 0 80 80" fill="none">
            <ellipse cx="40" cy="70" rx="28" ry="10" fill="#C97A44" opacity="0.15" />
            <circle cx="40" cy="36" r="16" fill="#C97A44" />
            <ellipse cx="34" cy="34" rx="3" ry="4" fill="#5B3A1B" />
            <ellipse cx="46" cy="34" rx="3" ry="4" fill="#5B3A1B" />
            <ellipse cx="40" cy="48" rx="7" ry="3" fill="#AD6131" />
            {/* Oreilles */}
            <ellipse cx="28" cy="22" rx="4" ry="7" fill="#C97A44" />
            <ellipse cx="52" cy="22" rx="4" ry="7" fill="#C97A44" />
          </svg>
          <svg width="70" height="70" viewBox="0 0 80 80" fill="none">
            <ellipse cx="40" cy="70" rx="28" ry="10" fill="#7CB9E8" opacity="0.15" />
            <circle cx="40" cy="36" r="16" fill="#2178aa" />
            <ellipse cx="36" cy="36" rx="3" ry="4" fill="#EEE" />
            <ellipse cx="48" cy="36" rx="3" ry="4" fill="#EEE" />
            <ellipse cx="40" cy="50" rx="7" ry="3" fill="#283142" />
            {/* Oreilles */}
            <ellipse cx="28" cy="22" rx="4" ry="7" fill="#2178aa" />
            <ellipse cx="52" cy="22" rx="4" ry="7" fill="#2178aa" />
          </svg>
        </div>
      </section>

      {/* FOOTER */}
      <footer className="mt-20 py-10 text-center bg-[#F8FAFC] border-t border-gray-200 text-[#C97A44]">
        Site réalisé avec amour, paillettes et câlins de Kiki & Ryo 🐾
      </footer>
    </main>
  );
}


