/* ============================================================
   PUBLIC · carta para clientes
   ============================================================ */
const CARTA_THEME = {
  aromas:      { accent:'#955427', deep:'#74401C', tint:'rgba(149,84,39,.10)',  icon:'coffee'  },
  restaurante: { accent:'#B0512C', deep:'#8C3D1E', tint:'rgba(176,81,44,.10)',  icon:'utensils'},
  bar:         { accent:'#7A3243', deep:'#5F2433', tint:'rgba(122,50,67,.12)',  icon:'wine'    },
};
const themeFor = (id) => CARTA_THEME[id] || CARTA_THEME.restaurante;
const accentVars = (id) => { const t = themeFor(id); return { '--accent':t.accent, '--accent-deep':t.deep, '--accent-tint':t.tint }; };

function Seal({ brand, size }) {
  if (brand.logo) return <span className="seal" style={size?{width:size,height:size}:null}><img src={brand.logo} alt="logo" /></span>;
  return <span className="seal" style={size?{width:size,height:size,fontSize:size*0.5}:null}>GC</span>;
}

/* ---- product row ---- */
function ProductRow({ p }) {
  const { money } = useStore();
  if (p.active === false) return null;
  const hasVariants = p.variants && p.variants.length > 0;
  let priceNode = null;
  if (p.priceText) priceNode = <span className={'pprice' + (p.priceText.startsWith('+')?' mod':'')}>{p.priceText}</span>;
  else if (p.price != null) priceNode = <span className="pprice">{money(p.price)}</span>;
  return (
    <div className="prow">
      {p.photo && <img className="pthumb" src={p.photo} alt={p.name} />}
      <div className="pmain">
        <div className="pname-line">
          {p.featured && <span className="pstar"><Icon name="star" size={14} fill /></span>}
          <span className="pname">{p.name}</span>
          {!hasVariants && priceNode}
        </div>
        {p.desc && <div className="pdesc">{p.desc}</div>}
        {hasVariants && (
          <div className="pvariants">
            {p.variants.map((v, i) => (
              <span className="pvar" key={i}>{v.label} <b>{money(v.price)}</b></span>
            ))}
          </div>
        )}
      </div>
    </div>
  );
}

