// Variant B — Shared components

// ---- Scroll reveal hook (uses IntersectionObserver) ------------------------
const useReveal = (options = {}) => {
  const ref = React.useRef(null);
  const [visible, setVisible] = React.useState(false);
  React.useEffect(() => {
    const el = ref.current;
    if (!el) return;
    // Find the nearest scrollable ancestor so the observer works inside
    // the artboard's overflow container.
    let root = el.parentElement;
    while (root) {
      const s = getComputedStyle(root);
      if (/(auto|scroll)/.test(s.overflowY) || /(auto|scroll)/.test(s.overflow)) break;
      root = root.parentElement;
    }
    const io = new IntersectionObserver(
      (entries) => {
        entries.forEach((e) => {
          if (e.isIntersecting) {
            setVisible(true);
            io.unobserve(e.target);
          }
        });
      },
      { root: root || null, rootMargin: options.rootMargin || "0px 0px -10% 0px", threshold: options.threshold || 0.1 }
    );
    io.observe(el);
    return () => io.disconnect();
  }, []);
  return [ref, visible];
};

const Reveal = ({ children, delay = 0, y = 24, as: Tag = "div", style, ...rest }) => {
  const [ref, visible] = useReveal();
  return (
    <Tag
      ref={ref}
      style={{
        ...style,
        opacity: visible ? 1 : 0,
        transform: visible ? "translateY(0)" : `translateY(${y}px)`,
        transition: `opacity 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) ${delay}ms, transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) ${delay}ms`,
        willChange: "opacity, transform",
      }}
      {...rest}
    >
      {children}
    </Tag>
  );
};

// Marquee ticker — infinite horizontal scroll
const Marquee = ({ items, speed = 30, color = B.ink, bg = B.cream, border = true }) => (
  <div style={{
    overflow: "hidden",
    background: bg,
    borderTop: border ? `1px solid ${B.ink}` : "none",
    borderBottom: border ? `1px solid ${B.ink}` : "none",
    padding: "18px 0",
    position: "relative",
  }}>
    <style>{`
      @keyframes bmarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
      @keyframes bfloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
    `}</style>
    <div style={{
      display: "flex", gap: 48, whiteSpace: "nowrap",
      animation: `bmarquee ${speed}s linear infinite`,
      width: "max-content",
    }}>
      {[...items, ...items, ...items].map((t, i) => (
        <div key={i} style={{
          ...BSerif, fontSize: 36, color, letterSpacing: -0.6,
          display: "flex", alignItems: "center", gap: 48,
        }}>
          <span style={{ fontStyle: "italic" }}>{t}</span>
          <span style={{ color: B.red, fontSize: 12 }}>✦</span>
        </div>
      ))}
    </div>
  </div>
);

