/* COST4H page — Full product page per PDF section 4:
 * Header (Solicitar acceso + Iniciar sesión)
 * Body: Introducción → Metodología → ¿Para quién? → ¿Por qué? → ¿Qué incluye? → Planes
 */
/* global React, ReactDOM, Chrome, WaveBg, ProductVisual */

const COST_BENEFITS = [
  { icon: "Reloj", title: "Ahorra tiempo y mejora tu autonomía", desc: "Consulta interactiva e inmediata; acceso directo 24/7." },
  { icon: "Planificacion", title: "Facilita la planificación", desc: "Recursos y costes ordenados por categoría." },
  { icon: "Acceso", title: "Mejora el acceso regional", desc: "Desglose por comunidades autónomas." },
  { icon: "Resultados", title: "Optimiza recursos y resultados", desc: "Decisiones más rápidas y acertadas." },
  { icon: "Mundo", title: "Acceso al dato más reciente", desc: "Con referencia siempre a la fuente original." },
  { icon: "Trazabilidad", title: "Transparencia y trazabilidad", desc: "Cada cifra documentada y verificable." },
  { icon: "Metodo", title: "Rigor metodológico y científico", desc: "Expertise del equipo de Theorema4H; uso de guías de buenas prácticas." },
  { icon: "Ordenador", title: "Visual, interactivo y fácil de usar", desc: "Diseño pensado para profesionales del sector." },
];

const COST_INCLUDES = [
  "Tarifas sanitarias: visitas médicas, procedimientos diagnósticos, análisis clínicos, etc.",
  "Costes directos no sanitarios.",
  "Costes indirectos: parámetros necesarios para su cálculo como salario por hora y anual por categorías.",
  "Costes “a la carta” (peticiones ad hoc).",
  "Desglose por comunidades autónomas.",
  "Datos de costes de los 5EU (próximamente).",
  "Panel de control interactivo.",
  "Calculadora de costes en tiempo real.",
  "Recursos de apoyo metodológico — fuentes e información para que los datos sean transparentes y trazables.",
];

const PLAN_BASIC = [
  "Datos: media, desviación estándar, mediana, rango intercuartílico; nivel nacional y regional.",
  "Filtros: por tipo de ítem.",
  "Visualización: en tabla.",
  "Descarga en Excel / PDF.",
  "Ítems básicos: tarifas de costes directos sanitarios.",
];
const PLAN_PREMIUM = [
  "Datos: media, desviación estándar, mediana, rango intercuartílico; nivel nacional y regional.",
  "Filtros: por comunidad autónoma y tipo de ítem.",
  "Visualización: en tabla y gráficos.",
  "Descarga en Excel / PDF.",
  "Formulario de costes “a la carta”: hasta 20 ítems y 5 CCAA por año.",
  "Ítems premium: costes directos no sanitarios e indirectos.",
  "Calculadora simple de coste total.",
];

/* ----- Product hero ----- */
function PageHero() {
  return (
    <section className="product-hero product-hero--cost">
      <div className="page product-hero__inner">
        <div className="product-hero__left">
          <div className="product-hero__logo">
            <img src="assets/logos/logo-Cost.webp" alt="Cost4H — powered by Theorema4H" />
          </div>
          <h1>
            Base de datos<br />
            interactiva de <span className="accent-cost">tarifas y costes</span>.
          </h1>
          <p className="product-hero__sub">
            Fuentes primarias públicas, actualizados y desglosados por comunidades
            autónomas, tipo de coste y tipo de recurso.
          </p>
          <div className="product-hero__cta">
            <a className="btn btn--cost" href="Contacto.html?solucion=cost4h">
              Solicitar acceso <span className="arrow">→</span>
            </a>
            <a className="btn btn--outline" href="https://cost4h.insight4h.com" target="_blank" rel="noreferrer">
              Iniciar sesión <span className="arrow">↗</span>
            </a>
            <a className="btn btn--outline" href="Contacto.html?solucion=cost4h&tipo=demo">
              Solicitar demo <span className="arrow">→</span>
            </a>
            <a className="btn btn--outline" href="assets/Diptico_Cost4H.pdf" target="_blank" rel="noreferrer" download>
              Descargar díptico <span className="arrow">↓</span>
            </a>
          </div>
        </div>
        <div className="product-hero__right">
          <div className="product-hero__viz">
            <ProductVisual kind="table" color="var(--c-cost)" />
          </div>
        </div>
      </div>
    </section>
  );
}

/* ----- Intro ----- */
function Intro() {
  return (
    <section className="section page" id="intro">
      <div className="section-head">
        <h2>
          La primera <span className="accent-cost">solución digital</span> de Theorema4H.
        </h2>
        <div className="aside">
          Una herramienta de consulta interactiva de tarifas y de ayuda para el
          cálculo de costes.
        </div>
      </div>

      <div className="prose-2col">
        <p>
          Theorema4H lanza su primera solución digital, una herramienta de consulta
          interactiva de tarifas y costes (sanitarios, no sanitarios e indirectos),
          orientada a facilitar el desarrollo de estudios de economía de la salud y
          evaluación de tecnologías sanitarias; diseñar estrategias de acceso regional;
          comprender la realidad de los sistemas regionales de salud y apoyar la toma
          de decisiones basada en criterios de eficiencia.
        </p>
        <p>
          <b>Cost4H®</b> es una base de datos interactiva de tarifas y precios públicos
          sanitarios, costes directos no sanitarios y costes indirectos, de gran utilidad en el ámbito de la economía de la
          salud, el acceso al mercado y la investigación de resultados en salud. Esta
          innovadora herramienta integra datos económicos, originales y actualizados,
          provenientes de fuentes primarias públicas a nivel nacional y de las comunidades
          autónomas.
        </p>
      </div>

      <div className="cost-data">
        <p className="cost-data__lead">
          Tarifas, precios públicos, costes directos no sanitarios y parámetros para la
          estimación de costes indirectos. Fuentes primarias oficiales, actualizadas y
          desglosadas por comunidades autónomas, tipo de coste y recurso.
        </p>
        <figure className="cost-data__fig">
          <img src="assets/pantallas.webp" alt="Imágenes de la base de datos de Cost4H" />
        </figure>
      </div>
    </section>
  );
}

