// layout.jsx. shared blueprint primitives
const SectionFrame = ({ idx, kicker, title, sub, children, dark = false, accent = false }) => {
  const bg = dark ? "#000" : (accent ? THEME.primary : "#F9F9F9");
  const fg = dark || accent ? "#fff" : "#000";
  const meta = dark || accent ? "rgba(255,255,255,0.7)" : THEME.primary;
  const isMobile = useIsMobile();
  return (
    <section style={{
      position: "relative",
      background: bg,
      color: fg,
      borderTop: dark || accent ? "none" : "1px solid #000",
      padding: isMobile ? "40px 16px 56px" : "64px 56px 80px",
      overflow: "hidden",
    }}>
      <header style={{
        display: "grid",
        gridTemplateColumns: isMobile ? "1fr" : "120px 1fr",
        gap: isMobile ? 12 : 24,
        marginBottom: isMobile ? 32 : 56,
        alignItems: "start"
      }}>
        <div style={{ display: "flex", flexDirection: isMobile ? "row" : "column", gap: isMobile ? 12 : 6 }}>
          <span className="ss-l3" style={{ color: meta }}>[{idx}]</span>
          <span className="ss-l3" style={{ color: meta }}>{kicker}</span>
        </div>
        <div style={{ display: "flex", flexDirection: "column", gap: isMobile ? 12 : 16, maxWidth: 920 }}>
          <h2 style={{
            fontFamily: "Suisse Intl", fontWeight: 300,
            fontSize: isMobile ? 32 : 56,
            lineHeight: isMobile ? 1.0 : 0.94,
            letterSpacing: "-0.025em", margin: 0, color: fg
          }}>{title}</h2>
          {sub && <p style={{
            fontSize: isMobile ? 15 : 18, lineHeight: 1.4, letterSpacing: "-0.01em",
            color: dark || accent ? "rgba(255,255,255,0.7)" : "#333", margin: 0, maxWidth: 720
          }}>{sub}</p>}
        </div>
      </header>
      {children}
    </section>
  );
};

const Crosshair = ({ x, y, label, color = THEME.primary }) => (
  <div style={{
    position: "absolute", left: x, top: y, transform: "translate(-50%,-50%)",
    pointerEvents: "none", display: "flex", alignItems: "center", gap: 8,
  }}>
    <span style={{
      width: 8, height: 8, borderRadius: "50%", background: color,
      boxShadow: "0 0 0 4px rgba(249,249,249,0.9)"
    }} />
    {label && <span className="ss-l3" style={{ color, whiteSpace: "nowrap" }}>{label}</span>}
  </div>
);

// A small mono callout/tag
const Mono = ({ children, color, size = 11, style = {} }) => (
  <span style={{
    fontFamily: "Suisse Intl Mono, JetBrains Mono, monospace",
    fontWeight: 700, fontSize: size, letterSpacing: "-0.03em",
    color: color || "inherit", lineHeight: 1, ...style
  }}>{children}</span>
);

// The bracket-framed kicker like [01] HEADLINE
const IndexKicker = ({ n, label, color = THEME.primary }) => (
  <div style={{ display: "flex", gap: 12, alignItems: "baseline" }}>
    <Mono color={color} size={11}>[{n}]</Mono>
    <Mono color={color} size={11}>{label}</Mono>
  </div>
);

window.SectionFrame = SectionFrame;
window.Crosshair = Crosshair;
window.Mono = Mono;
window.IndexKicker = IndexKicker;