// copy.jsx — ES/EN translations (v2: honest, warm, junior)

const COPY = {
  es: {
    nav: {
      about: 'Sobre mí',
      work: 'Proyectos',
      training: 'Formación',
      contact: 'Contacto',
      blog: 'Blog',
    },
    hero: {
      eyebrow: 'Abierta a oportunidades · Jaén o remoto',
      headlineLines: [
        ['Desarrolladora ', 'fullstack', ' junior'],
        ['con mucha ', 'actitud', ' '],
        ['y aún más ganas de', ' aprender', '.'],
      ],
      lede: [
        <>
          Soy <b>Paula Fernández Cañas</b>. He estado trabajando como{' '}
          <b>desarrolladora web junior</b> en BNT Business Telecom, en proyectos
          web e <b>IoT</b>.
        </>,
        <>
          Empecé por el front (HTML, CSS, JavaScript, Tailwind) y acabé tocando
          backend con <b>PHP, Laravel y MySQL</b>. Me atrae el backend y es por
          donde quiero seguir creciendo. Actualmente también me estoy formando
          en <b>IA y Big Data</b>.
        </>,
      ],
      cta1: 'Ver proyectos',
      cta2: 'Descargar CV',
      info: {
        role: 'Junior Developer',
        focus: 'Fullstack (con interés en back)',
        location: 'Jaén, ES · GMT+1',
        availability: 'Open to work — remoto o Jaén',
      },
      portraitPh: 'arrastra una foto',
    },
    projects: {
      label: 'Proyectos',
      title: 'Proyectos en los que estoy trabajando',
      roleLabel: 'rol',
      meta: 'Desliza →',
      list: [
        /* 01 — pendiente de revisar
        {
          n: "01",
          name: "Secure Files App",
          sub: "Plataforma de archivos con 2FA",
          tag: "Académico",
          status: "done",
          role: "fullstack — sobre todo backend y auth",
          desc: "Plataforma para subir, compartir y solicitar archivos de forma segura. Implementé autenticación con 2FA, control de acceso por roles y un flujo de solicitudes por email.",
          stack: ["Laravel", "PHP", "JavaScript", "Docker", "PL/SQL"],
          year: "2024",
          link: "https://paula-fernandez-canas.vercel.app/project-1.html",
        },
        */
        /* 02 — pendiente de revisar
        {
          n: "02",
          name: "Compiso",
          sub: "TFG · Plataforma para encontrar compañeros de piso",
          tag: "TFG",
          status: "done",
          role: "diseño, front y backend ligero",
          desc: "Mi proyecto de fin de grado. Una web que conecta inquilinos y propietarios con un sistema de matches, chat interno, valoraciones y notificaciones por email.",
          stack: ["PHP", "MySQL", "Tailwind", "JavaScript", "EmailJS"],
          year: "2024",
          link: "https://paula-fernandez-canas.vercel.app/project-2.html",
        },
        */
        {
          n: '03',
          name: 'Finanzor',
          sub: 'App de finanzas personales mobile-first',
          tag: 'Personal',
          status: 'wip',
          role: 'diseño + frontend + backend — proyecto en solitario',
          desc: 'Aplicación personal para registrar ingresos y gastos por categorías, ver un calendario de movimientos, gestionar presupuestos mensuales y crear metas de ahorro con seguimiento. Permite importar CSV bancario y exportar datos. Multiusuario.',
          stack: [
            'React 18',
            'Vite',
            'Tailwind',
            'Supabase',
            'React Query',
            'Vercel',
          ],
          year: '2025 →',
          thumb: 'assets/images/finanzor.png',
          link: 'https://paula-fernandez-canas.vercel.app/project-3.html',
        },
        {
          n: '04',
          name: 'Mi Armario',
          sub: 'PWA para gestionar tu armario digital',
          tag: 'Personal',
          status: 'wip',
          role: 'arquitectura, diseño y desarrollo — proyecto en solitario',
          desc: 'App web PWA para organizar ropa por categorías, crear outfits y gestionar prendas en venta (flujo Baúl → En Venta → Vendida). Integra Web Share Target para importar desde Wallapop o Vinted y una lista de deseos con preview automático de URLs.',
          stack: [
            'React 18',
            'TypeScript',
            'Vite',
            'Tailwind',
            'Supabase',
            'Zustand',
            'PWA',
          ],
          year: '2025 →',
          thumb: 'assets/images/miarmario.png',
          link: 'https://paula-fernandez-canas.vercel.app/project-4.html',
        },
        {
          n: '05',
          name: 'AparcaYa',
          sub: 'Ocupación en tiempo real y predicción de aparcamientos en Málaga',
          tag: 'IA & Big Data',
          status: 'wip',
          role: 'frontend completo — mapa, chatbot, integración de datos y despliegue',
          desc: 'App web que muestra en tiempo real la ocupación de los 12 aparcamientos públicos de Málaga y predice disponibilidad a 1-2 horas. Incluye mapa interactivo con Leaflet, semáforo de ocupación y un chatbot que recomienda aparcamiento según tu destino. Modelo predictivo en scikit-learn exportado a JS; visión artificial con MobileNetV2 para clasificar plazas desde cámara de tráfico.',
          stack: [
            'JavaScript',
            'Leaflet.js',
            'Python',
            'scikit-learn',
            'TensorFlow',
            'OpenCV',
            'Supabase',
            'Vercel',
          ],
          year: '2026 →',
          thumb: 'assets/images/aparcaya.png',
          link: 'https://paula-fernandez-canas.vercel.app/project-5.html',
        },
        {
          n: '06',
          name: 'Gestión Interna · Piensos Urbano',
          sub: 'App para modernizar el flujo de trabajo de un negocio familiar',
          tag: 'Freelance',
          status: 'wip',
          role: 'fullstack en equipo con Aurora Medel',
          desc: 'Proyecto en equipo con Aurora Medel para un familiar suyo con un negocio de piensos. El cliente gestionaba todo con Canva y Excel — construimos una aplicación interna para centralizar y digitalizar ese flujo de trabajo.',
          stack: ['Laravel', 'PHP', 'JavaScript', 'Docker', 'PL/SQL'],
          year: '2025 →',
          link: '#',
        },
      ],
    },
    stack: {
      label: 'Stack',
      title: 'Tecnologías y Lenguajes',
      meta: 'Honesta — no soy senior de nada',
      skills: [
        { n: 'HTML',         icon: 'https://cdn.simpleicons.org/html5/e34f26',                                                       pct: 90 },
        { n: 'CSS',          icon: 'https://cdn.simpleicons.org/css/1572b6',                                                          pct: 85 },
        { n: 'JavaScript',   icon: 'https://cdn.simpleicons.org/javascript/f7df1e',                                                   pct: 82 },
        { n: 'Git',          icon: 'https://cdn.simpleicons.org/git/f05032',                                                          pct: 82 },
        { n: 'Tailwind',     icon: 'https://cdn.simpleicons.org/tailwindcss/06b6d4',                                                  pct: 75 },
        { n: 'PHP',          icon: 'https://cdn.simpleicons.org/php/8892bf',                                                          pct: 72 },
        { n: 'Laravel',      icon: 'https://cdn.simpleicons.org/laravel/ff2d20',                                                      pct: 72 },
        { n: 'MySQL',        icon: 'https://cdn.simpleicons.org/mysql/4479a1',                                                        pct: 68 },
        { n: 'Bootstrap',    icon: 'https://cdn.simpleicons.org/bootstrap/7952b3',                                                    pct: 65 },
        { n: 'jQuery',       icon: 'https://cdn.simpleicons.org/jquery/0769ad',                                                       pct: 63 },
        { n: 'Figma',        icon: 'https://cdn.simpleicons.org/figma/f24e1e',                                                        pct: 62 },
        { n: 'CodeIgniter',  icon: 'https://cdn.simpleicons.org/codeigniter/ef4223',                                                  pct: 58 },
        { n: 'Linux',        icon: 'https://cdn.simpleicons.org/linux/111111',                                                        pct: 55 },
        { n: 'React',        icon: 'https://cdn.simpleicons.org/react/61dafb',                                                        pct: 52 },
        { n: 'XML',          icon: null,                                                                                               pct: 52 },
        { n: 'JSON',         icon: null,                                                                                               pct: 50 },
        { n: 'TypeScript',   icon: 'https://cdn.simpleicons.org/typescript/3178c6',                                                   pct: 45 },
        { n: 'PL/SQL',       icon: 'https://cdn.jsdelivr.net/gh/devicons/devicon@v2.15.1/icons/oracle/oracle-original.svg',           pct: 42 },
        { n: 'Docker',       icon: 'https://cdn.simpleicons.org/docker/2496ed',                                                       pct: 42 },
        { n: 'Node.js',      icon: 'https://cdn.simpleicons.org/nodedotjs/339933',                                                    pct: 38 },
        { n: 'Python',       icon: 'https://cdn.simpleicons.org/python/3776ab',                                                       pct: 35 },
        { n: 'Vitest',       icon: 'https://cdn.simpleicons.org/vitest/6e9f18',                                                       pct: 33 },
        { n: 'Java',         icon: 'https://cdn.jsdelivr.net/gh/devicons/devicon@v2.15.1/icons/java/java-original.svg',               pct: 30 },
        { n: 'MATLAB',       icon: 'https://cdn.jsdelivr.net/gh/devicons/devicon@v2.15.1/icons/matlab/matlab-original.svg',           pct: 30 },
        { n: 'Oracle DB',    icon: 'https://cdn.jsdelivr.net/gh/devicons/devicon@v2.15.1/icons/oracle/oracle-original.svg',           pct: 30 },
        { n: 'Cypress',      icon: 'https://cdn.simpleicons.org/cypress/69d3a7',                                                      pct: 28 },
        { n: 'Google Cloud', icon: 'https://cdn.simpleicons.org/googlecloud/4285f4',                                                  pct: 28 },
        { n: 'Spring',       icon: 'https://cdn.simpleicons.org/spring/6db33f',                                                       pct: 25 },
        { n: 'AWS',          icon: 'https://cdn.jsdelivr.net/gh/devicons/devicon@v2.15.1/icons/amazonwebservices/amazonwebservices-original.svg', pct: 25 },
        { n: 'C++',          icon: 'https://cdn.jsdelivr.net/gh/devicons/devicon@v2.15.1/icons/cplusplus/cplusplus-original.svg',     pct: 25 },
        { n: '.NET',         icon: 'https://cdn.simpleicons.org/dotnet/512bd4',                                                       pct: 20 },
      ],
    },
    about: {
      label: 'Sobre mí',
      title: 'Un poco de mi trayectoria.',
      p1: (
        <>
          Mi interés por la tecnología empezó mucho antes del bachillerato, pero
          fue ahí donde di mi primer paso real: elegí la rama tecnológica y fue
          donde escribí mis primeras líneas de código. Después me decanté por
          estudiar <b>Ingeniería Telemática</b> en Málaga — aprendí muchas
          cosas, pero sentí que necesitaba algo más concreto y que siempre
          podría retomar la carrera. Así que empecé un{' '}
          <b>Grado Superior de Desarrollo de Aplicaciones Web</b> que me
          encantó. Ahí supe que esto era lo mío: aprendí mucho y me llevé muy
          buenos compañeros.
        </>
      ),
      p2: (
        <>
          Hice las prácticas del grado en <b>Toomba Digital Agency</b>, donde
          aprendí el flujo completo de un proyecto desde cero: esquemas, casos
          de uso, diseño en <b>Figma</b> y desarrollo real con <b>Laravel</b>,
          Eloquent y 2FA. Después de un verano formándome,{' '}
          <b>BNT Business Telecom</b> me dio la oportunidad de entrar como
          desarrolladora. Allí toqué mucho: Git, pipelines, trabajo en equipo,
          Laravel, JavaScript, CodeIgniter, MySQL, CSS, <b>Figma</b>... y
          trabajé en proyectos <b>IoT</b> con conexiones entre código y
          dispositivos físicos, además de migrar a mano un proyecto de{' '}
          <b>Laravel 5.4 a Laravel 12</b>.
        </>
      ),
      p3: (
        <>
          Por una situación personal complicada tuve que dejar BNT y Málaga y
          volver a Jaén con mi familia. Pero estoy dispuesta a volver al sector
          con más fuerza y con muchas ganas de seguir aprendiendo. Lo que busco
          es un <b>equipo</b> donde crecer bien.
        </>
      ),
      timeline: [
        {
          when: 'Ahora',
          what: 'En búsqueda activa',
          note: 'Buscando mi siguiente oportunidad. Abierta a roles fullstack o backend, en Jaén o remoto.',
          now: true,
        },
        {
          when: 'nov. 2025 – jun. 2026',
          what: 'Desarrolladora junior · BNT Business Telecom',
          note: 'Fullstack en proyectos web e IoT: Git, pipelines, Laravel, CodeIgniter, JavaScript, MySQL, Figma. Conexiones entre código y dispositivos físicos. Migración de Laravel 5.4 a 12.',
        },
        {
          when: 'feb. – jun. 2025',
          what: 'Prácticas · Toomba Digital Agency',
          note: 'Proyecto real en Laravel con Eloquent y 2FA. Esquemas, casos de uso y diseño en Figma — aprendí el flujo completo de un proyecto desde cero.',
        },
        {
          when: 'sept. 2023 – jun. 2025',
          what: 'Grado Superior · Desarrollo de Aplicaciones Web',
          note: 'Donde supe que esto era lo mío. TFG: Compiso, plataforma para compañeros de piso.',
        },
        {
          when: 'sept. 2022 – sept. 2023',
          what: 'Ingeniería Telemática',
          note: 'Bases de programación, C++, Matlab y un nuevo enfoque.',
        },
        {
          when: 'sept. 2020 – jun. 2022',
          what: 'Bachillerato tecnológico · IES Huarte de San Juan',
          note: 'La rama tecnológica fue la decisión que lo cambió todo.',
        },
      ],
    },
    training: {
      label: 'Formación',
      title: 'Educación y certificaciones.',
      eduLabel: 'Educación',
      certLabel: 'Licencias y certificaciones',
      langsLabel: 'Idiomas',
      edu: [
        {
          school: 'MEDAC',
          degree: 'Técnico Superior en Desarrollo de Aplicaciones Web',
          period: 'sept. 2023 – jun. 2025',
          logo: 'assets/images/MEDAC_imagotipo_cuadr_azul_PNG.png',
        },
        {
          school: 'IES Huarte de San Juan',
          degree: 'Bachillerato Tecnológico',
          period: 'sept. 2020 – jun. 2022',
          logo: 'https://ieshuartedesanjuan.es/wp-content/uploads/2020/03/cropped-logo1-320x320.png',
        },
      ],
      certs: [
        {
          name: 'Programación en IA y Big Data aplicables en 5G',
          issuer: 'Formación en Tecnología 5G · Polo Digital',
          date: 'En curso · 2026',
          highlight: true,
          icon: '🤖',
        },
        {
          name: 'Introducción al Big Data y la Inteligencia Artificial',
          issuer: 'Grupo Aspasia',
          date: 'mar. 2026',
          icon: '📊',
        },
        {
          name: 'Cisco CCNA — Fundamentos de networking para redes IP',
          issuer: 'Udemy',
          date: 'mar. 2026',
          icon: 'https://cdn.simpleicons.org/cisco/1BA0D7',
        },
        {
          name: 'Ciberseguridad avanzada en entornos de tecnologías de la operación',
          issuer: 'Hedima DN Formación',
          date: '',
          icon: '🔐',
        },
        {
          name: 'Curso de .NET',
          issuer: 'OpenWebinars',
          date: '',
          icon: 'https://cdn.simpleicons.org/dotnet/512BD4',
        },
        {
          name: 'Curso de Spring Boot y MVC',
          issuer: 'OpenWebinars',
          date: '',
          icon: 'https://cdn.simpleicons.org/spring/6DB33F',
        },
        {
          name: 'Curso TypeScript',
          issuer: 'OpenWebinars',
          date: '',
          icon: 'https://cdn.simpleicons.org/typescript/3178C6',
        },
        {
          name: 'Curso de Python 3',
          issuer: 'OpenWebinars',
          date: '',
          icon: 'https://cdn.simpleicons.org/python/3776AB',
        },
        {
          name: 'Curso de Spring Core 5',
          issuer: 'OpenWebinars',
          date: '',
          icon: 'https://cdn.simpleicons.org/spring/6DB33F',
        },
        {
          name: 'Certificado MATLAB',
          issuer: 'MathWorks',
          date: 'feb. 2023',
          icon: 'https://cdn.jsdelivr.net/gh/devicons/devicon@v2.15.1/icons/matlab/matlab-original.svg',
        },
      ],
      langs: [
        {
          name: 'Español',
          level: 'Nativo',
          icon: '🇪🇸',
        },
        {
          name: 'Inglés',
          level: 'B1',
          icon: 'EN',
        },
      ],
    },
    blog: {
      label: 'Blog',
      title: 'Mis descubrimientos.',
      meta: 'Notas de campo · honestas',
      intro:
        'No soy ninguna experta, pero me encanta aprender cosas nuevas y compartir mis descubrimientos.',
      empty: 'Pronto más notas.',
      readMore: 'leer',
      seeAll: 'Ver todas →',
      posts: [
        {
          date: '2026 · 06 · 25',
          kind: 'Proyecto',
          title: 'AparcaYa: predicción de aparcamiento en tiempo real con ML y visión artificial',
          excerpt:
            'Proyecto final del curso de IA y Big Data junto a Luisa Moreira Mendoza. Construimos un Random Forest para predecir la ocupación de los 12 aparcamientos de Málaga a 1-2 horas vista, y un modelo de visión artificial con MobileNetV2 para clasificar plazas desde cámaras de tráfico reales. Todo integrado con un chatbot y mapa interactivo.',
          time: '4 min',
          link: 'https://www.linkedin.com/posts/paula-fernandez-canas_smartcity-machinelearning-python-share-7475982668053037056-oPE4/',
        },
        {
          date: '2026 · 06 · 25',
          kind: 'Formación',
          title: 'Cerrando el curso de IA y Big Data en 5G',
          excerpt:
            'Ha sido breve pero intenso. Me llevo bases sólidas en tecnologías que no conocía, proyectos que me han hecho pensar de verdad y un grupo de compañeros estupendo. Gracias al profesor Pablo Udias por conseguir que todo pareciera fácil y divertido.',
          time: '2 min',
          link: 'https://www.linkedin.com/posts/paula-fernandez-canas_ia-bigdata-formacionen5g-share-7475985760723288065-c1JW/',
        },
        {
          date: '2026 · 06 · 07',
          kind: 'Formación',
          title: 'Mi primer flujo ETL con Pentaho Data Integration',
          excerpt:
            'En clase monté un pipeline completo: validación de CSVs, limpieza, unión de datos de clientes y tarifas, cálculo de costes y generación de informe. Con Job automatizado y control de errores por email.',
          time: '3 min',
          link: 'https://www.linkedin.com/posts/paula-fernandez-canas_pentaho-etl-dataanalytics-activity-7468338312672477185-se15',
        },
        {
          date: '2026 · 06 · 01',
          kind: 'Formación',
          title: 'Primer día en el curso de IA y Big Data',
          excerpt:
            'Empiezo el curso de Programación en IA y Big Data en el Polo Digital (formación en tecnologías 5G). Java, Python, Power BI, modelos de IA, Pentaho... promete mucho.',
          time: '2 min',
          link: 'https://www.linkedin.com/posts/paula-fernandez-canas_ia-bigdata-programaciaejn-activity-7464775232483151872-TBKe',
        },
      ],
    },
    contact: {
      label: 'Contacto',
      titlePre: '¿Buscáis a una junior',
      titleAccent: 'con ganas',
      titlePost: ' para vuestro equipo?',
      kicker:
        'Estoy abierta a un puesto fullstack o backend, en Jaén o remoto. Si tu equipo necesita de alguien con muchas ideas y motivación, mándame un correo y hablamos!',
      copy: 'Copiar correo',
      copied: '¡Copiado!',
      links: [
        {
          name: 'LinkedIn',
          url: 'https://www.linkedin.com/in/paula-fernandez-canas/',
        },
        { name: 'GitHub', url: 'https://github.com/paulafc30' },
        { name: 'CV (pdf)', url: '#' },
      ],
      form: {
        title: 'Escríbeme',
        namePh: 'Tu nombre',
        emailPh: 'Tu email',
        msgPh: 'Tu mensaje...',
        send: 'Enviar →',
        sending: 'Enviando...',
        sent: '¡Mensaje enviado! Te respondo pronto.',
        error: 'Algo salió mal. Prueba por email directamente.',
      },
    },
    footer: {
      left: '© 2026 Paula Fernández Cañas',
      mid: 'Jaén, ES',
      right: '',
    },
  },

  en: {
    nav: {
      about: 'About',
      work: 'Projects',
      training: 'Training',
      contact: 'Contact',
      blog: 'Blog',
    },
    hero: {
      eyebrow: 'Open to opportunities · Jaén, Andalusia or remote',
      headlineLines: [
        ['Junior ', 'fullstack', ' developer'],
        ['with a lot of attitude', ' '],
        ['and even more', ' eagerness to learn', '.'],
      ],
      lede: [
        <>
          I'm <b>Paula Fernández Cañas</b>. I've been working as a{' '}
          <b>junior web developer</b> at BNT Business Telecom, on web and{' '}
          <b>IoT</b> projects.
        </>,
        <>
          I started on the front (HTML, CSS, JavaScript, Tailwind) and ended up
          writing backend with <b>PHP, Laravel and MySQL</b>. The backend is
          where I want to keep growing.
        </>,
        <>
          I'm also currently studying <b>AI and Big Data</b>.
        </>,
      ],
      cta1: 'See projects',
      cta2: 'Download CV',
      info: {
        role: 'Junior Developer',
        focus: 'Fullstack (backend-focused)',
        location: 'Jaén, Andalusia · GMT+1',
        availability: 'Open to work — remote or Jaén, Andalusia',
      },
      portraitPh: 'drop a photo',
    },
    projects: {
      label: 'Projects',
      title: 'Projects I am working on',
      roleLabel: 'role',
      meta: 'Swipe →',
      list: [
        /* 01 — pending review
        {
          n: "01",
          name: "Secure Files App",
          sub: "File platform with 2FA",
          tag: "Academic",
          status: "done",
          role: "fullstack — mostly backend and auth",
          desc: "Platform to upload, share and request files securely. I implemented 2FA, role-based access control and an email-driven file request flow.",
          stack: ["Laravel", "PHP", "JavaScript", "Docker", "PL/SQL"],
          year: "2024",
          link: "https://paula-fernandez-canas.vercel.app/project-1.html",
        },
        */
        /* 02 — pending review
        {
          n: "02",
          name: "Compiso",
          sub: "Thesis · Flatmate matching platform",
          tag: "Thesis",
          status: "done",
          role: "design, front and light backend",
          desc: "My final degree project. A web app that connects tenants and landlords with a matching system, in-app chat, ratings and email notifications.",
          stack: ["PHP", "MySQL", "Tailwind", "JavaScript", "EmailJS"],
          year: "2024",
          link: "https://paula-fernandez-canas.vercel.app/project-2.html",
        },
        */
        {
          n: '03',
          name: 'Finanzor',
          sub: 'Mobile-first personal finance app',
          tag: 'Personal',
          status: 'wip',
          role: 'design + frontend + backend — solo project',
          desc: 'Personal app to track income and expenses by category, view a transaction calendar, manage monthly budgets and savings goals with contribution tracking. Supports bank CSV import and data export. Multi-user.',
          stack: [
            'React 18',
            'Vite',
            'Tailwind',
            'Supabase',
            'React Query',
            'Vercel',
          ],
          year: '2025 →',
          thumb: 'assets/images/finanzor.png',
          link: 'https://paula-fernandez-canas.vercel.app/project-3.html',
        },
        {
          n: '04',
          name: 'Mi Armario',
          sub: 'PWA to manage your digital wardrobe',
          tag: 'Personal',
          status: 'wip',
          role: 'architecture, design and development — solo project',
          desc: 'PWA web app to organise clothes by category, create outfits and manage items for sale (Stored → For Sale → Sold flow). Integrates Web Share Target to import from Wallapop or Vinted and a wishlist with automatic URL preview.',
          stack: [
            'React 18',
            'TypeScript',
            'Vite',
            'Tailwind',
            'Supabase',
            'Zustand',
            'PWA',
          ],
          year: '2025 →',
          thumb: 'assets/images/miarmario.png',
          link: 'https://paula-fernandez-canas.vercel.app/project-4.html',
        },
        {
          n: '05',
          name: 'AparcaYa',
          sub: 'Real-time occupancy and parking prediction in Málaga',
          tag: 'AI & Big Data',
          status: 'wip',
          role: 'full frontend — map, chatbot, data integration and deployment',
          desc: "Web app showing real-time occupancy of Málaga's 12 public car parks and predicting availability 1-2 hours ahead. Features an interactive Leaflet map, occupancy traffic-light indicator and a chatbot that recommends where to park based on your destination. Predictive model in scikit-learn exported to JS; computer vision with MobileNetV2 to classify spaces from traffic camera images.",
          stack: [
            'JavaScript',
            'Leaflet.js',
            'Python',
            'scikit-learn',
            'TensorFlow',
            'OpenCV',
            'Supabase',
            'Vercel',
          ],
          year: '2026 →',
          thumb: 'assets/images/aparcaya.png',
          link: 'https://paula-fernandez-canas.vercel.app/project-5.html',
        },
        {
          n: '06',
          name: 'Internal Ops · Piensos Urbano',
          sub: 'App to modernise a family business workflow',
          tag: 'Freelance',
          status: 'wip',
          role: 'fullstack with Aurora Medel',
          desc: "Team project with Aurora Medel for her family member's pet food business. The client was managing everything with Canva and Excel — we built an internal app to centralise and digitalise that workflow.",
          stack: ['Laravel', 'PHP', 'JavaScript', 'Docker', 'PL/SQL'],
          year: '2025 →',
          link: '#',
        },
      ],
    },
    stack: {
      label: 'Stack',
      title: 'Technologies & Languages',
      meta: "Honest — I'm senior at nothing",
      skills: [
        { n: 'HTML',         icon: 'https://cdn.simpleicons.org/html5/e34f26',                                                       pct: 90 },
        { n: 'CSS',          icon: 'https://cdn.simpleicons.org/css/1572b6',                                                          pct: 85 },
        { n: 'JavaScript',   icon: 'https://cdn.simpleicons.org/javascript/f7df1e',                                                   pct: 82 },
        { n: 'Git',          icon: 'https://cdn.simpleicons.org/git/f05032',                                                          pct: 82 },
        { n: 'Tailwind',     icon: 'https://cdn.simpleicons.org/tailwindcss/06b6d4',                                                  pct: 75 },
        { n: 'PHP',          icon: 'https://cdn.simpleicons.org/php/8892bf',                                                          pct: 72 },
        { n: 'Laravel',      icon: 'https://cdn.simpleicons.org/laravel/ff2d20',                                                      pct: 72 },
        { n: 'MySQL',        icon: 'https://cdn.simpleicons.org/mysql/4479a1',                                                        pct: 68 },
        { n: 'Bootstrap',    icon: 'https://cdn.simpleicons.org/bootstrap/7952b3',                                                    pct: 65 },
        { n: 'jQuery',       icon: 'https://cdn.simpleicons.org/jquery/0769ad',                                                       pct: 63 },
        { n: 'Figma',        icon: 'https://cdn.simpleicons.org/figma/f24e1e',                                                        pct: 62 },
        { n: 'CodeIgniter',  icon: 'https://cdn.simpleicons.org/codeigniter/ef4223',                                                  pct: 58 },
        { n: 'Linux',        icon: 'https://cdn.simpleicons.org/linux/111111',                                                        pct: 55 },
        { n: 'React',        icon: 'https://cdn.simpleicons.org/react/61dafb',                                                        pct: 52 },
        { n: 'XML',          icon: null,                                                                                               pct: 52 },
        { n: 'JSON',         icon: null,                                                                                               pct: 50 },
        { n: 'TypeScript',   icon: 'https://cdn.simpleicons.org/typescript/3178c6',                                                   pct: 45 },
        { n: 'PL/SQL',       icon: 'https://cdn.jsdelivr.net/gh/devicons/devicon@v2.15.1/icons/oracle/oracle-original.svg',           pct: 42 },
        { n: 'Docker',       icon: 'https://cdn.simpleicons.org/docker/2496ed',                                                       pct: 42 },
        { n: 'Node.js',      icon: 'https://cdn.simpleicons.org/nodedotjs/339933',                                                    pct: 38 },
        { n: 'Python',       icon: 'https://cdn.simpleicons.org/python/3776ab',                                                       pct: 35 },
        { n: 'Vitest',       icon: 'https://cdn.simpleicons.org/vitest/6e9f18',                                                       pct: 33 },
        { n: 'Java',         icon: 'https://cdn.jsdelivr.net/gh/devicons/devicon@v2.15.1/icons/java/java-original.svg',               pct: 30 },
        { n: 'MATLAB',       icon: 'https://cdn.jsdelivr.net/gh/devicons/devicon@v2.15.1/icons/matlab/matlab-original.svg',           pct: 30 },
        { n: 'Oracle DB',    icon: 'https://cdn.jsdelivr.net/gh/devicons/devicon@v2.15.1/icons/oracle/oracle-original.svg',           pct: 30 },
        { n: 'Cypress',      icon: 'https://cdn.simpleicons.org/cypress/69d3a7',                                                      pct: 28 },
        { n: 'Google Cloud', icon: 'https://cdn.simpleicons.org/googlecloud/4285f4',                                                  pct: 28 },
        { n: 'Spring',       icon: 'https://cdn.simpleicons.org/spring/6db33f',                                                       pct: 25 },
        { n: 'AWS',          icon: 'https://cdn.jsdelivr.net/gh/devicons/devicon@v2.15.1/icons/amazonwebservices/amazonwebservices-original.svg', pct: 25 },
        { n: 'C++',          icon: 'https://cdn.jsdelivr.net/gh/devicons/devicon@v2.15.1/icons/cplusplus/cplusplus-original.svg',     pct: 25 },
        { n: '.NET',         icon: 'https://cdn.simpleicons.org/dotnet/512bd4',                                                       pct: 20 },
      ],
    },
    about: {
      label: 'About',
      title: 'A junior ready to find her team.',
      p1: (
        <>
          My interest in technology started long before secondary school, but
          that's where I took my first real step: I chose the technology track
          and wrote my first lines of code. From there I went on to study{' '}
          <b>Telematics Engineering</b> in Málaga — I learned a lot, but felt I
          needed something more hands-on and knew I could always come back to
          it. So I switched to a{' '}
          <b>Higher Vocational Diploma in Web Application Development</b>, which
          I loved. That's where I knew this was what I wanted to do.
        </>
      ),
      p2: (
        <>
          I did my placement at <b>Toomba Digital Agency</b>, where I learned
          the full project lifecycle from scratch: schemas, use cases, design in{' '}
          <b>Figma</b>, and real development with <b>Laravel</b>, Eloquent and
          2FA. After a summer of self-study, <b>BNT Business Telecom</b> gave me
          the opportunity to join as a developer. There I worked with Git,
          pipelines, team workflows, Laravel, JavaScript, CodeIgniter, MySQL,
          CSS, <b>Figma</b> — and on <b>IoT</b> projects connecting code to
          physical devices, plus a hand-migration from{' '}
          <b>Laravel 5.4 to Laravel 12</b>.
        </>
      ),
      p3: (
        <>
          A personal situation meant I had to leave BNT and Málaga and return to
          Jaén, Andalusia. But I'm ready to get back into the industry with
          renewed energy and a lot of desire to keep growing. What I'm looking
          for is a <b>team</b> where I can do exactly that.
        </>
      ),
      timeline: [
        {
          when: 'Now',
          what: 'Actively looking',
          note: 'Looking for my next opportunity. Open to fullstack or backend roles, in Jaén (Andalusia) or remote.',
          now: true,
        },
        {
          when: 'Nov. 2025 – Jun. 2026',
          what: 'Junior developer · BNT Business Telecom',
          note: 'Fullstack on web and IoT projects: Git, pipelines, Laravel, CodeIgniter, JavaScript, MySQL, Figma. Code-to-device connections. Hand-migrated a Laravel 5.4 project to Laravel 12.',
        },
        {
          when: 'Feb. – Jun. 2025',
          what: 'Internship · Toomba Digital Agency',
          note: '4 months. Real project in Laravel with Eloquent and 2FA. Use cases, schemas and Figma design — learned the full flow of building a project from scratch.',
        },
        {
          when: 'Sep. 2023 – Jun. 2025',
          what: 'Higher Vocational · Web Application Development',
          note: 'Where I knew this was my path. Final project: Compiso, a flatmate matching platform.',
        },
        {
          when: 'Sep. 2022 – Sep. 2023',
          what: 'Telematics Engineering',
          note: 'Programming fundamentals, C++, MATLAB and a new direction.',
        },
        {
          when: 'Sep. 2020 – Jun. 2022',
          what: 'Technology Baccalaureate · IES Huarte de San Juan',
          note: 'Choosing the technology stream was the decision that changed everything.',
        },
      ],
    },
    training: {
      label: 'Training',
      title: 'Education & certifications.',
      eduLabel: 'Education',
      certLabel: 'Licences & certifications',
      langsLabel: 'Languages',
      edu: [
        {
          school: 'MEDAC',
          degree: 'Higher Vocational Diploma in Web Application Development',
          period: 'Sep. 2023 – Jun. 2025',
          logo: 'assets/images/MEDAC_imagotipo_cuadr_azul_PNG.png',
        },
        {
          school: 'IES Huarte de San Juan',
          degree: 'Technology Baccalaureate',
          period: 'Sep. 2020 – Jun. 2022',
          logo: 'https://ieshuartedesanjuan.es/wp-content/uploads/2020/03/cropped-logo1-320x320.png',
        },
      ],
      certs: [
        {
          name: 'AI & Big Data Programming applicable to 5G',
          issuer: '5G Technology Training · Polo Digital',
          date: 'In progress · 2026',
          highlight: true,
          icon: '🤖',
        },
        {
          name: 'Introduction to Big Data and Artificial Intelligence',
          issuer: 'Grupo Aspasia',
          date: 'Mar. 2026',
          icon: '📊',
        },
        {
          name: 'Cisco CCNA — Networking Fundamentals for IP Networks',
          issuer: 'Udemy',
          date: 'Mar. 2026',
          icon: 'https://cdn.simpleicons.org/cisco/1BA0D7',
        },
        {
          name: 'Advanced Cybersecurity in Operations Technology Environments',
          issuer: 'Hedima DN Formación',
          date: '',
          icon: '🔐',
        },
        {
          name: '.NET Course',
          issuer: 'OpenWebinars',
          date: '',
          icon: 'https://cdn.simpleicons.org/dotnet/512BD4',
        },
        {
          name: 'Spring Boot and MVC Course',
          issuer: 'OpenWebinars',
          date: '',
          icon: 'https://cdn.simpleicons.org/spring/6DB33F',
        },
        {
          name: 'TypeScript Course',
          issuer: 'OpenWebinars',
          date: '',
          icon: 'https://cdn.simpleicons.org/typescript/3178C6',
        },
        {
          name: 'Python 3 Course',
          issuer: 'OpenWebinars',
          date: '',
          icon: 'https://cdn.simpleicons.org/python/3776AB',
        },
        {
          name: 'Spring Core 5 Course',
          issuer: 'OpenWebinars',
          date: '',
          icon: 'https://cdn.simpleicons.org/spring/6DB33F',
        },
        {
          name: 'MATLAB Certificate',
          issuer: 'MathWorks',
          date: 'Feb. 2023',
          icon: 'https://cdn.jsdelivr.net/gh/devicons/devicon@v2.15.1/icons/matlab/matlab-original.svg',
        },
      ],
      langs: [
        {
          name: 'Spanish',
          level: 'Native',
          icon: '🇪🇸',
        },
        {
          name: 'English',
          level: 'B1 — Cambridge University Press & Assessment · Nov. 2020',
          icon: 'EN',
        },
      ],
    },
    blog: {
      label: 'Blog',
      title: "Things I'm learning.",
      meta: 'Field notes · honest',
      intro:
        "I'm no systems expert, but I love learning new things. I write down everything I hear and read — in my head and in a notebook. This is the publishable version of that notebook.",
      empty: 'More notes coming soon.',
      readMore: 'read',
      seeAll: 'See all →',
      posts: [
        {
          date: '2026 · 06 · 25',
          kind: 'Project',
          title: 'AparcaYa: real-time parking prediction with ML and computer vision',
          excerpt:
            'Final project of the AI & Big Data course, built with Luisa Moreira Mendoza. We trained a Random Forest to predict occupancy across 12 Málaga car parks 1-2 hours ahead, and a MobileNetV2 vision model to classify spaces from real traffic cameras. All integrated with a chatbot and interactive map.',
          time: '4 min',
          link: 'https://www.linkedin.com/posts/paula-fernandez-canas_smartcity-machinelearning-python-share-7475982668053037056-oPE4/',
        },
        {
          date: '2026 · 06 · 25',
          kind: 'Training',
          title: 'Wrapping up the AI & Big Data in 5G course',
          excerpt:
            'Short but intense. I leave with solid foundations in technologies I didn\'t know, projects that made me think hard, and a great group of classmates. Thanks to professor Pablo Udias for making it all feel easy and fun.',
          time: '2 min',
          link: 'https://www.linkedin.com/posts/paula-fernandez-canas_ia-bigdata-formacionen5g-share-7475985760723288065-c1JW/',
        },
        {
          date: '2026 · 06 · 07',
          kind: 'Training',
          title: 'My first ETL pipeline with Pentaho Data Integration',
          excerpt:
            'Built a complete ETL flow in class: CSV validation, data cleaning, joining customer and rate data, cost calculation and report generation. With an automated Job and email error handling.',
          time: '3 min',
          link: 'https://www.linkedin.com/posts/paula-fernandez-canas_pentaho-etl-dataanalytics-activity-7468338312672477185-se15',
        },
        {
          date: '2026 · 06 · 01',
          kind: 'Training',
          title: 'First day of the AI & Big Data course',
          excerpt:
            'Starting a hands-on course in AI and Big Data programming at the Polo Digital (5G technology training). Java, Python, Power BI, AI models, Pentaho — looks very promising.',
          time: '2 min',
          link: 'https://www.linkedin.com/posts/paula-fernandez-canas_ia-bigdata-programaciaejn-activity-7464775232483151872-TBKe',
        },
      ],
    },
    contact: {
      label: 'Contact',
      titlePre: 'Looking for a junior',
      titleAccent: 'with drive',
      titlePost: ' for your team?',
      kicker:
        "I'm open to a fullstack or backend role, in Jaén (Andalusia) or remote. If your team needs someone with lots of ideas and motivation, send me an email and let's talk!",
      copy: 'Copy email',
      copied: 'Copied!',
      links: [
        {
          name: 'LinkedIn',
          url: 'https://www.linkedin.com/in/paula-fernandez-canas/',
        },
        { name: 'GitHub', url: 'https://github.com/paulafc30' },
        { name: 'CV (pdf)', url: '#' },
      ],
      form: {
        title: 'Send me a message',
        namePh: 'Your name',
        emailPh: 'Your email',
        msgPh: 'Your message...',
        send: 'Send →',
        sending: 'Sending...',
        sent: "Message sent! I'll get back to you soon.",
        error: 'Something went wrong. Try emailing me directly.',
      },
    },
    footer: {
      left: '© 2026 Paula Fernández Cañas',
      mid: 'Jaén, Andalusia',
      right: '',
    },
  },
};

