// Why LÜP — "The Problem" block shows for both audiences. The "Why X switch"
// header + benefit cards below it are audience-aware: venues see restaurant-
// flavoured copy/benefits, customers see diner-flavoured copy/benefits. Both
// live inside the same #why section so the layout + spacing match exactly.
window.WhyLUP = function WhyLUP() {
  const { audience } = React.useContext(window.AudienceContext);
  const isVenue = audience === 'venue';

  // Each row's `parts` is rendered inline: strings stay plain, `{ hl: '…' }`
  // becomes a terracotta-highlighted span (em.hi).
  const benefits = isVenue
    ? [
        { title: 'Cost savings',      parts: ['The average restaurant saves ', { hl: '20-60%' }, ' on disposable packaging every year'] },
        { title: 'Waste reduction',   parts: [{ hl: 'Thousands of single-use containers' }, ' per venue diverted from landfill annually'] },
        { title: 'Simple operations', parts: ['No special equipment. Wash like your ', { hl: 'normal dishware' }] },
        { title: 'Brand uplift',      parts: [{ hl: 'Premium, sustainable' }, ' image that drives customer loyalty'] },
      ]
    : [
        { title: 'Skip the bin',    parts: [{ hl: '500+ uses' }, ' per bowl. Every meal you LÜP keeps a single-use container out of landfill.'] },
        { title: 'Free to use',     parts: [{ hl: 'Zero charges' }, ' if returned within 7 days. $5 after that to keep (and reuse) it.'] },
        { title: 'Return anywhere', parts: ['Drop your bowl at ', { hl: 'any LÜP venue' }, ' across the network — not just where you got it.'] },
        { title: 'Simple sign-up',  parts: [{ hl: 'A few seconds' }, ' to sign-up and use. No app, no download.'] },
      ];

  const switchHeadline = isVenue ? 'Why restaurants choose ' : 'Why diners choose ';
  const switchIntro = isVenue
    ? React.createElement(React.Fragment, null,
        'Reusable bowls ',
        React.createElement('em', { className: 'hi' }, 'cut waste'),
        ' and ',
        React.createElement('em', { className: 'hi' }, 'reduce costs'), '. ',
        'Venues on LÜP see lower bills, loyal customers, and a brand that looks as good as it feels.'
      )
    : React.createElement(React.Fragment, null,
        'Same takeaway. ',
        React.createElement('em', { className: 'hi' }, 'Zero waste'),
        ' and ',
        React.createElement('em', { className: 'hi' }, 'zero hassle'), '. ',
        'Sign up once and skip the bin every time you grab a meal.'
      );

  // "The problem" three-column items (moved here from the former ImpactBand component)
  const problemItems = [
    { caption: 'Used once, often not reused nor recycled', src: 'assets/Bowl_into_bin.webp' },
    { caption: 'Compostable containers still end up in bins and landfills', src: 'assets/Garbage_truck_icon.webp' },
    { caption: 'Disposable costs never stop and keep rising', src: 'assets/Cost_increase_icon.webp' },
  ];

  return React.createElement('section', { id: 'why', style: { background: 'var(--parchment)' } },
    React.createElement('div', { className: 'container' },

      // ─── THE PROBLEM (anchor: #problem) ───
      React.createElement('div', { id: 'problem', style: { marginBottom: 96 } },
        React.createElement(Reveal, { as: 'div', style: { maxWidth: 720, marginBottom: 48 } },
          React.createElement('div', { className: 'eyebrow', style: { marginBottom: 16 } },
            React.createElement('span', { className: 'dot' }), 'Why LÜP?'
          ),
          React.createElement('h2', {
            style: { fontFamily: 'var(--font-serif)', fontSize: 'clamp(36px, 4vw, 56px)', fontWeight: 500, lineHeight: 1.05, color: 'var(--charcoal)', letterSpacing: '-0.02em' }
          },
            React.createElement('span', { className: 'serif-accent' }, 'Single-use waste'),
            ' is out of control.',
          ),
          React.createElement('p', {
            style: { marginTop: 14, fontSize: 17, color: 'var(--stone)', lineHeight: 1.55 }
          }, 'Australia uses ', React.createElement('em', { className: 'hi' }, '3+ billion single-use containers'), ' every year.'),
        ),
        React.createElement('div', {
          className: 'problem-grid',
          style: {
            background: 'var(--ivory)', borderRadius: 24, padding: '48px 32px',
            border: '1px solid var(--border-cream)',
            display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 0,
          }
        },
          problemItems.map((it, i) => React.createElement(Reveal, {
            key: i,
            delay: i + 1,
            style: {
              padding: '8px 28px',
              borderRight: i < problemItems.length - 1 ? '1.5px dashed rgba(122,140,110,0.45)' : 'none',
              display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 22,
              textAlign: 'center',
            }
          },
            React.createElement('div', {
              style: { width: '100%', maxWidth: 180, height: 130, display: 'flex', alignItems: 'center', justifyContent: 'center' }
            },
              React.createElement('img', {
                src: it.src, alt: '',
                style: { maxWidth: '100%', maxHeight: '100%', objectFit: 'contain', display: 'block' }
              }),
            ),
            React.createElement('p', {
              style: { fontFamily: 'var(--font-serif)', fontSize: 20, fontWeight: 500, color: 'var(--charcoal)', lineHeight: 1.35, maxWidth: 240 }
            }, it.caption),
          )),
        ),
      ),

      // ─── WHY {restaurants|diners} SWITCH — audience-aware header + cards ───
      // id="why-restaurants" is the precise anchor the app's /partner/savings
      // "Back to LÜP site" link returns to (the venue CTA pill below passes it
      // via ?back=).
      React.createElement(Reveal, { as: 'div', id: 'why-restaurants', className: 'stack-md', style: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 60, marginBottom: 56, alignItems: 'end' } },
        React.createElement('div', {},
          React.createElement('h2', {
            style: { fontSize: 'clamp(36px, 4vw, 56px)', lineHeight: 1.05, letterSpacing: '-0.02em' }
          },
            switchHeadline,
            React.createElement('img', {
              src: 'assets/lup-logo.svg?v=2', alt: 'LÜP',
              style: { height: '0.85em', width: 'auto', verticalAlign: '-0.08em', display: 'inline-block' }
            }),
          ),
        ),
        React.createElement('p', {
          style: { fontSize: 17, color: 'var(--stone)', lineHeight: 1.65, maxWidth: 480 }
        }, switchIntro),
      ),

      React.createElement('div', {
        className: 'grid-4-md-2',
        style: { display: 'grid', gap: 16 }
      },
        benefits.map((b, i) => React.createElement(Reveal, {
          as: 'div',
          key: b.title,
          delay: (i % 4) + 1,
          className: 'card card-hover',
          style: {
            padding: '32px 24px',
            textAlign: 'center',
            display: 'flex', flexDirection: 'column', justifyContent: 'center',
          }
        },
          React.createElement('h3', {
            style: {
              fontFamily: 'var(--font-serif)',
              fontSize: 26,
              fontWeight: 500,
              color: 'var(--charcoal)',
              marginBottom: 10,
              lineHeight: 1.25,
              letterSpacing: '-0.01em',
            }
          }, b.title),
          React.createElement('p', {
            style: { fontSize: 16, color: 'var(--stone)', lineHeight: 1.5 }
          },
            b.parts.map((part, j) =>
              typeof part === 'string'
                ? part
                : React.createElement('em', { key: j, className: 'hi' }, part.hl)
            )
          ),
        )),
      ),

      // CTA pill (venues only) — the section's key message. Spans the full
      // width of the 4-card grid (and the screen on mobile), with the headline
      // sized to match the card titles.
      isVenue && React.createElement(Reveal, { as: 'div', delay: 2, style: { marginTop: 16 } },
        React.createElement('a', {
          href: 'https://app.lupit.com.au/partner/savings?back=' + encodeURIComponent('https://lupit.com.au/#why-restaurants'),
          className: 'btn btn-terracotta',
          style: {
            width: '100%', display: 'flex', justifyContent: 'center', alignItems: 'center', gap: 12,
            padding: '16px 32px', fontSize: 22, fontWeight: 500, lineHeight: 1.25,
            letterSpacing: '-0.01em', borderRadius: 100, whiteSpace: 'normal', textAlign: 'center',
          }
        }, 'Calculate your savings and impact',
          React.createElement('span', { style: { display: 'inline-flex', flexShrink: 0 } },
            React.createElement(IconArrowRight, { size: 22 }))),
      ),

      // ─────────────────────────────────────────────────────────────
      // TESTIMONIAL SECTION — TEMPORARILY HIDDEN
      //
      // TO REINSTATE: delete the opening "/*" line directly below
      // and the closing "*/" line just before the "// END TESTIMONIAL"
      // marker further down. The React.createElement(Reveal, ...) call
      // between them is the testimonial pull-quote band + stats grid.
      // ─────────────────────────────────────────────────────────────
      /*
      React.createElement(Reveal, { as: 'div', delay: 2,
        className: 'stack-md',
        style: {
          marginTop: 56,
          background: 'var(--sage)', color: 'var(--ivory)',
          borderRadius: 28, padding: '56px 56px',
          display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 48, alignItems: 'center',
          position: 'relative', overflow: 'hidden',
        }
      },
        // decorative quote mark
        React.createElement('div', {
          style: {
            position: 'absolute', right: 30, top: -10,
            fontFamily: 'var(--font-serif)', fontSize: 240, lineHeight: 1,
            color: 'rgba(250,245,237,0.08)', fontStyle: 'italic',
          }
        }, '"'),
        React.createElement('div', { style: { position: 'relative' } },
          React.createElement('div', { style: { fontSize: 11, fontWeight: 500, letterSpacing: '0.8px', textTransform: 'uppercase', opacity: 0.75, marginBottom: 20 } }, 'From a partner venue'),
          React.createElement('blockquote', {
            style: { fontFamily: 'var(--font-serif)', fontSize: 32, fontWeight: 400, lineHeight: 1.25, letterSpacing: '-0.01em' }
          },
            '"We cut our packaging bill by ', React.createElement('em', { style: { fontStyle: 'italic', color: 'var(--terracotta-soft)' } }, 'over 60%'), ' in the first six months — and customers ', React.createElement('em', { style: { fontStyle: 'italic', color: 'var(--terracotta-soft)' } }, 'love'), ' the bowls."'
          ),
          React.createElement('div', { style: { marginTop: 26, fontSize: 14, opacity: 0.85 } },
            React.createElement('div', { style: { fontWeight: 500 } }, 'Amy Chen'),
            React.createElement('div', { style: { opacity: 0.7 } }, 'Owner, Greenhouse Café — Melbourne'),
          ),
        ),
        React.createElement('div', {
          style: {
            display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12, position: 'relative',
          }
        },
          [
            { n: '60%', l: 'packaging cost reduction' },
            { n: '12k', l: 'single-use bowls avoided' },
            { n: '4.9★', l: 'customer feedback' },
            { n: '6 orders', l: 'payback time' },
          ].map(s => React.createElement('div', {
            key: s.n,
            className: 'card-hover',
            style: {
              background: 'rgba(250,245,237,0.08)',
              border: '1px solid rgba(250,245,237,0.15)',
              borderRadius: 14, padding: '18px 18px',
            }
          },
            React.createElement('div', { style: { fontFamily: 'var(--font-serif)', fontSize: 32, fontWeight: 500, lineHeight: 1 } },
              React.createElement(AnimatedCounter, { target: s.n })
            ),
            React.createElement('div', { style: { fontSize: 12, opacity: 0.75, marginTop: 6 } }, s.l),
          )),
        ),
      ),
      */
      // END TESTIMONIAL SECTION (hidden)
    ),
  );
};