import { useState, useEffect, useRef } from "react";

// ─── SVG Icons ───────────────────────────────────────────
const WhatsAppIcon = ({ className = "w-6 h-6" }) => (
  <svg className={className} fill="currentColor" viewBox="0 0 24 24">
    <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z" />
  </svg>
);

const ArchIcon = () => (
  <svg className="w-5 h-5" fill="none" stroke="currentColor" strokeWidth="1.5" viewBox="0 0 24 24">
    <path strokeLinecap="round" strokeLinejoin="round" d="M2.25 21h19.5m-18-18v18m10.5-18v18m6-13.5V21M6.75 6.75h.75m-.75 3h.75m-.75 3h.75m3-6h.75m-.75 3h.75m-.75 3h.75M6.75 21v-3.375c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21M3 3h12m-.75 4.5H21m-3.75 0h.008v.008h-.008V7.5Z" />
  </svg>
);

// ─── Data ────────────────────────────────────────────────
const products = [
  { id: 1, name: "Bajo 600 - 1 Puerta", ref: "MB-600-1P", price: 145000, ml: 0.6, img: "https://lh3.googleusercontent.com/aida-public/AB6AXuD1Kugflo-WHqYnkT7vD4BCu0UeT5Bftfg1EOwVN4M265yRzHAiYBPjKcQJPZXoGVMZNTm4NpfS9TVV9s4FVRLD36x-uFG9cKJKkiybjUYjFx1_vLuKkDxpKJoQ4W37IlW55QNfC2RxcpXiyQtKmkcyZ0nBn4WMkTyh9S8fo2tfk_Yv9swb-NIBfAOyfDuQS6RyTMJ7gKT7ZtYbQFJ2ueNXDp7iwKU_Vr7xnHLb-2w0WE3KZyudr-pTA-vt7is4UKjPNOVVVDA_vJ4X" },
  { id: 2, name: "Cajonera 600 - 3C", ref: "MB-600-3C", price: 212500, ml: 0.6, img: "https://lh3.googleusercontent.com/aida-public/AB6AXuC-60Jvdd64kIHb9gjG-nghaBFNilLB3U5hbuNgyPTo4qI1RBdZQT2virX5ZENpVcE0rKvdSmef5VDtV-ewduDmr7cTt_jPPNcR1zLOuBdILvsIgdOiny2cTGcJFLo_PRXjVUt2xGf3CfIe1-gGY9hjrXV4BrxZNGS6TrB-O1zU0YFt5Tb8qoBnRgd6RobZifWYWXD2tUSIwpXgFzx_5gQSczw_jIyzUnoBZNc0e1LxJP4yHKqEAcJKjb_c1jS7NNIYBDt1qTyyKfOr" },
  { id: 3, name: "Bajo 900 - 2 Puertas", ref: "MB-900-2P", price: 189900, ml: 0.9, img: "https://lh3.googleusercontent.com/aida-public/AB6AXuCMVUQJ2XqWUPZAaw_X762uG1KkepS1Fqa08nDjlgLgVNH1dm4UXbX19E12TM4tJA3wkYz6YRX4bFlqleu3spLobpRZuizFx1H_CYn5GW-7EnNEIEptbl078HiFNdsD34zMG671_mRfpXkqsPAlh7Bi_zBSGxhExtbiP8jxMmnA1vdGy439CvOzjc2dVUqXgVJpFgVVhdMLjvfk-6fHy2VXUEdBlUb-S4DxmZAxs7wGDdNOmixFM7JE4O8kW8Gif8DTTgiOmQcRotAc" },
  { id: 4, name: "Módulo Fregadero 600", ref: "MB-F600", price: 132000, ml: 0.6, img: "https://lh3.googleusercontent.com/aida-public/AB6AXuCDelMoJZWmfXJc4_vy1oyU-Hbt-BshYtD2IlNuJbYqEamdgzXVNIW7_w8KAuQtanYVm1waaqGwFhS4SzNNDX6kiZbvzpbc-otlrk1uO9_JVDykuzqYjHFApgYKSWjMyIHMCzOaJu6D2PIYzPRZtxdPjjpxHoxqUt7onl30vS9fo8E2NqnYTI_a2dQ-uNZ4EAmupFFi40K408zNgjbREb2qGowyYyJN5MQmFJOf1y_MoM63sKzSFkoGnbJepaxdrbgDxWVhYMTDHKSB" },
];

const heroImg = "https://lh3.googleusercontent.com/aida-public/AB6AXuCE6tJHn-B2zq6mMtjWvOInlArQj0aNDeSj-DuXrTm6cM-iOocEGi44yy9foTHgQC2FGdwe1d0KtHFKNT5_zRVZenj7xwHSvj-0EJJjTQeC7KGtgZBdWQyAIRXs2oXDZ-FIqJKNgI0AFBVhDH67XcDBH0_rw9S1nH9yOTCKbz29DdVoAQT_iGBQkTECojn-DBdP3pYeHHVoNSAmCH88Wae9tlcWByXxWTyeZLbgcD3eUPCA2Icy3LC32zunlBsVXjYWGmduTt_oWFbz";
const lineaEcoImg = "https://lh3.googleusercontent.com/aida-public/AB6AXuB1ScjFxVwo-zGUNcRYn3HvGqMshSyzaLzKpObvlnffNi504r0J2bWiuxL-X7TNNJZl9kro2_iWs1Kx2kvtFtb5hZEj2BGTvWoQh7QI0P-EwHeA-sFpWaz-ynHyOIqzdIIuUeZRHnfT3N5pmj9UnXwS7on2SZ5ti9qt41VIQqAUkEltVN93jH5oQqDG-7kRle-yiSXaUsPeAH4ZtSgG8pDUKNTua-yIXjPL9j0tdFTUVepB9AFCCAHO4TnyUry1-mKq9ZHCp5rdHeh8";
const lineaMediaImg = "https://lh3.googleusercontent.com/aida-public/AB6AXuA_JUPtt9OVyMwYD4pDO3hzHBad4am_pPGNcZAbnHxmx4hZKB4SmQU5v_hPnw-qgXVsVucFh8No77MBZfKCZiUGd3_CUh01MMX6snajBiJMoXA-P6dSGXGClwXeL6xlL-n0dMKgcAHvEmCp2K2yCIAAhxuDFb1_oUMc97cmKmlBdo4is24jT6LjM8amQOLJydCCc0a2X0kSjGzqLYlkxz_0khY7h_QV-g5wcYGs7eqgss0U7Zs-nPkgrM4HXwjESTPyDVdA-xL5hyea";
const lineaPremiumImg = "https://lh3.googleusercontent.com/aida-public/AB6AXuDaod8QMxkHufbxbMq2DOQ2jOlRIaSoYBv6MAIwgA_rIw3aVPCvuJEv6NIo8kwYpedWAp_hYE6UMorKrFhAAobgQgxIkCjRgibu0JuWPu-VFjW4NRVfp761MAi4bpSEQ667HYo9JzvX2-sRG2x6J-bQTLg9nhvC-AUnjtuie1lmHzg_RCf8dvdx-cdeBUyIOpJsnOypq7vlwrclCdbDLytrETk1kJdDqYX_J9gcJ0yvxFQam4qDiP0PGPHI9l7txs4zvSi1obXtlraK";
const bajosImg = "https://lh3.googleusercontent.com/aida-public/AB6AXuDwxpysYVenLMwB-3afz8REJ_xCKA-NTLffdjZakeKvEx1yzOH1jp8CYaUWN9Zdch1PGRRk-wgbpN7CWT9o6WM2yRj1pEB82YC34Wenug887HjDSwbjLs3MjkpxgDhhH1ndAZTwqcfikabcz8ZNhcws-agEbEIyO_dpUrdSun-hZ7CrOzGsjA_4utAgldqRLKC6IUyohjC2_9z3ywmCD2qE7u837x_qs2TvPhbkI_pkV-Ju4JOrwEuqsiG0abrhLAeEJRIh8bv8vhLL";
const aereosImg = "https://lh3.googleusercontent.com/aida-public/AB6AXuBcg97qBVjFnPg-Bt5dp4W9a8Lku0kYxG_jP7R9yiyWbxHvgPNRyHejD-w_37y6hzTo-IQLYJ6HHh39ezlOicaCPPtj996-M4x5ub9Dg0yHhdrPF50GuGgiVS_UGauyakdubJ6TuQ8Tykv6m13sknDTTrLOfbqv76uhMmiWp3T3mUU5TBuRpPaGlTmzgvdEn-fjxtbi0s8AMha7M9l6f_c5xDxBCPSqlu_PxbfIliF1rlXnOxJFnr_8TQubd0OU-rfTuXzkeHnl85sH";
const columnasImg = "https://lh3.googleusercontent.com/aida-public/AB6AXuDenXt0z9ak5SZoA3fawbY6UQXSbyaMtkgAf4HXxAp7CHL8zq_uxv8_ss0MgwjcBihPbfipthRVXW2isiXQF8uk5MSjrEB2BJ7xP--iAwuDeHxnvgTTuVSXZB1HZ1xEYVCFZ6GndkGzN48n8nTjORv6KXiHMfu5zDeiEOQRQS18DVrDlZYUwM1Sa66HIPHDW0SLPVqXgLDsfFL6CBFeAYRO4zFol6hfjPdUAPTy8OAE20QxkvfhXRd0J4tsu5vOjhGMHdne6BzDjIsA";
const detailImg = "https://lh3.googleusercontent.com/aida-public/AB6AXuAWdc_jz4-03IgZZPPzORAlVop5FpOGv_29yj16IC12plFjesGEFB3OZPkZSFfFSzIU12DJNSkxGi6iHzotfnVIYbP6QJrTwPJ0jRlrnNpgTH7amu309pBKUgqJvCLNpHWXGiNd3GXhcB3RlrXE1o_OV8Wsc0rDOgd7PSpJd0eNShfSfFkzV5K8YPYcYwacfgJbUIN-2ifZ_QFS_zKeREK_5eboXWAEuYFMGjLcbyhzRW9NbG9kPHMLEA2pFP2pgw3pBAGtRBvn_Yx-";
const calcImg = "https://lh3.googleusercontent.com/aida-public/AB6AXuAx1L-rdvSYnCHR7bocAxANHtQhmGCgbV57y3oZ_mLp93zYHHe6zyA8nk7801r9TcWpljVSBbO2EtL9QO82YM70GxK-pD4br4sJUW2TAAs3aO6_elTMlQwcoiJNcam_Ihcrr26piOQIy5YcjBVdLw5m7X_cT_O3ShDcf8Uqw4BX6zOrYfYIC_t4FKtUPPnNsxE4RdWXj69oOaaSoBhwuGGftFxY1EQeuqwaVm_7P8rkb9SezvBll0vxqqrAA-i5JZbVxCuaD1epWXcD";
const quoteHeroImg = "https://lh3.googleusercontent.com/aida-public/AB6AXuAgI_IW588K6chIyCZ6EnIacUgcPVKBoJHtOM3TsRGN9OQzE-qEWKTuEy2j1Y4gk1cBgf50m4k8bQ9RqCr_0tasXe4DHs2x8VSVK5yfLIuvXSp-sq6rNyQpnH6cH60aEg7XN3Ng-Sraob0lME3iYSGwzrV3eLJ8Q7E9WgOn9kx63Xq6Ch0go0S3YkYoN5IaXKrwRlPSkJmesYjv6fqgMKp_xWm2kR0CJTvymeB5S4kJ8An6xzRfgOnNfgNddbjaFUp4Wy9vaD0UFfea";

