/* articles.jsx : diario / blog content + article subpage + hash router
   --------------------------------------------------------------------
   Single source of truth for the editorial articles. Both the
   Education teaser grid and the full article page read from VD_ARTICLES.
   To add a new article: drop the images in /assets and add an entry
   below with a unique `slug`. The card and the page are generated
   automatically. */

const BUSINESS_WHATSAPP = "573013083210";

function articleWhatsAppUrl(topic) {
  const text = encodeURIComponent(
    `¡Hola! Leí el artículo sobre ${topic} y me gustaría agendar una valoración. ¿Me pueden ayudar?`
  );
  return `https://wa.me/${BUSINESS_WHATSAPP}?text=${text}`;
}

const VD_ARTICLES = [
  {
    slug: "botox-30-vs-50",
    tag: "Guía",
    title: "Botox a los 30 vs. a los 50: cuándo, cuánto y por qué.",
    meta: "8 min · Educativo",
    tone: "rose",
    thumb: "assets/art-botox.jpg",
    hero: "assets/art-botox-3.jpg",
    topic: "Botox",
    dek:
      "La toxina botulínica no es la misma conversación a los 30 que a los 50. Aquí te explico cómo cambia el objetivo, la dosis y la técnica según la década en la que estés, y por qué empezar a tiempo lo cambia todo.",
    body: [
      { h: "Prevención y corrección no son lo mismo" },
      { p: "Una de las preguntas que más recibo en consulta es: «doctora, ¿ya es muy temprano, o muy tarde, para el Botox?». La respuesta honesta es que casi nunca es ninguna de las dos cosas; simplemente el tratamiento persigue objetivos distintos según el momento de tu piel. La toxina botulínica relaja de forma temporal los músculos responsables de las líneas de expresión. Lo que cambia con la edad no es el producto, sino qué tan marcada está ya la huella que esos músculos han dejado en la piel." },
      { p: "Entender esa diferencia, es decir, prevenir un pliegue que aún no es permanente frente a suavizar uno que ya se instaló, es lo que define la dosis, los puntos de aplicación y las expectativas realistas de cada paciente." },

      { h: "Botox a los 30: la década de la prevención" },
      { p: "A los 30 la mayoría de las líneas son dinámicas: aparecen cuando gesticulas y desaparecen cuando tu rostro está en reposo. Es el momento ideal para un enfoque preventivo y conservador. Con microdosis bien ubicadas relajamos lo justo para que la piel deje de plegarse una y otra vez en el mismo punto, sin congelar la expresión." },
      { list: [
        "Dosis más bajas y conservadoras, priorizando una expresión natural.",
        "Foco en el tercio superior: entrecejo, frente y patas de gallo.",
        "Objetivo: evitar que la línea dinámica se convierta en una arruga fija.",
        "Mantenimiento espaciado, normalmente cada 4 a 6 meses."
      ]},
      { p: "La paciente de 30 que se trata de forma temprana suele necesitar menos producto con el paso de los años, precisamente porque nunca dejamos que la arruga se grabara en profundidad." },

      { img: "assets/art-botox-2.jpg", cap: "Toxina botulínica de uso médico: producto trazable y dosis personalizada." },

      { h: "Botox a los 50: corrección y armonía global" },
      { p: "A partir de los 50 el panorama cambia. Muchas líneas ya son estáticas: están presentes incluso con el rostro relajado, y el componente de pérdida de colágeno, descenso de volumen y calidad de piel entra en juego. Aquí la toxina sigue siendo protagonista, pero rara vez trabaja sola." },
      { p: "En esta etapa combino la toxina con bioestimuladores de colágeno, ácido hialurónico o protocolos de calidad de piel para lograr un resultado armónico. La toxina suaviza el gesto; el resto del plan devuelve soporte y luminosidad. Tratar solo el músculo sin atender el volumen suele dar resultados parciales y poco naturales." },
      { quote: "El Botox a los 50 no busca borrar la edad: busca que el rostro se vea descansado, coherente y fiel a ti." },

      { h: "¿Cuánto cuesta esperar?" },
      { p: "No hablo solo de dinero. Una arruga dinámica se maneja con poca dosis y resultados excelentes; una arruga ya estática puede requerir más sesiones, tratamientos combinados y, aun así, mejorar sin desaparecer por completo. Empezar a tiempo casi siempre significa menos producto, menos costo acumulado y un resultado más natural a largo plazo." },

      { h: "Lo que siempre evalúo antes de aplicar" },
      { list: [
        "La fuerza y el patrón de tus músculos faciales, no solo tu edad en el documento.",
        "La calidad de tu piel: hidratación, colágeno y elasticidad.",
        "Tu expresión natural, para preservarla y nunca anularla.",
        "Tus expectativas, para alinearlas con lo que la técnica puede ofrecer con seguridad."
      ]},
      { p: "Tengas 30 o 50, la mejor decisión empieza por una valoración. No todas las frentes necesitan lo mismo, y parte de mi trabajo es decirte con honestidad qué sí y qué no es para ti." },
    ],
  },

  {
    slug: "caida-cabello-caribe",
    tag: "Tricología",
    title: "Caída de cabello en mujeres del Caribe: causas y plan clínico.",
    meta: "12 min · Clínico",
    tone: "mocha",
    thumb: "assets/art-cabello.jpg",
    hero: "assets/art-cabello.jpg",
    topic: "caída de cabello y tricología",
    dek:
      "El calor, la humedad y el sol de Montería son parte de tu vida, y también de la salud de tu cabello. Te explico por qué se cae, qué causas debemos descartar y cómo construyo un plan tricológico real, paso a paso.",
    body: [
      { h: "Perder cabello no siempre es lo mismo" },
      { p: "Es completamente normal perder entre 50 y 100 cabellos al día. El problema empieza cuando notas que el volumen disminuye, que la raya se ensancha o que ves más cabello del habitual en el cepillo y en la ducha. En las mujeres del Caribe la caída tiene matices propios: nuestro clima, los hábitos de peinado y ciertos factores nutricionales se combinan de una forma muy particular." },
      { p: "Antes de tratar, hay que diagnosticar. La caída del cabello no es un único problema, sino un síntoma que puede tener varias causas a la vez. Por eso nunca recomiendo «la ampolla de moda» sin antes entender qué está pasando en tu cuero cabelludo." },

      { h: "El factor Caribe: calor, humedad y sol" },
      { p: "Vivir en clima cálido y húmedo no causa por sí solo la calvicie, pero sí favorece condiciones que la empeoran: mayor sudoración y producción de grasa en el cuero cabelludo, proliferación de hongos como la dermatitis seborreica, y un uso frecuente de peinados tirantes, planchas y secadores para controlar el frizz. El sol intenso, además, oxida y reseca la fibra capilar." },
      { list: [
        "Exceso de grasa y sudor que inflama el folículo y debilita la raíz.",
        "Dermatitis seborreica y picazón, muy común en nuestro clima.",
        "Peinados tensos y calor excesivo que causan alopecia por tracción.",
        "Daño solar acumulado en la fibra y el cuero cabelludo."
      ]},

      { img: "assets/art-cabello-2.jpg", cap: "La salud del cabello empieza en el cuero cabelludo, no en la fibra." },

      { h: "Las causas clínicas que siempre descarto" },
      { p: "Más allá del clima, hay causas médicas que debemos estudiar con orden. En mujeres, las más frecuentes que evalúo en consulta son:" },
      { list: [
        "Alopecia androgenética femenina: pérdida de densidad progresiva, sobre todo en la coronilla y la raya central.",
        "Efluvio telógeno: caída difusa y abundante tras un parto, una cirugía, estrés intenso, fiebre o pérdida de peso brusca.",
        "Déficits nutricionales: anemia por falta de hierro, vitamina D baja y déficit de ferritina, muy frecuentes en mujeres.",
        "Alteraciones de la tiroides y desbalances hormonales.",
        "Alopecia por tracción por peinados repetidamente tensos."
      ]},
      { quote: "Tratar la caída sin estudiar la causa es como tomar un analgésico sin saber de dónde viene el dolor: alivia un rato, pero no resuelve." },

      { h: "Cómo construyo tu plan tricológico" },
      { p: "Mi abordaje siempre parte de un diagnóstico real. En la valoración examino el cuero cabelludo con tricoscopia, reviso tu historia clínica y, cuando hace falta, solicito exámenes de laboratorio para descartar anemia, déficit de ferritina, vitamina D o alteraciones tiroideas. Solo con esa información diseño un plan." },
      { list: [
        "Diagnóstico: tricoscopia, historia clínica y laboratorios dirigidos.",
        "Tratamiento médico personalizado: activos tópicos, terapia capilar y, si corresponde, manejo del déficit nutricional u hormonal.",
        "Salud del cuero cabelludo: control de la seborrea y la inflamación.",
        "Hábitos: rutina de peinado, protección solar y manejo del calor.",
        "Seguimiento: revisiones para medir resultados y ajustar el plan."
      ]},
      { p: "La tricología es una carrera de fondo, no un sprint. Los folículos responden con el tiempo, y los primeros resultados suelen verse a partir de los 3 a 6 meses de constancia. Lo importante es empezar pronto: el folículo que aún está vivo se puede recuperar; el que ya se perdió, no." },
      { p: "Si llevas meses notando más caída de la habitual, no esperes a «ver si se pasa». Una valoración a tiempo es la diferencia entre conservar tu densidad y perderla." },
    ],
  },

  {
    slug: "preparar-piel-sculptra",
    tag: "Skincare",
    title: "Cómo preparar tu piel para el primer tratamiento de Sculptra.",
    meta: "6 min · Pre-tratamiento",
    tone: "champagne",
    thumb: "assets/art-sculptra.jpg",
    hero: "assets/art-sculptra.jpg",
    topic: "Sculptra y bioestimulación de colágeno",
    dek:
      "Sculptra no rellena: estimula a tu propia piel a producir colágeno. Por eso la preparación importa tanto como la técnica. Aquí tienes mi guía para llegar a tu primera sesión con la piel en su mejor momento.",
    body: [
      { h: "Primero, entiende qué es Sculptra" },
      { p: "A diferencia de un relleno tradicional de ácido hialurónico, que aporta volumen de forma inmediata, Sculptra es un bioestimulador a base de ácido poliláctico. Su trabajo es despertar a tus fibroblastos para que produzcan colágeno nuevo de forma gradual. El resultado no es instantáneo: aparece de manera progresiva y natural a lo largo de semanas, devolviendo firmeza y soporte estructural al rostro." },
      { p: "Como el protagonista del resultado es tu propia biología, llegar con la piel sana, hidratada y sin inflamación marca una diferencia real en cómo respondes al tratamiento." },

      { h: "Dos semanas antes: prepara el terreno" },
      { list: [
        "Hidrátate por dentro y por fuera: bebe suficiente agua y mantén tu rutina de hidratación facial.",
        "Refuerza tu protección solar a diario; la piel quemada o irritada no es buena candidata.",
        "Evita exfoliaciones agresivas, peelings fuertes o láseres en los días previos.",
        "Mantén una rutina suave y constante; no es momento de estrenar activos potentes."
      ]},

      { img: "assets/art-sculptra-2.jpg", cap: "Una piel hidratada y sin inflamación responde mejor a la bioestimulación." },

      { h: "De 3 a 7 días antes: reduce el riesgo de morados" },
      { p: "Los bioestimuladores se infiltran con aguja o cánula, así que es normal que pueda haber un pequeño hematoma. Para minimizarlo, conviene evitar todo lo que aumente el sangrado, siempre consultando antes con tu médico si tomas algún medicamento de forma crónica:" },
      { list: [
        "Evita el alcohol los días previos a la sesión.",
        "Suspende, solo si tu médico lo autoriza, antiinflamatorios, aspirina, omega 3, vitamina E y ginkgo.",
        "Descansa bien y llega sin maquillaje el día del procedimiento.",
        "Avísame si tienes historial de herpes labial, brotes activos o cualquier infección en la piel."
      ]},
      { quote: "La mejor preparación es honestidad clínica: cuéntame tus antecedentes, tus medicamentos y tus expectativas. Con eso diseño un plan seguro." },

      { h: "El día de tu sesión" },
      { p: "Llega con la piel limpia, hidratada y bien alimentada. Reserva un rato sin compromisos sociales inmediatos, porque puede haber leve enrojecimiento o inflamación temporal. Y, muy importante, ven con la mente tranquila: Sculptra es un proceso, y los resultados se construyen sesión a sesión." },

      { h: "Después: el famoso masaje" },
      { p: "Tras la aplicación te daré indicaciones precisas, entre ellas el masaje en la zona tratada durante los días siguientes según la pauta que te indique. Es un paso clave para una distribución homogénea del producto. La constancia en los cuidados posteriores es tan importante como la técnica del día de la sesión." },
      { p: "Si estás considerando tu primera sesión de Sculptra, agenda una valoración. Evalúo tu piel, tus objetivos y diseño contigo un plan a la medida y, si no es el tratamiento indicado para ti, también te lo digo." },
    ],
  },
];

