const SuccessPage = () => {
  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);

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

      {/* Hero confirmation */}
      <div style={{ padding: '32px 24px 0', textAlign: 'center' }}>
        <div style={{
          width: 88, height: 88, borderRadius: '50%', background: '#16a34a', color: '#fff',
          display: 'inline-flex', alignItems: 'center', justifyContent: 'center', fontSize: 44, fontWeight: 900,
          boxShadow: '0 8px 0 #15803d, 0 12px 24px rgba(22,163,74,0.25)',
        }}>✓</div>
        <h2 style={{ fontSize: 30, fontWeight: 900, margin: '18px 0 0', letterSpacing: '-0.02em', color: '#15803d' }}>
          Betaling geslaagd!
        </h2>
        <p style={{ fontSize: 14, color: '#44403c', margin: '6px 0 0' }}>
          Bestelling <strong style={{ color: '#1c1917', fontVariantNumeric: 'tabular-nums' }}>#3SKTI3E3</strong> is bevestigd.
        </p>
      </div>

      {/* Big ready time card — the most important info */}
      <div style={{ padding: '24px 24px 0' }}>
        <div style={{
          background: '#1c1917', color: '#fef3c7', borderRadius: 20, padding: '24px 22px',
          boxShadow: '0 8px 0 #292524, 0 16px 32px rgba(0,0,0,0.15)',
          position: 'relative', overflow: 'hidden', textAlign: 'center',
        }}>
          <div style={{ fontSize: 11, color: '#a8a29e', textTransform: 'uppercase', letterSpacing: '0.18em' }}>
            Je bestelling is klaar om
          </div>
          <div style={{
            fontSize: 84, fontWeight: 900, color: '#fbbf24', fontVariantNumeric: 'tabular-nums',
            letterSpacing: '-0.04em', lineHeight: 1, margin: '10px 0 6px',
          }}>17:35</div>
          <div style={{ fontSize: 13, color: '#e7e5e4' }}>op zaterdag · 09 mei 2026</div>
          <div style={{
            marginTop: 18, paddingTop: 14, borderTop: '1px dashed #44403c',
            fontSize: 12, color: '#a8a29e', lineHeight: 1.5,
          }}>
            📍 Foodtruck Gouden Plakje · op het terras bij de pont
          </div>
        </div>
      </div>

      {/* Order summary 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 · op naam van Senne Visser
          </div>
          <div style={{ marginTop: 10, display: 'flex', flexDirection: 'column', gap: 8 }}>
            {lineItems.map((item, i) => (
              <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                <span style={{ fontSize: 18 }}>{item.emoji}</span>
                <div style={{ flex: 1, fontSize: 14 }}>
                  <span style={{ fontWeight: 700 }}>{item.qty}× {item.name}</span>
                </div>
                <div style={{ fontWeight: 700, fontSize: 14, color: '#44403c', fontVariantNumeric: 'tabular-nums' }}>
                  €{(item.qty * item.price).toFixed(2)}
                </div>
              </div>
            ))}
          </div>
          <div style={{ borderTop: '2px dashed #fbbf24', marginTop: 12, paddingTop: 10,
            display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
            <span style={{ fontSize: 13, fontWeight: 700, color: '#44403c' }}>Totaal betaald</span>
            <span style={{ fontSize: 18, fontWeight: 900, color: '#16a34a', fontVariantNumeric: 'tabular-nums' }}>
              €{total.toFixed(2)}
            </span>
          </div>
        </div>
      </div>

      <div style={{ padding: '14px 24px 0' }}>
        <div style={{
          background: '#fff7ed', border: '2px dashed #fdba74', borderRadius: 12, padding: '12px 14px',
          fontSize: 12.5, color: '#9a3412', display: 'flex', alignItems: 'center', gap: 10,
        }}>
          <span style={{ fontSize: 18 }}>✉️</span>
          Een bon is onderweg naar <strong>sennevisser@outlook.com</strong>
        </div>
      </div>

      <div style={{ padding: '24px 24px 32px', textAlign: 'center' }}>
        <div style={{ fontSize: 12, color: '#78716c', lineHeight: 1.5 }}>
          Vragen? Bel ons op <strong style={{ color: '#1c1917' }}>+31 6 31780849</strong><br/>
          of stuur een mail naar <strong style={{ color: '#1c1917' }}>bestelling@foodtruckgoudenplakje.nl</strong>
        </div>
      </div>
    </div>
  );
};

window.SuccessPage = SuccessPage;