// sections-b.jsx — Amenidades, Sustentabilidad, Entorno, Ficha, Contacto, Footer

const AMENIDADES = [
{
  n: "01",
  name: "Cancha de pádel",
  src: "assets/amen-padel2.png",
  desc: "El deporte de moda, dentro del conjunto. Para jugar con la familia sin salir de casa.",
  icon:
  <svg className="amen-icon" viewBox="0 0 36 36" fill="none" stroke="currentColor" strokeWidth="1.2">
        <rect x="6" y="9" width="24" height="18" />
        <line x1="18" y1="9" x2="18" y2="27" />
        <line x1="6" y1="18" x2="30" y2="18" />
        <circle cx="24" cy="14" r="1.2" fill="currentColor" />
      </svg>

},
{
  n: "02",
  name: "Dog park",
  src: "assets/amen-dogpark2.png",
  desc: "Un espacio cerrado, seguro y dimensionado para que tu perro corra a sus anchas.",
  icon:
  <svg className="amen-icon" viewBox="0 0 36 36" fill="none" stroke="currentColor" strokeWidth="1.2">
        <path d="M10 22c0-4 3-6 6-6h4c3 0 6 2 6 6v3H10z" />
        <circle cx="14" cy="19" r="0.8" fill="currentColor" />
        <circle cx="22" cy="19" r="0.8" fill="currentColor" />
        <path d="M11 14l-2-3M25 14l2-3" />
      </svg>

},
{
  n: "03",
  name: "Huerto comunitario",
  src: "assets/amen-huerto2.png",
  pos: "center bottom",
  desc: "Hortalizas, hierbas y aromáticas. Una invitación a involucrarse con el lugar.",
  icon:
  <svg className="amen-icon" viewBox="0 0 36 36" fill="none" stroke="currentColor" strokeWidth="1.2">
        <path d="M18 28V14" />
        <path d="M18 17c-3 0-5-2-5-5 3 0 5 2 5 5z" />
        <path d="M18 19c3 0 5-2 5-5-3 0-5 2-5 5z" />
        <path d="M8 28h20" />
      </svg>

},
{
  n: "04",
  name: "Jardín contemplativo",
  src: "assets/amen-jardin.png",
  pos: "right center",
  desc: "Un paisaje pensado para la pausa. Senderos, sombras y vegetación nativa.",
  icon:
  <svg className="amen-icon" viewBox="0 0 36 36" fill="none" stroke="currentColor" strokeWidth="1.2">
        <circle cx="18" cy="14" r="6" />
        <path d="M18 20v8" />
        <path d="M6 28c4 0 4-2 12-2s8 2 12 2" />
      </svg>

},
{
  n: "05",
  name: "Zona de juegos",
  src: "assets/amen-juegos.png",
  desc: "Equipamiento infantil pensado para el uso real de las familias del conjunto.",
  icon:
  <svg className="amen-icon" viewBox="0 0 36 36" fill="none" stroke="currentColor" strokeWidth="1.2">
        <path d="M8 28L18 10l10 18" />
        <path d="M12 24h12" />
        <line x1="18" y1="18" x2="18" y2="28" />
      </svg>

},
{
  n: "06",
  name: "Salón de reuniones",
  src: "assets/amen-salon.png",
  desc: "Un espacio para celebrar, reunir y trabajar — fuera del departamento pero cerca de casa.",
  icon:
  <svg className="amen-icon" viewBox="0 0 36 36" fill="none" stroke="currentColor" strokeWidth="1.2">
        <rect x="6" y="11" width="24" height="16" />
        <path d="M6 16h24" />
        <circle cx="11" cy="13.5" r="0.6" fill="currentColor" />
        <circle cx="14" cy="13.5" r="0.6" fill="currentColor" />
      </svg>

}];


function Amenidades() {
  return (
    <section className="amen container" id="amenidades">
      <div className="amen-header">
        <div>
          <span className="eyebrow terracota">04 · Amenidades</span>
          <h2 className="amen-title" style={{ marginTop: "1rem" }}>
            Amenidades de <em>uso</em>, no de catálogo.
          </h2>
        </div>
        <p className="amen-note">
          Seis amenidades seleccionadas con criterio de uso real — evitando la sobreoferta que no se
          usa y eleva innecesariamente el costo de mantenimiento.
        </p>
      </div>

      <div className="amen-grid stagger-grid">
        {AMENIDADES.map((a) =>
        <div className="amen-item" key={a.n}>
            <div className="amen-item-img">
              {a.src
                ? <img src={a.src} alt={a.name} className="amen-item-photo" style={a.pos ? { objectPosition: a.pos } : undefined} />
                : <image-slot id={"amen-img-" + a.n} shape="rect" fit="cover" placeholder={"Imagen · " + a.name}></image-slot>
              }
            </div>
            <div className="amen-num">{a.n}</div>
            {a.icon}
            <div style={{ flex: 1 }}></div>
            <h3 className="amen-name">{a.name}</h3>
            <p className="amen-desc">{a.desc}</p>
          </div>
        )}
      </div>
    </section>);

}

