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

/* Sections H + I — Four bonuses + The Unforgettable Afternoon Guarantee */
function HimayaPromise() {
  const bonuses = [
    { n: '01', name: 'The Styling Concierge', v: '$250', d: 'A pre-event design consult where we style the room to your exact palette and theme.', worry: 'What if it doesn\u2019t match what I pictured?' },
    { n: '02', name: "The Host\u2019s Headstart Kit", v: '$150', d: 'A digital invite template, a run-of-show timeline, and a guest-prep guide \u2014 the moment you book.', worry: 'What do I actually have to do?' },
    { n: '03', name: 'The Golden-Hour Photo Moment', v: '$300', d: 'A styled backdrop plus a brief on-site capture, so the afternoon is actually documented.', worry: 'Will we even capture it?' },
    { n: '04', name: 'Keepsake Dragonfly Favors', v: '$250', d: 'A branded Dragonfly tea favor for every guest to take home and remember the day by.', worry: 'Will it feel special enough to remember?' },
  ];

  const promises = [
    { n: '1', t: 'The Styled-On-Time Promise', d: 'Your tea is fully set, styled, and ready before guest #1 walks in \u2014 guaranteed, or your venue fee is free.' },
    { n: '2', t: 'The Peace-of-Mind Reschedule', d: 'Life happens. Reschedule once, up to 14 days before your date, with no penalty.' },
    { n: '3', t: 'The Love-Your-Look Walkthrough', d: 'You approve your entire styling plan in advance at your design consult \u2014 so there are zero day-of surprises.' },
  ];

  return (
    <>
      {/* Bonuses */}
      <section data-screen-label="Bonuses" style={{ background: 'var(--hg-cream-200)', padding: '128px 48px' }}>
        <div style={{ maxWidth: 900, margin: '0 auto', textAlign: 'center' }}>
          <Eyebrow>Four things that take it from lovely to unforgettable</Eyebrow>
          <div style={{ height: 22 }} />
          <Display size="h1">
            Every venue hands you a key.<br/>
            <em style={{ fontStyle: 'italic', color: 'var(--hg-clay-700)' }}>We hand you four worries, removed.</em>
          </Display>
        </div>

        <div style={{
          maxWidth: 1180, margin: '72px auto 0',
          display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 22,
        }}>
          {bonuses.map((b) => (
            <article key={b.n} style={{
              background: 'var(--hg-white)', border: '1px solid var(--hg-line)',
              borderRadius: 14, padding: '32px 28px',
              display: 'flex', flexDirection: 'column', gap: 0,
              boxShadow: 'var(--hg-shadow-sm)',
            }}>
              <div style={{
                display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 18,
              }}>
                <span style={{
                  fontFamily: 'var(--hg-font-sans)', fontSize: 11, fontWeight: 500,
                  textTransform: 'uppercase', letterSpacing: '0.22em', color: 'var(--hg-fg-muted)',
                }}>Bonus {b.n}</span>
                <Diamond color="var(--hg-clay-600)" size={14} />
              </div>
              <h3 style={{
                fontFamily: 'var(--hg-font-display)', fontWeight: 400, fontSize: 25,
                lineHeight: 1.12, margin: '0 0 12px', color: 'var(--hg-fg)', letterSpacing: '-0.005em',
              }}>{b.name}</h3>
              <p style={{
                fontFamily: 'var(--hg-font-serif)', fontSize: 16, lineHeight: 1.55,
                color: 'var(--hg-fg-soft)', margin: '0 0 18px', flex: 1,
              }}>{b.d}</p>
              <p style={{
                fontFamily: 'var(--hg-font-serif)', fontStyle: 'italic', fontSize: 14.5,
                lineHeight: 1.5, color: 'var(--hg-fg-muted)', margin: '0 0 16px',
                paddingTop: 16, borderTop: '1px solid var(--hg-line-soft)',
              }}>Removes: &ldquo;{b.worry}&rdquo;</p>
              <span style={{
                alignSelf: 'flex-start',
                fontFamily: 'var(--hg-font-sans)', fontSize: 11, fontWeight: 500,
                textTransform: 'uppercase', letterSpacing: '0.16em',
                color: 'var(--hg-sage-700)', background: 'var(--hg-sage-100)',
                padding: '6px 12px', borderRadius: 999,
              }}>{b.v} value</span>
            </article>
          ))}
        </div>

        {/* Totals strip */}
        <div style={{
          maxWidth: 1180, margin: '28px auto 0',
          display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 22,
        }}>
          <div style={{
            background: 'var(--hg-white)', border: '1px solid var(--hg-line)', borderRadius: 14,
            padding: '24px 32px', display: 'flex', alignItems: 'baseline', justifyContent: 'space-between',
          }}>
            <span style={{
              fontFamily: 'var(--hg-font-sans)', fontSize: 11.5, fontWeight: 500,
              textTransform: 'uppercase', letterSpacing: '0.2em', color: 'var(--hg-fg-muted)',
            }}>Total bonus stack</span>
            <span style={{
              fontFamily: 'var(--hg-font-display)', fontSize: 34, color: 'var(--hg-clay-700)', lineHeight: 1,
            }}>$950</span>
          </div>
          <div style={{
            background: 'var(--hg-sage-900)', borderRadius: 14, color: 'var(--hg-cream-50)',
            padding: '24px 32px', display: 'flex', alignItems: 'baseline', justifyContent: 'space-between',
          }}>
            <span style={{
              fontFamily: 'var(--hg-font-sans)', fontSize: 11.5, fontWeight: 500,
              textTransform: 'uppercase', letterSpacing: '0.2em', color: 'var(--hg-cream-300)',
            }}>Total stacked value</span>
            <span style={{
              fontFamily: 'var(--hg-font-display)', fontSize: 34, lineHeight: 1,
            }}>&asymp; $4,450</span>
          </div>
        </div>
        <p style={{
          fontFamily: 'var(--hg-font-serif)', fontStyle: 'italic', fontWeight: 300, fontSize: 16,
          color: 'var(--hg-fg-muted)', textAlign: 'center', margin: '20px auto 0', maxWidth: '50ch',
        }}>
          For 25 guests &mdash; about $6,450 of value for 50. Every piece included, not bolted on at checkout.
        </p>
      </section>

      {/* Dragonfly image band */}
      <section style={{
        position: 'relative', backgroundImage: "url('assets/high-tea-2.jpg')",
        backgroundSize: 'cover', backgroundPosition: 'center 38%', minHeight: 360,
        display: 'flex', alignItems: 'center',
      }}>
        <div style={{
          position: 'absolute', inset: 0,
          background: 'linear-gradient(90deg, rgba(42,38,32,0.62), rgba(42,38,32,0.12) 72%)',
        }} />
        <div style={{ position: 'relative', maxWidth: 560, padding: '64px', color: 'var(--hg-cream-100)' }}>
          <Eyebrow light>Made with love &mdash; and remembered</Eyebrow>
          <div style={{ height: 16 }} />
          <p style={{
            fontFamily: 'var(--hg-font-display)', fontWeight: 400, fontSize: 34, lineHeight: 1.15,
            color: 'var(--hg-cream-50)', margin: 0,
          }}>
            Your guests leave with a keepsake in hand and a photo they&rsquo;ll actually print.
          </p>
        </div>
      </section>

      {/* The Guarantee */}
      <section id="promise" data-screen-label="Guarantee" style={{ background: 'var(--hg-cream-100)', padding: '128px 48px' }}>
        <div style={{
          maxWidth: 1100, margin: '0 auto',
          display: 'grid', gridTemplateColumns: '1.1fr 0.9fr', gap: 80, alignItems: 'center',
        }}>
          <div>
            <Eyebrow>The Unforgettable Afternoon Guarantee</Eyebrow>
            <div style={{ height: 22 }} />
            <Display size="h2">
              You&rsquo;re not betting<br/>
              <em style={{ fontStyle: 'italic', color: 'var(--hg-sage-700)' }}>your afternoon on hope.</em>
            </Display>
            <div style={{ height: 26 }} />
            <p style={{
              fontFamily: 'var(--hg-font-serif)', fontStyle: 'italic', fontWeight: 300,
              fontSize: 20, lineHeight: 1.6, color: 'var(--hg-fg-soft)', margin: '0 0 32px', maxWidth: '44ch',
            }}>
              Walk into a picture-perfect tea &mdash; fully styled, fully staffed, and ready before
              your first guest arrives &mdash; guaranteed, or your venue fee is free.
            </p>
            <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 22 }}>
              {promises.map((p) => (
                <li key={p.n} style={{ display: 'grid', gridTemplateColumns: '34px 1fr', gap: 16, alignItems: 'start' }}>
                  <span style={{
                    fontFamily: 'var(--hg-font-display)', fontSize: 26, color: 'var(--hg-clay-600)',
                    lineHeight: 1, paddingTop: 2,
                  }}>{p.n}</span>
                  <div>
                    <p style={{
                      fontFamily: 'var(--hg-font-sans)', fontSize: 12, fontWeight: 600,
                      textTransform: 'uppercase', letterSpacing: '0.14em', color: 'var(--hg-fg)', margin: '0 0 6px',
                    }}>{p.t}</p>
                    <p style={{
                      fontFamily: 'var(--hg-font-serif)', fontSize: 16.5, lineHeight: 1.55,
                      color: 'var(--hg-fg-soft)', margin: 0, maxWidth: '46ch',
                    }}>{p.d}</p>
                  </div>
                </li>
              ))}
            </ul>
          </div>

          {/* Seal card */}
          <div style={{
            position: 'relative', background: 'var(--hg-white)', padding: '60px 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 only thing you risk</p>
            <h3 style={{
              fontFamily: 'var(--hg-font-display)', fontWeight: 400, fontSize: 34, lineHeight: 1.12,
              margin: '0 0 18px', color: 'var(--hg-fg)', letterSpacing: '-0.01em',
            }}>
              Waiting too long to claim your date.
            </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',
            }}>
              You approve the look. We hit the timing. Life can move once if it needs to.
            </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)',
              }}>Styled, staffed, on time</span>
              <span style={{ flex: 1, height: 1, background: 'currentColor' }} />
            </div>
          </div>
        </div>
      </section>
    </>
  );
}

window.HimayaPromise = HimayaPromise;
