/* Cadenas San Gabriel — public site (Opción A "Cumbre"). Reads inventory from CSGStore. */
const { useState, useEffect, useRef } = React;
const S = window.CSGStore;
const clp = S.clp;
const WA_NEGOCIO = '56994780070';   // número del negocio para enlaces wa.me

const ANCHOS = [155,165,175,185,195,205,215,225,235,245,255,265,275,285];
const PERFILES = [45,50,55,60,65,70,75,80];
const AROS = ['R13','R14','R15','R16','R17','R18'];

function nextDays(n){
  const dias=['dom','lun','mar','mié','jue','vie','sáb'];
  const mes=['ene','feb','mar','abr','may','jun','jul','ago','sep','oct','nov','dic'];
  const out=[]; const base=new Date(); base.setHours(0,0,0,0);
  for(let i=0;i<n;i++){const d=new Date(base); d.setDate(base.getDate()+i);
    const y=d.getFullYear(), mo=String(d.getMonth()+1).padStart(2,'0'), da=String(d.getDate()).padStart(2,'0');
    out.push({key:i, num:d.getDate(), mes:mes[d.getMonth()], label:i===0?'Hoy':i===1?'Mañana':dias[d.getDay()],
      iso:`${d.getDate()} ${mes[d.getMonth()]}`, fecha:`${y}-${mo}-${da}`});}
  return out;
}

/* live store hook — inventario en tiempo real desde Firestore */
function useStore(){
  const [,force]=useState(0);
  useEffect(()=>S.subscribe(()=>force(x=>x+1)),[]);
  return { groups:S.getGroups(), meta:S.getMeta() };
}

function Chevron(){return <svg width="13" height="13" viewBox="0 0 13 13" fill="none" stroke="currentColor" strokeWidth="1.8"><path d="M3 5l3.5 3.5L10 5"/></svg>;}
function Tick(){return <span className="tick">✓</span>;}

const HORARIOS = ['08:00','10:00','12:00','14:00','16:00'];

function HelpModal({onClose}){
  return (
    <div className="overlay" onMouseDown={e=>{if(e.target===e.currentTarget)onClose();}}>
      <div className="modal">
        <div className="mhead"><h3>¿Cómo sé mi medida?</h3><button className="mclose" onClick={onClose}>×</button></div>
        <div className="mbody">
          <p className="fhintc" style={{marginTop:0,marginBottom:14,fontSize:14}}>Tu medida son los números del costado del neumático, por ejemplo <b style={{color:'var(--ink)'}}>205/55 R16</b>. Significan:</p>
          <div className="measure">
            <div className="mpart"><div className="big">205</div><div className="nm">Ancho</div><div className="de">en milímetros</div></div>
            <div className="mpart"><div className="big">55</div><div className="nm">Perfil</div><div className="de">alto, % del ancho</div></div>
            <div className="mpart"><div className="big">R16</div><div className="nm">Aro</div><div className="de">diámetro en pulgadas</div></div>
          </div>
          <div className="wheretitle">¿Dónde la encuentro?</div>
          <div className="wherelist">
            <div className="whereitem"><span className="n">1</span><div>En el <b>costado del neumático</b>, grabada en relieve (la ves parada frente a la rueda).</div></div>
            <div className="whereitem"><span className="n">2</span><div>En la <b>etiqueta del marco de la puerta</b> del conductor.</div></div>
            <div className="whereitem"><span className="n">3</span><div>En la <b>tapa del estanque de bencina</b> o en el manual del vehículo.</div></div>
          </div>
          <div className="sidewall"><span className="tag">FOTO · Costado del neumático con la medida</span></div>
          <p className="fhintc">Tip: si no la encuentras, eliğe tu tipo de vehículo en “Medidas frecuentes” y te damos una opción común en Chile.</p>
        </div>
        <div className="mfoot"><button className="btn btn-pri confirm" onClick={onClose}>Entendido</button></div>
      </div>
    </div>
  );
}