function Sustentabilidad() {
  const secRef    = React.useRef(null);
  const haloRef   = React.useRef(null);
  const rafRef    = React.useRef(null);
  const curRef    = React.useRef({ x: 50, y: 50 });
  const tgtRef    = React.useRef({ x: 50, y: 50 });
  const activeRef = React.useRef(false);
  const [vis, setVis] = React.useState(false);
  const lerp = (a, b, t) => a + (b - a) * t;
  const E = 'cubic-bezier(0.22,1,0.36,1)';

  React.useEffect(() => {
    const el = secRef.current;
    if (!el) return;
    const obs = new IntersectionObserver(([e]) => {
      if (e.isIntersecting) { setVis(true); obs.disconnect(); }
    }, { threshold: 0.12 });
    obs.observe(el);
    return () => obs.disconnect();
  }, []);

  React.useEffect(() => { return () => cancelAnimationFrame(rafRef.current); }, []);

  const tick = () => {
    const c = curRef.current, t = tgtRef.current;
    c.x = lerp(c.x, t.x, 0.04); c.y = lerp(c.y, t.y, 0.04);
    if (haloRef.current)
      haloRef.current.style.background =
        `radial-gradient(circle 700px at ${c.x.toFixed(1)}% ${c.y.toFixed(1)}%, rgba(220,160,70,0.22) 0%, rgba(190,110,40,0.10) 40%, transparent 68%)`;
    if (Math.abs(c.x - t.x) + Math.abs(c.y - t.y) > 0.05) rafRef.current = requestAnimationFrame(tick);
    else activeRef.current = false;
  };
  const onMove = (e) => {
    const r = e.currentTarget.getBoundingClientRect();
    tgtRef.current = { x: ((e.clientX - r.left) / r.width) * 100, y: ((e.clientY - r.top) / r.height) * 100 };
    if (!activeRef.current) { activeRef.current = true; rafRef.current = requestAnimationFrame(tick); }
  };
  const onLeave = () => {
    tgtRef.current = { x: 50, y: 50 };
    if (!activeRef.current) { activeRef.current = true; rafRef.current = requestAnimationFrame(tick); }
  };

  // Count-up
  const [n0, setN0] = React.useState("0");
  const [n1, setN1] = React.useState("0");
  React.useEffect(() => {
    if (!vis) return;
    const run = (to, setFn, delay, format) => {
      const dur = 1500, start = performance.now() + delay;
      const step = (now) => {
        if (now < start) { requestAnimationFrame(step); return; }
        const p = Math.min((now - start) / dur, 1);
        const e = 1 - Math.pow(1 - p, 3);
        setFn(format(Math.round(to * e)));
        if (p < 1) requestAnimationFrame(step);
      };
      requestAnimationFrame(step);
    };
    run(100,    setN0, 500,  v => `${v}`);
    run(100000, setN1, 680,  v => v >= 1000 ? v.toLocaleString('es-MX') : `${v}`);
  }, [vis]);

  // Title words — "Infraestructura — no una declaración de intenciones."
  const WORDS = [
    { w:"Infraestructura" }, { w:"—" }, { w:"no" }, { w:"una" },
    { w:"declaración", em:true }, { w:"de", em:true }, { w:"intenciones.", em:true },
  ];

  const wS = (i) => {
    const d = (i * 0.09 + 0.18).toFixed(2);
    return { display:"inline-block", marginRight:"0.2em",
      opacity: vis?1:0, filter: vis?"blur(0)":"blur(7px)", transform: vis?"none":"translateY(22px)",
      transition:`opacity 1.2s ${E} ${d}s,filter 1.4s ${E} ${d}s,transform 1.2s ${E} ${d}s` };
  };
  const wSem = (i) => {
    const d = (i * 0.09 + 0.18).toFixed(2);
    return { display:"inline-block", marginRight:"0.2em", fontStyle:"italic",
      opacity: vis?1:0, filter: vis?"blur(0)":"blur(7px)",
      transform: vis?"none":"translateY(22px)", letterSpacing: vis?"inherit":"0.14em",
      transition:`opacity 1.2s ${E} ${d}s,filter 1.4s ${E} ${d}s,transform 1.2s ${E} ${d}s,letter-spacing 1.6s ${E} ${d}s` };
  };
  const fS = (d) => ({
    opacity: vis?1:0, transform: vis?"none":"translateY(12px)",
    transition:`opacity 1s ease ${d}s,transform 1s ease ${d}s`
  });
  const itemS = (i) => ({
    opacity: vis?1:0, transform: vis?"none":"translateY(30px)",
    transition:`opacity 0.9s ${E} ${(0.6+i*0.2).toFixed(2)}s,transform 0.9s ${E} ${(0.6+i*0.2).toFixed(2)}s`
  });
  const numS = (i) => ({
    opacity: vis?1:0, filter: vis?"blur(0)":"blur(5px)",
    transform: vis?"scale(1)":"scale(0.78) translateY(16px)",
    transition:`opacity 1.1s ${E} ${(0.65+i*0.2).toFixed(2)}s,filter 1s ${E} ${(0.65+i*0.2).toFixed(2)}s,transform 1.3s ${E} ${(0.65+i*0.2).toFixed(2)}s`
  });

  return (
    <section className="sust" id="sustentabilidad"
      ref={secRef} onMouseMove={onMove} onMouseLeave={onLeave}>

      <div className="sust-bg-shimmer" />
      <div ref={haloRef} style={{
        position:"absolute", inset:0, pointerEvents:"none", zIndex:3,
        background:"radial-gradient(circle 700px at 50% 50%, rgba(220,160,70,0.18) 0%, rgba(190,110,40,0.08) 40%, transparent 68%)",
        mixBlendMode:"screen",
      }} />

      <div className="container" style={{ position:"relative", zIndex:2 }}>
        <div className="sust-grid">

          <div>
            <span className="eyebrow" style={fS(0.1)}>05 · Sustentabilidad operativa</span>
            <h2 className="sust-title" style={{ marginTop:"1rem" }}>
              {WORDS.map((tw,i) => tw.em
                ? <em key={i} style={{ ...wSem(i), color:"#EDE0C4" }}>{tw.w}</em>
                : <span key={i} style={wS(i)}>{tw.w}</span>
              )}
            </h2>
            <p className="sust-text" style={fS(0.95)}>
              Un sistema de <span style={{ color:"#D4C4A0", fontStyle:"italic" }}>gestión del agua</span> diseñado para el largo plazo.
              Lo que se construye hoy tiene que <span style={{ color:"#D4C4A0", fontStyle:"italic" }}>sostenerse durante décadas</span> — y operar con eficiencia.
            </p>
          </div>

          <div className="sust-items">
            <div className="sust-item" style={itemS(0)}>
              <div className="sust-item-n" style={{ ...numS(0), color:"#EDE0C4" }}>{n0}<span className="sust-unit">%</span></div>
              <div>
                <h3 className="sust-item-name"><span style={{ color:"#EDE0C4" }}>PTAR</span> con potabilización molecular</h3>
                <p className="sust-item-desc">Planta de tratamiento que potabiliza la <em style={{ color:"#D4C4A0" }}>totalidad del agua</em> producida por los edificios. Reduce el consumo de la red y garantiza autosuficiencia hídrica.</p>
              </div>
            </div>
            <div className="sust-item" style={itemS(1)}>
              <div className="sust-item-n" style={{ ...numS(1), color:"#EDE0C4" }}>{n1}<span className="sust-unit" style={{ fontSize:"0.9rem", marginLeft:6 }}>L</span></div>
              <div>
                <h3 className="sust-item-name">Cisterna de <span style={{ color:"#D4C4A0", fontStyle:"italic" }}>reserva</span></h3>
                <p className="sust-item-desc">Capacidad pensada para operación continua incluso ante interrupciones de servicio. <em style={{ color:"#D4C4A0" }}>Reserva real, no nominal.</em></p>
              </div>
            </div>
            <div className="sust-item" style={itemS(2)}>
              <div className="sust-item-n" style={{ ...numS(2), color:"#EDE0C4" }}>
                Muro<span style={{ fontStyle:"normal", fontFamily:"var(--font-body)", fontSize:"0.95rem", marginLeft:6, fontWeight:500, color:"#D4C4A0" }}>verde</span>
              </div>
              <div>
                <h3 className="sust-item-name">Taludes <span style={{ color:"#D4C4A0", fontStyle:"italic" }}>vegetados</span></h3>
                <p className="sust-item-desc">Anclaje con malla vegetal. Convierte la necesidad estructural del terraceo en <em style={{ color:"#D4C4A0" }}>elemento paisajístico</em> — y contexto natural desde la base.</p>
              </div>
            </div>
          </div>

        </div>
      </div>
    </section>);
}