window.COPY = COPY;

// ───────────────────────

// cursor.jsx — v2: no custom cursor. Keep tiny no-ops for compat.

function useCustomCursor() {
  React.useEffect(() => {
    const el = document.getElementById('cursor');
    if (el) el.remove();
    const g = document.getElementById('grain');
    if (g) g.remove();
  }, []);
}

Object.assign(window, { useCustomCursor });

// ───────────────────────

// components.jsx — v2: warm, honest, no terminal chrome

// ------- Header -------
function useActiveSection(ids) {
  const [active, setActive] = React.useState('');
  React.useEffect(() => {
    const obs = new IntersectionObserver(
      (entries) => {
        entries.forEach((e) => {
          if (e.isIntersecting) setActive(e.target.id);
        });
      },
      { rootMargin: '-40% 0px -55% 0px', threshold: 0 },
    );
    ids.forEach((id) => {
      const el = document.getElementById(id);
      if (el) obs.observe(el);
    });
    return () => obs.disconnect();
  }, []);
  return active;
}

function Header({ t, lang, setLang, dark, setDark }) {
  const active = useActiveSection([
    'top',
    'work',
    'training',
    'about',
    'contact',
    'blog',
  ]);
  const navLinks = [
    { href: '#work', label: t.nav.work, id: 'work' },
    { href: '#training', label: t.nav.training, id: 'training' },
    { href: '#about', label: t.nav.about, id: 'about' },
    { href: '#contact', label: t.nav.contact, id: 'contact' },
    { href: '#blog', label: t.nav.blog, id: 'blog' },
  ];
  return (
    <header className="top">
      <div className="wrap top-inner">
        <a href="#top" className="brand">
          <span className="mark">P</span>
          <span className="name">Paula Fernández</span>
          <span className="role">/ dev junior</span>
        </a>
        <nav className="nav">
          {navLinks.map(({ href, label, id }) => (
            <a
              key={id}
              href={href}
              className={active === id ? 'nav-active' : ''}>
              {label}
            </a>
          ))}
        </nav>
        <div className="top-right">
          <button
            className="pill"
            onClick={() => setLang(lang === 'es' ? 'en' : 'es')}
            aria-label="Toggle language">
            <span className={'seg ' + (lang === 'es' ? 'on' : '')}>ES</span>
            <span className="seg">·</span>
            <span className={'seg ' + (lang === 'en' ? 'on' : '')}>EN</span>
          </button>
          <button
            className="pill"
            onClick={() => setDark(!dark)}
            aria-label="Toggle theme">
            {dark ? '◐' : '◑'}
          </button>
        </div>
      </div>
    </header>
  );
}