function ValidInput({label, display, valid, touched, error, hint, onChange, placeholder, maxLength, inputMode, last}){
  const cls = !display ? '' : valid ? 'ok' : 'bad';
  const showErr = touched && !valid;
  return (
    <div className="field" style={last?{marginBottom:0}:null}>
      <label>{label}</label>
      <div className="winp">
        <input className={cls} value={display} onChange={onChange} placeholder={placeholder} maxLength={maxLength} inputMode={inputMode}/>
        {display && valid && <span className="vico ok">✓</span>}
      </div>
      {showErr ? <div className="err">{error}</div> : (hint && <div className="fhintc">{hint}</div>)}
    </div>
  );
}

function Dropdown({k, value, options, onChange}){
  const [open,setOpen]=useState(false);
  const ref=useRef(null);
  useEffect(()=>{
    if(!open) return;
    const h=e=>{ if(ref.current && !ref.current.contains(e.target)) setOpen(false); };
    document.addEventListener('mousedown',h);
    return ()=>document.removeEventListener('mousedown',h);
  },[open]);
  return (
    <div className={"dd"+(open?" open":"")} ref={ref}>
      <button className="dd-btn" onClick={()=>setOpen(o=>!o)}>
        <div className="dd-k">{k}</div>
        <div className={"dd-v"+(value==null?" empty":"")}>{value==null?'—':value} <Chevron/></div>
      </button>
      {open && (
        <div className="dd-menu">
          {options.map(o=>(
            <div key={o} className={"dd-opt"+(o===value?" sel":"")} onClick={()=>{onChange(o);setOpen(false);}}>
              {o} {o===value && <span>✓</span>}
            </div>
          ))}
        </div>
      )}
    </div>
  );
}

function Inventory({groups, meta, activeGroup, onPick}){
  const keys = Object.keys(meta).filter(g=>groups[g] && groups[g].active);
  return (
    <section className="wrap sec" id="disponibilidad">
      <div className="invhead">
        <div><span className="kicker">En tiempo real</span><h2 className="h2">Disponibilidad ahora en San Gabriel</h2></div>
        <span className="live"><span className="dot"></span>Sincronizado con el inventario</span>
      </div>
      <div className="invgrid">
        {keys.map(gk=>{
          const m=meta[gk]; const n=groups[gk].stock;
          const low=n>0&&n<=6; const out=n===0;
          const pct = out?0 : Math.max(8, Math.min(100, (n/22)*100));
          return (
            <button key={gk} className={"inv"+(String(activeGroup)===gk?" active":"")} onClick={()=>onPick(Number(gk))}>
              <div className="g">{m.name}</div><div className="m">{m.range}</div>
              <div className={"invnum"+(out?" out":low?" low":"")}>{n}</div>
              <div className="invlab">
                <span className="dot" style={out?{background:'#B23B3B',boxShadow:'none'}:low?{background:'#E07B1C',boxShadow:'0 0 0 3px rgba(224,123,28,.18)'}:{}}></span>
                {out?'Agotado':low?'Quedan pocas':'Disponibles'}
              </div>
              <div className="bar"><i style={{width:pct+'%',background:out?'#B23B3B':low?'#E07B1C':'#1F9D6B'}}></i></div>
            </button>
          );
        })}
      </div>
      <p className="hint" style={{marginTop:16}}>ⓘ Toca un grupo para cargarlo en el buscador. El stock se actualiza con cada reserva confirmada y desde el panel de administración.</p>
    </section>
  );
}