const cartItems = [
  { id: 1, name: "Módulo Base Industrial 60cm", finish: "Roble / Tirador Negro", qty: 1, price: 980, oldPrice: 1200, img: "https://lh3.googleusercontent.com/aida-public/AB6AXuCMfpuHCqIeVpB4UFIky-3F40EVgY91kXIg6r4vCzfFUd2_IQsUYT1SL-dcg-mCzXOOKh8dDY4O0i7Mr0AvfO9pM_hY1txqs4rHnb-XlW5qKcaFri98zOoYkmbzrT_C-H9Zu-ysdAThcRdNKueDxMzXnJHGf5tvI1O6OiMuYYZ2yjWj_TMbEv2zbhKHT7lgWdJIN840dX3l9FbZn6r8ZqiiwkB434-3zLtzqRYqifLoIPdqAvYWXAb0oZvjPQZxC9Od92-ueij8ch1s" },
  { id: 2, name: "Alacena Superior Doble 80cm", finish: "Blanco Mate / Push Open", qty: 2, price: 1450, img: "https://lh3.googleusercontent.com/aida-public/AB6AXuB2Wk6h7F0CiOr_JEAGVolHv7G3aJdmdSKf3w_beAnf8CKBkHwACqAoKo_ltQiI_wD0UcFEJinoU4f74BZx18UtsU4IbEZieNEJkEIWhwgHAObENP5FdmU2pms9acQTi9sHEKiZceVvkfVutf20O52vWkSw2-cCfjxSmUDepVT9CjFqSjipjXOmFrmsKom7_K-hK0JoGpYt0WFJrZhIoYGLEGEl4uY80FHYmNl7l9rlFx0jEi6n8gEe-55sotDr0F31ZImZHDQZ3udc" },
  { id: 3, name: "Esquinero Magic Corner", finish: "Grafito / Soft Close", qty: 1, price: 2100, img: "https://lh3.googleusercontent.com/aida-public/AB6AXuAKD5hltAk-HA8NUDA5BEusL-M2NuRGV265yHP6IvbC-rDOo5gS2-F_60E0JTLKnyS9Q2JvXIlBOzF22bhZzc5XmK9ikTPJSlkePbNBGD8esWBg0-A3WwrDpvgABtArAf1HLeGdYpnvJyVYdPGVyaZmUGrmwc0h1Icnb1hgQ8MV-VTyksKTW6Jb6bbaw7pE-wsiyqO6C4KVy2eek1Z-EHllz0Ost8_XwCiKQBBJvxbo08Sh-RCGLmaJOHRAUtGYvD7msSoBU2UeFxvQ" },
];

const fmt = (n) => "$" + n.toLocaleString("es-AR");

// ─── PAGES ───────────────────────────────────────────────

