/* eslint-disable */
/* global React, ReactDOM, useLang, LangProvider, NavBar, Footer */

const { useState, useEffect } = React;

const ALL_PRESS = [
  {
    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: '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'
  },
  {
    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'
  },
  {
    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'
  },
  {
    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/'
  }
];

const MediaCard = ({ name, domain, headlineEs, headlineEn, date, url, imageFrom }) => {
  const { lang } = useLang();
  const headline = lang === 'en' ? headlineEn : headlineEs;
  const [ogImage, setOgImage] = useState(null);
  const [loading, setLoading] = useState(true);
  const [logoFailed, setLogoFailed] = useState(false);

  useEffect(() => {
    const fetchUrl = imageFrom || url;
    fetch(`https://api.microlink.io?url=${encodeURIComponent(fetchUrl)}`)
      .then(r => r.json())
      .then(data => {
        const img = data?.data?.image?.url;
        if (img && img.startsWith('http')) setOgImage(img);
      })
      .catch(() => {})
      .finally(() => setLoading(false));
  }, []); // eslint-disable-line

  return (
    <a className="tm-press-card" href={url} target="_blank" rel="noopener noreferrer">
      <div className="tm-press-card-media">
        {loading ? (
          <div className="tm-press-card-skeleton" />
        ) : ogImage ? (
          <img src={ogImage} alt={headline} className="tm-press-card-img" />
        ) : (
          <div className="tm-press-card-nophoto">
            <span>{name}</span>
          </div>
        )}
        <div className="tm-press-card-overlay">
          <i className="ph-bold ph-arrow-up-right tm-press-card-icon" />
        </div>
      </div>
      <div className="tm-press-card-body">
        <div className="tm-press-card-source">
          {!logoFailed ? (
            <img
              src={`https://logo.clearbit.com/${domain}`}
              alt={name}
              className="tm-press-card-source-logo"
              onError={() => setLogoFailed(true)}
            />
          ) : null}
          <span className="tm-press-card-source-name">{name}</span>
          {date && <span className="tm-media-card-date">{date}</span>}
        </div>
        <p className="tm-press-card-headline">{headline}</p>
      </div>
    </a>
  );
};

const MediaPage = () => (
  <LangProvider>
    <NavBar current="medios" />
    <main>
      <section className="tm-medios-hero">
        <div className="tm-container">
          <span className="tm-medios-eyebrow">Prensa</span>
          <h1 className="tm-medios-h1">En los medios</h1>
          <p className="tm-medios-sub">Cobertura periodística sobre Teramot en medios nacionales e internacionales.</p>
        </div>
      </section>

      <section className="tm-medios-grid-section">
        <div className="tm-container">
          <div className="tm-press-grid tm-medios-grid">
            {ALL_PRESS.map((item, i) => (
              <MediaCard key={i} {...item} />
            ))}
          </div>
        </div>
      </section>
    </main>
    <Footer />
  </LangProvider>
);

ReactDOM.createRoot(document.getElementById('root')).render(<MediaPage />);