// screens.jsx — all app screens (display-only catalog)

const fav = ['con-leche-360', 'latte-choco', 'mila-carne', 'alfajor-rosa', 'cafe-tonic', 'servicio-mate'].map(id => productById(id)).filter(Boolean);

// ── Quick-access tile ──────────────────────────────
function QuickTile({ icon, label, sub, onClick }) {
  return (
    <button onClick={onClick} className="card lift quick-tile">
      <span className="quick-ico"><Icon name={icon} size={22} sw={1.9} /></span>
      <span style={{ display: 'block' }}>
        <span style={{ display: 'block', fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 14.5, color: 'var(--c-ink)', lineHeight: 1.2 }}>{label}</span>
        <span style={{ display: 'block', fontSize: 11.5, color: 'var(--c-ink-soft)', marginTop: 3, lineHeight: 1.3 }}>{sub}</span>
      </span>
    </button>
  );
}

// ── HOME ────────────────────────────────────────────
function HomeScreen() {
  const { t, lang } = useLang();
  const { go } = useNav();
  return (
    <div className="az-screen az-enter" style={{ paddingTop: 14 }}>
      <OpenStrip />
      {/* hero with layered Andes */}
      <div className="hero">
        <div style={{ position: 'absolute', inset: 0, zIndex: 0, backgroundImage: 'url(assets/img/local/laguna.jpg?v=1)', backgroundSize: 'cover', backgroundPosition: 'center 40%' }} />
        <div style={{ position: 'absolute', inset: 0, zIndex: 1, background: 'linear-gradient(180deg, rgba(15,35,45,.30) 0%, rgba(16,42,36,.55) 45%, rgba(16,42,36,.88) 100%)' }} />
        <div style={{ position: 'relative', zIndex: 2 }}>
          <img src="assets/img/local/logo.png?v=1" alt="Cafetería La Z" width="82" height="82"
            style={{ display: 'block', marginBottom: 14, borderRadius: '50%', background: '#FBF6EC', boxShadow: '0 8px 22px -8px rgba(0,0,0,.55)' }} />
          <div className="hero-kicker"><Icon name="bus" size={14} sw={1.9} />{lang === 'en' ? 'Esquel bus terminal' : 'Terminal de Esquel'}</div>
          <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 28, lineHeight: 1.06, letterSpacing: '-.015em', whiteSpace: 'pre-line', color: '#fff', marginTop: 8 }}>{t.tagline}</div>
          <p style={{ margin: '11px 0 17px', fontSize: 13.5, lineHeight: 1.5, color: 'rgba(255,255,255,.88)', maxWidth: 290 }}>{t.heroSub}</p>
          <div style={{ display: 'flex', gap: 9 }}>
            <button className="btn btn-primary" onClick={() => go('menu')}><Icon name="coffee" size={18} sw={1.9} />{t.seeMenu}</button>
            <button className="btn btn-glass" onClick={() => go('combos')}>{t.combosCta}</button>
          </div>
        </div>
      </div>

      {/* quick access */}
      <div style={{ marginTop: 22 }}>
        <div className="h-eyebrow" style={{ marginBottom: 11 }}>{t.quick}</div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 11 }}>
          <QuickTile icon="coffee" label={t.menu} sub={lang === 'en' ? 'Coffee, mate & food' : 'Café, mate y comida'} onClick={() => go('menu')} />
          <QuickTile icon="bag" label={lang === 'en' ? 'Your order' : 'Tu pedido'} sub={lang === 'en' ? 'Go to the counter' : 'Acercate al mostrador'} onClick={() => go('order')} />
          <QuickTile icon="mountain" label="Esquel" sub={lang === 'en' ? 'What to do' : 'Qué hacer'} onClick={() => go('esquel')} />
          <QuickTile icon="pin" label={t.where} sub={lang === 'en' ? 'Hours & map' : 'Horarios y mapa'} onClick={() => go('place')} />
        </div>
      </div>

      {/* featured rail */}
      <div style={{ marginTop: 24 }}>
        <SectionHead title={t.featured} sub={lang === 'en' ? 'What everyone grabs.' : 'Lo que todos se llevan.'} />
        <div className="rail">
          {fav.map(p => <ProductMini key={p.id} p={p} />)}
        </div>
      </div>

      {/* tourism teaser */}
      <button onClick={() => go('esquel')} className="card lift" style={{ width: '100%', marginTop: 22, padding: 0, overflow: 'hidden', cursor: 'pointer', textAlign: 'left', display: 'block', position: 'relative' }}>
        <div style={{ position: 'relative', height: 138 }}>
          <Photo src={TEASER_PHOTO} icon="leaf" tone="forest" height="100%" />
          <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(0deg, rgba(20,40,30,.82), rgba(20,40,30,.05))', display: 'flex', flexDirection: 'column', justifyContent: 'flex-end', padding: 16, pointerEvents: 'none' }}>
            <div className="h-eyebrow" style={{ color: 'var(--c-gold)' }}>{lang === 'en' ? 'Before you travel' : 'Antes de viajar'}</div>
            <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 19, color: '#fff', marginTop: 3 }}>{t.whatToDo}</div>
          </div>
          <span style={{ position: 'absolute', right: 14, bottom: 14, width: 36, height: 36, borderRadius: 999, background: 'rgba(255,255,255,.94)', color: 'var(--c-brand)', display: 'flex', alignItems: 'center', justifyContent: 'center', pointerEvents: 'none' }}><Icon name="arrowR" size={18} sw={2.2} /></span>
        </div>
      </button>

      <PickupNote />
      <InstagramStrip />
    </div>
  );
}