// Ficha técnica de instalación (visible para el cliente al reservar).
function SpecBox({m}){
  const rows=[
    ['Perfil',   m.perfil && (m.perfil+(m.perfil==='Bajo'?' · poca holgura':' · mayor agarre'))],
    ['Patrón',   m.patron],
    ['Grosor',   m.grosor],
    ['Montaje',  m.traccion],
    ['Holgura',  m.holgura],
    ['Tensor',   m.tensor],
    ['Material', m.material],
  ].filter(r=>r[1]);
  if(!rows.length && !m.instalacion) return null;
  return (
    <div style={{border:'1px solid var(--line)',borderRadius:12,padding:'14px 16px',marginBottom:18,background:'#FAFBFC'}}>
      <div style={{fontSize:12.5,fontWeight:700,textTransform:'uppercase',letterSpacing:'.04em',color:'var(--blue)',marginBottom:10}}>Ficha de instalación</div>
      {rows.length>0 && (
        <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:'8px 18px'}}>
          {rows.map(([k,v])=>(
            <div key={k} style={{display:'flex',justifyContent:'space-between',gap:8,fontSize:13,borderBottom:'1px solid #EEF1F5',paddingBottom:6}}>
              <span style={{color:'var(--muted)'}}>{k}</span>
              <span style={{fontWeight:600,textAlign:'right'}}>{v}</span>
            </div>
          ))}
        </div>
      )}
      {m.instalacion && <div style={{fontSize:12.5,color:'#3A4856',marginTop:10,lineHeight:1.45}}>ⓘ {m.instalacion}</div>}
    </div>
  );
}

