// Shared UI components for the hi-fi site.
const { useState, useEffect, useRef } = React;

// ─── IMAGE SLOT — shows a real photo when `src` is set, else a placeholder ──
function ImgSlot({ label, src, h, aspect, accent, span, position, style = {} }) {
  return (
    <div style={{
      position: 'relative',
      gridColumn: span ? `span ${span}` : undefined,
      aspectRatio: aspect,
      height: h,
      background: src ? C.bg : `
        repeating-linear-gradient(135deg,
          rgba(255,255,255,0.012) 0 2px,
          rgba(255,255,255,0.04) 2px 3px,
          transparent 3px 16px),
        linear-gradient(135deg, ${C.bgCard}, ${C.bg})
      `,
      border: `1px solid ${C.line}`,
      overflow: 'hidden',
      display: 'flex',
      alignItems: 'flex-end',
      ...style,
    }}>
      {src ? (
        <img src={src} alt={label || ""} loading="lazy"
          style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', objectPosition: position || 'center' }} />
      ) : (
        <React.Fragment>
          <div style={{ position: 'absolute', top: 14, left: 14, ...TY.micro, color: C.gray3 }}>
            ◇ IMG
          </div>
          <div style={{ padding: '14px 14px', ...TY.micro, color: accent ? C.white : C.gray3 }}>
            {label}
          </div>
        </React.Fragment>
      )}
    </div>
  );
}

// ─── NAV ─────────────────────────────────────────────────────
function Nav({ page, setPage, scrollTo }) {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const fn = () => setScrolled(window.scrollY > 40);
    window.addEventListener("scroll", fn);
    return () => window.removeEventListener("scroll", fn);
  }, []);
  const isStyle = page.type === "style";
  const style = isStyle ? STYLES_DATA[page.artistId]?.find(s => s.id === page.styleId) : null;
  const NAV_IDS = ["hero", "artistas", "processo", "depoimentos", "faq", "contato"];
  const active = useScrollSpy(NAV_IDS);

  return (
    <nav style={{
      position: "fixed", top: 0, left: 0, right: 0, zIndex: 300,
      background: scrolled || isStyle ? "rgba(0,0,0,0.97)" : "transparent",
      backdropFilter: scrolled || isStyle ? "blur(8px)" : "none",
      borderBottom: `1px solid ${scrolled || isStyle ? C.line : "transparent"}`,
      transition: "all 0.3s",
      padding: "0 3rem",
      display: "flex", alignItems: "center", justifyContent: "space-between",
      height: "56px",
    }}>
      <button onClick={() => { setPage({ type: "home" }); window.scrollTo(0, 0); }}
        style={{ display: "flex", alignItems: "center", gap: "0.7rem", background: "none", border: "none", cursor: "pointer", color: C.white, flexShrink: 0 }}>
        <LogoMark size={30} />
        <span style={{ ...TY.h3, letterSpacing: "0.15em", whiteSpace: "nowrap" }}>ESTÚDIO CASA</span>
      </button>
      {isStyle ? (
        <div className="casa-style-nav" style={{ display: "flex", alignItems: "center", gap: "1.5rem" }}>
          <span className="casa-navlinks" style={{ ...TY.micro, color: C.gray3 }}>{ARTISTS[page.artistId]?.name} · {style?.label}</span>
          <button onClick={() => { setPage({ type: "home" }); window.scrollTo(0, 0); }} className="casa-btn casa-btn-ghost"
            style={{ ...btnGhost, padding: "7px 16px", fontSize: "0.58rem" }}>← VOLTAR</button>
          <button onClick={() => document.getElementById("lead-form")?.scrollIntoView({ behavior: "smooth" })} className="casa-btn casa-btn-primary"
            style={{ ...btnPrimary, padding: "7px 16px", fontSize: "0.58rem" }}>SOLICITAR ORÇAMENTO</button>
        </div>
      ) : (
        <div style={{ display: "flex", gap: "1.6rem", alignItems: "center", flexShrink: 0 }}>
          <div className="casa-navlinks" style={{ display: "flex", gap: "1.6rem", alignItems: "center" }}>
            {[["artistas","ARTISTAS"],["processo","PROCESSO"],["depoimentos","DEPOIMENTOS"],["faq","FAQ"],["contato","CONTATO"]].map(([id, label]) => (
              <button key={id} onClick={() => scrollTo(id)} className="casa-nav-link"
                data-active={active === id ? "1" : "0"}
                style={{ background: "none", border: "none", cursor: "pointer", ...TY.nav, color: active === id ? C.white : C.gray3 }}>
                {label}
              </button>
            ))}
          </div>
          <button onClick={() => scrollTo("contato")} className="casa-btn casa-btn-primary" style={btnPrimary}>AGENDAR</button>
        </div>
      )}
    </nav>
  );
}

