/* eslint-disable */
/* global React, ReactDOM, useLang, LangProvider, HeroNav, Footer */
/* prensa.jsx — Prensa (redesign 2026-09, del sitemap enviado).

   Contenido: son las 11 menciones reales que ya están en producción en
   medios.jsx — mismo dato, mismo orden, mismos titulares y URLs. Cambia
   solamente el diseño. Por eso ya no quedan pills de "pendiente de
   confirmar": Forbes, Yahoo y El Cronista son notas publicadas y
   verificables, no placeholders.

   Imágenes: mismo mecanismo que medios.jsx en producción — la portada
   sale del OG image de cada nota vía api.microlink.io y el logo del
   medio vía logo.clearbit.com, ambos con fallback si fallan. No hay
   assets locales para esto.

   Press kit: sigue sin archivos reales (logo pack, fotos, one-pager),
   así que las tarjetas quedan informativas, sin links de descarga que
   apunten a la nada. */

/* Las 11 notas, copiadas tal cual de medios.jsx (producción). Las tres
   primeras son las destacadas del handoff. */
const PRESS = [
  {
    name: 'Forbes Argentina',
    domain: 'forbesargentina.com',
    headlineEs: 'Estos físicos e ingenieros del Balseiro crearon Teramot para transformar el Big Data en Smart Data',
    headlineEn: 'Balseiro physicists built Teramot to make enterprise AI possible',
    url: 'https://www.forbesargentina.com/daily-cover/estos-fisicos-e-ingenieros-balseiro-crearon-teramot-transformar-big-data-smart-data-hacer-posible-ia-empresarial-n55631',
    featured: true,
  },
  {
    name: 'Yahoo Finance',
    domain: 'yahoo.com',
    headlineEs: 'Físicos argentinos del Balseiro cierran una ronda de US$ 2,1 millones',
    headlineEn: 'Argentine physicists close a US$2.1M seed round',
    url: 'https://es-us.noticias.yahoo.com/f%C3%ACsicos-argentinos-balseiro-cierran-ronda-213000187.html',
    featured: true,
  },
  {
    name: 'El Cronista',
    domain: 'cronista.com',
    headlineEs: 'Es argentino, descubrió el talón de Aquiles de la IA y ayuda a empresas de cuatro países',
    headlineEn: "He found AI's Achilles' heel — and now helps companies across four countries",
    url: 'https://www.cronista.com/infotechnology/entreprenerds/es-argentino-descubrio-el-talon-de-aquiles-de-la-ia-y-ahora-ayuda-a-empresas-de-cuatro-paises/',
    featured: true,
  },
  {
    name: 'El Ecosistema Startup',
    domain: 'ecosistemastartup.com',
    headlineEs: 'Teramot: startup de IA rosarina acelera su expansión global',
    headlineEn: 'Teramot: Rosario AI startup accelerates global expansion',
    date: 'Mar 2026',
    url: 'https://ecosistemastartup.com/teramot-startup-de-ia-rosarina-acelera-su-expansion-global/',
  },
  {
    name: 'El Ecosistema Startup',
    domain: 'ecosistemastartup.com',
    headlineEs: 'Teramot: startup argentina de datos con IA va al mundo',
    headlineEn: 'Teramot: Argentine AI data startup goes global',
    date: 'Mar 2026',
    url: 'https://ecosistemastartup.com/teramot-startup-argentina-de-datos-con-ia-va-al-mundo/',
  },
  {
    name: 'Punto Biz',
    domain: 'puntobiz.com.ar',
    headlineEs: 'Con clientes globales, startup rosarina de datos acelera expansión',
    headlineEn: 'With global clients, Rosario data startup accelerates expansion',
    date: '2026',
    url: 'https://puntobiz.com.ar',
  },
  {
    name: 'Punto Biz',
    domain: 'puntobiz.com.ar',
    headlineEs: 'Startup rosarina levanta millonaria inversión para acelerar su expansión',
    headlineEn: 'Rosario startup raises multi-million investment to accelerate expansion',
    date: 'Oct 2025',
    url: 'https://puntobiz.com.ar/negocios/startup-rosarina-levanta-millonaria-inversion-para-acelerar-su-expansion--2025102413260',
  },
  {
    name: 'InnovaciónDigital360',
    domain: 'innovaciondigital360.com',
    headlineEs: 'Bruno Ruyú, de Teramot: "La capacidad de gestionar datos es un gran diferenciador"',
    headlineEn: 'Bruno Ruyú, Teramot: "The ability to manage data is a major differentiator"',
    date: 'Nov 2024',
    url: 'https://www.innovaciondigital360.com/big-data/bruno-ruyu-de-teramot-la-capacidad-de-gestionar-datos-es-un-gran-diferenciador/',
  },
  {
    name: 'La Capital',
    domain: 'lacapital.com.ar',
    headlineEs: 'Invirtieron u$s 1 millón para crear un software que procesa datos en tiempo récord',
    headlineEn: 'They invested US$1M to build software that processes data in record time',
    date: 'Jul 2024',
    url: 'https://www.lacapital.com.ar/negocios/invirtieron-us-1-millon-crear-un-software-que-procesa-datos-tiempo-record-n10144070.html',
  },
  {
    name: 'iProUP',
    domain: 'iproup.com',
    headlineEs: 'Teramot: conocé a la nueva IA que ayuda a las empresas con sus datos',
    headlineEn: 'Teramot: meet the new AI that helps companies with their data',
    date: 'Abr 2024',
    url: 'https://www.iproup.com/innovacion/46791-teramot-conoce-a-la-nueva-ia-que-ayuda-a-las-empresas-con-sus-datos',
  },
  {
    name: 'Yahoo Finanzas',
    domain: 'yahoo.com',
    headlineEs: 'Físicos e ingenieros del Balseiro crearon Teramot para transformar el Big Data en Smart Data',
    headlineEn: 'Balseiro physicists and engineers built Teramot to transform Big Data into Smart Data',
    url: 'https://es-us.finanzas.yahoo.com/noticias/f%C3%ADsicos-ingenieros-balseiro-crearon-teramot-083500932.html',
  },
];