/* ----- ¿Para quién? ----- */
function ParaQuien() {
  return (
    <section className="section section--has-plate section--all-dark" id="para-quien">
      <div className="origin origin--plate" style={{ padding: "clamp(64px, 8vw, 100px) 0" }}>
        <div className="page">
          <div className="section-head section-head--invert">
            <h2>
              El aliado perfecto <span className="accent-cost">para</span> equipos técnicos y decisores.
            </h2>
            <div className="aside">
              Cost4H apoya el día a día de los equipos responsables de generar evidencia en relación con el lanzamiento de nuevos productos sanitarios, a nivel nacional y regional.
            </div>
          </div>

          <div className="audience-grid">
            {[
              { name: "Investigación de Resultados en Salud", icon: "Resultados" },
              { name: "Estrategia de Precios", icon: "Planificacion" },
              { name: "Acceso al mercado y RWE", icon: "Acceso-mercado" },
              { name: "Relaciones Institucionales", icon: "Politica" },
              { name: "Agencias de evaluación", icon: "Evaluacion" },
              { name: "Profesionales sanitarios y Sociedades Científicas", icon: "Experiencia" },
            ].map((a) => (
              <div key={a.name} className="audience-card">
                <div className="ico"><img src={"assets/iconos/" + a.icon + ".webp"} alt="" /></div>
                <h4>{a.name}</h4>
              </div>
            ))}
          </div>

          <p className="audience-foot">
            Cost4H® es el aliado perfecto para los equipos de Investigación de Resultados en Salud,
            Estrategia de Precios, Acceso al Mercado y Relaciones Institucionales de las compañías de
            biotecnología y tecnología médica. Asimismo, es una herramienta apropiada para dar soporte
            al personal técnico de las agencias de evaluación y a cualquier profesional sanitario,
            y/o Sociedad Científica, con interés en materia de economía de la salud, evaluación económica y gestión sanitaria.
          </p>
        </div>
      </div>
    </section>
  );
}

/* ----- ¿Por qué? ----- */
function PorQue() {
  return (
    <section className="section page" id="por-que">
      <div className="section-head">
        <h2>
          <span className="accent-cost">Ocho razones</span> para integrar <span className="accent-cost">Cost4H</span> en tu flujo.
        </h2>
      </div>

      <div className="benefits-grid">
        {COST_BENEFITS.map((b, i) => (
          <div key={b.icon} className="benefit-card">
            <div className="benefit-icon">
              <img src={"assets/iconos/" + b.icon + ".webp"} alt="" />
            </div>
            <h4>{b.title}</h4>
            <p>{b.desc}</p>
          </div>
        ))}
      </div>
    </section>
  );
}

/* ----- ¿Qué incluye? ----- */
function QueIncluye() {
  return (
    <section className="section page" id="que-incluye">
      <div className="section-head">
        <h2>
          Datos, filtros <span className="serif">y</span> herramientas <span className="accent-cost">listos</span> para usar.
        </h2>
        <div className="aside">
          Todo lo necesario para sacar conclusiones rápidas y bien fundamentadas.
        </div>
      </div>

      <div className="includes-grid">
        <ul className="includes-list">
          {COST_INCLUDES.map((i, idx) => (
            <li key={idx}>
              <span className="check">✓</span>
              <span>{i}</span>
            </li>
          ))}
        </ul>
        <figure className="includes-figure">
          <img src="assets/pantallas.webp" alt="Pantallas de Cost4H" />
        </figure>
      </div>
    </section>
  );
}

/* ----- Planes ----- */
function Planes() {
  return (
    <section className="section section--has-plate section--all-dark" id="planes">
      <div className="origin origin--plate" style={{ padding: "clamp(64px, 8vw, 100px) 0" }}>
        <div className="page">
          <div className="section-head section-head--invert">
            <h2>
              Dos planes. Una misma <span className="accent">aplicación</span>.
            </h2>
            <div className="aside">
              Elige el plan que mejor encaja con el alcance de tu proyecto.
            </div>
          </div>

          <div className="plans">
            <article className="plan-card">
              <header>
                <h3>Basic</h3>
              </header>
              <ul>
                {PLAN_BASIC.map((p, i) => (
                  <li key={i}><span className="check">✓</span>{p}</li>
                ))}
              </ul>
              <a className="btn btn--outline btn--outline-light" href="Contacto.html?plan=basic">
                Solicitar plan Basic <span className="arrow">→</span>
              </a>
            </article>

            <article className="plan-card plan-card--featured">
              <header>
                <h3>Premium</h3>
                <span className="plan-badge">Recomendado</span>
              </header>
              <ul>
                {PLAN_PREMIUM.map((p, i) => (
                  <li key={i}><span className="check">✓</span>{p}</li>
                ))}
              </ul>
              <a className="btn btn--cost" href="Contacto.html?plan=premium">
                Solicitar plan Premium <span className="arrow">→</span>
              </a>
            </article>
          </div>
        </div>
      </div>
    </section>
  );
}

function App() {
  return (
    <Chrome active="cost4h" transparent={false}>
      <PageHero />
      <Intro />
      <ParaQuien />
      <PorQue />
      <QueIncluye />
      <Planes />
    </Chrome>
  );
}

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