// ─── SECTION HEAD ────────────────────────────────────────────
function SectionHead({ label, title, kicker }) {
  return (
    <Reveal style={{ marginBottom: "3.5rem" }}>
      <div style={{ display: "flex", alignItems: "baseline", gap: "1.5rem", marginBottom: "0.7rem" }}>
        <p style={{ ...TY.label, color: C.gray3 }}>{label}</p>
        {kicker && <p style={{ ...TY.micro, color: C.gray4 }}>{kicker}</p>}
      </div>
      <h2 style={{ ...TY.h1, color: C.white, lineHeight: 1 }}>{title}</h2>
    </Reveal>
  );
}

// ─── LIGHTBOX ────────────────────────────────────────────────
function Lightbox({ items, index, onClose, onNav }) {
  useEffect(() => {
    const onKey = (e) => {
      if (e.key === "Escape") onClose();
      if (e.key === "ArrowRight") onNav(1);
      if (e.key === "ArrowLeft") onNav(-1);
    };
    window.addEventListener("keydown", onKey);
    const prevOverflow = document.body.style.overflow;
    document.body.style.overflow = "hidden";
    return () => {
      window.removeEventListener("keydown", onKey);
      document.body.style.overflow = prevOverflow;
    };
  }, [onClose, onNav]);

  if (index == null) return null;
  const item = items[index];
  const label = typeof item === "string" ? item : item.label;
  const src = typeof item === "string" ? null : item.src;

  const navBtn = (dir) => ({
    background: "rgba(0,0,0,0.4)", border: `1px solid ${C.gray3}`, color: C.white,
    width: 52, height: 52, borderRadius: "50%", cursor: "pointer",
    fontSize: "1.4rem", display: "flex", alignItems: "center", justifyContent: "center",
    flexShrink: 0, transition: "background 0.15s, border-color 0.15s",
  });

  return (
    <div onClick={onClose} style={{
      position: "fixed", inset: 0, zIndex: 500,
      background: "rgba(0,0,0,0.94)", backdropFilter: "blur(6px)",
      display: "flex", flexDirection: "column",
      animation: "heroFade 0.25s ease",
    }}>
      {/* Top bar */}
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", padding: "1.2rem 1.6rem", flexShrink: 0 }}>
        <span style={{ ...TY.micro, color: C.gray2 }}>{label} · {index + 1} / {items.length}</span>
        <button onClick={onClose} aria-label="Fechar" style={{
          background: "none", border: "none", color: C.white, cursor: "pointer",
          fontSize: "1.8rem", lineHeight: 1, padding: "0 0.4rem",
        }}>×</button>
      </div>
      {/* Stage */}
      <div onClick={(e) => e.stopPropagation()} style={{
        flex: 1, display: "flex", alignItems: "center", justifyContent: "center",
        gap: "1.5rem", padding: "0 1.6rem 2rem", minHeight: 0,
      }}>
        <button onClick={() => onNav(-1)} aria-label="Anterior" style={navBtn("prev")}>←</button>
        <div style={{ flex: 1, height: "100%", display: "flex", alignItems: "center", justifyContent: "center", minWidth: 0 }}>
          {src ? (
            <img src={src} alt={label} style={{ maxWidth: "100%", maxHeight: "100%", objectFit: "contain", border: `1px solid ${C.line}` }} />
          ) : (
            <div style={{
              width: "min(70vh, 90%)", aspectRatio: "1/1", maxHeight: "100%",
              border: `1px dashed ${C.gray3}`, display: "flex", alignItems: "center", justifyContent: "center",
              background: C.bgCard,
            }}>
              <span style={{ ...TY.label, color: C.gray2, textAlign: "center", padding: "2rem" }}>{label}<br/><br/>FOTO EM BREVE</span>
            </div>
          )}
        </div>
        <button onClick={() => onNav(1)} aria-label="Próximo" style={navBtn("next")}>→</button>
      </div>
    </div>
  );
}