const CONECTIVIDAD = [
{ t: "5 min",  p: "Autopista Chamapa–Lechería",          m: "Acceso directo" },
{ t: "5 min",  p: "Galerías Atizapán",                   m: "Centro comercial" },
{ t: "5 min",  p: "Costco",                              m: "Supermercado" },
{ t: "10 min", p: "Aeropuerto Atizapán · The Monarch FBO", m: "Aviación privada" },
{ t: "10 min", p: "Club de Golf Vallescondido",           m: "Golf" },
{ t: "12 min", p: "Plaza Antigua",                       m: "Centro comercial" },
{ t: "15 min", p: "Colegios",                            m: "Educación" },
{ t: "20 min", p: "Hospital Ángeles Interlomas",         m: "Servicios médicos" },
{ t: "20 min", p: "Periférico Norte",                    m: "Vialidad" },
{ t: "35 min", p: "Santa Fe",                            m: "Corredor corporativo" },
{ t: "40 min", p: "Polanco",                             m: "Centro financiero" }];


function MapPlaceholder({ vis }) {
  const c = vis ? "ent-map-vis" : "";
  return (
    <svg viewBox="0 0 500 400" className={c}
      style={{ width:"100%", height:"100%", display:"block" }}
      preserveAspectRatio="xMidYMid slice">
      <defs>
        <pattern id="paper-tx" patternUnits="userSpaceOnUse" width="6" height="6">
          <rect width="6" height="6" fill="#EBE4D6" />
          <circle cx="1" cy="2" r="0.3" fill="rgba(22,20,19,0.05)" />
        </pattern>
      </defs>
      <rect width="500" height="400" fill="url(#paper-tx)" />

      {/* Water — fades in */}
      <path className="ent-water"
        d="M30 240 Q80 200 160 220 Q230 240 310 215 Q380 195 460 235 L460 380 L30 380 Z"
        fill="#3D5A5E" opacity="0" />
      <path className="ent-water-edge"
        d="M30 240 Q80 200 160 220 Q230 240 310 215 Q380 195 460 235"
        stroke="#161413" strokeWidth="0.8" fill="none" opacity="0" />

      {/* Topographic lines — draw in staggered */}
      {[40, 70, 100, 130, 160, 190].map((y, i) =>
        <path key={i} className="ent-topo"
          style={{ animationDelay:`${(i * 0.22 + 0.2).toFixed(2)}s` }}
          d={`M0 ${y} Q120 ${y - 10} 250 ${y} T500 ${y - 5}`}
          fill="none" stroke="rgba(22,20,19,0.18)" strokeWidth="0.5"
          strokeDasharray="550" strokeDashoffset="550" />
      )}

      {/* Roads — draw in */}
      <path className="ent-road"
        d="M0 90 L180 110 L260 140 L500 130"
        stroke="rgba(22,20,19,0.35)" strokeWidth="1.2" fill="none"
        strokeDasharray="4 3" strokeDashoffset="550" />
      <path className="ent-road-2"
        d="M260 140 L300 250"
        stroke="rgba(22,20,19,0.35)" strokeWidth="1" fill="none"
        strokeDasharray="4 3" strokeDashoffset="130" />

      {/* Labels — fade in staggered */}
      <text className="ent-lbl-chamapa"
        x="40" y="80" fill="rgba(22,20,19,0.55)"
        fontSize="9" letterSpacing="2" fontFamily="Manrope" opacity="0">CHAMAPA – LECHERÍA</text>
      <text className="ent-lbl-lago"
        x="180" y="200" fill="rgba(22,20,19,0.55)"
        fontSize="9" letterSpacing="2" fontFamily="Manrope" opacity="0">LAGO ESMERALDA</text>
      <text className="ent-lbl-presa"
        x="50" y="320" fill="#F2EDE4"
        fontSize="10" letterSpacing="4" fontFamily="Manrope" fontWeight="500" opacity="0">PRESA MADÍN</text>

      {/* Marker */}
      <g transform="translate(295, 215)">
        {/* Radar rings — pulse infinitely (searching) */}
        <circle className="ent-radar-1" r="6" fill="none" stroke="#B8612C" strokeWidth="1.2" opacity="0" />
        <circle className="ent-radar-2" r="6" fill="none" stroke="#B8612C" strokeWidth="1.2" opacity="0" />
        {/* Static concentric rings */}
        <circle className="ent-ring-outer" r="22" fill="none" stroke="#B8612C" strokeWidth="1" opacity="0" />
        <circle className="ent-ring-inner" r="14" fill="none" stroke="#B8612C" strokeWidth="1" opacity="0" />
        {/* Stem line — draws downward */}
        <line className="ent-stem"
          x1="0" y1="-22" x2="0" y2="-50"
          stroke="#B8612C" strokeWidth="1"
          strokeDasharray="30" strokeDashoffset="30" />
        {/* Main dot — scale pop */}
        <circle className="ent-dot" r="6" fill="#B8612C"
          style={{ transformBox:"fill-box", transformOrigin:"center", transform:"scale(0)" }} />
        {/* LAVISTA labels */}
        <text className="ent-lbl-lavista"
          x="6" y="-54" fill="#B8612C" fontSize="11" letterSpacing="3"
          fontFamily="Manrope" fontWeight="600" opacity="0">LAVISTA</text>
        <text className="ent-lbl-sub"
          x="6" y="-42" fill="#B8612C" fontSize="8" letterSpacing="2"
          fontFamily="Manrope" opacity="0">vista poniente libre</text>
      </g>

      {/* Compass */}
      <g className="ent-compass" transform="translate(440, 50)" stroke="#161413" fill="none" opacity="0">
        <circle r="14" />
        <path d="M0 -10 L3 0 L0 10 L-3 0 Z" fill="#161413" />
        <text x="-3" y="-18" fill="#161413" fontSize="8" fontFamily="Manrope" fontWeight="600">N</text>
      </g>
    </svg>
  );
}

