/* Guardian Site — shared helpers (placeholders, layout) → window */

const SG = window.SafeGuardianDesignSystem_64054d;

const Container = ({ children, style }) => (
  <div style={{ maxWidth: "var(--container-max)", margin: "0 auto", padding: "0 var(--container-pad)", ...style }}>
    {children}
  </div>
);

const Section = ({ children, id, bg = "dark", style }) => {
  const bgs = {
    dark:   { background: "transparent" },
    deep:   { background: "var(--sg-grad-deep)" },
    light:  { background: "var(--bg-light)" },
    surface:{ background: "var(--bg-surface)" },
  };
  return (
    <section id={id} style={{ padding: "var(--section-y) 0", position: "relative", ...bgs[bg], ...style }}>
      {children}
    </section>
  );
};

/* Image placeholder — marks where real client photos go (per Caveats). */
const Photo = ({ label = "Foto real do cliente", icon = "image", height = 240, style }) => (
  <div style={{
    height, borderRadius: "var(--r-lg)",
    background: "repeating-linear-gradient(135deg, rgba(31,168,224,0.05) 0 12px, rgba(31,168,224,0.02) 12px 24px), var(--bg-surface-2)",
    border: "1px dashed var(--border-line)",
    display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center",
    gap: 10, color: "var(--text-muted)", textAlign: "center", padding: 16, ...style,
  }}>
    <i data-lucide={icon} style={{ width: 30, height: 30, color: "var(--text-muted)", opacity: 0.7 }}></i>
    <span style={{ fontFamily: "var(--font-mono)", fontSize: 12, letterSpacing: ".03em" }}>{label}</span>
  </div>
);

/* Logo lockup */
const Logo = ({ size = 38 }) => (
  <a href="#top" style={{ display: "inline-flex", alignItems: "center", gap: 11, textDecoration: "none" }}>
    <img src="../../assets/logo-shield.png" alt="SafeGuardian" style={{ height: size, width: "auto", filter: "drop-shadow(0 4px 10px rgba(0,0,0,.4))" }} />
    <span style={{ lineHeight: 1 }}>
      <span style={{ display: "block", fontSize: size * 0.5, fontWeight: 800, letterSpacing: "-0.02em", color: "var(--text-strong)" }}>
        Safe<span style={{ color: "var(--accent)" }}>Guardian</span>
      </span>
    </span>
  </a>
);

/* Reveal — scroll-triggered fade+rise. `stagger` cascades direct children. */
const Reveal = ({ children, stagger = false, delay = 0, step = 90, as = "div", style, ...rest }) => {
  const ref = React.useRef(null);
  React.useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const items = stagger ? Array.from(el.children) : [el];
    items.forEach((it, i) => { it.style.transitionDelay = (delay + i * step) + "ms"; });
    if (typeof IntersectionObserver === "undefined") { el.setAttribute("data-in", ""); return; }
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => { if (e.isIntersecting) { el.setAttribute("data-in", ""); io.disconnect(); } });
    }, { threshold: 0.12, rootMargin: "0px 0px -7% 0px" });
    io.observe(el);
    return () => io.disconnect();
  }, []);
  const Tag = as;
  return (
    <Tag ref={ref} data-reveal={stagger ? "stagger" : "1"} style={style} {...rest}>
      {children}
    </Tag>
  );
};

Object.assign(window, { Container, Section, Photo, Logo, Reveal, SG });