// Instagram follow strip (reused on Home and Nosotros)
function InstagramStrip() {
  const { lang } = useLang();
  if (!PLACE.instagram) return null;
  return (
    <a href={PLACE.instagram} target="_blank" rel="noopener"
      className="card lift"
      style={{ display: 'flex', alignItems: 'center', gap: 12, marginTop: 12, padding: 14, textDecoration: 'none',
        background: 'linear-gradient(120deg, color-mix(in srgb, var(--c-accent) 14%, var(--c-surface)), var(--c-surface))' }}>
      <span style={{ width: 42, height: 42, borderRadius: 12, background: 'var(--c-accent)', color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
        <Icon name="instagram" size={22} sw={1.9} />
      </span>
      <span style={{ flex: 1, minWidth: 0 }}>
        <span style={{ display: 'block', fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 15, color: 'var(--c-ink)' }}>
          {lang === 'en' ? 'Follow us on Instagram' : 'Seguinos en Instagram'}
        </span>
        <span style={{ display: 'block', fontSize: 12.5, color: 'var(--c-accent-ink)', fontWeight: 600 }}>{PLACE.igHandle || 'Instagram'}</span>
      </span>
      <Icon name="arrowR" size={18} sw={2.1} style={{ color: 'var(--c-ink-soft)', flexShrink: 0 }} />
    </a>
  );
}

function PickupNote() {
  const { t } = useLang();
  return (
    <div className="card" style={{ marginTop: 18, padding: 13, display: 'flex', gap: 10, alignItems: 'flex-start', background: 'color-mix(in srgb, var(--c-brand) 7%, var(--c-surface))' }}>
      <span style={{ color: 'var(--c-brand)', flexShrink: 0 }}><Icon name="info" size={19} sw={1.9} /></span>
      <p style={{ margin: 0, fontSize: 12.5, color: 'var(--c-ink-soft)', lineHeight: 1.5 }}>{t.pickupNote}</p>
    </div>
  );
}

// ── MENU ────────────────────────────────────────────
function MenuScreen() {
  const { t, lang } = useLang();
  const { go } = useNav();
  const [active, setActive] = React.useState('cafe');
  const [q, setQ] = React.useState('');
  const refs = React.useRef({});
  const onChip = (id) => { setActive(id); const el = refs.current[id]; if (el) { const top = el.offsetTop - 70; el.closest('.az-scroll')?.scrollTo({ top, behavior: 'smooth' }); } };
  const query = q.trim().toLowerCase();
  const matches = query
    ? PRODUCTS.filter(p => (`${p.name} ${p.en || ''}`).toLowerCase().includes(query))
    : null;
  return (
    <div className="az-enter">
      <div className="chip-bar">
        <div className="rail" style={{ padding: '0 18px' }}>
          {CATEGORIES.map(c => (
            <button key={c.id} className={'chip' + (active === c.id ? ' is-on' : '')} onClick={() => onChip(c.id)}>
              <Icon name={c.icon} size={16} sw={1.9} />{lang === 'en' ? c.en : c.label}
            </button>
          ))}
        </div>
      </div>
      <div className="az-screen" style={{ paddingTop: 6 }}>
        <div style={{ position: 'relative', marginBottom: 16 }}>
          <span style={{ position: 'absolute', left: 12, top: '50%', transform: 'translateY(-50%)', color: 'var(--c-ink-soft)', display: 'flex', pointerEvents: 'none' }}><Icon name="search" size={16} sw={1.8} /></span>
          <input value={q} onChange={e => setQ(e.target.value)} type="text"
            placeholder={lang === 'en' ? 'Search the menu…' : 'Buscar en la carta…'}
            style={{ width: '100%', boxSizing: 'border-box', padding: '11px 38px 11px 36px', borderRadius: 'var(--r)', border: '1.5px solid var(--c-line)', background: 'var(--c-surface)', color: 'var(--c-ink)', fontSize: 14, fontFamily: 'inherit', outline: 'none' }} />
          {q && (
            <button onClick={() => setQ('')} aria-label={lang === 'en' ? 'Clear' : 'Borrar'}
              style={{ position: 'absolute', right: 8, top: '50%', transform: 'translateY(-50%)', width: 26, height: 26, borderRadius: 999, border: 'none', background: 'var(--c-line)', color: 'var(--c-ink)', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 15, lineHeight: 1 }}>×</button>
          )}
        </div>

        {matches ? (
          matches.length === 0 ? (
            <p style={{ textAlign: 'center', color: 'var(--c-ink-soft)', fontSize: 14, padding: '24px 0' }}>
              {lang === 'en' ? `No results for “${q}”.` : `Sin resultados para “${q}”.`}
            </p>
          ) : (
            <div style={{ display: 'flex', flexDirection: 'column', gap: 9 }}>
              {matches.map(p => <ProductCard key={p.id} p={p} />)}
            </div>
          )
        ) : (
        <>
        <button onClick={() => go('combos')} className="card lift" style={{ width: '100%', cursor: 'pointer', textAlign: 'left', display: 'flex', alignItems: 'center', gap: 12, padding: 12, marginBottom: 18, background: 'color-mix(in srgb, var(--c-gold) 16%, var(--c-surface))' }}>
          <span style={{ width: 42, height: 42, borderRadius: 12, background: 'var(--c-accent)', color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}><Icon name="bag" size={22} sw={1.9} /></span>
          <span style={{ flex: 1 }}>
            <span style={{ display: 'block', fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 15 }}>{t.combosTitle}</span>
            <span style={{ display: 'block', fontSize: 12, color: 'var(--c-ink-soft)' }}>{t.combosSub}</span>
          </span>
          <Icon name="chevR" size={20} sw={2} style={{ color: 'var(--c-ink-soft)' }} />
        </button>

        {CATEGORIES.map(c => (
          <div key={c.id} ref={el => refs.current[c.id] = el} style={{ scrollMarginTop: 70, marginBottom: 24 }}>
            <div className="cat-head">
              <span style={{ color: 'var(--c-brand)', display: 'flex' }}><Icon name={c.icon} size={19} sw={1.9} /></span>
              <h3 style={{ fontWeight: 700, fontSize: 18 }}>{lang === 'en' ? c.en : c.label}</h3>
              <span className="cat-rule" />
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 9 }}>
              {PRODUCTS.filter(p => p.cat === c.id).map(p => <ProductCard key={p.id} p={p} />)}
            </div>
          </div>
        ))}
        <p style={{ fontSize: 11.5, color: 'var(--c-ink-soft)', textAlign: 'center', marginTop: 4, lineHeight: 1.5 }}>
          {lang === 'en' ? 'Prices may change. Ask at the counter.' : 'Los precios pueden variar. Consultá en el mostrador.'}
        </p>
        </>
        )}
      </div>
    </div>
  );
}

// ── COMBOS ──────────────────────────────────────────
function CombosScreen() {
  const { t, lang } = useLang();
  return (
    <div className="az-screen az-enter" style={{ paddingTop: 18 }}>
      <SectionHead eyebrow={lang === 'en' ? 'To go' : 'Para llevar'} title={t.combosTitle} sub={t.combosSub} />
      <div style={{ display: 'flex', flexDirection: 'column', gap: 13 }}>
        {COMBOS.map(c => <ComboCard key={c.id} c={c} />)}
      </div>
      <p style={{ fontSize: 12, color: 'var(--c-ink-soft)', textAlign: 'center', marginTop: 18, lineHeight: 1.5 }}>
        {lang === 'en' ? 'Suggestions — mix and match at the counter.' : 'Son sugerencias — armalo a tu gusto en el mostrador.'}
      </p>
    </div>
  );
}

// ── ESQUEL (tourism → products) ─────────────────────
function EsquelScreen() {
  const { t, lang } = useLang();
  const { cart, addToCart, removeFromCart } = useCart();
  return (
    <div className="az-screen az-enter" style={{ paddingTop: 18 }}>
      <SectionHead eyebrow="Patagonia" title={t.esquelTitle} sub={t.esquelSub} />
      <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
        {ACTIVITIES.map(a => {
        const actId = 'act-' + a.id;
        const inCart = (cart[actId]?.qty || 0) > 0;
        return (
          <div key={a.id} className="card" style={{ overflow: 'hidden' }}>
            <div style={{ position: 'relative', height: 132 }}>
              {!a.photo && a.embed
                ? <iframe title={a.name} src={a.embed} loading="lazy" referrerPolicy="no-referrer-when-downgrade"
                    style={{ border: 0, width: '100%', height: '100%', display: 'block' }}></iframe>
                : <Photo src={a.photo} icon={a.icon} tone={a.tone} height="100%" />}
              <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(0deg, rgba(20,30,25,.82), rgba(20,30,25,0) 55%)', display: 'flex', flexDirection: 'column', justifyContent: 'flex-end', padding: 14, pointerEvents: 'none' }}>
                <span style={{ alignSelf: 'flex-start', fontSize: 10.5, fontWeight: 700, letterSpacing: '.04em', textTransform: 'uppercase', color: '#fff', background: 'rgba(0,0,0,.34)', padding: '4px 9px', borderRadius: 999, marginBottom: 6 }}>{a.meta}</span>
                <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 18, color: '#fff', lineHeight: 1.1 }}>{lang === 'en' ? a.en : a.name}</div>
              </div>
            </div>
            <div style={{ padding: '13px 14px 14px' }}>
              <p style={{ margin: '0 0 13px', fontSize: 13, color: 'var(--c-ink-soft)', lineHeight: 1.5 }}>{a.blurb}</p>
              <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 9 }}>
                <Icon name="bag" size={15} sw={1.9} style={{ color: 'var(--c-accent)' }} />
                <span className="h-eyebrow">{t.forTheRoad}</span>
              </div>
              <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
                {a.recs.map(id => <RecItem key={id} id={id} />)}
              </div>
              {a.comboId && (() => { const c = COMBOS.find(x => x.id === a.comboId); if (!c) return null; return (
                <div className="combo-link">
                  <span style={{ display: 'flex', alignItems: 'center', gap: 8 }}><Icon name="bag" size={16} sw={1.9} style={{ color: 'var(--c-brand)' }} /><span style={{ fontWeight: 700, fontSize: 13 }}>{c.name}</span></span>
                  <span style={{ fontWeight: 700, fontSize: 13, color: 'var(--c-accent-ink)' }}>{t.approx} {fmt(comboTotal(c))}</span>
                </div>
              ); })()}
              <div style={{ display: 'flex', gap: 8, marginTop: 13 }}>
                {a.maps && (
                  <a className="btn btn-dark" style={{ flex: 1, textDecoration: 'none' }} href={a.maps} target="_blank" rel="noopener">
                    <Icon name="route" size={17} sw={1.9} />{t.howTitle}
                  </a>
                )}
                <button className={inCart ? 'btn btn-primary' : 'btn btn-ghost'} style={{ flex: 1 }}
                  onClick={() => inCart ? removeFromCart(actId) : addToCart(actId, { name: lang === 'en' ? a.en : a.name, price: null, icon: a.icon, tone: a.tone, photo: a.photo || null, kind: 'activity' })}>
                  <Icon name={inCart ? 'check' : 'plus'} size={17} sw={1.9} />
                  {inCart ? (lang === 'en' ? 'Added' : 'Agregada') : (lang === 'en' ? 'Add' : 'Agregar')}
                </button>
              </div>
            </div>
          </div>
        ); })}
      </div>
    </div>
  );
}