// ---- Floating WhatsApp FAB --------------------------------------------------
const BWhatsAppFab = () => {
  const [open, setOpen] = React.useState(false);
  const [hover, setHover] = React.useState(false);
  const services = [
    { key: "medicina", ...CLINIC.whatsapp.medicina, icon: "stethoscope" },
    { key: "odonto", ...CLINIC.whatsapp.odonto, icon: "tooth" },
    { key: "lab", ...CLINIC.whatsapp.lab, icon: "flask" },
  ];
  const openWA = (raw, label) => {
    const msg = encodeURIComponent(`Hola, me gustaría agendar una cita de ${label}.`);
    window.open(`https://wa.me/${raw}?text=${msg}`, "_blank");
    setOpen(false);
  };
  return (
    <div style={{ position: "fixed", bottom: 24, right: 24, zIndex: 100 }}>
      {open && (
        <div style={{
          position: "absolute", bottom: 76, right: 0, width: 280,
          background: B.white, padding: 8,
          boxShadow: "0 20px 60px rgba(0,0,0,0.22)",
          border: `1px solid ${B.border}`,
          animation: "bfadein 0.25s ease-out",
        }}>
          <style>{`@keyframes bfadein { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }`}</style>
          <div style={{ fontSize: 10, fontWeight: 700, color: B.ink3, textTransform: "uppercase", letterSpacing: 1.8, padding: "10px 12px 8px" }}>
            Elija servicio
          </div>
          {services.map((s) => (
            <button key={s.key} onClick={() => openWA(s.raw, s.label)} style={{
              display: "flex", alignItems: "center", gap: 14, width: "100%",
              padding: "14px 12px", border: "none", background: "transparent",
              cursor: "pointer", textAlign: "left",
              borderTop: `1px solid ${B.cream}`,
              transition: "background 0.2s ease, padding-left 0.2s ease",
            }}
              onMouseEnter={(e) => { e.currentTarget.style.background = B.cream; e.currentTarget.style.paddingLeft = "18px"; }}
              onMouseLeave={(e) => { e.currentTarget.style.background = "transparent"; e.currentTarget.style.paddingLeft = "12px"; }}
            >
              <div style={{ width: 38, height: 38, background: B.navy, display: "flex", alignItems: "center", justifyContent: "center", color: B.white }}>
                <BIcon name={s.icon} size={18} color={B.white} />
              </div>
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 14, fontWeight: 600, color: B.ink, letterSpacing: -0.2 }}>{s.label}</div>
                <div style={{ fontSize: 12, color: B.ink3, marginTop: 2 }}>{s.number}</div>
              </div>
              <BIcon name="arrowUpRight" size={14} color={B.red} />
            </button>
          ))}
        </div>
      )}
      <button
        onClick={() => setOpen(!open)}
        onMouseEnter={() => setHover(true)}
        onMouseLeave={() => setHover(false)}
        style={{
          width: 60, height: 60, borderRadius: 0,
          background: B.red, border: "none", cursor: "pointer",
          boxShadow: hover ? "0 14px 40px rgba(206,17,38,0.65)" : "0 10px 30px rgba(206,17,38,0.5)",
          transform: hover ? "translateY(-2px)" : "translateY(0)",
          transition: "transform 0.2s ease, box-shadow 0.2s ease",
          display: "flex", alignItems: "center", justifyContent: "center",
          color: B.white,
        }}>
        {open ? <BIcon name="close" size={24} color={B.white} stroke={2.4} /> : <BIcon name="whatsapp" size={26} color={B.white} stroke={2.2} />}
      </button>
      {!open && (
        <span style={{
          position: "absolute", top: -3, right: -3,
          width: 14, height: 14, background: "#10B981", borderRadius: "50%",
          border: `2px solid ${B.cream}`,
          animation: "bpulse 2s ease-in-out infinite",
        }} />
      )}
      <style>{`@keyframes bpulse { 0%,100% { box-shadow: 0 0 0 0 rgba(16,185,129,0.7); } 50% { box-shadow: 0 0 0 8px rgba(16,185,129,0); } }`}</style>
    </div>
  );
};

const BPhotoPh = ({ label, height = 200, bg = B.creamDark, src }) => (
  <div style={{
    height, width: "100%",
    background: src ? B.creamDark : `repeating-linear-gradient(-45deg, ${bg}, ${bg} 8px, ${B.cream} 8px, ${B.cream} 16px)`,
    display: "flex", alignItems: "center", justifyContent: "center",
    color: B.ink3, fontSize: 11, fontFamily: "ui-monospace, monospace",
    textAlign: "center", padding: src ? 0 : 16, border: `1px solid ${B.border}`,
    overflow: "hidden",
  }}>
    {src ? (
      <img src={src} alt={label}
        style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
    ) : (
      <React.Fragment>[ {label} ]</React.Fragment>
    )}
  </div>
);

const BEyebrow = ({ children, color = B.red }) => (
  <div style={{
    fontSize: 11, fontWeight: 700, color,
    textTransform: "uppercase", letterSpacing: 2.5,
    marginBottom: 16,
    fontFamily: "'Inter', sans-serif",
  }}>
    — {children}
  </div>
);

