/* global React, useViewport */

/* ------------------------------------------------------------------ */
/* PageIntro                                                           */
/*                                                                    */
/* Reusable editorial opening for interior pages.                     */
/* Small eyebrow · centered headline · generous body paragraph.       */
/* Matches TaglineSlab tempo. Used as a page's first block after nav. */
/*                                                                    */
/* Props:                                                             */
/*   eyebrow   short kicker (e.g. "Collections", "Projects")          */
/*   title     the editorial headline                                 */
/*   body      a paragraph of supporting copy (optional)              */
/*   awards    array of award lines, shown under the body (optional)  */
/*   compact   tighter top/bottom padding when sitting above a filter */
/* ------------------------------------------------------------------ */

function PageIntro({ eyebrow, title, body, awards, compact = false, noTopPad = false }) {
  const vw = useViewport();
  const isMobile = vw < 760;

  // When noTopPad, the page has a full-bleed element (eg carousel) above us;
  // we don't need to clear the fixed header — just breathe from the image.
  const topPad = noTopPad
    ? (isMobile ? "48px 24px 48px" : "72px max(32px, 4vw) 80px")
    : (isMobile
        ? (compact ? "140px 24px 56px" : "160px 24px 72px")
        : (compact ? "200px max(32px, 4vw) 80px" : "240px max(32px, 4vw) 120px"));

  return (
    <section style={{
      padding: topPad,
      maxWidth: 1240,
      margin: "0 auto",
      textAlign: isMobile ? "left" : "center",
    }}>
      {eyebrow && (
        <div style={{
          fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase",
          color: "#6c6862", fontWeight: 500, marginBottom: isMobile ? 20 : 28,
        }}>
          {eyebrow}
        </div>
      )}
      <h1 style={{
        fontWeight: 500,
        fontSize: isMobile ? "clamp(26px, 6.5vw, 34px)" : "clamp(30px, 2.8vw, 44px)",
        lineHeight: 1.1,
        letterSpacing: "-0.02em",
        color: "#1a1917",
        margin: isMobile
          ? (body ? "0 0 24px 0" : "0")
          : (body ? "0 auto 32px" : "0"),
        maxWidth: "22ch",
        marginLeft: isMobile ? 0 : "auto",
        marginRight: isMobile ? 0 : "auto",
      }}>
        {title}
      </h1>
      {body && (
        <p style={{
          fontSize: isMobile ? 15 : 16,
          lineHeight: 1.55,
          color: "#1a1917",
          fontWeight: 400,
          margin: isMobile ? 0 : "0 auto",
          maxWidth: "56ch",
        }}>
          {body}
        </p>
      )}
      {awards && awards.length > 0 && (
        <div style={{
          marginTop: isMobile ? 28 : 36,
          display: "flex",
          flexDirection: "column",
          gap: 6,
          alignItems: isMobile ? "flex-start" : "center",
        }}>
          {awards.map((a, i) => (
            <div key={i} style={{
              fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase",
              color: "#6c6862", fontWeight: 500,
            }}>
              {a}
            </div>
          ))}
        </div>
      )}
    </section>
  );
}

window.PageIntro = PageIntro;