// dthas landing — shared section scaffolding (header band with overline + title).
function SectionHead({ index, eyebrow, title, intro }) {
  const { Overline } = window.DesignSystem_aa2f04;
  return (
    <div style={{
      display: 'grid', gridTemplateColumns: 'minmax(0, 1fr) minmax(0, 1.2fr)',
      gap: 'clamp(24px, 5vw, 80px)', alignItems: 'end',
      paddingBottom: 'clamp(32px, 5vh, 56px)',
    }} className="dthas-sechead">
      <div>
        <Overline index={index}>{eyebrow}</Overline>
        <h2 style={{
          margin: '20px 0 0', fontWeight: 400,
          fontSize: 'var(--fs-h1)', lineHeight: 1.04, letterSpacing: '-0.03em',
        }}>{title}</h2>
      </div>
      {intro && (
        <p style={{
          margin: 0, fontSize: 'var(--fs-lead)', lineHeight: 1.45,
          letterSpacing: '-0.01em', color: 'var(--text-secondary)', maxWidth: '46ch',
        }}>{intro}</p>
      )}
    </div>
  );
}

function Section({ id, children, style }) {
  return (
    <section id={id} style={{
      borderTop: '1px solid var(--border-hairline)',
      ...style,
    }}>
      <div style={{
        maxWidth: 'var(--container-max)', margin: '0 auto',
        padding: 'clamp(64px, 11vh, 160px) var(--container-pad)',
      }}>
        {children}
      </div>
    </section>
  );
}

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