// Bilingual content (PT/EN)
const I18N = {
  pt: {
    nav: { about: 'sobre', skills: 'stack', work: 'projetos', contact: 'contato' },
    hero: {
      meta1: 'fernando.castilho',
      meta2: 'desenvolvedor front-end',
      meta3: 'são paulo · brasil',
      meta4: 'em busca: primeira oportunidade',
      side: '— v.2026 — em construção contínua',
      name1: 'fernando',
      name2: 'castilho',
      tagline: ['Transformando', ' ', 'ideias em interfaces inteligentes', '. Estudante de ', 'Ciência da Computação', ' construindo software com intenção.'],
      scroll: 'role para descobrir',
    },
    about: {
      tag: '01 — quem sou',
      title: ['Não sou só ', <em key="e">um portfólio</em>, '.'],
      p1: 'Apaixonado por tecnologia desde a infância, hoje estudo Ciência da Computação no Senac Santo Amaro com foco em desenvolvimento de software.',
      p2: 'Tenho experiência prática em suporte de TI nível N1 e desenvolvimento de aplicações com Java e front-end. Busco minha primeira oportunidade como dev ou analista de suporte júnior — onde possa contribuir com soluções reais e continuar evoluindo.',
      stats: [
        { k: 'experiência', v: '2', u: 'anos' },
        { k: 'projetos entregues', v: '4', u: '+' },
        { k: 'stack ativa', v: '8', u: 'tech' },
        { k: 'foco atual', v: 'Front-end', u: '/ TI' },
      ],
      log: [
        '> initializing fernando.profile',
        '> loading personality.json',
        '> sintetizando experiências…',
        '> compilando habilidades…',
        '> conectando módulos',
        '> pronto para colaborar',
      ],
    },
    skills: {
      tag: '02 — stack',
      title: ['Ferramentas que ', <em key="e">conecto</em>, '.'],
      sub: 'Cada ponto é uma habilidade. Passe o cursor para inspecionar.',
      categories: { fe: 'frontend', be: 'backend', db: 'dados', it: 'infra/ti', auto: 'automação' },
      learningTag: '02.5 — em desenvolvimento',
      learningTitle: ['Habilidades em ', <em key="e">construção</em>, '.'],
      learningSub: 'O que estou estudando agora — base teórica de CC + linguagens de baixo nível.',
      learning: [
        { lang: 'C', status: 'aprendendo', topics: ['ponteiros', 'alocação dinâmica', 'memória'] },
        { lang: 'C#', status: 'aprendendo', topics: ['POO avançada', '.NET básico'] },
        { lang: 'Estruturas de Dados', status: 'em curso', topics: ['árvores', 'pilhas', 'filas', 'listas encadeadas'] },
        { lang: 'Algoritmos', status: 'em curso', topics: ['recursão', 'complexidade', 'busca e ordenação'] },
      ],
      detail: {
        title: 'inspector',
        sel: 'selecionado',
        cat: 'categoria',
        ctx: 'contexto',
        none: 'nenhum',
      },
    },
    projects: {
      tag: '03 — projetos',
      title: ['O que eu ', <em key="e">construí</em>, '.'],
      sub: 'Cada card abre um case study. Esc fecha.',
      open: 'abrir case →',
      cs: {
        role: 'minha função',
        year: 'ano',
        client: 'cliente',
        stack: 'stack',
        overview: 'visão geral',
        challenge: 'desafio',
        solution: 'solução',
        impact: 'impacto',
        close: 'fechar',
      },
    },
    contact: {
      tag: '04 — contato',
      title: ['Vamos ', <em key="e">construir</em>, ' algo?'],
      sub: 'Terminal interativo. Digite um comando ou clique nas sugestões.',
      welcome: [
        'fernando-shell v1.0.0 — sessão iniciada',
        'digite "help" para ver comandos disponíveis',
        '',
      ],
      help: [
        'comandos disponíveis:',
        '  email      — meu endereço de email',
        '  github     — meu github',
        '  linkedin   — meu linkedin',
        '  whoami     — quem é o fernando',
        '  stack      — minha stack',
        '  hire       — por que me contratar',
        '  clear      — limpar terminal',
        '  help       — esta lista',
      ],
      whoami: 'fernando castilho · dev front-end junior · estudante de ciência da computação @ senac santo amaro · são paulo, brasil',
      hire: [
        'porque trago energia + execução:',
        '  · base sólida em html/css/js + bootstrap',
        '  · experiência com java/oop e mysql',
        '  · vivência real com suporte n1 (active directory, o365)',
        '  · aprendo rápido, entrego com cuidado',
      ],
      stack: 'frontend: html5, css3, bootstrap, aos.js · backend: java, jdbc · banco: mysql · infra: active directory, office 365 · automação: power automate, power bi',
      notFound: (cmd) => `comando não encontrado: ${cmd}. digite "help".`,
      placeholder: 'digite um comando…',
    },
    footer: {
      l: '© 2026 fernando castilho — feito com intenção',
      r: 'são paulo · brasil',
    },
  },
  en: {
    nav: { about: 'about', skills: 'stack', work: 'work', contact: 'contact' },
    hero: {
      meta1: 'fernando.castilho',
      meta2: 'front-end developer',
      meta3: 'são paulo · brazil',
      meta4: 'seeking: first opportunity',
      side: '— v.2026 — continuously building',
      name1: 'fernando',
      name2: 'castilho',
      tagline: ['Turning', ' ', 'ideas into intelligent interfaces', '. Computer Science student building software with ', 'intent', '.'],
      scroll: 'scroll to discover',
    },
    about: {
      tag: '01 — who i am',
      title: ['Not just ', <em key="e">a portfolio</em>, '.'],
      p1: 'Hooked on technology since childhood, today I study Computer Science at Senac Santo Amaro, focused on software development.',
      p2: 'Hands-on experience in N1 IT support and building apps with Java and front-end stacks. Looking for my first opportunity as a junior developer or support analyst — where I can contribute real solutions and keep growing.',
      stats: [
        { k: 'experience', v: '2', u: 'yrs' },
        { k: 'shipped projects', v: '4', u: '+' },
        { k: 'active stack', v: '8', u: 'tech' },
        { k: 'current focus', v: 'Front-end', u: '/ IT' },
      ],
      log: [
        '> initializing fernando.profile',
        '> loading personality.json',
        '> synthesizing experiences…',
        '> compiling skills…',
        '> connecting modules',
        '> ready to collaborate',
      ],
    },
    skills: {
      tag: '02 — stack',
      title: ['Tools I ', <em key="e">connect</em>, '.'],
      sub: 'Each node is a skill. Hover to inspect.',
      categories: { fe: 'frontend', be: 'backend', db: 'data', it: 'infra/it', auto: 'automation' },
      learningTag: '02.5 — in development',
      learningTitle: ['Skills under ', <em key="e">construction</em>, '.'],
      learningSub: 'What I\'m studying right now — CS fundamentals + low-level languages.',
      learning: [
        { lang: 'C', status: 'learning', topics: ['pointers', 'dynamic allocation', 'memory'] },
        { lang: 'C#', status: 'learning', topics: ['advanced OOP', '.NET basics'] },
        { lang: 'Data Structures', status: 'in progress', topics: ['trees', 'stacks', 'queues', 'linked lists'] },
        { lang: 'Algorithms', status: 'in progress', topics: ['recursion', 'complexity', 'search & sort'] },
      ],
      detail: { title: 'inspector', sel: 'selected', cat: 'category', ctx: 'context', none: 'none' },
    },
    projects: {
      tag: '03 — work',
      title: ['What I ', <em key="e">built</em>, '.'],
      sub: 'Each card opens a case study. Esc closes.',
      open: 'open case →',
      cs: {
        role: 'role',
        year: 'year',
        client: 'client',
        stack: 'stack',
        overview: 'overview',
        challenge: 'challenge',
        solution: 'solution',
        impact: 'impact',
        close: 'close',
      },
    },
    contact: {
      tag: '04 — contact',
      title: ['Let\'s ', <em key="e">build</em>, ' something?'],
      sub: 'Interactive terminal. Type a command or click a suggestion.',
      welcome: [
        'fernando-shell v1.0.0 — session started',
        'type "help" to see available commands',
        '',
      ],
      help: [
        'available commands:',
        '  email      — my email address',
        '  github     — my github',
        '  linkedin   — my linkedin',
        '  whoami     — who fernando is',
        '  stack      — my stack',
        '  hire       — why hire me',
        '  clear      — clear terminal',
        '  help       — this list',
      ],
      whoami: 'fernando castilho · jr front-end dev · cs student @ senac santo amaro · são paulo, brazil',
      hire: [
        'because i bring energy + execution:',
        '  · solid base in html/css/js + bootstrap',
        '  · experience with java/oop and mysql',
        '  · real-world n1 support (active directory, o365)',
        '  · fast learner, careful shipper',
      ],
      stack: 'frontend: html5, css3, bootstrap, aos.js · backend: java, jdbc · db: mysql · infra: active directory, office 365 · automation: power automate, power bi',
      notFound: (cmd) => `command not found: ${cmd}. type "help".`,
      placeholder: 'type a command…',
    },
    footer: {
      l: '© 2026 fernando castilho — built with intent',
      r: 'são paulo · brazil',
    },
  },
};

