'use client';

import React, { useState, useEffect } from 'react';
import { resolveImage } from '@/data/stitch-images';

export default function Home() {
  const [formData, setFormData] = useState({
    firstName: '',
    lastName: '',
    email: '',
    message: ''
  });

  const [status, setStatus] = useState<'idle' | 'loading' | 'success' | 'error'>('idle');
  const [activeModule, setActiveModule] = useState(0);
  const [isMenuOpen, setIsMenuOpen] = useState(false);

  // Lock body scroll when mobile menu is open
  useEffect(() => {
    if (isMenuOpen) {
      document.body.style.overflow = 'hidden';
    } else {
      document.body.style.overflow = 'auto';
    }
    return () => { document.body.style.overflow = 'auto'; };
  }, [isMenuOpen]);

  const modules = [
    {
      id: 'map',
      title: 'Cartes & Plans',
      icon: 'map',
      theme: 'rose',
      description: 'Une cartographie interactive ultra-précise pour guider vos visiteurs. Géolocalisation en temps réel, points d’intérêt cliquables et navigation fluide.',
      value: 'Améliorez l’orientation et augmentez la satisfaction visiteur.'
    },
    {
      id: 'quiz',
      title: 'Jeux & Quiz',
      icon: 'sports_esports',
      theme: 'rose',
      description: 'Transformez la visite en aventure ludique. Chasses au trésor, quiz de connaissances et parcours gamifiés pour capter l’attention de tous vos visiteurs.',
      value: 'Augmentez l’engagement et la fidélisation de vos visiteurs.'
    },
    {
      id: 'video',
      title: 'Audio & Vidéo',
      icon: 'videocam',
      theme: 'rose',
      description: 'Diffusez vos contenus multimédias HD sans latence. Audio-guides immersifs, vidéos et témoignages accessibles en un clic.',
      value: 'Enrichissez l’expérience visiteur par le multimédia.'
    },
    {
      id: 'article',
      title: 'Articles & PDF',
      icon: 'article',
      theme: 'rose',
      description: 'Offrez une lecture confortable de vos contenus. Fiches descriptives, brochures PDF et catalogues numérisés.',
      value: 'Digitalisez vos supports papier sans perte de qualité.'
    },
    {
      id: 'agenda',
      title: 'Agenda & Événements',
      icon: 'calendar_month',
      theme: 'rose',
      description: 'Gérez dynamiquement votre programmation. Événements, conférences ou ateliers : vos visiteurs ne ratent plus rien.',
      value: 'Optimisez la fréquentation de vos activités.'
    },
    {
      id: 'offline',
      title: 'Accès Hors Ligne',
      icon: 'download_for_offline',
      theme: 'rose',
      description: 'Éliminez les zones blanches. Permettez le téléchargement automatique des contenus pour une consultation fluide même sans connexion 4G/Wifi.',
      value: 'Garantissez un service continu partout sur votre site.'
    },
    {
      id: 'web',
      title: 'Contenu Web & Social',
      icon: 'public',
      theme: 'rose',
      description: 'Intégrez le meilleur du web. Formulaires, réseaux sociaux ou liens externes : ouvrez votre app sur le monde.',
      value: 'Connectez votre écosystème digital en un seul lieu.'
    },
    {
      id: 'stats',
      title: 'Statistiques & Data',
      icon: 'monitoring',
      theme: 'rose',
      description: 'Analysez le comportement de vos visiteurs. Contenus populaires, temps de lecture et engagement : pilotez par la donnée.',
      value: 'Prenez des décisions éclairées basées sur l’usage réel.'
    }
  ];

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setStatus('loading');

    try {
      const response = await fetch("https://formspree.io/f/xbdaajlo", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          "Accept": "application/json"
        },
        body: JSON.stringify(formData)
      });

      if (response.ok) {
        setStatus('success');
        setFormData({ firstName: '', lastName: '', email: '', message: '' });
      } else {
        setStatus('error');
      }
    } catch (error) {
      setStatus('error');
    }
  };

  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
    const { name, value } = e.target;
    setFormData(prev => ({ ...prev, [name]: value }));
  };

  const scrollToContact = (e: React.MouseEvent) => {
    e.preventDefault();
    document.getElementById('contact')?.scrollIntoView({ behavior: 'smooth' });
  };
  return (
    <main className="bg-slate-50 text-slate-900 selection:bg-primary/30 font-display">
      {/* Top Navigation */}
      <header className="fixed top-0 left-0 right-0 z-50 bg-white/80 backdrop-blur-md border-b border-slate-200">
        <div className="max-w-7xl mx-auto px-6 h-20 flex items-center justify-between">
          <a className="flex items-center gap-3 shrink-0" href="#">
            <img
              src={resolveImage("{{DATA:IMAGE:IMAGE_14}}")}
              alt="MyInfoMate Logo"
              className="h-10 w-auto object-contain"
            />
            <span className="text-xl font-extrabold tracking-tight text-slate-900 hidden lg:block">MyInfoMate</span>
          </a>
          <nav className="hidden lg:flex items-center gap-10">
            <a className="text-sm font-semibold text-slate-600 hover:text-primary transition-colors" href="#deployment-modes">Solution</a>
            <a className="text-sm font-semibold text-slate-600 hover:text-primary transition-colors" href="#features">Fonctionnalités</a>
            <a className="text-sm font-semibold text-slate-600 hover:text-primary transition-colors" href="#audience">Public</a>
            {/* <a className="text-sm font-semibold text-slate-600 hover:text-primary transition-colors" href="#tarifs">Tarifs</a> */}
          </nav>
          <div className="flex items-center gap-4">
            <a
              href="https://manager.myinfomate.be"
              className="hidden lg:block text-sm font-bold text-slate-900 hover:text-primary px-4 py-2 transition-colors"
            >
              Connexion
            </a>
            <button
              onClick={scrollToContact}
              className="bg-primary hover:brightness-110 text-slate-900 font-extrabold text-sm px-6 py-3 rounded-full shadow-lg shadow-primary/20 transition-all active:scale-95 hidden sm:block"
            >
              Demander une démo
            </button>
            <button
              onClick={() => setIsMenuOpen(!isMenuOpen)}
              className="lg:hidden w-10 h-10 flex items-center justify-center text-slate-600 hover:text-primary transition-colors"
            >
              <span className="material-symbols-outlined text-3xl">
                {isMenuOpen ? 'close' : 'menu'}
              </span>
            </button>
          </div>
        </div>

      </header>

      {/* Mobile Menu Backdrop */}
      <div
        className={`lg:hidden fixed inset-0 bg-slate-900/60 backdrop-blur-sm z-[150] transition-opacity duration-300 ${isMenuOpen ? 'opacity-100 visible' : 'opacity-0 invisible pointer-events-none'}`}
        onClick={() => setIsMenuOpen(false)}
      />

      {/* Mobile Menu Sidebar */}
      <div className={`lg:hidden fixed inset-y-0 right-0 w-[300px] h-screen bg-white z-[200] shadow-2xl transition-transform duration-500 ease-in-out transform ${isMenuOpen ? 'translate-x-0' : 'translate-x-full'}`}>
        <div className="flex flex-col h-full bg-white">
          {/* Close Button Header */}
          <div className="flex justify-end p-6 border-b border-slate-50">
            <button
              onClick={() => setIsMenuOpen(false)}
              className="w-10 h-10 flex items-center justify-center text-slate-400 hover:text-slate-900 transition-colors"
              aria-label="Fermer le menu"
            >
              <span className="material-symbols-outlined text-3xl font-bold text-slate-900">close</span>
            </button>
          </div>

          <nav className="flex-1 flex flex-col p-8 gap-8 overflow-y-auto scrollbar-hide">
            <div className="flex flex-col gap-6">
              {[
                { label: 'ACCUEIL', href: '#' },
                { label: 'SOLUTION', href: '#deployment-modes' },
                { label: 'FONCTIONNALITÉS', href: '#features' },
                { label: 'PUBLIC', href: '#audience' },
                { label: 'CONTACT', href: '#contact' }
              ].map((item) => (
                <a
                  key={item.label}
                  className="text-sm font-bold tracking-[0.2em] text-slate-900 hover:text-primary transition-colors py-3 border-b border-slate-50 flex items-center justify-between"
                  href={item.href}
                  onClick={() => {
                    if (item.href === '#') {
                      window.scrollTo({ top: 0, behavior: 'smooth' });
                    } else if (item.href.startsWith('#')) {
                      const el = document.querySelector(item.href);
                      if (el) { el.scrollIntoView({ behavior: 'smooth' }); }
                    }
                    setIsMenuOpen(false);
                  }}
                >
                  {item.label}
                </a>
              ))}
            </div>

            <div className="mt-auto py-8 flex flex-col gap-4">
              <a
                href="https://manager.myinfomate.be"
                className="w-full text-center py-4 text-xs font-black tracking-widest text-slate-800 border-2 border-slate-100 rounded-xl hover:border-primary transition-all"
              >
                CONNEXION
              </a>
              <button
                onClick={(e) => { scrollToContact(e); setIsMenuOpen(false); }}
                className="w-full py-4 bg-primary text-slate-900 font-black text-xs tracking-widest rounded-xl shadow-xl shadow-primary/20 active:scale-95 transition-all"
              >
                DEMANDER UNE DÉMO
              </button>
            </div>
          </nav>
        </div>
      </div>

      <div className="pt-20">
        {/* Hero Section */}
        <section className="relative overflow-hidden py-20 lg:py-32">
          <div className="absolute top-0 right-0 -z-10 w-1/2 h-full bg-gradient-to-l from-primary/5 to-transparent blur-3xl"></div>
          <div className="absolute -bottom-20 -left-20 -z-10 w-80 h-80 bg-accent-violet/5 rounded-full blur-3xl"></div>
          <div className="max-w-7xl mx-auto px-6 flex flex-col lg:flex-row items-center gap-16">
            <div className="flex-1 text-center lg:text-left">
              <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-primary/10 border border-primary/20 text-slate-700 text-xs font-bold uppercase tracking-wider mb-6">
                <span className="w-2 h-2 rounded-full bg-primary animate-pulse"></span>
                La technologie au service de l'expérience visiteur
              </div>
              <h1 className="text-4xl lg:text-6xl font-extrabold text-slate-900 leading-[1.1] mb-8">
                MyInfoMate - La solution facile pour créer, gérer et diffuser du <span className="gradient-text">contenu interactif</span>
              </h1>
              <p className="text-lg text-slate-600 leading-relaxed mb-10 max-w-2xl mx-auto lg:mx-0">
                Transformez l'expérience de vos visiteurs. Gérez vos parcours sur tablettes et mobiles en temps réel, sans aucune connaissance technique.
              </p>
              <div className="flex flex-col sm:flex-row items-center justify-center lg:justify-start gap-4">
                <button
                  onClick={scrollToContact}
                  className="w-full sm:w-auto px-8 py-4 bg-primary text-slate-900 font-extrabold rounded-full shadow-xl shadow-primary/30 flex items-center justify-center gap-2 group transition-all"
                >
                  Demander une démo
                  <span className="material-symbols-outlined transition-transform group-hover:translate-x-1">arrow_forward</span>
                </button>
                {/* <button className="w-full sm:w-auto px-8 py-4 bg-white border border-slate-200 text-slate-700 font-bold rounded-full hover:bg-slate-50 transition-all shadow-sm">
                  Voir un exemple
                </button> */}
              </div>
            </div>
            <div className="flex-1 relative w-full mt-12 lg:mt-0">
              {/* UI Mockup Group - Improved for Mobile */}
              <div className="relative w-full aspect-[4/3] sm:aspect-video lg:aspect-[4/3] max-w-xl mx-auto">
                {/* Interactive Map Tablet Preview */}
                <div className="absolute top-0 left-0 w-full h-full lg:h-[85%] bg-slate-900 rounded-2xl lg:rounded-3xl overflow-hidden shadow-2xl border-4 border-slate-800 z-10 transform lg:-rotate-2">
                  <img
                    src={resolveImage("{{DATA:IMAGE:IMAGE_4}}")}
                    alt="Modern Interactive Map Interface"
                    className="w-full h-full object-cover opacity-80"
                  />
                  <div className="absolute top-4 left-6 bg-white/90 backdrop-blur px-4 py-2 rounded-xl shadow-lg border border-primary/20">
                    <p className="text-[10px] font-bold text-slate-400 uppercase">Carte Interactive</p>
                    <p className="text-xs font-extrabold text-slate-900">Parcours Découverte</p>
                  </div>
                </div>

                {/* Agenda Mobile Preview - Hidden or repositioned on very small screens */}
                <div className="hidden sm:block absolute -bottom-6 -left-6 lg:-bottom-10 lg:-left-10 w-1/3 aspect-[9/19] bg-white rounded-[1.5rem] lg:rounded-[2rem] shadow-2xl border-2 lg:border-4 border-slate-900 z-30 transform rotate-3 overflow-hidden">
                  <div className="h-full bg-slate-50 flex flex-col">
                    <div className="p-2 lg:p-3 bg-accent-violet text-white text-center">
                      <p className="text-[8px] lg:text-[10px] font-bold uppercase">Agenda</p>
                    </div>
                    <div className="p-2 space-y-2 overflow-hidden flex-1">
                      <div className="rounded-lg overflow-hidden h-12 lg:h-16 bg-slate-200 relative">
                        <img src={resolveImage("{{DATA:IMAGE:IMAGE_5}}")} alt="Mockup 1" className="w-full h-full object-cover" />
                      </div>
                      <div className="h-2 w-3/4 bg-slate-200 rounded"></div>
                      <div className="h-2 w-1/2 bg-slate-100 rounded"></div>
                    </div>
                  </div>
                  <div className="absolute top-1 left-1/2 -translate-x-1/2 w-6 lg:w-8 h-1 lg:h-2 bg-slate-900 rounded-full"></div>
                </div>

                {/* Tours Mobile Preview */}
                <div className="absolute -bottom-4 -right-4 lg:-bottom-6 lg:-right-6 w-1/3 lg:w-[35%] aspect-[9/19] bg-white rounded-[1.5rem] lg:rounded-[2rem] shadow-2xl border-2 lg:border-4 border-slate-900 z-20 transform -rotate-6 overflow-hidden">
                  <div className="h-full flex flex-col">
                    <div className="p-2 lg:p-3 bg-primary text-slate-900 text-center">
                      <p className="text-[8px] lg:text-[10px] font-bold uppercase">Visites</p>
                    </div>
                    <div className="p-2 space-y-2 flex-1">
                      <div className="flex gap-2 items-center">
                        <div className="w-8 h-8 lg:w-10 lg:h-10 rounded-lg bg-slate-200 relative overflow-hidden">
                          <img src={resolveImage("{{DATA:IMAGE:IMAGE_7}}")} alt="Mockup 2" className="w-full h-full object-cover" />
                        </div>
                        <div className="space-y-1">
                          <div className="h-1.5 w-12 bg-slate-200 rounded"></div>
                          <div className="h-1 w-8 bg-slate-100 rounded"></div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div className="absolute top-1 left-1/2 -translate-x-1/2 w-6 lg:w-8 h-1 lg:h-2 bg-slate-900 rounded-full"></div>
                </div>
              </div>
            </div>
          </div>
        </section>

        {/* Strategic Points */}
        <section className="py-24 bg-white" id="points">
          <div className="max-w-7xl mx-auto px-6">
            <div className="text-center mb-20">
              <h2 className="text-accent-violet font-extrabold uppercase tracking-widest text-sm mb-4">Points Stratégiques</h2>
              <h3 className="text-3xl lg:text-5xl font-extrabold text-slate-900 tracking-tight">La technologie au service de l'expérience visiteur</h3>
            </div>
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
              {/* Feature 1 */}
              <div className="group p-8 rounded-3xl border border-slate-100 bg-slate-50 hover:bg-white hover:shadow-2xl hover:shadow-primary/10 transition-all duration-300">
                <div className="w-14 h-14 rounded-2xl bg-primary/20 text-primary flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
                  <span className="material-symbols-outlined text-3xl">sync</span>
                </div>
                <h4 className="text-xl font-extrabold text-slate-900 mb-4">Mises à jour instantanées</h4>
                <p className="text-slate-600 leading-relaxed text-sm">Modifiez vos parcours de visite, textes et médias instantanément depuis votre navigateur.</p>
              </div>
              {/* Feature 2 */}
              <div className="group p-8 rounded-3xl border border-slate-100 bg-slate-50 hover:bg-white hover:shadow-2xl hover:shadow-accent-violet/10 transition-all duration-300">
                <div className="w-14 h-14 rounded-2xl bg-accent-violet/20 text-accent-violet flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
                  <span className="material-symbols-outlined text-3xl">code_off</span>
                </div>
                <h4 className="text-xl font-extrabold text-slate-900 mb-4">Zéro développement</h4>
                <p className="text-slate-600 leading-relaxed text-sm">Créez des applications professionnelles sans écrire une seule ligne de code. Tout est visuel.</p>
              </div>
              {/* Feature 3 */}
              <div className="group p-8 rounded-3xl border border-slate-100 bg-slate-50 hover:bg-white hover:shadow-2xl hover:shadow-accent-orange/10 transition-all duration-300">
                <div className="w-14 h-14 rounded-2xl bg-accent-orange/20 text-accent-orange flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
                  <span className="material-symbols-outlined text-3xl">download_for_offline</span>
                </div>
                <h4 className="text-xl font-extrabold text-slate-900 mb-4">Contenu hors ligne</h4>
                <p className="text-slate-600 leading-relaxed text-sm">Permettez à vos visiteurs de télécharger tout ou partie de vos parcours pour une consultation fluide même sans internet.</p>
              </div>
              {/* Feature 4 */}
              <div className="group p-8 rounded-3xl border border-slate-100 bg-slate-50 hover:bg-white hover:shadow-2xl hover:shadow-primary/10 transition-all duration-300">
                <div className="w-14 h-14 rounded-2xl bg-primary/20 text-primary flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
                  <span className="material-symbols-outlined text-3xl">dashboard_customize</span>
                </div>
                <h4 className="text-xl font-extrabold text-slate-900 mb-4">Gestion Centralisée (CMS)</h4>
                <p className="text-slate-600 leading-relaxed text-sm">Un seul outil pour piloter l'ensemble de vos dispositifs numériques et flottes de tablettes.</p>
              </div>
            </div>
          </div>
        </section>

        {/* Deployment Modes Section */}
        <section className="py-24 bg-slate-50 border-y border-slate-100" id="deployment-modes">
          <div className="max-w-7xl mx-auto px-6">
            <div className="text-center mb-16">
              <h2 className="text-primary font-extrabold uppercase tracking-widest text-sm mb-4">Modes de déploiement</h2>
              <h3 className="text-3xl lg:text-5xl font-extrabold text-slate-900 leading-tight mb-6">Une plateforme, plusieurs solutions</h3>
              <p className="text-lg text-slate-600 max-w-2xl mx-auto">
                Choisissez le mode de diffusion le plus adapté à votre lieu et à vos visiteurs. MyInfoMate s'adapte à tous les terminaux.
              </p>
            </div>
            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
              {/* Mode 1: Mobile BYOD */}
              <div className="group p-8 rounded-[2.5rem] bg-white border border-slate-100 shadow-sm hover:shadow-xl transition-all duration-300">
                <div className="w-14 h-14 rounded-2xl bg-primary/10 text-primary flex items-center justify-center mb-6 group-hover:bg-primary group-hover:text-white transition-all">
                  <span className="material-symbols-outlined text-3xl">smartphone</span>
                </div>
                <h4 className="text-xl font-extrabold text-slate-900 mb-4">Application Mobile (BYOD)</h4>
                <p className="text-slate-600 text-sm leading-relaxed">Les visiteurs utilisent leur propre smartphone pour accéder à vos parcours en toute liberté.</p>
              </div>
              {/* Mode 2: Kiosk Tablet */}
              <div className="group p-8 rounded-[2.5rem] bg-white border border-slate-100 shadow-sm hover:shadow-xl transition-all duration-300">
                <div className="w-14 h-14 rounded-2xl bg-accent-violet/10 text-accent-violet flex items-center justify-center mb-6 group-hover:bg-accent-violet group-hover:text-white transition-all">
                  <span className="material-symbols-outlined text-3xl">tablet_android</span>
                </div>
                <h4 className="text-xl font-extrabold text-slate-900 mb-4">Mode Kiosk (Tablette)</h4>
                <p className="text-slate-600 text-sm leading-relaxed">Solution robuste pré-installée sur vos flottes de tablettes pour une expérience guidée et contrôlée.</p>
              </div>
              {/* Mode 3: Web App */}
              <div className="group p-8 rounded-[2.5rem] bg-white border border-slate-100 shadow-sm hover:shadow-xl transition-all duration-300">
                <div className="w-14 h-14 rounded-2xl bg-accent-orange/10 text-accent-orange flex items-center justify-center mb-6 group-hover:bg-accent-orange group-hover:text-white transition-all">
                  <span className="material-symbols-outlined text-3xl">language</span>
                </div>
                <h4 className="text-xl font-extrabold text-slate-900 mb-4">Application Web</h4>
                <p className="text-slate-600 text-sm leading-relaxed">Accessible instantanément depuis n'importe quel navigateur moderne, sans installation préalable.</p>
              </div>
              {/* Mode 4: Future VR/AR */}
              <div className="group p-8 rounded-[2.5rem] bg-slate-900 text-white shadow-xl relative overflow-hidden">
                <div className="absolute top-0 right-0 p-3" title="Innovation à venir">
                  <span className="px-2 py-1 bg-primary text-slate-900 text-[10px] font-black uppercase rounded-md">Bientôt</span>
                </div>
                <div className="w-14 h-14 rounded-2xl bg-white/10 text-primary flex items-center justify-center mb-6">
                  <span className="material-symbols-outlined text-3xl">view_in_ar</span>
                </div>
                <h4 className="text-xl font-extrabold mb-4">Innovation VR & AR</h4>
                <p className="text-slate-400 text-sm leading-relaxed">Préparez-vous pour le futur avec des expériences immersives sur Meta Quest et lunettes connectées.</p>
              </div>
            </div>
          </div>
        </section>

        {/* Interactive Modules Section (Module Explorer) */}
        <section className="py-24 bg-white" id="features">
          <div className="max-w-7xl mx-auto px-6">
            <div className="text-center mb-16">
              <h2 className="text-rose-600 font-extrabold uppercase tracking-widest text-sm mb-4">Fonctionnalités & Modules</h2>
              <h3 className="text-3xl lg:text-5xl font-extrabold text-slate-900 leading-tight mb-6">Explorateur de modules</h3>
              <p className="text-lg text-slate-600 max-w-2xl mx-auto">
                Plongez au cœur des possibilités offertes par MyInfoMate. Découvrez comment chaque module transforme l'expérience de vos visiteurs.
              </p>
            </div>

            <div className="flex flex-col lg:flex-row gap-8 lg:gap-16 items-stretch">
              {/* Sidebar (Tabs) */}
              <div className="w-full lg:w-1/3 relative">
                <div className="lg:hidden absolute left-0 top-0 bottom-4 w-12 bg-gradient-to-r from-white to-transparent z-10 pointer-events-none"></div>
                <div className="lg:hidden absolute right-0 top-0 bottom-4 w-12 bg-gradient-to-l from-white to-transparent z-10 pointer-events-none"></div>
                <div className="flex lg:flex-col gap-3 overflow-x-auto pb-4 lg:pb-0 scrollbar-hide snap-x">
                  {modules.map((module, index) => (
                    <button
                      key={module.id}
                      onClick={() => setActiveModule(index)}
                      onMouseEnter={() => setActiveModule(index)}
                      className={`flex items-center gap-3 lg:gap-4 px-5 py-4 lg:px-6 lg:py-5 rounded-2xl border-2 transition-all text-left whitespace-nowrap lg:whitespace-normal snap-center flex-shrink-0 lg:flex-shrink-1 w-auto lg:w-full ${activeModule === index
                        ? 'bg-rose-50 border-rose-200 text-rose-600 shadow-sm'
                        : 'bg-white border-slate-100 text-slate-500 hover:bg-slate-50'
                        }`}
                    >
                      <span className={`material-symbols-outlined text-xl lg:text-2xl ${activeModule === index ? 'text-rose-600' : 'text-slate-400'}`}>
                        {module.icon}
                      </span>
                      <span className="font-bold text-xs lg:text-base">{module.title}</span>
                    </button>
                  ))}
                </div>
              </div>

              {/* Main Display */}
              <div className="flex-1 w-full lg:flex lg:flex-col">

                {/* Mobile: single centered card */}
                <div className="lg:hidden bg-slate-50 rounded-[3rem] p-8 border border-slate-100 overflow-hidden">
                  <div className="text-center mb-6">
                    <div className="inline-flex p-3 rounded-2xl bg-white shadow-sm text-rose-600 mb-4 font-bold gap-2 items-center">
                      <span className="material-symbols-outlined">{modules[activeModule].icon}</span>
                      <span className="text-xs uppercase tracking-wider">{modules[activeModule].title}</span>
                    </div>
                    <h3 className="text-2xl font-black text-slate-900 mb-4 leading-tight">{modules[activeModule].title}</h3>
                    <p className="text-slate-600 leading-relaxed mb-6">{modules[activeModule].description}</p>
                    <div className="p-4 bg-rose-600/5 border border-rose-100 rounded-2xl">
                      <p className="text-rose-600 font-bold text-sm flex items-center justify-center gap-2">
                        <span className="material-symbols-outlined text-base">verified</span>
                        {modules[activeModule].value}
                      </p>
                    </div>
                  </div>
                  <div className="flex justify-center">
                    <div className="relative w-[200px] h-[420px] bg-slate-900 rounded-[3rem] border-[8px] border-slate-800 shadow-2xl overflow-hidden">
                      <div className="absolute top-0 left-1/2 -translate-x-1/2 w-24 h-5 bg-slate-800 rounded-b-2xl z-20"></div>
                      <div className="absolute inset-[2px] bg-white rounded-[2.25rem] overflow-hidden">
                        <div className="h-full flex flex-col pt-7">
                          <header className="h-12 border-b border-slate-100 flex items-center px-3 bg-white/80 sticky top-0 z-10">
                            <div className="w-7 h-7 rounded-lg bg-rose-100 flex items-center justify-center text-rose-600">
                              <span className="material-symbols-outlined text-base">{modules[activeModule].icon}</span>
                            </div>
                            <span className="ml-2 font-bold text-xs text-slate-900 truncate">{modules[activeModule].title}</span>
                          </header>
                          <div className="p-3 flex-1 space-y-3">
                            <div className="h-32 rounded-xl bg-slate-100 flex items-center justify-center relative overflow-hidden">
                              <span className="material-symbols-outlined text-4xl text-slate-300">{modules[activeModule].icon}</span>
                              <div className="absolute inset-0 bg-gradient-to-tr from-rose-500/10 to-transparent"></div>
                            </div>
                            <div className="h-2 w-full bg-slate-100 rounded-full"></div>
                            <div className="h-2 w-2/3 bg-slate-100 rounded-full"></div>
                            <div className="h-14 w-full bg-slate-50 border border-slate-100 rounded-xl p-2 flex gap-2">
                              <div className="w-8 h-8 rounded-lg bg-rose-200 shrink-0"></div>
                              <div className="space-y-1 flex-1">
                                <div className="h-1.5 w-full bg-slate-200 rounded-full"></div>
                                <div className="h-1.5 w-1/2 bg-slate-200 rounded-full"></div>
                              </div>
                            </div>
                            <div className="grid grid-cols-2 gap-2">
                              <div className="h-8 bg-slate-100 rounded-lg"></div>
                              <div className="h-8 bg-rose-600 rounded-lg"></div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>

                {/* Desktop: original layout + enobase-style 3D phone stack */}
                <div className="hidden lg:flex flex-1 bg-slate-50 rounded-[3rem] p-10 border border-slate-100 gap-10 items-center">
                  {/* Description */}
                  <div className="flex-1 relative z-10 text-left">
                    <div className="inline-flex p-3 rounded-2xl bg-white shadow-sm text-rose-600 mb-5 font-bold gap-2 items-center">
                      <span className="material-symbols-outlined">{modules[activeModule].icon}</span>
                      <span className="text-xs uppercase tracking-wider">{modules[activeModule].title}</span>
                    </div>
                    <h3 className="text-3xl font-black text-slate-900 mb-5 leading-tight">{modules[activeModule].title}</h3>
                    <p className="text-slate-600 text-base leading-relaxed mb-6">{modules[activeModule].description}</p>
                    <div className="p-5 bg-rose-600/5 border border-rose-100 rounded-2xl">
                      <p className="text-rose-600 font-bold text-sm flex items-center gap-2">
                        <span className="material-symbols-outlined text-base">verified</span>
                        Valeur ajoutée : {modules[activeModule].value}
                      </p>
                    </div>
                  </div>

                  {/* Enobase-style 3D horizontal perspective phone stack */}
                  <div className="flex-shrink-0 relative" style={{ width: '280px', height: '480px' }}>
                    <div style={{ position: 'absolute', inset: 0, transform: 'perspective(900px) rotateX(6deg) rotateY(-15deg)' }}>
                      {modules.map((module, index) => {
                        const deckPos = (index - activeModule + modules.length) % modules.length;
                        const isActive = deckPos === 0;
                        return (
                          <div
                            key={module.id}
                            style={{
                              position: 'absolute',
                              top: 0,
                              left: 0,
                              transformOrigin: 'top left',
                              transform: `translateX(${deckPos * 12}px) scale(${1 - deckPos * 0.06})`,
                              zIndex: modules.length - deckPos,
                              opacity: isActive ? 1 : Math.max(0.06, 0.55 - deckPos * 0.1),
                              transition: 'transform 0.45s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.45s cubic-bezier(0.4, 0, 0.2, 1)',
                            }}
                          >
                            <div className={`relative w-[240px] h-[480px] rounded-[3rem] border-[8px] overflow-hidden ${isActive ? 'bg-slate-900 border-slate-800 shadow-2xl shadow-rose-500/20' : 'bg-slate-800 border-slate-700 shadow-xl'}`}>
                              <div className="absolute top-0 left-1/2 -translate-x-1/2 w-28 h-6 bg-slate-800 rounded-b-2xl z-20"></div>
                              <div className="absolute inset-[2px] bg-white rounded-[2.25rem] overflow-hidden">
                                <div className="h-full flex flex-col pt-8">
                                  <header className="h-14 border-b border-slate-100 flex items-center px-4 bg-white/80 backdrop-blur-sm sticky top-0 z-10">
                                    <div className="w-8 h-8 rounded-lg bg-rose-100 flex items-center justify-center text-rose-600">
                                      <span className="material-symbols-outlined text-lg">{module.icon}</span>
                                    </div>
                                    <span className="ml-3 font-bold text-xs text-slate-900 truncate">{module.title}</span>
                                  </header>
                                  <div className="p-4 flex-1 space-y-4">
                                    <div className="h-36 rounded-2xl bg-slate-100 flex items-center justify-center relative overflow-hidden">
                                      <span className="material-symbols-outlined text-5xl text-slate-300">{module.icon}</span>
                                      <div className="absolute inset-0 bg-gradient-to-tr from-rose-500/10 to-transparent"></div>
                                    </div>
                                    <div className="h-3 w-full bg-slate-100 rounded-full"></div>
                                    <div className="h-3 w-2/3 bg-slate-100 rounded-full"></div>
                                    <div className="h-20 w-full bg-slate-50 border border-slate-100 rounded-xl p-3 flex gap-3">
                                      <div className="w-10 h-10 rounded-lg bg-rose-200 shrink-0"></div>
                                      <div className="space-y-2 flex-1">
                                        <div className="h-2 w-full bg-slate-200 rounded-full"></div>
                                        <div className="h-2 w-1/2 bg-slate-200 rounded-full"></div>
                                      </div>
                                    </div>
                                    <div className="grid grid-cols-2 gap-3">
                                      <div className="h-10 bg-slate-100 rounded-xl"></div>
                                      <div className="h-10 bg-rose-600 rounded-xl"></div>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        );
                      })}
                    </div>
                  </div>
                </div>

              </div>
            </div>
          </div>
        </section>

        {/* White Label / Value Proposition */}
        <section className="py-24 bg-slate-50 border-y border-slate-100 relative overflow-hidden" id="whitelabel">
          <div className="max-w-7xl mx-auto px-6">
            <div className="flex flex-col lg:flex-row items-center gap-20">
              <div className="flex-1 order-2 lg:order-1">
                <div className="relative max-w-md mx-auto">
                  <div className="bg-white p-6 rounded-3xl shadow-xl border border-slate-200 transform -rotate-3 hover:rotate-0 transition-transform duration-500">
                    <div className="flex items-center gap-3 mb-6">
                      <div className="w-8 h-8 rounded-full bg-accent-orange"></div>
                      <div className="h-4 w-32 bg-slate-100 rounded-full"></div>
                    </div>
                    <div className="space-y-4">
                      <div className="h-40 bg-slate-50 rounded-2xl flex items-center justify-center overflow-hidden border border-dashed border-slate-200">
                        <span className="material-symbols-outlined text-slate-300 text-5xl">palette</span>
                      </div>
                      <div className="h-4 w-full bg-slate-100 rounded-full"></div>
                      <div className="h-4 w-2/3 bg-slate-100 rounded-full"></div>
                      <div className="flex gap-2 pt-2">
                        <div className="h-10 flex-1 bg-accent-orange rounded-full"></div>
                        <div className="h-10 flex-1 bg-slate-900 rounded-full"></div>
                      </div>
                    </div>
                  </div>
                  <div className="absolute -bottom-6 -right-6 w-48 h-48 bg-white p-4 rounded-3xl shadow-2xl border border-slate-200 transform rotate-6 hover:rotate-0 transition-transform duration-500 z-10">
                    <div className="flex flex-col gap-2">
                      <p className="text-[10px] font-bold text-slate-400 uppercase">Palette de Couleurs</p>
                      <div className="grid grid-cols-4 gap-2">
                        <div className="w-full aspect-square rounded-lg bg-primary"></div>
                        <div className="w-full aspect-square rounded-lg bg-accent-violet"></div>
                        <div className="w-full aspect-square rounded-lg bg-accent-orange"></div>
                        <div className="w-full aspect-square rounded-lg bg-slate-900"></div>
                      </div>
                      <div className="mt-4 p-2 bg-primary/10 rounded-xl text-center">
                        <p className="text-[10px] text-primary font-bold">Thème Appliqué avec succès</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div className="flex-1 order-1 lg:order-2">
                <h2 className="text-accent-orange font-extrabold uppercase tracking-widest text-sm mb-4">White label</h2>
                <h3 className="text-3xl lg:text-5xl font-extrabold text-slate-900 leading-tight mb-8">Votre marque, votre application. Pas la nôtre.</h3>
                <p className="text-lg text-slate-600 leading-relaxed mb-8">
                  Bénéficiez d'une solution <strong>White Label</strong> complète. Personnalisez l'interface aux couleurs de votre lieu, utilisez votre propre logo et typographie pour une immersion totale de vos visiteurs dans votre univers.
                </p>
                <ul className="space-y-4 mb-10 text-slate-700 font-semibold">
                  <li className="flex items-center gap-3">
                    <span className="material-symbols-outlined text-accent-orange">check_circle</span>
                    Personnalisation complète des interfaces
                  </li>
                  <li className="flex items-center gap-3">
                    <span className="material-symbols-outlined text-accent-orange">check_circle</span>
                    Votre logo sur l'écran d'accueil
                  </li>
                  <li className="flex items-center gap-3">
                    <span className="material-symbols-outlined text-accent-orange">check_circle</span>
                    Typographies et iconographies sur-mesure
                  </li>
                </ul>
                <button className="bg-slate-900 text-white font-bold px-8 py-4 rounded-full hover:bg-slate-800 transition-all flex items-center gap-2">
                  Découvrir la personnalisation
                  <span className="material-symbols-outlined">brush</span>
                </button>
              </div>
            </div>
          </div>
        </section>

        {/* Target Audience */}
        <section className="py-24 bg-white" id="audience">
          <div className="max-w-7xl mx-auto px-6">
            <div className="text-center mb-16">
              <h3 className="text-3xl lg:text-4xl font-extrabold text-slate-900 mb-4">Une solution pensée pour vous</h3>
              <p className="text-slate-600 max-w-2xl mx-auto">Que vous soyez une petite galerie ou un monument national, MyInfoMate s'adapte à vos besoins.</p>
            </div>
            <div className="grid grid-cols-1 md:grid-cols-3 gap-10">
              <div className="text-center p-6 flex flex-col items-center">
                <div className="w-24 h-24 icon-circle mb-6 text-accent-violet">
                  <span className="material-symbols-outlined text-5xl">museum</span>
                </div>
                <h4 className="text-2xl font-bold mb-3">Musées & Galeries</h4>
                <p className="text-slate-600 text-sm">Digitalisez vos collections et créez des guides multimédias captivants pour vos expositions permanentes et temporaires.</p>
              </div>
              <div className="text-center p-6 flex flex-col items-center">
                <div className="w-24 h-24 icon-circle mb-6 text-primary">
                  <span className="material-symbols-outlined text-5xl">travel_explore</span>
                </div>
                <h4 className="text-2xl font-bold mb-3">Offices de Tourisme</h4>
                <p className="text-slate-600 text-sm">Guidez les visiteurs à travers votre ville ou région avec des cartes interactives et des points d'intérêt géo-localisés.</p>
              </div>
              <div className="text-center p-6 flex flex-col items-center">
                <div className="w-24 h-24 icon-circle mb-6 text-accent-orange">
                  <span className="material-symbols-outlined text-5xl">hotel</span>
                </div>
                <h4 className="text-2xl font-bold mb-3">Hôtels & Loisirs</h4>
                <p className="text-slate-600 text-sm">Offrez à vos clients une expérience premium : services, activités, carte interactive du lieu et recommandations personnalisées.</p>
              </div>
            </div>
          </div>
        </section>

        {/* Final CTA */}
        <section className="py-20 bg-slate-50">
          <div className="max-w-7xl mx-auto px-6">
            <div className="bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 rounded-[3rem] p-12 lg:p-24 text-center relative overflow-hidden">
              <div className="absolute top-0 left-0 w-full h-full opacity-10 pointer-events-none">
                <div className="absolute top-10 left-10 w-40 h-40 bg-primary rounded-full blur-3xl"></div>
                <div className="absolute bottom-10 right-10 w-60 h-60 bg-accent-violet rounded-full blur-3xl"></div>
              </div>
              <h2 className="text-3xl lg:text-5xl font-extrabold text-white mb-8 relative z-10">
                Prêt à transformer votre <span className="text-primary">expérience visiteur</span> ?
              </h2>
              <p className="text-slate-400 text-lg mb-12 max-w-2xl mx-auto relative z-10">
                Rejoignez des dizaines de lieux qui font confiance à MyInfoMate pour engager leurs visiteurs.
              </p>
              <div className="flex flex-col sm:flex-row items-center justify-center gap-6 relative z-10">
                <button
                  onClick={scrollToContact}
                  className="w-full sm:w-auto px-10 py-5 bg-primary text-slate-900 font-extrabold rounded-full shadow-2xl shadow-primary/40 hover:scale-105 transition-all"
                >
                  Demander une démo gratuite
                </button>
                <a
                  href="mailto:contact@unov.be"
                  className="w-full sm:w-auto px-10 py-5 bg-white/10 text-white font-bold rounded-full hover:bg-white/20 transition-all border border-white/10 text-center"
                >
                  Nous contacter
                </a>
              </div>
            </div>
          </div>
        </section>

        {/* Contact Form Section */}
        <section className="py-24 bg-white relative overflow-hidden" id="contact">
          <div className="absolute top-0 right-0 -z-10 w-64 h-64 bg-primary/5 rounded-full blur-3xl"></div>
          <div className="absolute bottom-0 left-0 -z-10 w-96 h-96 bg-accent-violet/5 rounded-full blur-3xl"></div>

          <div className="max-w-4xl mx-auto px-6">
            <div className="bg-white rounded-[3rem] shadow-2xl border border-slate-100 p-10 lg:p-16 relative">
              <div className="text-center mb-12">
                <h2 className="text-accent-orange font-extrabold uppercase tracking-widest text-sm mb-4">Contact & Démo</h2>
                <h3 className="text-3xl lg:text-4xl font-extrabold text-slate-900 mb-4">Prêt à commencer l'aventure ?</h3>
                <p className="text-slate-600">Remplissez ce formulaire et nous reviendrons vers vous pour une démo personnalisée.</p>
              </div>

              {status === 'success' ? (
                <div className="text-center py-20">
                  <div className="w-20 h-20 bg-primary/20 text-primary rounded-full flex items-center justify-center mx-auto mb-6">
                    <span className="material-symbols-outlined text-5xl">task_alt</span>
                  </div>
                  <h3 className="text-3xl font-extrabold text-slate-900 mb-4">Message envoyé !</h3>
                  <p className="text-slate-600 mb-8">Merci pour votre intérêt. Nous reviendrons vers vous très prochainement.</p>
                  <button
                    onClick={() => setStatus('idle')}
                    className="text-primary font-bold hover:underline"
                  >
                    Envoyer un autre message
                  </button>
                </div>
              ) : (
                <form onSubmit={handleSubmit} className="space-y-6">
                  {status === 'error' && (
                    <div className="p-4 bg-red-50 text-red-600 rounded-xl text-sm font-medium border border-red-100 flex items-center gap-2">
                      <span className="material-symbols-outlined text-sm">error</span>
                      Une erreur est survenue. Veuillez réessayer ou nous contacter directement par email.
                    </div>
                  )}
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div className="space-y-2">
                      <label className="text-sm font-bold text-slate-700 ml-1">Prénom</label>
                      <input
                        type="text"
                        name="firstName"
                        required
                        value={formData.firstName}
                        onChange={handleChange}
                        className="w-full px-6 py-4 bg-slate-50 border border-slate-200 rounded-2xl focus:ring-2 focus:ring-primary focus:border-transparent outline-none transition-all"
                        placeholder="Jean"
                      />
                    </div>
                    <div className="space-y-2">
                      <label className="text-sm font-bold text-slate-700 ml-1">Nom</label>
                      <input
                        type="text"
                        name="lastName"
                        required
                        value={formData.lastName}
                        onChange={handleChange}
                        className="w-full px-6 py-4 bg-slate-50 border border-slate-200 rounded-2xl focus:ring-2 focus:ring-primary focus:border-transparent outline-none transition-all"
                        placeholder="Dupont"
                      />
                    </div>
                  </div>
                  <div className="space-y-2">
                    <label className="text-sm font-bold text-slate-700 ml-1">Email</label>
                    <input
                      type="email"
                      name="email"
                      required
                      value={formData.email}
                      onChange={handleChange}
                      className="w-full px-6 py-4 bg-slate-50 border border-slate-200 rounded-2xl focus:ring-2 focus:ring-primary focus:border-transparent outline-none transition-all"
                      placeholder="jean.dupont@gmail.be"
                    />
                  </div>
                  <div className="space-y-2">
                    <label className="text-sm font-bold text-slate-700 ml-1">Votre message (facultatif)</label>
                    <textarea
                      name="message"
                      rows={4}
                      value={formData.message}
                      onChange={handleChange}
                      className="w-full px-6 py-4 bg-slate-50 border border-slate-200 rounded-2xl focus:ring-2 focus:ring-primary focus:border-transparent outline-none transition-all resize-none"
                      placeholder="Parlez-nous de votre projet..."
                    ></textarea>
                  </div>
                  <button
                    type="submit"
                    disabled={status === 'loading'}
                    className={`w-full py-5 bg-slate-900 text-white font-extrabold rounded-2xl shadow-xl hover:bg-slate-800 transition-all flex items-center justify-center gap-3 group ${status === 'loading' ? 'opacity-70 cursor-not-allowed' : ''}`}
                  >
                    {status === 'loading' ? (
                      <span className="w-5 h-5 border-2 border-white/30 border-t-white rounded-full animate-spin"></span>
                    ) : (
                      <>
                        Envoyer ma demande
                        <span className="material-symbols-outlined group-hover:translate-x-1 transition-transform">send</span>
                      </>
                    )}
                  </button>
                </form>
              )}
            </div>
          </div>
        </section>
      </div>

      {/* Footer */}
      <footer className="bg-slate-50 pt-20 pb-10 border-t border-slate-200">
        <div className="max-w-7xl mx-auto px-6">
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12 mb-16">
            <div className="col-span-1 lg:col-span-1">
              <div className="flex items-center gap-3 mb-6">
                <img
                  src={resolveImage("{{DATA:IMAGE:IMAGE_14}}")}
                  alt="MyInfoMate Logo"
                  className="h-8 w-auto object-contain"
                />
                <span className="text-lg font-extrabold tracking-tight text-slate-900">MyInfoMate</span>
              </div>
              <p className="text-slate-500 text-sm leading-relaxed mb-6">
                La solution SaaS pour la digitalisation de vos lieux. Créativité et technologie au service de l'expérience visiteur.
              </p>
              <div className="flex gap-4">
                <a className="w-10 h-10 rounded-full bg-slate-200 flex items-center justify-center text-slate-600 hover:bg-primary hover:text-slate-900 transition-all" href="#">
                  <span className="material-symbols-outlined">public</span>
                </a>
                <a className="w-10 h-10 rounded-full bg-slate-200 flex items-center justify-center text-slate-600 hover:bg-primary hover:text-slate-900 transition-all" href="mailto:contact@unov.be">
                  <span className="material-symbols-outlined">alternate_email</span>
                </a>
              </div>
            </div>
            <div>
              {/* <h4 className="font-bold text-slate-900 mb-6 uppercase text-xs tracking-widest">Produit</h4>
              <ul className="space-y-4">
                <li><a className="text-sm text-slate-500 hover:text-primary transition-colors" href="#">Fonctionnalités</a></li>
                <li><a className="text-sm text-slate-500 hover:text-primary transition-colors" href="#">Marque Blanche</a></li>
                <li><a className="text-sm text-slate-500 hover:text-primary transition-colors" href="#">CMS Centralisé</a></li>
                <li><a className="text-sm text-slate-500 hover:text-primary transition-colors" href="#">Tarifs</a></li>
              </ul> */}
            </div>
            <div>
              {/* <h4 className="font-bold text-slate-900 mb-6 uppercase text-xs tracking-widest">Entreprise</h4>
              <ul className="space-y-4">
                <li><a className="text-sm text-slate-500 hover:text-primary transition-colors" href="#">À propos</a></li>
                <li><a className="text-sm text-slate-500 hover:text-primary transition-colors" href="#">Blog</a></li>
                <li><a className="text-sm text-slate-500 hover:text-primary transition-colors" href="#">Partenaires</a></li>
                <li><a className="text-sm text-slate-500 hover:text-primary transition-colors" href="#">Contact</a></li>
              </ul> */}
            </div>
            <div>
              <h4 className="font-bold text-slate-900 mb-6 uppercase text-xs tracking-widest">Contact</h4>
              <ul className="space-y-4">
                <li className="flex items-start gap-3 text-sm text-slate-500">
                  <span className="material-symbols-outlined text-primary text-sm">location_on</span>
                  UNOV, 5020 Vedrin
                </li>
                <li className="flex items-center gap-3 text-sm text-slate-500">
                  <span className="material-symbols-outlined text-primary text-sm">mail</span>
                  contact@unov.be
                </li>
                <li className="flex items-center gap-3 text-sm text-slate-500">
                  <span className="material-symbols-outlined text-primary text-sm">call</span>
                  +32 (0)498 07 95 35
                </li>
              </ul>
            </div>
          </div>
          <div className="pt-8 border-t border-slate-200 flex flex-col md:flex-row justify-between items-center gap-4">
            <p className="text-xs text-slate-400">© 2026 MyInfoMate. Tous droits réservés.</p>
            <div className="flex gap-8">
              <a className="text-xs text-slate-400 hover:text-slate-600" href="#">Mentions Légales</a>
              <a className="text-xs text-slate-400 hover:text-slate-600" href="#">Confidentialité</a>
            </div>
          </div>
        </div>
      </footer>
    </main>
  );
}