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

/* Section G — value stack with honest à-la-carte values */
function Included() {
  const rows = [
    { t: 'Your private Tea House', d: '3 hours of access, styled to your theme', v: '$850' },
    { t: 'Tables, chairs & ivory linens', d: 'Set and ready before you arrive', v: '$300' },
    { t: 'Curated tablescape', d: 'Centerpieces, fine tableware & glassware', v: '$275' },
    { t: 'The Dragonfly High Tea spread', d: 'Filipino-inspired savories, sweets & signature Tea Cakes, with full Maya Tea service', v: '$1,100' },
    { t: 'Full table & tea service staff', d: 'Poured, cleared, and cared for all afternoon', v: '$375' },
    { t: 'Your dedicated onsite Tea Host', d: 'Day-of coordinator who runs the timeline', v: '$400' },
    { t: 'Sound, parking & restrooms', d: 'Plus complete setup and teardown', v: '$200' },
  ];

  return (
    <section id="included" data-screen-label="What's Included" style={{ background: 'var(--hg-cream-100)', padding: '128px 48px' }}>
      <div style={{ maxWidth: 900, margin: '0 auto', textAlign: 'center' }}>
        <Eyebrow>Everything that&rsquo;s handled for you</Eyebrow>
        <div style={{ height: 22 }} />
        <Display size="h1">
          You&rsquo;re not renting a room.<br/>
          <em style={{ fontStyle: 'italic', color: 'var(--hg-sage-700)' }}>You&rsquo;re stepping into a finished afternoon.</em>
        </Display>
        <div style={{ height: 28 }} />
        <Lead style={{ margin: '0 auto', maxWidth: '50ch' }}>
          Here&rsquo;s everything that&rsquo;s done for you &mdash; and what you&rsquo;d pay to source each
          piece separately in Tucson.
        </Lead>
      </div>

      <div style={{
        maxWidth: 1140, margin: '80px auto 0',
        display: 'grid', gridTemplateColumns: '1.05fr 0.95fr', gap: 56,
        alignItems: 'start',
      }}>
        {/* Ledger */}
        <div>
          <ul style={{ listStyle: 'none', padding: 0, margin: 0 }}>
            {rows.map((r, i) => (
              <li key={r.t} style={{
                padding: '20px 0',
                borderTop: i === 0 ? '1px solid var(--hg-line)' : 'none',
                borderBottom: '1px solid var(--hg-line)',
              }}>
                <div style={{ display: 'flex', alignItems: 'baseline', gap: 14 }}>
                  <span style={{
                    fontFamily: 'var(--hg-font-display)', fontWeight: 400, fontSize: 23,
                    lineHeight: 1.15, color: 'var(--hg-fg)', letterSpacing: '-0.005em',
                    flexShrink: 0, maxWidth: '74%',
                  }}>{r.t}</span>
                  <span style={{ flex: 1, borderBottom: '1px dotted var(--hg-line)', transform: 'translateY(-5px)' }} />
                  <span style={{
                    fontFamily: 'var(--hg-font-serif)', fontSize: 18, fontWeight: 500,
                    color: 'var(--hg-fg-muted)', flexShrink: 0,
                  }}>{r.v}</span>
                </div>
                <p style={{
                  fontFamily: 'var(--hg-font-serif)', fontSize: 16, lineHeight: 1.5,
                  color: 'var(--hg-fg-soft)', margin: '6px 0 0', maxWidth: '52ch',
                }}>{r.d}</p>
              </li>
            ))}
          </ul>

          <div style={{
            marginTop: 28, padding: '24px 28px', background: 'var(--hg-sage-900)',
            color: 'var(--hg-cream-50)', borderRadius: 14,
            display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', gap: 16,
          }}>
            <span style={{
              fontFamily: 'var(--hg-font-sans)', fontSize: 11.5, fontWeight: 500,
              textTransform: 'uppercase', letterSpacing: '0.22em', color: 'var(--hg-cream-300)',
            }}>Core experience value</span>
            <span style={{
              fontFamily: 'var(--hg-font-display)', fontSize: 40, lineHeight: 1,
              letterSpacing: '-0.01em',
            }}>$3,500</span>
          </div>
          <p style={{
            fontFamily: 'var(--hg-font-serif)', fontStyle: 'italic', fontWeight: 300,
            fontSize: 17, lineHeight: 1.55, color: 'var(--hg-fg-muted)', margin: '20px 0 0',
          }}>
            Plus four bonuses most venues would never include &mdash; just below.
          </p>
        </div>

        {/* Image stack */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
          <img src="assets/hospitality-table.jpg" alt="Styled Himaya Garden catering table" style={{
            width: '100%', height: 520, objectFit: 'cover', display: 'block',
          }} />
          <img src="assets/collage-3.jpg" alt="Signature Dragonfly tea cakes" style={{
            width: '100%', height: 280, objectFit: 'cover', display: 'block',
          }} />
        </div>
      </div>
    </section>
  );
}

window.Included = Included;