// Pantalla Home — Auto Paniagua
function Hero({ go }) {
  const D = window.AP_DATA;
  const destacados = D.VEHICLES.filter((v) => v.destacado).slice(0, 5);
  const [i, setI] = useState(0);
  const v = destacados[i];
  useEffect(() => {
    const t = setInterval(() => setI((x) => (x + 1) % destacados.length), 5500);
    return () => clearInterval(t);
  }, []);
  return (
    <section className="ap-hero">
      <div className="ap-hero-bg">
        <div className="ap-hero-glow"></div>
        <div className="ap-hero-grain"></div>
      </div>

      <div className="ap-wrap ap-hero-in">
        <div className="ap-hero-copy">
          <p className="ap-hero-eyebrow"><span className="ap-dot"></span> Inventario disponible · Santo Domingo</p>
          <h1 className="ap-hero-title">El vehículo que buscas,<br /><em>al alcance de tu mano.</em></h1>
          <p className="ap-hero-sub">Nuevos y semi-nuevos certificados, con financiamiento a tu medida. Líderes en el mercado dominicano desde 1994.</p>
          <div className="ap-hero-actions">
            <Btn variant="primary" size="lg" iconRight={Icons.arrowRight({ size: 19 })} onClick={() => go("listing")}>
              Ver inventario
            </Btn>
            <Btn variant="ghost-light" size="lg" icon={Icons.bolt({ size: 18 })} onClick={() => go("calculator")}>
              Calcular financiamiento
            </Btn>
          </div>
          <div className="ap-hero-trust">
            <div className="ap-hero-trust-item"><strong>30+</strong><span>años de experiencia</span></div>
            <div className="ap-hero-trust-item"><strong>4</strong><span>sucursales en RD</span></div>
            <div className="ap-hero-trust-item"><strong>100%</strong><span>vehículos verificados</span></div>
          </div>
        </div>

        <div className="ap-hero-feature" onClick={() => go("detail", v)}>
          <div className="ap-hero-feature-media">
            <img key={v.id} className="ap-hero-feature-img is-on"
              src={v.img} alt={`${v.marca} ${v.modelo}`} />
            <span className="ap-hero-feature-tag">Destacado</span>
            <div className="ap-hero-feature-media-shade"></div>
          </div>
          <div className="ap-hero-feature-body" key={v.id}>
            <p className="ap-hero-feature-brand">{v.marca} · {v.anio}</p>
            <h3 className="ap-hero-feature-title">{v.modelo}</h3>
            <div className="ap-hero-feature-specs">
              <span>{Icons.gauge({ size: 15 })} {fmtKm(v.km)}</span>
              <span>{Icons.gear({ size: 15 })} {v.traccion}</span>
              <span>{Icons.fuel({ size: 15 })} {v.combustible}</span>
            </div>
            <div className="ap-hero-feature-foot">
              <div>
                <p className="ap-card-price-label">Desde</p>
                <p className="ap-hero-feature-price">{fmtUSD(v.precio)}</p>
              </div>
              <span className="ap-btn ap-btn-primary ap-btn-sm">Ver detalles {Icons.arrowRight({ size: 16 })}</span>
            </div>
            <div className="ap-hero-dots">
              {destacados.map((_, idx) => (
                <button key={idx} className={`ap-hero-dot ${idx === i ? "is-on" : ""}`}
                  onClick={(e) => { e.stopPropagation(); setI(idx); }} aria-label={`Slide ${idx + 1}`}></button>
              ))}
            </div>
          </div>
        </div>
      </div>

      <QuickSearch go={go} />
    </section>
  );
}

function QuickSearch({ go }) {
  const D = window.AP_DATA;
  const marcas = [...new Set(D.VEHICLES.map((v) => v.marca))].sort();
  const tipos = [...new Set(D.VEHICLES.map((v) => v.tipo))];
  const [marca, setMarca] = useState("");
  const [tipo, setTipo] = useState("");
  const [presupuesto, setPresupuesto] = useState("");
  return (
    <div className="ap-wrap">
      <div className="ap-quicksearch">
        <div className="ap-qs-field">
          <label>Marca</label>
          <SearchSelect value={marca} onChange={setMarca} placeholder="Todas las marcas"
            options={[{ value: "", label: "Todas las marcas" }, ...marcas.map((m) => ({ value: m, label: m }))]} />
        </div>
        <div className="ap-qs-field">
          <label>Tipo</label>
          <SearchSelect value={tipo} onChange={setTipo} placeholder="Todos los tipos"
            options={[{ value: "", label: "Todos los tipos" }, ...tipos.map((t) => ({ value: t, label: t }))]} />
        </div>
        <div className="ap-qs-field">
          <label>Presupuesto máx.</label>
          <SearchSelect value={presupuesto} onChange={setPresupuesto} placeholder="Sin límite"
            options={[
              { value: "", label: "Sin límite" },
              { value: "20000", label: "Hasta US$ 20,000" },
              { value: "35000", label: "Hasta US$ 35,000" },
              { value: "50000", label: "Hasta US$ 50,000" },
              { value: "999999", label: "Más de US$ 50,000" },
            ]} />
        </div>
        <Btn variant="primary" size="lg" icon={Icons.search({ size: 18 })}
          onClick={() => go("listing", { marca, tipo, maxPrecio: presupuesto ? +presupuesto : null })}>
          Buscar
        </Btn>
      </div>
    </div>
  );
}

