/* eslint-disable */
/* blog/index.jsx — blog index page */

const POSTS = [
  {
    slug: 'data-is-not-software',
    date:   { en: 'June 2026',  es: 'Junio 2026' },
    author: 'Bruno Ruyú',
    title:  {
      en: 'Data Is Not Software',
      es: 'Los Datos No Son Software',
    },
    subtitle: {
      en: "What Anthropic's AI Analytics Project Reveals About the Real Challenge",
      es: 'Lo que el proyecto de Analytics de Anthropic revela sobre el verdadero desafío',
    },
    description: {
      en: "Our read on what it takes to get AI working on real business data — and why most companies can't replicate it alone.",
      es: 'Nuestra lectura sobre lo que hace falta para que la IA funcione con datos reales de negocio — y por qué la mayoría de las empresas no puede replicarlo sola.',
    },
  },
];

const BlogIndex = () => {
  const { lang } = useLang();
  const isEN = lang === 'en';

  return (
    <>
      <NavBar />
      <main className="tm-blog-index">
        <div className="tm-container">
          <header className="tm-blog-header">
            <span className="tm-eyebrow">Blog</span>
            <h1 className="tm-blog-h1">
              {isEN ? 'Ideas from Teramot' : 'Ideas desde Teramot'}
            </h1>
          </header>

          <ul className="tm-post-list">
            {POSTS.map(p => (
              <li key={p.slug} className="tm-post-card">
                <a href={`blog/${p.slug}.html`} className="tm-post-card-link">
                  <div className="tm-post-meta">
                    <span className="tm-post-date">{p.date[lang]}</span>
                    <span>—</span>
                    <span className="tm-post-author">{p.author}</span>
                  </div>
                  <h2 className="tm-post-title">{p.title[lang]}</h2>
                  <p className="tm-post-subtitle">{p.subtitle[lang]}</p>
                  <p className="tm-post-desc">{p.description[lang]}</p>
                  <span className="tm-post-read">{isEN ? 'Read →' : 'Leer →'}</span>
                </a>
              </li>
            ))}
          </ul>
        </div>
      </main>
      <Footer />
    </>
  );
};

ReactDOM.createRoot(document.getElementById('root')).render(
  <LangProvider defaultLang="en"><BlogIndex /></LangProvider>
);