// ============================================ // CoderFire BR — base UI primitives & nav/footer // ============================================ const { useState, useEffect, useRef } = React; // ---------- Lucide-style inline SVG icons ---------- const Icon = { ArrowRight: ({ size = 16 }) => , ArrowUpRight: ({ size = 16 }) => , Check: ({ size = 16 }) => , X: ({ size = 16 }) => , Github: ({ size = 16 }) => , Linkedin: ({ size = 16 }) => , Mail: ({ size = 16 }) => , Cpu: ({ size = 16 }) => , Eye: ({ size = 16 }) => , Brain: ({ size = 16 }) => , Layers: ({ size = 16 }) => , Database: ({ size = 16 }) => , Cloud: ({ size = 16 }) => , Smartphone: ({ size = 16 }) => , MapPin: ({ size = 16 }) => , }; // ---------- Logo ---------- function Logo({ size = 32 }) { return CoderFire; } // ---------- Eyebrow ---------- function Eyebrow({ children, color }) { return
{children}
; } // ---------- Button ---------- function Button({ variant = "primary", size = "md", glow = false, children, onClick, as = "button", href, icon, type, disabled }) { const cls = `cf-btn cf-btn-${variant} cf-btn-${size}${glow ? ' cf-btn-glow' : ''}`; const inner = <>{children}{icon ? {icon} : null}; if (as === "a") return {inner}; return ; } // ---------- Pixel button (marketing CTA) ---------- function PixelButton({ children, onClick, variant = "spark" }) { return ; } // ---------- Lang toggle ---------- function LangToggle({ lang, onLangChange }) { return (
); } // ---------- Nav ---------- function Nav({ onCta, lang, onLangChange }) { const t = useT(); const [scrolled, setScrolled] = useState(false); useEffect(() => { const onScroll = () => setScrolled(window.scrollY > 8); window.addEventListener('scroll', onScroll, { passive: true }); return () => window.removeEventListener('scroll', onScroll); }, []); return (
CODERFIRE.com.br
rafael@coderfire.com.br
); } // ---------- Footer ---------- function Footer() { const t = useT(); return ( ); } // ---------- Modal (booking) — Formspree ---------- const BOOKING_FIELD_IDS = { email: 'cf-book-email', need: 'cf-book-need', message: 'cf-book-message' }; const BOOKING_FIELD_ORDER = ['email', 'need', 'message']; function formatFormspreeFieldError(field, message, labels) { const label = (labels && labels[field]) || field; const text = (message || '').trim(); if (!text) return `${label} is invalid.`; if (/^is required$/i.test(text)) return `${label} is required.`; if (/^[a-z]/.test(text)) return `${label} ${text}.`; return text.endsWith('.') ? text : `${text}.`; } function parseFormspreeErrors(body, labels, genericError) { const fieldErrors = {}; let formError = null; if (Array.isArray(body.errors) && body.errors.length) { for (const item of body.errors) { if (item.field) { fieldErrors[item.field] = formatFormspreeFieldError(item.field, item.message, labels); } else if (item.message) { formError = item.message; } } } if (!formError && typeof body.error === 'string' && body.error !== 'Validation errors') { formError = body.error; } if (!formError && !Object.keys(fieldErrors).length) { formError = typeof body.error === 'string' ? body.error : genericError; } return { fieldErrors, formError }; } function BookingModal({ open, onClose }) { const t = useT(); const [succeeded, setSucceeded] = useState(false); const [submitting, setSubmitting] = useState(false); const [formError, setFormError] = useState(null); const [fieldErrors, setFieldErrors] = useState({}); useEffect(() => { if (!open) { setSucceeded(false); setSubmitting(false); setFormError(null); setFieldErrors({}); } }, [open]); function clearFieldError(name) { setFieldErrors(prev => { if (!prev[name]) return prev; const next = { ...prev }; delete next[name]; return next; }); setFormError(null); } async function handleSubmit(ev) { ev.preventDefault(); const formId = typeof window !== 'undefined' && window.FORMSPREE_BOOKING_FORM_ID; if (!formId || formId === 'YOUR_FORM_ID') { setFormError('Set window.FORMSPREE_BOOKING_FORM_ID in index.html to your Formspree form id.'); setFieldErrors({}); return; } const form = ev.currentTarget; const fd = new FormData(form); setFormError(null); setFieldErrors({}); setSubmitting(true); try { const res = await fetch(`https://formspree.io/f/${formId}`, { method: 'POST', body: fd, headers: { Accept: 'application/json' }, }); const body = await res.json().catch(() => ({})); if (res.ok && (body.ok === true || body.next != null)) { setSucceeded(true); form.reset(); return; } const { fieldErrors: nextFieldErrors, formError: nextFormError } = parseFormspreeErrors(body, t.modal.labels, t.modal.genericError); setFieldErrors(nextFieldErrors); setFormError(nextFormError); const firstField = BOOKING_FIELD_ORDER.find(f => nextFieldErrors[f]); if (firstField) { const elId = BOOKING_FIELD_IDS[firstField]; requestAnimationFrame(() => document.getElementById(elId)?.focus()); } } catch (e) { setFormError(e.message || t.modal.genericError); setFieldErrors({}); } finally { setSubmitting(false); } } if (!open) return null; return (
e.stopPropagation()}> {succeeded ? (

{t.modal.successTitle}

{t.modal.successSub}

) : (
{t.modal.eyebrow}

{t.modal.title}

{t.modal.sub}

clearFieldError('email')} /> {fieldErrors.email ? ( ) : null}
{fieldErrors.need ? ( ) : null}