// Skill definitions (shared, language-agnostic where possible)
const SKILLS = [
  { id: 'html', name: 'HTML5 & CSS3',     cat: 'fe',   ctx: { pt: 'estrutura semântica + layout responsivo', en: 'semantic structure + responsive layout' }, glyph: '⟨/⟩', x: 14, y: 26 },
  { id: 'js',   name: 'JavaScript',       cat: 'fe',   ctx: { pt: 'interatividade no browser', en: 'browser interactivity' }, glyph: 'JS', x: 28, y: 44 },
  { id: 'react',name: 'React',            cat: 'fe',   ctx: { pt: 'componentes + estado', en: 'components + state' }, glyph: '⚛', x: 38, y: 28 },
  { id: 'bs',   name: 'Bootstrap',        cat: 'fe',   ctx: { pt: 'framework css responsivo', en: 'responsive css framework' }, glyph: '◆', x: 10, y: 60 },
  { id: 'aos',  name: 'AOS.js',           cat: 'fe',   ctx: { pt: 'animações on-scroll', en: 'scroll-triggered animations' }, glyph: '↗', x: 22, y: 78 },
  { id: 'svg',  name: 'SVG / Canvas',     cat: 'fe',   ctx: { pt: 'gráficos · partículas · grafos', en: 'graphics · particles · graphs' }, glyph: '✦', x: 38, y: 76 },
  { id: 'java', name: 'Java & POO',       cat: 'be',   ctx: { pt: 'orientação a objetos · acadêmico', en: 'object-oriented · academic' }, glyph: '☕', x: 62, y: 22 },
  { id: 'jdbc', name: 'JDBC',             cat: 'be',   ctx: { pt: 'java ↔ banco de dados', en: 'java ↔ database' }, glyph: '⇄', x: 72, y: 36 },
  { id: 'mysql',name: 'MySQL',            cat: 'db',   ctx: { pt: 'modelagem relacional · sql', en: 'relational modeling · sql' }, glyph: '◇', x: 82, y: 24 },
  { id: 'ad',   name: 'Active Directory', cat: 'it',   ctx: { pt: 'gestão de usuários · suporte n1', en: 'user management · n1 support' }, glyph: '◉', x: 86, y: 50 },
  { id: 'o365', name: 'Office 365',       cat: 'it',   ctx: { pt: 'sharepoint · exchange', en: 'sharepoint · exchange' }, glyph: '☷', x: 74, y: 68 },
  { id: 'pbi',  name: 'Power BI',         cat: 'auto', ctx: { pt: 'análise de dados · dashboards', en: 'data analysis · dashboards' }, glyph: '⚡', x: 88, y: 80 },
  { id: 'pa',   name: 'Power Automate',   cat: 'auto', ctx: { pt: 'fluxos automatizados', en: 'automated workflows' }, glyph: '⟁', x: 60, y: 80 },
  { id: 'core', name: 'Fernando',         cat: 'core', ctx: { pt: 'eu mesmo', en: 'me' }, glyph: 'F', x: 50, y: 50 },
];