const PRESS_KIT = [
  { icon: 'ph-images-square', title: 'Logo pack', body: 'SVG + PNG, transparente y color.' },
  { icon: 'ph-users-three', title: 'Fotos del equipo', body: 'JPG en alta resolución.' },
  { icon: 'ph-file-text', title: 'One-pager corporativo', body: 'PDF.' },
  { icon: 'ph-monitor-play', title: 'Assets del producto', body: 'Screenshots y video demo.' },
];

const PRESS_EMAIL = 'hello@teramot.com';

const { useEffect: useEffectPrensa, useRef: useRefPrensa, useState: useStatePrensa } = React;

/* Portada de cada nota — mismo mecanismo que medios.jsx en producción. */
const useOgImage = (url) => {
  const [image, setImage] = useStatePrensa(null);
  const [loading, setLoading] = useStatePrensa(true);
  useEffectPrensa(() => {
    let alive = true;
    fetch(`https://api.microlink.io?url=${encodeURIComponent(url)}`)
      .then((r) => r.json())
      .then((data) => {
        const img = data && data.data && data.data.image && data.data.image.url;
        if (alive && img && img.startsWith('http')) setImage(img);
      })
      .catch(() => {})
      .finally(() => { if (alive) setLoading(false); });
    return () => { alive = false; };
  }, [url]);
  return { image, loading };
};

const SourceLogo = ({ domain, name }) => {
  const [failed, setFailed] = useStatePrensa(false);
  if (failed) return null;
  return (
    <img
      src={`https://logo.clearbit.com/${domain}`}
      alt=""
      loading="lazy"
      onError={() => setFailed(true)}
      style={{ width: 16, height: 16, borderRadius: 4, objectFit: 'contain', flexShrink: 0 }}
    />
  );
};

/* Scroll reveal — mismo hook que el resto de las páginas de Producto/Soluciones. */
const useScrollReveal = (rootRef) => {
  useEffectPrensa(() => {
    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
    const root = rootRef.current;
    if (!root) return;
    const groups = [];
    root.querySelectorAll('section, footer').forEach((sec) => {
      const wrap = sec.firstElementChild && sec.children.length === 1 ? sec.firstElementChild : sec;
      const kids = Array.from(wrap.children).filter((el) => (
        el.nodeType === 1 && !el.classList.contains('tm-drawer') && !el.classList.contains('tm-drawer-overlay')
      ));
      if (kids.length) groups.push(kids);
    });
    const io = new IntersectionObserver((entries) => {
      entries.forEach((en) => {
        if (en.isIntersecting) {
          en.target.classList.add('rv-in');
          io.unobserve(en.target);
        }
      });
    }, { rootMargin: '0px 0px -8% 0px', threshold: 0.08 });
    groups.forEach((kids) => kids.forEach((el, i) => {
      el.classList.add('rv');
      el.style.transitionDelay = Math.min(i, 4) * 70 + 'ms';
      io.observe(el);
    }));
    return () => io.disconnect();
  }, []);
};

