// ── Porto Futuro · shared primitives ───────────────────────────
// Eyebrow, Button, Badge, SectionTag, Reveal-on-scroll wrapper.

const pfBtnBase = {
  fontFamily: "var(--f-body)", fontWeight: 600, border: "none",
  borderRadius: "99px", cursor: "pointer", display: "inline-flex",
  alignItems: "center", gap: "10px", lineHeight: 1, textDecoration: "none",
  letterSpacing: "-0.005em", whiteSpace: "nowrap",
  transition: "transform .4s var(--ease-out), box-shadow .4s var(--ease-out), border-color .4s var(--ease-out)",
};

function Button({ variant = "primary", size = "md", children, onClick, shimmer, style }) {
  const [hover, setHover] = React.useState(false);
  const pad = size === "lg" ? "18px 38px" : size === "sm" ? "11px 22px" : "15px 30px";
  const fs = size === "lg" ? "1.18rem" : size === "sm" ? ".9rem" : "1.05rem";
  const variants = {
    primary: {
      background: "linear-gradient(135deg,#FCD34D,#F59E0B 55%,#B45309)", color: "#1A1206",
      boxShadow: hover ? "0 20px 48px rgba(245,158,11,0.5)" : "0 14px 36px rgba(245,158,11,0.32)",
      transform: hover ? "translateY(-3px)" : "none",
    },
    secondary: {
      background: "transparent", color: "var(--go-4)",
      border: `1px solid ${hover ? "var(--go-4)" : "var(--bronze)"}`,
      boxShadow: hover ? "0 12px 30px rgba(245,158,11,0.18)" : "none",
      transform: hover ? "translateY(-2px)" : "none",
    },
    ghost: {
      background: "transparent", color: "var(--txt-soft)",
      border: `1px solid ${hover ? "var(--cy)" : "var(--border-2)"}`,
    },
  };
  return (
    <button onClick={onClick} onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      style={{ ...pfBtnBase, padding: pad, fontSize: fs, position: "relative", overflow: "hidden", ...variants[variant], ...style }}>
      <span style={{ position: "relative", zIndex: 1, display: "inline-flex", alignItems: "center", gap: "10px" }}>{children}</span>
      {shimmer && <span style={{ position: "absolute", inset: 0, background: "linear-gradient(110deg,transparent 35%,rgba(255,255,255,.45) 50%,transparent 65%)", transform: "translateX(-100%)", animation: "pfShimmer 2.6s infinite" }} />}
    </button>
  );
}

function Eyebrow({ children, color = "var(--cy)", line = true }) {
  return (
    <div style={{ fontFamily: "var(--f-mono)", fontSize: ".78rem", letterSpacing: ".14em", textTransform: "uppercase", color, display: "flex", alignItems: "center", gap: "12px", marginBottom: "20px" }}>
      {line && <span style={{ width: "40px", height: "1px", background: color }} />}
      {children}
    </div>
  );
}

// Editorial section tag — thin vertical bronze hairline + uppercase
// tracked sans label in champagne. Replaces the old cyan/mono dev-tag
// look with something that reads as a high-ticket event marker.
// `n` is rendered as a small, fine-tracked numeral in dim cream beside
// the label so the section's place in the journey stays legible.
function SectionTag({ n, children, color = "var(--champagne)" }) {
  return (
    <div style={{ display: "inline-flex", alignItems: "stretch", gap: "16px", marginBottom: "18px" }}>
      <span style={{ width: "1px", background: "linear-gradient(180deg, transparent 0%, var(--bronze) 30%, var(--go-4) 70%, transparent 100%)", flexShrink: 0 }} />
      <div style={{ display: "flex", flexDirection: "column", gap: "4px", padding: "2px 0" }}>
        {n && <span style={{ fontFamily: "var(--f-body)", fontWeight: 500, fontSize: ".64rem", letterSpacing: ".32em", textTransform: "uppercase", color: "var(--bronze)" }}>{`Cap. ${n}`}</span>}
        <span style={{ fontFamily: "var(--f-body)", fontWeight: 600, fontSize: ".72rem", letterSpacing: ".28em", textTransform: "uppercase", color }}>{children}</span>
      </div>
    </div>
  );
}

function Badge({ variant = "urgency", children }) {
  const map = {
    urgency: { bg: "rgba(239,68,68,0.14)", fg: "#F87171", bd: "rgba(239,68,68,0.3)", dot: "#EF4444" },
    gold: { bg: "rgba(245,158,11,0.16)", fg: "#FCD34D", bd: "rgba(245,158,11,0.35)" },
    cyan: { bg: "var(--cy-glow)", fg: "#67E8F9", bd: "transparent" },
  };
  const s = map[variant];
  return (
    <span style={{ display: "inline-flex", alignItems: "center", gap: "9px", fontFamily: "var(--f-mono)", fontSize: ".72rem", letterSpacing: ".12em", textTransform: "uppercase", padding: "8px 16px", borderRadius: "99px", background: s.bg, color: s.fg, border: `1px solid ${s.bd}` }}>
      {s.dot && <span style={{ width: "8px", height: "8px", borderRadius: "50%", background: s.dot, animation: "pfPulse 1.4s ease-in-out infinite" }} />}
      {children}
    </span>
  );
}

// Fade-up on mount via pure CSS animation (no IntersectionObserver —
// reliable in every embed). Always ends fully visible.
function Reveal({ children, delay = 0, style }) {
  return (
    <div className="pf-reveal" style={{ animationDelay: `${delay}s`, ...style }}>
      {children}
    </div>
  );
}

function Wrap({ children, style }) {
  return <div className="pf-wrap" style={{ maxWidth: "1040px", margin: "0 auto", padding: "0 32px", ...style }}>{children}</div>;
}

Object.assign(window, { Button, Eyebrow, SectionTag, Badge, Reveal, Wrap });