// ─── GALLERY ─────────────────────────────────────────────────
function Gallery({ labels, filter }) {
  const [hov, setHov] = useState(null);
  const [lbIndex, setLbIndex] = useState(null);
  const nav = (dir) => setLbIndex((i) => (i + dir + labels.length) % labels.length);
  return (
    <React.Fragment>
      <div className="casa-gallery-grid" style={{ display: "grid", gridTemplateColumns: "repeat(4,1fr)", gap: "2px" }}>
        {labels.map((item, i) => {
          const wide = i === 0 || i === 5;
          const label = typeof item === "string" ? item : item.label;
          const src = typeof item === "string" ? null : item.src;
          const pos = typeof item === "string" ? undefined : item.position;
          return (
            <Reveal key={i} delay={i * 70} y={20}
              onMouseEnter={() => setHov(i)} onMouseLeave={() => setHov(null)}
              onClick={() => setLbIndex(i)}
              style={{
                gridColumn: wide ? "span 2" : "span 1",
                aspectRatio: wide ? "2/1" : "1/1",
                position: "relative", cursor: "pointer",
                filter: hov === i ? "brightness(1.15)" : "brightness(1)",
              }}>
              <ImgSlot label={label} src={src} position={pos} style={{ width: '100%', height: '100%' }} />
              {hov === i && (
                <div style={{
                  position: "absolute", inset: 0,
                  display: "flex", alignItems: "center", justifyContent: "center",
                  background: "rgba(0,0,0,0.25)",
                }}>
                  <span style={{ ...TY.micro, color: C.white, border: `1px solid ${C.white}`, padding: "6px 14px" }}>VER</span>
                </div>
              )}
            </Reveal>
          );
        })}
      </div>
      {lbIndex != null && (
        <Lightbox items={labels} index={lbIndex} onClose={() => setLbIndex(null)} onNav={nav} />
      )}
    </React.Fragment>
  );
}

