// Section.jsx — section starter with eyebrow + flanked label + serif heading
function Section({ id, eyebrow, title, kicker, children, dark = false }) {
  const tone = dark ? sectionStyles.dark : sectionStyles.light;
  return (
    <section id={id} style={{ ...sectionStyles.wrap, ...tone }}>
      <div style={sectionStyles.inner}>
        <header style={sectionStyles.header}>
          {eyebrow && (
            <div style={sectionStyles.flanked}>
              <span style={sectionStyles.rule} />
              <span style={sectionStyles.flankedLabel}>{eyebrow}</span>
              <span style={sectionStyles.rule} />
            </div>
          )}
          <h2 style={{ ...sectionStyles.title, color: dark ? 'var(--parchment)' : 'var(--ink)' }}>{title}</h2>
          {kicker && <p style={{ ...sectionStyles.kicker, color: dark ? 'var(--fg2)' : 'var(--ink-brown)' }}>{kicker}</p>}
        </header>
        <div style={sectionStyles.body}>{children}</div>
      </div>
    </section>
  );
}

const sectionStyles = {
  wrap: { padding: '120px 32px' },
  light: { background: 'var(--parchment)' },
  dark: { background: 'var(--ink)', color: 'var(--parchment)' },
  inner: { maxWidth: 1100, margin: '0 auto' },
  header: { display: 'flex', flexDirection: 'column', alignItems: 'center', textAlign: 'center', gap: 24, marginBottom: 80 },
  flanked: { display: 'inline-flex', alignItems: 'center', gap: 14, color: 'var(--accent)' },
  rule: { width: 32, height: 1, background: 'currentColor', opacity: 0.7, display: 'inline-block' },
  flankedLabel: { fontFamily: 'var(--sans-ui)', fontWeight: 300, fontSize: 12, letterSpacing: '0.28em', textTransform: 'uppercase' },
  title: { fontFamily: 'var(--serif-display)', fontWeight: 400, fontSize: 'clamp(36px, 4vw, 56px)', lineHeight: 1.1, letterSpacing: '-0.01em', margin: 0, maxWidth: 720, textWrap: 'balance' },
  kicker: { fontFamily: 'var(--serif-display)', fontStyle: 'italic', fontWeight: 400, fontSize: 19, lineHeight: 1.5, margin: 0, maxWidth: 56*9 + 'ch' },
  body: {},
};

window.Section = Section;