// ── PLACE (location & hours) ────────────────────────
function PlaceScreen() {
  const { t, lang } = useLang();
  const { go } = useNav();
  return (
    <div className="az-screen az-enter" style={{ paddingTop: 18 }}>
      <SectionHead eyebrow={lang === 'en' ? 'Bus terminal' : 'Terminal de ómnibus'} title={t.placeTitle} />
      {/* real Google Maps embed */}
      <div className="map-wrap">
        <iframe title="Mapa" src={PLACE.embed} loading="lazy" referrerPolicy="no-referrer-when-downgrade"
          style={{ border: 0, width: '100%', height: '100%', display: 'block' }}></iframe>
      </div>
      <div className="card" style={{ padding: 14, marginTop: 13, display: 'flex', gap: 11, alignItems: 'flex-start' }}>
        <span style={{ color: 'var(--c-accent)', marginTop: 1, flexShrink: 0 }}><Icon name="pin" size={22} sw={1.9} /></span>
        <div>
          <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 15 }}>{PLACE.name}</div>
          <div style={{ fontSize: 13, color: 'var(--c-ink)', marginTop: 2, fontWeight: 600 }}>{PLACE.addr}</div>
          <div style={{ fontSize: 12.5, color: 'var(--c-ink-soft)', marginTop: 2, lineHeight: 1.5 }}>
            {lang === 'en' ? 'Inside the Esquel bus terminal.' : PLACE.inside + '.'}<br />{PLACE.city}
          </div>
        </div>
      </div>

      {/* directions + menu */}
      <div style={{ display: 'flex', gap: 10, marginTop: 14 }}>
        <a className="btn btn-dark" style={{ flex: 1, textDecoration: 'none' }} href={PLACE.dir} target="_blank" rel="noopener"><Icon name="route" size={18} sw={1.9} />{t.directions}</a>
        <button className="btn btn-ghost" style={{ flex: 1 }} onClick={() => go('menu')}><Icon name="coffee" size={17} sw={1.9} />{t.seeMenu}</button>
      </div>

      {/* Instagram */}
      {PLACE.instagram && (
        <a className="btn btn-ghost" style={{ width: '100%', marginTop: 10, textDecoration: 'none' }} href={PLACE.instagram} target="_blank" rel="noopener">
          <Icon name="instagram" size={17} sw={1.9} />{PLACE.igHandle || 'Instagram'}
        </a>
      )}

      {/* hours */}
      <div style={{ marginTop: 22 }}>
        <div className="cat-head" style={{ marginBottom: 11 }}>
          <Icon name="clock" size={18} sw={1.9} style={{ color: 'var(--c-brand)' }} />
          <h3 style={{ fontWeight: 700, fontSize: 17 }}>{t.hoursTitle}</h3>
          <span className="cat-rule" />
        </div>
        <div style={{ marginBottom: 10 }}><OpenStrip /></div>
        <div className="card" style={{ overflow: 'hidden' }}>
          {HOURS.map((r, i) => (
            <div key={i} style={{ display: 'flex', justifyContent: 'space-between', padding: '13px 15px', fontSize: 13.5, borderTop: i ? '1px solid var(--c-line)' : 'none' }}>
              <span style={{ color: 'var(--c-ink)' }}>{r.d}</span>
              <span style={{ fontWeight: 700, color: 'var(--c-ink)' }}>{r.h}</span>
            </div>
          ))}
        </div>
        <p style={{ fontSize: 11.5, color: 'var(--c-ink-soft)', textAlign: 'center', marginTop: 9 }}>
          {lang === 'en' ? 'Hours to confirm.' : 'Horarios a confirmar.'}
        </p>
      </div>

      <PickupNote />
    </div>
  );
}

