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

/* Section J — Pricing / Investment */
function Investment() {
  const tiers = [
    {
      kind: 'Entry',
      name: 'Intimate Garden Wedding',
      price: '$7,400',
      sub: 'Up to 60 guests \u00B7 Select weekdays or Sundays',
      bullets: [
        'Slightly shorter access window',
        'Trimmed inclusions, same calm team',
        'Same Perfect Timeline & Setup Promise',
      ],
      cta: 'Inquire',
      featured: false,
    },
    {
      kind: 'Most chosen',
      name: 'Signature Garden Wedding',
      price: '$11,900',
      sub: 'Up to 120 guests \u00B7 $75 per additional guest to 150',
      bullets: [
        'Eleven hours of exclusive garden access',
        'Full ceremony & reception, fully furnished',
        'Buffet, BYO bar, DJ, cake, setup & teardown',
        '30-day Final Timeline & Layout session',
      ],
      cta: 'Reserve a date',
      featured: true,
    },
    {
      kind: 'Anchor',
      name: 'Estate Weekend Takeover',
      price: '$19,800',
      sub: 'The whole place, the whole weekend',
      bullets: [
        'Rehearsal-dinner time block',
        'Morning-after brunch in the garden',
        'Extended hours and upgraded bar support',
      ],
      cta: 'Talk to us',
      featured: false,
    },
  ];

  return (
    <section id="investment" style={{
      background: 'var(--hg-cream-200)', padding: '128px 48px',
    }}>
      <div style={{ maxWidth: 880, margin: '0 auto', textAlign: 'center' }}>
        <Eyebrow>The investment</Eyebrow>
        <div style={{ height: 22 }} />
        <Display size="h1">
          Sourced separately, you'd be<br/>
          <em style={{ fontStyle: 'italic', color: 'var(--hg-clay-700)' }}>well past $20,000.</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: '50ch',
        }}>
          Garden rental, furnishings, catering, bartending, DJ, cake,
          setup, teardown, and coordination &mdash; gathered into one fair number.
        </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 36px 36px',
            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,
              }}>Most chosen</span>
            )}

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

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

            <div style={{
              display: 'flex', alignItems: 'baseline', gap: 6, marginBottom: 8,
            }}>
              <span style={{
                fontFamily: 'var(--hg-font-display)', fontWeight: 400,
                fontSize: 52, lineHeight: 1, letterSpacing: '-0.015em',
                color: t.featured ? 'var(--hg-cream-50)' : 'var(--hg-fg)',
              }}>{t.price}</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 28px',
            }}>{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: '80px auto 0',
        padding: '32px 40px', background: 'var(--hg-white)',
        border: '1px solid var(--hg-line)', borderRadius: 14,
        display: 'grid', gridTemplateColumns: '1.4fr 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. Predictable. No surprises.</p>
        </div>
        {[
          { id: 'deposit', n: '30%', t: 'to reserve your date' },
          { id: 'midway',  n: '40%', t: 'six months before' },
          { id: 'final',   n: '30%', t: 'thirty days before' },
        ].map((p) => (
          <div key={p.id} style={{ borderLeft: '1px solid var(--hg-line)', paddingLeft: 24 }}>
            <p style={{
              fontFamily: 'var(--hg-font-display)', fontSize: 36, 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: '40px auto 0', maxWidth: '56ch', textAlign: 'center',
      }}>
        Save 3&ndash;5% by paying in full at booking. Guest counts can be adjusted later.
        Dates cannot. Once a date is booked, it's gone.
      </p>
    </section>
  );
}

window.Investment = Investment;