// ─── LEAD FORM (long) ────────────────────────────────────────
function LeadForm({ prefillArtist = "", prefillStyle = "" }) {
  const [form, setForm] = useState({
    nome: "", whatsapp: "", artista: prefillArtist, estilo: prefillStyle,
    local: "", descricao: "", referencia: "", origem: "",
  });
  const [errors, setErrors] = useState({});
  const [sent, setSent] = useState(false);
  const [sending, setSending] = useState(false);
  const [waUrl, setWaUrl] = useState("");
  const set = (k, v) => setForm(p => ({ ...p, [k]: v }));

  // Resolve which artist receives the lead: explicit choice wins; otherwise
  // infer from the selected style only when it belongs to a single artist;
  // otherwise default to Fabioness.
  const resolveArtist = () => {
    if (form.artista === "fabioness" || form.artista === "nanda") return form.artista;
    if (form.estilo) {
      const owners = Object.keys(STYLES_DATA).filter(
        aid => STYLES_DATA[aid].some(s => s.id === form.estilo)
      );
      if (owners.length === 1) return owners[0];
    }
    return "fabioness";
  };

  const styleLabel = (id) => {
    for (const aid of Object.keys(STYLES_DATA)) {
      const s = STYLES_DATA[aid].find(x => x.id === id);
      if (s) return s.label;
    }
    return "";
  };

  const REF_LABELS = {
    sim: "Sim, tenho referências prontas",
    parcial: "Tenho referências parciais",
    nao: "Não, preciso de ajuda",
  };
  const ORIGEM_LABELS = {
    instagram: "Instagram", google: "Google", indicacao: "Indicação",
    tiktok: "TikTok", youtube: "YouTube",
  };

  const buildWaUrl = (artistId) => {
    const a = ARTISTS[artistId];
    const L = [];
    L.push("Olá! Vim pelo site do Estúdio Casa e gostaria de solicitar um orçamento.");
    L.push("");
    L.push(`*Nome:* ${form.nome}`);
    L.push(`*WhatsApp:* ${form.whatsapp}`);
    L.push(`*Artista:* ${a.name}`);
    if (form.estilo) L.push(`*Estilo:* ${styleLabel(form.estilo)}`);
    if (form.local) L.push(`*Local no corpo:* ${form.local}`);
    if (form.referencia) L.push(`*Tem referência:* ${REF_LABELS[form.referencia] || form.referencia}`);
    if (form.origem) L.push(`*Como encontrou:* ${ORIGEM_LABELS[form.origem] || form.origem}`);
    L.push("");
    L.push("*Projeto:*");
    L.push(form.descricao);
    return `https://wa.me/${a.whatsapp}?text=${encodeURIComponent(L.join("\n"))}`;
  };

  const submit = () => {
    const e = {};
    if (!form.nome.trim()) e.nome = "Obrigatório";
    if (!form.whatsapp.trim() || form.whatsapp.replace(/\D/g, "").length < 10) e.whatsapp = "WhatsApp inválido";
    if (!form.descricao.trim()) e.descricao = "Obrigatório";
    if (Object.keys(e).length) { setErrors(e); return; }
    setErrors({});
    const url = buildWaUrl(resolveArtist());
    setWaUrl(url);
    setSending(true);
    // Try to open directly off the click (kept inside the user-gesture so the
    // browser allows the popup). In sandboxed previews this may be blocked
    // (ERR_BLOCKED_BY_RESPONSE) — the confirmation screen always shows a real
    // anchor the user can tap, which works on the live site.
    try { window.open(url, "_blank", "noopener"); } catch (_) {}
    setTimeout(() => { setSending(false); setSent(true); }, 700);
  };

  const inp = (err) => ({
    width: "100%", background: C.bg,
    border: `1px solid ${err ? "#c0392b" : C.line}`,
    color: C.white, padding: "12px 16px",
    ...TY.body, outline: "none", marginTop: "0.5rem", fontFamily: F,
  });
  const lbl = { ...TY.label, color: C.gray3, display: "block", marginTop: "1.5rem" };
  const err = { ...TY.micro, color: "#c0392b", marginTop: "0.3rem", display: "block" };

  if (sent) return (
    <div id="lead-form" style={{ background: C.bgCard, border: `1px solid ${C.line}`, padding: "4rem", textAlign: "center" }}>
      <p style={{ ...TY.h1, color: C.white, marginBottom: "1rem" }}>QUASE LÁ</p>
      <p style={{ ...TY.spec, color: C.gray2, lineHeight: 1.7, marginBottom: "2.5rem" }}>
        Seu projeto está pronto. Toque no botão abaixo para abrir a conversa<br />no WhatsApp com tudo já preenchido — é só apertar enviar.
      </p>
      <a href={waUrl} target="_blank" rel="noopener noreferrer"
        style={{ ...btnPrimary, display: "inline-block", textDecoration: "none", padding: "16px 40px", fontSize: "0.7rem" }}>
        ABRIR WHATSAPP →
      </a>
      <p style={{ ...TY.micro, color: C.gray4, marginTop: "2rem" }}>RESPONDEMOS EM ATÉ 24H</p>
    </div>
  );

  return (
    <div id="lead-form" style={{ background: C.bgCard, border: `1px solid ${C.line}`, padding: "3rem" }}>
      <p style={{ ...TY.label, color: C.gray3 }}>FORMULÁRIO DE ORÇAMENTO</p>
      <p style={{ ...TY.h2, color: C.white, marginTop: "0.5rem", marginBottom: "2.5rem" }}>Solicitar Orçamento</p>
      <div className="casa-form-grid" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "0 2.5rem" }}>
        <div>
          <label style={lbl}>NOME COMPLETO *</label>
          <input value={form.nome} onChange={e => set("nome", e.target.value)} style={inp(errors.nome)} placeholder="Seu nome" />
          {errors.nome && <span style={err}>{errors.nome}</span>}
        </div>
        <div>
          <label style={lbl}>WHATSAPP (COM DDD) *</label>
          <input value={form.whatsapp} onChange={e => set("whatsapp", e.target.value)} style={inp(errors.whatsapp)} placeholder="(11) 9 0000-0000" />
          {errors.whatsapp && <span style={err}>{errors.whatsapp}</span>}
        </div>
        <div>
          <label style={lbl}>ARTISTA PREFERIDO</label>
          <select value={form.artista} onChange={e => set("artista", e.target.value)} style={{ ...inp(false), appearance: "none" }}>
            <option value="">Sem preferência</option>
            <option value="fabioness">Fabioness</option>
            <option value="nanda">Nanda Costa</option>
          </select>
        </div>
        <div>
          <label style={lbl}>ESTILO DE INTERESSE</label>
          <select value={form.estilo} onChange={e => set("estilo", e.target.value)} style={{ ...inp(false), appearance: "none" }}>
            <option value="">Selecione um estilo</option>
            <optgroup label="FABIONESS">{STYLES_DATA.fabioness.map(s => <option key={s.id} value={s.id}>{s.label}</option>)}</optgroup>
            <optgroup label="NANDA COSTA">{STYLES_DATA.nanda.map(s => <option key={s.id} value={s.id}>{s.label}</option>)}</optgroup>
          </select>
        </div>
        <div>
          <label style={lbl}>LOCAL NO CORPO</label>
          <input value={form.local} onChange={e => set("local", e.target.value)} style={inp(false)} placeholder="Ex: antebraço esquerdo" />
        </div>
        <div>
          <label style={lbl}>TEM REFERÊNCIA VISUAL?</label>
          <select value={form.referencia} onChange={e => set("referencia", e.target.value)} style={{ ...inp(false), appearance: "none" }}>
            <option value="">Selecione</option>
            <option value="sim">Sim, tenho referências prontas</option>
            <option value="parcial">Tenho referências parciais</option>
            <option value="nao">Não, preciso de ajuda</option>
          </select>
        </div>
        <div>
          <label style={lbl}>COMO NOS ENCONTROU?</label>
          <select value={form.origem} onChange={e => set("origem", e.target.value)} style={{ ...inp(false), appearance: "none" }}>
            <option value="">Selecione</option>
            <option value="instagram">Instagram</option>
            <option value="google">Google</option>
            <option value="indicacao">Indicação</option>
            <option value="tiktok">TikTok</option>
            <option value="youtube">YouTube</option>
          </select>
        </div>
        <div style={{ gridColumn: "1 / -1" }}>
          <label style={lbl}>DESCREVA SEU PROJETO *</label>
          <textarea value={form.descricao} onChange={e => set("descricao", e.target.value)} rows={4}
            style={{ ...inp(errors.descricao), resize: "vertical" }}
            placeholder="Descreva o que você quer tatuar, tamanho aproximado, se há tatuagem existente para cobertura, contexto e significado..." />
          {errors.descricao && <span style={err}>{errors.descricao}</span>}
        </div>
      </div>
      <div style={{ marginTop: "2rem", display: "flex", alignItems: "center", gap: "2rem", flexWrap: "wrap" }}>
        <button onClick={submit} disabled={sending} className="casa-btn casa-btn-primary" style={{ ...btnPrimary, padding: "14px 36px", opacity: sending ? 0.6 : 1 }}>
          {sending ? "ABRINDO WHATSAPP..." : <>ENVIAR PELO WHATSAPP <span className="casa-arrow">→</span></>}
        </button>
        <p style={{ ...TY.micro, color: C.gray4 }}>ABRE O WHATSAPP DO ARTISTA COM SEU PROJETO JÁ PREENCHIDO</p>
      </div>
    </div>
  );
}

