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

/* Section G — Offer breakdown / value stack */
function Included() {
  const items = [
    {
      eb: '01 \u00B7 Exclusive access',
      t: '11 hours in the garden',
      d: 'Ceremony lawn and reception garden. Getting-ready suite. Private use of the property during your rental window.',
      img: 'assets/garden-at-night.jpg',
    },
    {
      eb: '02 \u00B7 Furnished, ready',
      t: 'Ceremony & reception, set',
      d: 'Tables, chairs, ivory linens. Place settings, glassware, and basic tableware in their places before you arrive.',
      img: 'assets/collage-1.jpg',
    },
    {
      eb: '03 \u00B7 In-house kitchen',
      t: 'Buffet brunch or dinner',
      d: 'Menu consultation. Tasting for two. Staffed buffet service. Filipino-inspired flavors and Dragonfly Cakes\u00AE craft.',
      img: 'assets/hospitality-table.jpg',
    },
    {
      eb: '04 \u00B7 BYO bar',
      t: 'You bring it. We pour it.',
      d: 'You provide the alcohol. We bring the bartending team, ice, basic mixers, and a self-serve iced tea & lemonade station.',
      img: 'assets/event-high-tea.jpg',
    },
    {
      eb: '05 \u00B7 Music & sound',
      t: 'Professional DJ, 5 hours',
      d: 'Microphones for ceremony and toasts. Dance-floor lighting. The room held in motion from first dance to last.',
      img: 'assets/event-wedding.jpg',
    },
    {
      eb: '06 \u00B7 Sweet finish',
      t: 'Two-tier wedding cake',
      d: 'A two-tier display cake from Dragonfly Cakes\u00AE, plus sheet cake or petit fours plated to your guest count.',
      img: 'assets/high-tea-2.jpg',
    },
    {
      eb: '07 \u00B7 Setup & teardown',
      t: 'Hands you don\u2019t see',
      d: 'We set every venue-provided item: tables, chairs, linens, place settings, cake, yard games. We tear it down at night.',
      img: 'assets/love-couple.jpg',
    },
    {
      eb: '08 \u00B7 The planning',
      t: '30-day timeline session',
      d: 'A dedicated planning call to finalize layout, flow, and key moments. A custom layout and timeline emailed to you.',
      img: 'assets/collage-3.jpg',
    },
  ];

  return (
    <section id="included" style={{ background: 'var(--hg-cream-100)', padding: '128px 48px' }}>
      <div style={{ maxWidth: 880, margin: '0 auto', textAlign: 'center' }}>
        <Eyebrow>What's gathered into the package</Eyebrow>
        <div style={{ height: 22 }} />
        <Display size="h1">
          You're not renting a room.<br/>
          <em style={{ fontStyle: 'italic', color: 'var(--hg-sage-700)' }}>You're buying a fully run day.</em>
        </Display>
        <div style={{ height: 28 }} />
        <Lead style={{ margin: '0 auto', maxWidth: '46ch' }}>
          Eight things, one contract. Each piece coordinated by the same team
          that has hosted celebrations on this property since the beginning.
        </Lead>
      </div>

      <div style={{
        maxWidth: 1200, margin: '88px auto 0',
        display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: '56px 48px',
      }}>
        {items.map((it) => (
          <article key={it.eb} style={{
            display: 'grid', gridTemplateColumns: '1fr 1.1fr', gap: 28,
            alignItems: 'flex-start',
          }}>
            <img src={it.img} alt="" style={{
              width: '100%', height: 260, objectFit: 'cover', display: 'block',
            }} />
            <div>
              <p style={{
                fontFamily: 'var(--hg-font-sans)', fontSize: 11, fontWeight: 500,
                textTransform: 'uppercase', letterSpacing: '0.22em',
                color: 'var(--hg-fg-muted)', margin: '4px 0 12px',
              }}>{it.eb}</p>
              <h3 style={{
                fontFamily: 'var(--hg-font-display)', fontWeight: 400,
                fontSize: 30, lineHeight: 1.1, margin: '0 0 12px',
                color: 'var(--hg-fg)', letterSpacing: '-0.005em',
              }}>{it.t}</h3>
              <p style={{
                fontFamily: 'var(--hg-font-serif)', fontSize: 16.5, lineHeight: 1.6,
                color: 'var(--hg-fg-soft)', margin: 0,
              }}>{it.d}</p>
            </div>
          </article>
        ))}
      </div>

      {/* Small extras row */}
      <div style={{
        maxWidth: 1100, margin: '88px auto 0',
        padding: '40px 48px', background: 'var(--hg-cream-200)',
        border: '1px solid var(--hg-line)',
        display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 24,
      }}>
        {[
          'Yard games for guests',
          'On-site parking',
          'Guest restrooms',
          'Vendor coordination toolkit',
        ].map((t) => (
          <div key={t} style={{
            display: 'flex', gap: 12, alignItems: 'center',
            fontFamily: 'var(--hg-font-serif)', fontSize: 16, color: 'var(--hg-fg)',
          }}>
            <Diamond /> {t}
          </div>
        ))}
      </div>
    </section>
  );
}

window.Included = Included;