/* Home v2 — "Usted tiene problemas, nosotros soluciones" como columna vertebral */

const PAIRS = [
  { area: "Finanzas", p: "No sabe con certeza cuánto efectivo tendrá el próximo mes.", s: "Proyecciones de caja que se actualizan solas con sus cobros y pagos reales.", r: "13 sem.", rl: "de flujo de caja proyectado" },
  { area: "Finanzas", p: "El cierre de mes depende de hojas de Excel y trabajo manual.", s: "Conectamos contabilidad, bancos y ERP, y automatizamos las conciliaciones.", r: "–70%", rl: "tiempo de cierre" },
  { area: "Operaciones", p: "No sabe dónde está su inventario ni qué pedidos están en riesgo.", s: "Un tablero en tiempo real de inventario, pedidos y proveedores.", r: "1", rl: "vista de toda la operación" },
  { area: "Operaciones", p: "Compra de más o se queda sin producto porque la demanda es impredecible.", s: "Pronósticos de demanda que le dicen cuánto comprar y cuándo.", r: "–25%", rl: "inventario inmovilizado" },
  { area: "Comercial", p: "Sus vendedores pasan más tiempo llenando el CRM que vendiendo.", s: "Automatizamos el registro de llamadas, correos y oportunidades.", r: "+6 h", rl: "de venta por vendedor cada semana" },
  { area: "Comercial", p: "Las cotizaciones tardan días en salir y se pierden negocios.", s: "Cotizaciones en minutos, con precios y márgenes siempre al día.", r: "15 min", rl: "por cotización" },
  { area: "Dirección", p: "Cada área reporta cifras distintas y las decisiones se toman a ciegas.", s: "Una sola fuente de información y un tablero de gerencia en el que todos confían.", r: "1", rl: "versión de la verdad" },
  { area: "Dirección", p: "Hay demasiadas iniciativas compitiendo y no sabe cuál priorizar.", s: "Evaluamos cada iniciativa por su retorno y le decimos por dónde empezar.", r: "48 h", rl: "para tener un plan" },
];
const AREAS = ["Finanzas", "Operaciones", "Comercial", "Dirección"];

function ProblemSolution() {
  const [i, setI] = useState(0);
  useEffect(() => { const t = setTimeout(() => setI((i + 1) % PAIRS.length), 6700); return () => clearTimeout(t); }, [i]);
  const c = PAIRS[i];
  return (
    <div className="ps" key={i}>
      <div className="ps-card"><span className="ps-lbl">Su problema · {c.area}</span><p className="ps-txt">{c.p}</p></div>
      <div className="ps-arrow"><Icon.arrow /></div>
      <div className="ps-card sol">
        <span className="ps-lbl">Nuestra solución</span>
        <p className="ps-txt">{c.s}</p>
        <div className="ps-res"><b>{c.r}</b><span>{c.rl}</span></div>
      </div>
      <div className="ps-dots">{PAIRS.map((_, k) => <button key={k} className={k === i ? "on" : ""} onClick={() => setI(k)} aria-label={"Ejemplo " + (k + 1)}></button>)}</div>
    </div>
  );
}

function HeroV2() {
  return (
    <section className="hero h2-hero" id="top" data-screen-label="Hero">
      <div className="hero-bg"></div>
      <div className="hero-grid-overlay"></div>
      <div className="wrap hero-inner">
        <div className="hero-copy">
          <span className="kicker reveal in">Tecnología aplicada a su negocio</span>
          <h1 className="reveal in d1">Usted tiene problemas, <span className="flow">nosotros soluciones</span>.</h1>
          <p className="hero-sub reveal in d2">Usted nos cuenta qué le está costando tiempo o dinero; nosotros lo resolvemos y le mostramos el resultado cada mes.</p>
          <div className="hero-actions reveal in d3">
            <a className="btn btn-primary btn-lg" href="Solicitar diagnóstico.html">Solicitar diagnóstico <Icon.arrow /></a>
            <a className="btn btn-ghost btn-lg" href="Cómo funciona.html">Ver cómo funciona</a>
          </div>
        </div>
        <div className="hero-stage reveal in d2"><ProblemSolution /></div>
      </div>
    </section>
  );
}