function InventarioReciente({ go }) {
  const D = window.AP_DATA;
  const [tab, setTab] = useState("destacados");
  const tabs = [
    { id: "destacados", label: "Destacados" },
    { id: "nuevos", label: "Nuevos 2026" },
    { id: "ofertas", label: "Mejor precio" },
  ];
  let list = D.VEHICLES;
  if (tab === "destacados") list = D.VEHICLES.filter((v) => v.destacado || v.anio >= 2024);
  if (tab === "nuevos") list = D.VEHICLES.filter((v) => v.condicion === "nuevo");
  if (tab === "ofertas") list = [...D.VEHICLES].sort((a, b) => a.precio - b.precio);
  list = list.slice(0, 8);
  return (
    <section className="ap-section ap-band-alt ap-tex ap-tex-dots">
      <div className="ap-wrap">
        <div className="ap-sechead">
          <div>
            <p className="ap-overline">Inventario</p>
            <h2 className="ap-sectitle">Lo más reciente</h2>
          </div>
          <div className="ap-tabs">
            {tabs.map((t) => (
              <button key={t.id} className={`ap-tab ${tab === t.id ? "is-on" : ""}`} onClick={() => setTab(t.id)}>
                {t.label}
              </button>
            ))}
          </div>
        </div>
        <div className="ap-grid-cards" key={tab}>
          {list.map((v) => <CarCard key={v.id} v={v} onOpen={(x) => go("detail", x)} />)}
        </div>
        <div className="ap-section-foot">
          <Btn variant="outline" size="lg" iconRight={Icons.arrowRight({ size: 18 })} onClick={() => go("listing")}>
            Ver todo el inventario
          </Btn>
        </div>
      </div>
    </section>
  );
}

function MarcasStrip({ go }) {
  const D = window.AP_DATA;
  return (
    <section className="ap-section ap-section-tight">
      <div className="ap-wrap">
        <SectionHead overline="Confianza" title="Marcas más populares" />
        <div className="ap-marcas">
          {D.MARCAS_POPULARES.map((m) => (
            <button key={m} className="ap-marca" onClick={() => go("listing", { marca: m })} title={m}>
              <img src={D.MARCAS_LOGO[m]} alt={m} loading="lazy" />
            </button>
          ))}
        </div>
      </div>
    </section>
  );
}

const TIPO_META = {
  "SUV":         { desc: "Espacio y poder" },
  "Pickup":      { desc: "Para el trabajo" },
  "Sedan":       { desc: "Elegancia y confort" },
  "Camión":      { desc: "Trabajo pesado" },
  "Hatchback":   { desc: "Ágil en ciudad" },
  "Minivan":     { desc: "Para la familia" },
  "Convertible": { desc: "Libertad al máximo" },
};

function Categorias({ go }) {
  const D = window.AP_DATA;
  // Build tipos dynamically from actual inventory — top 4 by count, only those with vehicles
  const tipoCount = {};
  D.VEHICLES.forEach((v) => { tipoCount[v.tipo] = (tipoCount[v.tipo] || 0) + 1; });
  const tipos = Object.entries(tipoCount)
    .filter(([, n]) => n > 0)
    .sort((a, b) => b[1] - a[1])
    .slice(0, 4)
    .map(([tipo]) => ({ tipo, desc: TIPO_META[tipo]?.desc || "" }));

  const count = (t) => tipoCount[t] || 0;
  const cover = (t) => D.VEHICLES.find((v) => v.tipo === t)?.img;
  return (
    <section className="ap-section ap-band-alt ap-tex ap-tex-diag">
      <div className="ap-wrap">
        <SectionHead overline="Explora" title="Busca por tipo de vehículo"
          action="Ver todos" onAction={() => go("listing")} />
        <div className="ap-cats">
          {tipos.map((t) => (
            <button key={t.tipo} className="ap-cat" onClick={() => go("listing", { tipo: t.tipo })}>
              <img className="ap-cat-img" src={cover(t.tipo)} alt={t.tipo} loading="lazy" />
              <div className="ap-cat-shade"></div>
              <div className="ap-cat-body">
                <p className="ap-cat-count">{count(t.tipo)} vehículos</p>
                <h3 className="ap-cat-title">{t.tipo}</h3>
                <p className="ap-cat-desc">{t.desc}</p>
              </div>
              <span className="ap-cat-arrow">{Icons.arrowRight({ size: 18 })}</span>
            </button>
          ))}
        </div>
      </div>
    </section>
  );
}