/* ---- carta view ---- */
function CartaView({ carta }) {
  const [query, setQuery] = useState('');
  const [activeCat, setActiveCat] = useState(carta.categories[0]?.id);
  const sectionRefs = useRef({});
  const theme = themeFor(carta.id);

  useEffect(() => { setActiveCat(carta.categories[0]?.id); setQuery(''); window.scrollTo({top:0}); }, [carta.id]);

  const q = query.trim().toLowerCase();
  const filtered = useMemo(() => {
    if (!q) return carta.categories;
    return carta.categories.map(cat => ({
      ...cat,
      subcats: cat.subcats.map(s => ({ ...s, products: s.products.filter(p =>
        p.active !== false && ((p.name||'').toLowerCase().includes(q) || (p.desc||'').toLowerCase().includes(q))) }))
        .filter(s => s.products.length)
    })).filter(cat => cat.subcats.length);
  }, [carta, q]);

  const scrollToCat = (catId) => {
    setActiveCat(catId);
    const el = sectionRefs.current[catId];
    if (el) { const top = el.getBoundingClientRect().top + window.scrollY - 78; window.scrollTo({ top, behavior:'smooth' }); }
  };

  useEffect(() => {
    if (q) return;
    const obs = new IntersectionObserver((entries) => {
      entries.forEach(e => { if (e.isIntersecting) setActiveCat(e.target.dataset.cat); });
    }, { rootMargin: '-78px 0px -70% 0px' });
    Object.values(sectionRefs.current).forEach(el => el && obs.observe(el));
    return () => obs.disconnect();
  }, [carta.id, q]);

  const countActive = (cat) => cat.subcats.reduce((n, s) => n + s.products.filter(p => p.active !== false).length, 0);

  return (
    <div className="carta-wrap" style={accentVars(carta.id)}>
      <aside className="cat-nav">
        <div className="cn-title">Categorías</div>
        {carta.categories.map(cat => (
          <button key={cat.id} className={'cat-link' + (activeCat===cat.id?' active':'')} onClick={() => scrollToCat(cat.id)}>
            <span style={{overflow:'hidden',textOverflow:'ellipsis',whiteSpace:'nowrap'}}>{cat.name}</span>
            <span className="cl-n">{countActive(cat)}</span>
          </button>
        ))}
      </aside>

      <main className="carta-main">
        <div className="carta-head">
          <span className="ch-kind"><Icon name={theme.icon} size={15} /> {carta.kind}</span>
          <h1>{carta.name}</h1>
        </div>

        <div className="searchbar">
          <Icon name="search" size={17} style={{color:'var(--ink-faint)'}} />
          <input value={query} onChange={e => setQuery(e.target.value)} placeholder={`Buscar en ${carta.name}…`} />
          {query && <button className="clr iconbtn" style={{width:24,height:24}} onClick={() => setQuery('')}><Icon name="x" size={15} /></button>}
        </div>

        <div className="mcat-bar">
          <div className="mcat-scroll">
            {carta.categories.map(cat => (
              <button key={cat.id} className={'chip' + (activeCat===cat.id?' active-chip':'')}
                onClick={() => scrollToCat(cat.id)}
                style={activeCat===cat.id?{background:'var(--accent)',color:'#fff',borderColor:'var(--accent)'}:null}>
                {cat.name}
              </button>
            ))}
          </div>
        </div>

        {filtered.length === 0 && <div className="empty">No encontramos resultados para “{query}”.</div>}

        {filtered.map(cat => (
          <section key={cat.id} className="cat-section" data-cat={cat.id}
            ref={el => sectionRefs.current[cat.id] = el}>
            <div className="cat-section-head">
              <h2>{cat.name}</h2>
              {cat.subtitle && <span className="csh-sub">{cat.subtitle}</span>}
            </div>
            {cat.subcats.map(sub => {
              const prods = sub.products.filter(p => p.active !== false);
              if (!prods.length) return null;
              return (
                <div className="subcat" key={sub.id}>
                  {sub.name && <h3 className="subcat-title">{sub.name}</h3>}
                  <div>{prods.map(p => <ProductRow key={p.id} p={p} />)}</div>
                </div>
              );
            })}
          </section>
        ))}
      </main>
    </div>
  );
}

/* ---- portada ---- */
function Portada({ brand, cartas, onOpen }) {
  return (
    <div className="portada">
      <div className="hero">
        <div className="kicker">Antofagasta · Chile</div>
        <h1>{brand.name}</h1>
        <p className="lede">{brand.tagline}. Tres cartas, una sola mesa: cocina peruana y criolla, cafetería de especialidad y barra de autor.</p>
        <div className="rule" />
      </div>

      <div className="carta-cards">
        {cartas.map(c => {
          const t = themeFor(c.id);
          let count = 0; c.categories.forEach(cat => cat.subcats.forEach(s => count += s.products.filter(p=>p.active!==false).length));
          return (
            <div key={c.id} className="carta-card" style={accentVars(c.id)} onClick={() => onOpen(c.id)}>
              <div className="cc-bg" />
              <div className="cc-ico"><Icon name={t.icon} size={26} /></div>
              <div className="cc-kind">{c.kind}</div>
              <h2>{c.name}</h2>
              <div className="cc-meta">{c.categories.length} categorías · {count} productos</div>
              <span className="cc-go">Ver carta <Icon name="arrowright" size={16} /></span>
            </div>
          );
        })}
      </div>

      <div className="portada-foot">
        <div className="foot-item"><div className="fi-ico"><Icon name="clock" size={18}/></div><div><div className="fi-l">Horario</div><div className="fi-v">08:00 – 23:00 hrs</div></div></div>
        <div className="foot-item"><div className="fi-ico"><Icon name="pin" size={18}/></div><div><div className="fi-l">Dirección</div><div className="fi-v">{brand.address}</div></div></div>
        <div className="foot-item"><div className="fi-ico"><Icon name="phone" size={18}/></div><div><div className="fi-l">Teléfono</div><div className="fi-v">{brand.phone}</div></div></div>
        <div className="foot-item"><div className="fi-ico"><Icon name="mail" size={18}/></div><div><div className="fi-l">Correo</div><div className="fi-v">{brand.email}</div></div></div>
      </div>
    </div>
  );
}