// ---- Featured service card (promos) ----------------------------------------
const BFeaturedCard = ({ item, compact = false }) => {
  const [hover, setHover] = React.useState(false);
  const isNavy = item.accent === "navy";
  const bg = isNavy ? B.navy : B.red;
  const onDark = true;
  return (
    <a
      href={`https://wa.me/${item.raw}`}
      target="_blank"
      rel="noopener"
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        display: "block", background: bg, color: B.white,
        padding: compact ? 20 : 32, textDecoration: "none",
        position: "relative", overflow: "hidden",
        transform: hover ? "translateY(-4px)" : "translateY(0)",
        boxShadow: hover ? "0 24px 60px rgba(0,0,0,0.25)" : "0 0 0 rgba(0,0,0,0)",
        transition: "transform 0.35s cubic-bezier(0.2,0.8,0.2,1), box-shadow 0.35s ease",
      }}>
      <div style={{
        position: "absolute", inset: 0,
        background: `radial-gradient(circle at 80% 20%, rgba(255,255,255,0.12), transparent 60%)`,
        opacity: hover ? 1 : 0.5, transition: "opacity 0.4s ease",
      }} />
      <div style={{ position: "relative" }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginBottom: compact ? 16 : 32 }}>
          <div style={{ fontSize: 10, fontWeight: 700, letterSpacing: 2, opacity: 0.8, textTransform: "uppercase" }}>— {item.kicker}</div>
          {item.price && (
            <div style={{ padding: "6px 12px", background: B.white, color: item.accent === "navy" ? B.navy : B.red, fontSize: 13, fontWeight: 800, letterSpacing: 0.5 }}>
              {item.price}
            </div>
          )}
        </div>
        <div style={{ ...BSerif, fontSize: compact ? 36 : 56, lineHeight: 0.95, letterSpacing: -1.8, marginBottom: compact ? 12 : 20 }}>
          {item.title}.
        </div>
        <p style={{ fontSize: compact ? 13 : 15, lineHeight: 1.55, opacity: 0.9, margin: 0, maxWidth: 380 }}>{item.copy}</p>
        <div style={{ display: "flex", alignItems: "center", gap: 10, marginTop: compact ? 20 : 32, paddingTop: compact ? 16 : 20, borderTop: "1px solid rgba(255,255,255,0.25)" }}>
          <BIcon name="whatsapp" size={16} color={B.white} />
          <span style={{ fontSize: 13, fontWeight: 700, letterSpacing: 1, textTransform: "uppercase" }}>Contáctanos al {item.cta}</span>
          <span style={{ flex: 1 }} />
          <span style={{
            display: "inline-flex", transform: hover ? "translateX(4px)" : "translateX(0)",
            transition: "transform 0.3s ease",
          }}>
            <BIcon name="arrowUpRight" size={16} color={B.white} />
          </span>
        </div>
      </div>
    </a>
  );
};

// ---- Gallery tile -----------------------------------------------------------
const BGalleryTile = ({ item, height = 200 }) => {
  const [hover, setHover] = React.useState(false);
  const isRed = item.tone === "red";
  const accent = isRed ? B.red : B.navy;
  return (
    <div
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        position: "relative", overflow: "hidden", cursor: "pointer",
        height, background: B.creamDark,
        border: `1px solid ${B.border}`,
      }}>
      <div style={{
        position: "absolute", inset: 0,
        background: `repeating-linear-gradient(-45deg, ${B.creamDark}, ${B.creamDark} 10px, ${B.cream} 10px, ${B.cream} 20px)`,
        transform: hover ? "scale(1.06)" : "scale(1)",
        transition: "transform 0.6s cubic-bezier(0.2,0.8,0.2,1)",
      }} />
      <div style={{
        position: "absolute", inset: 0,
        background: hover ? `linear-gradient(180deg, transparent 40%, ${accent} 100%)` : "transparent",
        transition: "background 0.4s ease",
      }} />
      <div style={{
        position: "absolute", left: 16, bottom: 16, right: 16,
        color: hover ? B.white : B.ink3,
        fontSize: 12, fontFamily: "ui-monospace, monospace",
        transform: hover ? "translateY(0)" : "translateY(4px)",
        transition: "transform 0.3s ease, color 0.3s ease",
        display: "flex", justifyContent: "space-between", alignItems: "flex-end",
      }}>
        <span>{item.label}</span>
        <span style={{
          opacity: hover ? 1 : 0, transition: "opacity 0.3s ease",
          fontSize: 14,
        }}>→</span>
      </div>
    </div>
  );
};

