// brandkit-shared.jsx — Shared shell + section primitives for the brand book.
// Provides: useDirection, NavBar, Section, SectionHead, AssetTile, Swatch,
// LockupCard, Spec, ClearspaceDiagram. All sections use Clínico tokens as
// the mother-brand context.

function useDirection(id = "clinico") {
  return DIRECTIONS.find((d) => d.id === id);
}

// ── Top navigation: sticky frosted glass capsule with anchor links ────────
function NavBar({ dir, sections }) {
  return (
    <div style={{
      position: "sticky", top: 16, zIndex: 100, padding: "0 24px",
      pointerEvents: "none",
    }}>
      <div style={{
        margin: "0 auto", maxWidth: 920, pointerEvents: "auto",
        background: dir.glassBg, borderRadius: 999, padding: "8px 12px 8px 16px",
        border: `0.5px solid ${dir.glassBorder}`,
        WebkitBackdropFilter: "blur(28px) saturate(180%)",
        backdropFilter: "blur(28px) saturate(180%)",
        boxShadow: dir.shadowGlass,
        display: "flex", alignItems: "center", justifyContent: "space-between", gap: 14,
      }}>
        <a href="#cover" style={{ display: "flex", alignItems: "center", gap: 8, textDecoration: "none", color: dir.ink }}>
          <EixoSymbol variant="hpta" size={20} fg={dir.ink} thick />
          <span style={{ fontFamily: dir.display, fontWeight: 700, fontSize: 15, letterSpacing: "-0.01em" }}>
            EIXO<span style={{ color: dir.accent }}>.</span>
          </span>
          <span style={{
            fontFamily: dir.mono, fontSize: 10, color: dir.inkMuted, letterSpacing: "0.14em",
            textTransform: "uppercase", marginLeft: 6,
          }}>/ BRAND KIT v1.0</span>
        </a>
        <div style={{
          display: "flex", gap: 2, overflow: "hidden",
          fontSize: 11.5, fontFamily: dir.body, color: dir.inkSoft, fontWeight: 500,
        }}>
          {sections.map((s) => (
            <a key={s.id} href={`#${s.id}`} style={{
              padding: "6px 10px", borderRadius: 999, color: "inherit",
              textDecoration: "none", whiteSpace: "nowrap",
            }}>{s.nav}</a>
          ))}
        </div>
        <a href="#downloads" style={{
          display: "inline-flex", alignItems: "center", gap: 6,
          background: dir.accent, color: dir.accentOn, padding: "8px 14px",
          fontFamily: dir.display, fontWeight: 600, fontSize: 12, letterSpacing: "-0.005em",
          borderRadius: 999, textDecoration: "none",
          boxShadow: `inset 0 0.5px 0 rgba(255,255,255,0.35), 0 6px 18px -6px ${dir.accent}66`,
        }}>Baixar ↓</a>
      </div>
    </div>
  );
}

// ── A section wrapper: id, optional dark/full-bleed treatment, padding ────
function Section({ id, dir, dark, accentBg, children, style = {}, label = "data-screen-label" }) {
  const isDark = !!dark;
  const bg = accentBg
    ? `radial-gradient(120% 80% at 80% 0%, ${dir.accent}15, transparent 55%), ${dir.surface}`
    : isDark
      ? `radial-gradient(120% 70% at 50% 0%, ${dir.accent}1A, transparent 50%), #0B0C0F`
      : `${dir.bgGradient}, ${dir.bg}`;
  return (
    <section id={id} data-screen-label={id}
      style={{
        background: bg, color: isDark ? "#F2EFE6" : dir.ink,
        padding: "120px 32px 60px", position: "relative", scrollMarginTop: 80,
        ...style,
      }}>
      <div style={{ maxWidth: 1180, margin: "0 auto", position: "relative" }}>
        {children}
      </div>
    </section>
  );
}

