import { useState } from "react";
import { Sun, Battery, Radio, ShoppingCart, Calculator, Phone, MessageCircle, X, Send, Menu, ChevronRight, MapPin, Facebook, Instagram, Linkedin, CheckCircle2, Wrench } from "lucide-react";

const GREEN = "#0F3D2E";
const GREEN_LIGHT = "#1B6B4A";
const ORANGE = "#E07A2C";
const GOLD = "#C9A24B";
const CREAM = "#F7F5EF";

const PRODUCTS = [
  { id: 1, cat: "Panneaux solaires", name: "Panneau monocristallin 450W", desc: "Haute performance, garantie 25 ans.", price: null },
  { id: 2, cat: "Batteries lithium", name: "Batterie Lithium 5 kWh", desc: "Stockage résidentiel, cycles longue durée.", price: null },
  { id: 3, cat: "Batteries lithium", name: "Batterie Lithium 10 kWh", desc: "Stockage commercial et PME.", price: null },
  { id: 4, cat: "Onduleurs", name: "Onduleur hybride 5kVA", desc: "Gestion intelligente solaire + réseau.", price: null },
  { id: 5, cat: "Kits solaires", name: "Kit solaire résidentiel 3kW", desc: "Panneaux + onduleur + batterie 5kWh.", price: null },
  { id: 6, cat: "Câbles", name: "Câble solaire certifié (rouleau)", desc: "Câble DC certifié, usage extérieur.", price: null },
];

const CATS = ["Tous", "Panneaux solaires", "Batteries lithium", "Onduleurs", "Kits solaires", "Câbles"];

function Section({ id, children, bg }) {
  return <section id={id} style={{ background: bg || "transparent" }} className="py-20 px-6 md:px-12">{children}</section>;
}

function Eyebrow({ children }) {
  return <p style={{ color: ORANGE }} className="font-semibold tracking-wide mb-3 text-sm">{children}</p>;
}

function Btn({ children, variant = "primary", onClick, small }) {
  const base = "rounded-full font-semibold transition-all duration-200 inline-flex items-center gap-2 justify-center";
  const size = small ? "px-4 py-2 text-sm" : "px-7 py-3.5";
  if (variant === "primary")
    return <button onClick={onClick} className={`${base} ${size}`} style={{ background: ORANGE, color: "white" }}>{children}</button>;
  if (variant === "outline")
    return <button onClick={onClick} className={`${base} ${size} border-2`} style={{ borderColor: "white", color: "white" }}>{children}</button>;
  return <button onClick={onClick} className={`${base} ${size} border-2`} style={{ borderColor: GREEN, color: GREEN }}>{children}</button>;
}

function Logo({ light }) {
  return (
    <div className="flex items-center gap-2.5">
      <div className="w-10 h-10 rounded-full flex items-center justify-center relative" style={{ background: `conic-gradient(${GOLD}, ${GREEN_LIGHT}, ${ORANGE}, ${GOLD})` }}>
        <div className="w-8 h-8 rounded-full flex items-center justify-center" style={{ background: light ? GREEN : "white" }}>
          <Sun size={16} color={ORANGE} strokeWidth={2.5} />
        </div>
      </div>
      <div className="leading-none">
        <div className="font-bold text-lg tracking-tight" style={{ color: light ? "white" : GREEN }}>EATEL <span style={{ color: ORANGE }}>NIGER</span></div>
        <div className="text-[10px] tracking-widest" style={{ color: light ? GOLD : GREEN_LIGHT }}>ENERGY &amp; TELECOM</div>
      </div>
    </div>
  );
}