// ── HOME PAGE ────────────────────────────────────────────
function HomePage({ navigate }) {
  return (
    <div className="animate-fadeIn">
      {/* Hero */}
      <section className="relative h-[520px] flex items-end">
        <div className="absolute inset-0">
          <img src={heroImg} alt="Cocina Modular" className="w-full h-full object-cover" />
          <div className="absolute inset-0 bg-gradient-to-t from-slate-900 via-slate-900/40 to-transparent" />
        </div>
        <div className="relative z-10 px-6 pb-10 w-full">
          <div className="inline-block px-3 py-1 bg-orange-500 text-white text-[10px] font-bold tracking-widest uppercase rounded mb-4">Fabricación Directa</div>
          <h1 className="text-3xl font-bold text-white leading-tight mb-2">
            Cocinas modulares desde <span className="text-blue-400 italic">USD 330</span> por metro lineal
          </h1>
          <p className="text-slate-300 text-sm mb-6 max-w-[280px]">Diseño industrial de alta precisión. Calidad premium a precio de fábrica.</p>
          <button className="flex items-center justify-center gap-3 w-full bg-blue-600 hover:bg-blue-700 text-white font-semibold py-4 px-6 rounded-xl transition-all shadow-lg shadow-blue-600/20 active:scale-[0.98]">
            <WhatsAppIcon className="w-5 h-5" /> Cotizar por WhatsApp
          </button>
        </div>
      </section>

      {/* Trust Badges */}
      <section className="bg-white py-5 border-b border-blue-600/5">
        <div className="flex justify-around items-center px-4">
          {[
            { icon: "⚙️", label: "Fabricación local" },
            { icon: "🚚", label: "Entrega rápida" },
            { icon: "✅", label: "10 Años Garantía" },
          ].map((b, i) => (
            <div key={i} className="flex flex-col items-center gap-1.5">
              <span className="text-lg">{b.icon}</span>
              <span className="text-[10px] font-semibold uppercase tracking-tight text-slate-500">{b.label}</span>
            </div>
          ))}
        </div>
      </section>

      {/* Product Lines */}
      <section className="py-10">
        <div className="px-6 mb-6 flex justify-between items-end">
          <div>
            <h2 className="text-xs font-bold text-blue-600 uppercase tracking-[0.2em] mb-1">Nuestras Líneas</h2>
            <p className="text-xl font-bold text-slate-900">Selecciona tu nivel</p>
          </div>
          <div className="text-blue-600 flex gap-1">
            <span className="text-sm">←</span><span className="text-sm">→</span>
          </div>
        </div>
        <div className="flex overflow-x-auto snap-x snap-mandatory gap-4 px-6 pb-2" style={{ scrollbarWidth: "none" }}>
          {[
            { tag: "ESSENTIAL", name: "Línea Económica", desc: "Melaminas de alta densidad y herrajes reforzados. Funcionalidad total.", price: "USD 330/m", img: lineaEcoImg, border: "" },
            { tag: "BALANCED", name: "Línea Media", desc: "Herrajes soft-close y texturas amaderadas sincronizadas. Estilo puro.", price: "USD 450/m", img: lineaMediaImg, border: "border-2 border-blue-600 shadow-xl shadow-blue-600/5" },
            { tag: "LUXURY", name: "Línea Premium", desc: "Sistemas push-to-open, iluminación LED integrada y lacados mate.", price: "USD 680/m", img: lineaPremiumImg, border: "" },
          ].map((line, i) => (
            <div key={i} className={`min-w-[280px] snap-center bg-white rounded-xl overflow-hidden ${line.border || "border border-slate-200"} shrink-0`}>
              <div className="h-40 bg-slate-100 relative">
                <img src={line.img} alt={line.name} className="w-full h-full object-cover" />
                <div className={`absolute top-3 left-3 ${i === 1 ? "bg-blue-600 text-white" : i === 2 ? "bg-slate-900 text-white" : "bg-white/90"} backdrop-blur px-2 py-1 rounded text-[10px] font-bold`}>{line.tag}</div>
              </div>
              <div className="p-5">
                <h3 className="font-bold text-lg mb-1">{line.name}</h3>
                <p className="text-xs text-slate-500 mb-4 leading-relaxed">{line.desc}</p>
                <div className="flex items-center justify-between">
                  <span className="text-sm font-medium">Desde</span>
                  <span className="text-xl font-bold text-blue-600">{line.price}</span>
                </div>
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* How it works */}
      <section className="px-6 py-10 bg-slate-100">
        <h2 className="text-2xl font-bold mb-8 text-center text-slate-900">¿Cómo funciona?</h2>
        <div className="space-y-8">
          {[
            { n: "1", t: "Toma tus medidas", d: "Mide el largo de tus paredes donde quieres los módulos." },
            { n: "2", t: "Cotiza en línea", d: "Envíanos las medidas por WhatsApp y recibe un presupuesto en minutos." },
            { n: "3", t: "Instalación rápida", d: "Fabricamos y armamos en tu hogar en menos de 15 días." },
          ].map((s) => (
            <div key={s.n} className="flex gap-4 items-start">
              <div className="shrink-0 w-10 h-10 bg-white rounded-lg flex items-center justify-center font-bold text-blue-600 shadow-sm">{s.n}</div>
              <div>
                <h4 className="font-bold mb-1 text-slate-900">{s.t}</h4>
                <p className="text-sm text-slate-500">{s.d}</p>
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* Components Grid */}
      <section className="px-6 py-12">
        <h2 className="text-xs font-bold text-blue-600 uppercase tracking-[0.2em] mb-6">Componentes</h2>
        <div className="grid grid-cols-2 gap-3">
          <button onClick={() => navigate("catalog")} className="col-span-2 relative h-48 rounded-xl overflow-hidden group text-left">
            <img src={bajosImg} alt="Módulos Bajos" className="w-full h-full object-cover" />
            <div className="absolute inset-0 bg-black/30 group-hover:bg-black/10 transition-all" />
            <div className="absolute bottom-4 left-4">
              <h3 className="text-white font-bold text-lg">Módulos Bajos</h3>
              <p className="text-white/80 text-xs">Cajoneras y bachas</p>
            </div>
          </button>
          <div className="relative h-40 rounded-xl overflow-hidden">
            <img src={aereosImg} alt="Aéreos" className="w-full h-full object-cover" />
            <div className="absolute inset-0 bg-black/40" />
            <div className="absolute bottom-3 left-3">
              <h3 className="text-white font-bold">Aéreos</h3>
              <p className="text-white/80 text-[10px]">Alacenas y campanas</p>
            </div>
          </div>
          <div className="relative h-40 rounded-xl overflow-hidden">
            <img src={columnasImg} alt="Columnas" className="w-full h-full object-cover" />
            <div className="absolute inset-0 bg-black/40" />
            <div className="absolute bottom-3 left-3">
              <h3 className="text-white font-bold">Columnas</h3>
              <p className="text-white/80 text-[10px]">Torre de hornos</p>
            </div>
          </div>
        </div>
      </section>

      {/* Footer */}
      <footer className="bg-slate-900 text-slate-400 py-12 px-6 text-center">
        <div className="flex justify-center mb-6">
          <div className="w-10 h-10 bg-blue-600/20 rounded flex items-center justify-center text-blue-400">
            <ArchIcon />
          </div>
        </div>
        <p className="text-sm mb-4">Industria Argentina | Calidad Internacional</p>
        <p className="text-[10px] uppercase tracking-widest text-slate-600">© 2024 Modular Studio Systems.<br />Todos los derechos reservados.</p>
      </footer>
    </div>
  );
}

// ── CATALOG PAGE ─────────────────────────────────────────
function CatalogPage({ navigate }) {
  const [activeWidth, setActiveWidth] = useState("600mm");
  const [activeLine, setActiveLine] = useState("Todas");

  return (
    <div className="animate-fadeIn">
      {/* Header */}
      <header className="sticky top-0 z-50 bg-white/80 backdrop-blur-md border-b border-slate-200">
        <div className="px-4 py-3 flex items-center justify-between">
          <div className="flex items-center gap-3">
            <button onClick={() => navigate("home")} className="p-1 text-slate-600">‹</button>
            <h1 className="text-lg font-bold tracking-tight text-slate-900">Módulos Bajos</h1>
          </div>
          <button onClick={() => navigate("cart")} className="relative p-2 rounded-full bg-slate-100 text-slate-600">
            🛒
            <span className="absolute -top-1 -right-1 bg-blue-600 text-white text-[10px] font-bold h-5 w-5 rounded-full flex items-center justify-center border-2 border-white">3</span>
          </button>
        </div>
      </header>

      <main className="pb-24">
        {/* Breadcrumbs */}
        <nav className="px-4 py-3 text-xs flex items-center gap-2 text-slate-500">
          <span className="cursor-pointer hover:text-blue-600">Cocina</span>
          <span className="text-[10px]">›</span>
          <span className="text-blue-600 font-medium">Bajos</span>
        </nav>

        {/* Filters */}
        <section className="px-4 mb-6">
          <div className="mb-4">
            <h2 className="text-sm font-semibold text-slate-400 uppercase tracking-widest mb-1">Catálogo Industrial</h2>
            <p className="text-slate-600 text-sm leading-relaxed">Configura tus módulos de cocina con precisión profesional. Precios calculados por metro lineal (ML).</p>
          </div>

          <div className="mb-4">
            <p className="text-[11px] font-bold text-slate-500 uppercase mb-2 ml-1">Línea de Acabado</p>
            <div className="flex gap-2 overflow-x-auto" style={{ scrollbarWidth: "none" }}>
              {["Todas", "Eco (Melamina)", "Media (Laminado)"].map((l) => (
                <button key={l} onClick={() => setActiveLine(l)}
                  className={`px-4 py-2 rounded-full text-xs font-medium whitespace-nowrap transition-all ${activeLine === l ? "bg-blue-600 text-white shadow-sm shadow-blue-600/20 font-semibold" : "bg-white border border-slate-200"}`}>
                  {l}
                </button>
              ))}
            </div>
          </div>

          <div>
            <p className="text-[11px] font-bold text-slate-500 uppercase mb-2 ml-1">Ancho (mm)</p>
            <div className="flex gap-2">
              {["400mm", "600mm", "800mm", "900mm"].map((w) => (
                <button key={w} onClick={() => setActiveWidth(w)}
                  className={`px-4 py-2 rounded-lg text-xs font-medium whitespace-nowrap transition-all ${activeWidth === w ? "bg-white border-2 border-blue-600 text-blue-600 font-bold" : "bg-white border border-slate-200"}`}>
                  {w}
                </button>
              ))}
            </div>
          </div>
        </section>

        {/* Product Grid */}
        <section className="px-4 grid grid-cols-2 gap-4">
          {products.map((p) => (
            <button key={p.id} onClick={() => navigate("detail")} className="bg-white rounded-xl overflow-hidden shadow-sm border border-slate-100 flex flex-col text-left">
              <div className="aspect-square bg-slate-50 relative p-4">
                <img src={p.img} alt={p.name} className="w-full h-full object-contain" />
                <span className="absolute top-2 left-2 bg-slate-900/10 backdrop-blur-sm px-2 py-1 rounded text-[10px] font-bold uppercase tracking-tighter">{p.ml} ML</span>
              </div>
              <div className="p-3 flex flex-col flex-grow">
                <h3 className="text-sm font-bold text-slate-800 mb-1 leading-tight">{p.name}</h3>
                <p className="text-[10px] text-slate-500 mb-2">Ref: {p.ref}</p>
                <div className="mt-auto">
                  <p className="text-[10px] text-slate-400 font-medium">Desde</p>
                  <p className="text-lg font-bold text-blue-600 mb-3">{fmt(p.price)}</p>
                  <div className="w-full py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg text-[11px] font-bold flex items-center justify-center gap-1 transition-all">
                    ⊕ COTIZAR
                  </div>
                </div>
              </div>
            </button>
          ))}
        </section>
      </main>

      {/* Bottom Tab Bar */}
      <nav className="fixed bottom-0 left-0 right-0 max-w-md mx-auto bg-white/95 backdrop-blur-md border-t border-slate-200 px-6 py-2 flex justify-between items-center z-40">
        {[
          { icon: "🏠", label: "Inicio", active: false, page: "home" },
          { icon: "🍳", label: "Catálogo", active: true, page: "catalog" },
          { icon: "📐", label: "Planificador", active: false, page: "wizard" },
          { icon: "👤", label: "Cuenta", active: false, page: "faq" },
        ].map((t) => (
          <button key={t.label} onClick={() => navigate(t.page)} className={`flex flex-col items-center gap-1 ${t.active ? "text-blue-600" : "text-slate-400"}`}>
            <span className="text-lg">{t.icon}</span>
            <span className={`text-[10px] ${t.active ? "font-bold" : "font-medium"}`}>{t.label}</span>
          </button>
        ))}
      </nav>
    </div>
  );
}

// ── DETAIL PAGE ──────────────────────────────────────────
function DetailPage({ navigate }) {
  const [tab, setTab] = useState("desc");

  return (
    <div className="animate-fadeIn">
      {/* Nav */}
      <nav className="sticky top-0 z-50 bg-white/80 backdrop-blur-md border-b border-slate-200">
        <div className="flex items-center justify-between px-4 h-14">
          <button onClick={() => navigate("catalog")} className="p-2 text-slate-600">‹</button>
          <h1 className="text-sm font-semibold uppercase tracking-wider text-slate-900">Detalle de Módulo</h1>
          <button className="p-2 text-slate-600">↗</button>
        </div>
      </nav>

      <main className="pb-32">
        {/* Gallery */}
        <section className="relative aspect-square w-full bg-white overflow-hidden">
          <img src={detailImg} alt="Bajo mesada 600" className="w-full h-full object-cover" />
          <div className="absolute bottom-4 left-0 right-0 flex justify-center gap-1.5">
            <span className="w-2 h-2 rounded-full bg-blue-600" /><span className="w-2 h-2 rounded-full bg-slate-300" /><span className="w-2 h-2 rounded-full bg-slate-300" />
          </div>
          <div className="absolute top-4 right-4">
            <span className="bg-white/90 backdrop-blur px-3 py-1 rounded-full text-[10px] font-bold uppercase tracking-widest shadow-sm">Premium Range</span>
          </div>
        </section>

        {/* Info */}
        <section className="p-5 bg-white">
          <div className="flex justify-between items-start mb-2">
            <div>
              <h2 className="text-2xl font-bold text-slate-900">Bajo mesada 600</h2>
              <p className="text-sm text-slate-500">Cod: MOD-B600-P</p>
            </div>
            <div className="text-right">
              <p className="text-2xl font-bold text-blue-600">$42.500</p>
              <p className="text-[11px] font-medium text-slate-400 line-through">$48.900</p>
            </div>
          </div>
          <div className="mt-4 p-3 rounded-lg bg-blue-600/5 border border-blue-600/10 flex items-center gap-3">
            <div className="w-10 h-10 rounded-full bg-blue-600/10 flex items-center justify-center text-blue-600">📏</div>
            <div>
              <p className="text-xs font-semibold text-slate-500 uppercase tracking-tighter">Equivalencia Lineal</p>
              <p className="text-sm text-slate-900">Este módulo equivale a <span className="font-bold text-blue-600">0.60 ML</span></p>
            </div>
          </div>
        </section>

        {/* Selectors */}
        <section className="p-5 space-y-4">
          <div className="space-y-1.5">
            <label className="text-xs font-bold text-slate-500 uppercase ml-1">Línea de Diseño</label>
            <select className="w-full bg-white border border-slate-200 rounded-lg px-4 py-3 text-sm focus:ring-2 focus:ring-blue-600 focus:border-blue-600 outline-none appearance-none">
              <option>Minimalist Industrial</option><option>Classic Wood</option><option>Ultra Gloss White</option>
            </select>
          </div>
          <div className="grid grid-cols-2 gap-4">
            <div className="space-y-1.5">
              <label className="text-xs font-bold text-slate-500 uppercase ml-1">Ancho (mm)</label>
              <select className="w-full bg-white border border-slate-200 rounded-lg px-4 py-3 text-sm outline-none appearance-none">
                <option>600 mm</option><option>450 mm</option><option>900 mm</option>
              </select>
            </div>
            <div className="space-y-1.5">
              <label className="text-xs font-bold text-slate-500 uppercase ml-1">Acabado</label>
              <select className="w-full bg-white border border-slate-200 rounded-lg px-4 py-3 text-sm outline-none appearance-none">
                <option>Gris Antracita</option><option>Blanco Soft</option><option>Roble Natural</option>
              </select>
            </div>
          </div>
        </section>

        {/* Tabs */}
        <section className="mt-4 px-5">
          <div className="flex border-b border-slate-200 mb-6">
            {["desc", "medidas", "ficha"].map((t) => (
              <button key={t} onClick={() => setTab(t)}
                className={`flex-1 py-3 text-xs font-bold uppercase tracking-wider border-b-2 transition-all ${tab === t ? "border-blue-600 text-blue-600" : "border-transparent text-slate-400"}`}>
                {t === "desc" ? "Descripción" : t === "medidas" ? "Medidas" : "Ficha Técnica"}
              </button>
            ))}
          </div>
          <div className="space-y-4">
            <p className="text-sm leading-relaxed text-slate-600">
              Módulo bajo de 600mm con un estante regulable. Diseñado para ofrecer máxima capacidad de guardado con herrajes de cierre suave (Soft Close) de última generación. Ideal para configuraciones lineales de cocina moderna.
            </p>
            {["Estructura en MDF 18mm alta densidad", "Cantos de PVC 2mm aplicados térmicamente", "Patas regulables de polímero técnico"].map((f) => (
              <div key={f} className="flex items-center gap-2 text-sm text-slate-700">
                <span className="text-blue-600">✓</span> {f}
              </div>
            ))}
          </div>
        </section>

        {/* Technical Download */}
        <section className="px-5 mt-10">
          <div className="rounded-xl border border-slate-200 p-4 bg-white flex items-center justify-between">
            <div className="flex items-center gap-3">
              <div className="w-12 h-12 bg-slate-100 rounded flex items-center justify-center text-slate-400"><ArchIcon /></div>
              <div>
                <h4 className="text-sm font-semibold text-slate-900">Diagrama Técnico</h4>
                <p className="text-[10px] text-slate-500 uppercase tracking-wide">PDF • 1.2 MB</p>
              </div>
            </div>
            <button className="p-2 rounded-full bg-slate-50 text-blue-600">⬇</button>
          </div>
        </section>
      </main>

      {/* Sticky Bottom */}
      <footer className="fixed bottom-0 left-0 right-0 max-w-md mx-auto bg-white/95 backdrop-blur-lg border-t border-slate-200 px-5 pt-4 pb-8 z-50">
        <div className="flex gap-3">
          <button className="w-14 h-14 flex items-center justify-center rounded-xl bg-emerald-50 text-emerald-600 border border-emerald-100">
            <WhatsAppIcon className="w-7 h-7" />
          </button>
          <button onClick={() => navigate("cart")} className="flex-1 bg-blue-600 text-white font-bold rounded-xl px-4 flex items-center justify-center gap-2 shadow-lg shadow-blue-600/25 active:scale-95 transition-transform h-14">
            🛒 Agregar a cotización
          </button>
        </div>
      </footer>
    </div>
  );
}

// ── WIZARD PAGE ──────────────────────────────────────────
function WizardPage({ navigate }) {
  const [layout, setLayout] = useState("linear");
  const [wallA, setWallA] = useState(3.5);

  return (
    <div className="animate-fadeIn bg-white min-h-screen flex flex-col">
      {/* Header */}
      <header className="pt-6 px-6 pb-4 sticky top-0 bg-white/80 backdrop-blur-md z-20">
        <div className="flex items-center justify-between mb-4">
          <button onClick={() => navigate("home")} className="p-2 text-slate-500">‹</button>
          <h1 className="text-sm font-semibold uppercase tracking-widest text-slate-400">Step 1 of 5</h1>
          <button onClick={() => navigate("home")} className="text-xs font-bold text-slate-400 hover:text-red-500">EXIT</button>
        </div>
        <div className="w-full bg-slate-100 h-1.5 rounded-full overflow-hidden">
          <div className="bg-blue-600 h-full w-1/5 rounded-full transition-all duration-500" />
        </div>
      </header>

      <main className="flex-1 px-6 pb-32">
        <div className="mt-4">
          <h2 className="text-2xl font-bold text-slate-800 leading-tight">Define Your Layout</h2>
          <p className="text-slate-500 mt-2 text-sm">Select the shape that best fits your kitchen space for an instant linear meter estimate.</p>
        </div>

        {/* Shape Selection */}
        <section className="mt-8">
          <div className="flex items-center gap-2 mb-4">
            <h3 className="text-xs font-bold text-slate-400 uppercase tracking-wider">Shape Selection</h3>
            <span className="text-slate-300 text-sm cursor-help">❓</span>
          </div>
          <div className="space-y-4">
            {[
              { id: "linear", name: "Linear (Recta)", desc: "Single wall configuration", icon: "━━━" },
              { id: "l-shape", name: "L-Shape", desc: "Two perpendicular walls", icon: "┗━" },
              { id: "u-shape", name: "U-Shape", desc: "Three connected walls", icon: "┗━┛" },
            ].map((opt) => (
              <label key={opt.id} onClick={() => setLayout(opt.id)}
                className={`flex items-center p-4 rounded-xl cursor-pointer transition-all ${layout === opt.id ? "border-2 border-blue-600 bg-blue-600/5" : "border border-slate-200 hover:border-blue-600/50"}`}>
                <div className={`w-16 h-16 rounded-lg flex items-center justify-center border shadow-sm mr-4 text-xl font-mono ${layout === opt.id ? "bg-white border-blue-600/20 text-blue-600" : "bg-slate-50 border-slate-100 text-slate-400"}`}>
                  {opt.icon}
                </div>
                <div className="flex-1">
                  <span className="block font-bold text-slate-800">{opt.name}</span>
                  <span className="text-xs text-slate-500">{opt.desc}</span>
                </div>
                <div className={`w-6 h-6 rounded-full border-2 flex items-center justify-center ${layout === opt.id ? "border-blue-600 bg-blue-600 text-white" : "border-slate-200"}`}>
                  {layout === opt.id && "✓"}
                </div>
              </label>
            ))}
          </div>
        </section>

        {/* Dimensions */}
        <section className="mt-10">
          <div className="flex items-center justify-between mb-4">
            <h3 className="text-xs font-bold text-slate-400 uppercase tracking-wider">Dimensions (Meters)</h3>
            <div className="bg-blue-600/10 px-2 py-1 rounded text-[10px] font-bold text-blue-600 tracking-tight">AUTO-CALCULATING</div>
          </div>
          <div>
            <div className="flex justify-between items-end mb-2">
              <label className="text-sm font-medium text-slate-700">Wall A Length</label>
              <span className="text-xs text-slate-400">Min 1.2m</span>
            </div>
            <div className="flex items-center">
              <button onClick={() => setWallA(Math.max(1.2, wallA - 0.1))} className="w-14 h-14 bg-slate-100 rounded-l-lg flex items-center justify-center text-slate-500 active:bg-slate-200 text-xl">−</button>
              <div className="flex-1 relative h-14 border-y border-slate-200 flex items-center justify-center">
                <input type="number" value={wallA.toFixed(1)} onChange={(e) => setWallA(parseFloat(e.target.value) || 1.2)} step="0.1"
                  className="w-full h-full text-center text-xl font-bold bg-transparent border-none focus:ring-0 text-slate-900" />
                <span className="absolute right-4 text-slate-400 font-medium">m</span>
              </div>
              <button onClick={() => setWallA(wallA + 0.1)} className="w-14 h-14 bg-slate-100 rounded-r-lg flex items-center justify-center text-slate-500 active:bg-slate-200 text-xl">+</button>
            </div>
          </div>
          <div className="mt-4 bg-slate-50 p-4 rounded-xl border border-dashed border-slate-200">
            <div className="flex items-start gap-3">
              <span className="text-blue-600 mt-0.5">ℹ</span>
              <p className="text-xs text-slate-500 leading-relaxed italic">
                For Linear (Recta) layouts, only one measurement is required. Our system automatically adds a 5% safety margin for industrial fitment.
              </p>
            </div>
          </div>
        </section>
      </main>

      {/* Sticky Footer */}
      <footer className="fixed bottom-0 left-0 right-0 max-w-md mx-auto bg-white/95 backdrop-blur-lg border-t border-slate-100 p-6 z-30">
        <div className="flex flex-col gap-4">
          <div className="flex items-center justify-between text-sm">
            <span className="text-slate-500">Est. Total Length:</span>
            <span className="font-bold text-slate-900">{wallA.toFixed(2)} Linear Meters</span>
          </div>
          <div className="grid grid-cols-5 gap-3">
            <button className="col-span-1 flex items-center justify-center bg-green-500 text-white rounded-xl h-14 active:scale-95 transition-all">
              <WhatsAppIcon className="w-6 h-6" />
            </button>
            <button onClick={() => navigate("calculator")} className="col-span-4 bg-blue-600 text-white font-bold rounded-xl h-14 shadow-lg shadow-blue-600/25 active:scale-[0.98] transition-all flex items-center justify-center gap-2">
              CONTINUE →
            </button>
          </div>
        </div>
      </footer>
    </div>
  );
}

// ── CALCULATOR PAGE ──────────────────────────────────────
function CalculatorPage({ navigate }) {
  const [selectedLine, setSelectedLine] = useState("eco");
  const [meters, setMeters] = useState(3.5);

  const priceRanges = { eco: [350, 480], media: [480, 650], premium: [650, 900] };
  const range = priceRanges[selectedLine];
  const low = Math.round(meters * range[0]);
  const high = Math.round(meters * range[1]);

  return (
    <div className="animate-fadeIn bg-slate-50 min-h-screen flex flex-col max-w-md mx-auto">
      {/* Header */}
      <header className="px-6 py-4 flex items-center justify-between bg-white border-b border-slate-200">
        <button onClick={() => navigate("home")} className="p-2 text-slate-600">‹</button>
        <h1 className="text-lg font-bold tracking-tight text-slate-900">Presupuesto Estimado</h1>
        <div className="w-10" />
      </header>

      <main className="flex-1 overflow-y-auto px-6 py-6 space-y-8 pb-48">
        {/* Step 1 */}
        <section className="space-y-4">
          <div className="flex items-center space-x-2">
            <span className="w-6 h-6 rounded-full bg-blue-600 text-white flex items-center justify-center text-xs font-bold">1</span>
            <h2 className="text-sm font-semibold uppercase tracking-wider text-slate-500">Elegí tu línea</h2>
          </div>
          {[
            { id: "eco", name: "Línea Eco", desc: "Estructura melamínica, herrajes estándar." },
            { id: "media", name: "Línea Media", desc: "Cierre suave, terminaciones premium." },
            { id: "premium", name: "Línea Industrial Premium", desc: "Aluminio, vidrio y herrajes europeos." },
          ].map((l) => (
            <label key={l.id} className="relative group cursor-pointer block">
              <input type="radio" name="line" checked={selectedLine === l.id} onChange={() => setSelectedLine(l.id)} className="peer sr-only" />
              <div className={`p-4 rounded-xl border-2 bg-white transition-all flex items-center justify-between ${selectedLine === l.id ? "border-blue-600 bg-blue-600/5" : "border-slate-200"}`}>
                <div>
                  <h3 className="font-bold text-slate-900">{l.name}</h3>
                  <p className="text-xs text-slate-500">{l.desc}</p>
                </div>
                {selectedLine === l.id && <span className="text-blue-600">✓</span>}
              </div>
            </label>
          ))}
        </section>

        {/* Step 2 */}
        <section className="space-y-4">
          <div className="flex items-center space-x-2">
            <span className="w-6 h-6 rounded-full bg-blue-600 text-white flex items-center justify-center text-xs font-bold">2</span>
            <h2 className="text-sm font-semibold uppercase tracking-wider text-slate-500">¿Cuántos metros tenés?</h2>
          </div>
          <div className="relative">
            <input type="number" value={meters} onChange={(e) => setMeters(parseFloat(e.target.value) || 0)} step="0.5"
              className="w-full h-16 px-5 text-2xl font-bold bg-white border-2 border-slate-200 rounded-xl focus:ring-blue-600 focus:border-blue-600 transition-all" />
            <div className="absolute inset-y-0 right-5 flex items-center pointer-events-none">
              <span className="text-slate-400 font-medium">Metros (m)</span>
            </div>
          </div>
          <p className="text-xs text-slate-400 italic">Mida el largo total de la pared donde ubicará sus módulos.</p>
        </section>

        {/* Result */}
        <section>
          <div className="bg-blue-600/10 border border-blue-600/20 rounded-2xl p-8 text-center space-y-2">
            <p className="text-xs font-semibold uppercase tracking-widest text-blue-600">Inversión Estimada</p>
            <div className="flex items-baseline justify-center space-x-1">
              <span className="text-xl font-bold text-slate-400">USD</span>
              <span className="text-4xl font-black text-slate-900 tracking-tighter">{low.toLocaleString()} – {high.toLocaleString()}</span>
            </div>
            <div className="pt-4 mt-4 border-t border-blue-600/10">
              <div className="flex items-start justify-center space-x-2">
                <span className="text-blue-600 text-sm mt-0.5">ℹ</span>
                <p className="text-[10px] leading-relaxed text-slate-600 max-w-[200px]">
                  El precio final se ajustará según la configuración de módulos y accesorios seleccionados.
                </p>
              </div>
            </div>
          </div>
        </section>

        {/* Image */}
        <div className="rounded-xl overflow-hidden relative aspect-video">
          <img src={calcImg} alt="Cocina Industrial" className="w-full h-full object-cover" />
          <div className="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent flex items-end p-4">
            <p className="text-white text-xs font-medium">Inspiración: Línea Industrial Premium</p>
          </div>
        </div>
      </main>

      {/* CTA */}
      <footer className="fixed bottom-0 left-0 right-0 max-w-md mx-auto p-6 pb-10 bg-white border-t border-slate-200 space-y-3 z-30">
        <button onClick={() => navigate("wizard")} className="w-full py-4 bg-blue-600 hover:bg-blue-700 text-white rounded-xl font-bold transition-all flex items-center justify-center space-x-2 shadow-lg shadow-blue-600/20">
          <span>Armar mi cocina</span> <span>›</span>
        </button>
        <button className="w-full py-4 bg-emerald-500/10 text-emerald-700 rounded-xl font-bold transition-all flex items-center justify-center space-x-2 border border-emerald-500/20">
          <WhatsAppIcon className="w-5 h-5" /> <span>Hablar por WhatsApp</span>
        </button>
      </footer>
    </div>
  );
}

// ── CART PAGE ─────────────────────────────────────────────
function CartPage({ navigate }) {
  const [items, setItems] = useState(cartItems.map((i) => ({ ...i })));

  const updateQty = (id, delta) => {
    setItems((prev) => prev.map((i) => i.id === id ? { ...i, qty: Math.max(1, i.qty + delta) } : i));
  };
  const removeItem = (id) => setItems((prev) => prev.filter((i) => i.id !== id));

  const subtotal = items.reduce((s, i) => s + i.price * i.qty, 0);
  const herrajes = 125;
  const total = subtotal + herrajes;
  const totalML = 3.2;

  return (
    <div className="animate-fadeIn">
      <div className="h-11 w-full bg-slate-50 sticky top-0 z-50" />
      <header className="sticky top-11 z-40 bg-slate-50/80 backdrop-blur-md border-b border-blue-600/10 px-4 py-3 flex items-center justify-between">
        <button onClick={() => navigate("catalog")} className="p-1 flex items-center text-blue-600">
          <span>‹</span> <span className="text-lg ml-1">Volver</span>
        </button>
        <h1 className="text-lg font-semibold text-slate-900">Tu Cotización</h1>
        <div className="w-10" />
      </header>

      <main className="pb-40 px-4 pt-6 max-w-md mx-auto">
        {/* Summary */}
        <div className="bg-blue-600/5 border border-blue-600/20 rounded-xl p-4 mb-6 flex items-center justify-between">
          <div>
            <p className="text-xs uppercase tracking-wider font-semibold text-blue-600/70">Capacidad Total</p>
            <p className="text-2xl font-bold text-blue-600">{totalML} ML</p>
          </div>
          <div className="text-right">
            <p className="text-xs uppercase tracking-wider font-semibold text-blue-600/70">Módulos</p>
            <p className="text-2xl font-bold text-blue-600">{items.length.toString().padStart(2, "0")}</p>
          </div>
        </div>

        {/* Items */}
        <div className="space-y-4">
          <h2 className="text-sm font-semibold text-slate-500 uppercase tracking-widest px-1">Módulos Seleccionados</h2>
          {items.map((item) => (
            <div key={item.id} className="bg-white border border-slate-200 rounded-xl p-3 shadow-sm">
              <div className="flex gap-4">
                <div className="w-20 h-20 bg-slate-100 rounded-lg overflow-hidden shrink-0">
                  <img src={item.img} alt={item.name} className="w-full h-full object-cover" />
                </div>
                <div className="flex-1">
                  <div className="flex justify-between items-start">
                    <h3 className="font-semibold text-sm leading-tight text-slate-900">{item.name}</h3>
                    <button onClick={() => removeItem(item.id)} className="text-slate-400 text-sm">✕</button>
                  </div>
                  <p className="text-xs text-slate-500 mt-1">Acabado: {item.finish}</p>
                  <div className="mt-3 flex items-center justify-between">
                    <div className="flex items-center gap-3 bg-slate-50 rounded-lg px-2 py-1">
                      <button onClick={() => updateQty(item.id, -1)} className="text-blue-600 font-bold px-1">−</button>
                      <span className="text-sm font-medium">{item.qty}</span>
                      <button onClick={() => updateQty(item.id, 1)} className="text-blue-600 font-bold px-1">+</button>
                    </div>
                    <div className="text-right">
                      {item.oldPrice && <p className="text-xs text-slate-400 line-through">${item.oldPrice.toLocaleString()}</p>}
                      <p className="font-bold text-blue-600">${(item.price * item.qty).toLocaleString()}.00</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          ))}
        </div>

        {/* Breakdown */}
        <div className="mt-8 space-y-3 px-1">
          <div className="flex justify-between text-sm text-slate-600"><span>Subtotal Módulos</span><span>${subtotal.toLocaleString()}.00</span></div>
          <div className="flex justify-between text-sm text-slate-600"><span>Herrajes y Accesorios</span><span>${herrajes}.00</span></div>
          <div className="flex justify-between text-sm text-slate-600"><span>Estimado ML ({totalML}m)</span><span>Incluido</span></div>
          <div className="pt-3 border-t border-slate-200 flex justify-between items-end">
            <span className="text-lg font-bold text-slate-900">Total Estimado</span>
            <div className="text-right">
              <span className="text-2xl font-black text-blue-600">${total.toLocaleString()}.00</span>
              <p className="text-[10px] text-slate-500 uppercase font-medium">IVA no incluido</p>
            </div>
          </div>
        </div>

        <div className="mt-6 p-4 bg-slate-100 rounded-lg">
          <div className="flex gap-2">
            <span className="text-blue-600 text-sm">ℹ</span>
            <p className="text-[11px] leading-relaxed text-slate-600">
              Este presupuesto es una estimación basada en módulos estándar. El precio final será confirmado tras la verificación técnica de medidas por nuestro equipo.
            </p>
          </div>
        </div>
      </main>

      {/* Fixed CTA */}
      <div className="fixed bottom-0 left-0 right-0 bg-white/90 backdrop-blur-md border-t border-slate-200 px-4 pt-4 pb-8 z-50">
        <div className="max-w-md mx-auto space-y-3">
          <p className="text-center text-[10px] text-slate-500 uppercase tracking-tighter">Te enviaremos un mensaje pre-llenado con tus productos.</p>
          <button className="w-full bg-blue-600 text-white font-bold py-4 rounded-xl flex items-center justify-center gap-3 shadow-lg shadow-blue-600/20 active:scale-[0.98] transition-transform">
            <WhatsAppIcon className="w-6 h-6" /> Solicitar presupuesto por WhatsApp
          </button>
        </div>
      </div>
    </div>
  );
}

// ── FAQ PAGE ─────────────────────────────────────────────
function FaqPage({ navigate }) {
  const [openFaq, setOpenFaq] = useState(0);

  const faqs = [
    { icon: "🏗", q: "¿Qué materiales utilizan?", a: "Utilizamos acero inoxidable grado quirúrgico 304 y maderas certificadas con tratamiento hidrófugo. Nuestros acabados son de grado industrial resistentes a altas temperaturas." },
    { icon: "📏", q: "¿Cómo mido mi cocina?", a: "Mide la longitud total de las paredes donde planeas instalar. Nuestro precio por metro lineal facilita la estimación inicial. Un técnico validará las medidas antes de la producción." },
    { icon: "🚚", q: "Tiempos de entrega y envío", a: "El tiempo estándar es de 4 a 6 semanas desde la confirmación del diseño técnico. El envío incluye seguro total y descarga en domicilio." },
    { icon: "🛡", q: "Garantía Premium", a: "Ofrecemos 10 años de garantía estructural y de por vida en herrajes de movimiento (Blum). La calidad industrial está garantizada contra defectos de fabricación." },
  ];

  return (
    <div className="animate-fadeIn">
      <div className="h-11 w-full bg-slate-50/80 backdrop-blur-md sticky top-0 z-50" />
      <nav className="sticky top-11 z-50 bg-slate-50/80 backdrop-blur-md border-b border-slate-200 px-6 py-4 flex items-center justify-between">
        <button onClick={() => navigate("home")} className="p-1 flex items-center gap-1 text-blue-600">
          <span>‹</span> <span className="font-medium">Tienda</span>
        </button>
        <h1 className="text-sm font-bold uppercase tracking-widest text-slate-900">Soporte</h1>
        <div className="w-10" />
      </nav>

      <main className="max-w-md mx-auto pb-32">
        {/* Hero */}
        <header className="px-6 pt-10 pb-8 bg-white border-b border-slate-200">
          <div className="mb-4 inline-block px-3 py-1 bg-blue-600/10 text-blue-600 text-[10px] font-bold uppercase tracking-tighter rounded">Centro de Ayuda</div>
          <h2 className="text-3xl font-bold tracking-tight mb-3 text-slate-900">¿Cómo podemos ayudarte?</h2>
          <p className="text-slate-500 text-sm leading-relaxed max-w-xs">Resuelve tus dudas sobre nuestras cocinas modulares industriales de alta gama.</p>
          <div className="mt-8 relative">
            <span className="absolute left-4 top-1/2 -translate-y-1/2 text-slate-400">🔍</span>
            <input className="w-full pl-12 pr-4 py-4 bg-slate-100 border-none rounded-xl text-sm focus:ring-2 focus:ring-blue-600 transition-all" placeholder="Buscar materiales, envíos..." />
          </div>
        </header>

        {/* Transparency */}
        <section className="p-6">
          <div className="bg-blue-600/5 border border-blue-600/20 rounded-xl p-5 flex gap-4">
            <span className="text-blue-600">ℹ</span>
            <div>
              <h4 className="text-sm font-bold mb-1 text-slate-900">Transparencia en Precios</h4>
              <p className="text-xs text-slate-600 leading-normal">
                Calculamos basándonos en el <b>precio por metro lineal</b>. Esto incluye gabinetes base, superiores y herrajes premium.
              </p>
            </div>
          </div>
        </section>

        {/* FAQ */}
        <section className="px-6 py-4">
          <h3 className="text-xs font-bold text-slate-400 uppercase tracking-widest mb-6">Preguntas Frecuentes</h3>
          <div className="space-y-4">
            {faqs.map((faq, i) => (
              <div key={i} className="bg-white border border-slate-200 rounded-xl overflow-hidden shadow-sm">
                <button onClick={() => setOpenFaq(openFaq === i ? -1 : i)} className="flex items-center justify-between p-5 w-full text-left">
                  <div className="flex items-center gap-4">
                    <span className={`text-lg ${openFaq === i ? "text-blue-600" : "text-slate-400"} transition-colors`}>{faq.icon}</span>
                    <span className="text-sm font-semibold text-slate-900">{faq.q}</span>
                  </div>
                  <span className={`text-slate-400 transition-transform ${openFaq === i ? "rotate-180" : ""}`}>▼</span>
                </button>
                {openFaq === i && (
                  <div className="px-14 pb-5 animate-fadeIn">
                    <p className="text-sm text-slate-500 leading-relaxed">{faq.a}</p>
                  </div>
                )}
              </div>
            ))}
          </div>
        </section>

        {/* Contact Form */}
        <section className="px-6 py-12">
          <h3 className="text-xs font-bold text-slate-400 uppercase tracking-widest mb-6">Contáctanos</h3>
          <div className="bg-white p-6 rounded-2xl border border-slate-200 shadow-xl shadow-slate-200/50">
            <div className="space-y-5">
              <div className="space-y-1">
                <label className="text-[10px] font-bold uppercase text-slate-400 ml-1">Nombre Completo</label>
                <input className="w-full bg-slate-50 border-slate-200 rounded-lg text-sm px-4 py-3 focus:border-blue-600 focus:ring-0 transition-all" placeholder="Juan Pérez" />
              </div>
              <div className="space-y-1">
                <label className="text-[10px] font-bold uppercase text-slate-400 ml-1">Correo Electrónico</label>
                <input className="w-full bg-slate-50 border-slate-200 rounded-lg text-sm px-4 py-3 focus:border-blue-600 focus:ring-0 transition-all" placeholder="juan@ejemplo.com" type="email" />
              </div>
              <div className="space-y-1">
                <label className="text-[10px] font-bold uppercase text-slate-400 ml-1">Mensaje</label>
                <textarea className="w-full bg-slate-50 border-slate-200 rounded-lg text-sm px-4 py-3 focus:border-blue-600 focus:ring-0 transition-all resize-none" placeholder="Cuéntanos sobre tu proyecto..." rows="4" />
              </div>
              <button className="w-full bg-slate-900 text-white font-bold py-4 rounded-xl text-sm active:scale-[0.98] transition-transform">
                Enviar Consulta
              </button>
            </div>
          </div>
          <div className="flex items-start gap-4 p-4 mt-4 opacity-60">
            <span>🏭</span>
            <div>
              <p className="text-[10px] font-bold uppercase tracking-tight text-slate-900">Showroom & Planta</p>
              <p className="text-xs text-slate-600">Zona Industrial Norte, Bodega 42. CDMX</p>
            </div>
          </div>
        </section>
      </main>

      {/* WhatsApp CTA */}
      <div className="fixed bottom-0 left-0 right-0 p-6 bg-gradient-to-t from-slate-50 via-slate-50/95 to-transparent z-50">
        <div className="max-w-md mx-auto">
          <button className="flex items-center justify-between w-full bg-blue-600 text-white p-2 pl-6 rounded-full shadow-2xl shadow-blue-600/40 active:scale-[0.97] transition-all">
            <div className="flex flex-col text-left">
              <span className="text-[10px] font-bold uppercase tracking-widest opacity-80">Atención Directa</span>
              <span className="text-sm font-bold">Hablar con un experto</span>
            </div>
            <div className="bg-white/20 p-3 rounded-full">
              <WhatsAppIcon className="w-6 h-6" />
            </div>
          </button>
          <p className="text-center text-[10px] text-slate-400 mt-4 font-medium uppercase tracking-[0.2em]">Respuesta inmediata • 9am - 7pm</p>
        </div>
      </div>
    </div>
  );
}

// ── QUOTE REQUEST PAGE ───────────────────────────────────
function QuotePage({ navigate }) {
  const [meters, setMeters] = useState(0);

  return (
    <div className="animate-fadeIn">
      <div className="h-12 bg-white" />
      <header className="sticky top-0 z-50 bg-white/80 backdrop-blur-md border-b border-blue-600/10 px-4 py-3 flex items-center justify-between">
        <button onClick={() => navigate("home")} className="w-10 h-10 flex items-center justify-center rounded-full hover:bg-blue-600/10 transition-colors text-blue-600">‹</button>
        <h1 className="text-sm font-bold tracking-widest uppercase text-slate-700">Presupuesto Formal</h1>
        <div className="w-10" />
      </header>

      <main className="max-w-md mx-auto pb-32">
        <section className="p-6">
          <div className="relative rounded-xl overflow-hidden bg-white shadow-sm border border-blue-600/5">
            <img src={quoteHeroImg} alt="Kitchen" className="w-full h-40 object-cover opacity-90" />
            <div className="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent flex flex-col justify-end p-4">
              <span className="text-[10px] font-bold text-white uppercase tracking-wider mb-1 opacity-80">Línea Selección</span>
              <h2 className="text-white font-semibold text-lg">Cocina Modular Industrial Pro</h2>
            </div>
          </div>
          <div className="mt-6 space-y-2">
            <p className="text-sm text-slate-500">Completa los datos para recibir una cotización técnica detallada directamente en tu dispositivo.</p>
            <div className="flex items-center gap-2 py-2 px-3 bg-blue-600/5 rounded-lg border border-blue-600/10">
              <span className="text-blue-600 text-sm">ℹ</span>
              <p className="text-[11px] font-medium text-blue-600 uppercase tracking-wide">Transparencia: Precio base por metro lineal desde $24,500</p>
            </div>
          </div>
        </section>

        <section className="px-6 space-y-5">
          <div>
            <label className="block text-[11px] font-bold text-slate-700 uppercase tracking-tighter mb-1.5 ml-1">Nombre Completo</label>
            <div className="relative">
              <span className="absolute left-4 top-1/2 -translate-y-1/2 text-slate-400 text-sm">👤</span>
              <input className="w-full bg-white border-slate-200 rounded-lg py-3.5 pl-11 pr-4 focus:ring-2 focus:ring-blue-600 focus:border-blue-600 text-sm placeholder:text-slate-300" placeholder="Ej. Juan Pérez" />
            </div>
          </div>
          <div className="grid grid-cols-2 gap-4">
            <div>
              <label className="block text-[11px] font-bold text-slate-700 uppercase tracking-tighter mb-1.5 ml-1">WhatsApp</label>
              <div className="relative">
                <span className="absolute left-4 top-1/2 -translate-y-1/2 text-slate-400 text-sm">📱</span>
                <input className="w-full bg-white border-slate-200 rounded-lg py-3.5 pl-11 pr-4 focus:ring-2 focus:ring-blue-600 text-sm placeholder:text-slate-300" placeholder="11 2345 6789" type="tel" />
              </div>
            </div>
            <div>
              <label className="block text-[11px] font-bold text-slate-700 uppercase tracking-tighter mb-1.5 ml-1">Ciudad</label>
              <div className="relative">
                <span className="absolute left-4 top-1/2 -translate-y-1/2 text-slate-400 text-sm">📍</span>
                <input className="w-full bg-white border-slate-200 rounded-lg py-3.5 pl-11 pr-4 focus:ring-2 focus:ring-blue-600 text-sm placeholder:text-slate-300" placeholder="CABA" />
              </div>
            </div>
          </div>

          <div className="bg-slate-50 p-4 rounded-xl border border-slate-200">
            <div className="flex justify-between items-center mb-3">
              <label className="text-[11px] font-bold text-slate-700 uppercase tracking-tighter">Metros Lineales (Aprox)</label>
              <span className="text-xs font-bold text-blue-600 bg-blue-600/10 px-2 py-0.5 rounded">Requerido</span>
            </div>
            <div className="relative">
              <input type="number" value={meters || ""} onChange={(e) => setMeters(parseFloat(e.target.value) || 0)} step="0.5" placeholder="0.0"
                className="w-full bg-white border-slate-200 rounded-lg py-4 px-4 focus:ring-2 focus:ring-blue-600 text-xl font-bold text-center" />
              <span className="absolute right-4 top-1/2 -translate-y-1/2 text-slate-400 font-bold">m</span>
            </div>
            <p className="mt-3 text-[10px] leading-relaxed text-slate-500 italic">Tip: Mide el largo total de tus paredes donde irá instalada la cocina.</p>
          </div>

          <div>
            <label className="block text-[11px] font-bold text-slate-700 uppercase tracking-tighter mb-1.5 ml-1">Comentarios o Detalles</label>
            <textarea className="w-full bg-white border-slate-200 rounded-lg py-3.5 px-4 focus:ring-2 focus:ring-blue-600 text-sm placeholder:text-slate-300 resize-none" placeholder="¿Tienes alguna preferencia de materiales o herrajes?" rows="3" />
          </div>

          <div className="flex gap-3 p-4 border-l-2 border-blue-600/40 bg-slate-50">
            <span className="text-blue-600/60">⚖</span>
            <p className="text-[11px] text-slate-600 leading-tight">
              * El presupuesto final se ajusta según módulos reales, accesorios seleccionados y relevamiento técnico final en obra.
            </p>
          </div>
        </section>
      </main>

      <footer className="fixed bottom-0 left-0 right-0 p-6 bg-gradient-to-t from-white via-white to-transparent pt-10 z-30">
        <div className="max-w-md mx-auto space-y-4">
          <button className="w-full bg-emerald-500 hover:bg-emerald-600 active:scale-[0.98] text-white rounded-xl py-4 flex items-center justify-center gap-3 shadow-lg shadow-emerald-500/20 transition-all">
            <WhatsAppIcon className="w-6 h-6" />
            <span className="font-bold tracking-tight">ENVIAR POR WHATSAPP</span>
          </button>
          <p className="text-[10px] text-center text-slate-400 uppercase tracking-[0.2em] font-medium">Respuesta técnica garantizada en 24hs</p>
        </div>
      </footer>
    </div>
  );
}

// ─── MAIN APP ────────────────────────────────────────────
export default function App() {
  const [page, setPage] = useState("home");
  const [menuOpen, setMenuOpen] = useState(false);
  const mainRef = useRef(null);

  const navigate = (p) => {
    setPage(p);
    setMenuOpen(false);
    window.scrollTo(0, 0);
  };

  const pages = {
    home: <HomePage navigate={navigate} />,
    catalog: <CatalogPage navigate={navigate} />,
    detail: <DetailPage navigate={navigate} />,
    wizard: <WizardPage navigate={navigate} />,
    calculator: <CalculatorPage navigate={navigate} />,
    cart: <CartPage navigate={navigate} />,
    faq: <FaqPage navigate={navigate} />,
    quote: <QuotePage navigate={navigate} />,
  };

  const menuItems = [
    { label: "Inicio", page: "home" },
    { label: "Catálogo", page: "catalog" },
    { label: "Planificador", page: "wizard" },
    { label: "Calculadora", page: "calculator" },
    { label: "Tu Cotización", page: "cart" },
    { label: "Presupuesto Formal", page: "quote" },
    { label: "Soporte / FAQ", page: "faq" },
  ];

  return (
    <div className="min-h-screen bg-slate-100">
      <style>{`
        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');
        * { font-family: 'Inter', sans-serif; -webkit-tap-highlight-color: transparent; }
        .animate-fadeIn { animation: fadeIn 0.3s ease-out; }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
        .hide-scrollbar::-webkit-scrollbar { display: none; }
        .hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
        input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
        input[type="number"] { -moz-appearance: textfield; }
      `}</style>

      <div className="max-w-md mx-auto bg-slate-50 min-h-screen shadow-2xl relative overflow-hidden" ref={mainRef}>
        {/* Global Header (Home only) */}
        {page === "home" && (
          <header className="sticky top-0 z-50 bg-white/80 backdrop-blur-md border-b border-blue-600/10">
            <div className="max-w-md mx-auto px-4 py-3 flex justify-between items-center">
              <div className="flex items-center gap-2">
                <div className="w-8 h-8 bg-blue-600 rounded flex items-center justify-center text-white">
                  <ArchIcon />
                </div>
                <span className="font-bold text-lg tracking-tight uppercase text-slate-900">
                  MODULAR<span className="text-blue-600 text-xs ml-1 font-medium">STUDIO</span>
                </span>
              </div>
              <button onClick={() => setMenuOpen(!menuOpen)} className="p-2 text-slate-600">
                {menuOpen ? "✕" : "☰"}
              </button>
            </div>
          </header>
        )}

        {/* Mobile Menu Overlay */}
        {menuOpen && (
          <div className="fixed inset-0 z-[60] bg-white animate-fadeIn">
            <div className="max-w-md mx-auto p-6">
              <div className="flex justify-between items-center mb-10">
                <span className="font-bold text-lg tracking-tight uppercase text-slate-900">
                  MODULAR<span className="text-blue-600 text-xs ml-1 font-medium">STUDIO</span>
                </span>
                <button onClick={() => setMenuOpen(false)} className="p-2 text-slate-600 text-xl">✕</button>
              </div>
              <nav className="space-y-1">
                {menuItems.map((m) => (
                  <button key={m.page} onClick={() => navigate(m.page)}
                    className={`block w-full text-left px-4 py-4 rounded-xl text-lg font-medium transition-all ${page === m.page ? "bg-blue-600/5 text-blue-600 font-bold" : "text-slate-700 hover:bg-slate-50"}`}>
                    {m.label}
                  </button>
                ))}
              </nav>
            </div>
          </div>
        )}

        {/* Page Content */}
        {pages[page]}

        {/* Global WhatsApp FAB (shown on Home) */}
        {page === "home" && (
          <div className="fixed bottom-6 right-6 z-50">
            <button className="bg-emerald-500 text-white w-14 h-14 rounded-full flex items-center justify-center shadow-2xl hover:scale-105 active:scale-95 transition-transform">
              <WhatsAppIcon className="w-8 h-8" />
            </button>
          </div>
        )}
      </div>
    </div>
  );
}