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

const WA = "16453336442";

// ─── TEXTOS EDITABLES POR DEFECTO ────────────────────────────────────────────
const TEXTS_DEFAULT = {
  heroTagline:    "Artisan Desserts · Miami",
  heroTitle:      "Crafted with\nlove & precision",
  heroSubtitle:   "Handmade kosher desserts for every occasion. Order online and we deliver straight to your door.",
  heroCta:        "Order Now",
  aboutTitle:     "Our Story",
  aboutText:      "Rêver Pâtisserie was born from a passion for creating desserts that are as beautiful as they are delicious. Every item is made fresh to order with premium ingredients, always kosher-certified.\n\nBased in Miami, we deliver throughout the area and offer local pickup. Whether it's a birthday, Shabbat table, or just because — we make it special.",
  howTitle:       "How It Works",
  how1Title:      "Browse & Choose",
  how1Text:       "Explore our full menu of cakes, tarts, boxes and more. Pick your flavor and size.",
  how2Title:      "Send Your Order",
  how2Text:       "Confirm your details and send your order directly to us via WhatsApp. Fast and simple.",
  how3Title:      "Enjoy",
  how3Text:       "We prepare your order fresh and deliver to your door or you pick it up at our location.",
  menuTitle:      "Our Menu",
  menuSubtitle:   "All products are kosher-certified · Made fresh to order",
  contactTitle:   "Get in Touch",
  contactPhone:   "+1 (645) 333-6442",
  contactEmail:   "info@reverpâtisserie.com",
  contactHours:   "Mon–Thu: 9am–6pm · Fri: 9am–2pm · Sun: Closed",
  contactArea:    "Delivering across Miami-Dade",
  footerTagline:  "Made with love, crafted with precision.",
  footerKosher:   "All products are Kosher certified",
};

// ─── CATALOG ─────────────────────────────────────────────────────────────────
const CATALOG_DEFAULT = [
  { id:"cc_plain",  nombre:"Plain NY Cheesecake",       categoria:"Cheesecake",      kashrut:"Dairy",  imageUrl:"", descripcion:"Classic New York style baked cheesecake. Dense, creamy and rich with a buttery graham cracker crust.", tamanos:[{s:"6\"",p:45},{s:"7\"",p:58},{s:"9\"",p:70}], tags:["Classic","Bestseller"] },
  { id:"cc_passion",nombre:"Passion Fruit Cheesecake",  categoria:"Cheesecake",      kashrut:"Dairy",  imageUrl:"", descripcion:"Creamy NY-style cheesecake topped with a vibrant passion fruit glaze. Tangy, sweet and irresistible.", tamanos:[{s:"6\"",p:48},{s:"7\"",p:62},{s:"9\"",p:75}], tags:["Tropical"] },
  { id:"cc_ddl",    nombre:"Dulce de Leche Cheesecake", categoria:"Cheesecake",      kashrut:"Dairy",  imageUrl:"", descripcion:"Silky cheesecake layered with rich Argentine dulce de leche. Indulgent and caramel-forward.", tamanos:[{s:"6\"",p:48},{s:"7\"",p:62},{s:"9\"",p:75}], tags:["Caramel"] },
  { id:"cc_biscoff",nombre:"Lotus Biscoff Cheesecake",  categoria:"Cheesecake",      kashrut:"Dairy",  imageUrl:"", descripcion:"Creamy cheesecake on a Biscoff crust topped with Biscoff spread. Warm spice meets smooth cream.", tamanos:[{s:"6\"",p:45},{s:"7\"",p:62},{s:"9\"",p:75}], tags:["Spiced"] },
  { id:"cc_nutella",nombre:"Nutella Cheesecake",        categoria:"Cheesecake",      kashrut:"Dairy",  imageUrl:"", descripcion:"Hazelnut and chocolate cheesecake on an Oreo crust with Nutella swirled throughout.", tamanos:[{s:"9\"",p:75}], tags:["Chocolate"] },
  { id:"cc_oreo",   nombre:"Cookies & Cream Cheesecake",categoria:"Cheesecake",      kashrut:"Dairy",  imageUrl:"", descripcion:"Oreo crust, Oreo-studded filling, topped with chocolate ganache. A crowd favorite.", tamanos:[{s:"6\"",p:45},{s:"9\"",p:75}], tags:["Oreo","Bestseller"] },
  { id:"cc_turtle", nombre:"Turtle Cheesecake",         categoria:"Cheesecake",      kashrut:"Dairy",  imageUrl:"", descripcion:"Chocolate ganache, caramel drizzle and toasted pecans on a classic cheesecake base.", tamanos:[{s:"9\"",p:75}], tags:["Caramel","Chocolate"] },
  { id:"cc_dubai",  nombre:"Dubai Cheesecake",          categoria:"Cheesecake",      kashrut:"Dairy",  imageUrl:"", descripcion:"Pistachio cream, Biscoff crust and dark chocolate topping. Inspired by the viral Dubai chocolate trend.", tamanos:[{s:"9\"",p:80}], tags:["Pistachio","Trending"] },
  { id:"bq_plain",  nombre:"Basque Cheesecake — Plain", categoria:"Basque",          kashrut:"Dairy",  imageUrl:"", descripcion:"Burnt-style cheesecake with a deeply caramelized top and custardy center. Bold and creamy.", tamanos:[{s:"6\"",p:45}], tags:["Signature"] },
  { id:"bq_pist",   nombre:"Basque Cheesecake — Pistachio",categoria:"Basque",       kashrut:"Dairy",  imageUrl:"", descripcion:"Classic Basque with pistachio cream and crushed pistachios. Earthy, nutty and luxurious.", tamanos:[{s:"6\"",p:52}], tags:["Pistachio","Signature"] },
  { id:"tira",      nombre:"Tiramisu Box",               categoria:"Box Desserts",    kashrut:"Dairy",  imageUrl:"", descripcion:"Classic Italian tiramisu in an elegant clear box. Coffee-soaked ladyfingers, silky mascarpone and cocoa. Ready to enjoy.", tamanos:[{s:"Individual",p:15}], tags:["Italian","Coffee"] },
  { id:"pist_tira", nombre:"Pistachio Tiramisu Box",     categoria:"Box Desserts",    kashrut:"Dairy",  imageUrl:"", descripcion:"Mascarpone cream infused with pistachio paste over coffee-soaked ladyfingers. Elegant and unique.", tamanos:[{s:"Individual",p:15}], tags:["Pistachio","Coffee"] },
  { id:"choco",     nombre:"Chocotorta Box",             categoria:"Box Desserts",    kashrut:"Dairy",  imageUrl:"", descripcion:"The beloved Argentine classic. Chocolate cookies, coffee, dulce de leche and cream cheese. Nostalgic and irresistible.", tamanos:[{s:"Individual",p:15}], tags:["Argentine"] },
  { id:"tl",        nombre:"Tres Leches",                categoria:"Tres Leches",     kashrut:"Dairy",  imageUrl:"", descripcion:"Fluffy sponge soaked in three milks with your choice of topping. Presented in an elegant tin.", tamanos:[{s:"7\"",p:55}], tags:["Latin","Moist"] },
  { id:"mousse",    nombre:"Matcha, Yuzu & Strawberry Entremet",categoria:"Entremet",kashrut:"Parve",  imageUrl:"", descripcion:"Light matcha mousse with bright yuzu and strawberry insert on a soft sponge. Mirror glaze finish.", tamanos:[{s:"8\"",p:50}], tags:["Parve","Elegant"] },
  { id:"lemon_t",   nombre:"Lemon Meringue Tart",        categoria:"Tarts",           kashrut:"Parve",  imageUrl:"", descripcion:"Crisp tart shell, smooth lemon curd, lightly toasted meringue. Bright citrus with a sweet airy finish.", tamanos:[{s:"8\"",p:40},{s:"9\"",p:50}], tags:["Parve","Citrus"] },
  { id:"apple_t",   nombre:"Apple Crumble Pie",          categoria:"Tarts",           kashrut:"Parve",  imageUrl:"", descripcion:"Cinnamon-spiced apples in a golden tart shell with a buttery crumble topping.", tamanos:[{s:"8\"",p:40},{s:"9\"",p:50}], tags:["Parve","Seasonal"] },
  { id:"tartlet",   nombre:"Tropical Exotic Tartlets",   categoria:"Tartlets",        kashrut:"Parve",  imageUrl:"", descripcion:"Passion fruit curd, mango jelly insert and whipped coconut cream in a crisp shell.", tamanos:[{s:"Box of 4",p:26},{s:"Box of 9",p:55}], tags:["Parve","Tropical"] },
  { id:"flan",      nombre:"Flan Quesillo",              categoria:"Flan",            kashrut:"Parve",  imageUrl:"", descripcion:"Latin American classic with sweetened coconut condensed milk, baked silky-smooth with rich caramel.", tamanos:[{s:"7\"",p:45}], tags:["Parve","Latin"] },
  { id:"scone",     nombre:"Savory Parmesan Scone",      categoria:"Savory",          kashrut:"Dairy",  imageUrl:"", descripcion:"Buttery flaky scone with aged Parmesan, golden and crisp on the outside, tender within.", tamanos:[{s:"Box of 4",p:20}], tags:["Savory","Brunch"] },
];

