// HOME — hero slim + catálogo embebido (apenas entrás) + método + financiación + contacto
const HomeScreen = ({ onNav, onSelectVehicle }) => {
  const { vehicles, marcas, carrocerias } = window.OMEGA_DATA;
  const { fmtPrice } = window.OMEGA_HELPERS;

  // Buscador rápido del hero → aplica preset al catálogo embebido y baja a él
  const [search, setSearch] = useState({ marca: 'Todas', carroceria: 'Todas', precioMax: 70000000 });
  const [preset, setPreset] = useState(null);
  const [requestOpen, setRequestOpen] = useState(false);
  const catalogRef = useRef();

  const matchCount = useMemo(() => {
    return vehicles.filter(v => {
      if (search.marca !== 'Todas' && v.marca !== search.marca) return false;
      if (search.carroceria !== 'Todas' && v.carroceria !== search.carroceria) return false;
      if (v.precio > search.precioMax) return false;
      return true;
    }).length;
  }, [vehicles, search]);

  const scrollToCatalog = () => {
    const el = catalogRef.current;
    if (!el) return;
    const r = el.getBoundingClientRect();
    window.scrollTo({ top: window.scrollY + r.top - 64, behavior: 'smooth' });
  };

  const handleSearch = () => {
    if (matchCount === 0) { setRequestOpen(true); return; }
    setPreset({ ...search });
    setTimeout(scrollToCatalog, 80);
  };

  return (
    <main className="home-root">
      {/* ====== HERO SLIM + BUSCADOR ====== */}
      <section className="hero-slim">
        <div className="hero-grid" aria-hidden="true"/>
        <div className="container hero-slim-inner">
          <div className="hero-slim-head">
            <div className="hero-eyebrow eyebrow"><span className="dot"/> Showroom abierto · Lun a Sáb 9 a 19 hs</div>
            <h1 className="display-lg hero-slim-title">
              Usados <span className="italic">seleccionados</span> <span style={{color:'var(--accent)'}}>sin sorpresas.</span>
            </h1>
            <p className="hero-slim-sub">
              <strong style={{color:'var(--ink)'}}>{vehicles.length} unidades</strong> en showroom · inspección de 142 puntos · gestoría propia · historial verificado.
            </p>
          </div>

          <div className="hero-slim-search">
            <div className="search-fields">
              <div className="field">
                <label className="field-label">Marca</label>
                <select className="select" value={search.marca} onChange={e=>setSearch({...search, marca: e.target.value})}>
                  {marcas.map(m => <option key={m} value={m}>{m}</option>)}
                </select>
              </div>
              <div className="field">
                <label className="field-label">Tipo</label>
                <select className="select" value={search.carroceria} onChange={e=>setSearch({...search, carroceria: e.target.value})}>
                  {carrocerias.map(c => <option key={c} value={c}>{c}</option>)}
                </select>
              </div>
              <div className="field">
                <label className="field-label">Precio máx · {fmtPrice(search.precioMax)}</label>
                <input type="range" min="5000000" max="70000000" step="500000" value={search.precioMax}
                       onChange={e=>setSearch({...search, precioMax: +e.target.value})}
                       className="range-input"/>
              </div>
              <button className="btn btn-accent btn-lg" onClick={handleSearch}>
                {matchCount === 0 ? <><Icon.Search width="14" height="14"/> Pedinoslo · te lo buscamos</> : <><Icon.Search width="14" height="14"/> Ver {matchCount} resultado{matchCount===1?'':'s'}</>}
              </button>
            </div>
            <div className="hero-slim-extra">
              <span className="mono" style={{fontSize:11, color:'var(--ink-mute)', letterSpacing:'0.12em', textTransform:'uppercase'}}>
                {matchCount === 0
                  ? '· No lo tenemos en stock — te lo conseguimos en menos de 24hs'
                  : '¿No encontrás lo que buscás?'}
              </span>
              <button type="button" className="link-accent" onClick={()=>setRequestOpen(true)}>
                Solicitá tu auto a medida <Icon.Arrow width="12" height="12"/>
              </button>
            </div>
          </div>
        </div>
      </section>

      <Modal open={requestOpen} onClose={()=>setRequestOpen(false)}>
        <RequestCarForm preset={search} variant="modal"/>
      </Modal>

      {/* ====== CATÁLOGO EMBEBIDO (visible apenas entrás) ====== */}
      <div ref={catalogRef} id="catalogo" className="home-catalog">
        <CatalogScreen
          embedded
          initialSearch={preset}
          onSelectVehicle={onSelectVehicle}
          key={preset ? `${preset.marca}|${preset.carroceria}|${preset.precioMax}` : 'base'}
        />
      </div>

      {/* ====== DIFERENCIALES / NOSOTROS ====== */}
      <section id="nosotros" className="section-block dark-strip">
        <div className="container">
          <Reveal>
            <div className="strip-eyebrow eyebrow">El método OMEGA</div>
            <h2 className="display-lg" style={{maxWidth:'18ch'}}>Compr&aacute;s un auto. Te llev&aacute;s la confianza de quien lo respalda.</h2>
          </Reveal>
          <div className="strip-grid">
            {[
              { n: '01', t: 'Gestoría propia', d: 'No te mandamos a un gestor de afuera. Todo el papeleo lo hacemos nosotros, en tiempos OMEGA.' },
              { n: '02', t: 'Inspección 142 puntos', d: 'Mecánica, suspensión, frenos, electrónica, carrocería y documentación. Cada unidad, sin excepción.' },
              { n: '03', t: 'Historial verificado', d: 'Cruzamos historial con DNRPA, aseguradoras y servicio oficial. Sin sorpresas posteriores.' },
              { n: '04', t: 'Financiación a medida', d: 'Trabajamos con las principales entidades. Cuotas en pesos, dólar billete o canje. Vos elegís.' }
            ].map((it, i) => (
              <Reveal key={it.n} delay={i*120}>
                <div className="diff-card">
                  <div className="diff-num mono">{it.n}</div>
                  <h4 className="serif diff-title">{it.t}</h4>
                  <p className="diff-desc">{it.d}</p>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      {/* ====== FINANCIACIÓN BANNER ====== */}
      <section id="financiacion" className="section-block fin-banner">
        <div className="container">
          <div className="fin-row">
            <div className="fin-left">
              <div className="eyebrow">Financiación</div>
              <h2 className="display-lg">Hasta <span style={{color:'var(--accent)'}}>60 cuotas</span><br/>en pesos.</h2>
              <p style={{maxWidth:520, color:'var(--ink-dim)', marginTop:16}}>Calculá tu cuota desde el detalle de cada vehículo. Trabajamos con BBVA, Galicia, Santander, Banco Nación y financiación propia.</p>
              <div style={{marginTop:32, display:'flex', gap:12, flexWrap:'wrap'}}>
                <button className="btn btn-accent" onClick={()=>onNav('catalogo')}>Elegir vehículo</button>
                <button className="btn btn-ghost">Plan canje</button>
              </div>
            </div>
            <div className="fin-right mono">
              <div className="fin-stat"><div className="fin-stat-n">60</div><div className="fin-stat-l">CUOTAS MÁX</div></div>
              <div className="fin-stat"><div className="fin-stat-n">30%</div><div className="fin-stat-l">ANTICIPO DESDE</div></div>
              <div className="fin-stat"><div className="fin-stat-n">24h</div><div className="fin-stat-l">PRE-APROBACIÓN</div></div>
              <div className="fin-stat"><div className="fin-stat-n">0$</div><div className="fin-stat-l">GASTOS GESTORÍA</div></div>
            </div>
          </div>
        </div>
      </section>

      {/* ====== CONTACTO ====== */}
      <section id="contacto" className="section-block">
        <div className="container">
          <div className="contact-row">
            <div>
              <div className="eyebrow">Contacto</div>
              <h2 className="display-lg" style={{marginTop:8}}>Vení al<br/>showroom.</h2>
              <div className="contact-info">
                <div className="contact-item">
                  <Icon.MapPin width="20" height="20"/>
                  <div>
                    <div className="eyebrow" style={{marginBottom:4}}>Dirección</div>
                    <div>Pedro B. Palacios 2700</div>
                    <div style={{color:'var(--ink-dim)'}}>Las Heras, Mendoza · Argentina</div>
                  </div>
                </div>
                <div className="contact-item">
                  <Icon.Phone width="20" height="20"/>
                  <div>
                    <div className="eyebrow" style={{marginBottom:4}}>Teléfono</div>
                    <div className="mono">{window.OMEGA_CONFIG.whatsappDisplay}</div>
                  </div>
                </div>
                <div className="contact-item">
                  <Icon.Whatsapp width="20" height="20"/>
                  <div>
                    <div className="eyebrow" style={{marginBottom:4}}>WhatsApp directo</div>
                    <div className="mono">{window.OMEGA_CONFIG.whatsappDisplay}</div>
                  </div>
                </div>
              </div>
              <div className="contact-hours">
                <div className="eyebrow">Horarios</div>
                <div style={{marginTop:8}}>
                  <div>Lunes a Viernes · 9:00 — 19:00</div>
                  <div>Sábados · 9:30 — 13:00</div>
                  <div style={{color:'var(--ink-mute)'}}>Domingos cerrado</div>
                </div>
              </div>
            </div>
            <ContactForm/>
          </div>
        </div>
      </section>

      {/* ====== FOOTER ====== */}
      <footer className="site-footer">
        <div className="container">
          <div className="footer-top">
            <div className="footer-brand">
              <img src="logo-omega.png" alt="OMEGA Automotores" className="brand-logo brand-logo-lg"/>
              <div className="brand-sub" style={{marginTop:16}}>Mendoza · Argentina · Desde 1998</div>
            </div>
            <div className="footer-cols">
              <div>
                <div className="eyebrow">Catálogo</div>
                <ul><li>Pickups</li><li>SUV</li><li>Sedán</li><li>Hatchback</li><li>Coupé</li></ul>
              </div>
              <div>
                <div className="eyebrow">Servicios</div>
                <ul><li>Financiación</li><li>Plan canje</li><li>Gestoría propia</li><li>Garantía OMEGA</li></ul>
              </div>
              <div>
                <div className="eyebrow">Empresa</div>
                <ul><li>Nosotros</li><li>Showroom</li><li>Trabaj&aacute; con nosotros</li><li>Prensa</li></ul>
              </div>
            </div>
          </div>
          <div className="footer-bot mono">
            <div>© 2026 AUTOMOTORES OMEGA SRL · CUIT 30-XXXXXXXX-X</div>
            <div style={{display:'flex', alignItems:'center', gap:16}}>
              <a href="admin.html" style={{color:'var(--ink-mute)', textDecoration:'none', letterSpacing:'0.16em'}} title="Panel administrativo">ADMIN</a>
              <span>PEDRO B. PALACIOS 2700 · LAS HERAS · MENDOZA · AR</span>
            </div>
          </div>
        </div>
      </footer>
    </main>
  );
};

const ContactForm = () => {
  const [form, setForm] = useState({ nombre:'', email:'', tel:'', mensaje:'', modelo:'Cualquiera' });
  const [sent, setSent] = useState(false);
  const submitContact = (e) => {
    e.preventDefault();
    const lines = [
      '📩 *NUEVO CONTACTO WEB · OMEGA*',
      '',
      `• Nombre: ${form.nombre}`,
      `• Email: ${form.email}`,
      `• Teléfono: ${form.tel}`,
      `• Interés: ${form.modelo}`,
      form.mensaje ? `\n*Mensaje:*\n${form.mensaje}` : ''
    ].filter(Boolean);
    const url = `https://wa.me/${window.OMEGA_CONFIG.whatsapp}?text=${encodeURIComponent(lines.join('\n'))}`;

    // Guardar lead en Supabase
    if (window.OMEGA_STORE?.createLead) {
      window.OMEGA_STORE.createLead({
        tipo: 'contacto',
        nombre: form.nombre,
        telefono: form.tel,
        email: form.email,
        mensaje: form.mensaje || null,
        payload: form
      }).catch(e => console.warn('Lead no se pudo guardar:', e));
    }

    window.open(url, '_blank', 'noopener');
    setSent(true);
    setTimeout(() => { setSent(false); setForm({ nombre:'', email:'', tel:'', mensaje:'', modelo:'Cualquiera' }); }, 3500);
  };
  return (
    <form className="contact-form" onSubmit={submitContact}>
      <div className="eyebrow">Formulario</div>
      <h3 className="serif" style={{fontSize:32, margin:'8px 0 28px'}}>Te llamamos nosotros.</h3>
      <div className="field"><label className="field-label">Nombre completo</label>
        <input className="input" required value={form.nombre} onChange={e=>setForm({...form, nombre:e.target.value})}/>
      </div>
      <div className="form-2col">
        <div className="field"><label className="field-label">Email</label>
          <input className="input" type="email" required value={form.email} onChange={e=>setForm({...form, email:e.target.value})}/>
        </div>
        <div className="field"><label className="field-label">Teléfono</label>
          <input className="input" type="tel" required value={form.tel} onChange={e=>setForm({...form, tel:e.target.value})}/>
        </div>
      </div>
      <div className="field"><label className="field-label">Te interesa</label>
        <select className="select" value={form.modelo} onChange={e=>setForm({...form, modelo:e.target.value})}>
          <option>Cualquiera del catálogo</option>
          <option>Pickup</option><option>SUV</option><option>Sedán</option><option>Hatchback</option>
          <option>Coupé / Deportivo</option><option>Plan canje</option>
        </select>
      </div>
      <div className="field"><label className="field-label">Mensaje (opcional)</label>
        <textarea className="input" rows="3" value={form.mensaje} onChange={e=>setForm({...form, mensaje:e.target.value})}/>
      </div>
      <button className="btn btn-accent btn-lg btn-block" type="submit" style={{marginTop:24}}>
        {sent ? (<><Icon.Check width="16" height="16"/> Abriendo WhatsApp...</>) : (<><Icon.Whatsapp width="16" height="16"/> Enviar por WhatsApp <Icon.Arrow width="14" height="14"/></>)}
      </button>
    </form>
  );
};

Object.assign(window, { HomeScreen });