// ── CART SCREEN ─────────────────────────────────────
function OrderNoteScreen() {
  const { lang } = useLang();
  const { cart, addToCart, removeFromCart, clearCart } = useCart();
  const { go } = useNav();
  const items = Object.entries(cart).filter(([_, v]) => v.qty > 0);
  const total = items.reduce((s, [_, v]) => s + (v.price > 0 ? v.price * v.qty : 0), 0);

  if (items.length === 0) return (
    <div className="az-screen az-enter" style={{ paddingTop: 48, display: 'flex', flexDirection: 'column', alignItems: 'center', textAlign: 'center', gap: 18 }}>
      <div style={{ width: 72, height: 72, borderRadius: 999, background: 'color-mix(in srgb, var(--c-brand) 14%, var(--c-surface))', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--c-brand)' }}>
        <Icon name="bag" size={34} sw={1.7} />
      </div>
      <div>
        <div style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 22, color: 'var(--c-ink)', lineHeight: 1.1 }}>{lang === 'en' ? 'Your order is empty' : 'Tu pedido está vacío'}</div>
        <p style={{ margin: '10px auto 0', fontSize: 14, color: 'var(--c-ink-soft)', lineHeight: 1.6, maxWidth: 270 }}>{lang === 'en' ? 'Add items from the menu using the + buttons.' : 'Agregá productos desde la carta con los botones +.'}</p>
      </div>
      <button className="btn btn-primary" onClick={() => go('menu')}><Icon name="coffee" size={17} sw={1.9} />{lang === 'en' ? 'See menu' : 'Ver carta'}</button>
    </div>
  );

  return (
    <div className="az-screen az-enter" style={{ paddingTop: 14 }}>
      <SectionHead
        title={lang === 'en' ? 'Your order' : 'Tu pedido'}
        sub={lang === 'en' ? 'Show this screen at the counter' : 'Mostrá esta pantalla en el mostrador'}
      />

      <div style={{ display: 'flex', flexDirection: 'column', gap: 9 }}>
        {items.map(([id, v]) => (
          <div key={id} className="card prod-row" style={{ alignItems: 'center' }}>
            <Placeholder icon={v.icon} tone={v.tone} src={v.photo} style={{ width: 52, height: 52, flexShrink: 0, borderRadius: 'var(--r-sm)' }} />
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 14.5, color: 'var(--c-ink)', lineHeight: 1.2 }}>{v.name}</div>
              {v.price > 0 && <div style={{ fontSize: 12, color: 'var(--c-ink-soft)', marginTop: 2 }}>{fmt(v.price)} c/u</div>}
              {v.kind === 'activity' && <div style={{ fontSize: 11.5, color: 'var(--c-accent-ink)', marginTop: 3, fontWeight: 600 }}>{lang === 'en' ? 'Activity · ask us' : 'Actividad · consultanos'}</div>}
            </div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, flexShrink: 0 }}>
              <button style={STEP_BTN} onClick={() => removeFromCart(id)}>−</button>
              <span style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 16, minWidth: 20, textAlign: 'center', color: 'var(--c-brand)' }}>{v.qty}</span>
              <button style={{ ...STEP_BTN, background: 'var(--c-brand)', color: '#fff', border: 'none' }} onClick={() => addToCart(id, v)}>+</button>
            </div>
            {v.price > 0 && (
              <div style={{ flexShrink: 0, minWidth: 56, textAlign: 'right' }}>
                <Price value={v.price * v.qty} />
              </div>
            )}
          </div>
        ))}
      </div>

      {total > 0 && (
        <div className="card" style={{ marginTop: 14, padding: '14px 18px', display: 'flex', justifyContent: 'space-between', alignItems: 'center', background: 'color-mix(in srgb, var(--c-brand) 8%, var(--c-surface))' }}>
          <span style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 15, color: 'var(--c-ink)' }}>{lang === 'en' ? 'Approx. total' : 'Total aprox.'}</span>
          <Price value={total} size={20} />
        </div>
      )}

      <div className="card" style={{ marginTop: 12, padding: '18px 18px 20px', textAlign: 'center', background: 'color-mix(in srgb, var(--c-brand) 6%, var(--c-surface))' }}>
        <div style={{ color: 'var(--c-brand)', marginBottom: 8, display: 'flex', justifyContent: 'center' }}><Icon name="bag" size={28} sw={1.7} /></div>
        <div style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 18, color: 'var(--c-ink)', lineHeight: 1.1, marginBottom: 6 }}>
          {lang === 'en' ? 'Come to the counter!' : '¡Acercate al mostrador!'}
        </div>
        <p style={{ margin: 0, fontSize: 13, color: 'var(--c-ink-soft)', lineHeight: 1.5 }}>
          {lang === 'en' ? 'Show this screen and we\'ll prepare everything right away.' : 'Mostrá esta pantalla y te lo preparamos al momento.'}
        </p>
      </div>

      <button className="btn btn-ghost" style={{ width: '100%', marginTop: 14 }} onClick={clearCart}>
        <Icon name="trash" size={15} sw={1.9} />{lang === 'en' ? 'Clear order' : 'Limpiar pedido'}
      </button>
    </div>
  );
}

