// ============================================================ // PAGE — Contatti // Hero + Form + Info + FAQ + Map placeholder // ============================================================ const { useState: useStateCT, useRef: useRefCT } = React; const motionCT = new Proxy({}, { get: (_, p) => window.FramerMotion.motion[p] }); const useInViewCT = (...a) => window.FramerMotion.useInView(...a); // HERO function ContattiHero() { const ref = useRefCT(null); const isInView = useInViewCT(ref, { once: true }); return (
{/* Bureau di corrispondenza — postmark, busta, ceralacca, pennino */}
); } // FORM + INFO function ContattiBody() { const [formData, setFormData] = useStateCT({ name: '', email: '', company: '', phone: '', topic: 'assessment', message: '', }); const [submitted, setSubmitted] = useStateCT(false); const [sending, setSending] = useStateCT(false); const [sendError, setSendError] = useStateCT(null); const FORM_ENDPOINT = 'https://script.google.com/macros/s/AKfycbz04kMKLUaY6c-Vcwck-xOzrHjq3W6vTk9Z8ai2SH2g1oF1npZEEEqrIm3RSbEPNQj_/exec'; const handleChange = e => setFormData({ ...formData, [e.target.name]: e.target.value }); const handleSubmit = async e => { e.preventDefault(); if (sending) return; setSending(true); setSendError(null); const topicLabels = { assessment: 'Assessment iniziale', aiko: 'Modernizzazione (AiKo)', kodari: 'API & Integration (Kodari)', lumiere: 'Frontend (Lumiere)', lestage: 'File Flow (Lestage)', altro: 'Altro / Non sicuro', }; const payload = { name: formData.name, email: formData.email, company: formData.company, phone: formData.phone, topic: topicLabels[formData.topic] || formData.topic, message: formData.message, }; try { // Apps Script web apps don't handle CORS preflights, so we use // text/plain to keep this a "simple" CORS request. const res = await fetch(FORM_ENDPOINT, { method: 'POST', headers: { 'Content-Type': 'text/plain;charset=utf-8' }, body: JSON.stringify(payload), }); const data = await res.json().catch(() => ({})); if (!res.ok || data.ok === false) { throw new Error(data.error || 'Errore di invio'); } setSubmitted(true); setTimeout(() => { setSubmitted(false); setFormData({ name: '', email: '', company: '', phone: '', topic: 'assessment', message: '' }); }, 6000); } catch (err) { setSendError('Non siamo riusciti a inviare il messaggio. Scriveteci direttamente a info@lumikode.io.'); console.error('[contatti] invio fallito:', err); } finally { setSending(false); } }; const inputStyle = { width: '100%', padding: '13px 16px', background: 'rgba(15,15,35,0.6)', border: '1px solid rgba(255,215,0,0.15)', borderRadius: 6, color: colors.textPrimary, fontFamily: "'DM Sans', sans-serif", fontSize: '0.92rem', transition: 'border-color 0.2s, box-shadow 0.2s', outline: 'none', }; const labelStyle = { display: 'block', fontFamily: "'Courier Prime', monospace", fontSize: '0.68rem', color: colors.textGold, letterSpacing: 1.5, textTransform: 'uppercase', fontWeight: 600, marginBottom: 8, }; const topics = [ { v: 'assessment', l: 'Strategic Assessment' }, { v: 'aiko', l: 'Modernizzazione (AiKo)' }, { v: 'kodari', l: 'API & Integration (Kodari)' }, { v: 'lumiere', l: 'Frontend (Lumiere)' }, { v: 'lestage', l: 'File Flow (Lestage)' }, { v: 'altro', l: 'Altro / Non sicuro' }, ]; return (
{/* FORM */}
// Form

Scriveteci

{submitted ? (

Messaggio ricevuto

Grazie. Vi richiamiamo entro 24 ore lavorative.

) : (
{ e.target.style.borderColor = colors.brandGold; e.target.style.boxShadow = `0 0 0 3px ${colors.brandGold}15`; }} onBlur={e => { e.target.style.borderColor = 'rgba(255,215,0,0.15)'; e.target.style.boxShadow = 'none'; }} />
{ e.target.style.borderColor = colors.brandGold; e.target.style.boxShadow = `0 0 0 3px ${colors.brandGold}15`; }} onBlur={e => { e.target.style.borderColor = 'rgba(255,215,0,0.15)'; e.target.style.boxShadow = 'none'; }} />
{ e.target.style.borderColor = colors.brandGold; e.target.style.boxShadow = `0 0 0 3px ${colors.brandGold}15`; }} onBlur={e => { e.target.style.borderColor = 'rgba(255,215,0,0.15)'; e.target.style.boxShadow = 'none'; }} />
{ e.target.style.borderColor = colors.brandGold; e.target.style.boxShadow = `0 0 0 3px ${colors.brandGold}15`; }} onBlur={e => { e.target.style.borderColor = 'rgba(255,215,0,0.15)'; e.target.style.boxShadow = 'none'; }} />
{topics.map(t => ( ))}