const PrensaHero = () => (
  <section className="tm-hero-gradient">
    <HeroNav current="prensa" />
    <div style={{ position: 'relative', maxWidth: 1320, margin: '0 auto', padding: '54px 40px 88px' }}>
      <div style={{ maxWidth: 760 }}>
        <p className="tm-prod-hero-eyebrow">En los medios</p>
        <h1 style={{ marginTop: 18, fontSize: 'clamp(32px,3.4vw,46px)', lineHeight: 1.12, fontWeight: 600, letterSpacing: '-.035em', color: '#fff', textWrap: 'balance' }}>Teramot en los medios.</h1>
        <p style={{ marginTop: 20, maxWidth: 560, fontSize: 16.5, lineHeight: 1.6, color: 'rgba(255,255,255,.82)' }}>Cobertura sobre nuestra tecnología multi-agente y crecimiento en LATAM.</p>
      </div>
    </div>
  </section>
);

const DestacadoCard = ({ item }) => {
  const { lang } = useLang();
  const headline = lang === 'en' ? item.headlineEn : item.headlineEs;
  const { image, loading } = useOgImage(item.url);
  return (
    <a
      className="tm-prod-card tm-prensa-card"
      href={item.url}
      target="_blank"
      rel="noopener noreferrer"
      style={{ display: 'flex', flexDirection: 'column', padding: 0, overflow: 'hidden', textDecoration: 'none' }}
    >
      <div className="tm-prensa-card-media">
        {loading ? (
          <div className="tm-prensa-card-skeleton" />
        ) : image ? (
          <img src={image} alt="" loading="lazy" className="tm-prensa-card-img" />
        ) : (
          <div className="tm-prensa-card-nophoto"><span>{item.name}</span></div>
        )}
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', flex: 1, padding: '20px 22px 22px' }}>
        <p style={{ display: 'flex', alignItems: 'center', gap: 7, margin: 0, fontSize: 10.5, fontWeight: 600, letterSpacing: '.15em', textTransform: 'uppercase', color: '#9CA3AF' }}>
          <SourceLogo domain={item.domain} name={item.name} />
          {item.name}{item.date ? ` · ${item.date}` : ''}
        </p>
        <h3 style={{ marginTop: 12, marginBottom: 0, fontSize: 17, lineHeight: 1.32 }}>{headline}</h3>
        <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6, marginTop: 'auto', paddingTop: 18, fontSize: 12.5, fontWeight: 600, color: '#253DE5' }}>
          Leer nota <i className="ph-bold ph-arrow-up-right" style={{ fontSize: 11 }} />
        </span>
      </div>
    </a>
  );
};

const DestacadosSection = () => (
  <section className="tm-prod-section tm-prod-section-paper">
    <div className="tm-container">
      <div style={{ maxWidth: 820 }}>
        <span className="tm-prod-faq-eyebrow"><span className="tm-prod-faq-eyebrow-dot" /> Cobertura destacada</span>
        <h2 style={{ marginTop: 16, fontSize: 'clamp(26px,2.6vw,34px)', lineHeight: 1.18, fontWeight: 600, letterSpacing: '-.035em', color: '#1C2536' }}>Lo que se escribió sobre Teramot</h2>
      </div>
      <div className="tm-prod-cards" style={{ marginTop: 36 }}>
        {PRESS.filter((p) => p.featured).map((item) => (
          <DestacadoCard key={item.url} item={item} />
        ))}
      </div>
    </div>
  </section>
);

const MencionRow = ({ item }) => {
  const { lang } = useLang();
  const headline = lang === 'en' ? item.headlineEn : item.headlineEs;
  return (
    <a
      className="tm-prensa-row"
      href={item.url}
      target="_blank"
      rel="noopener noreferrer"
    >
      <p style={{ display: 'flex', alignItems: 'center', gap: 7, margin: 0, fontSize: 10.5, fontWeight: 600, letterSpacing: '.15em', textTransform: 'uppercase', color: '#9CA3AF' }}>
        <SourceLogo domain={item.domain} name={item.name} />
        {item.name}{item.date ? ` · ${item.date}` : ''}
      </p>
      <h3 style={{ marginTop: 12, marginBottom: 0, fontSize: 15.5, fontWeight: 600, letterSpacing: '-.015em', lineHeight: 1.35, color: '#1C2536' }}>{headline}</h3>
      <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6, marginTop: 'auto', paddingTop: 20, fontSize: 12.5, fontWeight: 600, color: '#253DE5' }}>
        Leer nota <i className="ph-bold ph-arrow-up-right" style={{ fontSize: 11 }} />
      </span>
    </a>
  );
};

