/* A small locator: Europe in hairline grey with Czechia filled from the brand gradient, and a dot on Brno. Same Natural Earth data as the about map. */ function EuropeLocator({ lang = 'en', label }) { const ref = React.useRef(null); React.useEffect(() => { let dead = false; (async () => { if (!window.d3 || !window.topojson || !ref.current) return; const topo = await d3.json('https://cdn.jsdelivr.net/npm/world-atlas@2.0.2/countries-110m.json'); if (dead || !ref.current) return; const countries = topojson.feature(topo, topo.objects.countries).features; const W = 300, H = 190; const projection = d3.geoMercator().center([14, 51]).scale(520).translate([W / 2, H / 2]); const path = d3.geoPath(projection); const svg = d3.select(ref.current).attr('viewBox', `0 0 ${W} ${H}`).attr('preserveAspectRatio', 'xMidYMid meet'); svg.selectAll('*').remove(); const grad = svg.append('defs').append('linearGradient') .attr('id', 'sm-locator-grad').attr('gradientUnits', 'userSpaceOnUse') .attr('x1', W * 0.35).attr('y1', H * 0.2).attr('x2', W * 0.7).attr('y2', H * 0.8); [['0%', '#e64ba0'], ['55%', '#6b3fd6'], ['100%', '#3355d1']].forEach(([o, c]) => grad.append('stop').attr('offset', o).attr('stop-color', c)); svg.append('g').selectAll('path').data(countries).join('path') .attr('d', path) .attr('fill', (f) => (+f.id === 203 ? 'url(#sm-locator-grad)' : 'var(--gray-150)')) .attr('stroke', (f) => (+f.id === 203 ? 'transparent' : 'var(--gray-300)')).attr('stroke-width', 0.7); /* Neighbours named, because the shape of Europe is not common knowledge everywhere the site is read. */ const named = (id, fallback) => { const row = (window.MARKETS || []).find((m) => m.id === id); return (row && row['name' + (lang === 'cs' ? 'Cs' : 'En')]) || fallback; }; const marks = [ { id: 276, name: named(276, 'Germany'), at: [10.2, 51.2] }, { id: 616, name: named(616, 'Poland'), at: [19.4, 52.2] }, { id: 40, name: named(40, 'Austria'), at: [14.2, 47.6] }, { id: 703, name: named(703, 'Slovakia'), at: [20.8, 48.4] }, ]; svg.append('g').selectAll('text').data(marks).join('text') .attr('x', (d) => projection(d.at)[0]).attr('y', (d) => projection(d.at)[1]) .attr('text-anchor', 'middle') .attr('font-family', 'var(--font-mono)').attr('font-size', 7.5) .attr('letter-spacing', '0.08em').attr('fill', 'var(--gray-500)') .text((d) => d.name.toUpperCase()); const [bx, by] = projection([16.607, 49.195]); const dx = bx + 2, dy = by - 2; svg.append('circle').attr('cx', dx).attr('cy', dy).attr('r', 4.6).attr('fill', 'var(--white)'); svg.append('circle').attr('cx', dx).attr('cy', dy).attr('r', 3).attr('fill', 'var(--orange-500)'); svg.append('circle').attr('cx', dx).attr('cy', dy).attr('r', 8).attr('fill', 'none').attr('stroke', 'var(--orange-500)').attr('stroke-width', 1).attr('opacity', 0.4); })(); return () => { dead = true; }; }, [lang]); return ; } /* Web3Forms backend. The access key is public by design (client-side use is the documented pattern); submissions are e-mailed to Martin. */ const FORM_ENDPOINT = 'https://api.web3forms.com/submit'; const WEB3FORMS_KEY = 'c35428b1-d6cb-4b7a-bfd3-04f67ec9c3e2'; function Contact({ s, t, onBack, backLabel }) { const { FormField, Button, Icon, SocialIconRow } = window.SevcikMarketingDesignSystem_3203fa; const c = s.contact; const [backHover, setBackHover] = React.useState(false); const [formStatus, setFormStatus] = React.useState('idle'); // idle | sending | sent | error const mono = { fontFamily: 'var(--font-mono)', fontWeight: 500, fontSize: 9.5, letterSpacing: 'var(--tracking-label)', textTransform: 'uppercase', color: 'var(--gray-500)' }; const wrap = { maxWidth: 1080, margin: '0 auto', padding: '0 32px' }; return (
{t.nav[3].label}

{c.headline}

{c.lead}

{c.emailLabel} {CONTACT.email} {c.phoneLabel} {CONTACT.phone}
{c.whereLabel} {c.whereValue || 'Brno, Czechia'}
{/* The card scans into a phone's address book - the only page where that is worth the space, since this is where a visitor comes to write the details down. */}
{c.qrAlt
{c.qrLabel} {c.qrNote}
{/* Identification, not bank details: what a client needs before raising a purchase order, and nothing that helps anyone forge an invoice in his name. */} {c.billingLines && (
{c.billingLabel} {c.billingLines.map((line) => ( {line} ))}
)}
{ e.preventDefault(); const f = new FormData(e.currentTarget); const get = (k) => (f.get(k) || '').toString().trim(); if (FORM_ENDPOINT) { if (formStatus === 'sending') return; const form = e.currentTarget; f.append('access_key', WEB3FORMS_KEY); f.append('subject', (s.htmlLang === 'cs' ? 'Poptávka z webu – ' : 'Enquiry from the website – ') + get('name')); f.append('from_name', 'sevcikmarketing.com'); setFormStatus('sending'); fetch(FORM_ENDPOINT, { method: 'POST', body: f }) .then((r) => r.json()) .then((d) => { if (d && d.success) { setFormStatus('sent'); form.reset(); } else { setFormStatus('error'); } }) .catch(() => setFormStatus('error')); return; } const phone = [get('phonePrefix'), get('phone')].filter(Boolean).join(' '); const body = [get('name'), get('company'), get('email'), phone && `${c.fields.phone}: ${phone}`, get('service') && `${c.service}: ${get('service')}`, get('budget') && `${c.budget}: ${get('budget')}`, '', get('message')].filter(Boolean).join('\n'); window.location.href = `mailto:${CONTACT.email}?subject=${encodeURIComponent(s.htmlLang === 'cs' ? 'Popt\u00e1vka z webu' : 'Enquiry from the website')}&body=${encodeURIComponent(body)}`; }} >

{c.formTitle}

{c.formNote}

{/* Dialling code beside the number rather than inside it: the Czech form arrives on +420, the English one empty, because a UK visitor reading a Czech prefix would have to notice and undo it. Phone is optional - email is the channel that has to work. */} {c.fields.phone && (
)}
{c.replyNote}
{formStatus === 'sent' && (

{c.sentMsg}

)} {formStatus === 'error' && (

{c.errorMsg}

)}
); } Object.assign(window, { Contact });