// The Bowls — inline section, mobile-optimised. Audience-aware: venues see
// kitchen/service framing + bowl sizes; customers see everyday-use framing
// (food safety, durability, design) with no size details.
window.BowlsSection = function BowlsSection() {
  const { audience } = React.useContext(window.AudienceContext);
  const isVenue = audience === 'venue';

  // 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 = isVenue
    ? { href: '#join', onClick: e => { e.preventDefault(); const el = document.getElementById('join'); if (el) el.scrollIntoView({ behavior: 'smooth' }); } }
    : { href: customerJoinUrl };
  const ctaConfig = isVenue
    ? { headline: 'Want bowls in your venue?', body: 'Join the network in under 2 minutes.', buttonLabel: 'Join the LÜP' }
    : { headline: 'Want to LÜP your next meal?', body: 'Sign up in 10 seconds and start using LÜP bowls today.', buttonLabel: 'Join the LÜP' };

  const headlineLead = isVenue ? 'Built for ' : 'Built for ';
  const headlineAccent = isVenue ? 'real kitchens.' : 'everyday meals.';
  const subText = isVenue
    ? 'Multiple sizes. One lid. Every service. LÜP bowls slot into the workflow you already run — no retraining, no new gear, no drama.'
    : 'Sturdy, stylish, and made to last. LÜP bowls are food-safe, microwave- and dishwasher-friendly, and built to handle hundreds of meals — so nothing ends up in the bin.';

  const features = isVenue
    ? [
        { title: 'Dishwasher safe', desc: 'Washes alongside your regular dishes — no new equipment.', Icon: IconDishwasher },
        { title: 'Microwave safe', desc: 'Heat meals straight from the bowl. No transfer, no mess.', Icon: IconMicrowave },
        { title: 'Recyclable', desc: 'End-of-life bowls are recycled by LÜP.', Icon: IconRecycle },
        { title: 'BPA-free', desc: 'Food-safe and certified for hot and cold meals.', Icon: IconShield },
        { title: 'Stacks tight', desc: 'Nests flat in prep, storage, and stacks firmly for delivery.', Icon: IconStackTight },
        { title: '500+ cycle lifetime', desc: 'Each bowl replaces hundreds of single-use containers.', Icon: IconRepeat },
      ]
    : [
        { title: 'Food safe', desc: 'BPA-free and certified safe for hot and cold meals — eat with confidence.', Icon: IconShield },
        { title: 'Microwave safe', desc: 'Heat your meal straight from the bowl — no transfer, no mess.', Icon: IconMicrowave },
        { title: 'Dishwasher safe', desc: 'A quick rinse is all we ask. Returned bowls are properly cleaned by the venue.', Icon: IconDishwasher },
        { title: '500+ uses', desc: 'Each bowl replaces hundreds of single-use containers headed for landfill.', Icon: IconRepeat },
      ];

  return React.createElement('section', { id: 'bowls', style: { background: 'var(--parchment)' } },
    React.createElement('div', { className: 'container' },
      // Header
      React.createElement(Reveal, { as: 'div', style: { maxWidth: 760, marginBottom: 32 } },
        React.createElement('div', { className: 'eyebrow', style: { marginBottom: 18 } },
          React.createElement('span', { className: 'dot' }), 'The bowls'
        ),
        React.createElement('h2', {
          style: { fontSize: 'clamp(36px, 4vw, 56px)', lineHeight: 1.05, letterSpacing: '-0.02em', marginBottom: 16 }
        },
          headlineLead, React.createElement('span', { className: 'serif-accent' }, headlineAccent)
        ),
        React.createElement('p', { style: { fontSize: 17, color: 'var(--stone)', lineHeight: 1.6 } },
          subText
        ),
      ),

      // Size cards — venue-only. Customers don't pick or care about ml; we'd
      // rather give them more room for the everyday-use feature grid below.
      isVenue && React.createElement(Reveal, { as: 'div', delay: 1,
        className: 'grid-3-md-1',
        style: { display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 14, marginBottom: 16 }
      },
        [
          { size: '1000ml', use: 'The workhorse - perfect for main dishes' },
          { size: '750ml', use: 'The sidekick - ideal for smaller meals and sides', comingSoon: true },
        ].map(b => React.createElement('div', {
          key: b.size,
          className: b.comingSoon ? 'card' : 'card card-hover',
          style: b.comingSoon
            ? {
                padding: '22px 22px',
                background: 'rgba(58,53,48,0.06)',
                border: '1.5px dashed rgba(122,140,110,0.55)',
                boxShadow: 'none',
              }
            : { padding: '22px 22px' }
        },
          React.createElement('div', { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 8, gap: 12 } },
            React.createElement('div', {
              style: {
                fontFamily: 'var(--font-serif)', fontSize: 40, fontWeight: 500,
                color: b.comingSoon ? 'var(--silver)' : 'var(--terracotta)',
                lineHeight: 1, letterSpacing: '-0.02em',
              }
            }, b.size),
            b.comingSoon && React.createElement('span', {
              style: {
                fontSize: 11, fontWeight: 500, letterSpacing: '0.5px', textTransform: 'uppercase',
                color: 'var(--sage-dark)',
                background: 'rgba(122,140,110,0.18)',
                padding: '5px 11px', borderRadius: 100,
                whiteSpace: 'nowrap',
              }
            }, 'Coming soon'),
          ),
          React.createElement('div', {
            style: { fontSize: 14, color: b.comingSoon ? 'var(--silver)' : 'var(--stone)', lineHeight: 1.5 }
          }, b.use),
        )),
      ),

      // Feature grid — always 2 columns. Customer audience renders 2×2 (4 cards),
      // venue audience renders 2×3 (6 cards). The CSS class baseline is 2-col on
      // mobile; the tablet+ override in styles.css matches.
      React.createElement('div', {
        className: 'bowls-feature-grid',
        style: { display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 12 }
      },
        features.map((f, i) => React.createElement(Reveal, {
          key: f.title, delay: (i % 3) + 1,
          className: 'card card-hover',
          style: {
            padding: '18px 18px', display: 'flex', flexDirection: 'column', gap: 6,
            background: 'var(--ivory)', borderRadius: 16,
          }
        },
          React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: 10, marginBottom: 4 } },
            React.createElement('div', {
              style: {
                width: 40, height: 40, borderRadius: 10,
                background: 'rgba(122,140,110,0.14)',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                flexShrink: 0,
              }
            },
              React.createElement(f.Icon, { size: 26, color: 'var(--sage-dark)' }),
            ),
            React.createElement('h3', { style: { fontSize: 16, lineHeight: 1.2, fontFamily: 'var(--font-serif)', fontWeight: 500, color: 'var(--charcoal)' } }, f.title),
          ),
          React.createElement('p', { style: { fontSize: 14, color: 'var(--stone)', lineHeight: 1.5 } }, f.desc),
        )),
      ),

      // CTA strip
      React.createElement(Reveal, { as: 'div', delay: 2,
        style: {
          marginTop: 32, background: 'var(--charcoal)', color: 'var(--ivory)',
          borderRadius: 24, padding: '32px 28px',
          display: 'flex', justifyContent: 'space-between', alignItems: 'center',
          flexWrap: 'wrap', gap: 18, position: 'relative', overflow: 'hidden',
        }
      },
        React.createElement('div', { style: { position: 'relative', zIndex: 1, flex: '1 1 240px' } },
          React.createElement('h3', { style: { fontSize: 26, color: 'var(--ivory)', lineHeight: 1.25 } }, ctaConfig.headline),
          React.createElement('p', { style: { color: 'rgba(250,245,237,0.75)', marginTop: 6, fontSize: 15 } }, ctaConfig.body),
        ),
        React.createElement('a', {
          ...ctaProps,
          className: 'btn btn-terracotta',
          style: { padding: '14px 22px', fontSize: 15, borderRadius: 100, position: 'relative', zIndex: 1 }
        }, ctaConfig.buttonLabel, React.createElement(IconArrowRight, { size: 14 })),
      ),
    ),
  );
};