const SKILL_EDGES = [
  ['core','html'], ['core','js'], ['core','react'], ['core','java'], ['core','ad'], ['core','pa'],
  ['html','bs'], ['html','aos'], ['js','aos'], ['html','js'],
  ['js','react'], ['react','svg'], ['js','svg'], ['html','svg'],
  ['java','jdbc'], ['jdbc','mysql'], ['ad','o365'],
  ['pa','o365'], ['pa','pbi'], ['o365','pbi'],
  ['core','mysql'], ['core','o365'], ['core','svg'],
];

// Projects content
const PROJECTS = [
  {
    id: 'herbs',
    num: '01',
    cat: 'frontend',
    name: 'Herbs Green',
    color: { pt: '#00ffa3', en: '#00ffa3' },
    short: {
      pt: 'Site institucional para projeto de educação ambiental com hortas pedagógicas em escolas públicas.',
      en: 'Institutional site for an environmental education project bringing pedagogical gardens to public schools.',
    },
    role: { pt: 'Frontend Developer', en: 'Frontend Developer' },
    year: '2025 — atual / current',
    client: 'Senac São Paulo',
    stack: ['HTML5', 'CSS3', 'Bootstrap', 'AOS.js'],
    overview: {
      pt: 'Construção do site institucional do projeto Herbs Green, iniciativa do Senac São Paulo focada em educação ambiental através de hortas pedagógicas em escolas públicas. O desafio: traduzir a calma e a natureza do projeto em uma interface viva, responsiva e acessível.',
      en: 'Built the institutional site for Herbs Green, a Senac São Paulo initiative focused on environmental education through pedagogical gardens in public schools. The challenge: translate the calm and nature of the project into a living, responsive, accessible interface.',
    },
    challenge: {
      pt: 'Comunicar uma proposta verde sem cair em clichês, em uma estrutura totalmente responsiva e com microanimações que reforçassem a sensação de crescimento.',
      en: 'Communicate a green proposal without falling into clichés, on a fully responsive structure with micro-animations that reinforce the feeling of growth.',
    },
    solution: {
      pt: 'Layout em grid com hierarquia clara, paleta orgânica, animações on-scroll com AOS.js, integração de imagens reais das hortas e CTAs alinhados ao público escolar.',
      en: 'Grid layout with clear hierarchy, organic palette, on-scroll animations with AOS.js, real garden imagery, and CTAs aligned with the school audience.',
    },
    impact: [
      { num: '100%', lbl: { pt: 'responsivo', en: 'responsive' } },
      { num: '< 2s', lbl: { pt: 'tempo de load', en: 'load time' } },
      { num: 'A11y', lbl: { pt: 'pensado para todos', en: 'built for all' } },
    ],
  },
  {
    id: 'estoque',
    num: '02',
    cat: 'fullstack',
    name: 'Sistema de Gestão de Estoque',
    color: { pt: '#7c5cff', en: '#7c5cff' },
    short: {
      pt: 'Aplicação desktop para gerenciamento de supermercado: estoque, vendas, autenticação e banco relacional.',
      en: 'Desktop app for supermarket management: stock, sales, authentication and relational database.',
    },
    role: { pt: 'Fullstack Developer', en: 'Fullstack Developer' },
    year: 'jan–jul / 2024',
    client: 'São Judas Tadeu',
    stack: ['Java', 'Java Swing', 'MySQL', 'JDBC'],
    overview: {
      pt: 'Sistema desktop completo para um supermercado fictício, desenvolvido como projeto acadêmico. O foco foi unir orientação a objetos sólida, persistência relacional e UX desktop coerente em um único produto funcional.',
      en: 'Complete desktop system for a fictional supermarket, built as an academic project. The focus was uniting solid OOP, relational persistence and coherent desktop UX into a single functional product.',
    },
    challenge: {
      pt: 'Modelar o domínio (produtos, vendas, usuários) em Java, persistir em MySQL via JDBC e expor tudo numa UI Swing usável por operadores reais — sem framework, no osso.',
      en: 'Model the domain (products, sales, users) in Java, persist via JDBC to MySQL, and expose it through a Swing UI usable by real operators — no framework, bare metal.',
    },
    solution: {
      pt: 'Arquitetura em camadas (UI → service → DAO), CRUD completo, login com hash, registro de vendas com baixa automática de estoque, e dashboard de estoque crítico.',
      en: 'Layered architecture (UI → service → DAO), complete CRUD, hashed login, sales registration with automatic stock decrement, and critical-stock dashboard.',
    },
    impact: [
      { num: '6+', lbl: { pt: 'meses de projeto', en: 'months in build' } },
      { num: '4', lbl: { pt: 'módulos integrados', en: 'integrated modules' } },
      { num: 'OOP', lbl: { pt: 'arquitetura limpa', en: 'clean architecture' } },
    ],
  },
  {
    id: 'cnr',
    num: '03',
    cat: 'website',
    name: 'CNR Comunicação',
    color: { pt: '#00e5ff', en: '#00e5ff' },
    short: {
      pt: 'Site institucional desenvolvido para empresa de comunicação. Identidade visual aplicada e entregue ao cliente.',
      en: 'Institutional website built for a communications company. Visual identity applied and delivered to the client.',
    },
    role: { pt: 'Web Developer', en: 'Web Developer' },
    year: '2024',
    client: 'CNR Comunicação',
    stack: ['HTML', 'CSS', 'Identidade visual'],
    overview: {
      pt: 'Site institucional para a CNR Comunicação. Trabalho cliente real: levantamento de requisitos, aplicação da identidade existente, e entrega de um produto navegável e responsivo.',
      en: 'Institutional site for CNR Comunicação. Real-client engagement: requirements gathering, application of existing identity, and delivery of a navigable, responsive product.',
    },
    challenge: {
      pt: 'Respeitar a identidade visual já consolidada da empresa enquanto trazia o site para um padrão atual de leitura, hierarquia e responsividade.',
      en: 'Respect the company\'s established visual identity while bringing the site up to current standards of readability, hierarchy and responsiveness.',
    },
    solution: {
      pt: 'Estrutura semântica em HTML, CSS modular, paleta corporativa preservada, navegação simples e direta para o público B2B.',
      en: 'Semantic HTML, modular CSS, preserved corporate palette, and direct navigation tailored for the B2B audience.',
    },
    impact: [
      { num: '1°', lbl: { pt: 'cliente real entregue', en: 'real client delivered' } },
      { num: '100%', lbl: { pt: 'identidade preservada', en: 'identity preserved' } },
      { num: '✓', lbl: { pt: 'aprovado pelo cliente', en: 'client approved' } },
    ],
  },
  {
    id: 'msolution',
    num: '04',
    cat: 'marketing digital',
    name: 'M Solution Digital',
    color: { pt: '#ffb450', en: '#ffb450' },
    short: {
      pt: 'Landing page de captação de clientes via WhatsApp para agência de marketing digital.',
      en: 'Lead-capture landing page via WhatsApp for a digital marketing agency.',
    },
    role: { pt: 'Frontend Developer', en: 'Frontend Developer' },
    year: '2024',
    client: 'M Solution Digital',
    stack: ['HTML5', 'CSS3', 'WhatsApp API'],
    overview: {
      pt: 'Landing page focada em conversão para agência de marketing digital. Cada elemento da página foi pensado para reduzir fricção e levar o usuário direto ao WhatsApp comercial.',
      en: 'Conversion-focused landing page for a digital marketing agency. Every element on the page was designed to reduce friction and route users straight to commercial WhatsApp.',
    },
    challenge: {
      pt: 'Maximizar conversão em uma única tela, comunicar serviços ofertados e disparar a ação principal (mensagem WhatsApp) com mínima fricção.',
      en: 'Maximize conversion on a single screen, communicate offered services, and trigger the main action (WhatsApp message) with minimum friction.',
    },
    solution: {
      pt: 'Hero com proposta de valor clara, prova social, lista de serviços modular, e CTA principal para WhatsApp em pontos estratégicos da rolagem.',
      en: 'Hero with clear value proposition, social proof, modular service list, and a primary WhatsApp CTA placed at strategic scroll points.',
    },
    impact: [
      { num: '1', lbl: { pt: 'tela de conversão', en: 'conversion screen' } },
      { num: '3+', lbl: { pt: 'CTAs estratégicos', en: 'strategic CTAs' } },
      { num: '⏵', lbl: { pt: 'aguardando hospedagem', en: 'awaiting hosting' } },
    ],
  },
];