/* ---- info modal ---- */
function InfoModal({ brand, onClose, onReserve }) {
  const socials = [
    brand.instagram && { icon:'instagram', url:`https://instagram.com/${brand.instagram}` },
    brand.facebook && { icon:'facebook', url:`https://facebook.com/${brand.facebook}` },
    brand.whatsapp && { icon:'whatsapp', url:`https://wa.me/${brand.whatsapp.replace(/[^0-9]/g,'')}` },
  ].filter(Boolean);
  return (
    <Modal title="Información & contacto" onClose={onClose}
      footer={brand.reservationsOn && <button className="btn" onClick={onReserve}><Icon name="calendar" size={16}/> Reservar mesa</button>}>
      <div className="info-grid">
        <div className="info-line"><div className="il-ico"><Icon name="clock" size={18}/></div><div><div className="il-l">Horario</div><div className="il-v">{brand.hours}</div></div></div>
        <div className="info-line"><div className="il-ico"><Icon name="phone" size={18}/></div><div><div className="il-l">Teléfono</div><div className="il-v">{brand.phone}</div></div></div>
        <div className="info-line"><div className="il-ico"><Icon name="pin" size={18}/></div><div><div className="il-l">Dirección</div><div className="il-v">{brand.address}</div></div></div>
        <div className="info-line"><div className="il-ico"><Icon name="mail" size={18}/></div><div><div className="il-l">Correo</div><div className="il-v">{brand.email}</div></div></div>
      </div>
      {socials.length > 0 && <>
        <div className="il-l" style={{marginTop:18,marginBottom:8}}>Síguenos</div>
        <div className="socials">
          {socials.map((s,i) => <a key={i} className="soc-btn" href={s.url} target="_blank" rel="noreferrer"><Icon name={s.icon} size={20}/></a>)}
        </div>
      </>}
    </Modal>
  );
}

