; } // ── BookingModal ────────────────────────────────────────────────────────────── function BookingModal({ open, onClose, theme }) { const [step, setStep] = React.useState(1); const [service, setService] = React.useState("Exame de vista completo"); const [date, setDate] = React.useState(null); const [time, setTime] = React.useState(null); const [name, setName] = React.useState(""); const [phone, setPhone] = React.useState(""); const [done, setDone] = React.useState(false); React.useEffect(() => { if (open) { setStep(1); setDone(false); } }, [open]); if (!open) return null; const days = []; const d = new Date(); while (days.length < 10) { d.setDate(d.getDate() + 1); if (d.getDay() !== 0) days.push(new Date(d)); } const dayLabel = (d) => ["Dom","Seg","Ter","Qua","Qui","Sex","Sáb"][d.getDay()]; const monthLabel = (d) => ["jan","fev","mar","abr","mai","jun","jul","ago","set","out","nov","dez"][d.getMonth()]; const times = ["09:00","10:00","11:00","14:00","15:00","16:00","17:00"]; const { bg, fg, muted, border, accent, displayFamily, displayWeight } = theme; const field = { width: "100%", padding: "14px 16px", background: "transparent", border: `1px solid ${border}`, color: fg, fontFamily: "inherit", fontSize: 15, outline: "none", }; const pill = (active) => ({ padding: "10px 14px", border: `1px solid ${active ? fg : border}`, background: active ? fg : "transparent", color: active ? bg : fg, cursor: "pointer", fontFamily: "inherit", fontSize: 13, letterSpacing: 0.3, transition: "all .15s", }); const submit = () => { setDone(true); setTimeout(() => onClose(), 2200); }; return (

e.stopPropagation()} style={{ width: "100%", maxWidth: 560, background: bg, color: fg, border: `1px solid ${border}`, animation: "slideUp .3s cubic-bezier(.2,.7,.3,1)", }}> {done ? (

CONFIRMADO

Até {date && dayLabel(date).toLowerCase()}, {name.split(" ")[0]}.

Enviamos os detalhes no {phone}.

) : ( <>

AGENDAR · PASSO {step} DE 3

{step === 1 && ( <>

O que precisa hoje?

{["Exame de vista completo", "Ajuste de armação", "Troca de lentes", "Atendimento infantil"].map(s => ( ))}

)} {step === 2 && ( <>

Quando fica bom?

{days.map((dt, i) => { const active = date && dt.toDateString() === date.toDateString(); return ( ); })}

{date && ( <>

HORÁRIO

{times.map(t => )}

)} )} {step === 3 && ( <>

Quase lá.

{service} · {date && `${dayLabel(date)} ${date.getDate()}/${date.getMonth()+1}`} · {time}

setName(e.target.value)} /> setPhone(e.target.value)} />

)}

); } // ── EtheralShadow ───────────────────────────────────────────────────────────── function EtheralShadow({ sizing = 'fill', color = 'rgba(244, 242, 237, 1)', animation, noise, style, className }) { const idBase = React.useId().replace(/:/g, ''); const filterId = `shadowoverlay-${idBase}`; const animationEnabled = animation && animation.scale > 0; const feColorMatrixRef = React.useRef(null); const rafRef = React.useRef(null); const hueRef = React.useRef(0); const displacementScale = animation ? mapRange(animation.scale, 1, 100, 20, 100) : 0; const animationDuration = animation ? mapRange(animation.speed, 1, 100, 1000, 50) : 1; React.useEffect(() => { if (!animationEnabled) return; const cycleSecs = animationDuration / 25; const degsPerMs = 360 / (cycleSecs * 1000); let lastTime = null; function tick(timestamp) { if (lastTime !== null) { hueRef.current = (hueRef.current + degsPerMs * (timestamp - lastTime)) % 360; if (feColorMatrixRef.current) feColorMatrixRef.current.setAttribute('values', String(hueRef.current)); } lastTime = timestamp; rafRef.current = requestAnimationFrame(tick); } rafRef.current = requestAnimationFrame(tick); return () => { if (rafRef.current) cancelAnimationFrame(rafRef.current); }; }, [animationEnabled, animationDuration]); const baseFreqX = animationEnabled ? mapRange(animation.scale, 0, 100, 0.001, 0.0005) : 0.001; const baseFreqY = animationEnabled ? mapRange(animation.scale, 0, 100, 0.004, 0.002) : 0.004; return (

{animationEnabled && ( )}

