/* eslint-disable */
/* global React, useLang */

const { useState, useEffect } = React;

const PRESS_ITEMS = [
  {
    name: 'Forbes Argentina',
    domain: 'forbesargentina.com',
    headlineEs: 'Estos físicos del Balseiro crearon Teramot para hacer posible la IA empresarial',
    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',
    imageFrom: 'https://www.lacapital.com.ar/negocios/invirtieron-us-1-millon-crear-un-software-que-procesa-datos-tiempo-record-n10144070.html'
  },
  {
    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.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 PressCard = ({ name, domain, headlineEs, headlineEn, 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>
        </div>
        <p className="tm-press-card-headline">{headline}</p>
      </div>
    </a>
  );
};

const Press = () => {
  const { c } = useLang();
  return (
    <section className="tm-press">
      <div className="tm-container">
        <h2 className="tm-h2">{c.press.title}</h2>
        <div className="tm-press-grid">
          {PRESS_ITEMS.map((item) => (
            <PressCard key={item.name} {...item} />
          ))}
        </div>
        <div className="tm-press-footer">
          <a className="tm-btn tm-btn-ghost" href="medios.html">{c.press.more}</a>
        </div>
      </div>
    </section>
  );
};