/* HOME page — Hero + brief soluciones preview + call to action.
 * Per PDF: HOME contains Header (chrome), Hero photo + claim + bajada, Footer (chrome).
 * We add a slim soluciones preview as a teaser linking to the four product pages.
 */
/* global React, ReactDOM, Chrome, HeroBackground, WaveBg, PRODUCTS */
const { useState: hUseState, useEffect: hUseEffect } = React;

function Hero() {
  return (
    <section className="hero">
      <HeroBackground />
      <div className="hero__inner">
        <div className="hero__grid">
          <div className="hero__head">
            <h1>
              Tecnología<br />
              y ciencia<br />
              conectadas<br />
              para crear <span className="em">valor.</span>
            </h1>
            <p className="hero__sub">
              El futuro de la evaluación económica ya está aquí. Una plataforma para encontrar
              soluciones de utilidad en el desarrollo de tus proyectos — clara, estructurada
              y ágil. Aquí todo está pensado para que tu tiempo sea más productivo y tus
              decisiones más acertadas.
            </p>
            <div className="hero__cta-row">
              <a className="btn btn--primary" href="Contacto.html">
                Solicitar acceso <span className="arrow">→</span>
              </a>
              <a className="btn btn--ghost" href="Soluciones.html">
                Ver soluciones <span className="arrow">↓</span>
              </a>
            </div>
          </div>
          <div aria-hidden="true" />
        </div>

        <div className="hero__marginalia">
          {[
            { k: "Cobertura", n: "100+", l: "Fuentes de datos públicos conectados en un solo lugar." },
            { k: "Experiencia", n: "15+", l: "Años del equipo en economía de la salud y evaluación de tecnologías sanitarias." },
            { k: "Soluciones", n: "4", l: "Áreas de máximo expertise: Health Economics and Market Access; Health Economics and Outcomes Research; Digital Health and Innovation y Health Economics and Policy." },
          ].map((m) => (
            <div key={m.k}>
              <div className="num">{m.n}</div>
              <div className="label">{m.l}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* Solutions teaser — index card per product, no visualisations, links to detail */
function SolucionesPreview() {
  return (
    <section className="section page" id="soluciones">
      <div className="section-head">
        <h2>
          Cuatro instrumentos. <span className="serif">Un mismo</span> <span className="accent">método</span>.
        </h2>
        <div className="aside">
          Cada aplicación resuelve un problema concreto del día a día de los diferentes equipos: HEOR,
          Market Access, Estrategia de Precios y Relaciones Institucionales.
        </div>
      </div>
      <div className="sol-preview">
        {PRODUCTS.map((p) => (
          <a key={p.id} className="sol-preview__card" href={p.href}>
            <div className="sol-preview__logo">
              <img src={p.logo} alt={p.name} />
            </div>
            <span className="sol-preview__more">
              Ver solución <span className="arrow">→</span>
            </span>
          </a>
        ))}
      </div>
    </section>
  );
}

/* Origen mini-section — links to Theorema4H page */
function OrigenTeaser() {
  return (
    <section className="section section--has-plate">
      <div className="origin origin--plate">
        <div className="page">
          <div className="origin__grid">
            <article className="origin__card origin__card--dark">
              <WaveBg color="110, 201, 214" density={1.0} dim={0.55} />
              <div className="origin__card-inner">
                <div className="title"><b>Theorema4H</b></div>
                <p className="body">
                  Consultora especializada en economía de la salud y evaluación de tecnologías
                  sanitarias en España y Europa. Equipo con más de
                  <span className="accent"> 15 años de experiencia</span>.
                </p>
                <div className="foot">
                  <a href="Theorema4H.html">Conocer Theorema4H →</a>
                </div>
              </div>
            </article>

            <div className="origin__pivot">
              <div className="gear" />
            </div>

            <article className="origin__card origin__card--teal">
              <WaveBg color="255, 255, 255" density={0.7} dim={0.10} />
              <div className="origin__card-inner">
                <div className="title"><b>Insight4H</b></div>
                <p className="body">
                  Theorema4H crea su plataforma digital para el desarrollo de herramientas
                  tecnológicas de utilidad para todos los agentes del sector sanitario.
                </p>
                <div className="foot">
                  <a href="Contacto.html">Solicitar acceso →</a>
                </div>
              </div>
            </article>
          </div>
        </div>
      </div>
    </section>
  );
}

function App() {
  return (
    <Chrome active={null} transparent={true}>
      <Hero />
      <OrigenTeaser />
      <SolucionesPreview />
    </Chrome>
  );
}

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