// Pages.jsx — Work (case studies), About, Contact

// ==================== WORK ====================
// Re-cast as "Case studies / Current work" — AI systems + archive (photography, mining)
const Work = ({ lang, go }) => {
  const t = {
    eyebrow: { en: '— Work / Case studies, 2024 —', fr: '— Travail / Études de cas, 2024 —' },
    title:   { en: ['EVIDENCE.', 'NOT PITCH DECKS.'], fr: ['DES PREUVES.', 'PAS DES DÉMOS.'] },
    lede: {
      en: 'A working index of current AI systems, past infrastructure, and the side quests that keep the primary trade honest. Built, shipped, or in production.',
      fr: "Un index de travail : systèmes d'IA actuels, infrastructures passées, et les quêtes secondaires qui gardent le métier principal honnête. Construits, livrés, ou en production.",
    },

    sectionA: { en: 'AI systems — 2025', fr: "Systèmes d'IA — 2025" },
    a: [
      {
        id: '01',
        titleEn: 'Self-reconfiguring orchestration kernel',
        titleFr: "Noyau d'orchestration auto-reconfigurable",
        statusEn: 'v0.9 · 95% complete',
        statusFr: 'v0.9 · 95 % complété',
        descEn: 'Python, async-first, grounded in autopoiesis theory and cybernetics. The system monitors its own performance, detects degradation, and restructures its pipeline topology without human intervention. Digital-twin simulation layer for what-if analysis.',
        descFr: "Python, async-first, ancré dans la théorie de l'autopoïèse et la cybernétique. Le système surveille ses performances, détecte la dégradation et restructure la topologie de son pipeline sans intervention humaine. Couche de simulation par jumeau numérique pour l'analyse what-if.",
        tags: ['Python', 'async', 'autopoiesis', 'digital twin'],
      },
      {
        id: '02',
        titleEn: 'Hybrid RAG / memory — 4-type architecture',
        titleFr: 'RAG hybride / mémoire — architecture à 4 types',
        statusEn: 'In production',
        statusFr: 'En production',
        descEn: 'Vector DBs (LanceDB, Qdrant) + structured relational + Liquid Networks. Episodic, declarative, procedural, economic memory. Solves LLM failures around numeric precision, tabular data, and symbolic reasoning.',
        descFr: 'BD vectorielles (LanceDB, Qdrant) + relationnel structuré + Liquid Networks. Mémoire épisodique, déclarative, procédurale, économique. Résout les échecs LLM sur la précision numérique, les données tabulaires et le raisonnement symbolique.',
        tags: ['LanceDB', 'Qdrant', 'Liquid Networks', '4-type memory'],
      },
      {
        id: '03',
        titleEn: 'Legal Case Engine — 13-agent system',
        titleFr: 'Legal Case Engine — système à 13 agents',
        statusEn: 'Delivered — Ontario Superior Court',
        statusFr: 'Livré — Cour supérieure de l’Ontario',
        descEn: 'Document retrieval, CanLII legal research, argument synthesis, contradiction detection. Python backend, React frontend, Gmail / Drive / Vercel MCP integration. Court-ready document packages.',
        descFr: 'Recherche documentaire, recherche juridique CanLII, synthèse d’arguments, détection de contradictions. Backend Python, frontend React, intégration MCP Gmail / Drive / Vercel. Dossiers prêts pour la cour.',
        tags: ['Multi-agent', 'CanLII', 'MCP', 'React'],
      },
      {
        id: '04',
        titleEn: 'FinOps pipeline infrastructure',
        titleFr: 'Infrastructure pipeline FinOps',
        statusEn: 'Engaging FOCUS v1.2',
        statusFr: 'Participation FOCUS v1.2',
        descEn: 'Real-time cost-per-token modeling, multi-cloud free-tier orchestration, throughput dashboards, automated cost-aware decision making. Because responsible AI deployment includes responsible resource stewardship.',
        descFr: 'Modélisation coût-par-token en temps réel, orchestration multi-nuage (niveaux gratuits), tableaux de bord de débit, décisions automatisées sensibles aux coûts. Déployer l’IA de façon responsable, c’est aussi en gérer les ressources.',
        tags: ['FOCUS v1.2', 'GCP', 'cost-per-token'],
      },
      {
        id: '05',
        titleEn: 'ΩMEGA-PROMPT Framework v3.1',
        titleFr: 'ΩMEGA-PROMPT — cadre v3.1',
        statusEn: 'Used in production',
        statusFr: 'Utilisé en production',
        descEn: '15-layer context saturation, 5 cognitive modes, ACE reasoning loops. Achieving deterministic LLM outputs in production legal deployments.',
        descFr: 'Saturation de contexte à 15 couches, 5 modes cognitifs, boucles de raisonnement ACE. Résultats LLM déterministes en déploiement juridique en production.',
        tags: ['Prompt engineering', 'Determinism'],
      },
    ],

    sectionB: { en: 'Side quests', fr: 'Quêtes secondaires' },
    b: [
      {
        id: '06',
        titleEn: 'NautilusEngine — C++20 algorithmic reverb',
        titleFr: 'NautilusEngine — réverbération algorithmique C++20',
        statusEn: 'In development',
        statusFr: 'En développement',
        descEn: 'JUCE, 8-line FDN, Hadamard mixing, ADAA2. Engineers have side quests that prove depth beyond their primary domain.',
        descFr: 'JUCE, FDN 8 lignes, mixage Hadamard, ADAA2. Les ingénieurs ont des quêtes secondaires qui prouvent leur profondeur au-delà du domaine principal.',
        tags: ['C++20', 'JUCE', 'DSP'],
      },
      {
        id: '07',
        titleEn: 'leandroalvarez.ca — 10 years of photography',
        titleFr: 'leandroalvarez.ca — 10 ans de photographie',
        statusEn: '2014 — 2024 · archive',
        statusFr: '2014 — 2024 · archive',
        descEn: 'Portraits, commercial, fine art prints, weddings. Ran the operation end-to-end: acquisition, shoots, post-production, print sales. The camera taught the eye that now frames interfaces.',
        descFr: 'Portraits, commercial, tirages d’art, mariages. Opération de bout en bout : acquisition, prises de vue, post-production, ventes d’impressions. L’appareil a formé l’œil qui cadre aujourd’hui les interfaces.',
        tags: ['Portrait', 'Commercial', 'Fine art'],
      },
    ],

    sectionC: { en: 'Before AI', fr: 'Avant l’IA' },
    c: [
      {
        id: '08',
        titleEn: 'BHP Billiton — Escondida Mine, Chile',
        titleFr: 'BHP Billiton — Mine d’Escondida, Chili',
        statusEn: '2011 — 2014 · $1.2B CAPEX',
        statusFr: '2011 — 2014 · CAPEX 1,2 G$',
        descEn: 'Cost engineering and project controls for the PMO on two copper mega-projects (EPCM+CM, execution stage). Identified and escalated over-cost exposures >$2M USD through monthly financial dashboards — the same observability and anomaly-detection pattern now applied to distributed systems.',
        descFr: "Ingénierie des coûts et contrôles de projets pour le PMO sur deux méga-projets de cuivre (EPCM+CM, exécution). Détection et escalade d'expositions de coûts dépassant 2 M$ US via des tableaux de bord mensuels — le même motif d'observabilité et de détection d'anomalies appliqué aujourd'hui aux systèmes distribués.",
        tags: ['PMO', 'EPCM', 'Risk analysis'],
      },
      {
        id: '09',
        titleEn: 'Solidez — Chile’s first personal finance coaching co.',
        titleFr: 'Solidez — 1re entreprise chilienne de coaching financier',
        statusEn: '2013 — 2019 · CEO',
        statusFr: '2013 — 2019 · PDG',
        descEn: 'Automated financial analysis model generating 30-page personalized budget reports from online intake. Team of 7. CORFO Seed Capital winner, Endeavor mentoring, national media (CNN Chile, Canal 13, MEGA). Whiteboard to revenue.',
        descFr: 'Modèle d’analyse financière automatisé produisant des rapports budgétaires personnalisés de 30 pages. Équipe de 7. Lauréat CORFO Seed Capital, mentorat Endeavor, médias nationaux (CNN Chile, Canal 13, MEGA). Du tableau blanc au chiffre d’affaires.',
        tags: ['Startup', 'Automation', 'Media'],
      },
    ],
  };

  const caseRow = (c, dark) => (
    <div
      key={c.id}
      style={{
        display: 'grid',
        gridTemplateColumns: '80px 1fr 280px',
        gap: 32,
        padding: '40px 0',
        borderBottom: `1px solid ${dark ? 'rgba(250,250,247,0.15)' : 'var(--rule)'}`,
        alignItems: 'start',
      }}
    >
      <span style={{ fontSize: 11, letterSpacing: '0.18em', color: dark ? 'rgba(250,250,247,0.5)' : 'var(--ink-3)' }}>— {c.id}</span>
      <div>
        <h3 style={{
          fontFamily: 'var(--font-display)',
          fontWeight: 900,
          fontSize: 'clamp(22px, 2.4vw, 32px)',
          lineHeight: 1.05,
          letterSpacing: '0.01em',
          textTransform: 'uppercase',
          margin: 0,
        }}>
          {lang === 'en' ? c.titleEn : c.titleFr}
        </h3>
        <p style={{ marginTop: 14, fontSize: 15, lineHeight: 1.55, color: dark ? 'rgba(250,250,247,0.75)' : 'var(--ink-2)', maxWidth: 680 }}>
          {lang === 'en' ? c.descEn : c.descFr}
        </p>
        <div style={{ display: 'flex', gap: 6, marginTop: 16, flexWrap: 'wrap' }}>
          {c.tags.map((tag) => (
            <span
              key={tag}
              className="tag"
              style={dark ? { borderColor: 'rgba(250,250,247,0.5)', color: 'rgba(250,250,247,0.85)' } : undefined}
            >{tag}</span>
          ))}
        </div>
      </div>
      <div style={{ fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase', color: dark ? 'rgba(250,250,247,0.7)' : 'var(--ink-3)', textAlign: 'right' }}>
        {lang === 'en' ? c.statusEn : c.statusFr}
      </div>
    </div>
  );

  return (
    <main className="page-enter">
      <Section noBorder>
        <span className="micro-label">{t.eyebrow[lang]}</span>
        <h1 style={{ fontSize: 'clamp(3rem, 9vw, 8rem)', lineHeight: 0.9, marginTop: 24 }}>
          <span style={{ display: 'block' }}>{t.title[lang][0]}</span>
          <span className="text-rainbow" style={{ display: 'block' }}>{t.title[lang][1]}</span>
        </h1>
        <p className="lede" style={{ maxWidth: 640, marginTop: 32 }}>{t.lede[lang]}</p>
      </Section>

      <RainbowBar />

      <Section eyebrow={t.sectionA[lang]}>
        <div style={{ borderTop: '1px solid var(--ink-1)' }}>
          {t.a.map((c) => caseRow(c, false))}
        </div>
      </Section>

      <Section eyebrow={t.sectionB[lang]} dark>
        <div style={{ borderTop: '1px solid rgba(250,250,247,0.3)' }}>
          {t.b.map((c) => caseRow(c, true))}
        </div>
      </Section>

      <Section eyebrow={t.sectionC[lang]}>
        <div style={{ borderTop: '1px solid var(--ink-1)' }}>
          {t.c.map((c) => caseRow(c, false))}
        </div>

        <div style={{ marginTop: 72, display: 'flex', flexDirection: 'column', alignItems: 'flex-start', gap: 16 }}>
          <span className="micro-label">
            {lang === 'en' ? '— Building AI infrastructure that must be trustworthy?' : "— Vous bâtissez une infrastructure d'IA qui doit être fiable ?"}
          </span>
          <Btn onClick={() => go('contact')}>
            {lang === 'en' ? 'Get in touch' : 'Prendre contact'}
          </Btn>
        </div>
      </Section>
    </main>
  );
};

// ==================== ABOUT ====================
const About = ({ lang, go }) => {
  const t = {
    eyebrow: { en: '— About / À propos', fr: '— À propos / About' },
    title:   { en: ['TEN YEARS.', 'ZERO MARGIN.'], fr: ['DIX ANS.', 'AUCUNE MARGE.'] },
    bio: [
      { en: 'Leandro Alvarez is an AI Systems Architect based in Fonthill, Ontario. He spent a decade engineering infrastructure where failure meant millions in losses and real physical consequences — mining and heavy-industry projects for BHP Billiton and Hatch across Canada, Australia, and Chile.',
        fr: "Leandro Alvarez est un architecte de systèmes d'IA basé à Fonthill, en Ontario. Il a passé une décennie à concevoir des infrastructures où l'échec signifiait des pertes de plusieurs millions et des conséquences physiques — projets miniers et industriels lourds pour BHP Billiton et Hatch au Canada, en Australie et au Chili." },
      { en: 'He transitioned to AI systems architecture in 2025, convinced that how we build AI infrastructure — not just the models — will determine whether this technology benefits humanity safely. He now builds systems designed to work correctly at scale, fail safely, and optimize their own resource consumption.',
        fr: "Il est passé à l'architecture de systèmes d'IA en 2025, convaincu que la manière dont nous bâtissons l'infrastructure — pas seulement les modèles — déterminera si cette technologie profitera à l'humanité en toute sécurité. Il conçoit aujourd'hui des systèmes faits pour fonctionner correctement à l'échelle, échouer sans danger, et optimiser leur propre consommation de ressources." },
      { en: 'Before AI, he founded Solidez — Chile’s first personal finance coaching company — winning CORFO Seed Capital and Endeavor mentoring, appearing on CNN Chile and Canal 13. He knows how to take systems from whiteboard to revenue. He also photographed professionally for a decade (leandroalvarez.ca) and speaks English, Spanish, and French.',
        fr: "Avant l'IA, il a fondé Solidez — la première entreprise chilienne de coaching financier — lauréate de CORFO Seed Capital et mentorée par Endeavor, apparue sur CNN Chile et Canal 13. Il sait faire passer un système du tableau blanc au chiffre d'affaires. Il a aussi photographié professionnellement pendant dix ans (leandroalvarez.ca) et parle anglais, espagnol et français." },
    ],
    facts: [
      { k: { en: 'Based',        fr: 'Basé' },        v: { en: 'Fonthill, Ontario, Canada',     fr: 'Fonthill, Ontario, Canada' } },
      { k: { en: 'Founded',      fr: 'Fondé' },       v: { en: '2024',                          fr: '2024' } },
      { k: { en: 'Languages',    fr: 'Langues' },     v: { en: 'English · Español · Français',  fr: 'Anglais · Español · Français' } },
      { k: { en: 'Primary trade',fr: 'Métier principal' }, v: { en: 'AI Systems Architect',     fr: 'Architecte de systèmes IA' } },
      { k: { en: 'Core stack',   fr: 'Stack' },       v: { en: 'Python · C++20 · GCP · RAG · Multi-agent', fr: 'Python · C++20 · GCP · RAG · Multi-agents' } },
      { k: { en: 'Education',    fr: 'Formation' },   v: { en: 'BSc Civil Eng — USACH (6yr)',   fr: 'BSc génie civil — USACH (6 ans)' } },
      { k: { en: 'Past clients', fr: 'Clients passés' }, v: { en: 'BHP Billiton · Hatch',        fr: 'BHP Billiton · Hatch' } },
    ],
    thesisEyebrow: { en: '— Thesis', fr: '— Thèse' },
    thesis: {
      en: 'Safety is not a department. It is a design principle. I am drawn to organizations building AI infrastructure that must be both powerful and trustworthy — and I believe that combination is an architecture problem, not a policy one.',
      fr: "La sécurité n'est pas un département. C'est un principe de conception. Je suis attiré par les organisations qui bâtissent des infrastructures d'IA devant être à la fois puissantes et dignes de confiance — et cette combinaison est, selon moi, un problème d'architecture, pas de politique.",
    },
  };

  return (
    <main className="page-enter">
      <Section noBorder>
        <span className="micro-label">{t.eyebrow[lang]}</span>
        <h1 style={{ fontSize: 'clamp(3rem, 9vw, 8rem)', lineHeight: 0.9, marginTop: 24 }}>
          <span style={{ display: 'block' }}>{t.title[lang][0]}</span>
          <span className="text-rainbow" style={{ display: 'block' }}>{t.title[lang][1]}</span>
        </h1>
      </Section>

      <RainbowBar />

      <Section>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.1fr', gap: 64 }}>
          <div style={{ aspectRatio: '4/5', background: 'var(--tint)', border: '1px solid var(--rule)', position: 'relative' }}>
            <span style={{ position: 'absolute', bottom: 12, left: 12, fontSize: 10, letterSpacing: '0.18em', color: 'var(--ink-4)' }}>— PORTRAIT</span>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
            {t.bio.map((p, i) => (
              <p key={i} style={{ fontSize: 17, lineHeight: 1.55, margin: 0, color: 'var(--ink-2)' }}>
                {p[lang]}
              </p>
            ))}

            <div style={{ marginTop: 24, borderTop: '1px solid var(--ink-1)' }}>
              {t.facts.map((f, i) => (
                <div key={i} style={{ display: 'grid', gridTemplateColumns: '180px 1fr', padding: '14px 0', borderBottom: '1px solid var(--rule)', fontSize: 13, alignItems: 'baseline' }}>
                  <span className="micro-label">{f.k[lang]}</span>
                  <span style={{ fontFamily: 'var(--font-body)' }}>{f.v[lang]}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </Section>

      <Section eyebrow={t.thesisEyebrow[lang]} dark>
        <blockquote className="pullquote" style={{ margin: 0, color: 'var(--paper)' }}>
          <span className="text-rainbow">{t.thesis[lang]}</span>
        </blockquote>
      </Section>
    </main>
  );
};

// ==================== CONTACT ====================
const Contact = ({ lang }) => {
  const t = {
    eyebrow: { en: '— Contact / Brief', fr: '— Contact / Mandat' },
    title:   { en: ['WRITE.', 'SPECIFICALLY.'], fr: ['ÉCRIVEZ.', 'PRÉCISÉMENT.'] },
    lede:    { en: 'The more specific the brief, the faster the yes. Tell me what you are building and where it needs to be more reliable.', fr: "Plus la demande est précise, plus la réponse est rapide. Dites-moi ce que vous construisez et où cela doit être plus fiable." },
    name:    { en: 'Name',    fr: 'Nom' },
    email:   { en: 'Email',   fr: 'Courriel' },
    kind:    { en: 'Engagement type', fr: "Type d'engagement" },
    kinds:   { en: ['Orchestration / infra', 'RAG & memory systems', 'FinOps pipelines', 'Multi-agent system', 'Advisory / audit', 'Something else'],
               fr: ['Orchestration / infra', 'RAG et systèmes de mémoire', 'Pipelines FinOps', 'Système multi-agents', 'Conseil / audit', 'Autre chose'] },
    when:    { en: 'When', fr: 'Quand' },
    msg:     { en: 'Brief',   fr: 'Mandat' },
    msgPh:   { en: 'One paragraph is plenty. What breaks? What needs to be trustworthy?', fr: 'Un paragraphe suffit. Qu’est-ce qui casse ? Qu’est-ce qui doit être fiable ?' },
    submit:  { en: 'Send',    fr: 'Envoyer' },
    ok1:     { en: 'Received.', fr: 'Reçu.' },
    ok2:     { en: 'I will write back within two working days. In English, French, or Spanish, as you prefer.', fr: 'Je répondrai sous deux jours ouvrables. En anglais, français ou espagnol, à votre guise.' },
  };

  const [sent, setSent] = React.useState(false);

  return (
    <main className="page-enter">
      <Section noBorder>
        <span className="micro-label">{t.eyebrow[lang]}</span>
        <h1 style={{ fontSize: 'clamp(3rem, 9vw, 8rem)', lineHeight: 0.9, marginTop: 24 }}>
          <span style={{ display: 'block' }}>{t.title[lang][0]}</span>
          <span className="text-rainbow" style={{ display: 'block' }}>{t.title[lang][1]}</span>
        </h1>
        <p className="lede" style={{ maxWidth: 620, marginTop: 32 }}>{t.lede[lang]}</p>
      </Section>

      <RainbowBar />

      <Section>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.2fr', gap: 80 }}>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
            {[
              { k: lang === 'en' ? 'Email'    : 'Courriel',   v: 'hi@1snob.com',            href: 'mailto:hi@1snob.com' },
              { k: lang === 'en' ? 'Based'    : 'Basé',       v: 'Fonthill, ON',            href: null },
              { k: lang === 'en' ? 'LinkedIn' : 'LinkedIn',   v: 'in/leandroalvarez',       href: 'https://www.linkedin.com/in/leandroalvarez' },
              { k: lang === 'en' ? 'Photo'    : 'Photo',      v: 'leandroalvarez.ca',       href: 'https://leandroalvarez.ca' },
            ].map((c, i) => (
              <div key={i} style={{ padding: '24px 0', borderBottom: '1px solid var(--rule)' }}>
                <span className="micro-label" style={{ display: 'block', marginBottom: 6 }}>— {c.k}</span>
                {c.href
                  ? <a href={c.href} target={c.href.startsWith('http') ? '_blank' : undefined} rel="noreferrer" style={{ fontFamily: 'var(--font-display)', fontSize: 28, fontWeight: 900, textTransform: 'uppercase', textDecoration: 'none' }}>{c.v}</a>
                  : <span style={{ fontFamily: 'var(--font-display)', fontSize: 28, fontWeight: 900, textTransform: 'uppercase' }}>{c.v}</span>}
              </div>
            ))}
          </div>

          {sent ? (
            <div style={{ padding: 32, border: '2px solid var(--ink-1)', boxShadow: '4px 4px 0 var(--ink-1)' }}>
              <h2 style={{ fontSize: 48 }}>{t.ok1[lang]}</h2>
              <p style={{ marginTop: 16, color: 'var(--ink-2)' }}>{t.ok2[lang]}</p>
            </div>
          ) : (
            <form className="form-grid" onSubmit={(e) => { e.preventDefault(); setSent(true); }}>
              <div className="field">
                <label>{t.name[lang]}</label>
                <input required />
              </div>
              <div className="field">
                <label>{t.email[lang]}</label>
                <input required type="email" />
              </div>

              <div className="field">
                <label>{t.kind[lang]}</label>
                <select defaultValue="">
                  <option value="" disabled>—</option>
                  {t.kinds[lang].map((k) => <option key={k}>{k}</option>)}
                </select>
              </div>
              <div className="field">
                <label>{t.when[lang]}</label>
                <input type="text" placeholder="YYYY / MM" />
              </div>

              <div className="field full">
                <label>{t.msg[lang]}</label>
                <textarea rows={5} placeholder={t.msgPh[lang]} />
              </div>

              <div className="full" style={{ marginTop: 16 }}>
                <Btn onClick={null}>{t.submit[lang]}</Btn>
              </div>
            </form>
          )}
        </div>
      </Section>
    </main>
  );
};

Object.assign(window, { Work, About, Contact });