script.js

const translations = {
  en: {
    navWork: 'Work', navServices: 'Services', navAbout: 'About', navProcess: 'Process', navContact: 'Contact',
    heroEyebrow: 'Website creator & developer',
    heroTitle: 'I create clear, modern websites that help people trust your work.',
    heroCopy: 'I design, code and launch complete websites for independent projects, creative brands and small businesses that need a professional online presence without losing their personality.',
    heroCta: 'Start your website', heroSecondary: 'View my work',
    introText: 'My approach is direct and human: I understand your activity, clarify your message, design the right visual direction and build the website with clean code. I use HTML, CSS, JavaScript, GitHub, WordPress and AI tools when they help the project become sharper, faster and more effective.',
    workEyebrow: 'Selected work', workTitle: 'A first impression should feel confident before people read a single line.',
    workOne: 'A cinematic visual website created around a strong artistic identity, immersive presentation and a clear link between visuals, motion and brand atmosphere.',
    visitSite: 'Visit site', workTwoTitle: 'Personal portfolio', workTwo: 'A refined one-page website for presenting a person, a project or a creative service with clarity, rhythm and a strong first impression.',
    workThreeTitle: 'Professional landing page', workThree: 'A focused page for a service, studio or small business, built to explain the offer quickly and make contacting you feel obvious.',
    servicesEyebrow: 'Services', servicesTitle: 'A complete service: creation, design, code and launch.',
    serviceOneTitle: 'Website strategy & design', serviceOne: 'We organize your message, your pages and your visual direction so visitors quickly understand who you are, what you offer and why they should contact you.',
    serviceTwoTitle: 'Fully coded websites', serviceTwo: 'I create complete websites with HTML, CSS and JavaScript, and I can also work with WordPress, GitHub and back-end logic depending on the project.',
    serviceThreeTitle: 'Secure online launch', serviceThree: 'I take care of putting the site online, connecting the domain, preparing useful SEO basics, contact forms and simple security practices.',
    processEyebrow: 'Process', processTitle: 'A calm process, from first idea to finished website.',
    stepOneTitle: '1. We clarify', stepOne: 'We define your activity, your audience, the pages you need and the feeling your website should give.',
    stepTwoTitle: '2. I create', stepTwo: 'I design and code a modern responsive website, then refine the details so it feels coherent and professional.',
    stepThreeTitle: '3. I launch', stepThree: 'I prepare the website for publication and help put it online with the right files, links, domain setup and secure basics.',
    aboutTeaserEyebrow: 'About me', aboutTeaserTitle: 'Teacher, web creator and auto-entrepreneur.', aboutTeaserCopy: 'I combine pedagogy, code and design to create websites that are clear, fully coded and easy to understand for your clients. I use HTML, CSS, JavaScript, WordPress, GitHub and AI tools when they make the project sharper and faster.', aboutTeaserButton: 'Read more',
    ctaEyebrow: 'Available for projects', ctaTitle: 'If your project deserves a better online image, let’s build it properly.', ctaButton: 'Ask for a free quote', footerContact: 'Contact', footerHome: 'Back home', footerAbout: 'About', footerTerms: 'Terms',
    contactEyebrow: 'Contact', contactTitle: 'Tell me what you would like to create.', contactCopy: 'You do not need a perfect brief. Send me your idea, your activity, the pages you imagine and the style you like. I will help you make it clearer and prepare a free quote.',
    labelName: 'Name', labelProject: 'Project type', optionPortfolio: 'Portfolio website', optionBusiness: 'Business website', optionLanding: 'Landing page', optionOther: 'Other', labelMessage: 'Message', sendButton: 'Send message',
    formNote: 'To activate this form, replace YOUR_FORM_ID with your Formspree ID, or connect it to your preferred form service.',
    panelTitle: 'A serious website, without losing your identity.', panelCopy: 'I can help you turn your idea into a polished online presence that people can understand, remember and contact.',
    aboutEyebrow: 'About me', aboutTitle: 'I create websites with clarity, code and a human sense of detail.', aboutCopy: 'I am a teacher and an auto-entrepreneur in programming and website creation. My work combines pedagogy, technical structure and refined visual choices, so every project feels professional, understandable and ready to use.',
    aboutCardOneTitle: 'What I do', aboutCardOne: 'I create fully coded websites: structure, design, front-end development, back-end logic when needed, forms, responsive layouts and online launch.',
    aboutCardTwoTitle: 'My tools', aboutCardTwo: 'I use HTML, CSS, JavaScript, GitHub, WordPress and AI tools to build clean, modern websites that remain practical to update and maintain.',
    aboutCardThreeTitle: 'How I work', aboutCardThree: 'I listen first, then I translate your activity into a clear website. You receive a professional service, a free quote and transparent invoicing.',
    aboutServicesEyebrow: 'Services', aboutServicesTitle: 'From first idea to secure online website.', aboutServicesCopy: 'I can take care of the full process: defining the message, creating the visual direction, coding the website, preparing the contact page, setting up essential security practices and putting the site online. I also provide free quotes before starting any paid work.', aboutServicesButton: 'Ask for a free quote',
    termsEyebrow: 'Terms', termsTitle: 'General service conditions.', termsCopy: 'This page presents the main conditions for website creation services by Hélène Nechita. The exact scope, price and timeline are always confirmed in a written quote before the project begins.',
    termsQuoteTitle: 'Quotes and payment', termsQuoteCopy: 'Quotes are free. A project starts only after the quote has been accepted. The invoice is issued under the French auto-entrepreneur regime.',
    termsVatTitle: 'VAT', termsVatCopy: 'Services are invoiced without VAT when the activity is under the French VAT exemption scheme. The invoice may include the legal mention: “TVA non applicable, art. 293 B du CGI”, according to the applicable rules.',
    termsDeliveryTitle: 'Delivery and launch', termsDeliveryCopy: 'Depending on the project, delivery may include HTML, CSS and JavaScript files, WordPress setup, GitHub Pages publication, domain connection, contact form setup and essential security recommendations.',
    termsSecurityTitle: 'Security', termsSecurityCopy: 'Websites are created with careful structure, clean code, HTTPS/domain best practices when available, and simple security habits to reduce unnecessary risk. No website can be guaranteed impossible to attack.'
  },
  fr: {
    navWork: 'Réalisations', navServices: 'Services', navAbout: 'À propos', navProcess: 'Méthode', navContact: 'Contact',
    heroEyebrow: 'Créatrice & développeuse de sites web',
    heroTitle: 'Je crée des sites clairs et modernes qui donnent confiance.',
    heroCopy: 'Je conçois, code et mets en ligne des sites complets pour projets indépendants, marques créatives et petites entreprises qui veulent une présence professionnelle sans perdre leur personnalité.',
    heroCta: 'Créer mon site', heroSecondary: 'Voir mes réalisations',
    introText: 'Ma méthode est directe et humaine : comprendre votre activité, clarifier votre message, créer la bonne direction visuelle et développer le site avec un code propre. J’utilise HTML, CSS, JavaScript, GitHub, WordPress et des outils d’IA lorsqu’ils rendent le projet plus précis, plus rapide et plus efficace.',
    workEyebrow: 'Sélection', workTitle: 'Une première impression doit inspirer confiance avant même la lecture.',
    workOne: 'Un site visuel et cinématographique construit autour d’une identité artistique forte, d’une présentation immersive et d’un lien clair entre image, mouvement et univers de marque.',
    visitSite: 'Voir le site', workTwoTitle: 'Portfolio personnel', workTwo: 'Un site one-page raffiné pour présenter une personne, un projet ou un service créatif avec clarté, rythme et impact.',
    workThreeTitle: 'Landing page professionnelle', workThree: 'Une page claire pour un service, un studio ou une petite entreprise, pensée pour expliquer rapidement l’offre et donner envie de prendre contact.',
    servicesEyebrow: 'Services', servicesTitle: 'Un service complet : création, design, code et mise en ligne.',
    serviceOneTitle: 'Stratégie & design', serviceOne: 'Nous organisons votre message, vos pages et votre direction visuelle pour que l’on comprenne rapidement qui vous êtes, ce que vous proposez et pourquoi vous contacter.',
    serviceTwoTitle: 'Sites entièrement codés', serviceTwo: 'Je crée des sites complets en HTML, CSS et JavaScript, et je peux aussi travailler avec WordPress, GitHub et une logique back-end selon le projet.',
    serviceThreeTitle: 'Mise en ligne sécurisée', serviceThree: 'Je m’occupe de la mise en ligne, de la connexion du domaine, des bases SEO utiles, des formulaires de contact et des bonnes pratiques simples de sécurité.',
    processEyebrow: 'Méthode', processTitle: 'Une méthode simple, de l’idée au site terminé.',
    stepOneTitle: '1. On clarifie', stepOne: 'Nous définissons votre activité, votre public, les pages nécessaires et l’impression que le site doit donner.',
    stepTwoTitle: '2. Je crée', stepTwo: 'Je conçois et code un site moderne et responsive, puis j’affine les détails pour obtenir un ensemble cohérent et professionnel.',
    stepThreeTitle: '3. Je mets en ligne', stepThree: 'Je prépare le site pour la publication et je vous accompagne jusqu’à la mise en ligne avec les bons fichiers, liens, domaine et bases sécurisées.',
    aboutTeaserEyebrow: 'À propos', aboutTeaserTitle: 'Professeur, créatrice web et auto-entrepreneur.', aboutTeaserCopy: 'Je combine pédagogie, code et design pour créer des sites clairs, entièrement codés et faciles à comprendre pour vos clients. J’utilise HTML, CSS, JavaScript, WordPress, GitHub et l’IA quand cela rend le projet plus précis et plus rapide.', aboutTeaserButton: 'En savoir plus',
    ctaEyebrow: 'Disponible pour projets', ctaTitle: 'Si votre projet mérite une meilleure image en ligne, construisons-la correctement.', ctaButton: 'Demander un devis gratuit', footerContact: 'Contact', footerHome: 'Retour accueil', footerAbout: 'À propos', footerTerms: 'Conditions',
    contactEyebrow: 'Contact', contactTitle: 'Dites-moi ce que vous souhaitez créer.', contactCopy: 'Vous n’avez pas besoin d’un brief parfait. Envoyez-moi votre idée, votre activité, les pages imaginées et le style que vous aimez. Je vous aiderai à rendre tout cela plus clair et à préparer un devis gratuit.',
    labelName: 'Nom', labelProject: 'Type de projet', optionPortfolio: 'Site portfolio', optionBusiness: 'Site professionnel', optionLanding: 'Landing page', optionOther: 'Autre', labelMessage: 'Message', sendButton: 'Envoyer le message',
    formNote: 'Pour activer ce formulaire, remplacez YOUR_FORM_ID par votre identifiant Formspree, ou reliez-le au service de formulaire de votre choix.',
    panelTitle: 'Un site sérieux, sans perdre votre identité.', panelCopy: 'Je peux vous aider à transformer votre idée en présence en ligne soignée, facile à comprendre, à retenir et à contacter.',
    aboutEyebrow: 'À propos', aboutTitle: 'Je crée des sites avec clarté, code et sens du détail.', aboutCopy: 'Je suis professeur et auto-entrepreneur en programmation et création de sites. Mon travail associe pédagogie, structure technique et choix visuels soignés pour que chaque projet soit professionnel, compréhensible et prêt à l’emploi.',
    aboutCardOneTitle: 'Ce que je fais', aboutCardOne: 'Je crée des sites entièrement codés : structure, design, développement front-end, logique back-end si nécessaire, formulaires, responsive et mise en ligne.',
    aboutCardTwoTitle: 'Mes outils', aboutCardTwo: 'J’utilise HTML, CSS, JavaScript, GitHub, WordPress et l’IA pour construire des sites modernes, propres, pratiques à mettre à jour et à maintenir.',
    aboutCardThreeTitle: 'Ma façon de travailler', aboutCardThree: 'J’écoute d’abord, puis je traduis votre activité en site clair. Vous bénéficiez d’un service professionnel, d’un devis gratuit et d’une facturation transparente.',
    aboutServicesEyebrow: 'Services', aboutServicesTitle: 'De la première idée au site sécurisé en ligne.', aboutServicesCopy: 'Je peux m’occuper de tout le processus : définir le message, créer la direction visuelle, coder le site, préparer la page contact, mettre en place les bonnes pratiques de sécurité essentielles et publier le site en ligne. Je propose aussi des devis gratuits avant tout travail facturé.', aboutServicesButton: 'Demander un devis gratuit',
    termsEyebrow: 'Conditions', termsTitle: 'Conditions générales de service.', termsCopy: 'Cette page présente les principales conditions des prestations de création de site proposées par Hélène Nechita. Le périmètre exact, le prix et le délai sont toujours confirmés dans un devis écrit avant le début du projet.',
    termsQuoteTitle: 'Devis et paiement', termsQuoteCopy: 'Les devis sont gratuits. Un projet démarre uniquement après acceptation du devis. La facturation est réalisée sous le régime français de l’auto-entrepreneur.',
    termsVatTitle: 'TVA', termsVatCopy: 'Les prestations sont facturées sans TVA lorsque l’activité relève de la franchise en base de TVA. La facture peut inclure la mention légale : « TVA non applicable, art. 293 B du CGI », selon les règles applicables.',
    termsDeliveryTitle: 'Livraison et mise en ligne', termsDeliveryCopy: 'Selon le projet, la livraison peut inclure les fichiers HTML, CSS et JavaScript, une configuration WordPress, une publication GitHub Pages, la connexion du domaine, le formulaire de contact et des recommandations de sécurité essentielles.',
    termsSecurityTitle: 'Sécurité', termsSecurityCopy: 'Les sites sont créés avec une structure soignée, un code propre, de bonnes pratiques HTTPS/domaine lorsque possible et des habitudes simples de sécurité pour réduire les risques inutiles. Aucun site ne peut être garanti impossible à attaquer.'
  }
};

