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

/* Sections H + I — Bonuses + The Promise (guarantee), woven together */
function HimayaPromise() {
  return (
    <>
      {/* Bonus — Welcome High Tea */}
      <section style={{
        position: 'relative',
        backgroundImage: "url('assets/high-tea-1.jpg')",
        backgroundSize: 'cover', backgroundPosition: 'center',
        minHeight: 560,
        display: 'flex', alignItems: 'center',
      }}>
        <div style={{
          position: 'absolute', inset: 0,
          background: 'linear-gradient(90deg, rgba(42,38,32,0.55), rgba(42,38,32,0.05) 70%)',
        }} />
        <div style={{
          position: 'relative', maxWidth: 580, padding: '80px 64px',
          color: 'var(--hg-cream-100)',
        }}>
          <Eyebrow light>Reserve within 7 days &mdash; a gift</Eyebrow>
          <div style={{ height: 18 }} />
          <div style={{ color: 'var(--hg-cream-50)' }}>
            <Display size="h1">
              A complimentary<br/>
              <em style={{ fontStyle: 'italic', color: 'var(--hg-sun-300)' }}>Welcome High Tea.</em>
            </Display>
          </div>
          <div style={{ height: 22 }} />
          <p style={{
            fontFamily: 'var(--hg-font-serif)', fontStyle: 'italic', fontWeight: 300,
            fontSize: 19, lineHeight: 1.55, color: 'var(--hg-cream-100)',
            margin: 0, maxWidth: '40ch',
          }}>
            A weekday Filipino-inspired high tea in the garden, for up to sixteen
            guests. For introducing families, celebrating the engagement, or
            gathering the bridal party before the day arrives.
          </p>
          <div style={{ height: 28 }} />
          <p style={{
            fontFamily: 'var(--hg-font-sans)', fontSize: 11, fontWeight: 500,
            textTransform: 'uppercase', letterSpacing: '0.22em',
            color: 'var(--hg-cream-200)', margin: 0,
          }}>
            Included when you reserve within 7 days of your tour.
          </p>
        </div>
      </section>

      {/* The Promise */}
      <section id="promise" style={{
        background: 'var(--hg-cream-100)', padding: '128px 48px',
      }}>
        <div style={{
          maxWidth: 1100, margin: '0 auto',
          display: 'grid', gridTemplateColumns: '1fr 1.05fr', gap: 88, alignItems: 'center',
        }}>
          <div>
            <Eyebrow>The Perfect Timeline & Setup Promise</Eyebrow>
            <div style={{ height: 22 }} />
            <Display size="h1">
              You won't be<br/>
              <em style={{ fontStyle: 'italic', color: 'var(--hg-sage-700)' }}>betting your wedding on hope.</em>
            </Display>
            <div style={{ height: 26 }} />
            <p style={{
              fontFamily: 'var(--hg-font-serif)', fontSize: 18, lineHeight: 1.65,
              color: 'var(--hg-fg-soft)', margin: '0 0 22px', maxWidth: '46ch',
            }}>
              If, thirty days before your wedding, you do not feel completely
              confident in the layout and timeline we built together, we will:
            </p>
            <ul style={{
              listStyle: 'none', padding: 0, margin: 0,
              display: 'flex', flexDirection: 'column', gap: 14,
            }}>
              {[
                'Redo your planning session with you, and',
                'Add an extra setup staff member on your wedding day at no additional cost.',
              ].map((t) => (
                <li key={t} style={{
                  display: 'grid', gridTemplateColumns: '20px 1fr', gap: 14,
                  fontFamily: 'var(--hg-font-serif)', fontSize: 18.5, lineHeight: 1.55,
                  color: 'var(--hg-fg)',
                }}>
                  <span style={{ color: 'var(--hg-clay-600)', fontSize: 14 }}>◈</span>
                  <span>{t}</span>
                </li>
              ))}
            </ul>
            <p style={{
              fontFamily: 'var(--hg-font-serif)', fontStyle: 'italic', fontWeight: 300,
              fontSize: 19, lineHeight: 1.55, color: 'var(--hg-fg-soft)',
              margin: '32px 0 0', maxWidth: '46ch',
            }}>
              Our job is to make sure you walk into your day with calm, not questions.
            </p>
          </div>

          {/* Seal-style card */}
          <div style={{
            position: 'relative',
            background: 'var(--hg-white)', padding: '64px 48px',
            border: '1px solid var(--hg-line)', borderRadius: 14,
            boxShadow: 'var(--hg-shadow-md)', textAlign: 'center',
          }}>
            <div style={{ display: 'flex', justifyContent: 'center', marginBottom: 18 }}>
              <Diamond color="var(--hg-clay-600)" size={22} />
            </div>
            <p style={{
              fontFamily: 'var(--hg-font-sans)', fontSize: 11, fontWeight: 500,
              textTransform: 'uppercase', letterSpacing: '0.28em',
              color: 'var(--hg-clay-700)', margin: '0 0 18px',
            }}>The Himaya Promise</p>
            <h3 style={{
              fontFamily: 'var(--hg-font-display)', fontWeight: 400,
              fontSize: 38, lineHeight: 1.1, margin: '0 0 18px',
              color: 'var(--hg-fg)', letterSpacing: '-0.01em',
            }}>
              You walk in with a clear timeline,<br/>
              a clear layout, and extra hands on deck.
            </h3>
            <p style={{
              fontFamily: 'var(--hg-font-serif)', fontStyle: 'italic', fontWeight: 300,
              fontSize: 17, lineHeight: 1.55, color: 'var(--hg-fg-soft)',
              margin: '0 auto', maxWidth: '32ch',
            }}>
              We're putting our team on the line with you. That's the deal.
            </p>
            <div style={{
              margin: '36px auto 0', display: 'flex', alignItems: 'center', gap: 14,
              color: 'var(--hg-line)',
            }}>
              <span style={{ flex: 1, height: 1, background: 'currentColor' }} />
              <span style={{
                fontFamily: 'var(--hg-font-sans)', fontSize: 11, fontWeight: 500,
                textTransform: 'uppercase', letterSpacing: '0.22em',
                color: 'var(--hg-fg-muted)',
              }}>Confidence, 30 days out</span>
              <span style={{ flex: 1, height: 1, background: 'currentColor' }} />
            </div>
          </div>
        </div>
      </section>
    </>
  );
}

window.HimayaPromise = HimayaPromise;