/* ---------- Article page ---------- */
function ArticleBlock({ block }) {
  if (block.h) return <h2 className="art-h2">{block.h}</h2>;
  if (block.p) return <p className="art-p">{block.p}</p>;
  if (block.quote) return <blockquote className="art-quote">{block.quote}</blockquote>;
  if (block.list)
    return (
      <ul className="art-list">
        {block.list.map((li, i) => <li key={i}>{li}</li>)}
      </ul>
    );
  if (block.img)
    return (
      <figure className="art-figure art-figure-inline">
        <img src={block.img} alt={block.cap || ""} loading="lazy" />
        {block.cap && <figcaption>{block.cap}</figcaption>}
      </figure>
    );
  return null;
}

function ArticlePage({ article, goHome }) {
  // The nav is fixed and its height changes with viewport (the brand wraps
  // on narrow phones). Measure it so the article always clears it instead of
  // sliding underneath. Re-measure on resize and after fonts settle.
  const [navPad, setNavPad] = useState(null);
  useEffect(() => {
    const measure = () => {
      const nav = document.querySelector(".nav");
      if (nav) setNavPad(Math.round(nav.getBoundingClientRect().height) + 40);
    };
    measure();
    const t = setTimeout(measure, 400);
    window.addEventListener("resize", measure);
    return () => { clearTimeout(t); window.removeEventListener("resize", measure); };
  }, []);

  useEffect(() => {
    window.scrollTo(0, 0);
    const prev = document.title;
    document.title = `${article.title} · Dra. Victoria D'janon`;
    return () => { document.title = prev; };
  }, [article]);

  const back = (e) => {
    e.preventDefault();
    goHome("#educacion");
  };

  return (
    <article className="art" style={navPad ? { paddingTop: navPad } : undefined}>
      <div className="wrap art-shell">
        <a className="art-back" href="#/" onClick={back}>
          <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round">
            <path d="M12 7H2" /><path d="M6 3 2 7l4 4" />
          </svg>
          Volver al diario
        </a>

        <Reveal>
          <Eyebrow>Diario · {article.tag}</Eyebrow>
          <h1 className="art-title">{article.title}</h1>
          <p className="art-dek">{article.dek}</p>
          <div className="art-byline">
            <img className="art-avatar" src="assets/retrato-dra-victoria.jpg" alt="Dra. Victoria D'janon" />
            <div className="art-byline-text">
              <span>Por <strong>Dra. Victoria D'janon</strong></span>
              <span className="art-byline-meta">Medicina Estética & Tricología · {article.meta}</span>
            </div>
          </div>
        </Reveal>
      </div>

      <Reveal className="wrap art-hero-wrap">
        <figure className="art-figure art-hero-fig">
          <img src={article.hero} alt={article.title} />
        </figure>
      </Reveal>

      <div className="wrap art-body">
        <Reveal>
          {article.body.map((b, i) => <ArticleBlock key={i} block={b} />)}

          <div className="art-cta">
            <h3 className="art-cta-title">¿Lista para dar el siguiente paso?</h3>
            <p className="art-cta-sub">
              Cada plan empieza con una valoración personalizada. Escríbeme y lo construimos juntas.
            </p>
            <div className="art-cta-actions">
              <a className="btn btn-gold" href={articleWhatsAppUrl(article.topic)} target="_blank" rel="noreferrer">
                Agendar valoración <Arr />
              </a>
              <a className="btn btn-ghost" href="#/" onClick={back}>Ver más artículos</a>
            </div>
          </div>
        </Reveal>
      </div>
    </article>
  );
}

/* ---------- tiny hash router ---------- */
function getRoute() {
  const h = window.location.hash || "";
  const m = h.match(/^#\/articulo\/([\w-]+)/);
  if (m) return { name: "article", slug: m[1] };
  return { name: "home" };
}

function findArticle(slug) {
  return VD_ARTICLES.find((a) => a.slug === slug) || null;
}

Object.assign(window, { VD_ARTICLES, ArticlePage, getRoute, findArticle, articleWhatsAppUrl });
