function OrderCard({ item }) {
  const { Button, Badge, Card } = window.LittleOliveStreetDesignSystem_65d760;
  const [flavorIdx, setFlavorIdx] = React.useState(0);
  const [sizeIdx, setSizeIdx] = React.useState(0);
  const [qty, setQty] = React.useState(1);
  const price = item.sizes[sizeIdx].price;

  const size = item.sizes[sizeIdx];
  const flavor = item.flavors[flavorIdx];
  // Include flavor + size in the id so different combos of the same dessert
  // land as separate cart lines instead of merging into one.
  const snipcartId = item.id + '-' + flavor.replace(/\s+/g, '-').toLowerCase() + '-' + size.label.replace(/\s+/g, '-').toLowerCase();

  function Icon({ name, size = 16, color }) {
    const pascal = name.split('-').map((w) => w.charAt(0).toUpperCase() + w.slice(1)).join('');
    const node = window.lucide && window.lucide.icons[pascal];
    if (!node) return null;
    const el = window.lucide.createElement(node);
    el.setAttribute('width', size);
    el.setAttribute('height', size);
    el.setAttribute('stroke', color || 'currentColor');
    return <span style={{ width: size, height: size, display: 'flex', flexShrink: 0, color }} dangerouslySetInnerHTML={{ __html: el.outerHTML }} />;
  }

  return (
    <Card padding="0" style={{ overflow: 'hidden', display: 'flex', flexDirection: 'column' }}>
      <img src={item.photo} style={{ width: '100%', height: 150, objectFit: 'cover', display: 'block' }} />
      <div style={{ padding: 20, display: 'flex', flexDirection: 'column', gap: 14, flex: 1 }}>
        <div>
          <div style={{ font: 'var(--text-display-sm)', color: 'var(--text-primary)' }}>{item.name}</div>
          <div style={{ font: 'var(--text-body-sm)', color: 'var(--text-secondary)', marginTop: 4 }}>{item.desc}</div>
        </div>

        {item.flavors.length > 1 && (
          <div>
            <div style={{ font: 'var(--text-label)', color: 'var(--text-secondary)', marginBottom: 6 }}>Flavor</div>
            <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
              {item.flavors.map((f, i) => (
                <span
                  key={f}
                  onClick={() => setFlavorIdx(i)}
                  style={{
                    padding: '5px 12px', borderRadius: 'var(--radius-pill)', fontSize: 12.5, fontFamily: 'var(--font-body)',
                    fontWeight: 500, cursor: 'pointer',
                    background: flavorIdx === i ? 'var(--accent-primary)' : 'var(--tint-blush)',
                    color: flavorIdx === i ? '#fff' : 'var(--accent-primary)',
                  }}
                >
                  {f}
                </span>
              ))}
            </div>
          </div>
        )}
        {item.customFlavorNote && (
          <div style={{ font: 'var(--text-body-sm)', color: 'var(--text-secondary)', fontStyle: 'italic', marginTop: -8 }}>
            Want a custom flavor? Use custom order form.
          </div>
        )}

        <div>
          <div style={{ font: 'var(--text-label)', color: 'var(--text-secondary)', marginBottom: 6 }}>Size</div>
          <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
            {item.sizes.map((s, i) => (
              <span
                key={s.label}
                onClick={() => setSizeIdx(i)}
                style={{
                  padding: '5px 12px', borderRadius: 'var(--radius-pill)', fontSize: 12.5, fontFamily: 'var(--font-body)',
                  fontWeight: 500, cursor: 'pointer',
                  background: sizeIdx === i ? 'var(--accent-sage)' : 'var(--tint-sage)',
                  color: sizeIdx === i ? '#fff' : 'var(--accent-sage)',
                }}
              >
                {s.label}
              </span>
            ))}
          </div>
        </div>

        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
          <div style={{ font: 'var(--text-label)', color: 'var(--text-secondary)' }}>Quantity</div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
            <span
              onClick={() => setQty((q) => Math.max(1, q - 1))}
              style={{
                width: 26, height: 26, borderRadius: '50%', display: 'flex', alignItems: 'center', justifyContent: 'center',
                background: 'var(--tint-sage)', color: 'var(--accent-sage)', fontWeight: 600, cursor: 'pointer', userSelect: 'none',
              }}
            >
              −
            </span>
            <span style={{ font: 'var(--text-body-md)', color: 'var(--text-primary)', minWidth: 16, textAlign: 'center' }}>{qty}</span>
            <span
              onClick={() => setQty((q) => q + 1)}
              style={{
                width: 26, height: 26, borderRadius: '50%', display: 'flex', alignItems: 'center', justifyContent: 'center',
                background: 'var(--tint-sage)', color: 'var(--accent-sage)', fontWeight: 600, cursor: 'pointer', userSelect: 'none',
              }}
            >
              +
            </span>
          </div>
        </div>

        <div style={{ marginTop: 'auto', display: 'flex', alignItems: 'center', justifyContent: 'space-between', paddingTop: 8, borderTop: '1px solid var(--border-hairline)' }}>
          <div>
            <div style={{ font: 'var(--text-display-sm)', color: 'var(--accent-primary)' }}>${price}</div>
          </div>
          <Button
            variant="primary"
            size="sm"
            className="snipcart-add-item"
            data-item-id={snipcartId}
            data-item-price={price}
            data-item-url="/products/"
            data-item-name={item.name}
            data-item-description={item.desc}
            data-item-image={item.photo}
            data-item-quantity={qty}
            data-item-custom1-name="Flavor"
            data-item-custom1-type="readonly"
            data-item-custom1-value={flavor}
            data-item-custom2-name="Size"
            data-item-custom2-type="readonly"
            data-item-custom2-value={size.label}
            onClick={() => setQty(1)}
          >
            Add to cart
          </Button>
        </div>
      </div>
    </Card>
  );
}