// ── Section header: tiny mono eyebrow + giant title + subtitle ────────────
function SectionHead({ dir, num, eyebrow, title, kicker, dark }) {
  const sub = dark ? "rgba(242,239,230,0.65)" : dir.inkSoft;
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 14, marginBottom: 48 }}>
      <div style={{
        display: "flex", alignItems: "center", gap: 10,
        fontFamily: dir.mono, fontSize: 11, letterSpacing: "0.16em", textTransform: "uppercase",
        color: dir.accent,
      }}>
        <span style={{
          width: 7, height: 7, borderRadius: 999, background: dir.accent,
          boxShadow: `0 0 0 4px ${dir.accent}22`,
        }} />
        <span style={{ color: sub, fontWeight: 500 }}>§ {num}</span>
        <span>{eyebrow}</span>
      </div>
      <div style={{
        fontFamily: dir.display, fontSize: 68, fontWeight: 700,
        letterSpacing: "-0.04em", lineHeight: 0.96,
        color: dark ? "#F2EFE6" : dir.ink, textWrap: "balance",
        maxWidth: "90%",
      }}>{title}</div>
      {kicker && (
        <div style={{ fontSize: 17, lineHeight: 1.55, color: sub, maxWidth: 640 }}>
          {kicker}
        </div>
      )}
    </div>
  );
}

// ── Asset tile: glass card with optional caption ─────────────────────────
function AssetTile({ dir, children, caption, padding = 28, height, style = {}, dark }) {
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
      <GlassCard dir={dir} padding={padding} radius={dir.radiusLg}
                 dark={dark}
                 style={{ height, display: "flex", alignItems: "center", justifyContent: "center", ...style }}>
        {children}
      </GlassCard>
      {caption && (
        <div style={{
          fontFamily: dir.mono, fontSize: 10, letterSpacing: "0.14em",
          textTransform: "uppercase", color: dir.inkMuted,
        }}>{caption}</div>
      )}
    </div>
  );
}

// ── Color swatch ───────────────────────────────────────────────────────────
function Swatch({ dir, name, hex, role, big }) {
  const dark = isDarkHex(hex);
  return (
    <div style={{
      background: hex, color: dark ? "#fff" : "#0E0F12",
      padding: big ? "24px 22px" : "18px 16px",
      borderRadius: dir.radiusLg,
      border: dark ? "0.5px solid rgba(255,255,255,0.10)" : "0.5px solid rgba(0,0,0,0.08)",
      boxShadow: dir.shadowSoft,
      display: "flex", flexDirection: "column", justifyContent: "space-between",
      minHeight: big ? 200 : 140, position: "relative", overflow: "hidden",
    }}>
      <div style={{
        position: "absolute", inset: 0, pointerEvents: "none",
        background: dark
          ? "radial-gradient(120% 60% at 50% -10%, rgba(255,255,255,0.18), transparent 55%)"
          : "radial-gradient(120% 60% at 50% -10%, rgba(255,255,255,0.6), transparent 55%)",
      }} />
      <div style={{
        fontFamily: dir.display, fontSize: big ? 24 : 17, fontWeight: 700,
        letterSpacing: "-0.025em", position: "relative",
      }}>{name}</div>
      <div style={{ position: "relative" }}>
        <div style={{
          fontFamily: dir.mono, fontSize: 10, opacity: 0.75,
          letterSpacing: "0.08em", textTransform: "uppercase",
        }}>{role}</div>
        <div style={{
          fontFamily: dir.mono, fontSize: 12, marginTop: 4, fontWeight: 500,
        }}>{hex.toUpperCase()}</div>
      </div>
    </div>
  );
}

// ── Spec/data table row ────────────────────────────────────────────────────
function Spec({ dir, label, value, dark }) {
  return (
    <div style={{
      display: "flex", justifyContent: "space-between", alignItems: "baseline",
      gap: 16, padding: "12px 16px",
      borderTop: `0.5px solid ${dark ? "rgba(255,255,255,0.12)" : dir.hairline}`,
      fontSize: 13,
    }}>
      <span style={{
        fontFamily: dir.mono, fontSize: 10, letterSpacing: "0.14em",
        textTransform: "uppercase", color: dark ? "rgba(242,239,230,0.55)" : dir.inkMuted,
      }}>{label}</span>
      <span style={{
        fontFamily: dir.body, fontWeight: 500,
        color: dark ? "#F2EFE6" : dir.ink, textAlign: "right",
      }}>{value}</span>
    </div>
  );
}