function ReserveModal({group, cfg, m, onClose}){
  const [step,setStep]=useState('form');
  const [date,setDate]=useState(0);
  const [hora,setHora]=useState('10:00');
  const [dias,setDias]=useState(1);
  const [form,setForm]=useState({nombre:'',rut:'',patente:'',fono:''});
  const [touched,setTouched]=useState(false);
  const [code,setCode]=useState('');
  const [submitting,setSubmitting]=useState(false);
  const [srvErr,setSrvErr]=useState('');
  const days=nextDays(5);
  const total = cfg.price*dias + cfg.garantia;

  const nombreOk = form.nombre.trim().length>2;
  const rutOk = S.valid.rut(form.rut);
  const patOk = S.valid.patente(form.patente);
  const fonoOk = S.valid.fono(form.fono);
  // anti-acaparamiento: 1 reserva activa por patente o RUT
  const blocker = (patOk||rutOk) ? S.findActiveByIdentity(form.patente, form.rut) : null;
  const noShows = (patOk||rutOk) ? S.countNoShows(form.patente, form.rut) : 0;
  const valid = nombreOk && rutOk && patOk && fonoOk && !blocker;

  const confirm=async ()=>{
    setTouched(true); setSrvErr('');
    if(!valid || submitting) return;
    const c='SG-'+Math.floor(1000+Math.random()*9000);
    setSubmitting(true);
    try{
      // El precio/garantía/total los fija el servidor en la transacción.
      await S.reserve({
        code:c, group:Number(group), nombre:form.nombre.trim(),
        rut:S.fmt.rut(form.rut), patente:S.fmt.patente(form.patente), fono:S.fmt.fono(form.fono),
        dia:days[date].iso, fecha:days[date].fecha, hora, dias,
        estado:'reservada', ts:Date.now()
      });
      // Aviso al dueño por WhatsApp (no bloquea la confirmación).
      S.notifyWhatsApp(
        `🔔 Nueva reserva ${c}\n`+
        `${m.name} · ${m.model}\n`+
        `Cliente: ${form.nombre.trim()}\n`+
        `Patente: ${S.fmt.patente(form.patente)} · ${S.fmt.fono(form.fono)}\n`+
        `Día: ${days[date].iso} ${hora} · ${dias} día(s)`
      );
      setCode(c); setStep('done');
    }catch(e){
      const msg = e && e.message;
      setSrvErr(
        msg==='sin-stock' ? 'Lo sentimos, esta cadena se reservó recién y ya no queda stock.'
      : msg==='inactivo'  ? 'Esta cadena ya no está disponible para reserva.'
      : 'No pudimos confirmar la reserva. Revisa tu conexión e inténtalo de nuevo.');
    }finally{
      setSubmitting(false);
    }
  };

  return (
    <div className="overlay" onMouseDown={e=>{if(e.target===e.currentTarget)onClose();}}>
      <div className="modal">
        {step==='form' ? (<>
          <div className="mhead"><h3>Reservar cadena</h3><button className="mclose" onClick={onClose}>×</button></div>
          <div className="mbody">
            <div className="msum">
              <div><div className="g">{m.name}</div><div className="m">{m.model} · {m.range}</div></div>
              <div className="p">{clp(cfg.price)}<div className="m" style={{fontWeight:400}}>/ día</div></div>
            </div>

            <SpecBox m={m}/>

            {blocker && <div className="warn block">⚠ Ya existe una reserva activa ({blocker.code}) para esta patente o RUT. Mantenemos <b>una cadena por vehículo</b> para evitar acaparamiento.</div>}
            {!blocker && noShows>0 && <div className="warn">⚠ Registramos {noShows} reserva(s) anterior(es) sin retiro. Por favor llega en tu horario: las cadenas son limitadas.</div>}
            {srvErr && <div className="warn block">⚠ {srvErr}</div>}

            <div className="field">
              <label>Día de tu viaje</label>
              <div className="dates">
                {days.map(d=>(
                  <button key={d.key} className={"datechip"+(date===d.key?" on":"")} onClick={()=>setDate(d.key)}>
                    {d.label}<div className="d">{d.num} {d.mes}</div>
                  </button>
                ))}
              </div>
            </div>
            <div className="field">
              <label>Horario estimado de retiro</label>
              <div className="dates">
                {HORARIOS.map(h=>(<button key={h} className={"datechip"+(hora===h?" on":"")} onClick={()=>setHora(h)} style={{minWidth:64}}>{h}</button>))}
              </div>
              <div className="fhintc">Tu reserva se mantiene hasta <b>1 hora después</b> de este horario. Pasado ese tiempo, la cadena se libera para otro cliente.</div>
            </div>
            <div className="field">
              <label>Días de arriendo</label>
              <div className="dates">
                {[1,2,3].map(x=>(<button key={x} className={"datechip"+(dias===x?" on":"")} onClick={()=>setDias(x)} style={{minWidth:64}}>{x} {x===1?'día':'días'}</button>))}
              </div>
            </div>

            <div className="field">
              <label>Nombre y apellido</label>
              <div className="winp">
                <input className={!form.nombre?'':nombreOk?'ok':'bad'} value={form.nombre} onChange={e=>setForm({...form,nombre:e.target.value})} placeholder="Ej. Camila Rojas"/>
                {nombreOk && <span className="vico ok">✓</span>}
              </div>
              {touched && !nombreOk && <div className="err">Ingresa tu nombre.</div>}
            </div>
            <ValidInput label="RUT" display={S.fmt.rut(form.rut)} valid={rutOk} touched={touched}
              error="RUT inválido. Revisa el dígito verificador." hint="Formato: 12.345.678-9"
              onChange={e=>setForm({...form,rut:S.clean.rut(e.target.value)})} placeholder="12.345.678-9" maxLength={12} inputMode="text"/>
            <ValidInput label="Patente del vehículo" display={S.fmt.patente(form.patente)} valid={patOk} touched={touched}
              error="Patente inválida (ej. BFGK·20 o AB·12·34)." hint="Formato chileno: BFGK·20 o AB·12·34"
              onChange={e=>setForm({...form,patente:S.clean.patente(e.target.value)})} placeholder="BFGK·20" maxLength={8} inputMode="text"/>
            <ValidInput label="Teléfono de contacto" display={S.fmt.fono(form.fono)} valid={fonoOk} touched={touched}
              error="Celular inválido. Debe ser +56 9 y 8 dígitos." hint="Te enviaremos un recordatorio por WhatsApp"
              onChange={e=>setForm({...form,fono:S.clean.fono(e.target.value)})} placeholder="+56 9 1234 5678" maxLength={17} inputMode="tel" last/>
          </div>
          <div className="mfoot">
            <div className="total">
              <div className="l">{dias} {dias===1?'día':'días'} · arriendo {clp(cfg.price*dias)} + garantía {clp(cfg.garantia)}</div>
              <div className="v">{clp(total)}</div>
            </div>
            <button className="btn btn-pri confirm" onClick={confirm} disabled={!!blocker || submitting}>{submitting?'Confirmando…':'Confirmar reserva'}</button>
            <div className="rule"><span className="pin">↩︎</span><span>La <b>garantía es reembolsable</b> al devolver las cadenas — protege tu reserva y evita que se pierda. Pagas en San Gabriel con tarjeta (TUU) o efectivo, con boleta.</span></div>
          </div>
        </>) : (
          <div className="success">
            <div className="scheck">✓</div>
            <h3>¡Reserva confirmada!</h3>
            <p>Tu {m.name} queda apartada para el <b>{days[date].iso}</b> a las <b>{hora}</b>. Te esperamos en el Km 47 de la Ruta G-25, San Gabriel.</p>
            <div className="code"><div className="l">Código de reserva</div><div className="v">{code}</div></div>
            <a className="btn btn-pri confirm" style={{marginTop:24,maxWidth:300,width:'100%',display:'inline-block',textDecoration:'none'}}
               href={`https://wa.me/${WA_NEGOCIO}?text=${encodeURIComponent(`Hola, confirmo mi reserva ${code} — ${m.name} para el ${days[date].iso} a las ${hora}.`)}`}
               target="_blank" rel="noopener">Enviar confirmación por WhatsApp</a>
            <button className="btn btn-gh" style={{marginTop:10,maxWidth:300,width:'100%'}} onClick={onClose}>Listo</button>
          </div>
        )}
      </div>
    </div>
  );
}

