// sections.jsx — page sections const { useState: useStateS, useEffect: useEffectS, useRef: useRefS } = React; // ────────── TOP CONTACT BAR ────────── function TopBar({ t, lang, onToggleLang }) { return (
{window.PHONE_DISPLAY} Miami · Hialeah · Doral Hablamos Español
{lang === "en" ? "Select Your Language" : "Seleccione Su Idioma"}
); } // ────────── NAV ────────── function Nav({ t }) { const [scrolled, setScrolled] = useStateS(false); const [mobileOpen, setMobileOpen] = useStateS(false); useEffectS(() => { const onScroll = () => setScrolled(window.scrollY > 12); window.addEventListener("scroll", onScroll); return () => window.removeEventListener("scroll", onScroll); }, []); useEffectS(() => { document.body.style.overflow = mobileOpen ? "hidden" : ""; return () => { document.body.style.overflow = ""; }; }, [mobileOpen]); const closeDrawer = () => setMobileOpen(false); return ( <>
Tu Abogado Miami — Immigration Law
{window.PHONE_DISPLAY} {t.cta}
{/* Mobile drawer — kept OUTSIDE
so the header's backdrop-filter doesn't become this fixed element's containing block on scroll */}
Tu Abogado Miami — Immigration Law
{window.PHONE_DISPLAY} {t.cta}
); } // ────────── HERO ────────── function Hero({ t, variant }) { return (
{/* Faint editorial backdrop */}
{/* Text column */}

{t.hero.title1} {t.hero.title2} {t.hero.title3}

{t.hero.sub}

{window._lang === "es" ? "Elija su ubicación" : "Choose your location"}
{t.findHelp.locations.map((l) => ( {l} ))}
{/* Image column */}
{/* Brass frame */}
A family in Miami
{/* Floating credential card */}
{Array.from({ length: 5 }).map((_, i) => )}
"{(window.CONTENT[window._lang || 'en']?.voices?.items?.[0]?.quote || '').slice(0, 90)}…"
G★★★★★ · 612 REVIEWS
{/* Floating badge */}
Take the
first step
{/* Popular services marquee */}
{[...Array(2)].flatMap(() => t.findHelp.services).map((label, i) => { const display = label === "SIJS" ? (t.langToggle === "EN" ? "Estatus Especial para Jóvenes Inmigrantes" : "Special Immigrant Juvenile Status") : label; return ( {display} ); })}
); } // ────────── BIG PHONE BANNER ────────── function PhoneBanner({ t, lang }) { return (
{lang === "en" ? "Available 24/7 · Hablamos español" : "Disponible 24/7 · We speak English"}
{window.PHONE_DISPLAY}
{lang === "en" ? "Call now for a free, confidential consultation. We answer every call personally — no call centers, no bots, no waiting." : "Llame ahora para una consulta gratuita y confidencial. Respondemos cada llamada personalmente — sin call centers, sin bots, sin esperas."}
); } // ────────── SERVICES ────────── function Services({ t }) { const [hover, setHover] = useStateS(null); return (
{t.services.eyebrow}

{t.services.title}

{t.services.sub}

{t.services.items.map((s, i) => { const isHover = hover === i; return (
setHover(i)} onMouseLeave={() => setHover(null)} style={{ borderBottom: "1px solid rgba(255,255,255,.12)", borderRight: i % 3 !== 2 ? "1px solid rgba(255,255,255,.12)" : "none", padding: "36px 32px 32px", position: "relative", background: isHover ? "rgba(255,255,255,.04)" : "transparent", transition: "background .25s ease", cursor: "default", }} >

{s.k}

{s.d}

); })}
{t.cta} {t.cases.cta}
); } // ────────── CASE RESULTS ────────── function CaseResults({ t }) { return (
{t.cases.items.map((c, i) => (
{/* Faux "redacted document" */} {Array.from({ length: 14 }).map((_, j) => ( ))}
{c.title}
{c.tag}
{c.court} {c.date}

{c.note}

 ))}
{t.cases.cta}
); } // ────────── WHY US ────────── function WhyUs({ t }) { return (
A family in Miami
"Cada caso es personal."
— Founding Partner
{t.why.points.map((p, i) => (
{p.n}

{p.k}

{p.d}

 ))}
); } // ────────── HOW IT WORKS ────────── function HowItWorks({ t }) { return (
{/* Connecting line */}
{t.how.steps.map((s, i) => (
{s.n}

{s.k}

{s.d}

 ))}
); } // ────────── TESTIMONIALS ────────── function Voices({ t }) { return (
{t.voices.items.map((v, i) => (
{Array.from({ length: 5 }).map((_, j) => )}
"{v.quote}"
{v.name}
{v.role}
{v.origin}
 ))}
); } // ────────── FINAL CTA + FORM ────────── function FinalCTA({ t }) { const [step, setStep] = useStateS(1); const [form, setForm] = useStateS({ name: "", phone: "", email: "", topic: "", details: "" }); const [sent, setSent] = useStateS(false); const update = (k, v) => setForm((p) => ({ ...p, [k]: v })); return (
{t.finalCta.eyebrow && (
{t.finalCta.eyebrow}
)}

{t.finalCta.title1}
{t.finalCta.title2}

{t.finalCta.sub}

{t.finalCta.promise.split(" · ").map((p, i) => (
{p}
))}
{/* Form card */}
{sent ? (t.langToggle === 'EN' ? '✓ Recibido' : '✓ Received') : `Step ${step} of 3`}
{[1,2,3].map((n) => (
= n ? "var(--brand)" : "var(--line)", transition: "background .3s ease", }} /> ))}
{!sent ? (
{ e.preventDefault(); if (step < 3) setStep(step+1); else setSent(true); }}> {step === 1 && (

{t.langToggle === 'EN' ? "Cuéntenos sobre usted" : "Tell us who you are"}

update("name", v)} required /> update("phone", v)} type="tel" required /> update("email", v)} type="email" required />
)} {step === 2 && (

{t.langToggle === 'EN' ? "¿Qué le trae aquí?" : "What brings you here?"}

{t.findHelp.services.map((s) => ( ))}
)} {step === 3 && (

{t.langToggle === 'EN' ? "Cuéntenos un poco más" : "Tell us a bit more"}