/* ─── SHARED UI PRIMITIVES ─── */
const { C: uiC, FONTS: uiFONTS } = window.LT;
const { useInView: uiUseInView } = window.LTHooks;

function Section({ children, id, dark, ariaLabel, style: sx }) {
  const [ref, vis] = uiUseInView(0.06);
  return (
    <section
      ref={ref}
      id={id}
      aria-label={ariaLabel}
      style={{
        padding: "clamp(64px, 9vw, 112px) clamp(20px, 4vw, 32px)",
        background: dark ? uiC.night : uiC.deep,
        position: "relative",
        opacity: vis ? 1 : 0,
        transform: vis ? "translateY(0)" : "translateY(28px)",
        transition: "opacity 0.7s ease, transform 0.7s ease",
        ...sx,
      }}
    >
      <div style={{ maxWidth: 1180, margin: "0 auto", position: "relative" }}>{children}</div>
    </section>
  );
}

function SectionTag({ text, color }) {
  const c = color || uiC.sunsetSoft;
  return (
    <span
      style={{
        display: "inline-flex", alignItems: "center", gap: 8,
        fontSize: 12, fontWeight: 700, letterSpacing: "0.18em",
        textTransform: "uppercase", color: c, fontFamily: uiFONTS.mono,
        marginBottom: 14,
        background: "rgba(245,155,60,0.12)",
        padding: "6px 14px", borderRadius: 99,
        border: "1px solid rgba(245,155,60,0.25)",
      }}
    >
      <span aria-hidden="true" style={{
        width: 6, height: 6, borderRadius: "50%", background: c,
      }} />
      {text}
    </span>
  );
}

function SectionTitle({ children, align, id }) {
  return (
    <h2
      id={id}
      style={{
        fontFamily: uiFONTS.display,
        fontSize: "clamp(34px, 5.5vw, 60px)",
        fontWeight: 700,
        color: uiC.text,
        margin: "0 0 18px",
        lineHeight: 1.05,
        textAlign: align || "left",
        textTransform: "uppercase",
        letterSpacing: "-0.02em",
        textWrap: "balance",
      }}
    >
      {children}
    </h2>
  );
}

function Lede({ children }) {
  return (
    <p style={{
      color: uiC.textSoft, fontSize: "clamp(15px, 1.5vw, 17px)",
      maxWidth: 620, lineHeight: 1.7, marginBottom: 40, textWrap: "pretty",
    }}>{children}</p>
  );
}

window.LTUI = { Section, SectionTag, SectionTitle, Lede };