function FinanciaCTA({ go }) {
  return (
    <section className="ap-section">
      <div className="ap-wrap">
        <div className="ap-finband">
          <div className="ap-finband-glow"></div>
          <div className="ap-finband-copy">
            <p className="ap-overline ap-overline-light">Financiamiento</p>
            <h2 className="ap-finband-title">Estrena hoy. <br />Págalo a tu ritmo.</h2>
            <p className="ap-finband-sub">Calcula tu cuota mensual en segundos y recibe una pre-aprobación con las principales entidades del país. Inicial desde el 20%.</p>
            <div className="ap-hero-actions">
              <Btn variant="primary" size="lg" icon={Icons.bolt({ size: 18 })} onClick={() => go("calculator")}>
                Calcular mi cuota
              </Btn>
              <Btn variant="ghost-light" size="lg" icon={Icons.whatsapp({ size: 18 })}
                href={waLink("Hola, quiero información sobre financiamiento de vehículos.")}>
                Hablar con un asesor
              </Btn>
            </div>
          </div>
          <div className="ap-finband-card">
            <MiniCalc go={go} />
          </div>
        </div>
      </div>
    </section>
  );
}

function MiniCalc({ go }) {
  const [precio, setPrecio] = useState(35000);
  const [inicial, setInicial] = useState(20);
  const meses = 60, tasa = 13.5;
  const financiado = precio * (1 - inicial / 100);
  const r = tasa / 100 / 12;
  const cuota = r === 0 ? financiado / meses : (financiado * r) / (1 - Math.pow(1 + r, -meses));
  return (
    <div className="ap-minicalc">
      <p className="ap-minicalc-label">Simulación rápida</p>
      <div className="ap-minicalc-row">
        <div className="ap-minicalc-field">
          <label>Precio del vehículo</label>
          <span className="ap-minicalc-val">{fmtUSD(precio)}</span>
          <input type="range" min="13000" max="60000" step="1000" value={precio}
            onChange={(e) => setPrecio(+e.target.value)} />
        </div>
      </div>
      <div className="ap-minicalc-row">
        <div className="ap-minicalc-field">
          <label>Inicial · {inicial}%</label>
          <span className="ap-minicalc-val">{fmtUSD(Math.round(precio * inicial / 100))}</span>
          <input type="range" min="20" max="60" step="5" value={inicial}
            onChange={(e) => setInicial(+e.target.value)} />
        </div>
      </div>
      <div className="ap-minicalc-result">
        <div>
          <p className="ap-minicalc-result-label">Cuota mensual estimada</p>
          <p className="ap-minicalc-cuota">{fmtUSD(Math.round(cuota))}<small>/mes</small></p>
          <p className="ap-minicalc-note">{meses} meses · {tasa}% anual aprox.</p>
        </div>
        <button className="ap-minicalc-go" onClick={() => go("calculator")} aria-label="Ver calculadora completa">
          {Icons.arrowRight({ size: 20 })}
        </button>
      </div>
    </div>
  );
}

function PorQue() {
  const items = [
    { icon: Icons.shield({ size: 24 }), title: "Vehículos verificados", desc: "Cada unidad pasa una inspección de 150 puntos antes de entrar a nuestro inventario." },
    { icon: Icons.bolt({ size: 24 }), title: "Financiamiento ágil", desc: "Pre-aprobación con las principales entidades del país en menos de 24 horas." },
    { icon: Icons.tag({ size: 24 }), title: "Precios transparentes", desc: "Lo que ves es lo que pagas. Sin cargos ocultos ni sorpresas al cierre." },
    { icon: Icons.star({ size: 22 }), title: "30 años de experiencia", desc: "Desde 1994 acompañando a miles de familias dominicanas a estrenar vehículo." },
  ];
  return (
    <section className="ap-section ap-band-alt ap-tex ap-tex-dots">
      <div className="ap-wrap">
        <SectionHead overline="Por qué Auto Paniagua" title="La forma confiable de comprar tu vehículo" />
        <div className="ap-features">
          {items.map((it) => (
            <div className="ap-feature" key={it.title}>
              <span className="ap-feature-ico">{it.icon}</span>
              <h3>{it.title}</h3>
              <p>{it.desc}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function CTABand() {
  return (
    <section className="ap-ctaband">
      <div className="ap-wrap ap-ctaband-in">
        <div>
          <h2 className="ap-ctaband-title">¿Listo para estrenar?</h2>
          <p className="ap-ctaband-sub">Escríbenos por WhatsApp y un asesor te ayuda a encontrar tu próximo vehículo hoy mismo.</p>
        </div>
        <Btn variant="wa" size="lg" icon={Icons.whatsapp({ size: 20 })}
          href={waLink("Hola Auto Paniagua, estoy listo para estrenar. ¿Me ayudan?")}>
          Escríbenos por WhatsApp
        </Btn>
      </div>
    </section>
  );
}

function HomeScreen({ go }) {
  return (
    <div className="ap-page">
      <Hero go={go} />
      <InventarioReciente go={go} />
      <MarcasStrip go={go} />
      <Categorias go={go} />
      <FinanciaCTA go={go} />
      <PorQue />
      <CTABand />
    </div>
  );
}

window.HomeScreen = HomeScreen;