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

/* Section B — pattern interrupt / call-out opener */
function Opener() {
  return (
    <section data-screen-label="Opener" style={{
      background: 'var(--hg-cream-100)', padding: "128px 48px 12px"
    }}>
      <div style={{ maxWidth: 980, margin: '0 auto', textAlign: 'center' }}>
        <Eyebrow>For the woman who&rsquo;s hosting &mdash; and quietly dreading it</Eyebrow>
        <div style={{ height: 24 }} />
        <Display size="h1">
          You said yes to hosting.
          <br />
          <em style={{ fontStyle: 'italic', color: 'var(--hg-sage-700)' }}>
            Not to a second job.
          </em>
        </Display>
        <div style={{ height: 32 }} />
        <Lead style={{ margin: '0 auto', maxWidth: '50ch' }}>
          Somewhere between the yes and today it hit you &mdash; the invites, the theme, the food,
          the rentals, the setup, the timeline, the cleanup all quietly landed on you. And
          somehow you&rsquo;re meant to be relaxed and present while it happens.
        </Lead>
        <div style={{ height: 22 }} />
        <p style={{
          fontFamily: 'var(--hg-font-serif)', fontSize: 18.5, lineHeight: 1.65,
          color: 'var(--hg-fg-soft)', margin: '0 auto', maxWidth: '48ch'
        }}>
          Most of these afternoons end up looking like every other one. Not because the host
          didn&rsquo;t care &mdash; because she ran out of hours. This page is the other option.
        </p>
      </div>

      <div style={{
        maxWidth: 1100, margin: '84px auto 0',
        display: 'grid', gridTemplateColumns: '1.15fr 1fr 1fr', gap: 16,
        alignItems: 'start'
      }}>
        <img src="assets/event-high-tea.jpg" alt="A hosted high tea in service at Himaya Garden" style={{
          width: '100%', height: 420, objectFit: 'cover', display: 'block'
        }} />
        <img src="assets/collage-3.jpg" alt="Dragonfly tea cakes and petit fours" style={{
          width: '100%', height: 420, objectFit: 'cover', display: 'block'
        }} />
        <img src="assets/high-tea-2.jpg" alt="Guests at the Dragonfly photo wall" style={{
          width: '100%', height: 420, objectFit: 'cover', display: 'block'
        }} />
      </div>
    </section>);

}

window.Opener = Opener;