// ── NOSOTROS ─────────────────────────────────────────
function StarRating({ stars }) {
  return (
    <span style={{ display: 'inline-flex', gap: 2 }}>
      {[1,2,3,4,5].map(i => (
        <svg key={i} width="14" height="14" viewBox="0 0 24 24" fill={i <= stars ? 'var(--c-accent)' : 'none'}
          stroke={i <= stars ? 'var(--c-accent)' : 'var(--c-line)'} strokeWidth="1.8" strokeLinejoin="round">
          <path d="M12 3.5l2.5 5.3 5.5.7-4 3.9 1 5.6L12 16.4 7.5 19l1-5.6-4-3.9 5.5-.7L12 3.5Z"/>
        </svg>
      ))}
    </span>
  );
}

// helper: pick the right language string from a {es, en} object or plain string
function txt(field, lang) {
  if (!field) return '';
  if (typeof field === 'string') return field;
  return field[lang] || field.es || '';
}

// ── Photo gallery ───────────────────────────────────
function PhotoThumb({ ph, lang, onClick }) {
  return (
    <button onClick={onClick}
      style={{ padding: 0, border: 'none', borderRadius: 'var(--r-sm)', overflow: 'hidden', cursor: 'pointer', background: 'var(--c-surface)', aspectRatio: '4/3', position: 'relative', display: 'block', width: '100%' }}>
      <img src={ph.url} alt={txt(ph.caption, lang) || ''}
        style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
      {ph.caption && txt(ph.caption, lang) && (
        <div style={{ position: 'absolute', bottom: 0, left: 0, right: 0, background: 'linear-gradient(0deg,rgba(0,0,0,.62),transparent)', padding: '18px 8px 7px', fontSize: 11.5, color: '#fff', fontWeight: 600, lineHeight: 1.3 }}>
          {txt(ph.caption, lang)}
        </div>
      )}
    </button>
  );
}

