const SummaryPage = () => {
  const lineItems = [
    { name: 'Pizza Quattro Stagioni', qty: 1, price: 12.50, color: '#a16207', emoji: '🍄' },
    { name: 'Pizza Margherita',       qty: 2, price: 10.00, color: '#dc2626', emoji: '🍅' },
  ];
  const total = lineItems.reduce((s, i) => s + i.qty * i.price, 0);
  const totalQty = lineItems.reduce((s, i) => s + i.qty, 0);

  return (
    <div style={{ background: '#fef3c7', minHeight: '100%', color: '#1c1917', fontFamily: '"Inter", system-ui, sans-serif' }}>
      <BuilderHeader subtitle="Stap 2 · controleer je bestelling" />
      <Steps active={2} />

      <div style={{ padding: '32px 24px 0' }}>
        <h2 style={{ fontSize: 22, fontWeight: 900, margin: 0, letterSpacing: '-0.01em' }}>Besteloverzicht</h2>
        <p style={{ fontSize: 13, color: '#78716c', margin: '4px 0 0' }}>
          Klopt alles? Druk op betalen om je plekje vast te zetten.
        </p>
      </div>

      {/* Customer card */}
      <div style={{ padding: '20px 24px 0' }}>
        <div style={{ background: '#fff', borderRadius: 16, padding: 16, boxShadow: '0 3px 0 #fbbf24' }}>
          <div style={{ fontSize: 10, fontWeight: 800, color: '#a8a29e', letterSpacing: '0.18em', textTransform: 'uppercase' }}>Jouw gegevens</div>
          <div style={{ marginTop: 8, fontSize: 14 }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', padding: '4px 0' }}>
              <span style={{ color: '#78716c' }}>Naam</span><span style={{ fontWeight: 700 }}>Senne Visser</span>
            </div>
            <div style={{ display: 'flex', justifyContent: 'space-between', padding: '4px 0' }}>
              <span style={{ color: '#78716c' }}>Telefoon</span><span style={{ fontWeight: 700, fontVariantNumeric: 'tabular-nums' }}>06 16219191</span>
            </div>
            <div style={{ display: 'flex', justifyContent: 'space-between', padding: '4px 0' }}>
              <span style={{ color: '#78716c' }}>E-mail</span><span style={{ fontWeight: 700 }}>sennevisser@outlook.com</span>
            </div>
          </div>
        </div>
      </div>

      {/* Items card */}
      <div style={{ padding: '14px 24px 0' }}>
        <div style={{ background: '#fff', borderRadius: 16, padding: 16, boxShadow: '0 3px 0 #fbbf24' }}>
          <div style={{ fontSize: 10, fontWeight: 800, color: '#a8a29e', letterSpacing: '0.18em', textTransform: 'uppercase' }}>Bestelling</div>
          <div style={{ marginTop: 10, display: 'flex', flexDirection: 'column', gap: 10 }}>
            {lineItems.map((item, i) => (
              <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                <div style={{
                  width: 36, height: 36, borderRadius: 10, flexShrink: 0,
                  background: `linear-gradient(135deg, ${item.color}22, ${item.color}11)`,
                  display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 18,
                  border: `2px dashed ${item.color}44`,
                }}>{item.emoji}</div>
                <div style={{ flex: 1, fontSize: 14 }}>
                  <span style={{ fontWeight: 700 }}>{item.qty}× {item.name}</span>
                </div>
                <div style={{ fontWeight: 800, fontSize: 14, color: '#1c1917', fontVariantNumeric: 'tabular-nums' }}>
                  €{(item.qty * item.price).toFixed(2)}
                </div>
              </div>
            ))}
          </div>
          <div style={{ borderTop: '2px dashed #fbbf24', marginTop: 14, paddingTop: 12,
            display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
            <span style={{ fontSize: 14, fontWeight: 700, color: '#44403c' }}>Totaal</span>
            <span style={{ fontSize: 24, fontWeight: 900, color: '#ea580c', fontVariantNumeric: 'tabular-nums' }}>
              €{total.toFixed(2)}
            </span>
          </div>
        </div>
      </div>

      {/* Pickup time card with confirmed time emphasis */}
      <div style={{ padding: '14px 24px 0' }}>
        <div style={{
          background: '#1c1917', color: '#fef3c7', borderRadius: 16, padding: '18px 20px',
          boxShadow: '0 6px 0 #292524', position: 'relative', overflow: 'hidden',
        }}>
          <div style={{ position: 'absolute', right: -10, top: -10, fontSize: 80, opacity: 0.08 }}>🍕</div>
          <div style={{ fontSize: 10, fontWeight: 800, color: '#fbbf24', letterSpacing: '0.18em', textTransform: 'uppercase' }}>
            Ophaaltijd
          </div>
          <div style={{ marginTop: 12, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
            <div>
              <div style={{ fontSize: 10.5, color: '#a8a29e', letterSpacing: '0.06em', textTransform: 'uppercase' }}>Gewenst</div>
              <div style={{ fontSize: 22, fontWeight: 800, marginTop: 2, color: '#e7e5e4', fontVariantNumeric: 'tabular-nums' }}>18:50</div>
            </div>
            <div style={{ borderLeft: '1px dashed #44403c', paddingLeft: 12 }}>
              <div style={{ fontSize: 10.5, color: '#fbbf24', letterSpacing: '0.06em', textTransform: 'uppercase' }}>Geschatte tijd</div>
              <div style={{ fontSize: 28, fontWeight: 900, marginTop: 0, color: '#fbbf24', fontVariantNumeric: 'tabular-nums', letterSpacing: '-0.02em' }}>
                18:55
              </div>
              <div style={{ fontSize: 10, color: '#a8a29e', marginTop: 2 }}>indicatief</div>
            </div>
          </div>
          <div style={{ marginTop: 12, fontSize: 11.5, color: '#a8a29e', lineHeight: 1.5 }}>
            ⓘ 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>

      {/* CTAs */}
      <div style={{ padding: '24px 24px 28px' }}>
        <button style={{
          width: '100%', padding: '18px 22px', borderRadius: 16, border: 'none',
          background: '#16a34a', color: '#fff', fontSize: 16, fontWeight: 900, fontFamily: 'inherit',
          cursor: 'pointer', boxShadow: '0 6px 0 #15803d',
          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 }}>{totalQty}</span>
            Doorgaan naar betaling
          </span>
          <span style={{ fontVariantNumeric: 'tabular-nums' }}>€{total.toFixed(2)}</span>
        </button>
        <button style={{
          marginTop: 10, width: '100%', padding: '12px 0', borderRadius: 12, border: 'none',
          background: 'transparent', color: '#78716c', fontSize: 13, fontWeight: 600,
          cursor: 'pointer', textDecoration: 'underline', fontFamily: 'inherit',
        }}>← Terug en aanpassen</button>
      </div>
    </div>
  );
};

window.SummaryPage = SummaryPage;