// ---- Services accordion ----------------------------------------------------
const BServicesAccordion = ({ compact = false }) => {
  const [open, setOpen] = React.useState("medicina");
  const services = [
    { key: "medicina", label: "Medicina General", icon: "stethoscope", num: "01", phone: CLINIC.whatsapp.medicina, sub: CLINIC.services.medicina.sub },
    { key: "lab", label: "Laboratorio Clínico", icon: "flask", num: "02", phone: CLINIC.whatsapp.lab, sub: CLINIC.services.lab.sub },
    { key: "odonto", label: "Odontología", icon: "tooth", num: "03", phone: CLINIC.whatsapp.odonto, sub: CLINIC.services.odonto.sub },
  ];
  return (
    <div style={{ borderTop: `1px solid ${B.ink}` }}>
      {services.map((s) => {
        const isOpen = open === s.key;
        const items = CLINIC.services[s.key].items;
        return (
          <div key={s.key} style={{ borderBottom: `1px solid ${B.ink}`, background: isOpen ? B.white : "transparent", transition: "background 0.3s ease" }}>
            <button onClick={() => setOpen(isOpen ? null : s.key)}
              onMouseEnter={(e) => { if (!isOpen) e.currentTarget.style.paddingLeft = compact ? "8px" : "16px"; }}
              onMouseLeave={(e) => { if (!isOpen) e.currentTarget.style.paddingLeft = "0px"; }}
              style={{
                width: "100%", padding: compact ? "20px 0" : "32px 0",
                background: "transparent", border: "none", cursor: "pointer",
                display: "flex", alignItems: "center", gap: compact ? 16 : 24, textAlign: "left",
                transition: "padding-left 0.3s ease",
            }}>
              <div style={{ fontSize: compact ? 12 : 14, color: B.ink3, fontFamily: "ui-monospace, monospace", minWidth: compact ? 24 : 40 }}>
                {s.num}
              </div>
              <div style={{ color: isOpen ? B.red : B.ink, transition: "color 0.3s ease", transform: isOpen ? "rotate(-8deg)" : "rotate(0)", transitionProperty: "color, transform" }}>
                <BIcon name={s.icon} size={compact ? 24 : 32} stroke={1.6} />
              </div>
              <div style={{ flex: 1 }}>
                <div style={{ ...BSerif, fontSize: compact ? 24 : 42, color: isOpen ? B.red : B.ink, letterSpacing: -0.5, lineHeight: 1, transition: "color 0.3s ease" }}>
                  {s.label}
                </div>
                {!compact && (
                  <div style={{ fontSize: 13, color: B.ink3, marginTop: 8, fontStyle: "italic" }}>{s.sub}</div>
                )}
              </div>
              <div style={{
                width: compact ? 32 : 44, height: compact ? 32 : 44, border: `1px solid ${B.ink}`, borderRadius: "50%",
                display: "flex", alignItems: "center", justifyContent: "center",
                background: isOpen ? B.ink : "transparent", color: isOpen ? B.white : B.ink,
                transition: "background 0.3s ease, color 0.3s ease, transform 0.3s ease",
                transform: isOpen ? "rotate(180deg)" : "rotate(0)",
              }}>
                <BIcon name={isOpen ? "minus" : "plus"} size={compact ? 14 : 18} />
              </div>
            </button>
            <div style={{
              maxHeight: isOpen ? 1200 : 0, overflow: "hidden",
              transition: "max-height 0.5s cubic-bezier(0.2,0.8,0.2,1)",
            }}>
              <div style={{ paddingBottom: compact ? 24 : 40, paddingLeft: compact ? 40 : 104, paddingRight: compact ? 0 : 40 }}>
                <div style={{
                  display: "grid",
                  gridTemplateColumns: compact ? "1fr" : "1fr 1fr",
                  gridAutoFlow: compact ? "row" : "column",
                  gridTemplateRows: compact ? "auto" : `repeat(${Math.ceil(items.length / 2)}, auto)`,
                  gap: compact ? 8 : 10,
                  marginBottom: 24
                }}>
                  {items.map((it, idx) => (
                    <div key={it} style={{
                      display: "flex", alignItems: "center", gap: 10,
                      fontSize: compact ? 14 : 16, color: B.ink2,
                      opacity: isOpen ? 1 : 0,
                      transform: isOpen ? "translateX(0)" : "translateX(-8px)",
                      transition: `opacity 0.4s ease ${idx * 30}ms, transform 0.4s ease ${idx * 30}ms`,
                    }}>
                      <span style={{ width: 6, height: 6, background: B.red, borderRadius: "50%", flexShrink: 0 }} />
                      {it}
                    </div>
                  ))}
                </div>
                <button onClick={() => {
                  const msg = encodeURIComponent(`Hola, me gustaría agendar una cita de ${s.phone.label}.`);
                  window.open(`https://wa.me/${s.phone.raw}?text=${msg}`, "_blank");
                }}
                  onMouseEnter={(e) => { e.currentTarget.style.background = B.red; }}
                  onMouseLeave={(e) => { e.currentTarget.style.background = B.ink; }}
                  style={{
                    display: "inline-flex", alignItems: "center", gap: 10,
                    padding: compact ? "10px 16px" : "14px 22px",
                    background: B.ink, color: B.white, border: "none",
                    fontSize: compact ? 13 : 14, fontWeight: 600, cursor: "pointer", letterSpacing: 0.3,
                    transition: "background 0.25s ease",
                }}>
                  <BIcon name="whatsapp" size={15} color={B.white} />
                  Contáctanos al {s.phone.number}
                  <BIcon name="arrowUpRight" size={13} color={B.white} />
                </button>
              </div>
            </div>
          </div>
        );
      })}
    </div>
  );
};

