/* global React, Eyebrow, Display, ThreeBeat, Diamond, Pill */

/* Section D + E — root cause / introducing the new mechanism, in editorial voice */
function Mechanism() {
  return (
    <section style={{
      background: 'var(--hg-sage-900)', color: 'var(--hg-cream-100)',
      padding: '128px 48px',
    }}>
      <div style={{ maxWidth: 1100, margin: '0 auto' }}>
        {/* Top: the problem */}
        <div style={{
          display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80,
          alignItems: 'flex-start',
        }}>
          <div>
            <Eyebrow light>The problem isn't you</Eyebrow>
            <div style={{ height: 22 }} />
            <div style={{ color: 'var(--hg-cream-50)' }}>
              <Display size="h2">
                It's the model.
              </Display>
            </div>
            <div style={{ height: 24 }} />
            <p style={{
              fontFamily: 'var(--hg-font-serif)', fontStyle: 'italic', fontWeight: 300,
              fontSize: 19, lineHeight: 1.6, color: 'var(--hg-cream-200)',
              margin: 0, maxWidth: '42ch',
            }}>
              Most venues either rent you a room and hand you a vendor list,
              or promise "all inclusive" on paper while still expecting you
              to coordinate caterer, DJ, cake, bar, and setup.
            </p>
          </div>

          <ul style={{
            listStyle: 'none', padding: 0, margin: 0,
            display: 'flex', flexDirection: 'column', gap: 18,
          }}>
            {[
              'More contracts than you can track',
              'Family and bridal party doing unpaid labor',
              'Surprise fees and "oh, that\u2019s extra" conversations',
              'No single person fully responsible for the day',
            ].map((t) => (
              <li key={t} style={{
                fontFamily: 'var(--hg-font-serif)', fontSize: 19, lineHeight: 1.55,
                color: 'var(--hg-cream-100)',
                display: 'grid', gridTemplateColumns: '20px 1fr', gap: 14, alignItems: 'baseline',
                paddingBottom: 18, borderBottom: '1px solid rgba(250,246,238,0.18)',
              }}>
                <span style={{ color: 'var(--hg-sun-300)', fontSize: 12 }}>◈</span>
                <span>{t}</span>
              </li>
            ))}
          </ul>
        </div>

        {/* Divider */}
        <div style={{
          margin: '96px auto 0', width: '100%', maxWidth: 480,
          display: 'flex', alignItems: 'center', gap: 18,
          color: 'rgba(250,246,238,0.5)',
        }}>
          <span style={{ flex: 1, height: 1, background: 'currentColor' }} />
          <Diamond color="var(--hg-cream-200)" />
          <span style={{ flex: 1, height: 1, background: 'currentColor' }} />
        </div>

        {/* Bottom: the new mechanism */}
        <div style={{ maxWidth: 820, margin: '64px auto 0', textAlign: 'center' }}>
          <Eyebrow light>A new way to host a wedding</Eyebrow>
          <div style={{ height: 22 }} />
          <div style={{ color: 'var(--hg-cream-50)' }}>
            <Display size="h1">
              The Signature Garden<br/>
              <em style={{ fontStyle: 'italic', color: 'var(--hg-sun-300)' }}>Wedding Experience.</em>
            </Display>
          </div>
          <div style={{ height: 30 }} />
          <p style={{
            fontFamily: 'var(--hg-font-serif)', fontStyle: 'italic', fontWeight: 300,
            fontSize: 20, lineHeight: 1.6, color: 'var(--hg-cream-200)',
            margin: '0 auto', maxWidth: '46ch',
          }}>
            A single, all-inclusive garden wedding — ceremony to last dance —
            so you can simply show up and enjoy your day.
          </p>
        </div>

        {/* Three beats grid */}
        <div style={{
          margin: '72px auto 0', maxWidth: 1000,
          display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24,
        }}>
          {[
            { eb: 'One package', t: 'Venue, food, BYO bar, DJ, cake, staff, setup and teardown — gathered.' },
            { eb: 'One plan',    t: 'A 30-day layout and timeline session that locks every piece in place.' },
            { eb: 'One team',    t: 'A single point of contact coordinates the moving parts so you don\u2019t.' },
          ].map((c) => (
            <div key={c.eb} style={{
              padding: 32, background: 'rgba(250,246,238,0.06)',
              border: '1px solid rgba(250,246,238,0.16)',
              borderRadius: 14,
            }}>
              <div style={{ color: 'var(--hg-sun-300)', marginBottom: 14 }}>
                <Diamond color="var(--hg-sun-300)" size={16} />
              </div>
              <p style={{
                fontFamily: 'var(--hg-font-sans)', fontSize: 11, fontWeight: 500,
                textTransform: 'uppercase', letterSpacing: '0.22em',
                color: 'var(--hg-cream-300)', margin: '0 0 10px',
              }}>{c.eb}</p>
              <p style={{
                fontFamily: 'var(--hg-font-serif)', fontSize: 18, lineHeight: 1.55,
                color: 'var(--hg-cream-100)', margin: 0,
              }}>{c.t}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

window.Mechanism = Mechanism;