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

/* Sections D + E — why the usual options fail + the named mechanism */
function Mechanism() {
  const dishes = ['Dragonfly Tea Cakes', 'Maya Tea', 'Lumpia Sariwa', 'Ube Biko', 'Chicken Adobo'];
  const beats = [
    { eb: 'A menu no one can copy', t: 'The Filipino-inspired Dragonfly Tea Party is proprietary to Himaya Garden. Your guests will have tasted nothing like it \u2014 because there is nothing like it here.' },
    { eb: 'Your own Tea Host', t: 'A real person owns your timeline, the service, and the details all afternoon \u2014 so you\u2019re a guest, not a manager.' },
    { eb: 'One decision, not twelve', t: 'No separate caterer, rental company, stylist, and cleanup crew. One date, one vibe, one invoice, fully handled \u2014 with tax and gratuity already in.' },
  ];
  return (
    <section data-screen-label="Mechanism" 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: 'center',
        }}>
          <div>
            <Eyebrow light>The problem isn&rsquo;t you</Eyebrow>
            <div style={{ height: 22 }} />
            <div style={{ color: 'var(--hg-cream-50)' }}>
              <Display size="h2">The real options are<br/>both bad.</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',
            }}>
              Every &ldquo;venue rental&rdquo; looks the same on paper, so you start price-shopping rooms.
              But a room isn&rsquo;t what you want. You want the afternoon &mdash; the feeling, the photos,
              the thing people talk about.
            </p>
          </div>

          <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
            {[
              { h: 'The banquet room', s: 'Effortless \u2014 and forgettable. Four walls, a folding table, an afternoon that looks like everyone else\u2019s.' },
              { h: 'The DIY-at-home', s: 'Personal \u2014 and exhausting. Weeks of Pinterest, three trips to the craft store, cooking for 25, praying it comes together.' },
            ].map((c) => (
              <div key={c.h} style={{
                padding: 28, background: 'rgba(250,246,238,0.05)',
                border: '1px solid rgba(250,246,238,0.16)', borderRadius: 14,
              }}>
                <p style={{
                  fontFamily: 'var(--hg-font-display)', fontWeight: 400, fontSize: 26,
                  lineHeight: 1.1, color: 'var(--hg-cream-50)', margin: '0 0 10px',
                }}>{c.h}</p>
                <p style={{
                  fontFamily: 'var(--hg-font-serif)', fontSize: 17, lineHeight: 1.55,
                  color: 'var(--hg-cream-200)', margin: 0,
                }}>{c.s}</p>
              </div>
            ))}
            <p style={{
              fontFamily: 'var(--hg-font-sans)', fontSize: 12, fontWeight: 500,
              textTransform: 'uppercase', letterSpacing: '0.18em',
              color: 'var(--hg-sun-300)', margin: '4px 0 0', textAlign: 'center',
            }}>So you choose between forgettable and exhausting. Until now.</p>
          </div>
        </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: 860, margin: '60px auto 0', textAlign: 'center' }}>
          <Eyebrow light>A different category of afternoon</Eyebrow>
          <div style={{ height: 22 }} />
          <div style={{ color: 'var(--hg-cream-50)' }}>
            <Display size="h1">
              The Fully-Hosted<br/>
              <em style={{ fontStyle: 'italic', color: 'var(--hg-sun-300)' }}>Tea Method.</em>
            </Display>
          </div>
          <div style={{ height: 28 }} />
          <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: '48ch',
          }}>
            You make two decisions &mdash; a date and a vibe &mdash; and we handle every single thing
            after that. You don&rsquo;t assemble an event. You step into a finished one, built around
            our signature Dragonfly Tea Party.
          </p>
          <div style={{ height: 34 }} />
          <div style={{
            display: 'flex', justifyContent: 'center', alignItems: 'center',
            gap: 14, flexWrap: 'wrap',
            fontFamily: 'var(--hg-font-sans)', fontSize: 11.5, fontWeight: 500,
            textTransform: 'uppercase', letterSpacing: '0.18em', color: 'var(--hg-cream-100)',
          }}>
            {dishes.map((d, i) => (
              <React.Fragment key={d}>
                {i > 0 && <Diamond color="var(--hg-sun-300)" size={9} />}
                <span>{d}</span>
              </React.Fragment>
            ))}
          </div>
        </div>

        {/* Three beats grid */}
        <div style={{
          margin: '72px auto 0', maxWidth: 1000,
          display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24,
        }}>
          {beats.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={{ 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: 17, lineHeight: 1.55,
                color: 'var(--hg-cream-100)', margin: 0,
              }}>{c.t}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

window.Mechanism = Mechanism;
