/* THEOREMA4H page — 4-section scroll:
 * 2.1 Quiénes somos (origen Theorema↔Insight4H)
 * 2.2 Soluciones en el ámbito de (4 iconos)
 * 2.3 Para el acceso a la innovación de (4 iconos)
 * 2.4 Equipo
 */
/* global React, ReactDOM, Chrome, WaveBg, AMBITOS, INNOVACION */

function PageHero() {
  return (
    <section className="page-hero page">
      <div className="page-hero__inner">
        <h1>
          De la consultoría <span className="serif">a la</span><br />
          <span className="accent-teal serif">plataforma digital</span>.
        </h1>
        <p className="page-hero__sub">
          Quiénes somos, qué hacemos y para qué sirven las soluciones que entregamos.
          Cuatro apartados — léelos como un único scroll.
        </p>
        <nav className="page-hero__index">
          {[
            ["Quiénes somos", "#quienes-somos"],
            ["Soluciones en el ámbito", "#ambito"],
            ["Para el acceso a la innovación", "#innovacion"],
            ["Equipo", "#equipo"],
          ].map(([l, h]) => (
            <a key={h} href={h} className="page-hero__index-row">
              <span>{l}</span>
              <span className="mono arrow">↓</span>
            </a>
          ))}
        </nav>
      </div>
    </section>
  );
}

/* 2.1 — Quiénes somos */
function QuienesSomos() {
  return (
    <section id="quienes-somos" className="section section--has-plate">
      <div className="page">
        <div className="section-head">
          <h2>
            Theorema4H <span className="serif" style={{ color: "var(--c-theorema)" }}>crea</span> Insight4H.
          </h2>
          <div className="aside">
            La consultora y su plataforma digital — origen, propósito y método compartidos.
          </div>
        </div>
      </div>

      <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} />
              <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 para empresas biotecnológicas. Su equipo, con más de
                  <span className="accent"> 15 años de experiencia</span>, genera valor transformando
                  conocimientos en resultados de salud y bienestar.
                </p>
                <div className="foot">
                  <a href="https://theorema4h.com" target="_blank" rel="noreferrer">theorema4h.com →</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. El objetivo es ofrecer
                  aplicaciones centradas en evaluación de tecnologías sanitarias, acceso al mercado,
                  terapias digitales y experiencia reportada por el paciente.
                </p>
                <div className="foot">
                  <a href="Soluciones.html">Ver soluciones →</a>
                </div>
              </div>
            </article>
          </div>
        </div>
      </div>
    </section>
  );
}

function IconsBlock({ items }) {
  return (
    <div className="icons-block">
      <div className="icons">
        {items.map((it) => (
          <div key={it.icon} className="icons__cell">
            <div className="iconwrap">
              <img src={"assets/iconos/" + it.icon + ".webp"} alt="" />
            </div>
            <div className="name">{it.name}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

/* 2.2 + 2.3 — Soluciones en el ámbito de / Para el acceso a la innovación de */
function Ambitos() {
  return (
    <section id="ambito" className="section page">
      <div className="section-head">
        <h2>
          Cuatro <span className="accent">ámbitos</span> de actuación.
        </h2>
        <div className="aside">
          Las aplicaciones de la plataforma se diseñan para cubrir estos cuatro ámbitos.
        </div>
      </div>
      <IconsBlock items={AMBITOS} />
    </section>
  );
}

function Innovacion() {
  return (
    <section id="innovacion" className="section page">
      <div className="section-head">
        <h2>
          Cuatro tipos de <span className="accent">innovación</span>.
        </h2>
        <div className="aside">
          Apoyamos el acceso a la innovación en cuatro categorías distintas de tecnología sanitaria.
        </div>
      </div>
      <IconsBlock caption="B — Para el acceso a la innovación de" items={INNOVACION} prefix="B" />
    </section>
  );
}

/* 2.4 — Equipo */
function Equipo() {
  return (
    <section id="equipo" className="section section--has-plate section--all-dark">
      <div className="equipo equipo--plate">
        <div className="page">
          <div className="section-head section-head--invert">
            <h2>
              Diseñado, gestionado <span className="serif">y</span> revisado por <span className="accent">personas</span> que han hecho el trabajo.
            </h2>
            <div className="aside">
              Más de 15 años de experiencia en evaluación económica e investigación de resultados en salud.
            </div>
          </div>

          <div className="equipo__grid">
            <div className="equipo__text">
              <p className="body">
                Nuestro equipo, compuesto por profesionales con más de 15 años de experiencia en
                el ámbito de la evaluación económica, investigación en resultados de salud y
                economía de la salud, se encarga de forma directa de diseñar, gestionar y revisar
                cada una de las soluciones que ofrece la plataforma de Insight4H.
              </p>
              <p className="body" style={{ marginTop: 20 }}>
                En base a las necesidades detectadas durante el desempeño de nuestro trabajo, y
                también por peticiones que nos llegan por parte de diferentes stakeholders,
                procedemos a analizar las herramientas que podrían dar respuesta a estas demandas
                y desarrollar soluciones prácticas, cuyo fin último consiste en ayudar a superar
                las barreras existentes para que la innovación llegue a los pacientes.
              </p>
              <div className="quote-author" style={{ marginTop: 28 }}>— Equipo Theorema4H · Insight4H</div>
            </div>

            <figure className="equipo__figure">
              <div className="tag">
                <span>Equipo</span>
                <span>Theorema4H · Madrid</span>
              </div>
              <img
                src="https://theorema4h.com/wp-content/uploads/2025/06/equipo_especialistas-1870x770.webp"
                alt="Equipo Theorema4H"
              />
            </figure>
          </div>
        </div>
      </div>
    </section>
  );
}

function App() {
  return (
    <Chrome active="theorema" transparent={false}>
      <PageHero />
      <QuienesSomos />
      <Ambitos />
      <Innovacion />
      <Equipo />
    </Chrome>
  );
}

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