// sections.jsx — Porto Belo Residencial sections const { useState } = React; /* ---------- Image placeholder ---------- */ function Placeholder({ label, className = "", style }) { return (
{label}
); } /* ---------- Minimal line icons ---------- */ function Ico({ name, size = 30 }) { const c = { width: size, height: size, viewBox: "0 0 32 32", fill: "none", stroke: "currentColor", strokeWidth: 1.4, strokeLinecap: "round", strokeLinejoin: "round" }; switch (name) { case "pool": return (); case "garden": return (); case "pet": return (); case "elevator": return (); case "skybar": return (); case "pin": return (); default: return null; } } /* ---------- NAV ---------- */ function Nav({ S, lang, setLang, onCTA }) { const [open, setOpen] = useState(false); const items = [ ["#modelos", S.nav.models], ["#video", S.nav.video], ["#amenidades", S.nav.amenities], ["#ubicacion", S.nav.location], ["#contacto", S.nav.contact], ]; return (
PORTO BELO Residencial · Tijuana
{["es", "en"].map((l) => ( ))}
); } /* ---------- HERO FORM ---------- */ function HeroForm({ S, compact }) { const [f, setF] = useState({ nombre: "", whatsapp: "", correo: "" }); const [done, setDone] = useState(false); const upd = (k) => (e) => setF({ ...f, [k]: e.target.value }); const submit = (e) => { e.preventDefault(); if (f.nombre && f.whatsapp && f.correo) setDone(true); }; if (done) { return (

{S.form.thanksTitle}

{S.form.thanksBody}

); } return (
{S.form.eyebrow}

{S.form.lead}

{S.form.privacy}

); } /* ---------- HERO ---------- */ const HERO_IMAGES = [ "images/render-fachada.jpg", "images/interior-familia.jpg", "images/interior-sala.jpg", "images/interior-cocina.jpg", ]; function Carousel({ images, height, objectPosition }) { const [i, setI] = useState(0); const [paused, setPaused] = useState(false); const n = images.length; useEffect(() => { if (paused) return; const t = setInterval(() => setI((p) => (p + 1) % n), 4800); return () => clearInterval(t); }, [n, paused]); const go = (d) => setI((p) => (p + d + n) % n); const arrow = (side) => ({ position: "absolute", top: "50%", [side]: 14, transform: "translateY(-50%)", width: 42, height: 42, borderRadius: "50%", background: "rgba(26,26,26,.42)", color: "#fff", fontSize: 22, lineHeight: 1, display: "grid", placeItems: "center", backdropFilter: "blur(4px)", zIndex: 3, transition: "background .2s", }); return (
setPaused(true)} onMouseLeave={() => setPaused(false)} style={{ position: "relative", height, borderRadius: 3, overflow: "hidden", boxShadow: "0 30px 60px -36px rgba(40,34,20,.5)" }}> {images.map((src, idx) => ( {"Render ))}
{images.map((_, idx) => (
); } function Hero({ S, tw, onCTA, onModels }) { const headline = (

{S.hero.l1}
{S.hero.l2}

); const sub =

{S.hero.sub}

; if (tw.hero === "bg") { return (
Render fachada Porto Belo Residencial
{S.hero.eyebrow}
{headline}{sub}
); } if (tw.hero === "center") { return (
{S.hero.eyebrow}

{S.hero.l1} {S.hero.l2}

{S.hero.sub}

); } // default: render right return (
{S.hero.eyebrow}
{headline}{sub}
); } /* ---------- STATS ---------- */ function Stats({ S }) { return (
{S.stats.map((s, i) => (
{s.n}
{s.l}
))}
); } /* ---------- MODELOS ---------- */ function Modelos({ S, onPick }) { return (
{S.models.eyebrow}

{S.models.title}

{S.models.lead}

{S.models.items.map((m, i) => { const sold = m.status === "sold"; return (
{ e.currentTarget.style.transform = "translateY(-6px)"; e.currentTarget.style.boxShadow = "0 30px 60px -40px rgba(40,34,20,.45)"; }} onMouseLeave={(e) => { e.currentTarget.style.transform = ""; e.currentTarget.style.boxShadow = "none"; }}>
{"Plano {sold ? S.models.sold : S.models.avail}

{m.name}

{m.area}
{m.loc}

{m.hl}

{m.specs.map((sp, j) => ( {sp} ))}
{!sold && m.preventa ? (
{m.dcto || S.models.preventaLabel}
{m.preventa}
{m.price}
) : (
{S.models.listLabel}
{m.price}
)}
);})}
{S.models.preventa}

{S.models.note}

); } /* ---------- VIDEO ---------- */ function Video({ S }) { return (
{S.video.eyebrow}

{S.video.title}

{S.video.lead}

); } /* ---------- AMENIDADES ---------- */ function Amenidades({ S }) { const icons = ["skybar", "garden", "pet", "elevator"]; return (
{S.amen.eyebrow}

{S.amen.title}

{S.amen.items.map((a, i) => (

{a.t}

{a.d}

))}
); } /* ---------- UBICACION ---------- */ function Ubicacion({ S, contact }) { return (
Mapa de ubicación de Porto Belo Residencial en Ampliación Guaycura, Tijuana {S.loc.mapCta}
{S.loc.eyebrow}

{S.loc.title}

{S.loc.lead}

{S.loc.addrTitle}
{S.loc.addr}
    {S.loc.pois.map((p, i) => (
  • {p.name} {p.dist}
    • ))}
); } /* ---------- CTA FINAL ---------- */ function CTAFinal({ S, contact }) { const [f, setF] = useState({ nombre: "", whatsapp: "", correo: "" }); const [done, setDone] = useState(false); const upd = (k) => (e) => setF({ ...f, [k]: e.target.value }); const wa = "https://wa.me/" + contact.whatsapp + "?text=" + encodeURIComponent(S.cta.waMsg); return (
{S.cta.eyebrow}

{S.cta.title}

{S.cta.lead}

{done ? (
{S.form.thanksTitle} — {S.form.thanksBody}
) : (
{ e.preventDefault(); if (f.nombre && f.whatsapp && f.correo) setDone(true); }} style={{ display: "flex", flexDirection: "column", gap: 12, maxWidth: 620, margin: "0 auto" }}>
)}
{S.cta.or}
{S.cta.wa}
); } /* ---------- FOOTER ---------- */ function Footer({ S, contact }) { const waLink = "https://wa.me/" + contact.whatsapp; return ( ); } Object.assign(window, { Placeholder, Ico, Nav, Hero, HeroForm, Stats, Modelos, Video, Amenidades, Ubicacion, CTAFinal, Footer });