function PhotoLightbox({ photo, lang, onClose }) {
  if (!photo) return null;
  return (
    <div onClick={onClose}
      style={{ position: 'fixed', inset: 0, zIndex: 9999, background: 'rgba(0,0,0,.92)', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', padding: 20 }}>
      <img src={photo.url} alt={txt(photo.caption, lang) || ''}
        style={{ maxWidth: '100%', maxHeight: '78vh', objectFit: 'contain', borderRadius: 10 }} />
      {photo.caption && txt(photo.caption, lang) && (
        <p style={{ color: '#fff', marginTop: 12, fontSize: 14, textAlign: 'center', lineHeight: 1.4 }}>{txt(photo.caption, lang)}</p>
      )}
      <button onClick={onClose} style={{ marginTop: 18, padding: '8px 22px', borderRadius: 999, background: 'rgba(255,255,255,.18)', color: '#fff', border: 'none', fontSize: 13, fontWeight: 600, cursor: 'pointer' }}>Cerrar ✕</button>
    </div>
  );
}

// Full gallery modal — all photos in scrollable grid
function GalleryModal({ photos, lang, onClose }) {
  const [lightbox, setLightbox] = React.useState(null);
  return (
    <div style={{ position: 'fixed', inset: 0, zIndex: 9000, background: 'var(--c-bg)', display: 'flex', flexDirection: 'column' }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '14px 18px', background: 'var(--c-brand)', color: '#FBF6EC', flexShrink: 0 }}>
        <button onClick={onClose} style={{ background: 'none', border: 'none', color: '#FBF6EC', cursor: 'pointer', display: 'flex', alignItems: 'center', padding: 4 }}>
          <Icon name="chevL" size={22} sw={2.2} />
        </button>
        <span style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 17 }}>
          {lang === 'en' ? 'Photo gallery' : 'Galería de fotos'}
        </span>
        <span style={{ fontSize: 12, opacity: .75, marginLeft: 'auto' }}>{photos.length} {lang === 'en' ? 'photos' : 'fotos'}</span>
      </div>
      <div style={{ overflowY: 'auto', flex: 1, padding: 12 }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}>
          {photos.map((ph, i) => <PhotoThumb key={ph.id || i} ph={ph} lang={lang} onClick={() => setLightbox(ph)} />)}
        </div>
        <div style={{ height: 20 }} />
      </div>
      <PhotoLightbox photo={lightbox} lang={lang} onClose={() => setLightbox(null)} />
    </div>
  );
}