const KCOL = { Dairy:{bg:"rgba(212,175,55,0.18)",b:"#d4af37",t:"#d4af37"}, Parve:{bg:"rgba(34,160,100,0.18)",b:"#22a064",t:"#22a064"} };
function uid(){ return Math.random().toString(36).slice(2,9); }

// ─── EDITABLE TEXT COMPONENT ─────────────────────────────────────────────────
function ET({ k, texts, setTexts, tag="span", style={}, multiline=false, adminMode }) {
  const [editing, setEditing] = useState(false);
  const ref = useRef();
  useEffect(()=>{ if(editing && ref.current) ref.current.focus(); },[editing]);
  if(!adminMode) {
    const Tag = tag;
    return <Tag style={style}>{texts[k].split("\n").map((l,i)=><span key={i}>{l}{i<texts[k].split("\n").length-1&&<br/>}</span>)}</Tag>;
  }
  if(editing) {
    const common = { value:texts[k], onChange:e=>setTexts(t=>({...t,[k]:e.target.value})),
      onBlur:()=>setEditing(false), ref,
      style:{...style,background:"rgba(212,175,55,0.15)",border:"1px solid #d4af37",borderRadius:4,
        color:"inherit",fontFamily:"inherit",fontSize:"inherit",fontWeight:"inherit",
        letterSpacing:"inherit",lineHeight:"inherit",width:"100%",outline:"none",padding:"2px 6px",resize:"none"} };
    return multiline ? <textarea {...common} rows={Math.max(2,texts[k].split("\n").length)}/> : <input {...common}/>;
  }
  const Tag = tag;
  return (
    <Tag onClick={()=>setEditing(true)} style={{...style,cursor:"text",borderBottom:"1px dashed rgba(212,175,55,0.5)",display:tag==="div"||tag==="p"?"block":"inline"}}>
      {texts[k].split("\n").map((l,i)=><span key={i}>{l}{i<texts[k].split("\n").length-1&&<br/>}</span>)}
      <span style={{fontSize:10,color:"#d4af37",marginLeft:4,opacity:.7}}>✏</span>
    </Tag>
  );
}