// ---- FAQ --------------------------------------------------------------------
const BFaq = ({ compact = false }) => {
  const [open, setOpen] = React.useState(0);
  return (
    <div style={{ borderTop: `1px solid ${B.ink}` }}>
      {FAQ.map((f, i) => {
        const isOpen = open === i;
        return (
          <div key={i} style={{ borderBottom: `1px solid ${B.ink}` }}>
            <button onClick={() => setOpen(isOpen ? -1 : i)} style={{
              width: "100%", padding: compact ? "18px 0" : "24px 0",
              background: "transparent", border: "none", cursor: "pointer",
              display: "flex", alignItems: "center", gap: 16, textAlign: "left",
            }}>
              <div style={{ fontSize: 12, color: B.ink3, fontFamily: "ui-monospace, monospace", minWidth: 28 }}>
                0{i + 1}
              </div>
              <div style={{ flex: 1, ...BSerif, fontSize: compact ? 20 : 26, color: isOpen ? B.red : B.ink, letterSpacing: -0.4, lineHeight: 1.1, transition: "color 0.3s ease" }}>
                {f.q}
              </div>
              <div style={{
                transform: isOpen ? "rotate(45deg)" : "rotate(0)",
                transition: "transform 0.3s ease",
                color: B.ink,
              }}>
                <BIcon name="plus" size={compact ? 16 : 20} />
              </div>
            </button>
            <div style={{ maxHeight: isOpen ? 300 : 0, overflow: "hidden", transition: "max-height 0.4s ease" }}>
              <p style={{
                fontSize: compact ? 14 : 16, color: B.ink2, lineHeight: 1.6,
                margin: 0, paddingLeft: 44, paddingRight: 16, paddingBottom: compact ? 20 : 28,
              }}>{f.a}</p>
            </div>
          </div>
        );
      })}
    </div>
  );
};

