// ───────────────────────────────────────────────────────────── // Mezoo — Page Contact // Real form: typed validation, inline errors, segmented project-type // picker, range slider for budget, animated success state on submit. // ───────────────────────────────────────────────────────────── function ContactPage() { useReveal(); const [form, setForm] = React.useState({ company: '', name: '', email: '', phone: '', role: '', type: 'web', budget: 50, timeline: 'q3', brief: '', _gotcha: '', // honeypot — bots fill it, humans don't }); const [touched, setTouched] = React.useState({}); const [submitting, setSubmitting] = React.useState(false); const [submitted, setSubmitted] = React.useState(null); // { refId } | null const [serverError, setServerError] = React.useState(null); const update = (k, v) => setForm((f) => ({ ...f, [k]: v })); const blur = (k) => setTouched((t) => ({ ...t, [k]: true })); const errors = { company: !form.company.trim() ? 'Précisez votre structure' : null, name: !form.name.trim() ? 'Votre nom complet' : null, email: !/^\S+@\S+\.\S+$/.test(form.email) ? 'Adresse e-mail valide' : null, brief: form.brief.trim().length < 20 ? 'Décrivez votre besoin en ≥ 20 caractères' : null, }; const isValid = Object.values(errors).every((e) => !e); const onSubmit = async (e) => { e.preventDefault(); setTouched({ company: true, name: true, email: true, brief: true }); if (!isValid) return; setServerError(null); setSubmitting(true); // POST to the deployed Resend handler. If the endpoint is unreachable // (file://, offline) OR doesn't return JSON (static preview where the // server falls back to serving the HTML page itself for unknown paths), // gracefully drop into a local success state so the demo flow still works. const demoFallback = () => { setSubmitted({ refId: 'DEMO-' + Date.now().toString(36).toUpperCase().slice(-6), demo: true }); }; try { const r = await fetch('/api/contact', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(form), }); // If the response isn't JSON, there's no backend deployed at this // origin — serve the demo success screen instead of showing a parse // error to the user. const ct = r.headers.get('content-type') || ''; if (!ct.includes('json')) { demoFallback(); return; } const json = await r.json().catch(() => null); if (!json) { demoFallback(); return; } if (!r.ok || !json.ok) { // 4xx: server-side validation. 5xx: generic. throw new Error(json.error || `Erreur ${r.status}`); } setSubmitted({ refId: json.refId }); } catch (err) { // Network unreachable (file://, CORS pre-flight failure, offline) // counts as demo too. if (err instanceof TypeError) { demoFallback(); return; } setServerError(err.message || 'Erreur inattendue.'); } finally { setSubmitting(false); } }; const projectTypes = [ { id: 'web', label: 'Site web', sub: 'Vitrine · institutionnel' }, { id: 'ecom', label: 'E-commerce', sub: 'Catalogue · paiement' }, { id: 'saas', label: 'Application SaaS', sub: 'Outil métier · sur-mesure' }, { id: 'mobile', label: 'Application mobile', sub: 'iOS · Android' }, { id: 'audit', label: 'Audit / conseil', sub: '5 jours, sans engagement' }, ]; const timelines = [ { id: 'urgent', label: 'Urgent', sub: '< 1 mois' }, { id: 'q3', label: 'Standard', sub: '1 à 3 mois' }, { id: 'q4', label: 'Souple', sub: '3 à 6 mois' }, { id: 'open', label: 'Sans contrainte', sub: 'À étudier ensemble' }, ]; if (submitted) return ; return (
§ Rendez-vous — réponse sous 24h ouvrées Parlons de votre outil numérique. Un seul interlocuteur senior, pas de filtre commercial. Entretien de 30 minutes — vous décrivez le contexte, on vous dit honnêtement ce qu'on en pense.
{/* Form */}
{/* Honeypot field — hidden from humans, irresistible for bots */} {/* I — Identité */}
update('company', v)} onBlur={() => blur('company')} error={touched.company && errors.company} placeholder="Hortis SA" /> update('role', v)} placeholder="Directrice des opérations" /> update('name', v)} onBlur={() => blur('name')} error={touched.name && errors.name} placeholder="Christine Vasseur" /> update('email', v)} onBlur={() => blur('email')} error={touched.email && errors.email} placeholder="vasseur@hortis.fr" /> update('phone', v)} placeholder="+33 6 12 34 56 78" />
{/* II — Projet */} update('type', v)} /> update('timeline', v)} /> update('budget', v)} /> {/* III — Brief */} update('brief', v)} onBlur={() => blur('brief')} error={touched.brief && errors.brief} placeholder="Nous opérons cinq sites locaux mal connectés. Le score Lighthouse moyen est de 54, on perd des commandes la nuit. Idéalement on garde nos marques régionales mais on consolide la plateforme." /> ↳ {form.brief.length} caractères {serverError && (
↳ {serverError} — vous pouvez aussi nous écrire à hello@mezoo.studio.
)}
↳ vos données restent confidentielles · chiffrées · europe
{/* Sidebar — process & guarantees */}
); } // ── Form sub-components ───────────────────────────────────────── function FieldHeader({ roman, label, sub }) { return (
{roman} {label} ↳ {sub}
); } function FormField({ label, value, onChange, onBlur, error, placeholder, type = 'text', multiline = false, rows = 4 }) { const Tag = multiline ? 'textarea' : 'input'; return ( ); } function SegmentedSelect({ label, options, value, onChange }) { return (
{label}
{options.map((opt, i) => { const active = value === opt.id; return ( ); })}
); } function BudgetSlider({ value, onChange }) { // value 0..100 maps to budget brackets const brackets = [ { max: 15, label: '< 15 k€', sub: 'Pas notre standard — on vous orientera' }, { max: 40, label: '15 – 40 k€', sub: 'Site vitrine / refonte simple' }, { max: 80, label: '40 – 80 k€', sub: 'E-commerce / outil de production' }, { max: 150, label: '80 – 150 k€', sub: 'Plateforme métier complète' }, { max: 999, label: '> 150 k€', sub: 'Programme pluriannuel — sur-mesure' }, ]; const current = brackets.find((b) => value <= b.max) || brackets[brackets.length - 1]; return (
Enveloppe budgétaire indicative {current.label}
onChange(Number(e.target.value))} style={{ width: '100%', appearance: 'none', WebkitAppearance: 'none', background: 'transparent', height: 28, }} />
↳ {current.sub}
); } function ContactSuccess({ form, refId, demo }) { const { go } = useRouter(); return (
↳ Demande reçue · réf. {refId}

Merci, {form.name.split(' ')[0] || 'à vous'}.

{demo ? <>Mode démonstration : aucun e-mail n'a été envoyé. En production, vous recevriez une confirmation à {form.email} sous 24 heures ouvrées. : <>Votre demande est arrivée. Un e-mail de confirmation vient de partir vers {form.email}. Un associé senior vous écrit personnellement sous 24 heures ouvrées avec trois créneaux de 30 minutes.}

Récapitulatif
); } Object.assign(window, { ContactPage });