// Rubros + Logos clientes (carrusel) + Reseñas Google + Contacto + WhatsApp flotante

const RUBROS = [
  { name: "Industrias", desc: "Plantas, fábricas y plantas de producción.", icon: "industria" },
  { name: "Grandes empresas y PyMEs", desc: "Empresas con múltiples sedes o áreas.", icon: "equipo" },
  { name: "Municipios", desc: "Gestión pública y entes regulatorios.", icon: "escudo" },
  { name: "Comercios", desc: "Locales, gastronomía, retail, oficinas.", icon: "comercio" },
];

const Rubros = () => (
  <section id="rubros" style={{ padding: "100px 0" }}>
    <div className="container">
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1.4fr", gap: 60, alignItems: "center" }} className="rub-grid">
        <div>
          <div className="eyebrow reveal">Rubros</div>
          <h2 className="reveal" style={{ fontSize: "clamp(34px, 4vw, 52px)", marginTop: 14, marginBottom: 18 }}>
            Acompañamos a quienes<br/>
            <span style={{ color: "var(--green-primary)" }}>mueven la economía real.</span>
          </h2>
          <p className="reveal" style={{ fontSize: 17, color: "var(--ink-soft)" }}>
            Cada negocio es único. Por eso nuestras soluciones se adaptan
            a tu rubro, tamaño y momento.
          </p>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
          {RUBROS.map((r, i) => (
            <div key={i} className="card-lift reveal" style={{
              background: i % 2 === 0 ? "var(--green-primary)" : "white",
              color: i % 2 === 0 ? "white" : "var(--ink)",
              padding: "28px 24px", borderRadius: 22,
              border: i % 2 === 0 ? "none" : "1.5px solid rgba(14,42,36,.06)",
              boxShadow: i % 2 === 0 ? "0 14px 36px rgba(0,151,117,.25)" : "0 4px 14px rgba(14,42,36,.05)",
              minHeight: 180, display: "flex", flexDirection: "column", justifyContent: "space-between"
            }}>
              <div style={{ width: 56, height: 56 }}>
                <Icon name={r.icon} color={i % 2 === 0 ? "white" : "var(--green-primary)"} size={56}/>
              </div>
              <div>
                <h3 style={{ fontSize: 22, marginBottom: 6 }}>{r.name}</h3>
                <p style={{ fontSize: 14, opacity: .8, margin: 0 }}>{r.desc}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
    <style>{`@media (max-width: 880px) { .rub-grid { grid-template-columns: 1fr !important; } }`}</style>
  </section>
);

// Logos clientes reales — ordenados por relevancia (grandes marcas primero)
const CLIENTES = [
  { name: "YPF", src: "assets/clientes/ypf.png", h: 70 },
  { name: "Pan American Energy", src: "assets/clientes/pan-american-energy.png", h: 50 },
  { name: "REMAX", src: "assets/clientes/remax.png", h: 50 },
  { name: "Roggio", src: "assets/clientes/roggio.png", h: 60 },
  { name: "Electroingeniería", src: "assets/clientes/electroingenieria.jpg", h: 60 },
  { name: "SAI", src: "assets/clientes/sai.png", h: 60 },
  { name: "Ammega Group", src: "assets/clientes/ammega.webp", h: 50 },
  { name: "Tadicor", src: "assets/clientes/tadicor.webp", h: 60 },
  { name: "Intercordoba", src: "assets/clientes/intercordoba.png", h: 60 },
  { name: "BBC", src: "assets/clientes/bbc.jpg", h: 70 },
  { name: "DAMIC", src: "assets/clientes/damic.png", h: 60 },
  { name: "Conci", src: "assets/clientes/conci.jpg", h: 60 },
  { name: "Bonfigli", src: "assets/clientes/bonfigli.webp", h: 60 },
  { name: "Del Pilar", src: "assets/clientes/del-pilar.svg", h: 60 },
  { name: "APE SA", src: "assets/clientes/ape.jpg", h: 60 },
  { name: "Digital", src: "assets/clientes/digital.jpg", h: 60 },
  { name: "DISE", src: "assets/clientes/dise.jpg", h: 60 },
  { name: "Campanilli", src: "assets/clientes/campanilli.jpg", h: 60 },
  { name: "Luis Palacio", src: "assets/clientes/luis-palacio.jpg", h: 60 },
  { name: "De los Ríos", src: "assets/clientes/de-los-rios.jpg", h: 60 },
  { name: "Marea Piscinas", src: "assets/clientes/marea-piscinas.jpg", h: 60 },
  { name: "Mostachys", src: "assets/clientes/mostachys.jpg", h: 60 },
  { name: "SOS SA", src: "assets/clientes/sos.jpg", h: 60 },
  { name: "Pastorino", src: "assets/clientes/pastorino.jpeg", h: 60 },
  { name: "Pircas", src: "assets/clientes/pircas.png", h: 60 },
  { name: "Nelso", src: "assets/clientes/nelso.png", h: 60 },
  { name: "Neu y Serv", src: "assets/clientes/neu-y-serv.png", h: 60 },
  { name: "Nico", src: "assets/clientes/nico.webp", h: 60 },
  { name: "ITEM", src: "assets/clientes/item.png", h: 60 },
  { name: "Vieites", src: "assets/clientes/vieites.png", h: 60 },
  { name: "Vitsa", src: "assets/clientes/vitsa.png", h: 60 },
  { name: "Hair Recovery", src: "assets/clientes/hair-recovery.png", h: 50 },
  { name: "Emiliano Sanz", src: "assets/clientes/emiliano-sanz.png", h: 60 },
  { name: "Magic Wash", src: "assets/clientes/magic-wash.png", h: 60 },
  { name: "La Unión Neumáticos", src: "assets/clientes/la-union.png", h: 60 },
  { name: "Miguel Sheimberg", src: "assets/clientes/miguel-sheimberg.png", h: 60 },
  { name: "Omixom", src: "assets/clientes/omixom.png", h: 50 },
  { name: "Paprika", src: "assets/clientes/paprika.png", h: 60 },
  { name: "Servelec", src: "assets/clientes/servelec.png", h: 60 },
  { name: "El Práctico", src: "assets/clientes/el-practico.png", h: 60 },
];

const LogoBox = ({ name, src, h }) => (
  <div style={{
    width: 180, height: 110, flexShrink: 0,
    display: "flex", alignItems: "center", justifyContent: "center",
    margin: "0 18px", padding: "0 14px",
    filter: "grayscale(1)", opacity: .65,
    transition: "filter .3s, opacity .3s"
  }}
  onMouseEnter={e => { e.currentTarget.style.filter = "grayscale(0)"; e.currentTarget.style.opacity = 1; }}
  onMouseLeave={e => { e.currentTarget.style.filter = "grayscale(1)"; e.currentTarget.style.opacity = .65; }}
  >
    <img src={src} alt={name} title={name} style={{ maxHeight: h, maxWidth: "100%", objectFit: "contain" }}/>
  </div>
);

const Logos = () => (
  <section style={{ padding: "80px 0 100px", borderTop: "1px solid rgba(14,42,36,.06)", borderBottom: "1px solid rgba(14,42,36,.06)", background: "white" }}>
    <div className="container" style={{ marginBottom: 48 }}>
      <div style={{ textAlign: "center" }}>
        <div className="eyebrow">Empresas que confían en nosotros</div>
      </div>
    </div>
    <div className="marquee" style={{ overflow: "hidden", maskImage: "linear-gradient(90deg, transparent, black 6%, black 94%, transparent)", WebkitMaskImage: "linear-gradient(90deg, transparent, black 6%, black 94%, transparent)" }}>
      <div className="marquee-track">
        {[...CLIENTES, ...CLIENTES].map((c, i) => <LogoBox key={i} {...c} />)}
      </div>
    </div>
  </section>
);

// Reseñas Google reales (extraídas de la ficha de Google Maps de Grupo Green)
const REVIEWS = [
  { name: "Farmacias Eben Ezer", stars: 5, date: "Hace 2 meses",
    text: "Recomendable el trabajo de Grupo Green! Especialmente Ornella, muy amable y profesional. Pudimos a pesar de lo imposible lograr la habilitación sin problemas, MUCHAS GRACIAS!!!!" },
  { name: "Dogta. Ar", stars: 5, date: "Hace 4 meses",
    text: "Ornella nos ayudó en todo para poder abrir nuestra guardería canina en tiempo récord, predisposición full time para evacuar dudas y trato muy humano. Los super recomiendo!" },
  { name: "Santiago Stanich", stars: 5, date: "Hace 7 meses",
    text: "Excelente atención y un trabajo súper profesional. Se nota la dedicación, el compromiso y la calidad en cada detalle. Muy recomendable para quienes buscan seriedad y resultados de primer nivel." },
  { name: "Liz Gavilanez", stars: 5, date: "Hace 6 meses",
    text: "Excelente atención de todo el equipo, principalmente de Orne! Son muy profesionales y eficientes. Lo recomiendo al 100%." },
  { name: "Cuomo Servicios Gastronómicos", stars: 5, date: "Hace 2 meses",
    text: "Su trabajo fue perfecto. Rápido, serio y accesible. 100% recomendables." },
  { name: "Fernanda Del Ceri", stars: 5, date: "Hace 2 meses",
    text: "Excelente Gestion, Ornella y su equipo fueron prácticos y claros en el proceso, los re súper recomiendo." },
  { name: "Mónica Laureiro", stars: 5, date: "Hace 2 meses",
    text: "Súper recomendable trabajar con Grupo Green, muy serio y responsables!!" },
  { name: "Rosario Tobares", stars: 5, date: "Hace 8 meses",
    text: "Muy recomendables! Nosotros hemos gestionado con ellos habilitaciones municipales y hacen que lo tedioso de lo burocrático se haga llevadero. Súper pacientes y bien predispuestos en responder nuestras incertidumbres. Dan respuesta de manera rápida." },
  { name: "Leopoldo Mozzi", stars: 5, date: "Hace 10 meses",
    text: "Grupo Green realmente excelentes... Ornella y todo el equipo son muy profesionales y dedicados, estuvieron acompañando en todo momento con mucha paciencia y profesionalismo. ALTAMENTE RECOMENDABLES, te ahorran todo el tiempo que podés perder en trámites burocráticos." },
  { name: "Rincón A", stars: 5, date: "Hace un año",
    text: "Excelente servicio! Tramité la habilitación de mi negocio con ellos y resolvieron todo. Súper profesionales, pacientes y responsables. Los recomiendo 100%." },
];

const GOOGLE_REVIEWS_URL = "https://www.google.com/maps/place/GRUPO+GREEN/@-31.4152612,-64.1845285,708m/data=!3m1!1e3!4m8!3m7!1s0x9432a31e26c0ec31:0xa4dda06caff6b7d9!8m2!3d-31.4152658!4d-64.1819482!9m1!1b1!16s%2Fg%2F11k4yh9274";

const Reviews = () => {
  return (
    <section id="reseñas" style={{ padding: "120px 0", background: "var(--green-light)", position: "relative", overflow: "hidden" }}>
      <div style={{ position: "absolute", top: -60, left: -60, width: 240, height: 240, opacity: .25 }} aria-hidden="true">
        <Brote color="#009775" size={240} />
      </div>
      <div className="container" style={{ position: "relative" }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", flexWrap: "wrap", gap: 24, marginBottom: 48 }}>
          <div>
            <div className="eyebrow">Lo que dicen en Google</div>
            <h2 style={{ fontSize: "clamp(34px, 4vw, 52px)", marginTop: 14, maxWidth: 600 }}>
              Reseñas reales de quienes ya<br/>nos eligieron.
            </h2>
          </div>
          <div style={{ background: "white", padding: "20px 26px", borderRadius: 20, boxShadow: "0 10px 30px rgba(14,42,36,.08)" }}>
            <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
              <div style={{ display: "flex", flexDirection: "column" }}>
                <span style={{ fontSize: 11, color: "var(--ink-soft)", letterSpacing: ".1em", textTransform: "uppercase" }}>Google</span>
                <span style={{ fontSize: 28, fontWeight: 700, fontFamily: "Fraunces, serif" }}>5.0</span>
              </div>
              <div style={{ display: "flex", gap: 2 }}>
                {[1,2,3,4,5].map(i => <IconStar key={i} size={20}/>)}
              </div>
            </div>
            <a href={GOOGLE_REVIEWS_URL} target="_blank" style={{ display: "inline-block", marginTop: 6, fontSize: 13, color: "var(--green-primary)", fontWeight: 600, textDecoration: "none" }}>
              Ver todas en Google →
            </a>
          </div>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(280px, 1fr))", gap: 20 }}>
          {REVIEWS.map((r, i) => (
            <div key={i} className="card-lift" style={{
              background: "white", padding: 26, borderRadius: 22,
              boxShadow: "0 8px 22px rgba(14,42,36,.06)",
              display: "flex", flexDirection: "column", gap: 14
            }}>
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
                <div style={{ display: "flex", gap: 3 }}>
                  {[1,2,3,4,5].map(s => <IconStar key={s} size={16}/>)}
                </div>
                <span style={{ fontSize: 12, color: "var(--ink-soft)" }}>{r.date}</span>
              </div>
              <p style={{ fontSize: 15, lineHeight: 1.55, color: "var(--ink)", margin: 0 }}>
                "{r.text}"
              </p>
              <div style={{ display: "flex", alignItems: "center", gap: 12, marginTop: "auto", paddingTop: 8, borderTop: "1px solid rgba(14,42,36,.06)" }}>
                <div style={{
                  width: 38, height: 38, borderRadius: "50%",
                  background: "var(--green-primary)", color: "white",
                  display: "flex", alignItems: "center", justifyContent: "center",
                  fontWeight: 700, fontSize: 15
                }}>{r.name[0]}</div>
                <div>
                  <div style={{ fontWeight: 600, fontSize: 14 }}>{r.name}</div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

const Contacto = () => {
  const [form, setForm] = React.useState({ nombre: "", empresa: "", email: "", tel: "", mensaje: "" });
  const [sent, setSent] = React.useState(false);
  const valid = form.nombre.length > 1 && /\S+@\S+\.\S+/.test(form.email) && form.mensaje.length > 5;

  return (
    <section id="contacto" style={{ padding: "120px 0", background: "var(--ink)", color: "white", position: "relative", overflow: "hidden" }}>
      <div style={{ position: "absolute", bottom: -120, right: -120, width: 380, height: 380, opacity: .08, color: "#40C1AC" }} aria-hidden="true">
        <Icon name="isotipo" color="#40C1AC" size={380}/>
      </div>

      <div className="container" style={{ position: "relative", zIndex: 2 }}>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 80 }} className="cont-grid">
          <div>
            <div className="eyebrow" style={{ color: "var(--green-mint)" }}>Hablemos</div>
            <h2 style={{ fontSize: "clamp(36px, 4.4vw, 60px)", marginTop: 14, marginBottom: 24, color: "white" }}>
              ¿Necesitás ayuda?<br/>
              <span className="handwritten" style={{ color: "var(--yellow)", fontSize: "1.2em", display: "inline-block", lineHeight: 0.9 }}>Lo resolvemos por vos.</span>
            </h2>
            <p style={{ fontSize: 17, color: "rgba(255,255,255,.75)", marginBottom: 40, maxWidth: 420 }}>
              Escribinos por WhatsApp y te respondemos en menos de 24h.
              También podés dejarnos tus datos y te llamamos.
            </p>

            <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
              <ContactItem icon="whatsapp" label="WhatsApp" value="351-5339198" href="https://walink.co/a546fc"/>
              <ContactItem icon="mail" label="Email" value="grupogreen.info@gmail.com" href="mailto:grupogreen.info@gmail.com"/>
              <ContactItem icon="ubicacion" label="Oficina" value="25 de Mayo 125 — Córdoba" href="https://www.google.com/maps/search/25+de+Mayo+125+Córdoba"/>
              <ContactItem icon="instagram" label="Instagram" value="@grupogreenok" href="https://www.instagram.com/grupogreenok/"/>
            </div>
          </div>

          <div>
            <form onSubmit={e => { e.preventDefault(); if(valid) setSent(true); }} style={{
              background: "white", color: "var(--ink)", padding: 36, borderRadius: 28,
              boxShadow: "0 30px 80px rgba(0,0,0,.4)"
            }}>
              {!sent ? (
                <>
                  <h3 style={{ fontSize: 24, marginBottom: 20 }}>Dejanos tu mensaje</h3>
                  <Field label="Nombre y apellido" value={form.nombre} onChange={v => setForm({...form, nombre: v})}/>
                  <Field label="Empresa (opcional)" value={form.empresa} onChange={v => setForm({...form, empresa: v})}/>
                  <Field label="Email" type="email" value={form.email} onChange={v => setForm({...form, email: v})}/>
                  <Field label="Teléfono (opcional)" type="tel" value={form.tel} onChange={v => setForm({...form, tel: v})}/>
                  <Field label="¿En qué te ayudamos?" value={form.mensaje} onChange={v => setForm({...form, mensaje: v})} multiline/>
                  <button type="submit" disabled={!valid} className="btn btn-primary" style={{
                    width: "100%", justifyContent: "center", marginTop: 12,
                    opacity: valid ? 1 : .4, cursor: valid ? "pointer" : "not-allowed"
                  }}>
                    Enviar mensaje <IconArrow size={18} color="white"/>
                  </button>
                </>
              ) : (
                <div style={{ textAlign: "center", padding: "30px 10px" }}>
                  <div style={{ width: 64, height: 64, margin: "0 auto 16px", borderRadius: "50%",
                    background: "rgba(0,151,117,.12)", display: "flex", alignItems: "center", justifyContent: "center" }}>
                    <IconCheck size={40}/>
                  </div>
                  <h3 style={{ fontSize: 24, marginBottom: 8 }}>¡Listo, {form.nombre.split(" ")[0]}!</h3>
                  <p style={{ color: "var(--ink-soft)", marginBottom: 18 }}>
                    Recibimos tu mensaje. Te respondemos en menos de 24h hábiles.
                  </p>
                  <button onClick={() => { setSent(false); setForm({ nombre: "", empresa: "", email: "", tel: "", mensaje: "" }); }} className="btn btn-ghost">
                    Enviar otro mensaje
                  </button>
                </div>
              )}
            </form>
          </div>
        </div>
      </div>
      <style>{`@media (max-width: 880px) { .cont-grid { grid-template-columns: 1fr !important; gap: 50px !important; } }`}</style>
    </section>
  );
};

const Field = ({ label, value, onChange, type = "text", multiline = false }) => {
  const [focus, setFocus] = React.useState(false);
  const hasValue = value.length > 0;
  const float = focus || hasValue;
  return (
    <div style={{ position: "relative", marginBottom: 16 }}>
      <label style={{
        position: "absolute", left: 16,
        top: float ? 8 : multiline ? 18 : "50%",
        transform: float ? "translateY(0)" : "translateY(-50%)",
        fontSize: float ? 11 : 15, fontWeight: float ? 600 : 400,
        color: focus ? "var(--green-primary)" : "var(--ink-soft)",
        transition: "all .2s", pointerEvents: "none",
        background: "white", padding: float ? "0 4px" : 0,
        letterSpacing: float ? ".05em" : 0,
        textTransform: float ? "uppercase" : "none"
      }}>{label}</label>
      {multiline ? (
        <textarea value={value} onChange={e => onChange(e.target.value)}
          onFocus={() => setFocus(true)} onBlur={() => setFocus(false)}
          rows={4}
          style={fieldStyle(focus)}/>
      ) : (
        <input type={type} value={value} onChange={e => onChange(e.target.value)}
          onFocus={() => setFocus(true)} onBlur={() => setFocus(false)}
          style={fieldStyle(focus)}/>
      )}
    </div>
  );
};
const fieldStyle = (focus) => ({
  width: "100%", padding: "22px 16px 8px",
  border: `1.5px solid ${focus ? "var(--green-primary)" : "rgba(14,42,36,.12)"}`,
  borderRadius: 12, fontSize: 15, fontFamily: "inherit", color: "var(--ink)",
  outline: "none", background: "white", resize: "vertical", transition: "border-color .2s"
});

const ContactItem = ({ icon, label, value, href }) => (
  <a href={href} target="_blank" style={{ textDecoration: "none", color: "white", display: "flex", alignItems: "center", gap: 18,
    padding: "16px 0", borderBottom: "1px solid rgba(255,255,255,.1)", transition: "padding .2s" }}
    onMouseEnter={e => e.currentTarget.style.paddingLeft = "8px"}
    onMouseLeave={e => e.currentTarget.style.paddingLeft = "0"}>
    <div style={{ width: 44, height: 44, borderRadius: 12, background: "rgba(64,193,172,.12)",
      display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }}>
      <Icon name={icon} color="var(--green-mint)" size={22}/>
    </div>
    <div style={{ flex: 1 }}>
      <div style={{ fontSize: 11, color: "var(--green-mint)", letterSpacing: ".1em", textTransform: "uppercase", marginBottom: 4 }}>{label}</div>
      <div style={{ fontSize: 16, fontWeight: 500 }}>{value}</div>
    </div>
  </a>
);

const Footer = () => (
  <footer style={{ padding: "40px 0", background: "var(--ink)", color: "rgba(255,255,255,.5)", borderTop: "1px solid rgba(255,255,255,.06)" }}>
    <div className="container" style={{ display: "flex", justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", gap: 16 }}>
      <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
        <Icon name="isotipo" color="#40C1AC" size={36}/>
        <span style={{ fontSize: 14 }}>© {new Date().getFullYear()} Grupo Green · Córdoba, Argentina</span>
      </div>
      <div style={{ fontSize: 13 }}>Simplificamos lo complejo.</div>
    </div>
  </footer>
);

const WhatsAppFloat = () => {
  const [open, setOpen] = React.useState(false);
  const [shown, setShown] = React.useState(false);
  React.useEffect(() => {
    const t = setTimeout(() => setShown(true), 1800);
    return () => clearTimeout(t);
  }, []);
  return (
    <div style={{ position: "fixed", bottom: 24, right: 24, zIndex: 60,
      transform: shown ? "translateY(0)" : "translateY(120px)",
      opacity: shown ? 1 : 0, transition: "all .5s cubic-bezier(.2,.8,.2,1)" }}>
      {open && (
        <div style={{
          position: "absolute", bottom: 78, right: 0, width: 320,
          background: "white", borderRadius: 22, padding: 20,
          boxShadow: "0 30px 60px rgba(14,42,36,.25)",
          animation: "fadeIn .3s ease",
          border: "1px solid rgba(14,42,36,.06)"
        }}>
          <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 14 }}>
            <div style={{ width: 44, height: 44, borderRadius: "50%", background: "var(--green-primary)",
              display: "flex", alignItems: "center", justifyContent: "center" }}>
              <Icon name="isotipo" color="white" size={26}/>
            </div>
            <div>
              <div style={{ fontWeight: 600 }}>Grupo Green</div>
              <div style={{ fontSize: 12, color: "var(--green-primary)", display: "flex", alignItems: "center", gap: 6 }}>
                <span style={{ width: 7, height: 7, borderRadius: 999, background: "var(--green-mint)" }}></span>
                En línea ahora
              </div>
            </div>
            <button onClick={() => setOpen(false)} style={{ marginLeft: "auto", background: "transparent", color: "var(--ink-soft)", fontSize: 22, padding: 0 }}>×</button>
          </div>
          <div style={{ background: "#F4FBF7", padding: "12px 14px", borderRadius: 14, fontSize: 14, marginBottom: 14, position: "relative" }}>
            ¡Hola! 👋 Contanos qué necesitás resolver y un asesor te responde por WhatsApp en menos de 24h.
          </div>
          <a href="https://walink.co/a546fc" target="_blank" className="btn btn-primary" style={{ width: "100%", justifyContent: "center" }}>
            <IconWhatsapp size={18}/> Iniciar conversación
          </a>
        </div>
      )}
      <button onClick={() => setOpen(!open)} className="pulse-ring" style={{
        width: 64, height: 64, borderRadius: "50%",
        background: "#25D366", color: "white",
        boxShadow: "0 14px 30px rgba(37,211,102,.4)",
        position: "relative", display: "flex", alignItems: "center", justifyContent: "center",
        animation: "wa-bounce 2.5s ease infinite"
      }}>
        <IconWhatsapp size={30}/>
      </button>
    </div>
  );
};

Object.assign(window, { Rubros, Logos, Reviews, Contacto, Footer, WhatsAppFloat });