function Problems() {
  const [area, setArea] = useState("Finanzas");
  const list = PAIRS.filter((x) => x.area === area);
  return (
    <section className="section" id="problemas" data-screen-label="Problemas">
      <div className="wrap">
        <div className="section-head reveal">
          <span className="kicker">Lo que resolvemos</span>
          <h2>¿Le suena familiar?</h2>
          <p>Estos son los problemas que más nos traen nuestros clientes. Seguramente el suyo está aquí, o se parece.</p>
        </div>
        <div className="pb-tabs reveal">{AREAS.map((a) => <button key={a} className={a === area ? "on" : ""} onClick={() => setArea(a)}>{a}</button>)}</div>
        <div className="pb-colhead"><span>Usted tiene</span><span></span><span>Nosotros hacemos</span></div>
        <div className="pb-list">
          {list.map((x) => (
            <div className="pb-row" key={x.p}>
              <p className="p">{x.p}</p>
              <span className="a"><Icon.arrow /></span>
              <p className="s">{x.s}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

const HOW = [
  { t: "Cuéntenos qué le duele", d: "Una conversación de 30 minutos. Sin formularios técnicos: nos explica el problema como se lo explicaría a un colega." },
  { t: "Priorizamos lo que más retorna", d: "Le decimos qué resolver primero, cuánto tiempo toma y qué resultado esperar." },
  { t: "Resolvemos y medimos", d: "Entregamos mejoras cada mes. Usted ve en su portal el tiempo ahorrado y el dinero que se recuperó." },
];
function HowV2() {
  return (
    <section className="section bg-wash" id="como" data-screen-label="Cómo trabajamos">
      <div className="wrap">
        <div className="section-head reveal">
          <span className="kicker">Cómo trabajamos</span>
          <h2>Tres pasos. Sin contratar a nadie.</h2>
        </div>
        <div className="h2-steps">
          {HOW.map((s, i) => (
            <div className={"h2-step reveal d" + (i + 1)} key={i}>
              <span className="n">0{i + 1}</span><h3>{s.t}</h3><p>{s.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

const CASES = [
  { who: "Distribuidora · Finanzas", t: "Cierre contable que dependía de 14 hojas de Excel.", a: "12 días", b: "3 días" },
  { who: "Manufactura · Operaciones", t: "Órdenes de compra digitadas a mano desde correos.", a: "6 h/día", b: "20 min/día" },
  { who: "Retail · Comercial", t: "Reporte semanal de ventas armado por dos analistas.", a: "2 días", b: "Automático" },
];
function Cases() {
  return (
    <section className="section bg-ink on-dark" id="resultados" data-screen-label="Resultados">
      <div className="wrap">
        <div className="section-head reveal">
          <span className="kicker on-dark">Resultados</span>
          <h2>Problemas reales, resueltos.</h2>
        </div>
        <div className="cases">
          {CASES.map((c, i) => (
            <article className={"case reveal d" + (i + 1)} key={i}>
              <span className="who">{c.who}</span>
              <h3>{c.t}</h3>
              <div className="ba"><div><small>Antes</small><b>{c.a}</b></div><div><small>Después</small><b>{c.b}</b></div></div>
            </article>
          ))}
        </div>
        <div className="h2-stats reveal">
          <div><b>95%</b>de clientes satisfechos</div>
          <div><b>48 h</b>para empezar a trabajar</div>
        </div>
      </div>
    </section>
  );
}

const WHY = [
  { i: <Icon.scale />, t: "Precio fijo cada mes", d: "Usted paga solo por la capacidad que contrata. Sabe cuánto paga desde el primer día." },
  { i: <Icon.clock />, t: "Empezamos en 48 horas", d: "Sin semanas de propuestas ni contratos eternos." },
  { i: <Icon.list />, t: "Usted decide las prioridades", d: "¿Cambió lo urgente? Cambiamos con usted, sin renegociar." },
  { i: <Icon.eye />, t: "Resultados a la vista", d: "Un portal muestra qué se entregó, cuánto tiempo ahorró y cuánto dinero generó." },
];
function WhyV2() {
  return (
    <section className="section" id="porque" data-screen-label="Por qué Bacatá">
      <div className="wrap">
        <div className="section-head center reveal">
          <span className="kicker">Por qué Bacatá</span>
          <h2>Los mejores especialistas, disponibles para usted.</h2>
        </div>
        <div className="why">
          {WHY.map((w, i) => (
            <div className={"why-item reveal d" + (i + 1)} key={i}><span className="i">{w.i}</span><h3>{w.t}</h3><p>{w.d}</p></div>
          ))}
        </div>
        <p className="why-note reveal">Trabajamos con las herramientas que su empresa ya usa: su ERP, su CRM, Excel y su nube.</p>
      </div>
    </section>
  );
}

function FinalV2() {
  return (
    <section className="final" id="contacto" data-screen-label="CTA final">
      <FlowWave variant="line" style={{ position: "absolute", inset: 0, color: "#fff", opacity: .35, zIndex: 1 }} />
      <div className="wrap final-inner reveal">
        <h2>Cuéntenos su problema.</h2>
        <p>En 48 horas le decimos cómo lo resolvemos, cuánto toma y qué resultado puede esperar.</p>
        <div className="hero-actions">
          <a className="btn btn-primary btn-lg" href="Solicitar diagnóstico.html">Solicitar diagnóstico <Icon.arrow /></a>
          <a className="btn btn-light btn-lg" href="Ver planes disponibles.html">Ver planes</a>
        </div>
      </div>
      <FlowWave variant="divider" className="wave-deco flow-divider" style={{ color: "#191A1C" }} />
    </section>
  );
}

function FooterV2() {
  return (
    <footer className="footer">
      <div className="wrap">
        <div className="footer-top">
          <div className="footer-brand">
            <img src="assets/logo-white.png" alt="Bacatá Dynamics" />
            <p>Usted tiene problemas, nosotros soluciones. Tecnología aplicada a su negocio, mes a mes.</p>
          </div>
          <div><h5>Soluciones</h5><ul><li><a href="#problemas">Finanzas</a></li><li><a href="#problemas">Operaciones</a></li><li><a href="#problemas">Comercial</a></li><li><a href="#problemas">Dirección</a></li></ul></div>
          <div><h5>Bacatá</h5><ul><li><a href="#como">Cómo trabajamos</a></li><li><a href="#resultados">Resultados</a></li><li><a href="Ver planes disponibles.html">Planes</a></li></ul></div>
          <div><h5>Empresa</h5><ul><li><a href="Quiénes somos.html">¿Quiénes somos nosotros?</a></li><li><a href="Política de privacidad.html">Política de privacidad</a></li><li><a href="#contacto">Contacto</a></li><li><a href="#">Carreras</a></li></ul></div>
        </div>
        <div className="footer-bot"><span>© 2026 Bacatá Dynamics. Todos los derechos reservados.</span><span>Bogotá · Remoto LATAM</span></div>
      </div>
    </footer>
  );
}

function HomeV2() {
  useReveal(0);
  return (
    <React.Fragment>
      <Nav />
      <main><HeroV2 /><Problems /><HowV2 /><Cases /><WhyV2 /><FinalV2 /></main>
      <FooterV2 />
    </React.Fragment>
  );
}
ReactDOM.createRoot(document.getElementById("root")).render(<HomeV2 />);