/* Me contacter — contact page. Reuses the established design system (tokens, type, nav). */ function ContactPage({ accent = '#6E8E3A', accentSoft = '#DAEACD', accentInk = '#355C1E' }) { const [lang, setLangState] = React.useState(() => window.getInitialLang ? window.getInitialLang() : 'fr'); const setLang = (l) => { window.setLangPref && window.setLangPref(l); setLangState(l); }; const [theme, setTheme] = React.useState('light'); const [hoveredCard, setHoveredCard] = React.useState('linkedin'); const [form, setForm] = React.useState({ name: '', email: '', message: '' }); const [errors, setErrors] = React.useState({}); const [sent, setSent] = React.useState(false); const t = I18N[lang]; useContentVersion(); let L = lang === 'fr' ? { title: 'Me contacter', intro: "Un projet en tête ? Une question ? Je serais ravie d'échanger avec vous.", email: 'Email', emailValue: 'irmane@hotmail.fr', linkedin: 'LinkedIn', linkedinValue: 'Connectons-nous', formTitle: 'Envoyez-moi un message', nameLabel: 'Nom', namePh: 'Votre nom', emailLabel: 'Email', emailPh: 'email@exemple.com', msgLabel: 'Message', msgPh: 'Un service, une question, un petit coucou…', send: 'Envoyer mon message', sent: 'Message envoyé · Merci !', errName: 'Merci d’indiquer votre nom.', errEmail: 'Adresse email invalide.', errEmailRequired: 'L’email est requis.', errMessage: 'Votre message ne peut pas être vide.', } : { title: 'Get in touch', intro: "A project in mind? A question? I'd be glad to hear from you.", email: 'Email', emailValue: 'irmane@hotmail.fr', linkedin: 'LinkedIn', linkedinValue: "Let's connect", formTitle: 'Send me a message', nameLabel: 'Name', namePh: 'Your name', emailLabel: 'Email', emailPh: 'email@example.com', msgLabel: 'Message', msgPh: 'A service, a question, just saying hi…', send: 'Send my message', sent: 'Message sent · Thank you!', errName: 'Please enter your name.', errEmail: 'Invalid email address.', errEmailRequired: 'Email is required.', errMessage: 'Your message cannot be empty.', }; L = applyContentOverrides('contact', lang, L); const onSubmit = (e) => { e.preventDefault(); const next = {}; if (!form.name.trim()) next.name = L.errName; if (!form.email.trim()) next.email = L.errEmailRequired; else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(form.email.trim())) next.email = L.errEmail; if (!form.message.trim()) next.message = L.errMessage; setErrors(next); if (Object.keys(next).length > 0) return; saveMessage({ name: form.name, email: form.email, message: form.message }); setSent(true); setTimeout(() => setSent(false), 2600); setForm({ name: '', email: '', message: '' }); setErrors({}); }; const clearError = (k) => setErrors(es => { if (!es[k]) return es; const n = {...es}; delete n[k]; return n; }); return (

{/* — TOP NAV — */}

I.UX {t.location}

{/* Title block */}

{L.title}

{L.intro}

{/* Contact tiles */}

setHoveredCard('email')} style={hoveredCard === 'email' ? { background:'var(--paper-2)', borderColor:'var(--line-strong)' } : {}}>

setHoveredCard('linkedin')} style={hoveredCard === 'linkedin' ? { background:'var(--paper-2)', borderColor:'var(--line-strong)' } : {}}>

{L.linkedinValue}

{/* Form card */}

{L.formTitle}

{L.nameLabel} { setForm({...form, name:e.target.value}); clearError('name'); }}/> {errors.name && }

{L.emailLabel} { setForm({...form, email:e.target.value}); clearError('email'); }}/> {errors.email && }

{L.msgLabel}

{ setForm({...form, message:e.target.value}); clearError('message'); }}/>
            {errors.message && <FieldError id="ct-msg-err" message={errors.message} />}
          </div>

<button type="submit" className="ct-submit">{L.send}</button>
        </form>

</main>

{/* — FOOTER — */}
      <footer style={{ borderTop:'1px solid var(--line)' }}>
        <div style={{ maxWidth:1280, margin:'0 auto', padding:'22px 48px', display:'flex', justifyContent:'space-between', alignItems:'center' }}>
          <span className="ct-mono">{t.footerCredit} · 2026</span>
        </div>
      </footer>
      <BackToTopFab />

{sent && <div className="ct-toast" role="status">{L.sent}</div>}
    </div>
  );
}

Object.assign(window, { ContactPage });

function FieldError({ id, message }) {
  return (
    <div id={id} className="ct-error" role="alert">
      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
        <circle cx="12" cy="12" r="10"/>
        <line x1="12" y1="8" x2="12" y2="13"/>
        <line x1="12" y1="16" x2="12.01" y2="16"/>
      </svg>
      <span>{message}</span>
    </div>
  );
}