// Home.jsx — 1snob landing (AI Systems Architect positioning)
const Home = ({ lang, go }) => {
  const t = {
    eyebrow1: { en: '— Leandro Alvarez · AI Systems Architect', fr: '— Leandro Alvarez · Architecte de systèmes IA' },
    heroL1:   { en: 'SYSTEMS',       fr: 'DES SYSTÈMES' },
    heroL2:   { en: 'THAT FAIL',     fr: 'QUI ÉCHOUENT' },
    heroL3:   { en: 'SAFELY.',       fr: 'SANS DANGER.' },
    lede: {
      en: 'A decade engineering infrastructure where failure meant millions in losses and physical consequences — BHP Billiton, Hatch, across Canada, Australia, Chile. Now applying that same rigor to AI systems designed to be reliable, interpretable, and steerable.',
      fr: "Une décennie à concevoir des infrastructures où l'échec signifiait des pertes de plusieurs millions et des conséquences physiques — BHP Billiton, Hatch, au Canada, en Australie, au Chili. Aujourd'hui, la même rigueur appliquée à des systèmes d'IA fiables, interprétables et pilotables.",
    },
    seeWork:  { en: 'See the work',          fr: 'Voir le travail' },
    hire:     { en: 'Hire a snob',           fr: 'Engagez un snob' },

    pillarsEyebrow: { en: '— What I am building now', fr: "— Ce que je construis en ce moment" },
    pillars: [
      {
        num: '01',
        titleEn: 'ORCHESTRA-\nTION KERNEL',
        titleFr: 'NOYAU D’ORCHES-\nTRATION',
        tagEn: 'v0.9 · 95% complete',
        tagFr: 'v0.9 · 95 % complété',
        active: true,
      },
      {
        num: '02',
        titleEn: 'RAG +\nMEMORY',
        titleFr: 'RAG +\nMÉMOIRE',
        tagEn: '4-type architecture',
        tagFr: 'Architecture à 4 types',
        active: true,
      },
      {
        num: '03',
        titleEn: 'FINOPS\nPIPELINES',
        titleFr: 'PIPELINES\nFINOPS',
        tagEn: 'Cost-per-token, live',
        tagFr: 'Coût-par-token, en direct',
        active: true,
      },
      {
        num: '04',
        titleEn: 'NAUTILUS-\nENGINE',
        titleFr: 'NAUTILUS-\nENGINE',
        tagEn: 'C++20 · side quest',
        tagFr: 'C++20 · quête secondaire',
        active: true,
      },
    ],

    principlesEyebrow: { en: '— Principles', fr: '— Principes' },
    principlesTitle:   { en: 'ONE SNOB.\nFOUR RULES.', fr: 'UN SNOB.\nQUATRE RÈGLES.' },
    principles: [
      { n: '01',
        hEn: 'Correct at scale, or silent.',
        hFr: 'Juste à grande échelle, ou silencieux.',
        pEn: 'Systems are built to work correctly under load and fail safely when they cannot. No demo-ware. No happy path. If it cannot handle the hard case, it is not shipped.',
        pFr: "Les systèmes sont faits pour fonctionner correctement sous charge et échouer sans danger quand ils n'y arrivent pas. Pas de démo. Pas de chemin heureux. Si ça ne gère pas le cas difficile, ça ne sort pas." },
      { n: '02',
        hEn: 'Safety is the design, not a department.',
        hFr: 'La sécurité est dans la conception, pas dans un département.',
        pEn: 'Interpretability, steerability, and predictable failure modes belong at the architecture layer — not tacked on at review time. The cheapest place to make an AI system trustworthy is before it runs.',
        pFr: "L'interprétabilité, la pilotabilité et les modes d'échec prévisibles sont au niveau de l'architecture — pas ajoutés en fin de parcours. Le moment le moins coûteux pour rendre une IA fiable est avant son exécution." },
      { n: '03',
        hEn: 'Responsible compute.',
        hFr: 'Calcul responsable.',
        pEn: 'Every token has a cost and a carbon footprint. FinOps is not a dashboard — it is a design constraint. The system optimizes its own resource consumption or I rewrite it until it does.',
        pFr: "Chaque token a un coût et une empreinte carbone. FinOps n'est pas un tableau de bord — c'est une contrainte de conception. Le système optimise sa propre consommation, ou je le réécris jusqu'à ce qu'il le fasse." },
      { n: '04',
        hEn: 'Depth beyond domain.',
        hFr: 'De la profondeur hors domaine.',
        pEn: 'Engineers have side quests that prove depth. A C++20 reverb engine, a camera, a company from whiteboard to revenue. The side quests are where the primary domain learns new tricks.',
        pFr: "Les ingénieurs ont des quêtes secondaires qui prouvent la profondeur. Un moteur de réverbération C++20, un appareil photo, une entreprise du tableau blanc au revenu. C'est là que le domaine principal apprend de nouveaux tours." },
    ],

    creditsEyebrow: { en: '— Track record', fr: '— Parcours' },
    credits: [
      { k: { en: 'Infrastructure CAPEX',   fr: 'CAPEX infrastructure' }, v: { en: '$1.2B USD',                      fr: '1,2 G$ US' } },
      { k: { en: 'Over-cost exposure found', fr: 'Dépassements identifiés' }, v: { en: '$2M+ USD (BHP Escondida)',      fr: '2 M$+ US (BHP Escondida)' } },
      { k: { en: 'Agents in prod (Legal)',  fr: 'Agents en prod (Légal)' },  v: { en: '13-agent case engine',           fr: 'Moteur à 13 agents' } },
      { k: { en: 'Client pipeline (GTA–Niagara)', fr: 'Pipeline clients (GTA–Niagara)' }, v: { en: '10+ prospects',       fr: '10+ prospects' } },
      { k: { en: 'Media',                   fr: 'Médias' },                  v: { en: 'CNN Chile · Canal 13 · MEGA',   fr: 'CNN Chile · Canal 13 · MEGA' } },
      { k: { en: 'Honours',                 fr: 'Distinctions' },            v: { en: 'CORFO Seed · Endeavor',         fr: 'CORFO Seed · Endeavor' } },
    ],

    quote: {
      en: ['A COMPANY WHERE', 'ALL MY INTERESTS', 'CONVERGE.'],
      fr: ['UNE ENTREPRISE OÙ', 'TOUS MES INTÉRÊTS', 'CONVERGENT.'],
    },
    quoteAttr: { en: 'Leandro Alvarez, founder', fr: 'Leandro Alvarez, fondateur' },
  };

  return (
    <main className="page-enter">
      {/* HERO */}
      <Section noBorder>
        <div className="hero-slab">
          <span className="micro-label">{t.eyebrow1[lang]}</span>
          <h1 style={{ marginTop: 28 }}>
            <span className="row-1">{t.heroL1[lang]}</span>
            <span className="row-2">{t.heroL2[lang]}</span>
            <span className="row-2 text-rainbow">{t.heroL3[lang]}</span>
          </h1>
          <p className="lede">{t.lede[lang]}</p>
          <div style={{ display: 'flex', gap: 12, marginTop: 40, flexWrap: 'wrap' }}>
            <Btn onClick={() => go('work')}>{t.seeWork[lang]}</Btn>
            <Btn ghost onClick={() => go('contact')}>{t.hire[lang]}</Btn>
          </div>
        </div>
      </Section>

      <RainbowBar thick />

      {/* PILLARS */}
      <Section eyebrow={t.pillarsEyebrow[lang]}>
        <div className="pillars">
          {t.pillars.map((p) => (
            <a
              key={p.num}
              className={`pillar ${p.active ? 'active' : ''}`}
              href="#/work"
              onClick={(e) => { e.preventDefault(); go('work'); }}
            >
              <div className="pillar-head">
                <span className="pillar-num">— {p.num}</span>
                <span className="pillar-arrow">↗</span>
              </div>
              <div>
                <h3 className="pillar-title" style={{ whiteSpace: 'pre-line' }}>
                  {lang === 'en' ? p.titleEn : p.titleFr}
                </h3>
                <div className="pillar-status">{lang === 'en' ? p.tagEn : p.tagFr}</div>
              </div>
            </a>
          ))}
        </div>
      </Section>

      {/* PRINCIPLES */}
      <Section eyebrow={t.principlesEyebrow[lang]}>
        <div className="manifesto">
          <h2 style={{ fontSize: 'clamp(2rem, 4vw, 3.5rem)', whiteSpace: 'pre-line' }}>
            {t.principlesTitle[lang]}
          </h2>
          <div className="items">
            {t.principles.map((it) => (
              <div className="item" key={it.n}>
                <span className="n">— {it.n}</span>
                <h3>{lang === 'en' ? it.hEn : it.hFr}</h3>
                <p>{lang === 'en' ? it.pEn : it.pFr}</p>
              </div>
            ))}
          </div>
        </div>
      </Section>

      {/* TRACK RECORD — dense facts table */}
      <Section eyebrow={t.creditsEyebrow[lang]} dark>
        <div style={{ borderTop: '1px solid rgba(250,250,247,0.3)' }}>
          {t.credits.map((row, i) => (
            <div
              key={i}
              style={{
                display: 'grid',
                gridTemplateColumns: '80px 1fr 1fr',
                gap: 24,
                padding: '28px 0',
                borderBottom: '1px solid rgba(250,250,247,0.15)',
                alignItems: 'baseline',
              }}
            >
              <span style={{ fontSize: 11, letterSpacing: '0.18em', color: 'rgba(250,250,247,0.5)' }}>
                — {String(i + 1).padStart(2, '0')}
              </span>
              <span style={{ fontSize: 13, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'rgba(250,250,247,0.7)' }}>
                {row.k[lang]}
              </span>
              <span style={{ fontFamily: 'var(--font-display)', fontSize: 28, fontWeight: 900, textTransform: 'uppercase', letterSpacing: '0.01em' }}>
                {row.v[lang]}
              </span>
            </div>
          ))}
        </div>
      </Section>

      {/* PULL QUOTE */}
      <Section>
        <blockquote className="pullquote" style={{ margin: 0 }}>
          <span>{t.quote[lang][0]} </span>
          <span className="text-rainbow">{t.quote[lang][1]} </span>
          <span>{t.quote[lang][2]}</span>
        </blockquote>
        <div className="pullquote-attr">— {t.quoteAttr[lang]}</div>
      </Section>
    </main>
  );
};

window.Home = Home;