/* Desktop layouts — wider, two-column splits, big imagery */
const DesktopOrderPage = () => {
  const [items, setItems] = React.useState({ 1: 1, 2: 0, 3: 0, 4: 0, 5: 0 });
  const [time, setTime] = React.useState('18:00');
  const [emailReceipt, setEmailReceipt] = React.useState(false);

  const pizzas = [
    { id: 1, name: 'Margherita',       desc: 'Tomatensaus, mozzarella, basilicum, oregano',         price: 10.00, color: '#dc2626', emoji: '🍅', badge: 'Klassiek' },
    { id: 2, name: 'Salami',           desc: 'Tomatensaus, kaas, salami',                           price: 11.50, color: '#b91c1c', emoji: '🌶️', badge: 'Pittig' },
    { id: 3, name: 'Quattro Stagioni', desc: 'Ham, artisjok, champignons, olijven, kappertjes',     price: 12.50, color: '#a16207', emoji: '🍄', badge: 'Speciaal' },
    { id: 4, name: 'Rucola',           desc: 'Mozzarella, parmaham, Parmezaan, rucola',             price: 12.00, color: '#15803d', emoji: '🌿', badge: 'Verfijnd' },
    { id: 5, name: 'Napolitana',       desc: 'Olijven, ansjovis, kappertjes, Spaanse peper',        price: 12.00, color: '#1d4ed8', emoji: '🫒', badge: 'Pittig' },
  ];

  const total = pizzas.reduce((s, p) => s + p.price * (items[p.id] || 0), 0);
  const totalQty = Object.values(items).reduce((a, b) => a + b, 0);
  const inc = (id) => setItems({ ...items, [id]: Math.min(8, (items[id] || 0) + 1) });
  const dec = (id) => setItems({ ...items, [id]: Math.max(0, (items[id] || 0) - 1) });

  const allSlots = [];
  for (let h = 17; h <= 20; h++) {
    for (let m = 0; m < 60; m += 5) {
      if (h === 20 && m > 25) break;
      allSlots.push(`${String(h).padStart(2,'0')}:${String(m).padStart(2,'0')}`);
    }
  }
  const fullSlots = new Set(['17:30','18:00','18:05','18:10','18:30','19:00','19:15','19:20']);
  const slotsByHour = {};
  allSlots.forEach(s => {
    const h = s.slice(0,2);
    (slotsByHour[h] = slotsByHour[h] || []).push(s);
  });

  return (
    <div style={{ background: '#fef3c7', minHeight: '100%', color: '#1c1917', fontFamily: '"Inter", system-ui, sans-serif' }}>
      {/* Wider hero with horizontal layout */}
      <div style={{
        background: '#ea580c', color: '#fff', padding: '40px 48px 80px', position: 'relative',
        clipPath: 'polygon(0 0, 100% 0, 100% calc(100% - 32px), 50% 100%, 0 calc(100% - 32px))',
      }}>
        <div style={{ position: 'absolute', inset: 0, opacity: 0.1,
          backgroundImage: 'repeating-linear-gradient(45deg, #fff 0 2px, transparent 2px 14px)' }} />
        <div style={{ position: 'relative', maxWidth: 1100, margin: '0 auto', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <div>
            <div style={{
              display: 'inline-block', background: '#fff', color: '#ea580c',
              padding: '5px 14px', borderRadius: 100, fontSize: 11, fontWeight: 800,
              letterSpacing: '0.18em', textTransform: 'uppercase',
            }}>Gouden Plakje · elke zaterdagavond</div>
            <h1 style={{ fontSize: 56, fontWeight: 900, margin: '14px 0 0', lineHeight: 0.95, letterSpacing: '-0.03em', textShadow: '0 5px 0 #c2410c' }}>
              Pizza Zaterdag
            </h1>
            <div style={{ fontSize: 14.5, marginTop: 8, opacity: 0.95 }}>Bestel hieronder · betaal direct · ophalen op zaterdag</div>
          </div>
          <div style={{
            background: 'rgba(0,0,0,0.18)', borderRadius: 18, padding: '14px 18px',
            display: 'flex', alignItems: 'center', gap: 14, fontSize: 13,
          }}>
            <div style={{ fontSize: 36 }}>📍</div>
            <div>
              <div style={{ fontWeight: 800 }}>Foodtruck Gouden Plakje</div>
              <div style={{ opacity: 0.85 }}>Op het terras bij de pont</div>
            </div>
          </div>
        </div>
      </div>

      {/* Steps */}
      <div style={{ maxWidth: 1100, margin: '0 auto', padding: '0 48px', marginTop: -36, position: 'relative' }}>
        <div style={{
          background: '#fff', borderRadius: 20, padding: '14px 24px', boxShadow: '0 8px 0 #fbbf24, 0 12px 28px rgba(0,0,0,0.08)',
          display: 'flex', alignItems: 'center', justifyContent: 'space-between', fontSize: 12, fontWeight: 700,
        }}>
          <DStep n="1" label="Bestellen" active done={false} />
          <DStepline />
          <DStep n="2" label="Overzicht" active={false} />
          <DStepline />
          <DStep n="3" label="Betalen" active={false} />
          <DStepline />
          <DStep n="4" label="Klaar!" active={false} />
        </div>
      </div>

      {/* Two-column layout */}
      <div style={{ maxWidth: 1100, margin: '0 auto', padding: '40px 48px 0', display: 'grid', gridTemplateColumns: '1.5fr 1fr', gap: 32, alignItems: 'start' }}>
        {/* Left column: pizzas */}
        <div>
          <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 16 }}>
            <h2 style={{ fontSize: 28, fontWeight: 900, margin: 0, letterSpacing: '-0.01em' }}>Kies je pizza's</h2>
            <span style={{ fontSize: 13, color: '#78716c' }}>Max 8 pizza's per bestelling</span>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
            {pizzas.map(p => {
              const qty = items[p.id] || 0;
              const selected = qty > 0;
              return (
                <div key={p.id} style={{
                  background: '#fff', borderRadius: 16, padding: 18,
                  border: `2px solid ${selected ? p.color : 'transparent'}`,
                  boxShadow: selected ? `0 6px 0 ${p.color}` : '0 3px 0 #fbbf24',
                  position: 'relative',
                }}>
                  {selected && (
                    <div style={{
                      position: 'absolute', top: -8, right: -8, background: p.color, color: '#fff',
                      width: 30, height: 30, borderRadius: '50%', display: 'flex', alignItems: 'center', justifyContent: 'center',
                      fontWeight: 800, fontSize: 14, fontVariantNumeric: 'tabular-nums', boxShadow: '0 2px 6px rgba(0,0,0,0.15)',
                    }}>{qty}</div>
                  )}
                  <div style={{ display: 'flex', gap: 14, alignItems: 'center', marginBottom: 12 }}>
                    <div style={{
                      width: 64, height: 64, borderRadius: 14, flexShrink: 0,
                      background: `linear-gradient(135deg, ${p.color}22, ${p.color}11)`,
                      display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 32,
                      border: `2px dashed ${p.color}44`,
                    }}>{p.emoji}</div>
                    <div style={{ flex: 1, minWidth: 0 }}>
                      <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 2 }}>
                        <h3 style={{ fontSize: 16, fontWeight: 800, margin: 0 }}>{p.name}</h3>
                      </div>
                      <span style={{
                        fontSize: 9.5, padding: '2px 7px', borderRadius: 100, background: `${p.color}18`,
                        color: p.color, fontWeight: 800, letterSpacing: '0.08em', textTransform: 'uppercase',
                      }}>{p.badge}</span>
                    </div>
                  </div>
                  <p style={{ fontSize: 12.5, color: '#78716c', margin: '0 0 12px', lineHeight: 1.45, minHeight: 36 }}>{p.desc}</p>
                  <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                    <span style={{ fontSize: 18, fontWeight: 900, color: p.color, fontVariantNumeric: 'tabular-nums' }}>
                      €{p.price.toFixed(2)}
                    </span>
                    <DChunkyStepper qty={qty} onInc={() => inc(p.id)} onDec={() => dec(p.id)} color={p.color} />
                  </div>
                </div>
              );
            })}
          </div>
        </div>

        {/* Right column: time + customer + sticky cta */}
        <div style={{ position: 'sticky', top: 24, display: 'flex', flexDirection: 'column', gap: 18 }}>
          <div style={{ background: '#fff', borderRadius: 16, padding: 20, boxShadow: '0 3px 0 #fbbf24' }}>
            <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 12 }}>
              <h2 style={{ fontSize: 18, fontWeight: 900, margin: 0 }}>Wanneer haal je op?</h2>
              <span style={{ fontSize: 10.5, color: '#78716c', fontWeight: 600 }}>Elke 5 min</span>
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
              {Object.entries(slotsByHour).map(([h, slots]) => (
                <div key={h}>
                  <div style={{
                    fontSize: 9.5, fontWeight: 800, color: '#a8a29e', letterSpacing: '0.16em',
                    textTransform: 'uppercase', marginBottom: 5, fontVariantNumeric: 'tabular-nums',
                  }}>{h}:00 — {h}:55</div>
                  <div style={{ display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', gap: 4 }}>
                    {slots.map(s => {
                      const full = fullSlots.has(s);
                      const selected = time === s;
                      return (
                        <button key={s} onClick={() => !full && setTime(s)} disabled={full} style={{
                          padding: '8px 0', borderRadius: 8, fontSize: 11.5, fontWeight: 800, fontVariantNumeric: 'tabular-nums',
                          border: 'none', cursor: full ? 'not-allowed' : 'pointer', fontFamily: 'inherit',
                          background: full ? '#f5f5f4' : (selected ? '#ea580c' : '#fef3c7'),
                          color: full ? '#a8a29e' : (selected ? '#fff' : '#44403c'),
                          boxShadow: selected ? '0 3px 0 #c2410c' : 'none',
                          textDecoration: full ? 'line-through' : 'none',
                          opacity: full ? 0.55 : 1,
                        }}>{s}</button>
                      );
                    })}
                  </div>
                </div>
              ))}
            </div>
            <div style={{ marginTop: 10, display: 'flex', gap: 12, fontSize: 10, color: '#78716c', fontWeight: 600 }}>
              <span style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
                <span style={{ width: 9, height: 9, borderRadius: 2, background: '#ea580c' }} /> Gekozen
              </span>
              <span style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
                <span style={{ width: 9, height: 9, borderRadius: 2, background: '#fef3c7', border: '1px solid #fde68a' }} /> Vrij
              </span>
              <span style={{ display: 'flex', alignItems: 'center', gap: 4, textDecoration: 'line-through', color: '#a8a29e' }}>
                <span style={{ width: 9, height: 9, borderRadius: 2, background: '#f5f5f4' }} /> Vol
              </span>
            </div>
            <div style={{
              marginTop: 12, background: '#fef9c3', border: '2px dashed #facc15', borderRadius: 10,
              padding: '8px 10px', fontSize: 11, color: '#854d0e', lineHeight: 1.45,
            }}>
              ⓘ Je ophaaltijd is pas definitief na het afrekenen. Als het gekozen tijdslot ondertussen vol raakt, kan je definitieve ophaaltijd iets later worden.
            </div>
          </div>

          <div style={{ background: '#fff', borderRadius: 16, padding: 20, boxShadow: '0 3px 0 #fbbf24' }}>
            <h2 style={{ fontSize: 18, fontWeight: 900, margin: '0 0 12px' }}>Jouw gegevens</h2>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
              <DInput placeholder="Naam *" />
              <DInput placeholder="Telefoonnummer *" type="tel" />
              <textarea placeholder="Opmerking (optioneel)" style={{
                width: '100%', padding: '12px 14px', border: '1.5px solid #e7e5e4',
                borderRadius: 10, background: '#fafaf9',
                fontFamily: 'inherit', fontSize: 13.5, resize: 'none', minHeight: 56, outline: 'none',
              }} />
              <label onClick={() => setEmailReceipt(!emailReceipt)} style={{
                display: 'flex', alignItems: 'center', gap: 10, padding: '10px 12px', borderRadius: 10,
                background: emailReceipt ? '#fff7ed' : '#fafaf9', cursor: 'pointer', fontSize: 13, fontWeight: 600, color: '#44403c',
                border: `1.5px solid ${emailReceipt ? '#ea580c' : '#e7e5e4'}`,
              }}>
                <span style={{
                  width: 20, height: 20, borderRadius: 5, border: `2px solid ${emailReceipt ? '#ea580c' : '#d6d3d1'}`,
                  background: emailReceipt ? '#ea580c' : '#fff',
                  display: 'inline-flex', alignItems: 'center', justifyContent: 'center', color: '#fff', fontSize: 12,
                }}>{emailReceipt && '✓'}</span>
                Stuur me een bon per e-mail
              </label>
              {emailReceipt && (
                <DInput placeholder="E-mailadres *" type="email" />
              )}
            </div>
          </div>

          <button disabled={totalQty === 0} style={{
            width: '100%', padding: '18px 22px', borderRadius: 16, border: 'none',
            background: totalQty === 0 ? '#d6d3d1' : '#ea580c', color: '#fff',
            fontSize: 16, fontWeight: 900, fontFamily: 'inherit',
            cursor: totalQty === 0 ? 'not-allowed' : 'pointer',
            boxShadow: totalQty === 0 ? 'none' : '0 6px 0 #c2410c',
            display: 'flex', justifyContent: 'space-between', alignItems: 'center',
          }}>
            <span style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
              <span style={{ background: 'rgba(0,0,0,0.18)', padding: '4px 11px', borderRadius: 100, fontSize: 13, minWidth: 28, textAlign: 'center' }}>{totalQty}</span>
              Naar overzicht
            </span>
            <span style={{ fontVariantNumeric: 'tabular-nums' }}>€{total.toFixed(2)}</span>
          </button>
        </div>
      </div>
      <div style={{ height: 60 }} />
    </div>
  );
};

