/* SOLUCIONES page — overview of the 4 products with vertical editorial list
 * and side visualization, plus a strong CTA.
 */
/* global React, ReactDOM, Chrome, PRODUCTS, ProductVisual */

function PageHero() {
  return (
    <section className="page-hero page">
      <div className="page-hero__inner">
        <h1>
          Cuatro <span className="accent-teal serif">instrumentos</span>.<br />
          Un mismo método.
        </h1>
        <p className="page-hero__sub">
          Cuatro aplicaciones independientes, conectadas por la misma metodología.
          Cada una resuelve un problema concreto del día a día de los diferentes equipos: HEOR,
          Market Access, Estrategia de Precios y Relaciones Institucionales.
        </p>
        <nav className="page-hero__index">
          {PRODUCTS.map((p) => (
            <a key={p.id} href={"#" + p.id} className="page-hero__index-row">
              <span style={{ color: p.color }}>{p.name}</span>
              <span className="mono arrow">↓</span>
            </a>
          ))}
        </nav>
      </div>
    </section>
  );
}

function Product({ p }) {
  return (
    <article id={p.id} className="product product--logo">
      <div className="product__body">
        <div className="product__logo">
          <img src={p.logo} alt={p.name} />
        </div>

        <p className="product__desc">{p.desc}</p>

        <div className="product__features">
          {p.features.map((f, i) => (
            <div key={i} className="feat">
              <span className="k">{f.k}</span>
              <span>{f.v}</span>
            </div>
          ))}
        </div>

        <div className="product__cta">
          <a className="btn" href={p.href} style={{ background: p.color, color: "#fff" }}>
            Ver solución <span className="arrow">→</span>
          </a>
          <span className="status">
            <span className="led" style={{ background: p.color, boxShadow: "0 0 0 3px color-mix(in oklch, " + p.color + " 30%, transparent)" }} />
            {p.status}
          </span>
        </div>
      </div>

      <div className="product__visual">
        <ProductVisual kind={p.visual} color={p.color} />
      </div>
    </article>
  );
}

function Products() {
  return (
    <section className="section page">
      <div style={{ marginTop: 24 }}>
        {PRODUCTS.map((p) => <Product key={p.id} p={p} />)}
      </div>
    </section>
  );
}

function CTA() {
  return (
    <section className="cta page">
      <div className="cta__inner">
        <div className="cta__head">
          <h2 style={{ marginTop: 16 }}>
            ¿Listo<span className="serif"> para </span>tomar<br />
            decisiones <span className="accent">más rápidas</span><br />
            y acertadas<span className="serif">?</span>
          </h2>
        </div>
        <div className="cta__aside">
          Solicita acceso a la solución que necesitas y descubre cómo nuestras herramientas
          transforman datos complejos en respuestas claras.
          <div className="btn-row">
            <a className="btn btn--primary" href="Contacto.html">
              Solicitar acceso <span className="arrow">→</span>
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}

function App() {
  return (
    <Chrome active="soluciones" transparent={false}>
      <PageHero />
      <Products />
      <CTA />
    </Chrome>
  );
}

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