const OtrasMencionesSection = () => (
  <section className="tm-prod-section tm-prod-section-paper" style={{ paddingTop: 0 }}>
    <div className="tm-container">
      <div style={{ maxWidth: 820 }}>
        <p style={{ margin: 0, fontSize: 11, fontWeight: 600, letterSpacing: '.16em', textTransform: 'uppercase', color: '#9CA3AF' }}>Toda la cobertura</p>
        <h2 style={{ marginTop: 14, fontSize: 'clamp(22px,2.2vw,28px)', lineHeight: 1.2, fontWeight: 600, letterSpacing: '-.03em', color: '#1C2536' }}>Otras menciones</h2>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(260px,1fr))', gap: 16, marginTop: 28 }}>
        {PRESS.filter((p) => !p.featured).map((item) => (
          <MencionRow key={item.url} item={item} />
        ))}
      </div>
    </div>
  </section>
);

const PressKitSection = () => (
  <section className="tm-prod-section tm-prod-section-white">
    <div className="tm-container">
      <div style={{ maxWidth: 820 }}>
        <span className="tm-prod-faq-eyebrow"><span className="tm-prod-faq-eyebrow-dot" /> Press kit</span>
        <h2 style={{ marginTop: 16, fontSize: 'clamp(26px,2.6vw,34px)', lineHeight: 1.18, fontWeight: 600, letterSpacing: '-.035em', color: '#1C2536', textWrap: 'pretty' }}>Todo lo que necesitás para escribir sobre Teramot</h2>
        <p style={{ marginTop: 16, maxWidth: 620, fontSize: 16, lineHeight: 1.6, color: '#4B5563' }}>Logos, fotos del equipo, one-pager corporativo y contacto de prensa.</p>
      </div>
      <div className="tm-prod-cards" style={{ marginTop: 36 }}>
        {PRESS_KIT.map((k) => (
          <article className="tm-prod-card" key={k.title}>
            <div className="tm-prod-card-icon"><i className={`ph ${k.icon}`} /></div>
            <h3>{k.title}</h3>
            <p>{k.body}</p>
          </article>
        ))}
      </div>
      <div style={{ display: 'flex', gap: 16, marginTop: 32, flexWrap: 'wrap' }}>
        <a href={`mailto:${PRESS_EMAIL}`} className="tm-btn tm-btn-lg" style={{ background: '#253DE5', color: '#fff', borderColor: 'transparent', borderRadius: 9999, fontWeight: 600 }}>Pedir el press kit <i className="ph ph-arrow-right" /></a>
      </div>
    </div>
  </section>
);

const ContactoSection = () => (
  <section className="tm-prod-section tm-prod-section-paper">
    <div className="tm-container">
      <div style={{ maxWidth: 720 }}>
        <span className="tm-prod-faq-eyebrow"><span className="tm-prod-faq-eyebrow-dot" /> ¿Preparando una nota?</span>
        <h2 style={{ marginTop: 16, fontSize: 'clamp(26px,2.6vw,34px)', lineHeight: 1.18, fontWeight: 600, letterSpacing: '-.035em', color: '#1C2536' }}>Contactanos directo.</h2>
        <p style={{ marginTop: 16, fontSize: 16, lineHeight: 1.6, color: '#4B5563' }}>Respondemos rápido. Para entrevistas, quotes o data específica sobre nuestro crecimiento en LATAM.</p>
        <a href={`mailto:${PRESS_EMAIL}`} style={{ display: 'inline-flex', alignItems: 'center', gap: 9, marginTop: 28, fontSize: 'clamp(18px,1.9vw,23px)', fontWeight: 600, letterSpacing: '-.025em', color: '#253DE5', textDecoration: 'none' }}>Escribinos a {PRESS_EMAIL} <i className="ph-bold ph-arrow-right" style={{ fontSize: 17 }} /></a>
      </div>
    </div>
  </section>
);

const PrensaApp = () => {
  const rootRef = useRefPrensa(null);
  useScrollReveal(rootRef);
  return (
    <main ref={rootRef} className="tm-prod">
      <PrensaHero />
      <DestacadosSection />
      <OtrasMencionesSection />
      <PressKitSection />
      <ContactoSection />
      <Footer />
    </main>
  );
};

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <LangProvider defaultLang="es">
    <PrensaApp />
  </LangProvider>
);