const DStep = ({ n, label, active }) => (
  <div style={{ display: 'flex', alignItems: 'center', gap: 8, opacity: active ? 1 : 0.4 }}>
    <span style={{
      width: 26, height: 26, borderRadius: '50%', background: active ? '#ea580c' : '#e7e5e4',
      color: active ? '#fff' : '#78716c', display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
      fontSize: 12, fontWeight: 800,
    }}>{n}</span>
    <span style={{ color: '#44403c', fontSize: 13 }}>{label}</span>
  </div>
);
const DStepline = () => <div style={{ flex: 1, height: 2, background: '#e7e5e4', margin: '0 8px' }} />;

const DInput = ({ placeholder, type = 'text' }) => (
  <input type={type} placeholder={placeholder} style={{
    width: '100%', padding: '12px 14px', border: '1.5px solid #e7e5e4',
    borderRadius: 10, background: '#fafaf9',
    fontFamily: 'inherit', fontSize: 13.5, outline: 'none', color: '#1c1917',
  }} />
);

const DChunkyStepper = ({ qty, onInc, onDec, color }) => (
  <div style={{ display: 'flex', alignItems: 'center', gap: 0 }}>
    <button onClick={onDec} disabled={qty === 0} style={{
      width: 30, height: 30, borderRadius: 9, border: 'none', cursor: qty === 0 ? 'not-allowed' : 'pointer',
      background: qty === 0 ? '#f5f5f4' : '#fed7aa', color: qty === 0 ? '#d6d3d1' : color,
      fontSize: 17, fontWeight: 800, fontFamily: 'inherit',
    }}>−</button>
    <div style={{ width: 30, textAlign: 'center', fontWeight: 800, fontSize: 15, fontVariantNumeric: 'tabular-nums', color: qty > 0 ? color : '#a8a29e' }}>
      {qty}
    </div>
    <button onClick={onInc} style={{
      width: 30, height: 30, borderRadius: 9, border: 'none', cursor: 'pointer',
      background: color, color: '#fff', fontSize: 17, fontWeight: 800, fontFamily: 'inherit',
    }}>+</button>
  </div>
);

window.DesktopOrderPage = DesktopOrderPage;