// ---- Contact form -----------------------------------------------------------
const BContactForm = () => {
  const [form, setForm] = React.useState({ name: "", phone: "", service: "medicina", message: "" });
  const [errors, setErrors] = React.useState({});
  const [sent, setSent] = React.useState(false);
  const [focus, setFocus] = React.useState(null);

  const validate = () => {
    const e = {};
    if (!form.name.trim() || form.name.trim().length < 2) e.name = "Ingrese su nombre";
    if (!/^[0-9\-\s]{7,}$/.test(form.phone)) e.phone = "Teléfono inválido";
    if (!form.message.trim() || form.message.trim().length < 5) e.message = "Mensaje muy corto";
    setErrors(e);
    return Object.keys(e).length === 0;
  };

  const onSubmit = (e) => {
    e.preventDefault();
    if (!validate()) return;
    const svc = form.service === "medicina" ? CLINIC.whatsapp.medicina : form.service === "lab" ? CLINIC.whatsapp.lab : CLINIC.whatsapp.odonto;
    const msg = encodeURIComponent(`Hola, soy ${form.name} (tel. ${form.phone}). Servicio: ${svc.label}.\n\n${form.message}`);
    window.open(`https://wa.me/${svc.raw}?text=${msg}`, "_blank");
    setSent(true);
  };

  const input = (key, ok) => ({
    width: "100%", padding: "14px 0 10px", background: "transparent",
    border: "none", borderBottom: `1px solid ${ok === false ? B.red : (focus === key ? B.red : B.ink)}`,
    fontSize: 16, fontFamily: "'Inter', sans-serif",
    outline: "none", color: B.ink,
    boxSizing: "border-box",
    transition: "border-color 0.3s ease",
  });

  const label = { fontSize: 11, fontWeight: 700, color: B.ink3, textTransform: "uppercase", letterSpacing: 1.8, display: "block" };

  if (sent) {
    return (
      <div style={{ padding: 32, background: B.navy, color: B.white, animation: "bfadein 0.5s ease-out" }}>
        <BIcon name="check" size={36} color={B.white} stroke={2.4} />
        <div style={{ ...BSerif, fontSize: 32, marginTop: 16, lineHeight: 1.1 }}>Mensaje enviado.</div>
        <div style={{ fontSize: 14, marginTop: 10, opacity: 0.8 }}>Se abrió WhatsApp en una nueva ventana. Le responderemos a la brevedad.</div>
      </div>
    );
  }

  return (
    <form onSubmit={onSubmit} style={{ display: "grid", gap: 22 }}>
      <div>
        <label style={label}>Nombre</label>
        <input style={input("name", !errors.name)} onFocus={() => setFocus("name")} onBlur={() => setFocus(null)} value={form.name} onChange={(e) => setForm({ ...form, name: e.target.value })} placeholder="Juan Pérez" />
        {errors.name && <div style={{ fontSize: 11, color: B.red, marginTop: 4 }}>{errors.name}</div>}
      </div>
      <div>
        <label style={label}>Teléfono</label>
        <input style={input("phone", !errors.phone)} onFocus={() => setFocus("phone")} onBlur={() => setFocus(null)} value={form.phone} onChange={(e) => setForm({ ...form, phone: e.target.value })} placeholder="6000-0000" />
        {errors.phone && <div style={{ fontSize: 11, color: B.red, marginTop: 4 }}>{errors.phone}</div>}
      </div>
      <div>
        <label style={label}>Servicio</label>
        <select style={input("service")} onFocus={() => setFocus("service")} onBlur={() => setFocus(null)} value={form.service} onChange={(e) => setForm({ ...form, service: e.target.value })}>
          <option value="medicina">Medicina General</option>
          <option value="lab">Laboratorio Clínico</option>
          <option value="odonto">Odontología</option>
        </select>
      </div>
      <div>
        <label style={label}>Mensaje</label>
        <textarea style={{ ...input("message", !errors.message), minHeight: 80, resize: "vertical", paddingTop: 14 }} onFocus={() => setFocus("message")} onBlur={() => setFocus(null)} value={form.message} onChange={(e) => setForm({ ...form, message: e.target.value })} placeholder="¿En qué podemos ayudarle?" />
        {errors.message && <div style={{ fontSize: 11, color: B.red, marginTop: 4 }}>{errors.message}</div>}
      </div>
      <button type="submit"
        onMouseEnter={(e) => { e.currentTarget.style.background = B.ink; e.currentTarget.style.paddingLeft = "30px"; }}
        onMouseLeave={(e) => { e.currentTarget.style.background = B.red; e.currentTarget.style.paddingLeft = "24px"; }}
        style={{
          padding: "18px 24px", background: B.red, color: B.white,
          border: "none", fontSize: 14, fontWeight: 700,
          cursor: "pointer", display: "flex", alignItems: "center", justifyContent: "space-between",
          letterSpacing: 1, textTransform: "uppercase",
          transition: "background 0.25s ease, padding-left 0.25s ease",
      }}>
        <span style={{ display: "inline-flex", alignItems: "center", gap: 10 }}>
          <BIcon name="whatsapp" size={16} color={B.white} />
          Enviar por WhatsApp
        </span>
        <BIcon name="arrowUpRight" size={16} color={B.white} />
      </button>
    </form>
  );
};

Object.assign(window, {
  BWhatsAppFab, BPhotoPh, BEyebrow, BServicesAccordion, BContactForm,
  BFeaturedCard, BGalleryTile, BFaq, Reveal, useReveal, Marquee,
});