// ── Clearspace diagram ────────────────────────────────────────────────────
function ClearspaceDiagram({ dir }) {
  return (
    <svg viewBox="0 0 220 140" style={{ width: "100%", maxWidth: 320 }}>
      {/* outer dashed rect = clearspace boundary */}
      <rect x="6" y="6" width="208" height="128" fill="none"
            stroke={dir.inkMuted} strokeWidth="0.6" strokeDasharray="4 4" opacity="0.55" />
      {/* inner solid rect = mark bounding box */}
      <rect x="56" y="40" width="108" height="60" fill="none"
            stroke={dir.accent} strokeWidth="0.8" opacity="0.7" />
      {/* mark */}
      <g transform="translate(76, 50)">
        <line x1="14" y1="2" x2="14" y2="42" stroke={dir.ink} strokeWidth="3" />
        <circle cx="14" cy="8" r="3.2" fill={dir.ink} />
        <circle cx="14" cy="22" r="5" fill={dir.ink} />
        <circle cx="14" cy="36" r="3.8" fill={dir.ink} />
        <g transform="translate(34, 4)">
          <text fontFamily={dir.display} fontSize="22" fontWeight="700" letterSpacing="-0.6" fill={dir.ink}>EIXO</text>
          <text fontFamily={dir.display} fontSize="22" fontWeight="700" x="68" fill={dir.accent}>.</text>
        </g>
      </g>
      {/* x labels */}
      <text x="6" y="78" fontFamily={dir.mono} fontSize="8" fill={dir.inkMuted} letterSpacing="0.5">x</text>
      <text x="210" y="78" fontFamily={dir.mono} fontSize="8" fill={dir.inkMuted} letterSpacing="0.5" textAnchor="end">x</text>
      <text x="110" y="14" fontFamily={dir.mono} fontSize="8" fill={dir.inkMuted} textAnchor="middle">x</text>
      <text x="110" y="135" fontFamily={dir.mono} fontSize="8" fill={dir.inkMuted} textAnchor="middle">x</text>
      <text x="60" y="35" fontFamily={dir.mono} fontSize="7" fill={dir.accent} letterSpacing="0.04em">altura do símbolo</text>
    </svg>
  );
}

// ── Do / Don't tile ────────────────────────────────────────────────────────
function RuleTile({ dir, type, title, children, dark }) {
  const isDo = type === "do";
  const color = isDo ? dir.accent : "#C24A1C";
  return (
    <div style={{
      background: dark ? "rgba(28,30,38,0.55)" : dir.glassBg,
      border: `0.5px solid ${dark ? "rgba(255,255,255,0.10)" : dir.glassBorder}`,
      borderRadius: dir.radiusLg, padding: 18,
      WebkitBackdropFilter: "blur(28px) saturate(180%)",
      backdropFilter: "blur(28px) saturate(180%)",
      boxShadow: dir.shadowGlass,
      display: "flex", flexDirection: "column", gap: 10,
      position: "relative", overflow: "hidden",
    }}>
      <div style={{
        position: "absolute", inset: 0, pointerEvents: "none",
        background: dir.highlight, opacity: dark ? 0.35 : 1,
      }} />
      <div style={{
        position: "relative", display: "inline-flex", alignItems: "center", gap: 8,
        fontFamily: dir.mono, fontSize: 10, letterSpacing: "0.14em",
        textTransform: "uppercase", color,
      }}>
        <span style={{
          width: 18, height: 18, borderRadius: 999, background: `${color}1A`,
          border: `1px solid ${color}55`, display: "grid", placeItems: "center",
          fontSize: 11, color, fontWeight: 700,
        }}>{isDo ? "✓" : "×"}</span>
        {isDo ? "Faça" : "Evite"}
      </div>
      <div style={{
        position: "relative", fontFamily: dir.display, fontSize: 15, fontWeight: 600,
        letterSpacing: "-0.01em", color: dark ? "#F2EFE6" : dir.ink, lineHeight: 1.3,
      }}>{title}</div>
      {children && (
        <div style={{
          position: "relative", fontSize: 12.5, lineHeight: 1.45,
          color: dark ? "rgba(242,239,230,0.65)" : dir.inkSoft,
        }}>{children}</div>
      )}
    </div>
  );
}

Object.assign(window, {
  useDirection, NavBar, Section, SectionHead, AssetTile,
  Swatch, Spec, ClearspaceDiagram, RuleTile,
});