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

/* Section J — Pricing / Investment (good-better-best ladder) */
function Investment() {
  const tiers = [
    {
      kind: 'Entry \u00B7 The Royal Tea',
      name: 'The Royal Tea',
      price: '$1,650',
      per: '25 guests',
      sub: '$3,250 for 50 \u00B7 $60 each additional',
      bullets: [
        'The same beautiful tea house, styled to your theme',
        'A classic Royal High Tea menu',
        'A lighter bonus stack',
        'The full Unforgettable Afternoon Guarantee',
      ],
      cta: 'Inquire',
      featured: false,
    },
    {
      kind: 'Signature',
      name: 'The Dragonfly Tea Experience',
      price: '$1,975',
      per: '25 guests',
      sub: '$3,850 for 50 \u00B7 $65 each additional',
      bullets: [
        'The full Filipino-inspired Dragonfly menu',
        'All four bonuses \u2014 Styling Concierge, Headstart Kit, Photo Moment & Favors',
        'Your dedicated onsite Tea Host',
        'The complete Unforgettable Afternoon Guarantee',
      ],
      cta: 'Reserve your date',
      featured: true,
    },
    {
      kind: 'Premium \u00B7 The Empress',
      name: 'The Dragonfly Empress',
      price: '$2,900',
      per: '25 guests',
      sub: '$5,300 for 50 \u00B7 $75 each additional',
      bullets: [
        'Everything in the Signature, plus \u2014',
        'Custom floral design & a Flower Bar',
        'Extended event time',
        'A photographer hour & welcome sparkling toast',
      ],
      cta: 'Talk to us',
      featured: false,
    },
  ];

  return (
    <section id="investment" data-screen-label="Investment" style={{
      background: 'var(--hg-cream-200)', padding: '128px 48px',
    }}>
      <div style={{ maxWidth: 900, margin: '0 auto', textAlign: 'center' }}>
        <Eyebrow>The investment</Eyebrow>
        <div style={{ height: 22 }} />
        <Display size="h1">
          Sourced separately, you&rsquo;d be<br/>
          <em style={{ fontStyle: 'italic', color: 'var(--hg-clay-700)' }}>well past $4,400.</em>
        </Display>
        <div style={{ height: 24 }} />
        <p style={{
          fontFamily: 'var(--hg-font-serif)', fontStyle: 'italic', fontWeight: 300,
          fontSize: 19, lineHeight: 1.6, color: 'var(--hg-fg-soft)',
          margin: '0 auto', maxWidth: '52ch',
        }}>
          The tea house, the Dragonfly spread, styling, staffing, your Tea Host, setup and
          teardown &mdash; gathered into one all-in number. Most hosts choose the middle.
        </p>
      </div>

      <div style={{
        maxWidth: 1180, margin: '80px auto 0',
        display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24,
        alignItems: 'stretch',
      }}>
        {tiers.map((t) => (
          <article key={t.name} style={{
            position: 'relative',
            background: t.featured ? 'var(--hg-sage-900)' : 'var(--hg-white)',
            color: t.featured ? 'var(--hg-cream-100)' : 'var(--hg-fg)',
            border: t.featured ? '1px solid var(--hg-sage-900)' : '1px solid var(--hg-line)',
            borderRadius: 14, padding: '40px 34px 34px',
            boxShadow: t.featured ? 'var(--hg-shadow-lg)' : 'var(--hg-shadow-md)',
            display: 'flex', flexDirection: 'column',
            transform: t.featured ? 'translateY(-12px)' : 'none',
          }}>
            {t.featured && (
              <span style={{
                position: 'absolute', top: -14, left: '50%', transform: 'translateX(-50%)',
                background: 'var(--hg-clay-600)', color: '#fff',
                fontFamily: 'var(--hg-font-sans)', fontSize: 10.5, fontWeight: 500,
                textTransform: 'uppercase', letterSpacing: '0.24em',
                padding: '7px 16px', borderRadius: 999, whiteSpace: 'nowrap',
              }}>Most popular</span>
            )}

            <p style={{
              fontFamily: 'var(--hg-font-sans)', fontSize: 11, fontWeight: 500,
              textTransform: 'uppercase', letterSpacing: '0.2em',
              color: t.featured ? 'var(--hg-sun-300)' : 'var(--hg-fg-muted)',
              margin: '0 0 16px',
            }}>{t.kind}</p>

            <h3 style={{
              fontFamily: 'var(--hg-font-display)', fontWeight: 400,
              fontSize: 28, lineHeight: 1.1, margin: '0 0 18px',
              color: t.featured ? 'var(--hg-cream-50)' : 'var(--hg-fg)',
              letterSpacing: '-0.005em', minHeight: 62,
            }}>{t.name}</h3>

            <div style={{ display: 'flex', alignItems: 'baseline', gap: 8, marginBottom: 4 }}>
              <span style={{
                fontFamily: 'var(--hg-font-display)', fontWeight: 400,
                fontSize: 50, lineHeight: 1, letterSpacing: '-0.015em',
                color: t.featured ? 'var(--hg-cream-50)' : 'var(--hg-fg)',
              }}>{t.price}</span>
              <span style={{
                fontFamily: 'var(--hg-font-sans)', fontSize: 11, fontWeight: 500,
                textTransform: 'uppercase', letterSpacing: '0.16em',
                color: t.featured ? 'var(--hg-cream-300)' : 'var(--hg-fg-muted)',
              }}>/ {t.per}</span>
            </div>
            <p style={{
              fontFamily: 'var(--hg-font-serif)', fontStyle: 'italic', fontSize: 15,
              color: t.featured ? 'var(--hg-cream-200)' : 'var(--hg-fg-muted)',
              margin: '0 0 26px',
            }}>{t.sub}</p>

            <div style={{
              height: 1, background: t.featured ? 'rgba(250,246,238,0.16)' : 'var(--hg-line)',
              margin: '0 0 24px',
            }} />

            <ul style={{
              listStyle: 'none', padding: 0, margin: '0 0 32px',
              display: 'flex', flexDirection: 'column', gap: 12, flex: 1,
            }}>
              {t.bullets.map((b) => (
                <li key={b} style={{
                  display: 'grid', gridTemplateColumns: '14px 1fr', gap: 12,
                  fontFamily: 'var(--hg-font-serif)', fontSize: 16, lineHeight: 1.5,
                  color: t.featured ? 'var(--hg-cream-100)' : 'var(--hg-fg)',
                }}>
                  <span style={{
                    color: t.featured ? 'var(--hg-sun-300)' : 'var(--hg-sage-700)',
                    fontSize: 11, paddingTop: 5,
                  }}>◈</span>
                  <span>{b}</span>
                </li>
              ))}
            </ul>

            <Pill
              as="a"
              href="#tour"
              variant={t.featured ? 'onDark' : 'primary'}
              style={{ alignSelf: 'flex-start' }}
            >{t.cta}</Pill>
          </article>
        ))}
      </div>

      {/* Payment terms strip */}
      <div style={{
        maxWidth: 1100, margin: '72px auto 0',
        padding: '32px 40px', background: 'var(--hg-white)',
        border: '1px solid var(--hg-line)', borderRadius: 14,
        display: 'grid', gridTemplateColumns: '1.5fr 1fr 1fr 1fr', gap: 32, alignItems: 'center',
      }}>
        <div>
          <p style={{
            fontFamily: 'var(--hg-font-sans)', fontSize: 11, fontWeight: 500,
            textTransform: 'uppercase', letterSpacing: '0.22em',
            color: 'var(--hg-fg-muted)', margin: '0 0 6px',
          }}>Payment terms</p>
          <p style={{
            fontFamily: 'var(--hg-font-display)', fontWeight: 400, fontSize: 24,
            lineHeight: 1.2, color: 'var(--hg-fg)', margin: 0,
          }}>Simple. All-in. No surprises.</p>
        </div>
        {[
          { id: 'deposit', n: '25%', t: 'reserves your date' },
          { id: 'balance', n: '14 days', t: 'before \u2014 balance due' },
          { id: 'allin', n: 'All-in', t: 'tax & gratuity included' },
        ].map((p) => (
          <div key={p.id} style={{ borderLeft: '1px solid var(--hg-line)', paddingLeft: 24 }}>
            <p style={{
              fontFamily: 'var(--hg-font-display)', fontSize: 32, fontWeight: 400,
              color: 'var(--hg-sage-700)', margin: '0 0 4px', lineHeight: 1,
            }}>{p.n}</p>
            <p style={{
              fontFamily: 'var(--hg-font-serif)', fontSize: 14.5, color: 'var(--hg-fg-soft)', margin: 0,
            }}>{p.t}</p>
          </div>
        ))}
      </div>

      <p style={{
        fontFamily: 'var(--hg-font-serif)', fontStyle: 'italic', fontWeight: 300,
        fontSize: 17, lineHeight: 1.6, color: 'var(--hg-fg-muted)',
        margin: '36px auto 0', maxWidth: '62ch', textAlign: 'center',
      }}>
        Fast-action: book within 7 days of your tour &mdash; or choose an off-peak date &mdash; and add a
        free Flower Bar or an extra 30 minutes, on the house. Balance can be split into two payments on request.
      </p>
    </section>
  );
}

window.Investment = Investment;