export default function EatelDemo() {
  const [menuOpen, setMenuOpen] = useState(false);
  const [cart, setCart] = useState([]);
  const [activeCat, setActiveCat] = useState("Tous");
  const [chatOpen, setChatOpen] = useState(false);
  const [chatStep, setChatStep] = useState("start");
  const [chatMsgs, setChatMsgs] = useState([{ from: "bot", text: "Bonjour 👋 Je suis l'assistant virtuel EATEL. Je peux vous aider à trouver une solution énergétique ou télécom adaptée à votre besoin." }]);
  const [devisOpen, setDevisOpen] = useState(false);

  // calculator state
  const [facture, setFacture] = useState(50000);
  const [conso, setConso] = useState(300);
  const [batiment, setBatiment] = useState("Résidentiel");
  const [ville, setVille] = useState("Niamey");
  const [heures, setHeures] = useState(8);
  const [result, setResult] = useState(null);

  function addToCart(p) {
    setCart((c) => [...c, p]);
  }

  function computeSolar() {
    const kWhJour = conso / 30;
    const puissance = Math.max(1, Math.round((kWhJour / (heures || 1)) * 10) / 10);
    const stockage = Math.round(kWhJour * 0.7 * 10) / 10;
    const investissement = Math.round(puissance * 650000 + stockage * 400000);
    const economieMensuelle = Math.round(facture * 0.75);
    const economieAnnuelle = economieMensuelle * 12;
    const retour = economieAnnuelle > 0 ? Math.round((investissement / economieAnnuelle) * 10) / 10 : 0;
    setResult({ puissance, stockage, investissement, economieMensuelle, economieAnnuelle, retour });
  }

  function botReply(quick) {
    setChatMsgs((m) => [...m, { from: "user", text: quick }]);
    let reply = "Merci pour votre message. Un conseiller EATEL vous recontactera pour affiner votre besoin.";
    if (quick.includes("solaire")) reply = "Très bien ☀️ Quelle est votre ville et le type de bâtiment (résidentiel, commerce, industrie) ?";
    if (quick.includes("Batterie")) reply = "🔋 Cherchez-vous une capacité précise (5, 10, 15 kWh) ou souhaitez-vous une recommandation selon votre consommation ?";
    if (quick.includes("télécom")) reply = "📡 Décrivez votre besoin : déploiement de site, faisceau hertzien, réseau d'entreprise ou maintenance ?";
    if (quick.includes("Store")) reply = "🛒 Je vous redirige vers le Store EATEL ci-dessous pour parcourir nos produits.";
    if (quick.includes("rentabilité")) reply = "🧮 Utilisez la calculatrice solaire plus bas — je peux aussi noter votre facture mensuelle ici si vous préférez.";
    if (quick.includes("devis")) reply = "💰 Pouvez-vous me communiquer votre nom, téléphone et ville pour préparer votre demande de devis ?";
    if (quick.includes("Contacter")) reply = "📞 Vous pouvez joindre EATEL Niger directement, ou laissez vos coordonnées et un conseiller vous rappelle.";
    setTimeout(() => setChatMsgs((m) => [...m, { from: "bot", text: reply }]), 500);
  }

  const filteredProducts = activeCat === "Tous" ? PRODUCTS : PRODUCTS.filter((p) => p.cat === activeCat);

  return (
    <div style={{ background: CREAM, fontFamily: "'Inter', system-ui, sans-serif", color: "#1a1a1a" }} className="min-h-screen">
      {/* NAVBAR */}
      <header className="sticky top-0 z-40 shadow-sm" style={{ background: "rgba(15,61,46,0.97)", backdropFilter: "blur(6px)" }}>
        <div className="max-w-7xl mx-auto flex items-center justify-between px-6 md:px-12 py-3">
          <Logo light />
          <nav className="hidden lg:flex items-center gap-7 text-sm font-medium" style={{ color: "#EDEAE0" }}>
            {["Accueil", "Énergie", "Télécom", "Store", "Calculatrice", "Réalisations", "Contact"].map((n) => (
              <a key={n} href={`#${n.toLowerCase()}`} className="hover:opacity-70 transition-opacity">{n}</a>
            ))}
          </nav>
          <div className="hidden lg:block">
            <Btn onClick={() => setDevisOpen(true)}>Demander un devis</Btn>
          </div>
          <button className="lg:hidden text-white" onClick={() => setMenuOpen(!menuOpen)}><Menu /></button>
        </div>
        {menuOpen && (
          <div className="lg:hidden px-6 pb-4 flex flex-col gap-3 text-sm" style={{ color: "#EDEAE0" }}>
            {["Accueil", "Énergie", "Télécom", "Store", "Calculatrice", "Réalisations", "Contact"].map((n) => (
              <a key={n} href={`#${n.toLowerCase()}`} onClick={() => setMenuOpen(false)}>{n}</a>
            ))}
            <Btn onClick={() => setDevisOpen(true)}>Demander un devis</Btn>
          </div>
        )}
      </header>

      {/* HERO */}
      <section id="accueil" className="relative overflow-hidden" style={{ background: `linear-gradient(160deg, ${GREEN} 0%, #0a2b20 60%, #081f18 100%)` }}>
        <div className="absolute inset-0 opacity-20" style={{ backgroundImage: `repeating-linear-gradient(120deg, ${GOLD} 0px, transparent 2px, transparent 60px)` }} />
        <div className="max-w-7xl mx-auto px-6 md:px-12 py-24 md:py-32 relative grid md:grid-cols-2 gap-12 items-center">
          <div>
            <Eyebrow>Energy &amp; Telecom Niger</Eyebrow>
            <h1 className="text-4xl md:text-6xl font-bold leading-[1.05] text-white mb-6">
              L'énergie et le réseau qui font tourner votre activité
            </h1>
            <p className="text-lg mb-8" style={{ color: "#CFE3D8" }}>
              Des solutions solaires fiables et des infrastructures télécom robustes, pensées pour le Niger.
            </p>
            <div className="flex flex-wrap gap-4">
              <Btn onClick={() => document.getElementById("solutions")?.scrollIntoView({ behavior: "smooth" })}>Découvrir nos solutions <ChevronRight size={18} /></Btn>
              <Btn variant="outline" onClick={() => setDevisOpen(true)}>Demander un devis</Btn>
            </div>
          </div>
          <div className="relative h-72 md:h-96">
            <div className="absolute right-0 top-0 w-56 h-72 rounded-2xl" style={{ background: `linear-gradient(135deg, ${GREEN_LIGHT}, ${GREEN})`, transform: "rotate(6deg)" }} />
            <div className="absolute left-0 bottom-0 w-64 h-56 rounded-2xl flex flex-col items-center justify-center gap-3" style={{ background: "rgba(255,255,255,0.06)", border: `1px solid ${GOLD}55` }}>
              <div className="grid grid-cols-4 gap-1">
                {Array.from({ length: 12 }).map((_, i) => (
                  <div key={i} className="w-8 h-8 rounded-sm" style={{ background: "linear-gradient(160deg,#1a3a5c,#0d1f33)", border: "1px solid #3a5a7a" }} />
                ))}
              </div>
              <Radio size={28} color={GOLD} />
            </div>
          </div>
        </div>
      </section>

      {/* SOLUTIONS OVERVIEW */}
      <Section id="solutions">
        <div className="max-w-7xl mx-auto">
          <Eyebrow>Nos domaines</Eyebrow>
          <h2 className="text-3xl md:text-4xl font-bold mb-12" style={{ color: GREEN }}>Deux expertises, une même exigence</h2>
          <div className="grid md:grid-cols-2 gap-6">
            <div className="p-8 rounded-2xl" style={{ background: GREEN, color: "white" }}>
              <Sun size={30} color={GOLD} className="mb-4" />
              <h3 className="text-xl font-bold mb-2">Energy Solutions</h3>
              <p style={{ color: "#CFE3D8" }} className="mb-5">Solutions solaires, stockage lithium, onduleurs, systèmes ESS et backup énergétique.</p>
              <a href="#énergie" className="font-semibold inline-flex items-center gap-1" style={{ color: ORANGE }}>En savoir plus <ChevronRight size={16} /></a>
            </div>
            <div className="p-8 rounded-2xl border-2" style={{ borderColor: GREEN, background: "white" }}>
              <Radio size={30} color={ORANGE} className="mb-4" />
              <h3 className="text-xl font-bold mb-2" style={{ color: GREEN }}>Telecom Solutions</h3>
              <p className="text-gray-600 mb-5">Infrastructures télécom, sites radio, transmission, réseaux et maintenance.</p>
              <a href="#télécom" className="font-semibold inline-flex items-center gap-1" style={{ color: GREEN }}>En savoir plus <ChevronRight size={16} /></a>
            </div>
          </div>
        </div>
      </Section>

      {/* SOLAIRE */}
      <Section id="énergie" bg="white">
        <div className="max-w-7xl mx-auto">
          <Eyebrow>Solutions solaires</Eyebrow>
          <h2 className="text-3xl md:text-4xl font-bold mb-10" style={{ color: GREEN }}>Une solution pour chaque profil</h2>
          <div className="grid sm:grid-cols-2 lg:grid-cols-5 gap-5">
            {[
              ["Résidentiel", "Autonomie et confort pour la maison."],
              ["Commercial", "Réduction des coûts pour les commerces."],
              ["PME", "Solutions adaptées aux petites entreprises."],
              ["Industriel", "Puissance pour sites de production."],
              ["Sites stratégiques", "Alimentation continue, zéro coupure."],
            ].map(([t, d]) => (
              <div key={t} className="p-5 rounded-xl border" style={{ borderColor: "#e5e0d5" }}>
                <div className="w-9 h-9 rounded-full flex items-center justify-center mb-3" style={{ background: `${GREEN}12` }}><Sun size={16} color={GREEN} /></div>
                <div className="font-semibold mb-1" style={{ color: GREEN }}>{t}</div>
                <div className="text-sm text-gray-500">{d}</div>
              </div>
            ))}
          </div>
          <div className="mt-8"><Btn small onClick={() => document.getElementById("calculatrice")?.scrollIntoView({ behavior: "smooth" })}>Calculer ma solution solaire</Btn></div>
        </div>
      </Section>

      {/* STOCKAGE */}
      <Section>
        <div className="max-w-7xl mx-auto">
          <Eyebrow>Stockage d'énergie</Eyebrow>
          <h2 className="text-3xl md:text-4xl font-bold mb-10" style={{ color: GREEN }}>Batteries lithium &amp; systèmes ESS</h2>
          <div className="grid md:grid-cols-4 gap-5">
            {["5 kWh", "10 kWh", "15 kWh", "ESS haute capacité"].map((s) => (
              <div key={s} className="p-6 rounded-xl text-center" style={{ background: GREEN, color: "white" }}>
                <Battery size={26} color={GOLD} className="mx-auto mb-3" />
                <div className="font-bold text-lg">{s}</div>
              </div>
            ))}
          </div>
          <div className="mt-8"><Btn small variant="outline2">Trouver ma solution de stockage</Btn></div>
        </div>
      </Section>

      {/* TELECOM */}
      <Section id="télécom" bg="white">
        <div className="max-w-7xl mx-auto">
          <Eyebrow>Télécom</Eyebrow>
          <h2 className="text-3xl md:text-4xl font-bold mb-10" style={{ color: GREEN }}>Infrastructures pour entreprises et opérateurs</h2>
          <div className="grid sm:grid-cols-2 md:grid-cols-3 gap-5">
            {["Déploiement de sites", "Infrastructures radio", "Faisceaux hertziens", "Réseaux d'entreprise", "Installation", "Maintenance"].map((s) => (
              <div key={s} className="p-5 rounded-xl flex items-center gap-3 border" style={{ borderColor: "#e5e0d5" }}>
                <Radio size={18} color={ORANGE} />
                <span className="font-medium" style={{ color: GREEN }}>{s}</span>
              </div>
            ))}
          </div>
        </div>
      </Section>

      {/* CALCULATOR */}
      <Section id="calculatrice">
        <div className="max-w-5xl mx-auto">
          <Eyebrow>Calculatrice de rentabilité</Eyebrow>
          <h2 className="text-3xl md:text-4xl font-bold mb-3" style={{ color: GREEN }}>Estimez votre solution solaire</h2>
          <p className="text-gray-500 mb-8 text-sm">Les résultats sont des estimations indicatives, non une étude technique définitive.</p>
          <div className="grid md:grid-cols-2 gap-8 bg-white p-8 rounded-2xl shadow-sm">
            <div className="space-y-4">
              <div>
                <label className="text-sm font-medium" style={{ color: GREEN }}>Facture électrique mensuelle (FCFA)</label>
                <input type="number" value={facture} onChange={(e) => setFacture(+e.target.value)} className="w-full mt-1 border rounded-lg px-3 py-2" />
              </div>
              <div>
                <label className="text-sm font-medium" style={{ color: GREEN }}>Consommation mensuelle estimée (kWh)</label>
                <input type="number" value={conso} onChange={(e) => setConso(+e.target.value)} className="w-full mt-1 border rounded-lg px-3 py-2" />
              </div>
              <div>
                <label className="text-sm font-medium" style={{ color: GREEN }}>Type de bâtiment</label>
                <select value={batiment} onChange={(e) => setBatiment(e.target.value)} className="w-full mt-1 border rounded-lg px-3 py-2">
                  <option>Résidentiel</option><option>Commerce</option><option>PME</option><option>Industriel</option>
                </select>
              </div>
              <div>
                <label className="text-sm font-medium" style={{ color: GREEN }}>Ville</label>
                <input value={ville} onChange={(e) => setVille(e.target.value)} className="w-full mt-1 border rounded-lg px-3 py-2" />
              </div>
              <div>
                <label className="text-sm font-medium" style={{ color: GREEN }}>Heures d'utilisation par jour</label>
                <input type="number" value={heures} onChange={(e) => setHeures(+e.target.value)} className="w-full mt-1 border rounded-lg px-3 py-2" />
              </div>
              <Btn onClick={computeSolar}><Calculator size={16} /> Estimer ma solution</Btn>
            </div>
            <div className="rounded-xl p-6" style={{ background: GREEN, color: "white" }}>
              {!result ? (
                <p style={{ color: "#CFE3D8" }} className="text-sm">Remplissez le formulaire pour obtenir votre estimation.</p>
              ) : (
                <div className="space-y-3 text-sm">
                  <div className="flex justify-between"><span>Puissance solaire recommandée</span><b>{result.puissance} kWc</b></div>
                  <div className="flex justify-between"><span>Capacité de stockage indicative</span><b>{result.stockage} kWh</b></div>
                  <div className="flex justify-between"><span>Investissement estimatif</span><b>{result.investissement.toLocaleString()} FCFA</b></div>
                  <div className="flex justify-between"><span>Économie mensuelle estimative</span><b>{result.economieMensuelle.toLocaleString()} FCFA</b></div>
                  <div className="flex justify-between"><span>Économie annuelle estimative</span><b>{result.economieAnnuelle.toLocaleString()} FCFA</b></div>
                  <div className="flex justify-between"><span>Retour sur investissement</span><b>{result.retour} ans</b></div>
                  <p className="text-xs pt-2" style={{ color: GOLD }}>* Estimation indicative — étude technique requise pour confirmation.</p>
                  <button onClick={() => setDevisOpen(true)} className="mt-3 w-full rounded-full py-2.5 font-semibold" style={{ background: ORANGE }}>Recevoir une étude solaire personnalisée</button>
                </div>
              )}
            </div>
          </div>
        </div>
      </Section>

      {/* STORE */}
      <Section id="store" bg="white">
        <div className="max-w-7xl mx-auto">
          <div className="flex items-center justify-between mb-8 flex-wrap gap-4">
            <div>
              <Eyebrow>EATEL Store</Eyebrow>
              <h2 className="text-3xl md:text-4xl font-bold" style={{ color: GREEN }}>Équipements &amp; accessoires</h2>
            </div>
            <div className="flex items-center gap-2 px-4 py-2 rounded-full border" style={{ borderColor: GREEN, color: GREEN }}>
              <ShoppingCart size={18} /> <span className="font-semibold">{cart.length}</span>
            </div>
          </div>
          <div className="flex flex-wrap gap-2 mb-8">
            {CATS.map((c) => (
              <button key={c} onClick={() => setActiveCat(c)} className="px-4 py-1.5 rounded-full text-sm font-medium border" style={{ background: activeCat === c ? GREEN : "white", color: activeCat === c ? "white" : GREEN, borderColor: GREEN }}>{c}</button>
            ))}
          </div>
          <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
            {filteredProducts.map((p) => (
              <div key={p.id} className="rounded-xl border overflow-hidden" style={{ borderColor: "#e5e0d5" }}>
                <div className="h-36 flex items-center justify-center" style={{ background: `linear-gradient(135deg, ${GREEN}, #0a2b20)` }}>
                  {p.cat === "Batteries lithium" ? <Battery size={36} color={GOLD} /> : p.cat === "Onduleurs" ? <Wrench size={36} color={GOLD} /> : <Sun size={36} color={GOLD} />}
                </div>
                <div className="p-4">
                  <div className="text-xs font-semibold mb-1" style={{ color: ORANGE }}>{p.cat}</div>
                  <div className="font-semibold mb-1" style={{ color: GREEN }}>{p.name}</div>
                  <p className="text-sm text-gray-500 mb-4">{p.desc}</p>
                  <div className="flex gap-2">
                    <Btn small onClick={() => addToCart(p)}>Ajouter au panier</Btn>
                    <Btn small variant="outline2" onClick={() => setDevisOpen(true)}>Demander un devis</Btn>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </Section>

      {/* REALISATIONS */}
      <Section id="réalisations">
        <div className="max-w-7xl mx-auto">
          <Eyebrow>Réalisations</Eyebrow>
          <h2 className="text-3xl md:text-4xl font-bold mb-10" style={{ color: GREEN }}>Nos projets exemples</h2>
          <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
            {[
              ["Projet exemple — Solaire résidentiel", "Niamey", "Kit solaire 3kW + batterie lithium"],
              ["Projet exemple — Site télécom", "Zinder", "Déploiement infrastructure radio"],
              ["Projet exemple — Stockage ESS", "Maradi", "Système ESS haute capacité"],
            ].map(([t, loc, d]) => (
              <div key={t} className="rounded-xl overflow-hidden border" style={{ borderColor: "#e5e0d5" }}>
                <div className="h-32" style={{ background: `linear-gradient(135deg, ${GREEN_LIGHT}, ${GREEN})` }} />
                <div className="p-5">
                  <div className="font-semibold mb-1" style={{ color: GREEN }}>{t}</div>
                  <div className="text-xs text-gray-400 mb-2 flex items-center gap-1"><MapPin size={12} />{loc}</div>
                  <div className="text-sm text-gray-500">{d}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </Section>

      {/* SAV */}
      <Section bg="white">
        <div className="max-w-5xl mx-auto text-center">
          <h2 className="text-2xl md:text-3xl font-bold mb-8" style={{ color: GREEN }}>Besoin d'assistance ?</h2>
          <div className="grid sm:grid-cols-2 md:grid-cols-4 gap-4">
            {["Demander une intervention", "Maintenance", "Support technique", "Suivi de demande"].map((s) => (
              <button key={s} className="p-5 rounded-xl border text-sm font-medium" style={{ borderColor: GREEN, color: GREEN }}>{s}</button>
            ))}
          </div>
        </div>
      </Section>

      {/* FOOTER */}
      <footer id="contact" className="pt-16 pb-8 px-6 md:px-12" style={{ background: GREEN, color: "#CFE3D8" }}>
        <div className="max-w-7xl mx-auto grid md:grid-cols-4 gap-10">
          <div>
            <Logo light />
            <p className="text-sm mt-4">Solutions énergétiques et infrastructures télécom pour le Niger.</p>
            <div className="flex gap-3 mt-4">
              <Facebook size={18} /> <Instagram size={18} /> <Linkedin size={18} />
            </div>
          </div>
          <div>
            <div className="font-semibold text-white mb-3">Navigation</div>
            {["Accueil", "Énergie", "Télécom", "Store", "Réalisations"].map((n) => <div key={n} className="text-sm mb-2">{n}</div>)}
          </div>
          <div>
            <div className="font-semibold text-white mb-3">Contact</div>
            <div className="text-sm mb-2">Niamey, Niger (adresse à confirmer)</div>
            <div className="text-sm mb-2">Téléphone / WhatsApp : à confirmer</div>
            <div className="text-sm mb-2">contact@eatelniger.dz (à confirmer)</div>
          </div>
          <div>
            <div className="font-semibold text-white mb-3">Demande rapide</div>
            <Btn onClick={() => setDevisOpen(true)}>Demander un devis</Btn>
          </div>
        </div>
        <div className="max-w-7xl mx-auto mt-10 pt-6 border-t border-white/10 text-xs flex flex-col md:flex-row justify-between gap-2">
          <span>© 2026 EATEL Niger. Démo commerciale réalisée par RougaTech — non le site officiel.</span>
          <span>Energy &amp; Telecom Niger</span>
        </div>
      </footer>

      {/* AI AGENT */}
      <button onClick={() => setChatOpen(true)} className="fixed bottom-6 right-6 z-50 w-14 h-14 rounded-full shadow-lg flex items-center justify-center" style={{ background: ORANGE }}>
        <MessageCircle color="white" />
      </button>
      {chatOpen && (
        <div className="fixed bottom-24 right-6 z-50 w-[340px] max-w-[90vw] rounded-2xl shadow-2xl overflow-hidden flex flex-col" style={{ background: "white", height: 460 }}>
          <div className="p-4 flex items-center justify-between" style={{ background: GREEN }}>
            <div className="text-white font-semibold text-sm">EATEL Assistant</div>
            <button onClick={() => setChatOpen(false)}><X size={16} color="white" /></button>
          </div>
          <div className="flex-1 overflow-y-auto p-4 space-y-3 text-sm">
            {chatMsgs.map((m, i) => (
              <div key={i} className={`max-w-[85%] p-3 rounded-xl ${m.from === "bot" ? "" : "ml-auto"}`} style={{ background: m.from === "bot" ? "#F0EEE6" : GREEN, color: m.from === "bot" ? "#1a1a1a" : "white" }}>{m.text}</div>
            ))}
          </div>
          <div className="p-3 flex flex-wrap gap-2 border-t">
            {["☀️ Solution solaire", "🔋 Batterie & stockage", "📡 Solution télécom", "🛒 Voir le Store", "🧮 Calculer ma rentabilité", "💰 Demander un devis", "📞 Contacter EATEL"].map((q) => (
              <button key={q} onClick={() => botReply(q)} className="text-xs px-2.5 py-1.5 rounded-full border" style={{ borderColor: GREEN, color: GREEN }}>{q}</button>
            ))}
          </div>
        </div>
      )}

      {/* DEVIS MODAL */}
      {devisOpen && (
        <div className="fixed inset-0 z-50 flex items-center justify-center p-4" style={{ background: "rgba(0,0,0,0.5)" }} onClick={() => setDevisOpen(false)}>
          <div className="bg-white rounded-2xl p-6 max-w-md w-full max-h-[85vh] overflow-y-auto" onClick={(e) => e.stopPropagation()}>
            <div className="flex justify-between items-center mb-4">
              <h3 className="font-bold text-lg" style={{ color: GREEN }}>Demande de devis</h3>
              <button onClick={() => setDevisOpen(false)}><X size={18} /></button>
            </div>
            <div className="space-y-3">
              {["Nom complet", "Entreprise", "Téléphone", "Email", "Ville"].map((f) => (
                <input key={f} placeholder={f} className="w-full border rounded-lg px-3 py-2 text-sm" />
              ))}
              <select className="w-full border rounded-lg px-3 py-2 text-sm">
                <option>Type de solution</option>
                <option>Solaire</option><option>Batterie</option><option>Stockage ESS</option><option>Télécom</option><option>Maintenance</option><option>Autre</option>
              </select>
              <textarea placeholder="Description du besoin" className="w-full border rounded-lg px-3 py-2 text-sm" rows={3} />
              <button onClick={() => setDevisOpen(false)} className="w-full rounded-full py-2.5 font-semibold text-white flex items-center justify-center gap-2" style={{ background: ORANGE }}><Send size={16} /> Envoyer la demande</button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}