// ─── STICKY WHATSAPP PILL ───────────────────────────────────
function WAFloating() {
  const [open, setOpen] = useState(false);
  const [visible, setVisible] = useState(false);
  useEffect(() => {
    const fn = () => setVisible(window.scrollY > 400);
    fn();
    window.addEventListener("scroll", fn);
    return () => window.removeEventListener("scroll", fn);
  }, []);
  if (!visible) return null;
  return (
    <div style={{ position: "fixed", right: "1.5rem", bottom: "1.5rem", zIndex: 250 }}>
      {open && (
        <div style={{
          position: "absolute", bottom: "calc(100% + 12px)", right: 0,
          background: C.bgCard, border: `1px solid ${C.line}`,
          width: 280, padding: "1.2rem",
          boxShadow: "0 20px 60px rgba(0,0,0,0.6)",
        }}>
          <p style={{ ...TY.label, color: C.gray3, marginBottom: "1rem" }}>FALAR COM</p>
          {Object.entries(ARTISTS).map(([id, a]) => (
            <a key={id} href={`https://wa.me/${a.whatsapp}`} target="_blank" rel="noreferrer"
              style={{
                display: "block", textDecoration: "none",
                padding: "0.9rem 0", borderTop: `1px solid ${C.line}`,
                color: C.white,
              }}>
              <div style={{ ...TY.h3, fontSize: "0.78rem" }}>{a.name}</div>
              <div style={{ ...TY.micro, color: C.gray3, marginTop: "0.3rem" }}>
                {a.spec.split(" · ").slice(0, 3).join(" · ")}
              </div>
            </a>
          ))}
          <button onClick={() => setOpen(false)} style={{
            marginTop: "1rem", width: "100%",
            ...btnGhost, padding: "8px", fontSize: "0.58rem",
          }}>FECHAR</button>
        </div>
      )}
      <button onClick={() => setOpen(o => !o)} aria-label="WhatsApp"
        style={{
          width: 56, height: 56,
          borderRadius: "50%",
          background: C.white, color: C.bg,
          border: "none", cursor: "pointer",
          display: "flex", alignItems: "center", justifyContent: "center",
          boxShadow: "0 8px 24px rgba(0,0,0,0.4)",
          transition: "transform 0.2s",
          transform: open ? "rotate(45deg)" : "rotate(0)",
        }}>
        {open ? (
          <span style={{ fontSize: "1.6rem", lineHeight: 1, fontWeight: 300 }}>+</span>
        ) : (
          <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
            <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-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413"/>
          </svg>
        )}
      </button>
    </div>
  );
}