/* ---- reservation modal ---- */
function ReservaModal({ brand, cartas, onClose }) {
  const { addReservation, toast, sendMail } = useStore();
  const [f, setF] = useState({ nombre:'', telefono:'', email:'', fecha:'', personas:2, local: cartas[0]?.name || '', comentario:'' });
  const [done, setDone] = useState(false);
  const set = (k,v) => setF(s => ({...s, [k]:v}));
  const valid = f.nombre.trim() && f.telefono.trim() && f.fecha;
  const submit = async () => {
    addReservation(f);
    const fechaTxt = (f.fecha||'').replace('T',' ');
    // 1) correo al cliente: recibido, pendiente de aprobación
    if (f.email) sendMail({ to:f.email, subject:`Recibimos tu solicitud de reserva — ${brand.name}`,
      message:`Hola ${f.nombre},\n\nRecibimos tu solicitud de reserva. AÚN NO ESTÁ APROBADA: nuestro equipo la revisará y te enviaremos la confirmación.\n\n• Fecha y hora: ${fechaTxt}\n• Personas: ${f.personas}\n• Local: ${f.local}\n\nGracias por preferirnos.\n${brand.name}` });
    // 2) aviso al administrador
    if (brand.email) sendMail({ to:brand.email, subject:`Nueva reserva pendiente: ${f.nombre} (${f.personas}p)`,
      message:`Nueva solicitud de reserva (pendiente de aprobar en el panel):\n\n• Nombre: ${f.nombre}\n• Teléfono: ${f.telefono}\n• Email: ${f.email}\n• Fecha/hora: ${fechaTxt}\n• Personas: ${f.personas}\n• Local: ${f.local}\n• Comentario: ${f.comentario}\n\nApruébala o recházala en Panel → Reservas.` });
    // 3) alternativa por servidor (PHP), si está configurada
    const ep = brand.reservationEndpoint;
    if (ep) { try { await fetch(ep, { method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify(f) }); } catch(e){} }
    setDone(true);
  };
  const waLink = () => {
    const msg = `Hola ${brand.name}, quiero reservar:%0A• Nombre: ${f.nombre}%0A• Fecha/hora: ${f.fecha.replace('T',' ')}%0A• Personas: ${f.personas}%0A• Local: ${f.local}%0A• Tel: ${f.telefono}${f.comentario?('%0A• Nota: '+f.comentario):''}`;
    return `https://wa.me/${(brand.whatsapp||'').replace(/[^0-9]/g,'')}?text=${msg}`;
  };
  if (done) return (
    <Modal title="¡Reserva recibida!" onClose={onClose}
      footer={<>
        <button className="btn ghost" onClick={onClose}>Cerrar</button>
        {brand.whatsapp && <a className="btn" href={waLink()} target="_blank" rel="noreferrer"><Icon name="whatsapp" size={16}/> Confirmar por WhatsApp</a>}
      </>}>
      <div style={{textAlign:'center',padding:'10px 0'}}>
        <div style={{width:64,height:64,borderRadius:'50%',background:'var(--accent-tint)',color:'var(--accent-deep)',display:'grid',placeItems:'center',margin:'0 auto 16px'}}><Icon name="check" size={32}/></div>
        <p style={{color:'var(--ink-soft)',lineHeight:1.6,margin:0}}>Gracias, <b style={{color:'var(--ink)'}}>{f.nombre}</b>. Registramos tu solicitud para <b style={{color:'var(--ink)'}}>{f.personas} personas</b> en <b style={{color:'var(--ink)'}}>{f.local}</b>.<br/>{f.email ? 'Te enviamos un correo confirmando la recepción; ' : ''}aún está <b style={{color:'var(--ink)'}}>pendiente de aprobación</b> y te contactaremos para confirmarla.</p>
      </div>
    </Modal>
  );
  return (
    <Modal title="Reservar una mesa" onClose={onClose}
      footer={<>
        <button className="btn ghost" onClick={onClose}>Cancelar</button>
        <button className="btn" disabled={!valid} onClick={submit}><Icon name="calendar" size={16}/> Enviar solicitud</button>
      </>}>
      <div className="row">
        <Field label="Nombre"><input className="input" value={f.nombre} onChange={e=>set('nombre',e.target.value)} placeholder="Tu nombre" /></Field>
        <Field label="Teléfono"><input className="input" value={f.telefono} onChange={e=>set('telefono',e.target.value)} placeholder="+56 9 …" /></Field>
      </div>
      <Field label="Correo (opcional)"><input className="input" type="email" value={f.email} onChange={e=>set('email',e.target.value)} placeholder="tucorreo@mail.com" /></Field>
      <div className="row">
        <Field label="Fecha y hora"><input className="input" type="datetime-local" value={f.fecha} onChange={e=>set('fecha',e.target.value)} /></Field>
        <Field label="N° de personas"><input className="input" type="number" min="1" max="40" value={f.personas} onChange={e=>set('personas',e.target.value)} /></Field>
      </div>
      <Field label="Local">
        <select className="select" value={f.local} onChange={e=>set('local',e.target.value)}>
          {cartas.map(c => <option key={c.id} value={c.name}>{c.name} — {c.kind}</option>)}
        </select>
      </Field>
      <Field label="Comentarios / ocasión especial">
        <textarea className="textarea" value={f.comentario} onChange={e=>set('comentario',e.target.value)} placeholder="Cumpleaños, alergias, mesa en terraza…" />
      </Field>
    </Modal>
  );
}