const languageButton = document.querySelector('.lang-toggle');
const savedLanguage = localStorage.getItem('hn-language') || 'en';
let currentLanguage = savedLanguage;

function applyLanguage(lang) {
  document.documentElement.lang = lang;
  document.querySelectorAll('[data-i18n]').forEach((element) => {
    const key = element.dataset.i18n;
    if (translations[lang] && translations[lang][key]) element.textContent = translations[lang][key];
  });
  document.querySelectorAll('[data-placeholder-en]').forEach((element) => {
    element.placeholder = lang === 'fr' ? element.dataset.placeholderFr : element.dataset.placeholderEn;
  });
  if (languageButton) languageButton.textContent = lang === 'en' ? 'FR' : 'EN';
  localStorage.setItem('hn-language', lang);
}

if (languageButton) {
  languageButton.addEventListener('click', () => {
    currentLanguage = currentLanguage === 'en' ? 'fr' : 'en';
    applyLanguage(currentLanguage);
  });
}
applyLanguage(currentLanguage);

const year = document.getElementById('year');
if (year) year.textContent = new Date().getFullYear();

const observer = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) entry.target.classList.add('visible');
  });
}, { threshold: 0.12 });
document.querySelectorAll('.reveal').forEach((element) => observer.observe(element));

const dot = document.querySelector('.cursor-dot');
const ring = document.querySelector('.cursor-ring');
if (dot && ring && window.matchMedia('(pointer: fine)').matches) {
  let mouseX = 0, mouseY = 0, ringX = 0, ringY = 0;
  window.addEventListener('mousemove', (event) => {
    mouseX = event.clientX;
    mouseY = event.clientY;
    dot.style.opacity = '1';
    ring.style.opacity = '1';
    dot.style.transform = `translate(${mouseX}px, ${mouseY}px) translate(-50%, -50%)`;
  });
  function animateCursor() {
    ringX += (mouseX - ringX) * 0.16;
    ringY += (mouseY - ringY) * 0.16;
    ring.style.transform = `translate(${ringX}px, ${ringY}px) translate(-50%, -50%)`;
    requestAnimationFrame(animateCursor);
  }
  animateCursor();
  document.querySelectorAll('a, button, input, textarea, select, .magnetic').forEach((element) => {
    element.addEventListener('mouseenter', () => ring.classList.add('active'));
    element.addEventListener('mouseleave', () => ring.classList.remove('active'));
  });
}


// Subtle modern magnetic effect for buttons, brand and clickable cards
if (window.matchMedia('(pointer: fine)').matches) {
  document.querySelectorAll('.magnetic').forEach((element) => {
    element.addEventListener('mousemove', (event) => {
      const rect = element.getBoundingClientRect();
      const x = event.clientX - rect.left - rect.width / 2;
      const y = event.clientY - rect.top - rect.height / 2;
      element.style.transform = `translate(${x * 0.08}px, ${y * 0.08}px)`;
    });
    element.addEventListener('mouseleave', () => {
      element.style.transform = '';
    });
  });
}