);
};
// ──────────────── CONTACT FORM ────────────────
// Envía a SITE.formEndpoint (JSON, compatible con Formspree/Netlify
// functions). Si no hay endpoint configurado, cae a un mailto: con
// el mensaje prellenado para que igual llegue.
const BUDGETS = ['< USD 15k', 'USD 15–40k', 'USD 40–100k', '+ USD 100k', 'No sé todavía'];
const PROJECT_TYPES = ['Identidad / Branding', 'Diseño de producto', 'Motion / Video', 'Editorial', 'Otro / Mixto'];
const ContactForm = () => {
const [status, setStatus] = React.useState('idle'); // idle | sending | sent | mailto | error
const [errors, setErrors] = React.useState({});
const uid = React.useId ? React.useId() : 'cf';
const id = (k) => `${uid}-${k}`;
const validate = (data) => {
const e = {};
if (!data.name.trim()) e.name = 'Contanos cómo te llamás.';
if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(data.email)) e.email = 'Necesitamos un email válido para responderte.';
if (!data.type) e.type = 'Elegí el tipo de proyecto.';
if (data.message.trim().length < 20) e.message = 'Un par de líneas más nos ayudan a entender el proyecto.';
return e;
};
const onSubmit = async (ev) => {
ev.preventDefault();
const fd = new FormData(ev.currentTarget);
const data = Object.fromEntries(fd.entries());
const e = validate(data);
setErrors(e);
if (Object.keys(e).length) {
const first = ev.currentTarget.querySelector('[aria-invalid="true"]');
first && first.focus();
return;
}
if (data.website) return; // honeypot
if (!SITE.formEndpoint) {
const subject = encodeURIComponent(`Proyecto: ${data.type} — ${data.name}`);
const body = encodeURIComponent(
`Nombre: ${data.name}\nEmail: ${data.email}\nEmpresa: ${data.company || '-'}\nTipo: ${data.type}\nPresupuesto: ${data.budget}\n\n${data.message}`
);
window.location.href = `mailto:${SITE.email}?subject=${subject}&body=${body}`;
setStatus('mailto');
return;
}
setStatus('sending');
try {
const res = await fetch(SITE.formEndpoint, {
method: 'POST',
headers: { 'Content-Type': 'application/json', Accept: 'application/json' },
body: JSON.stringify({ ...data, _subject: `Proyecto: ${data.type} — ${data.name}` }),
});
const json = await res.json().catch(() => ({}));
if (res.status === 400 && json.errors) { setErrors(json.errors); setStatus('idle'); return; }
if (!res.ok || json.ok === false) throw new Error(json.error || `HTTP ${res.status}`);
setStatus('sent');
} catch (err) {
console.error('[contact]', err);
setStatus('error');
}
};
if (status === 'sent' || status === 'mailto') {
return (
{status === 'sent' ? 'Recibimos tu mensaje.' : 'Se abrió tu correo con el mensaje listo.'}
{status === 'sent'
? 'Te escribimos en las próximas 24 horas hábiles.'
: <>Si no se abrió, escribinos directo a {SITE.email}.}
{' '}Mientras tanto, podés ver algunos proyectos recientes.
);
}
const Err = ({ k }) => errors[k] ?
{errors[k]}
: null;
const inputProps = (k) => ({
id: id(k), name: k,
'aria-invalid': errors[k] ? 'true' : undefined,
'aria-describedby': errors[k] ? id(`${k}-err`) : undefined,
});
return (
);
};
Object.assign(window, { Preloader, SkipLink, Nav, Footer, PageHeader, ContactForm, NAV_LINKS });
// ──────────────── TWEAKS PANEL ────────────────
// Panel in-page que aparece con el toggle "Tweaks" del toolbar del
// host de preview. Controla intensidad de efectos, grano y
// movimiento en vivo. Fuera de un iframe no hace nada visible.
const Tweaks = ({ defaults = {} }) => {
const init = { speed: 6, grain: 5, motion: true, ...defaults };
const [open, setOpen] = React.useState(false);
const [v, setV] = React.useState(init);
const embedded = window.parent && window.parent !== window;
const post = (msg) => { if (embedded) window.parent.postMessage(msg, '*'); };
// aplicar a CSS vars + clases
React.useEffect(() => {
const root = document.documentElement;
root.style.setProperty('--fx-speed', (1.4 - v.speed * 0.08).toFixed(2));
root.style.setProperty('--fx-grain', (v.grain * 0.012).toFixed(3));
document.body.classList.toggle('fx-no-motion', !v.motion);
}, [v]);
// protocolo host: listener ANTES de anunciar disponibilidad
React.useEffect(() => {
if (!embedded) return;
const onMsg = (e) => {
const t = e.data && e.data.type;
if (t === '__activate_edit_mode') setOpen(true);
else if (t === '__deactivate_edit_mode') setOpen(false);
};
window.addEventListener('message', onMsg);
post({ type: '__edit_mode_available' });
return () => window.removeEventListener('message', onMsg);
}, []);
const set = (key, val) => {
setV((s) => ({ ...s, [key]: val }));
post({ type: '__edit_mode_set_keys', edits: { [key]: val } });
};
const close = () => { setOpen(false); post({ type: '__edit_mode_dismissed' }); };
if (!open) return null;
return (