// Preview: shows 4 photos + "Ver galería completa" button
function PhotoGallery({ photos, lang }) {
  const [showAll, setShowAll] = React.useState(false);
  const [lightbox, setLightbox] = React.useState(null);
  if (!photos || photos.length === 0) return null;
  const preview = photos.slice(0, 4);
  return (
    <>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8, marginBottom: photos.length > 4 ? 10 : 22 }}>
        {preview.map((ph, i) => <PhotoThumb key={ph.id || i} ph={ph} lang={lang} onClick={() => setLightbox(ph)} />)}
      </div>
      {photos.length > 4 && (
        <button className="btn btn-ghost" style={{ width: '100%', marginBottom: 22 }} onClick={() => setShowAll(true)}>
          <Icon name="image" size={16} sw={1.9} />
          {lang === 'en' ? `See all ${photos.length} photos` : `Ver las ${photos.length} fotos`}
        </button>
      )}
      <PhotoLightbox photo={lightbox} lang={lang} onClose={() => setLightbox(null)} />
      {showAll && <GalleryModal photos={photos} lang={lang} onClose={() => setShowAll(false)} />}
    </>
  );
}

function NosotrosScreen() {
  const { t, lang } = useLang();
  const { intro, stories, photos } = NOSOTROS;

  return (
    <div className="az-screen az-enter" style={{ paddingTop: 18 }}>
      {/* Intro */}
      <div className="card" style={{ overflow: 'hidden', marginBottom: 18 }}>
        <div style={{ height: 7, background: 'linear-gradient(90deg, var(--c-brand), var(--c-accent))' }} />
        <div style={{ padding: '18px 16px 20px' }}>
          <div className="h-eyebrow" style={{ marginBottom: 6 }}>{t.nosotrosEyebrow}</div>
          <div style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 24, color: 'var(--c-ink)', lineHeight: 1.1, marginBottom: 10 }}>{intro.title}</div>
          <p style={{ margin: '0 0 12px', fontSize: 14, color: 'var(--c-ink-soft)', lineHeight: 1.65 }}>{txt(intro.body, lang)}</p>
          <div style={{ display: 'inline-flex', alignItems: 'center', gap: 6, fontSize: 12, fontWeight: 600, color: 'var(--c-brand)', background: 'color-mix(in srgb, var(--c-brand) 10%, var(--c-surface))', padding: '5px 11px', borderRadius: 999 }}>
            <Icon name="pin" size={13} sw={1.9} />{txt(intro.since, lang)}
          </div>
        </div>
      </div>

      {/* Galería de fotos */}
      {photos && photos.length > 0 && (
        <div style={{ marginBottom: 4 }}>
          <div className="cat-head" style={{ marginBottom: 11 }}>
            <Icon name="image" size={18} sw={1.9} style={{ color: 'var(--c-brand)' }} />
            <h3 style={{ fontWeight: 700, fontSize: 17 }}>{lang === 'en' ? 'Photo gallery' : 'Galería de fotos'}</h3>
            <span className="cat-rule" />
          </div>
          <PhotoGallery photos={photos} lang={lang} />
        </div>
      )}

      {/* Novedades / stories */}
      <div style={{ marginBottom: 22 }}>
        <div className="cat-head" style={{ marginBottom: 11 }}>
          <Icon name="star" size={18} sw={1.9} style={{ color: 'var(--c-brand)' }} />
          <h3 style={{ fontWeight: 700, fontSize: 17 }}>{t.storiesTitle}</h3>
          <span className="cat-rule" />
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
          {stories.map(s => (
            <div key={s.id} className="card" style={{ padding: '13px 14px' }}>
              <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '.05em', textTransform: 'uppercase', color: 'var(--c-accent-ink)', marginBottom: 4 }}>{s.date}</div>
              <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 15.5, color: 'var(--c-ink)', marginBottom: 5 }}>{txt(s.title, lang)}</div>
              <p style={{ margin: 0, fontSize: 13, color: 'var(--c-ink-soft)', lineHeight: 1.55 }}>{txt(s.body, lang)}</p>
            </div>
          ))}
        </div>
      </div>

      {/* Reseñas — Google real */}
      <div>
        <div className="cat-head" style={{ marginBottom: 11 }}>
          <Icon name="heart" size={18} sw={1.9} style={{ color: 'var(--c-brand)' }} />
          <h3 style={{ fontWeight: 700, fontSize: 17 }}>{t.reviewsTitle}</h3>
          <span className="cat-rule" />
        </div>
        <GoogleReviews lang={lang} />
      </div>

      <InstagramStrip />
    </div>
  );
}