{noise && noise.opacity > 0 && (

)}

); } // ── GlassesShader ───────────────────────────────────────────────────────────── function GlassesShader({ style, className }) { const canvasRef = React.useRef(null); const rafRef = React.useRef(null); const vsSource = `attribute vec4 aPos; void main() { gl_Position = aPos; }`; const fsSource = ` precision highp float; uniform vec2 iResolution; uniform float iTime; float sdSegment(vec2 p, vec2 a, vec2 b) { vec2 pa = p - a, ba = b - a; float h = clamp(dot(pa, ba) / dot(ba, ba), 0.0, 1.0); return length(pa - ba * h); } float sdRing(vec2 p, float r, float w) { return abs(length(p) - r) - w; } float glow(float d, float r) { return r / (d * d + r + 0.0001); } void main() { vec2 fc = gl_FragCoord.xy; float mn = min(iResolution.x, iResolution.y); vec2 uv = (fc - 0.5 * iResolution.xy) / mn; float t = iTime; float breathe = sin(t * 1.1) * 0.5 + 0.5; float r = 0.195; float sep = 0.235; float lw = 0.0035; vec2 lc = vec2(-sep, 0.018); vec2 rc = vec2(sep, 0.018); float dL = sdRing(uv - lc, r, lw); float dR = sdRing(uv - rc, r, lw); vec2 bL = lc + vec2(r * 0.82, 0.0); vec2 bR = rc - vec2(r * 0.82, 0.0); vec2 bM = (bL + bR) * 0.5 + vec2(0.0, -0.018); float dBr = min(sdSegment(uv, bL, bM) - lw * 0.55, sdSegment(uv, bM, bR) - lw * 0.55); vec2 tSL = lc + vec2(-r, 0.0); vec2 tEL = vec2(-0.62, 0.045); float dTL = sdSegment(uv, tSL, tEL) - lw * 0.7; vec2 tSR = rc + vec2(r, 0.0); vec2 tER = vec2(0.62, 0.045); float dTR = sdSegment(uv, tSR, tER) - lw * 0.7; float dHL = length(uv - tSL) - lw * 2.2; float dHR = length(uv - tSR) - lw * 2.2; float dNL = sdSegment(uv, lc + vec2(r * 0.52, -0.008), lc + vec2(r * 0.42, -0.038)) - lw * 0.5; float dNR = sdSegment(uv, rc - vec2(r * 0.52, 0.008), rc - vec2(r * 0.42, 0.038)) - lw * 0.5; float d = min(min(min(min(min(min(min(dL, dR), dBr), dTL), dTR), dHL), dHR), min(dNL, dNR)); float line = smoothstep(0.0028, 0.0, d); float g1 = glow(max(d, 0.0005), 0.00015) * 0.35; float g2 = glow(max(d, 0.0005), 0.0008) * 0.22; float g3 = glow(max(d, 0.0005), 0.004) * 0.09; float totalGlow = (g1 + g2 + g3) * (0.65 + 0.35 * breathe); float sweep = sin(t * 0.9) * 0.55; float shimMask = exp(-pow((uv.x - sweep) * 3.8, 2.0)); float shimmer = shimMask * (line + totalGlow * 0.25) * 0.25; float reflL = smoothstep(r + 0.01, r - 0.05, length(uv - lc)) * smoothstep(r - 0.04, r - 0.12, length(uv - lc)) * 0.03 * (0.5 + 0.5 * breathe); float reflR = smoothstep(r + 0.01, r - 0.05, length(uv - rc)) * smoothstep(r - 0.04, r - 0.12, length(uv - rc)) * 0.03 * (0.5 + 0.5 * breathe); float lensGlow = reflL + reflR; vec3 warmLine = vec3(1.00, 0.97, 0.82); vec3 warmGlow = vec3(1.00, 0.86, 0.48); vec3 shimColor = vec3(1.00, 1.00, 0.92); vec3 lensColor = vec3(0.95, 0.88, 0.60); vec3 bg = vec3(0.035, 0.030, 0.030); vec3 col = bg; col += warmGlow * totalGlow; col += warmLine * line * 0.85; col += shimColor * shimmer; col += lensColor * lensGlow; col = clamp(col, 0.0, 1.0); gl_FragColor = vec4(col, 1.0); } `; React.useEffect(() => { const canvas = canvasRef.current; if (!canvas) return; const gl = canvas.getContext('webgl'); if (!gl) return; function compile(type, src) { const s = gl.createShader(type); gl.shaderSource(s, src); gl.compileShader(s); if (!gl.getShaderParameter(s, gl.COMPILE_STATUS)) { console.error(gl.getShaderInfoLog(s)); return null; } return s; } const prog = gl.createProgram(); gl.attachShader(prog, compile(gl.VERTEX_SHADER, vsSource)); gl.attachShader(prog, compile(gl.FRAGMENT_SHADER, fsSource)); gl.linkProgram(prog); const buf = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, buf); gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1,-1,1,-1,-1,1,1,1]), gl.STATIC_DRAW); const posLoc = gl.getAttribLocation(prog, 'aPos'); const resLoc = gl.getUniformLocation(prog, 'iResolution'); const timLoc = gl.getUniformLocation(prog, 'iTime'); function resize() { const p = canvas.parentElement; if (!p) return; canvas.width = p.clientWidth; canvas.height = p.clientHeight; gl.viewport(0, 0, canvas.width, canvas.height); } const ro = new ResizeObserver(resize); ro.observe(canvas.parentElement); resize(); const t0 = Date.now(); function render() { const elapsed = (Date.now() - t0) / 1000; gl.clearColor(0,0,0,1); gl.clear(gl.COLOR_BUFFER_BIT); gl.useProgram(prog); gl.uniform2f(resLoc, canvas.width, canvas.height); gl.uniform1f(timLoc, elapsed); gl.bindBuffer(gl.ARRAY_BUFFER, buf); gl.vertexAttribPointer(posLoc, 2, gl.FLOAT, false, 0, 0); gl.enableVertexAttribArray(posLoc); gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4); rafRef.current = requestAnimationFrame(render); } rafRef.current = requestAnimationFrame(render); return () => { if (rafRef.current) cancelAnimationFrame(rafRef.current); ro.disconnect(); }; }, []); return

Ótica{" "} Orion

Cuidar
de quem
{heroWords[heroWordIndex]} é um ofício.

Trinta e três anos,
uma história,
zero atalhos.

Ofícios da
casa.

Em vitrine.

@oticaorion

Venha nos
visitar.

Ótica{" "} Orion

Cuidar de quem {heroWords[heroWordIndex]} é um ofício.

Trinta e três anos,uma história, zero atalhos.