const sectionStyles = {
  section: { padding: '7rem 4rem', maxWidth: 1200, margin: '0 auto' },
  band: { background: 'var(--bg-2)', maxWidth: '100%', padding: 0 },
  cream: { background: 'var(--cream)', maxWidth: '100%', padding: 0 },
  bandInner: { maxWidth: 1200, margin: '0 auto', padding: '7rem 4rem' },
  eyebrow: {
    fontSize: '0.65rem', letterSpacing: '.22em', textTransform: 'uppercase',
    color: 'var(--gold)', marginBottom: '1.5rem',
  },
  title: {
    fontFamily: "'Plus Jakarta Sans', sans-serif",
    fontSize: 'clamp(2rem, 4vw, 3.5rem)',
    fontWeight: 700, lineHeight: 1.0, letterSpacing: '-0.02em', marginBottom: '16px',
  },
  body: {
    fontSize: '1.05rem', color: 'var(--fg-muted)',
    maxWidth: 580, lineHeight: 1.6,
  },
  divider: { width: 40, height: 1, background: 'var(--border)', margin: '2rem 0' },
};

const SectionContext = React.createContext({ cream: false });

function Section({ band, cream, children, style }) {
  const inner = <SectionContext.Provider value={{ cream: !!cream }}>{children}</SectionContext.Provider>;
  if (cream) {
    return <div data-cream="1" style={sectionStyles.cream}><div className="section-inner" style={{ ...sectionStyles.bandInner, ...style }}>{inner}</div></div>;
  }
  if (band) {
    return <div style={sectionStyles.band}><div className="section-inner" style={{ ...sectionStyles.bandInner, ...style }}>{inner}</div></div>;
  }
  return <section style={{ ...sectionStyles.section, ...style }}>{inner}</section>;
}

function Eyebrow({ children, style, className }) {
  return <p className={className} style={{ ...sectionStyles.eyebrow, ...style }}>{children}</p>;
}
function Title({ children, style, className }) {
  const { cream } = React.useContext(SectionContext);
  return <h2 className={className} style={{ ...sectionStyles.title, color: cream ? 'var(--ink)' : 'var(--fg)', ...style }}>{children}</h2>;
}
function Body({ children, style, className }) {
  const { cream } = React.useContext(SectionContext);
  return <p className={className} style={{ ...sectionStyles.body, color: cream ? 'var(--ink-2)' : 'var(--fg-muted)', ...style }}>{children}</p>;
}
function Divider({ className }) {
  const { cream } = React.useContext(SectionContext);
  return <div className={className} style={{ ...sectionStyles.divider, background: cream ? 'var(--gold)' : 'var(--border)' }}></div>;
}
function Em({ children }) {
  return <em style={{ fontStyle: 'normal', color: 'var(--gold)' }}>{children}</em>;
}

Object.assign(window, { Section, Eyebrow, Title, Body, Divider, Em });