function Entorno() {
  const secRef    = React.useRef(null);
  const haloRef   = React.useRef(null);
  const rafRef    = React.useRef(null);
  const curRef    = React.useRef({ x: 50, y: 50 });
  const tgtRef    = React.useRef({ x: 50, y: 50 });
  const activeRef = React.useRef(false);
  const [vis, setVis] = React.useState(false);
  const lerp = (a, b, t) => a + (b - a) * t;
  const E = 'cubic-bezier(0.22,1,0.36,1)';

  React.useEffect(() => {
    const el = secRef.current;
    if (!el) return;
    const obs = new IntersectionObserver(([e]) => {
      if (e.isIntersecting) { setVis(true); obs.disconnect(); }
    }, { threshold: 0.10 });
    obs.observe(el);
    return () => obs.disconnect();
  }, []);

  React.useEffect(() => { return () => cancelAnimationFrame(rafRef.current); }, []);

  const tick = () => {
    const c = curRef.current, t = tgtRef.current;
    c.x = lerp(c.x, t.x, 0.04); c.y = lerp(c.y, t.y, 0.04);
    if (haloRef.current)
      haloRef.current.style.background =
        `radial-gradient(circle 660px at ${c.x.toFixed(1)}% ${c.y.toFixed(1)}%, rgba(184,97,44,0.07) 0%, rgba(184,97,44,0.03) 48%, transparent 70%)`;
    if (Math.abs(c.x - t.x) + Math.abs(c.y - t.y) > 0.05) rafRef.current = requestAnimationFrame(tick);
    else activeRef.current = false;
  };
  const onMove = (e) => {
    const r = e.currentTarget.getBoundingClientRect();
    tgtRef.current = { x: ((e.clientX - r.left) / r.width) * 100, y: ((e.clientY - r.top) / r.height) * 100 };
    if (!activeRef.current) { activeRef.current = true; rafRef.current = requestAnimationFrame(tick); }
  };
  const onLeave = () => {
    tgtRef.current = { x: 50, y: 50 };
    if (!activeRef.current) { activeRef.current = true; rafRef.current = requestAnimationFrame(tick); }
  };

  // Título — palabras
  const WORDS = [
    { w:"Lago" }, { w:"Esmeralda" }, { w:"—" }, { w:"una" },
    { w:"zona" }, { w:"con" },
    { w:"infraestructura", em:true },
    { w:"y" }, { w:"plusvalía" }, { w:"sostenida." },
  ];

  const wS = (i) => {
    const d = (i * 0.08 + 0.15).toFixed(2);
    return { display:"inline-block", marginRight:"0.2em",
      opacity: vis?1:0, filter: vis?"blur(0)":"blur(7px)", transform: vis?"none":"translateY(22px)",
      transition:`opacity 1.2s ${E} ${d}s,filter 1.4s ${E} ${d}s,transform 1.2s ${E} ${d}s` };
  };
  const wSkey = (i) => {
    const d = (i * 0.08 + 0.15).toFixed(2);
    return { display:"inline-block", marginRight:"0.2em",
      opacity: vis?1:0, filter: vis?"blur(0)":"blur(7px)",
      transform: vis?"none":"translateY(22px)", letterSpacing: vis?"-0.01em":"0.14em",
      transition:`opacity 1.2s ${E} ${d}s,filter 1.4s ${E} ${d}s,transform 1.2s ${E} ${d}s,letter-spacing 1.6s ${E} ${d}s` };
  };
  const fS = (d) => ({
    opacity: vis?1:0, transform: vis?"none":"translateY(12px)",
    transition:`opacity 1s ease ${d}s,transform 1s ease ${d}s`
  });
  const rowS = (i) => ({
    opacity: vis?1:0, transform: vis?"none":"translateX(18px)",
    transition:`opacity 0.7s ease ${(0.8+i*0.055).toFixed(3)}s,transform 0.7s ${E} ${(0.8+i*0.055).toFixed(3)}s`
  });

  return (
    <section className="entorno container" id="entorno"
      ref={secRef} onMouseMove={onMove} onMouseLeave={onLeave}
      style={{ position:"relative" }}>

      {/* Halo de vela */}
      <div ref={haloRef} style={{
        position:"absolute", inset:0, pointerEvents:"none", zIndex:0,
        background:"radial-gradient(circle 660px at 50% 50%, rgba(184,97,44,0.06) 0%, transparent 70%)",
        mixBlendMode:"multiply",
      }} />

      <div style={{ position:"relative", zIndex:1 }}>
        <div className="entorno-header">
          <span className="eyebrow terracota" style={fS(0.1)}>06 · El entorno</span>
          <h2 className="entorno-title">
            {WORDS.map((tw,i) => tw.em
              ? <span key={i} style={wSkey(i)}>
                  <em className="mf-key" style={{ fontStyle:"italic", animationDelay:"-1.2s" }}>{tw.w}</em>
                </span>
              : <span key={i} style={wS(i)}>{tw.w}</span>
            )}
          </h2>
          <p style={{ marginTop:"1.5rem", maxWidth:"60ch", color:"var(--ink-2)", fontSize:"1.05rem", ...fS(1.1) }}>
            Atizapán de Zaragoza concentra en su franja sur algunos de los desarrollos residenciales
            más cotizados del Estado de México. Acceso directo a Chamapa-Lechería, oferta comercial
            completa y colegios de alto nivel a menos de 15 minutos — una zona consolidada cuyo
            crecimiento patrimonial ha superado consistentemente al promedio metropolitano.
          </p>
        </div>

        <div className="entorno-grid" style={{ fontFamily:"Manrope" }}>

          {/* Mapa — curtain reveal */}
          <div className="entorno-map" style={{
            clipPath: vis?"inset(0 0% 0 0 round 2px)":"inset(0 100% 0 0 round 2px)",
            transition:"clip-path 1.6s cubic-bezier(0.22,1,0.36,1) 0.3s",
          }}>
            <MapPlaceholder vis={vis} />
          </div>

          <div>
            <span className="eyebrow" style={{ display:"block", marginBottom:"1rem", ...fS(0.5) }}>
              Conectividad
            </span>
            <div className="entorno-connect">
              {CONECTIVIDAD.map((r, i) =>
                <div className="entorno-row" key={i} style={rowS(i)}>
                  <span className="entorno-row-time">{r.t}</span>
                  <span className="entorno-row-place">{r.p}</span>
                  <span className="entorno-row-mode">{r.m}</span>
                </div>
              )}
            </div>
            <p className="entorno-foot" style={fS(1.6)}>
              Sin contaminación visual en el horizonte poniente. Vientos suaves del noreste,
              microclima templado todo el año.
            </p>
          </div>

        </div>
      </div>
    </section>);
}


