/* global React */

/* =========================================================
   BSpoke — Shared page-shell pieces.

   On the single-page layout, each major section uses
   <SinglePageIntro> as its opening header. The <section> it
   renders carries the anchor id and a `.sp-section` class so
   sticky-nav offsets behave correctly.

   <SectionHead> stays for sub-section dividers inside a single
   page section.
   ========================================================= */

function SinglePageIntro({ id, eyebrow, title, deck, bg = "paper", align = "left" }) {
  const isCream = bg === "cream";
  const isNavy = bg === "navy";
  const titleColor = isNavy ? "var(--inverse)" : "var(--navy)";
  const deckColor = isNavy ? "rgba(245,240,235,0.78)" : "var(--ink-2)";
  const eyebrowColor = isNavy ? "var(--gold-light)" : "var(--ink-2)";
  const ruleBg = isNavy ? "var(--gold-light)" : "var(--gold)";

  return (
    <section id={id} className="sp-section" style={{
      background: isCream ? "var(--cream)"
        : isNavy ? "var(--navy-dark)"
        : "var(--paper)",
      padding: "110px 0 56px",
      borderTop: isNavy ? "none" : "1px solid var(--line)",
    }}>
      <div className="wrap" style={{ textAlign: align === "center" ? "center" : "left" }}>
        <div style={{
          display: "flex", alignItems: "center", gap: 14, marginBottom: 28,
          justifyContent: align === "center" ? "center" : "flex-start",
        }}>
          <span className="rule-gold" style={{ background: ruleBg }} />
          <span style={{
            fontFamily: "var(--font-mono)", fontSize: 12,
            letterSpacing: "var(--tracking-label)", textTransform: "uppercase",
            color: eyebrowColor, fontWeight: 500,
          }}>{eyebrow}</span>
        </div>
        <h2 style={{
          fontFamily: "var(--font-serif)",
          fontWeight: 400,
          fontSize: "clamp(36px, 4.4vw, 64px)",
          lineHeight: 1.05,
          letterSpacing: "-0.015em",
          color: titleColor,
          maxWidth: 980,
          margin: align === "center" ? "0 auto" : 0,
          marginBottom: deck ? 28 : 0,
        }}>{title}</h2>
        {deck && (
          <p style={{
            fontSize: 20, lineHeight: 1.55,
            color: deckColor,
            maxWidth: 740,
            margin: align === "center" ? "0 auto" : 0,
            fontWeight: 300,
          }}>{deck}</p>
        )}
      </div>
    </section>
  );
}

function SectionHead({ eyebrow, title, deck, align = "left" }) {
  return (
    <div className="section-head" style={{
      maxWidth: 820,
      margin: align === "center" ? "0 auto 64px" : "0 0 64px",
      textAlign: align === "center" ? "center" : "left",
      alignItems: align === "center" ? "center" : "flex-start",
    }}>
      {eyebrow && (
        <div style={{ display: "flex", alignItems: "center", gap: 14 }}>
          <span className="rule-gold" />
          <span className="eyebrow">{eyebrow}</span>
        </div>
      )}
      <h3 style={{
        fontFamily: "var(--font-serif)",
        fontWeight: 400,
        fontSize: "clamp(28px, 3vw, 40px)",
        lineHeight: 1.1,
        letterSpacing: "-0.015em",
        color: "var(--navy)",
        margin: 0,
      }}>{title}</h3>
      {deck && <p className="deck">{deck}</p>}
    </div>
  );
}

window.SinglePageIntro = SinglePageIntro;
window.SectionHead = SectionHead;