// ------- Hero -------
function Hero({ t }) {
  return (
    <section className="hero wrap" id="top">
      <div className="hero-grid">
        <div>
          <div className="eyebrow">
            <span className="dot" />
            <span>{t.hero.eyebrow}</span>
          </div>

          <h1 className="headline">
            {t.hero.headlineLines.map((line, i) => (
              <React.Fragment key={i}>
                {line.map((part, j) => (
                  <span key={j} className={j === 1 ? 'accent' : 'ink'}>
                    {part}
                  </span>
                ))}
                {i < t.hero.headlineLines.length - 1 && <br />}
              </React.Fragment>
            ))}
          </h1>

          <div className="lede">
            {Array.isArray(t.hero.lede) ? (
              t.hero.lede.map((p, i) => <p key={i}>{p}</p>)
            ) : (
              <p>{t.hero.lede}</p>
            )}
          </div>

          <div className="cta-row">
            <a href="#work" className="btn-pill primary">
              {t.hero.cta1} <span className="arr">→</span>
            </a>
            <a
              href="assets/paula-fernandez-cv.pdf"
              download="Paula-Fernandez-Canas-CV.pdf"
              target="_blank"
              rel="noopener noreferrer"
              className="btn-pill">
              {t.hero.cta2} <span className="arr">↓</span>
            </a>
          </div>
        </div>

        <div className="portrait-stack">
          <div className="portrait">
            <image-slot
              id="hero-portrait"
              shape="rect"
              src="assets/images/paula.jpeg"
              placeholder={t.hero.portraitPh}></image-slot>
          </div>
          <div className="info-card">
            <div className="kv">
              <span className="k">rol</span>{' '}
              <span className="v">{t.hero.info.role}</span>
              {t.hero.info.company && (
                <>
                  <span className="k">en</span>
                  <span className="v">{t.hero.info.company}</span>
                </>
              )}
              <span className="k">stack</span>{' '}
              <span className="v">{t.hero.info.focus}</span>
              <span className="k">desde</span>{' '}
              <span className="v">{t.hero.info.location}</span>
              <span className="k">estado</span>{' '}
              <span className="v">
                <span className="live">
                  <i />
                  {t.hero.info.availability}
                </span>
              </span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ------- Project card -------
function ProjectCard({ p, roleLabel = 'role' }) {
  const tagClass = p.status === 'wip' ? 'tag' : 'tag muted';
  return (
    <article className="pcard">
      <div className="thumb">
        <image-slot
          id={'thumb-' + p.n}
          shape="rect"
          src={p.thumb || undefined}
          placeholder={'captura · ' + p.name}></image-slot>
        <span className="num">N.º {p.n}</span>
        <span className={tagClass}>{p.tag}</span>
      </div>
      <div className="body">
        <h3>
          {p.name}
          <span className="sub">{p.sub}</span>
        </h3>
        <p>{p.desc}</p>

        <div className="role">
          <span className="k">{roleLabel}</span>
          <span>{p.role}</span>
        </div>

        <div className="stack">
          {p.stack.map((s) => (
            <span key={s}>{s}</span>
          ))}
        </div>
      </div>
      <div className="foot">
        <span className="yr">{p.year}</span>
        <a href={p.link}>
          Ver detalle <span className="arr">→</span>
        </a>
      </div>
    </article>
  );
}

// ------- Projects carousel -------
function Projects({ t }) {
  const ref = React.useRef(null);
  const [idx, setIdx] = React.useState(0);

  function scrollTo(i) {
    const el = ref.current;
    if (!el) return;
    const card = el.children[i];
    if (card)
      el.scrollTo({
        left: card.offsetLeft - el.offsetLeft,
        behavior: 'smooth',
      });
  }

  React.useEffect(() => {
    const el = ref.current;
    if (!el) return;
    function onScroll() {
      const items = Array.from(el.children);
      let best = 0,
        bestDist = Infinity;
      items.forEach((c, i) => {
        const d = Math.abs(c.offsetLeft - el.offsetLeft - el.scrollLeft);
        if (d < bestDist) {
          bestDist = d;
          best = i;
        }
      });
      setIdx(best);
    }
    el.addEventListener('scroll', onScroll, { passive: true });
    return () => el.removeEventListener('scroll', onScroll);
  }, []);

  const total = t.projects.list.length;
  return (
    <section id="work" className="section wrap">
      <div className="section-head">
        <div>
          <div className="label">{t.projects.label}</div>
          <h2>{t.projects.title}</h2>
        </div>
        <div className="meta">
          {t.projects.meta} &nbsp;·&nbsp; {String(idx + 1).padStart(2, '0')} /{' '}
          {String(total).padStart(2, '0')}
        </div>
      </div>

      <div className="car-wrap">
        <div className="car-controls">
          <button
            className="car-btn"
            disabled={idx === 0}
            onClick={() => scrollTo(Math.max(0, idx - 1))}
            aria-label="Previous">
            ←
          </button>
          <button
            className="car-btn"
            disabled={idx === total - 1}
            onClick={() => scrollTo(Math.min(total - 1, idx + 1))}
            aria-label="Next">
            →
          </button>
        </div>
        <div className="carousel" ref={ref}>
          {t.projects.list.map((p, i) => (
            <ProjectCard key={i} p={p} roleLabel={t.projects.roleLabel} />
          ))}
        </div>
        <div className="car-progress">
          <i
            style={{
              width: `${100 / total}%`,
              left: `${(idx * 100) / total}%`,
            }}
          />
        </div>
      </div>
    </section>
  );
}

// ------- Stack -------
function Stack({ t }) {
  const R = 36;
  const CIRC = 2 * Math.PI * R;
  return (
    <section className="section wrap" id="stack">
      <div className="section-head">
        <div>
          <div className="label">{t.stack.label}</div>
          <h2>{t.stack.title}</h2>
        </div>
        <div className="meta">{t.stack.meta}</div>
      </div>
      <div className="skills-grid">
        {t.stack.skills.map((s, i) => {
          const offset = CIRC * (1 - s.pct / 100);
          return (
            <div key={i} className="skill-item">
              <div className="skill-ring-wrap">
                <svg className="skill-ring" viewBox="0 0 88 88">
                  <circle cx="44" cy="44" r={R} fill="none" stroke="var(--rule)" strokeWidth="3.5"/>
                  <circle cx="44" cy="44" r={R} fill="none"
                    stroke="var(--accent)" strokeWidth="3.5"
                    strokeDasharray={`${CIRC} ${CIRC}`}
                    strokeDashoffset={offset}
                    strokeLinecap="round"
                    transform="rotate(-90 44 44)"/>
                </svg>
                {s.icon
                  ? <img className="skill-icon" src={s.icon} alt={s.n} />
                  : <span className="skill-icon-text">{s.n}</span>}
              </div>
              <span className="skill-name">{s.n}</span>
            </div>
          );
        })}
      </div>
    </section>
  );
}

// ------- About + timeline -------
function About({ t }) {
  return (
    <section id="about" className="section wrap">
      <div className="section-head">
        <div>
          <div className="label">{t.about.label}</div>
          <h2>{t.about.title}</h2>
        </div>
      </div>
      <div className="about-grid">
        <div>
          <p>{t.about.p1}</p>
          <p>{t.about.p2}</p>
          <p>{t.about.p3}</p>
        </div>
        <div className="timeline">
          {t.about.timeline.map((c, i) => (
            <div key={i} className={'t-item' + (c.now ? ' now' : '')}>
              <div className="when">{c.when}</div>
              <div className="what">{c.what}</div>
              <div className="note">{c.note}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ------- Blog -------
function Training({ t }) {
  return (
    <section id="training" className="section wrap">
      <div className="section-head">
        <div>
          <div className="label">{t.training.label}</div>
          <h2>{t.training.title}</h2>
        </div>
      </div>

      <h4 className="training-sub">{t.training.eduLabel}</h4>
      <div className="training-edu">
        {t.training.edu.map((e, i) => (
          <div key={i} className="edu-item">
            {e.logo && <img className="edu-logo" src={e.logo} alt={e.school} />}
            <div className="edu-body">
              <div className="edu-degree">{e.degree}</div>
              <div className="edu-school">{e.school}</div>
              <div className="edu-period">{e.period}</div>
            </div>
          </div>
        ))}
      </div>

      <h4 className="training-sub">{t.training.langsLabel}</h4>
      <div className="lang-grid">
        {t.training.langs.map((l, i) => (
          <div key={i} className="lang-item">
            <span className="lang-icon">{l.icon}</span>
            <div className="lang-body">
              <div className="lang-name">{l.name}</div>
              <div className="lang-level">{l.level}</div>
            </div>
          </div>
        ))}
      </div>

      <h4 className="training-sub">{t.training.certLabel}</h4>
      <div className="cert-grid">
        {t.training.certs.map((c, i) => (
          <div
            key={i}
            className={'cert-item' + (c.highlight ? ' cert-highlight' : '')}>
            {c.icon && (
              <div className="cert-icon-wrap">
                {c.icon.startsWith('http') ? (
                  <img src={c.icon} className="cert-icon" alt="" />
                ) : (
                  <span className="cert-icon-emoji">{c.icon}</span>
                )}
              </div>
            )}
            <div className="cert-body">
              <div className="cert-name">{c.name}</div>
              <div className="cert-issuer">{c.issuer}</div>
              {c.date && <div className="cert-date">{c.date}</div>}
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

function Blog({ t }) {
  return (
    <section id="blog" className="section wrap">
      <div className="section-head">
        <div>
          <div className="label">{t.blog.label}</div>
          <h2>{t.blog.title}</h2>
        </div>
        <div className="meta">{t.blog.meta}</div>
      </div>
      {t.blog.intro && <p className="blog-intro">{t.blog.intro}</p>}
      <div className="blog-grid">
        {t.blog.posts.map((p, i) => (
          <a key={i} href={p.link} className="bcard">
            <div className="bmeta">
              <span className="bdate">{p.date}</span>
              <span className="bsep">·</span>
              <span className="bkind">{p.kind}</span>
              <span className="bsep">·</span>
              <span className="btime">{p.time}</span>
            </div>
            <h3 className="btitle">{p.title}</h3>
            <p className="bexcerpt">{p.excerpt}</p>
            <span className="bread">
              {t.blog.readMore} <span className="arr">→</span>
            </span>
          </a>
        ))}
      </div>
    </section>
  );
}

// ------- Contact -------
function Contact({ t }) {
  const [copied, setCopied] = React.useState(false);
  const [form, setForm] = React.useState({ name: '', email: '', msg: '' });
  const [status, setStatus] = React.useState('idle'); // idle | sending | sent | error

  function copy() {
    navigator.clipboard?.writeText('paulafc30@gmail.com');
    setCopied(true);
    setTimeout(() => setCopied(false), 1400);
  }

  async function handleSubmit(e) {
    e.preventDefault();
    setStatus('sending');
    try {
      // ⚠️ Reemplaza YOUR_FORM_ID con tu ID de Formspree (formspree.io)
      const res = await fetch('https://formspree.io/f/xnjknwpz', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          Accept: 'application/json',
        },
        body: JSON.stringify({
          name: form.name,
          email: form.email,
          message: form.msg,
        }),
      });
      setStatus(res.ok ? 'sent' : 'error');
    } catch {
      setStatus('error');
    }
  }

  return (
    <section id="contact" className="contact">
      <div className="wrap">
        <div
          className="label dim"
          style={{
            color: 'var(--accent)',
            fontSize: 11,
            letterSpacing: '0.16em',
            textTransform: 'uppercase',
            fontWeight: 600,
          }}>
          {t.contact.label}
        </div>
        <h2>
          {t.contact.titlePre}{' '}
          <span className="accent">{t.contact.titleAccent}</span>
          {t.contact.titlePost}
        </h2>

        <div className="contact-grid">
          {/* Columna izquierda */}
          <div className="contact-left">
            <p className="kicker">{t.contact.kicker}</p>
            <div className="email-row">
              <a href="mailto:paulafc30@gmail.com">paulafc30@gmail.com</a>
              <button className="copy" onClick={copy}>
                {copied ? t.contact.copied : t.contact.copy}
              </button>
            </div>
            <div className="links">
              {t.contact.links.map((l, i) => (
                <a key={i} href={l.url} target="_blank" rel="noopener">
                  {l.name} ↗
                </a>
              ))}
            </div>
          </div>

          {/* Columna derecha — formulario */}
          <div className="contact-right">
            <div className="cf-title">{t.contact.form.title}</div>
            {status === 'sent' ? (
              <p className="cf-sent">{t.contact.form.sent}</p>
            ) : (
              <form className="cf" onSubmit={handleSubmit}>
                <input
                  className="cf-input"
                  type="text"
                  placeholder={t.contact.form.namePh}
                  value={form.name}
                  onChange={(e) =>
                    setForm((f) => ({ ...f, name: e.target.value }))
                  }
                  required
                />
                <input
                  className="cf-input"
                  type="email"
                  placeholder={t.contact.form.emailPh}
                  value={form.email}
                  onChange={(e) =>
                    setForm((f) => ({ ...f, email: e.target.value }))
                  }
                  required
                />
                <textarea
                  className="cf-input cf-textarea"
                  placeholder={t.contact.form.msgPh}
                  value={form.msg}
                  onChange={(e) =>
                    setForm((f) => ({ ...f, msg: e.target.value }))
                  }
                  required
                  rows={5}
                />
                {status === 'error' && (
                  <p className="cf-error">{t.contact.form.error}</p>
                )}
                <button
                  className="cf-btn"
                  type="submit"
                  disabled={status === 'sending'}>
                  {status === 'sending'
                    ? t.contact.form.sending
                    : t.contact.form.send}
                </button>
              </form>
            )}
          </div>
        </div>
      </div>
    </section>
  );
}

// ------- Footer -------
function Footer({ t }) {
  return (
    <footer className="bot">
      <div className="wrap bot-inner">
        <span>{t.footer.left}</span>
        <span>{t.footer.mid}</span>
        <span>{t.footer.right}</span>
      </div>
    </footer>
  );
}

Object.assign(window, {
  Header,
  Hero,
  Projects,
  Stack,
  About,
  Blog,
  Contact,
  Footer,
});

// ───────────────────────

// app.jsx — main App component (v2: light default, brick red, calmer)

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/ {
  accent: '#b8412c',
  dark: false,
  lang: 'es',
  fontSize: 14,
}; /*EDITMODE-END*/

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const lang = t.lang;
  const setLang = (v) => setTweak('lang', v);
  const dark = t.dark;
  const setDark = (v) => setTweak('dark', v);

  React.useEffect(() => {
    document.documentElement.dataset.theme = dark ? 'dark' : 'light';
    document.documentElement.style.setProperty('--accent', t.accent);
    document.documentElement.lang = lang;
    document.body.style.fontSize = t.fontSize + 'px';
  }, [dark, t.accent, lang, t.fontSize]);

  // Drop legacy crosshair + grain (if still in DOM from older builds)
  useCustomCursor();

  const copy = COPY[lang] || COPY.es;

  return (
    <>
      <Header
        t={copy}
        lang={lang}
        setLang={setLang}
        dark={dark}
        setDark={setDark}
      />
      <Hero t={copy} />
      <Projects t={copy} />
      <Training t={copy} />
      <Stack t={copy} />
      <About t={copy} />
      <Contact t={copy} />
      <Blog t={copy} />
      <Footer t={copy} />

      <TweaksPanel>
        <TweakSection
          label={lang === 'es' ? 'Idioma & tema' : 'Language & theme'}
        />
        <TweakRadio
          label={lang === 'es' ? 'Idioma' : 'Language'}
          value={lang}
          options={['es', 'en']}
          onChange={(v) => setTweak('lang', v)}
        />
        <TweakToggle
          label={lang === 'es' ? 'Modo oscuro' : 'Dark mode'}
          value={dark}
          onChange={(v) => setTweak('dark', v)}
        />

        <TweakSection
          label={lang === 'es' ? 'Color de marca' : 'Brand color'}
        />
        <TweakColor
          label={lang === 'es' ? 'Acento' : 'Accent'}
          value={t.accent}
          options={[
            '#b8412c',
            '#8a2b18',
            '#c95a3c',
            '#a83a64',
            '#2c5e8a',
            '#445a3f',
          ]}
          onChange={(v) => setTweak('accent', v)}
        />

        <TweakSection label={lang === 'es' ? 'Tipografía' : 'Typography'} />
        <TweakSlider
          label={lang === 'es' ? 'Tamaño base' : 'Base size'}
          value={t.fontSize}
          min={12}
          max={18}
          step={1}
          unit="px"
          onChange={(v) => setTweak('fontSize', v)}
        />
      </TweaksPanel>
    </>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);