// Shared atoms + the hero animation pieces.
function useNarrow(breakpoint = 768) {
  const [narrow, setNarrow] = React.useState(false);
  React.useEffect(() => {
    const mq = window.matchMedia(`(max-width: ${breakpoint - 1}px)`);
    const apply = () => setNarrow(mq.matches);
    apply();
    mq.addEventListener("change", apply);
    return () => mq.removeEventListener("change", apply);
  }, [breakpoint]);
  return narrow;
}

const Kicker = ({ children }) => (
  <span className="kicker"><i className="dot"></i>{children}</span>
);

// Page section wrapper with consistent spacing
const Section = ({ id, children, style }) => {
  const narrow = useNarrow(768);
  return (
  <section id={id} style={{ padding: narrow ? "56px 0" : "96px 0", borderTop: "1px solid var(--rule-2)", ...style }}>
    <div className="wrap">{children}</div>
  </section>
  );
};

// Section header with kicker / serif title / sub
const SectionHead = ({ kicker, title, sub, align = "left", maxw = 760 }) => {
  const narrow = useNarrow(768);
  return (
  <div style={{ textAlign: align, maxWidth: maxw, margin: align === "center" ? "0 auto" : 0, marginBottom: narrow ? 36 : 56 }}>
    <Kicker>{kicker}</Kicker>
    <h2 className="serif" style={{
      fontSize: "clamp(36px, 5vw, 64px)",
      lineHeight: 1.02,
      letterSpacing: "-0.02em",
      margin: "16px 0 18px",
      fontWeight: 400,
    }}>{title}</h2>
    {sub && <p style={{ fontSize: 17, lineHeight: 1.55, color: "var(--ink-3)", margin: 0, maxWidth: 640, textWrap: "pretty" }}>{sub}</p>}
  </div>
  );
};

// Striped placeholder (for any imagery slots)
const Placeholder = ({ label, w = "100%", h = 180 }) => (
  <div style={{
    width: w, height: h,
    background: "repeating-linear-gradient(45deg, var(--rule-2) 0 6px, transparent 6px 14px)",
    border: "1px solid var(--rule)",
    display: "flex", alignItems: "center", justifyContent: "center",
    fontFamily: "JetBrains Mono, monospace", fontSize: 11, color: "var(--ink-3)",
    letterSpacing: "0.08em", textTransform: "uppercase",
  }}>{label}</div>
);

window.Kicker = Kicker;
window.useNarrow = useNarrow;
window.Section = Section;
window.SectionHead = SectionHead;
window.Placeholder = Placeholder;