// ─── FOOTER ─────────────────────────────────────────────────
function Footer() {
  return (
    <footer style={{ background: C.bg, padding: "2.5rem 3rem", borderTop: `1px solid ${C.line}` }}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", gap: "1rem" }}>
        <span style={{ display: "flex", alignItems: "center", gap: "0.7rem", color: C.white }}>
          <LogoMark size={28} />
          <span style={{ ...TY.h3, letterSpacing: "0.2em" }}>ESTÚDIO CASA</span>
        </span>
        <div style={{ display: "flex", gap: "2rem" }}>
          {[["INSTAGRAM","https://instagram.com/studiocasatattoo"],["YOUTUBE","https://youtube.com"],["TIKTOK","https://tiktok.com"],["FACEBOOK","https://facebook.com"]].map(([label, url]) => (
            <a key={label} href={url} target="_blank" rel="noreferrer"
              style={{ ...TY.micro, color: C.gray4, textDecoration: "none" }}>{label}</a>
          ))}
        </div>
        <span style={{ ...TY.micro, color: C.gray4 }}>© 2026 ESTÚDIO CASA · POLÍTICA DE PRIVACIDADE</span>
      </div>
    </footer>
  );
}

Object.assign(window, { ImgSlot, Nav, SectionHead, Gallery, LeadForm, WAFloating, Footer });