function App(){
  const {groups, meta} = useStore();
  const [vehiculo,setVehiculo]=useState('Auto');
  const [ancho,setAncho]=useState(205);
  const [perfil,setPerfil]=useState(55);
  const [aro,setAro]=useState('R16');
  const [result,setResult]=useState(null);
  const [modal,setModal]=useState(null);
  const [help,setHelp]=useState(false);
  const [toast,setToast]=useState('');

  const ready = ancho!=null && perfil!=null && aro!=null;
  const buscar=()=>{ if(ready) setResult(S.groupForTire(ancho, aro)); };
  useEffect(()=>{ if(result!=null && ready) setResult(S.groupForTire(ancho, aro)); },[ancho,perfil,aro]);

  const pickFromInventory=(g)=>{
    const repr={8:[185,65,'R15'],9:[205,55,'R16'],10:[215,60,'R16'],11:[225,65,'R17'],12:[235,60,'R17'],13:[245,60,'R18'],14:[265,60,'R18'],15:[285,60,'R18']}[g] || [205,55,'R16'];
    setAncho(repr[0]); setPerfil(repr[1]); setAro(repr[2]); setResult(g);
    window.scrollTo({top:0,behavior:'smooth'});
  };
  const showToast=(msg)=>{ setToast(msg); setTimeout(()=>setToast(''),2600); };

  const cfg = result!=null ? groups[result] : null;
  const missing = result!=null && !cfg;              // grupo eliminado del inventario
  const m = result!=null ? (meta[result] || {name:'Grupo '+result, model:'', range:''}) : null;
  const n = cfg ? cfg.stock : 0;
  const inactive = missing || (cfg && !cfg.active);
  const low = !inactive && n>0 && n<=6; const out = !inactive && n===0;

  return (<>
    <nav className="nav">
      <div className="wrap">
        <div className="logo"><span className="mark"></span>CADENAS SAN GABRIEL</div>
        <div className="navlinks">
          <a onClick={()=>window.scrollTo({top:0,behavior:'smooth'})} style={{cursor:'pointer'}}>Buscar</a>
          <a href="#como">Cómo funciona</a>
          <a href="#disponibilidad">Disponibilidad</a>
          <a href="#ubicacion">Ubicación</a>
        </div>
        <div className="navcta">
          <span className="phone">☎ +56 9 9478 0070</span>
          <button className="btn btn-pri" onClick={()=>{window.scrollTo({top:0,behavior:'smooth'}); showToast('Ingresa tu medida para reservar tu cadena');}}>Reservar</button>
        </div>
      </div>
    </nav>

    <header className="wrap hero">
      <div>
        <span className="eyebrow">● Cajón del Maipo · Ruta G-25</span>
        <h1 className="disp h1">Sube a la nieve con la cadena correcta.</h1>
        <p className="sub">Ingresa la medida de tu neumático y te decimos exactamente qué cadena necesitas — y si está disponible en San Gabriel, en tiempo real.</p>
        <div className="trust">
          <div className="trustrow"><Tick/>Compatible con tu medida exacta, sin adivinar</div>
          <div className="trustrow"><Tick/>Uso obligatorio por Carabineros en tramos con nieve</div>
          <div className="trustrow"><Tick/>Retiro y devolución en el camino, antes de subir</div>
        </div>
        <div className="stat">
          <div><div className="disp n">2.400+</div><div className="l">arriendos esta temporada</div></div>
          <div><div className="disp n">11 min</div><div className="l">retiro promedio</div></div>
          <div><div className="disp n">Km 47</div><div className="l">San Gabriel, G-25</div></div>
        </div>
      </div>

      <div className="finder">
        <div className="fhead"><h3>Encuentra tu cadena</h3><p>Selecciona tu medida de neumático</p></div>
        <div className="fbody">
          <div className="lab">Tipo de vehículo</div>
          <div className="pills">
            {['Auto','SUV','Camioneta 4×4'].map(v=>(<button key={v} className={"pill"+(vehiculo===v?" on":"")} onClick={()=>setVehiculo(v)}>{v}</button>))}
          </div>
          <div className="lab-row">
            <div className="lab" style={{marginBottom:0}}>Medida del neumático</div>
            <button className="helplink" onClick={()=>setHelp(true)}>¿Cómo sé mi medida?</button>
          </div>
          <div className="comunes">
            {S.COMUNES.filter(c=>c.tipo===vehiculo).map(c=>{
              const on = ancho===c.a && perfil===c.p && aro===c.r;
              return (
                <button key={c.label} className={"comch"+(on?" on":"")}
                  onClick={()=>{ setAncho(c.a); setPerfil(c.p); setAro(c.r); setResult(S.groupForTire(c.a, c.r)); }}>
                  <div className="cl">{c.label}</div><div className="cs">{c.sub}</div><div className="cm">{c.a}/{c.p} {c.r}</div>
                </button>
              );
            })}
          </div>
          <div className="sels">
            <Dropdown k="Ancho" value={ancho} options={ANCHOS} onChange={setAncho}/>
            <Dropdown k="Perfil" value={perfil} options={PERFILES} onChange={setPerfil}/>
            <Dropdown k="Aro" value={aro} options={AROS} onChange={setAro}/>
          </div>
          <div className="hint">ⓘ La medida está impresa en el costado del neumático (ej. 205/55 R16).</div>
          <button className="btn btn-pri search" onClick={buscar} disabled={!ready}>Buscar disponibilidad</button>
        </div>

        {result==null ? (
          <div className="empty-res">Selecciona tu medida y pulsa <b>Buscar</b> para ver tu cadena y su disponibilidad.</div>
        ) : inactive ? (
          <div className="res out">
            <div className="restop"><span className="rklabel">Tu cadena</span><span className="badge out"><span className="dot"></span>No disponible en inventario</span></div>
            <div className="disp grp">Cadena {m.name}</div>
            <div className="grpsub">{m.model} · compatible con {ancho}/{perfil} {aro}</div>
            <div className="resfoot">
              <div className="price"><span>Este grupo no está en nuestro inventario por ahora.</span></div>
              <button className="btn btn-gh" onClick={()=>showToast('Te avisamos cuando tengamos el '+m.name)}>Avísame cuando llegue</button>
            </div>
          </div>
        ) : (
          <div className={"res"+(out?" out":"")}>
            <div className="restop">
              <span className="rklabel">Tu cadena</span>
              <span className={"badge"+(out?" out":low?" low":"")}>
                <span className="dot"></span>{out?'Sin stock hoy':`${n} disponibles · San Gabriel`}
              </span>
            </div>
            <div className="disp grp">Cadena {m.name}</div>
            <div className="grpsub">{m.model} · compatible con {ancho}/{perfil} {aro}</div>
            <div className="resfoot">
              <div className="price"><b>{clp(cfg.price)}</b> <span>/ día · garantía {clp(cfg.garantia)}</span></div>
              {out
                ? <button className="btn btn-gh" onClick={()=>showToast('Te avisamos cuando haya stock del '+m.name)}>Avísame cuando llegue</button>
                : <button className="btn btn-pri" onClick={()=>setModal(result)}>Reservar ahora →</button>}
            </div>
          </div>
        )}
      </div>
    </header>

    <section className="band" id="como"><div className="wrap sec">
      <span className="kicker">Cómo funciona</span>
      <h2 className="h2">Tres pasos antes de subir</h2>
      <div className="steps">
        <div className="step"><div className="stepn">1</div><h4>Ingresa tu medida</h4><p>Pon la medida de tu neumático o elige tu vehículo. Te indicamos el grupo de cadena exacto que necesitas.</p></div>
        <div className="step"><div className="stepn">2</div><h4>Confirma disponibilidad</h4><p>Vemos el stock en San Gabriel en tiempo real y reservas tu cadena para el día de tu viaje.</p></div>
        <div className="step"><div className="stepn">3</div><h4>Retira en el camino</h4><p>Pasas por el Km 47 de la Ruta G-25, retiras, las instalamos contigo y devuelves al bajar.</p></div>
      </div>
    </div></section>

    <Inventory groups={groups} meta={meta} activeGroup={result} onPick={pickFromInventory}/>

    <section className="band" id="ubicacion"><div className="wrap sec loc">
      <div>
        <span className="kicker">Dónde estamos</span>
        <h2 className="h2">En el camino, antes de la nieve</h2>
        <div className="locrows">
          <div className="locrow"><span className="locico">📍</span><div><div className="t">Km 47, Ruta G-25 · San Gabriel</div><div className="s">Última parada con cadenas antes de Embalse El Yeso, Baños Morales y Lagunillas.</div></div></div>
          <div className="locrow"><span className="locico">🕖</span><div><div className="t">Todos los días · 06:30 a 18:00</div><div className="s">Temporada de nieve, mayo a septiembre. Abrimos antes en fines de semana largos.</div></div></div>
          <div className="locrow"><span className="locico">☎</span><div><div className="t">+56 9 9478 0070</div><div className="s">Consulta de stock por WhatsApp o reserva con anticipación.</div></div></div>
        </div>
      </div>
      <div className="map"><span className="maptag">MAPA · San Gabriel, Km 47 Ruta G-25</span></div>
    </div></section>

    <footer className="foot"><div className="wrap">
      <div className="logo"><span className="mark"></span>CADENAS SAN GABRIEL</div>
      <div><a href="#disponibilidad">Disponibilidad</a><a href="#como">Cómo funciona</a><a href="#ubicacion">Ubicación</a><a href="/admin/">Administración</a></div>
    </div></footer>

    {modal!=null && <ReserveModal group={modal} cfg={groups[modal]} m={meta[modal]||{name:'Grupo '+modal,model:'',range:''}} onClose={()=>setModal(null)}/>}
    {help && <HelpModal onClose={()=>setHelp(false)}/>}
    {toast && <div className="toast"><span className="dot" style={{background:'#fff',boxShadow:'none'}}></span>{toast}</div>}
  </>);
}

ReactDOM.createRoot(document.getElementById('root')).render(<App/>);