/* ---- legal ---- */
function LegalModal({ docKey, brand, onClose }) {
  const year = new Date().getFullYear();
  const DOCS = {
    privacidad: {
      title: 'Política de Privacidad',
      body: [
        ['¿Qué datos recopilamos?', `Cuando solicitas una reserva a través de este sitio recopilamos únicamente los datos que tú nos entregas: nombre, teléfono, correo electrónico (opcional), fecha y hora deseada, número de personas, local y comentarios. No recopilamos datos de pago en este sitio.`],
        ['¿Para qué los usamos?', `Usamos tus datos exclusivamente para gestionar y confirmar tu reserva y para comunicarnos contigo respecto de ella. No vendemos ni cedemos tu información a terceros con fines comerciales.`],
        ['Conservación y seguridad', `Conservamos los datos de reservas solo el tiempo necesario para su gestión. Aplicamos medidas razonables para proteger la información.`],
        ['Tus derechos (Ley N° 19.628)', `Conforme a la Ley N° 19.628 sobre Protección de la Vida Privada, puedes solicitar acceder, rectificar, cancelar u oponerte al tratamiento de tus datos escribiendo a ${brand.email}.`],
        ['Contacto', `Para cualquier consulta sobre privacidad: ${brand.email} · ${brand.phone} · ${brand.address}.`],
      ],
    },
    terminos: {
      title: 'Términos y Condiciones',
      body: [
        ['Aceptación', `Al utilizar este sitio web declaras conocer y aceptar estos Términos y Condiciones. Si no estás de acuerdo, te pedimos no utilizar el sitio.`],
        ['Carta y precios', `La carta, descripciones y precios publicados son referenciales y pueden modificarse sin previo aviso. Ante cualquier diferencia, prevalecen los precios vigentes en el local.`],
        ['Reservas', `Las solicitudes de reserva enviadas por este sitio NO constituyen una reserva confirmada. Cada solicitud queda sujeta a revisión y aprobación por parte de ${brand.name}, que confirmará o rechazará la disponibilidad por los medios de contacto entregados.`],
        ['Uso del sitio', `No está permitido usar el sitio con fines ilícitos ni intentar dañar su funcionamiento o seguridad.`],
        ['Propiedad intelectual', `Todo el contenido del sitio está protegido. Ver "Protección Ley 17.336".`],
        ['Legislación aplicable', `Estos términos se rigen por las leyes de la República de Chile.`],
      ],
    },
    ley17336: {
      title: 'Protección · Ley N° 17.336',
      body: [
        ['Propiedad intelectual', `Todos los contenidos de este sitio —incluidos textos, nombres de productos, recetas, fotografías, logotipos, marca, diseño gráfico y código fuente— son de propiedad de ${brand.name} o se utilizan con autorización, y se encuentran protegidos por la Ley N° 17.336 sobre Propiedad Intelectual de la República de Chile y demás normativa aplicable.`],
        ['Usos no autorizados', `Queda prohibida la reproducción, copia, distribución, comunicación pública, transformación o cualquier otra forma de explotación, total o parcial, de estos contenidos sin autorización previa, expresa y por escrito de ${brand.name}.`],
        ['Infracciones', `El uso no autorizado podrá ser perseguido conforme a las acciones civiles y penales que franquea la Ley N° 17.336 y la legislación vigente.`],
        ['Aviso de derechos', `© ${year} ${brand.name}. Todos los derechos reservados.`],
      ],
    },
  };
  const doc = DOCS[docKey] || DOCS.privacidad;
  return (
    <Modal wide title={doc.title} onClose={onClose} footer={<button className="btn" onClick={onClose}>Entendido</button>}>
      {doc.body.map(([h, p], i) => (
        <div key={i} style={{ marginBottom: 16 }}>
          <h4 style={{ fontFamily:'var(--font-display)', fontWeight:400, fontSize:17, margin:'0 0 4px' }}>{h}</h4>
          <p style={{ margin:0, color:'var(--ink-soft)', fontSize:14, lineHeight:1.65, textWrap:'pretty' }}>{p}</p>
        </div>
      ))}
    </Modal>
  );
}

Object.assign(window, { CARTA_THEME, themeFor, accentVars, Seal, ProductRow, CartaView, Portada, InfoModal, ReservaModal, LegalModal });