/* Page templates: PageHero (large title block) and Section (content row).
 * Used across Work / Studio / Process / Journal / Contact.
 *
 * Responsive: padding shrinks on mobile/tablet via window.useViewport.
 */

const pageStyles = {
  hero: {
    padding: "100px 56px 64px",
    display: "flex",
    flexDirection: "column",
    gap: 24,
    maxWidth: 1240,
    margin: "0 auto",
    width: "100%",
  },
  heroTablet: { padding: "80px 32px 48px", gap: 20 },
  heroMobile: { padding: "56px 20px 36px", gap: 16 },
  heroTitle: {
    fontFamily: "Helvetica Neue, Helvetica, Arial, sans-serif",
    fontWeight: 500,
    fontSize: "clamp(40px, 5.6vw, 84px)",
    lineHeight: 0.98,
    letterSpacing: "-0.035em",
    margin: 0,
    color: "var(--fg)",
    textWrap: "balance",
    maxWidth: 1000,
  },
  heroTitleMobile: { fontSize: "clamp(34px, 9vw, 52px)", lineHeight: 1.02 },
  heroItalic: { color: "var(--fg-dim)", fontStyle: "italic", fontWeight: 300 },
  heroSub: {
    fontSize: 18,
    lineHeight: 1.55,
    color: "var(--fg-dim)",
    maxWidth: 620,
    margin: "8px 0 0",
    textWrap: "pretty",
  },
  heroSubMobile: { fontSize: 16, margin: "4px 0 0" },
  section: {
    padding: "64px 56px",
    maxWidth: 1240,
    margin: "0 auto",
    width: "100%",
  },
  sectionTablet: { padding: "48px 32px" },
  sectionMobile: { padding: "32px 20px" },
  sectionTitle: {
    fontFamily: "ui-monospace, 'SF Mono', Menlo, Consolas, monospace",
    fontSize: 11,
    letterSpacing: "0.22em",
    textTransform: "uppercase",
    color: "var(--fg-faint)",
    margin: "0 0 28px",
    paddingBottom: 12,
    borderBottom: "1px solid var(--line)",
  },
  sectionTitleMobile: { margin: "0 0 20px", paddingBottom: 10, fontSize: 10 },
};

function PageHero({ eyebrow, title, italicTail, sub }) {
  const { isMobile, isTablet } = window.useViewport();
  return (
    <section
      style={{
        ...pageStyles.hero,
        ...(isTablet ? pageStyles.heroTablet : null),
        ...(isMobile ? pageStyles.heroMobile : null),
      }}
    >
      {eyebrow ? <window.Eyebrow>{eyebrow}</window.Eyebrow> : null}
      <h1
        style={{
          ...pageStyles.heroTitle,
          ...(isMobile ? pageStyles.heroTitleMobile : null),
        }}
      >
        {title}
        {italicTail ? <span style={pageStyles.heroItalic}>{italicTail}</span> : null}
      </h1>
      {sub ? (
        <p style={{ ...pageStyles.heroSub, ...(isMobile ? pageStyles.heroSubMobile : null) }}>
          {sub}
        </p>
      ) : null}
    </section>
  );
}

function Section({ title, children }) {
  const { isMobile, isTablet } = window.useViewport();
  return (
    <section
      style={{
        ...pageStyles.section,
        ...(isTablet ? pageStyles.sectionTablet : null),
        ...(isMobile ? pageStyles.sectionMobile : null),
      }}
    >
      {title ? (
        <h2 style={{ ...pageStyles.sectionTitle, ...(isMobile ? pageStyles.sectionTitleMobile : null) }}>
          {title}
        </h2>
      ) : null}
      {children}
    </section>
  );
}

Object.assign(window, { PageHero, Section });