/* Shared content data: products, icon sets, visualisations. */
/* global React */

const AMBITOS = [
  { icon: "Evaluacion", name: "Evaluación de tecnologías sanitarias" },
  { icon: "Acceso-mercado", name: "Acceso al mercado" },
  { icon: "Politica", name: "Política farmacéutica y gestión sanitaria" },
  { icon: "Experiencia", name: "Experiencia del paciente" },
];
const INNOVACION = [
  { icon: "Medicamentos", name: "Medicamentos" },
  { icon: "Dispositivos", name: "Dispositivos médicos" },
  { icon: "Terapias", name: "Terapias digitales" },
  { icon: "Suplementos", name: "Suplementos nutricionales" },
];

const PRODUCTS = [
  {
    id: "cost4h",
    num: "01",
    name: "Cost4H",
    logo: "assets/logos/logo-Cost.webp",
    color: "var(--c-cost)",
    href: "Cost4H.html",
    tagline: "Base de datos interactiva de tarifas y costes.",
    desc: "Información sobre tarifas y costes procedentes de fuentes oficiales, actualizados y desglosados por comunidades autónomas, tipo de coste y tipo de recurso.",
    features: [
      { k: "Datos", v: "Sanitarios, no sanitarios e indirectos. Fuentes primarias públicas." },
      { k: "Cobertura", v: "17 CCAA · 5EU próximamente · datos originales y actualizados." },
      { k: "Formatos", v: "Tabla y gráficos · descarga Excel / PDF · calculadora en tiempo real." },
    ],
    status: "Disponible",
    visual: "table",
  },
  {
    id: "market4h",
    num: "02",
    name: "Market4H",
    logo: "assets/logos/Logo-Market.webp",
    color: "var(--c-market)",
    href: "Soluciones.html#market4h",
    tagline: "Ensayos clínicos y análisis de mercado.",
    desc: "Información detallada sobre ensayos clínicos y análisis de situación y mercado desde la FDA hasta la EMA y a nivel de cada país.",
    features: [
      { k: "Ámbito", v: "FDA · EMA · agencias nacionales europeas." },
      { k: "Valor añadido", v: "Visión estratégica; análisis de competidores; decisión PICOs; planificación de tiempos y necesidades de lanzamientos." },
      { k: "Salida", v: "Análisis de mercado por área terapéutica, principio activo y geografía." },
    ],
    status: "Próximamente",
    visual: "bars",
  },
  {
    id: "social4h",
    num: "03",
    name: "Social4H",
    logo: "assets/logos/Logo-Social.webp",
    color: "var(--c-social)",
    href: "Soluciones.html#social4h",
    tagline: "Datos reportados por el paciente.",
    desc: "El reglamento HTA plantea la necesidad de incorporar a los pacientes en los procesos de evaluación y toma de decisiones. Social4H recoge información reportada por los pacientes sobre su experiencia con el SNS, los tratamientos, la familia y la sociedad.",
    features: [
      { k: "Métricas", v: "PROs · PREMs · PROMs · experiencia con SNS, tratamientos y entorno." },
      { k: "Método", v: "Entrevistas cualitativas; inferencia causal." },
      { k: "Aplicación", v: "Apoyo a decisiones de acceso, financiación y posicionamiento terapéutico." },
    ],
    status: "Próximamente",
    visual: "persons",
  },
  {
    id: "digital4h",
    num: "04",
    name: "Digital4H",
    logo: "assets/logos/Logo-Digital.webp",
    color: "var(--c-digital)",
    href: "Soluciones.html#digital4h",
    tagline: "Biblioteca de terapias digitales en Europa.",
    desc: "Digital4H es una biblioteca virtual, inteligente e interactiva, sobre regulación, evaluación y financiación de terapias digitales en Europa.",
    features: [
      { k: "Regulación", v: "Estado por país europeo · marcos vigentes y en desarrollo." },
      { k: "Evaluación", v: "Criterios HTA específicos para terapias digitales." },
      { k: "Financiación", v: "Mecanismos de reembolso y casos de éxito." },
    ],
    status: "Próximamente",
    visual: "wave",
  },
];

function ProductVisual({ kind, color }) {
  if (kind === "table") {
    return (
      <div className="viz-table">
        <div className="row head">
          <div>Recurso</div><div>And.</div><div>Cat.</div><div>Mad.</div>
        </div>
        {[
          ["Primera consulta AP", "53,76", "55,12", "58,40"],
          ["Cons. sucesivas AP", "13,68", "14,02", "15,11"],
          ["Enfermería AP", "43,76", "44,90", "46,21"],
          ["Esp. primera consulta", "85,56", "88,30", "91,02"],
          ["Servicio farmacia", "34,36", "35,12", "36,80"],
        ].map((r, i) => (
          <div key={i} className="row">
            <div><span className="dot" style={{ background: color }} />{r[0]}</div>
            <div>{r[1]} €</div><div>{r[2]} €</div><div>{r[3]} €</div>
          </div>
        ))}
      </div>
    );
  }
  if (kind === "bars") {
    const bars = [
      { h: 38, n: "F1", v: "12" },
      { h: 64, n: "F2", v: "21" },
      { h: 82, n: "F3", v: "27" },
      { h: 96, n: "F4", v: "32" },
      { h: 54, n: "RWE", v: "18" },
    ];
    return (
      <div className="viz-bars">
        {bars.map((b, i) => (
          <div key={i} className="bar" style={{ height: b.h + "%", background: color }} data-label={b.n}>
            <span className="num">{b.v}</span>
          </div>
        ))}
      </div>
    );
  }
  if (kind === "wave") {
    return (
      <div className="viz-wave">
        <svg viewBox="0 0 200 80" preserveAspectRatio="none">
          {[...Array(40)].map((_, i) => {
            const x = (i / 40) * 200;
            const h = 12 + Math.abs(Math.sin(i * 0.7) * 28) + Math.abs(Math.cos(i * 0.4) * 18);
            return (
              <rect
                key={i}
                x={x}
                y={40 - h / 2}
                width={3}
                height={h}
                fill={color}
                opacity={0.55 + (i % 5) * 0.08}
                style={{ animationDelay: `${(i * 60) % 1600}ms` }}
              />
            );
          })}
          <line x1="0" y1="40" x2="200" y2="40" stroke="currentColor" strokeOpacity="0.18" strokeWidth="0.4" strokeDasharray="2 2" />
        </svg>
      </div>
    );
  }
  if (kind === "persons") {
    const cells = [];
    for (let i = 0; i < 96; i++) {
      const on = ((i * 7) % 11 < 4) || ((i * 3) % 13 < 3);
      cells.push(
        <span
          key={i}
          className={on ? "on" : ""}
          style={{
            background: on ? color : undefined,
            animationDelay: `${(i * 73) % 5800}ms`,
          }}
        />
      );
    }
    return <div className="viz-persons">{cells}</div>;
  }
  return null;
}

Object.assign(window, { AMBITOS, INNOVACION, PRODUCTS, ProductVisual });