function OrderNowPage({ setPage }) {
  const { Badge } = window.LittleOliveStreetDesignSystem_65d760;
  const { RooflineDivider } = window.LittleOliveStreetDesignSystem_65d760;

  return (
    <div>
      <div style={{ padding: `64px var(--page-gutter) 32px`, textAlign: 'center', maxWidth: 720, margin: '0 auto' }}>
        <div style={{ marginBottom: 16 }}><Badge tone="sage">Order Now</Badge></div>
        <h1 style={{ font: 'var(--text-display-lg)', color: 'var(--text-primary)', margin: '0 0 14px' }}>
          Insanely delectable.<br></br>Every time.
        </h1>
        <p style={{ font: 'var(--text-body-md)', color: 'var(--text-secondary)' }}>
          Mix and match flavors and sizes!<br></br>All orders are available for pickup in Sugar Land, TX<br></br>within 24 hours after order confirmation.
        </p>
      </div>

      <div className="los-grid-4" style={{
        maxWidth: 'var(--container-max)', margin: '0 auto', padding: `32px var(--page-gutter) 64px`,
        gridTemplateColumns: 'repeat(4, 1fr)', gap: 20,
      }}>
        {window.LOS_MENU.map((item) => <OrderCard key={item.id} item={item} />)}
      </div>

      <RooflineDivider peakCount={20} height={36} />

      <div style={{ maxWidth: 'var(--container-narrow)', margin: '0 auto', padding: `56px var(--page-gutter)`, textAlign: 'center' }}>
        <h2 style={{ font: 'var(--text-display-sm)', color: 'var(--text-primary)', margin: '0 0 10px' }}>Planning something bigger?</h2>
        <p style={{ font: 'var(--text-body-md)', color: 'var(--text-secondary)', marginBottom: 20 }}>
          Birthdays, showers, weddings, and office events get a custom order — themed, sized to your headcount, made to order.
        </p>
        <span onClick={() => setPage('custom')} style={{ font: 'var(--text-label)', color: 'var(--accent-primary)', cursor: 'pointer' }}>
          Start a custom order →
        </span>
      </div>
    </div>
  );
}