// Shared helpers for the Secretária Extraordinária landing.
const SEDS = window.SecretRiaExtraordinRiaDesignSystem_852e48;

// Lucide icon → inline SVG (works across React re-renders).
function Icon({ name, size = 24, stroke = 1.75, color = "currentColor", style }) {
  let inner = "";
  try {
    const node = (window.lucide && (window.lucide.icons || window.lucide));
    let data = node && node[name];
    if (data && data.length && Array.isArray(data[2])) data = data[2]; // [tag,attrs,children] form
    if (Array.isArray(data)) {
      inner = data.map(([tag, attrs]) =>
        `<${tag} ${Object.entries(attrs || {}).map(([k, v]) => `${k}="${v}"`).join(" ")}></${tag}>`
      ).join("");
    }
  } catch (e) { inner = ""; }
  return <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth={stroke} strokeLinecap="round" strokeLinejoin="round" style={style} dangerouslySetInnerHTML={{ __html: inner }} />;
}

// Section shell with vertical rhythm + max-width container.
function Section({ id, tone = "cream", pad = "lg", children, style }) {
  const bg = tone === "cream" ? "var(--surface-page)"
    : tone === "white" ? "var(--surface-card)"
    : tone === "deep" ? "var(--gradient-brand)"
    : tone === "deepest" ? "var(--purple-950)"
    : tone;
  const py = pad === "sm" ? "clamp(48px,7vw,72px)" : pad === "xl" ? "clamp(88px,12vw,148px)" : "clamp(72px,10vw,120px)";
  return (
    <section id={id} style={{ background: bg, padding: `${py} clamp(20px,5vw,56px)`, position: "relative", overflow: "hidden", ...style }}>
      <div style={{ maxWidth: 1160, margin: "0 auto", position: "relative", zIndex: 1 }}>{children}</div>
    </section>
  );
}

const Kicker = ({ children, tone }) => (
  <span style={{ display: "inline-block", textTransform: "uppercase", letterSpacing: ".26em", fontSize: 12.5, fontWeight: 700, color: tone === "invert" ? "var(--gold-300)" : "var(--gold-600)" }}>{children}</span>
);

const Serif = { fontFamily: "var(--font-display)", fontWeight: 700, lineHeight: 1.05, letterSpacing: "-.01em" };

// Site-wide CTA button — matches the floating bar: uppercase label + arrow-in-a-box.
function CTAButton({ children, onClick, variant = "gold", size = "md", fullWidth, disabled, arrow = true, style }) {
  const gold = variant === "gold";
  const pad = size === "lg" ? "17px 20px 17px 24px" : "14px 16px 14px 20px";
  const fs = size === "lg" ? "clamp(14px,1.35vw,16px)" : "clamp(12.5px,1.2vw,14.5px)";
  const bg = disabled ? "var(--surface-soft)" : gold ? "var(--gradient-gold)" : "var(--gradient-brand)";
  const color = disabled ? "var(--text-muted)" : gold ? "var(--purple-900)" : "#fff";
  const boxBg = disabled ? "rgba(48,0,72,.08)" : gold ? "rgba(255,255,255,.92)" : "var(--gradient-gold)";
  return (
    <button onClick={disabled ? undefined : onClick} disabled={disabled} aria-disabled={disabled ? "true" : undefined} className="cta-btn" style={{ "--cta-box": boxBg, display: "flex", alignItems: "center", justifyContent: "space-between", gap: 16, width: fullWidth ? "100%" : "auto", border: disabled ? "1px solid var(--border-strong)" : "none", cursor: disabled ? "not-allowed" : "pointer", background: bg, color, borderRadius: "var(--radius-lg)", padding: pad, fontFamily: "var(--font-sans)", fontWeight: 700, fontSize: fs, textTransform: "uppercase", letterSpacing: ".06em", lineHeight: 1.15, boxShadow: disabled ? "none" : gold ? "var(--shadow-gold)" : "var(--shadow-md)", opacity: disabled ? 1 : 1, ...style }}>
      <span style={{ textAlign: "left" }}>{children}</span>
      {arrow && <span className="cta-ico" style={{ flexShrink: 0, width: 34, height: 34, borderRadius: "var(--radius-sm)", display: "flex", alignItems: "center", justifyContent: "center" }}><Icon name={disabled ? "Lock" : "ArrowUpRight"} size={disabled ? 16 : 20} color={disabled ? "var(--text-muted)" : "var(--purple-900)"} stroke={2.4} /></span>}
    </button>
  );
}

Object.assign(window, { Icon, Section, Kicker, Serif, SEDS, CTAButton });