// Live Google reviews via Elfsight widget, or a strong CTA card until the widget id is set.
function GoogleReviews({ lang }) {
  const widget = PLACE.reviewsWidget;
  React.useEffect(() => {
    if (!widget) return;
    if (document.getElementById('elfsight-platform')) return;
    const s = document.createElement('script');
    s.id = 'elfsight-platform';
    s.src = 'https://elfsightcdn.com/platform.js';
    s.async = true;
    document.body.appendChild(s);
  }, [widget]);

  return (
    <>
      {widget && <div className={`elfsight-app-${widget}`} style={{ marginBottom: 12 }}></div>}
      <div className="card" style={{ padding: '18px 16px 20px', textAlign: 'center', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 10 }}>
      <StarRating stars={5} />
      <div style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 17, color: 'var(--c-ink)', lineHeight: 1.15 }}>
        {lang === 'en' ? 'Loved by travelers on Google' : 'Nos eligen en Google'}
      </div>
      <p style={{ margin: 0, fontSize: 13, color: 'var(--c-ink-soft)', lineHeight: 1.55, maxWidth: 300 }}>
        {lang === 'en'
          ? 'Read what people say or leave your review — it helps us a lot.'
          : 'Leé lo que dicen los viajeros o dejá la tuya. ¡Nos ayuda un montón!'}
      </p>
      <a href={PLACE.reviewsUrl} target="_blank" rel="noopener"
        style={{ display: 'inline-flex', alignItems: 'center', gap: 8, padding: '11px 22px', borderRadius: 999, background: '#4285F4', color: '#fff', textDecoration: 'none', fontWeight: 700, fontSize: 14, marginTop: 2 }}>
        <svg width="16" height="16" viewBox="0 0 24 24" fill="#fff"><path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/></svg>
        {lang === 'en' ? 'See reviews on Google' : 'Ver reseñas en Google'}
      </a>
      </div>
    </>
  );
}

Object.assign(window, { HomeScreen, MenuScreen, CombosScreen, EsquelScreen, PlaceScreen, NosotrosScreen, OrderNoteScreen });