function Contacto() {
  const [submitted, setSubmitted] = React.useState(false);
  const inkRef = React.useRef(null);

  const handleSubmit = (e) => {
    e.preventDefault();
    setSubmitted(true);
  };

  const handleMouseMove = (e) => {
    inkRef.current?.stamp(e.clientX, e.clientY);
  };
  const handleMouseLeave = () => {
    inkRef.current?.reset();
  };

  return (
    <section
      className="contact"
      id="contacto"
      style={{ color: "var(--ink)" }}
      onMouseMove={handleMouseMove}
      onMouseLeave={handleMouseLeave}
    >
      {/* Canvas olive oscuro cubre la sección — el cursor esculpe para revelar el crema debajo */}
      <InkReveal
        ref={inkRef}
        maskColor={[95, 118, 86]}
        brushSize={260}
        lifetime={1100}
        rStart={20}
        rVary={0.35}
        stampStep={14}
        maxStamps={200}
        gradientStops={[0.9, 0.78, 0]}
        startVisible={true}
        captureEvents={false}
      />
      <div className="contact-grid container">
        <div>
          <span className="eyebrow terracota">07 · Agenda una visita</span>
          <h2 className="contact-title" style={{ marginTop: "1.2rem" }}>
            Ven a ver la <em>vista</em>.
          </h2>
          <p className="contact-lead">
            La forma más honesta de entender LAVISTA es estar en el predio. Agenda una visita y te
            mostramos el terreno, los renders, y los planos al detalle.
          </p>

          <div className="contact-info">
            <div className="contact-info-row">
              <span className="l">Showroom</span>
              <span className="v">Lago Ballén · Lago Esmeralda · Atizapán de Zaragoza</span>
            </div>
            <div className="contact-info-row">
              <span className="l">Teléfono</span>
              <span className="v" style={{ display: "flex", flexDirection: "column", gap: "0.4rem" }}>
                <a href="tel:+525654383233" style={{ color: "inherit", textDecoration: "none", display: "flex", alignItems: "center", gap: "0.4rem" }}>
                  <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ flexShrink: 0 }}>
                    <path d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07A19.5 19.5 0 013.07 9.81a19.79 19.79 0 01-3.07-8.68A2 2 0 012 .9h3a2 2 0 012 1.72 12.84 12.84 0 00.7 2.81 2 2 0 01-.45 2.11L6.09 8.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45 12.84 12.84 0 002.81.7A2 2 0 0122 16.92z"/>
                  </svg>
                  56 5438 3233
                </a>
                <a href="https://wa.me/525654383233" target="_blank" rel="noopener noreferrer" style={{ color: "inherit", textDecoration: "none", display: "flex", alignItems: "center", gap: "0.4rem" }}>
                  <svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor" style={{ flexShrink: 0 }}>
                    <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347z"/>
                    <path d="M12 0C5.373 0 0 5.373 0 12c0 2.125.558 4.118 1.528 5.845L0 24l6.335-1.652A11.954 11.954 0 0012 24c6.627 0 12-5.373 12-12S18.627 0 12 0zm0 21.818a9.818 9.818 0 01-5.003-1.368l-.36-.214-3.735.979.995-3.63-.235-.374A9.818 9.818 0 012.182 12C2.182 6.57 6.57 2.182 12 2.182S21.818 6.57 21.818 12 17.43 21.818 12 21.818z"/>
                  </svg>
                  WhatsApp
                </a>
              </span>
            </div>
            <div className="contact-info-row">
              <span className="l">Correo</span>
              <span className="v">ventas@lavistaresidences.com.mx</span>
            </div>
            <div className="contact-info-row">
              <span className="l">Desarrollador</span>
              <span className="v">
                <img src="assets/logo-starbau.png" alt="Starbau" style={{ height: "176px", objectFit: "contain", verticalAlign: "middle", filter: "brightness(0)" }} />
              </span>
            </div>
          </div>
        </div>

        <form className="contact-form" onSubmit={handleSubmit}>
          {!submitted ?
          <React.Fragment>
              <div className="field-row">
                <div className="field">
                  <label>Nombre</label>
                  <input type="text" required />
                </div>
                <div className="field">
                  <label>Apellido</label>
                  <input type="text" required />
                </div>
              </div>
              <div className="field">
                <label>Correo</label>
                <input type="email" required />
              </div>
              <div className="field">
                <label>Teléfono</label>
                <input type="tel" />
              </div>
              <div className="field">
                <label>¿Cómo nos conociste?</label>
                <select defaultValue="">
                  <option value="" disabled>Selecciona una opción</option>
                  <option>Redes sociales</option>
                  <option>Recomendación</option>
                  <option>Anuncio</option>
                  <option>Página web</option>
                  <option>Otro</option>
                </select>
              </div>
              <div className="field">
                <label>Mensaje (opcional)</label>
                <textarea rows="3" placeholder="Cuéntanos qué te interesa del proyecto"></textarea>
              </div>
              <button type="submit" className="btn-primary">
                Solicitar información <span className="arrow">→</span>
              </button>
              <p className="form-note">
                Al enviar aceptas el aviso de privacidad. Nos pondremos en contacto en las próximas 24 horas hábiles.
              </p>
            </React.Fragment> :

          <div style={{ padding: "2rem 0", textAlign: "left" }}>
              <span className="eyebrow terracota">Gracias</span>
              <h3 style={{
              fontFamily: "var(--font-display)",
              fontSize: "2rem",
              fontWeight: 300,
              marginTop: "1rem",
              lineHeight: 1.1,
              fontStyle: "italic"
            }}>
                Recibimos tu mensaje.
              </h3>
              <p style={{ marginTop: "1rem", color: "var(--ink-2)" }}>
                Un asesor te contactará en las próximas 24 horas hábiles para coordinar tu visita.
              </p>
            </div>
          }
        </form>
      </div>
    </section>);

}

