// Bake cards + menu grid with category filter

function BakeCard({ bake, onOrder, enableOrdering = true }) {
  // Icon mapping for bake types
  const iconMap = {
    cookie:  { icon: 'cookie',      label: 'Cookie'  },
    cake:    { icon: 'cake',         label: 'Cake'    },
    citrus:  { icon: 'citrus',       label: 'Loaf'    },
    coffee:  { icon: 'coffee',       label: 'Loaf'    },
    bread:   { icon: 'wheat',        label: 'Bread'   },
    bun:     { icon: 'croissant',    label: 'Bun'     },
    brownie: { icon: 'square',       label: 'Brownie' },
  };
  const ic = iconMap[bake.icon] || { icon: 'cake', label: 'Bake' };

  return (
    <div style={{
      background: '#FFFBF5', border: '1px solid #F0E0CE', borderRadius: 18,
      overflow: 'hidden', display: 'flex', flexDirection: 'column',
      minWidth: 0,
    }}>
      {/* Icon header — compact, no large image placeholder */}
      <div style={{
        padding: '20px 18px 12px',
        display: 'flex', alignItems: 'center', gap: 14,
        borderBottom: '1px solid #F0E0CE',
      }}>
        <div style={{
          width: 48, height: 48, borderRadius: 14, flexShrink: 0,
          background: '#F0E2D0', display: 'flex', alignItems: 'center', justifyContent: 'center',
          color: '#8B5A2B',
        }}>
          <i data-lucide={ic.icon} style={{ width: 24, height: 24 }}></i>
        </div>
        <div style={{ minWidth: 0 }}>
          <h3 style={{
            fontFamily: "'Fraunces', serif", fontSize: 18, fontWeight: 600,
            letterSpacing: '-0.01em', color: '#3D2817', margin: '0 0 2px',
            wordBreak: 'break-word',
          }}>{bake.name}</h3>
          <div style={{ fontSize: 12, color: '#8B6F4E' }}>{bake.category} · {bake.unit}</div>
        </div>
        <span style={{
          fontFamily: "'Fraunces', serif", fontSize: 18, fontWeight: 600,
          color: '#3D2817', whiteSpace: 'nowrap', marginLeft: 'auto', flexShrink: 0,
        }}>£{bake.price.toFixed(2)}</span>
      </div>

      {/* Body */}
      <div style={{ padding: '14px 18px 18px', display: 'flex', flexDirection: 'column', gap: 10, flex: 1 }}>
        <p style={{ fontSize: 14, color: '#8B6F4E', lineHeight: 1.5, margin: 0, flex: 1 }}>{bake.blurb}</p>
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
          {bake.tags?.map(t => (
            <span key={t} style={{
              fontSize: 11, padding: '4px 10px', background: '#FDF8F3',
              color: '#8B6F4E', borderRadius: 9999, border: '1px solid #F0E0CE',
            }}>{t}</span>
          ))}
        </div>
        {enableOrdering && (
          <button onClick={() => onOrder(bake)} style={{
            marginTop: 6, padding: '10px 14px',
            background: '#3D2817', color: '#FDF8F3', border: 'none',
            borderRadius: 10, fontSize: 13, fontWeight: 500, cursor: 'pointer',
            display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 6,
            transition: 'transform .15s ease', width: '100%',
          }}>
            Add to order <i data-lucide="plus" style={{ width: 15, height: 15 }}></i>
          </button>
        )}
      </div>
    </div>
  );
}

const DEMO_BAKES = [
  { id: 'b1', name: 'Brown butter choc chip',     category: 'Cookies', unit: 'box of 6',  price: 14.00, icon: 'cookie',  blurb: 'Rye flour, dark chocolate, flaky sea salt. Crisp edges, chewy middles.',       tags: ['Most loved']             },
  { id: 'b2', name: 'Pistachio shortbread',       category: 'Cookies', unit: 'box of 8',  price: 16.00, icon: 'cookie',  blurb: 'Ground Sicilian pistachios in a buttery, crumbly shortbread.',                 tags: ['Nuts']                   },
  { id: 'b3', name: 'Lemon drizzle loaf',         category: 'Loaves',  unit: '8 slices',  price: 12.00, icon: 'citrus',  blurb: 'Sharp lemon syrup soaks through, crunchy sugar crust on top.',                 tags: ['Vegetarian']             },
  { id: 'b4', name: 'Coffee walnut loaf',         category: 'Loaves',  unit: '8 slices',  price: 12.50, icon: 'coffee',  blurb: 'Strong espresso sponge, toasted walnuts, coffee buttercream.',                 tags: ['Contains nuts']          },
  { id: 'b5', name: 'Victoria sponge',            category: 'Cakes',   unit: '8" round',  price: 28.00, icon: 'cake',    blurb: 'Jam, vanilla buttercream, dusted with icing sugar. A proper classic.',         tags: ['Serves 10']              },
  { id: 'b6', name: 'Dark chocolate & raspberry', category: 'Cakes',   unit: '8" round',  price: 32.00, icon: 'cake',    blurb: 'Bittersweet chocolate sponge layered with raspberry compote.',                 tags: ['Serves 10', 'GF option'] },
];

function MenuGrid({ onOrder, onEnquire, enableOrdering = true }) {
  const [filter, setFilter] = React.useState('All');
  const cats = ['All', 'Cookies', 'Loaves', 'Cakes'];
  const filtered = filter === 'All' ? DEMO_BAKES : DEMO_BAKES.filter(b => b.category === filter);

  return (
    <section style={{ padding: '56px 24px', background: '#F0E2D0' }}>
      <div style={{ maxWidth: 1180, margin: '0 auto' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', flexWrap: 'wrap', gap: 16, marginBottom: 28 }}>
          <div>
            <h2 style={{ fontFamily: "'Fraunces', serif", fontSize: 40, fontWeight: 600, letterSpacing: '-0.02em', margin: '0 0 6px', color: '#3D2817' }}>
              This Week's Cake Shed.
            </h2>
            <div style={{ fontFamily: "'Fraunces', serif", fontStyle: 'italic', color: '#8B6F4E', fontSize: 15 }}>
              16th May 2026
            </div>
          </div>
          <div style={{ display: 'inline-flex', background: '#FFFBF5', padding: 4, borderRadius: 12, border: '1px solid #E8D5C4', flexShrink: 0 }}>
            {cats.map(c => (
              <button key={c} onClick={() => setFilter(c)} style={{
                padding: '8px 14px', background: filter === c ? '#3D2817' : 'transparent',
                color: filter === c ? '#FDF8F3' : '#8B6F4E',
                borderRadius: 8, fontSize: 13, fontWeight: 500, border: 'none', cursor: 'pointer',
                whiteSpace: 'nowrap',
              }}>{c}</button>
            ))}
          </div>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }} className="menu-grid-3">
          {filtered.map(b => <BakeCard key={b.id} bake={b} onOrder={onOrder} enableOrdering={enableOrdering} />)}
        </div>
      </div>
    </section>
  );
}

window.BakeCard = BakeCard;
window.MenuGrid = MenuGrid;