/* global React, Eyebrow, Display, Lead, ThreeBeat, Diamond, Divider */

/* Section A — soft "pattern interrupt" / opener that keeps the editorial voice. */
function Opener() {
  return (
    <section style={{
      background: 'var(--hg-cream-100)', padding: '120px 48px',
    }}>
      <div style={{ maxWidth: 980, margin: '0 auto', textAlign: 'center' }}>
        <Eyebrow>For couples with twenty-seven tabs open</Eyebrow>
        <div style={{ height: 24 }} />
        <Display size="h1">
          You wanted a wedding.
          <br />
          <em style={{ fontStyle: 'italic', color: 'var(--hg-sage-700)' }}>
            Not a part-time job.
          </em>
        </Display>
        <div style={{ height: 32 }} />
        <Lead style={{ margin: '0 auto', maxWidth: '46ch' }}>
          Most couples don't actually want freedom to choose every vendor.
          They want a beautiful outdoor setting, guests fed and happy,
          and zero "who's on what?" chaos on the day.
        </Lead>
      </div>

      <div style={{
        maxWidth: 1100, margin: '88px auto 0',
        display: 'grid', gridTemplateColumns: '1.2fr 1fr 1fr', gap: 16,
        alignItems: 'start',
      }}>
        <img src="assets/love-couple.jpg" alt="" style={{
          width: '100%', height: 460, objectFit: 'cover', display: 'block',
        }} />
        <img src="assets/collage-2.jpg" alt="" style={{
          width: '100%', height: 360, objectFit: 'cover', display: 'block', marginTop: 40,
        }} />
        <img src="assets/event-weddings-2.jpg" alt="" style={{
          width: '100%', height: 400, objectFit: 'cover', display: 'block',
        }} />
      </div>

      <div style={{ maxWidth: 720, margin: '88px auto 0', textAlign: 'center' }}>
        <Divider />
        <div style={{ height: 32 }} />
        <ThreeBeat>One garden. One team. One quietly run day.</ThreeBeat>
      </div>
    </section>
  );
}

window.Opener = Opener;