function Footer() {
  return (
    <footer className="footer" style={{ backgroundColor: "#3D4E38" }}>
      <div className="container">
        <div className="footer-top">
          <div className="footer-brand-cell">
            <img src="assets/logo-light.png" alt="LAVISTA Residences" className="footer-brand-img" />
            <p className="footer-tag">Vivir en LAVISTA es elegir la calma como estilo de vida.</p>
          </div>
          <div className="footer-col">
            <h4>Proyecto</h4>
            <ul>
              <li><a href="#concepto">Concepto</a></li>
              <li><a href="#arquitectura">Arquitectura</a></li>
              <li><a href="#departamento">Departamento</a></li>
              <li><a href="#amenidades">Amenidades</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <h4>Información</h4>
            <ul>
              <li><a href="#entorno">Entorno</a></li>
              <li><a href="#ficha">Ficha técnica</a></li>
              <li><a href="#contacto">Contacto</a></li>
              <li><a href="#">Aviso de privacidad</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <h4>Visítanos</h4>
            <ul>
              <li>Lago Esmeralda</li>
              <li>Atizapán de Zaragoza</li>
              <li>Estado de México</li>
              <li><a href="#contacto">Agendar visita →</a></li>
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          <div style={{ display: "flex", alignItems: "center", gap: "0.6rem" }}>
            © 2026 LAVISTA · Desarrollado por
            <img src="assets/logo-starbau.png" alt="Starbau" style={{ height: "144px", objectFit: "contain", verticalAlign: "middle", filter: "brightness(0) invert(1)", opacity: 0.8 }} />
          </div>
          <div>Lago Esmeralda · Atizapán</div>
        </div>
      </div>
    </footer>);

}

