// How It Works — two parallel 3-step flows (For customers + For venues)
// sharing the same panel layout (cycle image + steps + closing banner).
window.HowItWorks = function HowItWorks() {
  // Audience-aware: V5 shows only the relevant sub-flow per audience.
  const { audience } = React.useContext(window.AudienceContext);

  // Flip to `true` to show per-step icons (img to the left of each step's text).
  // Currently off while testing how a text-only mobile layout reads.
  const SHOW_STEP_ICONS = false;

  // Path helper for the loop-back banner's inline refresh icon.
  const p = (d) => React.createElement('path', { d });

  const customerSteps = [
    { title: '1. Scan QR and ask for a LÜP bowl', desc: 'Sign-up in seconds and ask to LÜP your meal. No app required.', img: 'assets/1_takeaway_in_lup.webp' },
    { title: '2. Confirm bowls and go', desc: 'Count the number of bowls you receive and take your meal away. $0 upfront.', img: 'assets/2_return_bowl.webp' },
    { title: '3. Return anywhere', desc: 'Drop bowls off at any LÜP venue. Free if returned within 7 days, $5 per bowl if you choose to keep it.', img: 'assets/3_wash_and_reuse.webp' },
  ];

  const venueSteps = [
    { num: 0, title: 'Join the LÜP', desc: 'Order bowls and receive a counter QR, signage, and a one-page staff guide. No new hardware.' },
    { num: 1, title: 'Serve in LÜP bowls', desc: 'Customers scan, confirm the count, and take their meal in a LÜP bowl. No cash, no deposits.' },
    { num: 2, title: 'Receive returned bowls', desc: 'Accept bowls from anyone — even customers who borrowed elsewhere. Stock flows back automatically.' },
    { num: 3, title: 'Wash, reuse and save', desc: 'A small fee per bowl handed out — 20–60% cheaper than disposables, with the sustainability story built in.' },
  ];

  // Sub-section title block ("For customers" / "For venues")
  const renderSubTitle = (text) =>
    React.createElement(Reveal, { as: 'div', style: { textAlign: 'center', marginTop: 56, marginBottom: 24 } },
      React.createElement('h3', {
        style: {
          fontFamily: 'var(--font-serif)',
          fontSize: 'clamp(28px, 3.2vw, 38px)',
          fontWeight: 500,
          color: 'var(--charcoal)',
          lineHeight: 1.1,
          letterSpacing: '-0.01em',
        }
      }, text),
    );

  // The flow panel — 3 steps inside a parchment card. The shared cycle
  // illustration now lives once at the top of the section.
  const renderFlowPanel = (steps, panelKey) =>
    React.createElement(Reveal, { delay: 1, as: 'div',
      key: panelKey,
      className: 'stack-md',
      style: {
        position: 'relative',
        padding: '36px 36px',
        background: 'var(--parchment)',
        borderRadius: 32,
        border: '1px solid var(--border-cream)',
      }
    },
      React.createElement('div', { style: { display: 'flex', flexDirection: 'column', gap: 14 } },
        steps.map((s, i) => React.createElement(Reveal, {
          key: s.title,
          delay: i + 1,
          className: 'card-hover',
          style: {
            background: 'var(--ivory)',
            borderRadius: 18,
            padding: '22px 24px',
            border: '1px solid var(--border-cream)',
            display: 'grid',
            gridTemplateColumns: SHOW_STEP_ICONS ? 'auto 1fr' : '1fr',
            gap: 18,
            alignItems: 'center',
            position: 'relative',
          }
        },
          SHOW_STEP_ICONS && React.createElement('img', {
            src: s.img, alt: '',
            className: 'howit-step-img',
            style: {
              flexShrink: 0, objectFit: 'contain', display: 'block',
            }
          }),
          React.createElement('div', {},
            React.createElement('h3', {
              style: { fontFamily: 'var(--font-serif)', fontSize: 'clamp(22px, 1.8vw, 25px)', fontWeight: 500, color: 'var(--sage)', marginBottom: 8, lineHeight: 1.25 }
            }, s.title),
            s.bullets
              ? React.createElement('ul', {
                  style: {
                    margin: '4px 0 0', paddingLeft: 20,
                    fontSize: 16, color: 'var(--stone)', lineHeight: 1.55,
                    listStyle: 'disc',
                  }
                },
                  s.bullets.map((b, j) =>
                    React.createElement('li', { key: j, style: { marginBottom: 6 } },
                      React.createElement('strong', { style: { color: 'var(--terracotta)', fontWeight: 600 } }, b.lead),
                      b.text,
                    )
                  )
                )
              : React.createElement('p', {
                  style: { fontSize: 16, color: 'var(--stone)', lineHeight: 1.6 }
                }, s.desc),
          ),
        )),
      ),
    );

  // Venue panel — a single parchment box (like the customer renderFlowPanel):
  // a one-time "setup" step on top (sage gear badge, no number), then the 3
  // numbered steps of the recurring LÜP cycle below.
  const renderVenuePanel = (steps, panelKey) => {
    const admin = steps.find(s => s.num === 0);
    const cycle = steps.filter(s => s.num !== 0);

    const refreshIcon = React.createElement('svg', {
      viewBox: '0 0 24 24', width: 14, height: 14,
      fill: 'none', stroke: 'currentColor', strokeWidth: 2.2, strokeLinecap: 'round', strokeLinejoin: 'round',
    },
      p('M3 12a9 9 0 0 1 15.5-6.3L21 8'),
      React.createElement('polyline', { points: '21 3 21 8 16 8' }),
      p('M21 12a9 9 0 0 1-15.5 6.3L3 16'),
      React.createElement('polyline', { points: '3 21 3 16 8 16' }),
    );

    // One ivory step card: a left badge + (title + description).
    const stepCard = (badge, title, titleColor, desc, key, delay, tag) =>
      React.createElement(Reveal, { as: 'div', key, delay, className: 'card-hover',
        style: {
          background: 'var(--ivory)', border: '1px solid var(--border-cream)',
          borderRadius: 18, padding: '22px 24px',
          display: 'flex', gap: 18, alignItems: 'flex-start',
        }
      },
        badge,
        React.createElement('div', { style: { flex: 1, minWidth: 0 } },
          tag,
          React.createElement('h3', {
            style: {
              fontFamily: 'var(--font-serif)', fontWeight: 500,
              fontSize: 'clamp(20px, 1.8vw, 24px)', color: titleColor,
              lineHeight: 1.2, letterSpacing: '-0.01em', marginBottom: 6,
            }
          }, title),
          React.createElement('p', { style: { fontSize: 16, color: 'var(--stone)', lineHeight: 1.6 } }, desc),
        ),
      );

    const roundBadge = (bg, content) => React.createElement('div', {
      style: {
        flexShrink: 0, width: 44, height: 44, borderRadius: '50%',
        background: bg, color: 'var(--ivory)',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        fontFamily: 'var(--font-serif)', fontWeight: 500, fontSize: 24, lineHeight: 1,
      }
    }, content);

    return React.createElement(Reveal, { delay: 1, as: 'div', key: panelKey,
      style: {
        position: 'relative', padding: '36px 36px',
        background: 'var(--parchment)', borderRadius: 32,
        border: '1px solid var(--border-cream)', maxWidth: 820, margin: '0 auto',
      }
    },
      // One-time setup step — compact, light-sage, deliberately less prominent
      // than the numbered cycle cards. The "one-time setup" eyebrow is signal
      // enough, so no badge/icon and no bold colours.
      admin && React.createElement(Reveal, { as: 'div', delay: 1,
        style: {
          background: 'var(--ivory)',
          border: '1.5px solid rgba(122,140,110,0.45)',
          borderRadius: 14, padding: '14px 18px',
        }
      },
        React.createElement('div', {
          style: {
            fontSize: 11, fontWeight: 600, letterSpacing: '0.8px',
            textTransform: 'uppercase', color: 'var(--sage-dark)', marginBottom: 6,
          }
        }, 'One-time setup'),
        React.createElement('h3', {
          style: {
            fontFamily: 'var(--font-serif)', fontWeight: 500,
            fontSize: 18, color: 'var(--sage-dark)',
            lineHeight: 1.25, letterSpacing: '-0.01em', marginBottom: 4,
          }
        }, admin.title),
        React.createElement('p', { style: { fontSize: 15, color: 'var(--stone)', lineHeight: 1.55 } }, admin.desc),
      ),

      // Divider into the recurring cycle.
      React.createElement('div', {
        style: { display: 'flex', alignItems: 'center', gap: 12, margin: '22px 2px 18px' }
      },
        React.createElement('div', { style: { flex: 1, borderTop: '1.5px dashed rgba(122,140,110,0.45)' } }),
        React.createElement('span', {
          style: {
            display: 'inline-flex', alignItems: 'center', gap: 7,
            fontSize: 12, fontWeight: 600, letterSpacing: '0.8px',
            textTransform: 'uppercase', color: 'var(--terracotta)',
          }
        }, refreshIcon, 'The LÜP cycle'),
        React.createElement('div', { style: { flex: 1, borderTop: '1.5px dashed rgba(122,140,110,0.45)' } }),
      ),

      // The 3 recurring cycle steps — terracotta number badge + title + desc.
      React.createElement('div', { style: { display: 'flex', flexDirection: 'column', gap: 14 } },
        cycle.map((s, i) => stepCard(
          roundBadge('var(--terracotta)', s.num),
          s.title, 'var(--terracotta)', s.desc, s.num, i + 2,
        )),
      ),

      // Loop-back note — the cycle repeats.
      React.createElement('p', {
        style: {
          marginTop: 18, textAlign: 'center',
          fontFamily: 'var(--font-serif)', fontStyle: 'italic',
          fontSize: 'clamp(20px, 1.8vw, 24px)', color: 'var(--stone)', lineHeight: 1.4,
        }
      },
        'Back to ',
        React.createElement('span', { style: { color: 'var(--terracotta)' } }, 'step 1'),
        ' — bowls keep flowing, you keep saving.',
      ),
    );
  };

  return React.createElement('section', { id: 'how', style: { background: 'var(--ivory)', borderTop: '1px solid var(--border-cream)' } },
    React.createElement('div', { className: 'container' },
      // Header
      React.createElement(Reveal, { as: 'div', className: 'stack-md', style: { display: 'grid', gridTemplateColumns: '1fr 1.1fr', gap: 60, alignItems: 'end', marginBottom: 56 } },
        React.createElement('div', {},
          React.createElement('div', { className: 'eyebrow', style: { marginBottom: 22 } },
            React.createElement('span', { className: 'dot' }), 'How it works'
          ),
          React.createElement('h2', {
            style: { fontSize: 'clamp(36px, 4vw, 56px)', lineHeight: 1.05, letterSpacing: '-0.02em' }
          },
            'Australia\'s reusable takeaway', React.createElement('br'),
            'container system — ', React.createElement('span', { className: 'serif-accent' }, 'built for scale.'),
          ),
        ),
        React.createElement('div', {},
          React.createElement('p', { style: { fontSize: 17, color: 'var(--stone)', lineHeight: 1.6, maxWidth: 480 } },
            'A simple three-step loop between hospitality venues and customers. ',
            React.createElement('em', { className: 'hi' }, 'Simple. Scalable. Sustainable.'),
          ),
        ),
      ),

      // Section-level flow illustration — each audience gets its own cycle
      // image (venue: wash/reuse/save loop; customer: scan → confirm → return).
      React.createElement(Reveal, { as: 'div', delay: 1,
        style: { display: 'flex', justifyContent: 'center', marginBottom: 24 }
      },
        React.createElement('img', {
          src: audience === 'venue' ? 'assets/Lup cycle w text.webp' : 'assets/LUP cycle - customer.png',
          alt: audience === 'venue'
            ? 'LÜP cycle: 1. Takeaway in LÜP, 2. Return bowl, 3. Wash, Reuse & Save'
            : 'LÜP customer flow: 1. Scan QR, 2. Confirm bowls, 3. Return anywhere',
          style: {
            width: '100%',
            // Customer cycle renders ~10% smaller; venue webp keeps its size.
            maxWidth: audience === 'venue' ? 520 : 468,
            height: 'auto',
            display: 'block',
            // Venue webp's white box is knocked out via multiply; the customer
            // PNG is already transparent, so it needs no blend.
            mixBlendMode: audience === 'venue' ? 'multiply' : 'normal',
          }
        }),
      ),

      // Show only the sub-flow that matches the current audience.
      // The "For customers" / "For venues" sub-title is implied by the
      // audience toggle in the nav, so it's omitted here.
      audience === 'customer' && renderFlowPanel(customerSteps, 'customers'),
      audience === 'venue' && renderVenuePanel(venueSteps, 'venues'),

      // Section-level closing banner
      React.createElement(Reveal, { as: 'div', delay: 1,
        style: { display: 'flex', justifyContent: 'center', marginTop: 56 }
      },
        React.createElement('div', {
          style: {
            padding: '14px 28px',
            display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 10,
            background: 'rgba(196,121,93,0.10)',
            borderRadius: 100,
            border: '1px dashed rgba(196,121,93,0.35)',
          }
        },
          React.createElement('span', {
            style: { fontFamily: 'var(--font-serif)', fontSize: 24, color: 'var(--terracotta)', fontWeight: 500, fontStyle: 'italic' }
          }, 'A better way to takeaway.'),
        ),
      ),
    ),
  );
};