// Hero — asymmetric card grid with LÜP branding
window.Hero = function Hero() {
  const { audience } = React.useContext(window.AudienceContext);
  // The Join CTA destination depends on audience:
  //   • customers → the app's signup flow (external link)
  //   • venues    → the on-page venue sign-up form (#join)
  const customerJoinUrl = 'https://app.lupit.com.au/join';
  const ctaProps = audience === 'customer'
    ? { href: customerJoinUrl }
    : { href: '#join', onClick: (e) => { e.preventDefault(); const el = document.getElementById('join'); if (el) el.scrollIntoView({ behavior: 'smooth' }); } };

  return React.createElement('section', {
    id: 'top',
    style: { padding: '12px 24px 60px', position: 'relative', overflow: 'hidden' }
  },
    React.createElement('div', { className: 'container', style: { position: 'relative', zIndex: 1 } },
      React.createElement('div', {
        className: 'hero-grid',
        style: {
          display: 'grid',
          gridTemplateColumns: '1.05fr 1fr',
          gap: 20,
          alignItems: 'stretch',
        }
      },
        // LEFT column — copy block
        React.createElement(Reveal, { as: 'div',
          className: 'hero-copy-card',
          style: {
            background: 'var(--ivory)',
            borderRadius: 28,
            padding: 'clamp(28px, 5vw, 52px)',
            border: '1px solid var(--border-cream)',
            display: 'flex', flexDirection: 'column',
            justifyContent: 'space-between',
            position: 'relative', overflow: 'hidden',
          }
        },
          // Decorative dashed arc
          React.createElement('svg', {
            width: 300, height: 300, viewBox: '0 0 300 300',
            style: { position: 'absolute', right: -80, top: -80, opacity: 0.08 }
          },
            React.createElement('circle', { cx: 150, cy: 150, r: 140, fill: 'none', stroke: 'var(--terracotta)', strokeWidth: 1.5, strokeDasharray: '4 6' }),
            React.createElement('circle', { cx: 150, cy: 150, r: 110, fill: 'none', stroke: 'var(--sage)', strokeWidth: 1.5, strokeDasharray: '4 6' }),
          ),
          React.createElement('div', { style: { position: 'relative' } },
            React.createElement('div', { className: 'eyebrow', style: { marginBottom: 32 } },
              React.createElement('span', { className: 'dot' }),
              'LÜP Reuse Network',
            ),
            React.createElement('h1', {
              className: 'hero-headline',
              style: {
                fontFamily: 'var(--font-serif)',
                fontSize: 'clamp(33px, 3.9vw, 57px)',
                fontWeight: 500, lineHeight: 1.08,
                color: 'var(--charcoal)',
                marginBottom: 28,
                letterSpacing: '-0.02em',
                paddingBottom: 6,
              }
            },
              React.createElement('img', {
                src: 'assets/lup-logo.svg?v=2',
                alt: 'LÜP',
                style: {
                  height: '1em',
                  width: 'auto',
                  verticalAlign: 'text-bottom',
                  display: 'inline-block',
                }
              }),
              ' the reusable takeaway bowl that ',
              React.createElement('span', { style: { fontStyle: 'italic', color: 'var(--terracotta)' } }, 'eliminates single-use waste - for good.'),
            ),
            React.createElement('p', {
              style: {
                fontSize: 18, color: 'var(--stone)', lineHeight: 1.6,
                maxWidth: 460, marginBottom: 36,
              }
            },
              'Australia uses ',
              React.createElement('em', { className: 'hi' }, '3 billion single-use'),
              ' food containers a year. ',
              React.createElement('em', { className: 'hi' }, '95% end up in landfills'),
              ' including recyclable and compostable containers. Ditch single-use,',
              React.createElement('em', { className: 'hi' }, ' embrace reuse.'), 
            ),
          ),
          React.createElement('div', { style: { display: 'flex', gap: 12, alignItems: 'center', flexWrap: 'wrap' } },
            React.createElement('a', {
              className: 'btn btn-terracotta btn-cta-prominent',
              ...ctaProps,
              style: { borderRadius: 100 }
            }, 'Join the LÜP',
              React.createElement(IconArrowRight, { size: 16 }),
            ),
            // ─────────────────────────────────────────────────────────────
            // TRUST LINE — TEMPORARILY HIDDEN (not yet true)
            // TO REINSTATE: delete the opening "/*" line directly below
            // and the closing "*/" line just before the "// END TRUST LINE"
            // marker further down.
            // ─────────────────────────────────────────────────────────────
            /*
            React.createElement('div', { style: { display: 'flex', alignItems: 'center', marginLeft: 8 } },
              React.createElement('span', { style: { fontSize: 13, color: 'var(--stone)' } }, 'Trusted by 120+ AU venues'),
            ),
            */
            // END TRUST LINE (hidden)
          ),
        ),

        // RIGHT column — 4-card grid (audience-aware bottom row)
        // Layout (both audiences):
        //   Top-left:  bowl photo (shared)
        //   Top-right: "Better for the planet" stat (shared)
        //   Bottom-left:  Profitable for venues  /  Simple for customers
        //   Bottom-right: Easy for venues       /  Find a venue
        // All cards use minHeight: 220 so the right grid (1fr 1fr rows) renders
        // at the same overall size between audiences.
        React.createElement('div', {
          className: 'hero-right-grid',
          style: {
            display: 'grid',
            gridTemplateColumns: '1fr 1fr',
            gridTemplateRows: '1fr 1fr',
            gap: 16,
          }
        },
          // ─── TOP-LEFT (always): bowl photo ───
          React.createElement(Reveal, { as: 'div',
            delay: 1,
            className: 'img-hover card-hover',
            style: {
              background: 'var(--terracotta)',
              borderRadius: 24, overflow: 'hidden',
              position: 'relative',
              minHeight: 220,
              backgroundImage: 'url(assets/bowl-salad.webp)',
              backgroundSize: 'cover',
              backgroundPosition: 'center',
            }
          },
            React.createElement('div', {
              style: {
                position: 'absolute', inset: 0,
                background: 'linear-gradient(180deg, rgba(58,53,48,0) 50%, rgba(58,53,48,0.6) 100%)',
              }
            }),
            React.createElement('div', {
              style: {
                position: 'absolute', bottom: 16, left: 18, right: 18,
                color: 'var(--ivory)',
                fontFamily: 'var(--font-serif)',
                fontSize: 18, fontWeight: 500, lineHeight: 1.25,
              }
            }, 'Designed for reuse'),
          ),

          // ─── TOP-RIGHT (VENUE): "Meaningful reuse" 500+ stat ───
          audience === 'venue' && React.createElement(Reveal, { as: 'div',
            delay: 2,
            className: 'card-hover',
            style: {
              background: 'var(--ivory)',
              borderRadius: 24,
              padding: 22,
              border: '1px solid var(--border-cream)',
              display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
              minHeight: 220, position: 'relative', overflow: 'hidden',
            }
          },
            React.createElement('div', { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' } },
              React.createElement('span', {
                style: {
                  fontFamily: 'var(--font-serif)',
                  fontSize: 28, fontWeight: 500, letterSpacing: '-0.02em',
                  color: 'var(--terracotta)',
                }
              }, 'Meaningful reuse'),
            ),
            React.createElement('div', { style: { marginTop: 18 } },
              React.createElement('div', {
                style: {
                  fontFamily: 'var(--font-serif)', fontWeight: 500,
                  fontSize: 32, lineHeight: 1, letterSpacing: '-0.02em',
                  color: 'var(--charcoal)', marginBottom: 6,
                  display: 'flex', alignItems: 'center', gap: 10,
                }
              },
                '',
                React.createElement('img', {
                  src: 'assets/750ml_bowl_side_view.webp',
                  alt: 'LÜP bowl',
                  style: { height: 36, width: 'auto', display: 'block' }
                }),
                '=',
              ),
              React.createElement(AnimatedCounter, {
                target: '500+',
                className: 'hero-stat-big',
                style: {
                  fontFamily: 'var(--font-serif)',
                  fontSize: 68, fontWeight: 500,
                  color: 'var(--charcoal)', lineHeight: 0.95,
                  letterSpacing: '-0.02em',
                  display: 'inline-block',
                }
              }),
              React.createElement('div', {
                style: { fontSize: 16, color: 'var(--stone)', marginTop: 10, lineHeight: 1.5 }
              }, 'single-use containers saved'),
            ),
          ),

          // ─── TOP-RIGHT (CUSTOMER): "No deposit" ───
          audience === 'customer' && React.createElement(Reveal, { as: 'div',
            delay: 2,
            className: 'card-hover hero-anim-card',
            style: {
              background: 'var(--ivory)',
              borderRadius: 24,
              padding: 22,
              border: '1px solid var(--border-cream)',
              display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
              minHeight: 220, position: 'relative', overflow: 'hidden',
            }
          },
            // Decorative dashed corner arcs — visual rhyme with the venue cards.
            React.createElement('svg', {
              width: 200, height: 200, viewBox: '0 0 200 200',
              style: { position: 'absolute', right: -60, bottom: -60, opacity: 0.12, pointerEvents: 'none' }
            },
              React.createElement('circle', { cx: 100, cy: 100, r: 90, fill: 'none', stroke: 'var(--terracotta)', strokeWidth: 1.5, strokeDasharray: '3 5' }),
              React.createElement('circle', { cx: 100, cy: 100, r: 70, fill: 'none', stroke: 'var(--sage)', strokeWidth: 1.5, strokeDasharray: '3 5' }),
            ),
            React.createElement('div', { style: { display: 'flex', justifyContent: 'center', alignItems: 'flex-start', position: 'relative' } },
              React.createElement('span', {
                style: {
                  fontFamily: 'var(--font-serif)',
                  fontSize: 28, fontWeight: 500, letterSpacing: '-0.02em',
                  color: 'var(--terracotta)',
                }
              }, 'No deposit'),
            ),
            // Sage-tinted circular halo gives the icon weight + clear focus area.
            // The img inside has its own hover transform via the `icon-zero` class.
            React.createElement('div', {
              className: 'hero-icon-halo',
              style: {
                width: 77, height: 77, borderRadius: '50%',
                background: 'rgba(122,140,110,0.14)',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                alignSelf: 'center',
                position: 'relative',
              }
            },
              React.createElement('img', {
                src: 'assets/lup_zero_dollar.webp',
                alt: '',
                className: 'hero-customer-icon icon-zero',
                style: { height: 45, width: 'auto', objectFit: 'contain', display: 'block' }
              }),
            ),
            React.createElement('p', {
              style: { fontSize: 15, color: 'var(--stone)', lineHeight: 1.5, position: 'relative' }
            }, 'Borrow without tying up your cash.'),
          ),

          // ─── BOTTOM-LEFT (VENUE): "Profitable for venues" 20–50% stat ───
          audience === 'venue' && React.createElement(Reveal, { as: 'div',
            delay: 3,
            className: 'card-hover',
            style: {
              background: 'var(--sage)',
              color: 'var(--ivory)',
              borderRadius: 28, padding: 22,
              display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
              minHeight: 220,
            }
          },
            React.createElement('div', { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' } },
              React.createElement('span', {
                style: {
                  fontFamily: 'var(--font-serif)',
                  fontSize: 28, fontWeight: 500, letterSpacing: '-0.02em',
                  color: 'var(--ivory)',
                }
              }, 'Significant savings'),
            ),
            React.createElement('div', {},
              React.createElement('div', {
                className: 'hero-stat-med',
                style: {
                  fontFamily: 'var(--font-serif)',
                  fontSize: 48, fontWeight: 500, lineHeight: 0.95,
                  letterSpacing: '-0.02em',
                }
              },
                React.createElement(AnimatedCounter, { target: '20' }),
                '–',
                React.createElement(AnimatedCounter, { target: '50%' }),
              ),
              React.createElement('div', {
                style: { fontSize: 16, color: 'var(--ivory)', marginTop: 8, lineHeight: 1.5 }
              }, 'cheaper than disposables. Savings on every LÜP order.'),
            ),
          ),

          // ─── BOTTOM-LEFT (CUSTOMER): "Return anywhere" ───
          audience === 'customer' && React.createElement(Reveal, { as: 'div',
            delay: 3,
            className: 'card-hover hero-anim-card',
            style: {
              background: 'var(--ivory)',
              borderRadius: 24,
              padding: 22,
              border: '1px solid var(--border-cream)',
              display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
              minHeight: 220, position: 'relative', overflow: 'hidden',
            }
          },
            React.createElement('svg', {
              width: 200, height: 200, viewBox: '0 0 200 200',
              style: { position: 'absolute', right: -60, bottom: -60, opacity: 0.12, pointerEvents: 'none' }
            },
              React.createElement('circle', { cx: 100, cy: 100, r: 90, fill: 'none', stroke: 'var(--terracotta)', strokeWidth: 1.5, strokeDasharray: '3 5' }),
              React.createElement('circle', { cx: 100, cy: 100, r: 70, fill: 'none', stroke: 'var(--sage)', strokeWidth: 1.5, strokeDasharray: '3 5' }),
            ),
            React.createElement('div', { style: { display: 'flex', justifyContent: 'center', alignItems: 'flex-start', position: 'relative' } },
              React.createElement('span', {
                style: {
                  fontFamily: 'var(--font-serif)',
                  fontSize: 28, fontWeight: 500, letterSpacing: '-0.02em',
                  color: 'var(--terracotta)',
                }
              }, 'Return anywhere'),
            ),
            React.createElement('div', {
              className: 'hero-icon-halo',
              style: {
                width: 77, height: 77, borderRadius: '50%',
                background: 'rgba(122,140,110,0.14)',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                alignSelf: 'center',
                position: 'relative',
              }
            },
              React.createElement('img', {
                src: 'assets/return_icon.webp',
                alt: '',
                className: 'hero-customer-icon icon-return',
                style: { height: 45, width: 'auto', objectFit: 'contain', display: 'block' }
              }),
            ),
            React.createElement('p', {
              style: { fontSize: 15, color: 'var(--stone)', lineHeight: 1.5, position: 'relative' }
            }, 'Drop the bowl at any LÜP venue, not just where you got it.'),
          ),

          // ─── BOTTOM-RIGHT (VENUE): "Easy for venues" sage solid pills ───
          audience === 'venue' && React.createElement(Reveal, { as: 'div',
            delay: 4,
            className: 'card-hover',
            style: {
              background: 'var(--ivory)',
              borderRadius: 24,
              padding: 22,
              border: '1px solid var(--border-cream)',
              minHeight: 220,
              position: 'relative',
              display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
              overflow: 'hidden',
            }
          },
            React.createElement('svg', {
              width: 200, height: 200, viewBox: '0 0 200 200',
              style: { position: 'absolute', right: -60, bottom: -60, opacity: 0.12, pointerEvents: 'none' }
            },
              React.createElement('circle', { cx: 100, cy: 100, r: 90, fill: 'none', stroke: 'var(--terracotta)', strokeWidth: 1.5, strokeDasharray: '3 5' }),
              React.createElement('circle', { cx: 100, cy: 100, r: 70, fill: 'none', stroke: 'var(--sage)', strokeWidth: 1.5, strokeDasharray: '3 5' }),
            ),
            React.createElement('div', { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', position: 'relative' } },
              React.createElement('span', {
                style: {
                  fontFamily: 'var(--font-serif)',
                  fontSize: 28, fontWeight: 500, letterSpacing: '-0.02em',
                  color: 'var(--terracotta)',
                }
              }, 'Effortless setup'),
            ),
            React.createElement('div', {
              style: { display: 'flex', flexDirection: 'column', gap: 8, position: 'relative' }
            },
              [
                'Wash with regular dishes',
                '5-sec issue and return',
                'No special  equipment needed',
              ].map(label => React.createElement('div', {
                key: label,
                style: {
                  padding: '10px 16px',
                  background: 'var(--cream)',
                  borderColor: 'var(--border-cream)',
                  borderWidth: 1.5, borderStyle: 'solid',
                  borderRadius: 100,
                }
              },
                React.createElement('span', {
                  style: {
                    fontFamily: 'var(--font-serif)', fontSize: 16, fontWeight: 500, color: 'var(--charcoal)',
                    lineHeight: 1.25,
                  }
                }, label),
              )),
            ),
          ),

          // ─── BOTTOM-RIGHT (CUSTOMER): "Quick sign-up" ───
          audience === 'customer' && React.createElement(Reveal, { as: 'div',
            delay: 4,
            className: 'card-hover hero-anim-card',
            style: {
              background: 'var(--ivory)',
              borderRadius: 24,
              padding: 22,
              border: '1px solid var(--border-cream)',
              display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
              minHeight: 220, position: 'relative', overflow: 'hidden',
            }
          },
            React.createElement('svg', {
              width: 200, height: 200, viewBox: '0 0 200 200',
              style: { position: 'absolute', right: -60, bottom: -60, opacity: 0.12, pointerEvents: 'none' }
            },
              React.createElement('circle', { cx: 100, cy: 100, r: 90, fill: 'none', stroke: 'var(--terracotta)', strokeWidth: 1.5, strokeDasharray: '3 5' }),
              React.createElement('circle', { cx: 100, cy: 100, r: 70, fill: 'none', stroke: 'var(--sage)', strokeWidth: 1.5, strokeDasharray: '3 5' }),
            ),
            React.createElement('div', { style: { display: 'flex', justifyContent: 'center', alignItems: 'flex-start', position: 'relative' } },
              React.createElement('span', {
                style: {
                  fontFamily: 'var(--font-serif)',
                  fontSize: 28, fontWeight: 500, letterSpacing: '-0.02em',
                  color: 'var(--terracotta)',
                }
              }, 'Quick sign-up'),
            ),
            React.createElement('div', {
              className: 'hero-icon-halo',
              style: {
                width: 77, height: 77, borderRadius: '50%',
                background: 'rgba(122,140,110,0.14)',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                alignSelf: 'center',
                position: 'relative',
              }
            },
              React.createElement('img', {
                src: 'assets/lup_stopwatch_icon.webp',
                alt: '',
                className: 'hero-customer-icon icon-stopwatch',
                style: { height: 50, width: 'auto', objectFit: 'contain', display: 'block' }
              }),
            ),
            React.createElement('p', {
              style: { fontSize: 15, color: 'var(--stone)', lineHeight: 1.5, position: 'relative' }
            }, 'A few taps on your phone and you\'re good to go.'),
          ),
        ),
      ),
      // ─────────────────────────────────────────────────────────────
      // MARQUEE PARTNER STRIP — TEMPORARILY HIDDEN (not yet live)
      // Includes the "Trusted by venues across Australia" eyebrow and
      // the scrolling list of venue names.
      //
      // TO REINSTATE: delete the opening "/*" line directly below
      // and the closing "*/" line just before the "// END MARQUEE"
      // marker further down.
      // ─────────────────────────────────────────────────────────────
      /*
      React.createElement('div', { style: { marginTop: 44 } },
        React.createElement('div', {
          style: { textAlign: 'center', fontSize: 12, fontWeight: 500, letterSpacing: '0.8px', textTransform: 'uppercase', color: 'var(--silver)', marginBottom: 16, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 10 }
        },
          React.createElement('span', { className: 'live-pulse', style: { width: 6, height: 6, borderRadius: '50%', background: 'var(--terracotta)', display: 'inline-block' } }),
          'Trusted by venues across Australia',
        ),
        React.createElement('div', { className: 'marquee' },
          [0, 1].map(loop => React.createElement('div', { key: loop, className: 'marquee-track', 'aria-hidden': loop === 1 },
            ['Greenhouse Café', 'Bowl & Co.', 'Sunday Kitchen', 'Harbour Poke', 'Terra Roasters', 'Rise Bakery', 'Coastal Greens', 'Urban Bowl Co.', 'Green Leaf Kitchen'].map((n, i) =>
              React.createElement('span', {
                key: i,
                style: {
                  fontFamily: 'var(--font-serif)',
                  fontSize: 22, fontWeight: 500, fontStyle: 'italic',
                  color: 'var(--olive)', opacity: 0.75,
                  whiteSpace: 'nowrap',
                }
              }, n)
            ),
          )),
        ),
      ),
      */
      // END MARQUEE PARTNER STRIP (hidden)
    ),
  );
};