// ─── IMG PLACEHOLDER ──────────────────────────────────────────────────────────
function Img({url,h=220,br=0}){
  if(url) return <img src={url} alt="" style={{width:"100%",height:h,objectFit:"cover",borderRadius:br,display:"block"}}/>;
  return <div style={{width:"100%",height:h,background:"linear-gradient(135deg,#1a2e1e,#0f1f12)",display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",gap:8,borderRadius:br}}>
    <span style={{fontSize:40}}>🎂</span>
    <span style={{fontSize:11,color:"rgba(212,175,55,0.4)",letterSpacing:2}}>SIN IMAGEN</span>
  </div>;
}

// ════════════════════════════════════════════════════════════════════════════
export default function ReverSite() {
  const [texts,    setTexts]    = useState(TEXTS_DEFAULT);
  const [catalog,  setCatalog]  = useState(CATALOG_DEFAULT);
  const [adminMode,setAdminMode]= useState(false);
  const [adminUnlocked,setAdminUnlocked] = useState(false);
  const [carrito,  setCarrito]  = useState([]);
  const [catFiltro,setCatFiltro]= useState("Todos");
  const [section,  setSection]  = useState("home"); // home | menu | cart | checkout | success
  const [prodModal,setProdModal]= useState(null);

  // Checkout form
  const [form, setForm] = useState({nombre:"",tel:"",email:"",entrega:"delivery",dir:"",ciudad:"Miami",zip:"",nota:""});
  const [formErr, setFormErr] = useState("");
  const [copiado, setCopiado] = useState(false);

  const menuRef    = useRef();
  const heroRef    = useRef();
  const aboutRef   = useRef();
  const howRef     = useRef();
  const contactRef = useRef();

  const CATS = ["Todos",...[...new Set(catalog.map(p=>p.categoria))]];
  const prodsFilt = catalog.filter(p=>catFiltro==="Todos"||p.categoria===catFiltro);
  const totalCarrito = carrito.reduce((a,i)=>a+i.precio*i.cant,0);
  const totalItems   = carrito.reduce((a,i)=>a+i.cant,0);

  function scrollTo(ref){ ref.current?.scrollIntoView({behavior:"smooth"}); setSection("home"); }

  function addToCart(prod, tamano, precio, nota=""){
    const key=prod.id+"_"+tamano;
    setCarrito(c=>{
      const ex=c.find(x=>x.key===key);
      if(ex) return c.map(x=>x.key===key?{...x,cant:x.cant+1}:x);
      return [...c,{id:uid(),key,prodId:prod.id,nombre:prod.nombre,tamano,precio,cant:1,nota}];
    });
    setProdModal(null);
  }
  function updCant(id,v){ setCarrito(c=>c.map(x=>x.id===id?{...x,cant:Math.max(1,parseInt(v)||1)}:x)); }
  function remItem(id){ setCarrito(c=>c.filter(x=>x.id!==id)); }

  function confirmar(){
    if(!form.nombre.trim()){setFormErr("Por favor ingresa tu nombre");return;}
    if(!form.tel.trim()){setFormErr("Por favor ingresa tu teléfono");return;}
    if(form.entrega==="delivery"&&!form.dir.trim()){setFormErr("Por favor ingresa tu dirección");return;}
    setFormErr("");
    const msg=[
      "🎂 *RÊVER PÂTISSERIE — Nuevo Pedido*","",
      "*Cliente:* "+form.nombre,"*Tel:* "+form.tel,
      form.email?"*Email:* "+form.email:null,"",
      "*PEDIDO:*",
      ...carrito.map(i=>"• "+i.cant+"x "+i.nombre+" ("+i.tamano+") — $"+(i.precio*i.cant).toFixed(2)+(i.nota?" _"+i.nota+"_":"")),
      "","*TOTAL: $"+totalCarrito.toFixed(2)+"*","",
      form.entrega==="delivery"?"*Entrega:* "+form.dir+(form.ciudad?" — "+form.ciudad:"")+(form.zip?" "+form.zip:""):"*Retiro en local*",
      form.nota?"*Notas:* "+form.nota:null,
    ].filter(Boolean).join("\n");
    window.open("https://wa.me/"+WA+"?text="+encodeURIComponent(msg),"_blank");
    setSection("success");
  }

  function adminLogin(){
    const p=prompt("Contraseña admin:");
    if(p==="rever2024"){setAdminUnlocked(true);setAdminMode(true);}
    else alert("Contraseña incorrecta");
  }

  const et = (k,tag,style,ml)=>(
    <ET k={k} texts={texts} setTexts={setTexts} tag={tag} style={style} multiline={ml} adminMode={adminMode}/>
  );

  const inputSt={padding:"11px 14px",background:"rgba(255,255,255,0.06)",border:"1px solid rgba(212,175,55,0.25)",borderRadius:9,color:"#fff",fontSize:15,width:"100%",fontFamily:"inherit",outline:"none"};

  // ─── MODAL PRODUCTO ──────────────────────────────────────────────────────
  function ProdModal({p,onClose}){
    const [sel,setSel]=useState(p.tamanos[0]);
    const [nota,setNota]=useState("");
    const col=KCOL[p.kashrut]||KCOL.Parve;
    return (
      <div onClick={e=>{if(e.target===e.currentTarget)onClose();}}
        style={{position:"fixed",inset:0,background:"rgba(0,0,0,0.88)",zIndex:1000,display:"flex",alignItems:"center",justifyContent:"center",padding:16,overflowY:"auto"}}>
        <div style={{background:"#0e1e12",border:"1px solid rgba(212,175,55,0.28)",borderRadius:20,width:"100%",maxWidth:540,overflow:"hidden",maxHeight:"92vh",overflowY:"auto"}}>
          <div style={{position:"relative"}}>
            <Img url={p.imageUrl} h={260}/>
            <button onClick={onClose} style={{position:"absolute",top:12,right:12,background:"rgba(0,0,0,0.65)",border:"none",borderRadius:50,width:36,height:36,color:"#fff",fontSize:20,cursor:"pointer",display:"flex",alignItems:"center",justifyContent:"center",lineHeight:1}}>×</button>
            <div style={{position:"absolute",top:12,left:12,display:"flex",gap:6,flexWrap:"wrap"}}>
              <span style={{fontSize:10,padding:"3px 9px",borderRadius:20,background:col.bg,border:"1px solid "+col.b,color:col.t}}>{p.kashrut}</span>
              {p.tags.slice(0,2).map(t=><span key={t} style={{fontSize:10,padding:"3px 9px",borderRadius:20,background:"rgba(0,0,0,0.55)",color:"rgba(232,220,200,0.8)",border:"1px solid rgba(232,220,200,0.15)"}}>{t}</span>)}
            </div>
          </div>
          <div style={{padding:24}}>
            <div style={{fontSize:11,color:"rgba(212,175,55,0.55)",letterSpacing:3,marginBottom:5,textTransform:"uppercase"}}>{p.categoria}</div>
            <h2 style={{fontFamily:"'Playfair Display'",fontSize:24,color:"#fff",marginBottom:12,lineHeight:1.2}}>{p.nombre}</h2>
            <p style={{fontSize:15,color:"rgba(232,220,200,0.68)",lineHeight:1.75,marginBottom:20}}>{p.descripcion}</p>
            <div style={{marginBottom:16}}>
              <div style={{fontSize:11,color:"rgba(232,220,200,0.42)",letterSpacing:2,marginBottom:9}}>TAMAÑO Y PRECIO</div>
              <div style={{display:"flex",gap:8,flexWrap:"wrap"}}>
                {p.tamanos.map(t=>(
                  <button key={t.s} onClick={()=>setSel(t)} style={{padding:"9px 18px",borderRadius:30,cursor:"pointer",fontFamily:"inherit",fontSize:14,background:sel.s===t.s?"#d4af37":"transparent",border:sel.s===t.s?"1px solid #d4af37":"1px solid rgba(212,175,55,0.3)",color:sel.s===t.s?"#0e1e12":"#d4af37",fontWeight:sel.s===t.s?700:400}}>
                    {t.s} — <strong>${t.p}</strong>
                  </button>
                ))}
              </div>
            </div>
            <div style={{marginBottom:20}}>
              <div style={{fontSize:11,color:"rgba(232,220,200,0.42)",letterSpacing:2,marginBottom:7}}>NOTA ESPECIAL (opcional)</div>
              <input value={nota} onChange={e=>setNota(e.target.value)} placeholder="Personalizacion, dedicatoria, alergias..." style={inputSt}/>
            </div>
            <button onClick={()=>addToCart(p,sel.s,sel.p,nota)} style={{width:"100%",padding:"14px",background:"#d4af37",border:"none",borderRadius:12,color:"#0e1e12",fontSize:17,fontWeight:700,cursor:"pointer",fontFamily:"inherit"}}>
              Agregar al pedido — ${sel.p}
            </button>
          </div>
        </div>
      </div>
    );
  }

  // ─── ADMIN IMAGE PANEL ────────────────────────────────────────────────────
  function AdminImgPanel(){
    return (
      <div style={{background:"rgba(0,0,0,0.5)",borderTop:"1px solid rgba(212,175,55,0.2)",padding:"20px 5vw"}}>
        <div style={{maxWidth:900,margin:"0 auto"}}>
          <div style={{fontSize:12,color:"#d4af37",letterSpacing:3,marginBottom:14,textTransform:"uppercase"}}>Admin — Imagenes del catálogo</div>
          <div style={{display:"flex",flexDirection:"column",gap:8}}>
            {catalog.map(p=>(
              <div key={p.id} style={{display:"flex",alignItems:"center",gap:12,padding:"10px 14px",background:"rgba(255,255,255,0.03)",borderRadius:10,border:"1px solid rgba(212,175,55,0.12)"}}>
                <Img url={p.imageUrl} h={52}/>
                <div style={{flex:1,minWidth:0}}>
                  <div style={{fontSize:13,color:"#e8dcc8",marginBottom:4}}>{p.nombre}</div>
                  <input value={p.imageUrl} onChange={e=>setCatalog(c=>c.map(x=>x.id===p.id?{...x,imageUrl:e.target.value}:x))}
                    placeholder="Pegar URL de imagen..." style={{...inputSt,padding:"5px 10px",fontSize:12}}/>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    );
  }

  // ════════════════════════════════════════════════════════════════════════════
  return (
    <div style={{minHeight:"100vh",background:"#080f0a",fontFamily:"'Crimson Text','Georgia',serif",color:"#e8dcc8",overflowX:"hidden"}}>
      <style>{`
        @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;0,900;1,400;1,700&family=Crimson+Text:ital,wght@0,400;0,600;1,400&display=swap');
        *{box-sizing:border-box;margin:0;padding:0}
        html{scroll-behavior:smooth}
        ::-webkit-scrollbar{width:4px}::-webkit-scrollbar-track{background:#080f0a}::-webkit-scrollbar-thumb{background:#d4af37;border-radius:2px}
        input,textarea,select{outline:none;font-family:inherit}
        .card{transition:transform .25s,box-shadow .25s}
        .card:hover{transform:translateY(-5px);box-shadow:0 24px 48px rgba(0,0,0,0.55)!important}
        .btn{transition:opacity .15s,transform .15s}
        .btn:hover{opacity:.88;transform:translateY(-1px)}
        .navlink{transition:color .2s;cursor:pointer}
        .navlink:hover{color:#d4af37!important}
        .tag{transition:all .2s}.tag:hover{background:rgba(212,175,55,0.22)!important}
        @keyframes fadeUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
        .fadeup{animation:fadeUp .8s ease forwards}
        .fadeup2{animation:fadeUp .8s ease .15s forwards;opacity:0}
        .fadeup3{animation:fadeUp .8s ease .3s forwards;opacity:0}
      `}</style>

      {/* ═══ NAVBAR ═══ */}
      <nav style={{position:"fixed",top:0,left:0,right:0,zIndex:200,background:"rgba(8,15,10,0.82)",backdropFilter:"blur(16px)",borderBottom:"1px solid rgba(212,175,55,0.12)"}}>
        <div style={{maxWidth:1100,margin:"0 auto",padding:"0 5vw",display:"flex",alignItems:"center",justifyContent:"space-between",height:64}}>
          <div onClick={()=>{setSection("home");scrollTo(heroRef);}} style={{cursor:"pointer"}}>
            <div style={{fontFamily:"'Playfair Display'",fontSize:"clamp(16px,2.5vw,22px)",fontWeight:900,color:"#fff",letterSpacing:1}}>Rêver Pâtisserie</div>
            <div style={{fontSize:10,color:"rgba(212,175,55,0.55)",letterSpacing:4,textTransform:"uppercase",marginTop:1}}>{texts.heroTagline.split("·")[1]?.trim()||"Miami"}</div>
          </div>
          <div style={{display:"flex",gap:"clamp(14px,2vw,28px)",alignItems:"center"}}>
            {[["Menu",menuRef],["About",aboutRef],["How",howRef],["Contact",contactRef]].map(([l,r])=>(
              <span key={l} className="navlink" onClick={()=>scrollTo(r)} style={{fontSize:14,color:"rgba(232,220,200,0.6)",letterSpacing:1,textTransform:"uppercase"}}>{l}</span>
            ))}
            <button onClick={()=>setSection(section==="cart"?"home":"cart")} className="btn"
              style={{position:"relative",background:"transparent",border:"1px solid rgba(212,175,55,0.4)",borderRadius:30,padding:"7px 16px",color:"#d4af37",cursor:"pointer",fontSize:14,fontFamily:"inherit",display:"flex",alignItems:"center",gap:7}}>
              🛒 Order
              {totalItems>0&&<span style={{background:"#d4af37",color:"#080f0a",borderRadius:50,minWidth:20,height:20,display:"inline-flex",alignItems:"center",justifyContent:"center",fontSize:11,fontWeight:700}}>{totalItems}</span>}
            </button>
            <button onClick={()=>adminUnlocked?setAdminMode(m=>!m):adminLogin()} style={{background:"transparent",border:"1px solid rgba(212,175,55,0.15)",borderRadius:6,padding:"5px 9px",color:"rgba(212,175,55,0.4)",cursor:"pointer",fontSize:11}}>⚙</button>
          </div>
        </div>
      </nav>

      {adminMode&&<div style={{position:"fixed",top:64,left:0,right:0,zIndex:190,background:"rgba(212,175,55,0.12)",borderBottom:"1px solid rgba(212,175,55,0.3)",padding:"8px 5vw",textAlign:"center",fontSize:13,color:"#d4af37"}}>
        ✏️ Modo edicion activo — hacé click en cualquier texto para editarlo · <button onClick={()=>setAdminMode(false)} style={{background:"transparent",border:"1px solid #d4af37",borderRadius:6,padding:"3px 10px",color:"#d4af37",cursor:"pointer",fontSize:12,fontFamily:"inherit",marginLeft:8}}>Terminar edicion</button>
      </div>}

      {/* ═══ CART VIEW ═══ */}
      {section==="cart"&&(
        <div style={{paddingTop:100,minHeight:"100vh",maxWidth:900,margin:"0 auto",padding:"100px 5vw 60px"}}>
          <div style={{display:"flex",alignItems:"center",gap:12,marginBottom:24}}>
            <button onClick={()=>setSection("home")} style={{background:"transparent",border:"1px solid rgba(212,175,55,0.3)",borderRadius:8,padding:"7px 14px",color:"#d4af37",cursor:"pointer",fontFamily:"inherit",fontSize:14}}>← Back</button>
            <h2 style={{fontFamily:"'Playfair Display'",fontSize:28,color:"#d4af37"}}>Your Order</h2>
          </div>
          {carrito.length===0?(
            <div style={{textAlign:"center",padding:"80px 20px"}}>
              <div style={{fontSize:60,marginBottom:16}}>🛒</div>
              <div style={{fontSize:18,color:"rgba(232,220,200,0.5)"}}>Your cart is empty</div>
              <button onClick={()=>{setSection("home");scrollTo(menuRef);}} className="btn"
                style={{marginTop:24,background:"#d4af37",border:"none",borderRadius:12,padding:"12px 28px",color:"#080f0a",fontWeight:700,cursor:"pointer",fontFamily:"inherit",fontSize:16}}>Browse Menu</button>
            </div>
          ):(
            <div style={{display:"grid",gridTemplateColumns:"1fr 320px",gap:24,alignItems:"start"}}>
              <div style={{display:"flex",flexDirection:"column",gap:10}}>
                {carrito.map(item=>(
                  <div key={item.id} style={{background:"#0e1e12",borderRadius:14,padding:"14px 18px",border:"1px solid rgba(212,175,55,0.14)"}}>
                    <div style={{display:"flex",alignItems:"center",gap:10}}>
                      <div style={{flex:1}}>
                        <div style={{fontSize:16,color:"#fff",fontWeight:600}}>{item.nombre}</div>
                        <div style={{fontSize:13,color:"rgba(212,175,55,0.7)",marginTop:2}}>{item.tamano} — ${item.precio} ea.</div>
                      </div>
                      <div style={{display:"flex",alignItems:"center",gap:7}}>
                        <button onClick={()=>updCant(item.id,item.cant-1)} style={{background:"rgba(212,175,55,0.15)",border:"none",borderRadius:6,width:30,height:30,color:"#d4af37",cursor:"pointer",fontSize:16,lineHeight:1}}>-</button>
                        <span style={{fontSize:16,color:"#fff",minWidth:22,textAlign:"center"}}>{item.cant}</span>
                        <button onClick={()=>updCant(item.id,item.cant+1)} style={{background:"rgba(212,175,55,0.15)",border:"none",borderRadius:6,width:30,height:30,color:"#d4af37",cursor:"pointer",fontSize:16,lineHeight:1}}>+</button>
                      </div>
                      <span style={{fontSize:18,color:"#d4af37",fontWeight:700,minWidth:65,textAlign:"right"}}>${(item.precio*item.cant).toFixed(2)}</span>
                      <button onClick={()=>remItem(item.id)} style={{background:"transparent",border:"none",color:"rgba(248,113,113,0.7)",cursor:"pointer",fontSize:20,lineHeight:1,padding:"0 4px"}}>×</button>
                    </div>
                    {item.nota&&<div style={{fontSize:12,color:"rgba(232,220,200,0.45)",marginTop:6,fontStyle:"italic"}}>Note: {item.nota}</div>}
                  </div>
                ))}
                <button onClick={()=>{setSection("home");scrollTo(menuRef);}} style={{background:"transparent",border:"1px dashed rgba(212,175,55,0.3)",borderRadius:12,padding:"12px",color:"rgba(212,175,55,0.6)",cursor:"pointer",fontFamily:"inherit",fontSize:14}}>+ Add more items</button>
              </div>
              <div style={{background:"#0e1e12",borderRadius:16,padding:22,border:"1px solid rgba(212,175,55,0.18)",position:"sticky",top:80}}>
                <div style={{fontSize:11,color:"#d4af37",letterSpacing:2,marginBottom:14}}>ORDER SUMMARY</div>
                {carrito.map(i=><div key={i.id} style={{display:"flex",justifyContent:"space-between",marginBottom:6}}><span style={{fontSize:13,color:"rgba(232,220,200,0.6)"}}>{i.cant}x {i.nombre}</span><span style={{fontSize:13,color:"#e8dcc8"}}>${(i.precio*i.cant).toFixed(2)}</span></div>)}
                <div style={{borderTop:"1px solid rgba(212,175,55,0.2)",marginTop:12,paddingTop:12,display:"flex",justifyContent:"space-between",alignItems:"center"}}>
                  <span style={{fontSize:15,color:"#d4af37",fontWeight:700}}>TOTAL</span>
                  <span style={{fontSize:26,fontFamily:"'Playfair Display'",fontWeight:700,color:"#d4af37"}}>${totalCarrito.toFixed(2)}</span>
                </div>
                <button onClick={()=>setSection("checkout")} className="btn"
                  style={{width:"100%",marginTop:18,background:"#d4af37",border:"none",borderRadius:12,padding:"14px",color:"#080f0a",fontSize:17,fontWeight:700,cursor:"pointer",fontFamily:"inherit"}}>
                  Checkout →
                </button>
              </div>
            </div>
          )}
        </div>
      )}

      {/* ═══ CHECKOUT VIEW ═══ */}
      {section==="checkout"&&(
        <div style={{paddingTop:100,maxWidth:620,margin:"0 auto",padding:"100px 5vw 60px"}}>
          <div style={{display:"flex",alignItems:"center",gap:12,marginBottom:24}}>
            <button onClick={()=>setSection("cart")} style={{background:"transparent",border:"1px solid rgba(212,175,55,0.3)",borderRadius:8,padding:"7px 14px",color:"#d4af37",cursor:"pointer",fontFamily:"inherit",fontSize:14}}>← Back</button>
            <h2 style={{fontFamily:"'Playfair Display'",fontSize:28,color:"#d4af37"}}>Delivery Details</h2>
          </div>
          {formErr&&<div style={{background:"rgba(248,113,113,0.12)",border:"1px solid #f87171",borderRadius:10,padding:"10px 16px",color:"#f87171",fontSize:14,marginBottom:16}}>{formErr}</div>}
          <div style={{background:"#0e1e12",borderRadius:16,padding:26,border:"1px solid rgba(212,175,55,0.15)",display:"flex",flexDirection:"column",gap:16}}>
            <div style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:14}}>
              {[["Name *","Tu nombre completo","nombre"],["Phone *","+1 (305) 000-0000","tel"]].map(([l,pl,k])=>(
                <div key={k}><div style={{fontSize:11,color:"rgba(232,220,200,0.42)",letterSpacing:1.5,marginBottom:6,textTransform:"uppercase"}}>{l}</div>
                <input value={form[k]} onChange={e=>setForm(f=>({...f,[k]:e.target.value}))} placeholder={pl} style={inputSt}/></div>
              ))}
            </div>
            <div><div style={{fontSize:11,color:"rgba(232,220,200,0.42)",letterSpacing:1.5,marginBottom:6,textTransform:"uppercase"}}>Email (optional)</div>
            <input value={form.email} onChange={e=>setForm(f=>({...f,email:e.target.value}))} placeholder="tu@email.com" style={inputSt}/></div>
            <div>
              <div style={{fontSize:11,color:"rgba(232,220,200,0.42)",letterSpacing:1.5,marginBottom:9,textTransform:"uppercase"}}>Delivery Type</div>
              <div style={{display:"flex",gap:10}}>
                {["delivery","pickup"].map(op=>(
                  <button key={op} onClick={()=>setForm(f=>({...f,entrega:op}))} style={{flex:1,padding:"11px",borderRadius:10,cursor:"pointer",fontFamily:"inherit",fontSize:14,background:form.entrega===op?"#d4af37":"transparent",border:form.entrega===op?"1px solid #d4af37":"1px solid rgba(212,175,55,0.3)",color:form.entrega===op?"#080f0a":"#d4af37",fontWeight:form.entrega===op?700:400}}>
                    {op==="delivery"?"🚗 Delivery":"🏪 Pick Up"}
                  </button>
                ))}
              </div>
            </div>
            {form.entrega==="delivery"&&(
              <>
                <div><div style={{fontSize:11,color:"rgba(232,220,200,0.42)",letterSpacing:1.5,marginBottom:6,textTransform:"uppercase"}}>Address *</div>
                <input value={form.dir} onChange={e=>setForm(f=>({...f,dir:e.target.value}))} placeholder="Street, number, apt" style={inputSt}/></div>
                <div style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:12}}>
                  {[["City","Miami","ciudad"],["ZIP Code","33101","zip"]].map(([l,pl,k])=>(
                    <div key={k}><div style={{fontSize:11,color:"rgba(232,220,200,0.42)",letterSpacing:1.5,marginBottom:6,textTransform:"uppercase"}}>{l}</div>
                    <input value={form[k]} onChange={e=>setForm(f=>({...f,[k]:e.target.value}))} placeholder={pl} style={inputSt}/></div>
                  ))}
                </div>
              </>
            )}
            <div><div style={{fontSize:11,color:"rgba(232,220,200,0.42)",letterSpacing:1.5,marginBottom:6,textTransform:"uppercase"}}>Special Notes</div>
            <textarea value={form.nota} onChange={e=>setForm(f=>({...f,nota:e.target.value}))} rows={3} placeholder="Preferred date/time, allergies, special requests..." style={{...inputSt,resize:"vertical"}}/></div>
            {/* Order recap */}
            <div style={{background:"rgba(212,175,55,0.06)",borderRadius:10,padding:14,border:"1px solid rgba(212,175,55,0.14)"}}>
              <div style={{fontSize:11,color:"rgba(212,175,55,0.6)",letterSpacing:2,marginBottom:10}}>YOUR ORDER</div>
              {carrito.map(i=><div key={i.id} style={{display:"flex",justifyContent:"space-between",marginBottom:5}}><span style={{fontSize:13,color:"rgba(232,220,200,0.65)"}}>{i.cant}x {i.nombre} ({i.tamano})</span><span style={{fontSize:13,color:"#e8dcc8"}}>${(i.precio*i.cant).toFixed(2)}</span></div>)}
              <div style={{borderTop:"1px solid rgba(212,175,55,0.2)",marginTop:8,paddingTop:8,display:"flex",justifyContent:"space-between"}}>
                <span style={{fontSize:15,color:"#d4af37",fontWeight:700}}>TOTAL</span>
                <span style={{fontSize:22,color:"#d4af37",fontFamily:"'Playfair Display'",fontWeight:700}}>${totalCarrito.toFixed(2)}</span>
              </div>
            </div>
            <button onClick={confirmar} className="btn"
              style={{width:"100%",padding:"16px",background:"#25D366",border:"none",borderRadius:12,color:"#fff",fontSize:18,fontWeight:700,cursor:"pointer",fontFamily:"inherit",display:"flex",alignItems:"center",justifyContent:"center",gap:10}}>
              <span style={{fontSize:22}}>📲</span> Send Order via WhatsApp
            </button>
            <div style={{textAlign:"center",fontSize:12,color:"rgba(232,220,200,0.35)"}}>WhatsApp will open with your full order details</div>
          </div>
        </div>
      )}

      {/* ═══ SUCCESS ═══ */}
      {section==="success"&&(
        <div style={{minHeight:"100vh",display:"flex",alignItems:"center",justifyContent:"center",padding:"20px 5vw",textAlign:"center"}}>
          <div>
            <div style={{fontSize:72,marginBottom:20}}>🎉</div>
            <h2 style={{fontFamily:"'Playfair Display'",fontSize:36,color:"#d4af37",marginBottom:12}}>Order Sent!</h2>
            <p style={{fontSize:17,color:"rgba(232,220,200,0.65)",maxWidth:420,margin:"0 auto 32px",lineHeight:1.7}}>Your order was sent via WhatsApp. We'll get back to you shortly to confirm availability and payment details.</p>
            <button onClick={()=>{setSection("home");setCarrito([]);setForm({nombre:"",tel:"",email:"",entrega:"delivery",dir:"",ciudad:"Miami",zip:"",nota:""}); scrollTo(heroRef);}} className="btn"
              style={{background:"#d4af37",border:"none",borderRadius:12,padding:"14px 32px",color:"#080f0a",fontSize:17,fontWeight:700,cursor:"pointer",fontFamily:"inherit"}}>Back to Home</button>
          </div>
        </div>
      )}

      {/* ═══ HOME SECTIONS ═══ */}
      {section==="home"&&(
        <>
        {/* ── HERO ── */}
        <section ref={heroRef} style={{minHeight:"100vh",display:"flex",alignItems:"center",justifyContent:"center",position:"relative",overflow:"hidden",paddingTop:64}}>
          {/* Background */}
          <div style={{position:"absolute",inset:0,background:"radial-gradient(ellipse at 50% 60%,rgba(212,175,55,0.08) 0%,transparent 65%), linear-gradient(180deg,#080f0a 0%,#0a1a0d 50%,#080f0a 100%)"}}/>
          {/* Decorative circles */}
          <div style={{position:"absolute",width:500,height:500,borderRadius:"50%",border:"1px solid rgba(212,175,55,0.06)",top:"10%",left:"60%",transform:"translate(-50%,-50%)"}}/>
          <div style={{position:"absolute",width:800,height:800,borderRadius:"50%",border:"1px solid rgba(212,175,55,0.04)",top:"10%",left:"60%",transform:"translate(-50%,-50%)"}}/>

          <div style={{maxWidth:820,margin:"0 auto",padding:"0 5vw",textAlign:"center",position:"relative",zIndex:1}}>
            <div className="fadeup" style={{fontSize:12,letterSpacing:7,color:"rgba(212,175,55,0.65)",marginBottom:20,textTransform:"uppercase"}}>
              {et("heroTagline","span",{})}
            </div>
            <h1 className="fadeup2" style={{fontFamily:"'Playfair Display'",fontSize:"clamp(38px,7vw,82px)",fontWeight:900,color:"#fff",lineHeight:1.1,marginBottom:28,letterSpacing:-1}}>
              {adminMode
                ? <ET k="heroTitle" texts={texts} setTexts={setTexts} tag="span" style={{fontFamily:"'Playfair Display'",fontSize:"inherit",fontWeight:"inherit",color:"inherit",letterSpacing:"inherit"}} multiline adminMode={adminMode}/>
                : texts.heroTitle.split("\n").map((l,i)=>(
                  <span key={i}>
                    {i===1?<em style={{color:"#d4af37",fontStyle:"italic"}}>{l}</em>:l}
                    {i<texts.heroTitle.split("\n").length-1&&<br/>}
                  </span>
                ))
              }
            </h1>
            <p className="fadeup3" style={{fontSize:"clamp(15px,2vw,19px)",color:"rgba(232,220,200,0.6)",maxWidth:520,margin:"0 auto 40px",lineHeight:1.75}}>
              {et("heroSubtitle","span",{})}
            </p>
            <div className="fadeup3" style={{display:"flex",gap:14,justifyContent:"center",flexWrap:"wrap"}}>
              <button onClick={()=>scrollTo(menuRef)} className="btn"
                style={{background:"#d4af37",border:"none",borderRadius:50,padding:"15px 36px",color:"#080f0a",fontSize:17,fontWeight:700,cursor:"pointer",fontFamily:"inherit",letterSpacing:.5}}>
                {texts.heroCta}
              </button>
              <button onClick={()=>scrollTo(aboutRef)} className="btn"
                style={{background:"transparent",border:"1px solid rgba(212,175,55,0.4)",borderRadius:50,padding:"15px 36px",color:"#d4af37",fontSize:17,cursor:"pointer",fontFamily:"inherit"}}>
                Our Story
              </button>
            </div>
          </div>
          {/* Scroll hint */}
          <div style={{position:"absolute",bottom:32,left:"50%",transform:"translateX(-50%)",display:"flex",flexDirection:"column",alignItems:"center",gap:6,opacity:.4}}>
            <div style={{width:1,height:40,background:"linear-gradient(to bottom,transparent,#d4af37)"}}/>
            <span style={{fontSize:10,color:"#d4af37",letterSpacing:3,textTransform:"uppercase"}}>Scroll</span>
          </div>
        </section>

        {/* ── ABOUT ── */}
        <section ref={aboutRef} style={{padding:"100px 5vw",background:"#0a1a0d"}}>
          <div style={{maxWidth:1000,margin:"0 auto",display:"grid",gridTemplateColumns:"1fr 1fr",gap:60,alignItems:"center"}}>
            <div>
              <div style={{width:60,height:2,background:"#d4af37",marginBottom:24}}/>
              <h2 style={{fontFamily:"'Playfair Display'",fontSize:"clamp(28px,4vw,48px)",fontWeight:900,color:"#fff",marginBottom:24,lineHeight:1.2}}>
                {et("aboutTitle","span",{})}
              </h2>
              <div style={{fontSize:16,color:"rgba(232,220,200,0.65)",lineHeight:1.85}}>
                {et("aboutText","span",{},true)}
              </div>
              <div style={{marginTop:32,display:"flex",gap:24,flexWrap:"wrap"}}>
                {[["100%","Kosher Certified"],["Fresh","Made to Order"],["Miami","Based & Local"]].map(([v,l])=>(
                  <div key={l} style={{textAlign:"center"}}>
                    <div style={{fontSize:22,color:"#d4af37",fontFamily:"'Playfair Display'",fontWeight:700}}>{v}</div>
                    <div style={{fontSize:12,color:"rgba(232,220,200,0.45)",letterSpacing:1,marginTop:2}}>{l}</div>
                  </div>
                ))}
              </div>
            </div>
            <div style={{position:"relative"}}>
              <div style={{background:"linear-gradient(135deg,#1a2e1e,#0f1f12)",borderRadius:16,overflow:"hidden",aspectRatio:"4/5",display:"flex",alignItems:"center",justifyContent:"center"}}>
                <span style={{fontSize:80}}>🎂</span>
              </div>
              <div style={{position:"absolute",bottom:-20,left:-20,width:120,height:120,border:"2px solid rgba(212,175,55,0.3)",borderRadius:8}}/>
              <div style={{position:"absolute",top:-16,right:-16,width:80,height:80,background:"rgba(212,175,55,0.08)",borderRadius:"50%"}}/>
            </div>
          </div>
        </section>

        {/* ── HOW IT WORKS ── */}
        <section ref={howRef} style={{padding:"100px 5vw",background:"#080f0a"}}>
          <div style={{maxWidth:1000,margin:"0 auto",textAlign:"center"}}>
            <div style={{width:60,height:2,background:"#d4af37",margin:"0 auto 24px"}}/>
            <h2 style={{fontFamily:"'Playfair Display'",fontSize:"clamp(26px,4vw,44px)",fontWeight:900,color:"#fff",marginBottom:60}}>
              {et("howTitle","span",{})}
            </h2>
            <div style={{display:"grid",gridTemplateColumns:"1fr 1fr 1fr",gap:32}}>
              {[
                {num:"01",tk:"how1Title",tk2:"how1Text",icon:"🔍"},
                {num:"02",tk:"how2Title",tk2:"how2Text",icon:"📲"},
                {num:"03",tk:"how3Title",tk2:"how3Text",icon:"🎉"},
              ].map(({num,tk,tk2,icon})=>(
                <div key={num} style={{padding:28,background:"#0a1a0d",borderRadius:16,border:"1px solid rgba(212,175,55,0.1)",position:"relative",overflow:"hidden"}}>
                  <div style={{position:"absolute",top:-10,right:8,fontFamily:"'Playfair Display'",fontSize:80,fontWeight:900,color:"rgba(212,175,55,0.05)",lineHeight:1}}>{num}</div>
                  <div style={{fontSize:40,marginBottom:18}}>{icon}</div>
                  <h3 style={{fontFamily:"'Playfair Display'",fontSize:20,color:"#d4af37",marginBottom:10}}>
                    {et(tk,"span",{})}
                  </h3>
                  <p style={{fontSize:14,color:"rgba(232,220,200,0.58)",lineHeight:1.7}}>
                    {et(tk2,"span",{})}
                  </p>
                </div>
              ))}
            </div>
          </div>
        </section>

        {/* ── MENU ── */}
        <section ref={menuRef} style={{padding:"100px 5vw",background:"#0a1a0d"}}>
          <div style={{maxWidth:1100,margin:"0 auto"}}>
            <div style={{textAlign:"center",marginBottom:48}}>
              <div style={{width:60,height:2,background:"#d4af37",margin:"0 auto 24px"}}/>
              <h2 style={{fontFamily:"'Playfair Display'",fontSize:"clamp(26px,4vw,44px)",fontWeight:900,color:"#fff",marginBottom:12}}>
                {et("menuTitle","span",{})}
              </h2>
              <p style={{fontSize:15,color:"rgba(232,220,200,0.5)",letterSpacing:1}}>
                {et("menuSubtitle","span",{})}
              </p>
            </div>

            {/* Category filter */}
            <div style={{display:"flex",gap:8,overflowX:"auto",paddingBottom:4,marginBottom:36,scrollbarWidth:"none",justifyContent:"center",flexWrap:"wrap"}}>
              {CATS.map(c=>(
                <button key={c} className="tag" onClick={()=>setCatFiltro(c)} style={{padding:"8px 18px",borderRadius:30,whiteSpace:"nowrap",cursor:"pointer",fontFamily:"inherit",fontSize:13,
                  background:catFiltro===c?"#d4af37":"transparent",border:catFiltro===c?"1px solid #d4af37":"1px solid rgba(212,175,55,0.3)",
                  color:catFiltro===c?"#080f0a":"#d4af37",fontWeight:catFiltro===c?700:400}}>
                  {c}
                </button>
              ))}
            </div>

            {/* Grid */}
            <div style={{display:"grid",gridTemplateColumns:"repeat(auto-fill,minmax(280px,1fr))",gap:22}}>
              {prodsFilt.map(p=>{
                const col=KCOL[p.kashrut]||KCOL.Parve;
                const minP=Math.min(...p.tamanos.map(t=>t.p));
                return (
                  <div key={p.id} className="card" style={{background:"#0d1a10",borderRadius:18,overflow:"hidden",border:"1px solid rgba(212,175,55,0.1)",cursor:"pointer",boxShadow:"0 4px 20px rgba(0,0,0,0.3)"}}
                    onClick={()=>setProdModal(p)}>
                    <div style={{position:"relative"}}>
                      <Img url={p.imageUrl} h={210}/>
                      {adminMode&&(
                        <div onClick={e=>e.stopPropagation()} style={{position:"absolute",bottom:0,left:0,right:0,background:"rgba(0,0,0,0.75)",padding:"6px 10px"}}>
                          <input value={p.imageUrl} onChange={e=>setCatalog(c=>c.map(x=>x.id===p.id?{...x,imageUrl:e.target.value}:x))}
                            placeholder="URL imagen..." onClick={e=>e.stopPropagation()}
                            style={{width:"100%",background:"rgba(255,255,255,0.1)",border:"1px solid rgba(212,175,55,0.4)",borderRadius:6,color:"#fff",padding:"4px 8px",fontSize:11,fontFamily:"inherit",outline:"none"}}/>
                        </div>
                      )}
                    </div>
                    <div style={{padding:"16px 18px 18px"}}>
                      <div style={{display:"flex",justifyContent:"space-between",alignItems:"flex-start",marginBottom:7}}>
                        <span style={{fontSize:10,padding:"2px 8px",borderRadius:20,background:col.bg,border:"1px solid "+col.b,color:col.t}}>{p.kashrut}</span>
                        <div style={{display:"flex",gap:4,flexWrap:"wrap",justifyContent:"flex-end"}}>
                          {p.tags.slice(0,1).map(t=><span key={t} style={{fontSize:10,padding:"2px 8px",borderRadius:20,background:"rgba(255,255,255,0.05)",color:"rgba(232,220,200,0.45)",border:"1px solid rgba(255,255,255,0.07)"}}>{t}</span>)}
                        </div>
                      </div>
                      <h3 style={{fontFamily:"'Playfair Display'",fontSize:18,color:"#fff",marginBottom:8,lineHeight:1.25}}>{p.nombre}</h3>
                      <p style={{fontSize:13,color:"rgba(232,220,200,0.52)",lineHeight:1.6,marginBottom:14,display:"-webkit-box",WebkitLineClamp:2,WebkitBoxOrient:"vertical",overflow:"hidden"}}>{p.descripcion}</p>
                      <div style={{display:"flex",alignItems:"center",justifyContent:"space-between"}}>
                        <span style={{fontSize:14,color:"rgba(232,220,200,0.45)"}}>from <strong style={{color:"#d4af37",fontSize:22}}>${minP}</strong></span>
                        <button onClick={e=>{e.stopPropagation();setProdModal(p);}} className="btn"
                          style={{background:"#d4af37",border:"none",borderRadius:8,padding:"8px 18px",color:"#080f0a",fontSize:13,fontWeight:700,cursor:"pointer",fontFamily:"inherit"}}>
                          Order
                        </button>
                      </div>
                    </div>
                  </div>
                );
              })}
            </div>
          </div>
        </section>

        {/* ── CONTACT ── */}
        <section ref={contactRef} style={{padding:"100px 5vw",background:"#080f0a"}}>
          <div style={{maxWidth:900,margin:"0 auto",display:"grid",gridTemplateColumns:"1fr 1fr",gap:60,alignItems:"center"}}>
            <div>
              <div style={{width:60,height:2,background:"#d4af37",marginBottom:24}}/>
              <h2 style={{fontFamily:"'Playfair Display'",fontSize:"clamp(26px,4vw,44px)",fontWeight:900,color:"#fff",marginBottom:32}}>
                {et("contactTitle","span",{})}
              </h2>
              <div style={{display:"flex",flexDirection:"column",gap:20}}>
                {[
                  {icon:"📱",label:"WhatsApp / Phone",tk:"contactPhone"},
                  {icon:"✉️",label:"Email",tk:"contactEmail"},
                  {icon:"🕐",label:"Hours",tk:"contactHours"},
                  {icon:"📍",label:"Service Area",tk:"contactArea"},
                ].map(({icon,label,tk})=>(
                  <div key={tk} style={{display:"flex",gap:16,alignItems:"flex-start"}}>
                    <span style={{fontSize:22,flexShrink:0}}>{icon}</span>
                    <div>
                      <div style={{fontSize:11,color:"rgba(212,175,55,0.55)",letterSpacing:2,textTransform:"uppercase",marginBottom:3}}>{label}</div>
                      <div style={{fontSize:15,color:"#e8dcc8"}}>{et(tk,"span",{})}</div>
                    </div>
                  </div>
                ))}
              </div>
            </div>
            <div style={{background:"#0a1a0d",borderRadius:20,padding:32,border:"1px solid rgba(212,175,55,0.12)"}}>
              <h3 style={{fontFamily:"'Playfair Display'",fontSize:22,color:"#d4af37",marginBottom:6}}>Ready to order?</h3>
              <p style={{fontSize:14,color:"rgba(232,220,200,0.55)",marginBottom:24,lineHeight:1.7}}>Browse our menu and send your order directly via WhatsApp. We'll confirm your order within a few hours.</p>
              <button onClick={()=>scrollTo(menuRef)} className="btn"
                style={{width:"100%",background:"#d4af37",border:"none",borderRadius:12,padding:"14px",color:"#080f0a",fontSize:17,fontWeight:700,cursor:"pointer",fontFamily:"inherit",marginBottom:12}}>
                Browse Menu
              </button>
              <a href={"https://wa.me/"+WA} target="_blank" rel="noreferrer"
                style={{display:"block",width:"100%",background:"rgba(37,211,102,0.12)",border:"1px solid rgba(37,211,102,0.4)",borderRadius:12,padding:"13px",color:"#25D366",fontSize:16,fontWeight:600,cursor:"pointer",fontFamily:"inherit",textAlign:"center",textDecoration:"none"}}>
                💬 Chat on WhatsApp
              </a>
            </div>
          </div>
        </section>

        {/* ── FOOTER ── */}
        <footer style={{padding:"40px 5vw",background:"#060d08",borderTop:"1px solid rgba(212,175,55,0.1)"}}>
          <div style={{maxWidth:1100,margin:"0 auto",display:"flex",justifyContent:"space-between",alignItems:"center",flexWrap:"wrap",gap:16}}>
            <div>
              <div style={{fontFamily:"'Playfair Display'",fontSize:22,fontWeight:900,color:"#fff",marginBottom:4}}>Rêver Pâtisserie</div>
              <div style={{fontSize:13,color:"rgba(232,220,200,0.4)"}}>
                {et("footerTagline","span",{})}
              </div>
            </div>
            <div style={{textAlign:"right"}}>
              <div style={{fontSize:11,color:"rgba(212,175,55,0.55)",letterSpacing:2,marginBottom:4}}>
                {et("footerKosher","span",{})}
              </div>
              <div style={{fontSize:12,color:"rgba(232,220,200,0.35)"}}>Miami · {new Date().getFullYear()} · All rights reserved</div>
            </div>
          </div>
        </footer>

        {/* Admin image panel */}
        {adminMode&&<AdminImgPanel/>}
        </>
      )}

      {prodModal&&<ProdModal p={prodModal} onClose={()=>setProdModal(null)}/>}

      {/* Floating cart button */}
      {section==="home"&&totalItems>0&&(
        <button onClick={()=>setSection("cart")} className="btn"
          style={{position:"fixed",bottom:28,right:28,background:"#d4af37",border:"none",borderRadius:50,padding:"14px 22px",color:"#080f0a",fontSize:15,fontWeight:700,cursor:"pointer",fontFamily:"inherit",boxShadow:"0 8px 32px rgba(212,175,55,0.4)",zIndex:150,display:"flex",alignItems:"center",gap:8}}>
          🛒 <span>{totalItems} item{totalItems!==1?"s":""}</span> <span style={{opacity:.7}}>·</span> <span>${totalCarrito.toFixed(2)}</span>
        </button>
      )}
    </div>
  );
}