function Mapa() {
  return (
    <section className="mapa" id="ubicacion">
      <div className="mapa-header container">
        <span className="eyebrow terracota">Ubicación</span>
        <h2 style={{
          fontFamily: "var(--font-display)",
          fontWeight: 300,
          fontSize: "clamp(2rem, 4.5vw, 3.5rem)",
          letterSpacing: "-0.02em",
          marginTop: "0.5rem",
          lineHeight: 1.05,
        }}>
          Lago Esmeralda · <em>Atizapán de Zaragoza</em>
        </h2>
      </div>
      <div className="mapa-embed">
        <iframe
          title="Ubicación LAVISTA Residences"
          src="https://maps.google.com/maps?q=19.536441234232164,-99.27366924588988&output=embed&z=17"
          allowFullScreen
          loading="lazy"
          referrerPolicy="no-referrer-when-downgrade"
        />
        <div className="mapa-overlay">
          <span className="mapa-overlay-label">LAVISTA Residences</span>
          <div className="mapa-overlay-title">Presa Madín<br />vista poniente libre</div>
          <p className="mapa-overlay-addr">
            Lago Ballén<br />
            Lago Esmeralda, Atizapán<br />
            Estado de México
          </p>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Amenidades, Sustentabilidad, Entorno, Contacto, Footer, Mapa });