/* Desktop summary + success — centered card, more breathing room */
const DesktopSummaryPage = () => {
  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' }}>
      <DesktopHero subtitle="Stap 2 · controleer je bestelling" />
      <DesktopStepsRow active={2} />

      <div style={{ maxWidth: 720, margin: '40px auto 0', padding: '0 48px' }}>
        <h2 style={{ fontSize: 32, fontWeight: 900, margin: 0, letterSpacing: '-0.02em' }}>Besteloverzicht</h2>
        <p style={{ fontSize: 14, color: '#78716c', margin: '6px 0 0' }}>
          Klopt alles? Druk op betalen om je plekje vast te zetten.
        </p>

        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16, marginTop: 22 }}>
          <div style={{ background: '#fff', borderRadius: 16, padding: 20, boxShadow: '0 3px 0 #fbbf24' }}>
            <div style={{ fontSize: 10, fontWeight: 800, color: '#a8a29e', letterSpacing: '0.18em', textTransform: 'uppercase' }}>Gegevens</div>
            <div style={{ marginTop: 10, fontSize: 14 }}>
              <Row label="Naam" value="Senne Visser" />
              <Row label="Telefoon" value="06 16219191" tabular />
              <Row label="E-mail" value="sennevisser@outlook.com" />
            </div>
          </div>
          <div style={{
            background: '#1c1917', color: '#fef3c7', borderRadius: 16, padding: 20,
            boxShadow: '0 6px 0 #292524', position: 'relative', overflow: 'hidden',
          }}>
            <div style={{ fontSize: 10, fontWeight: 800, color: '#fbbf24', letterSpacing: '0.18em', textTransform: 'uppercase' }}>Ophaaltijd</div>
            <div style={{ marginTop: 10, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
              <div>
                <div style={{ fontSize: 10, color: '#a8a29e', textTransform: 'uppercase', letterSpacing: '0.06em' }}>Gewenst</div>
                <div style={{ fontSize: 22, fontWeight: 800, color: '#e7e5e4', fontVariantNumeric: 'tabular-nums', marginTop: 2 }}>18:50</div>
              </div>
              <div style={{ borderLeft: '1px dashed #44403c', paddingLeft: 10 }}>
                <div style={{ fontSize: 10, color: '#fbbf24', textTransform: 'uppercase', letterSpacing: '0.06em' }}>Geschatte tijd</div>
                <div style={{ fontSize: 28, fontWeight: 900, color: '#fbbf24', fontVariantNumeric: 'tabular-nums', letterSpacing: '-0.02em' }}>18:55</div>
              </div>
            </div>
            <div style={{ marginTop: 10, fontSize: 11, 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>

        <div style={{ marginTop: 16, background: '#fff', borderRadius: 16, padding: 20, boxShadow: '0 3px 0 #fbbf24' }}>
          <div style={{ fontSize: 10, fontWeight: 800, color: '#a8a29e', letterSpacing: '0.18em', textTransform: 'uppercase' }}>Bestelling</div>
          <div style={{ marginTop: 12, display: 'flex', flexDirection: 'column', gap: 10 }}>
            {lineItems.map((item, i) => (
              <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                <div style={{
                  width: 40, height: 40, borderRadius: 10, flexShrink: 0,
                  background: `linear-gradient(135deg, ${item.color}22, ${item.color}11)`,
                  display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 20,
                  border: `2px dashed ${item.color}44`,
                }}>{item.emoji}</div>
                <div style={{ flex: 1, fontSize: 14.5, fontWeight: 700 }}>{item.qty}× {item.name}</div>
                <div style={{ fontWeight: 800, fontSize: 14.5, 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: 28, fontWeight: 900, color: '#ea580c', fontVariantNumeric: 'tabular-nums' }}>€{total.toFixed(2)}</span>
          </div>
        </div>

        <button style={{
          marginTop: 20, width: '100%', padding: '20px 24px', 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 style={{ height: 48 }} />
      </div>
    </div>
  );
};

const DesktopSuccessPage = () => {
  const lineItems = [
    { name: 'Pizza Quattro Stagioni', qty: 1, price: 12.50, emoji: '🍄' },
    { name: 'Pizza Margherita',       qty: 2, price: 10.00, 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' }}>
      <DesktopHero subtitle="Bedankt voor je bestelling!" />
      <DesktopStepsRow active={4} />

      <div style={{ maxWidth: 720, margin: '40px auto 0', padding: '0 48px', textAlign: 'center' }}>
        <div style={{
          width: 96, height: 96, borderRadius: '50%', background: '#16a34a', color: '#fff',
          display: 'inline-flex', alignItems: 'center', justifyContent: 'center', fontSize: 48, fontWeight: 900,
          boxShadow: '0 8px 0 #15803d, 0 12px 24px rgba(22,163,74,0.25)',
        }}>✓</div>
        <h2 style={{ fontSize: 38, fontWeight: 900, margin: '20px 0 0', letterSpacing: '-0.02em', color: '#15803d' }}>
          Betaling geslaagd!
        </h2>
        <p style={{ fontSize: 14.5, color: '#44403c', margin: '8px 0 0' }}>
          Bestelling <strong style={{ color: '#1c1917', fontVariantNumeric: 'tabular-nums' }}>#3SKTI3E3</strong> is bevestigd.
        </p>

        <div style={{
          marginTop: 24, background: '#1c1917', color: '#fef3c7', borderRadius: 24, padding: '36px 32px',
          boxShadow: '0 8px 0 #292524, 0 16px 36px rgba(0,0,0,0.18)', position: 'relative', overflow: 'hidden',
        }}>
          <div style={{ fontSize: 12, color: '#a8a29e', textTransform: 'uppercase', letterSpacing: '0.18em' }}>
            Je bestelling is klaar om
          </div>
          <div style={{ fontSize: 120, fontWeight: 900, color: '#fbbf24', fontVariantNumeric: 'tabular-nums', letterSpacing: '-0.04em', lineHeight: 1, margin: '12px 0 8px' }}>
            17:35
          </div>
          <div style={{ fontSize: 15, color: '#e7e5e4' }}>op zaterdag · 09 mei 2026</div>
          <div style={{ marginTop: 22, paddingTop: 18, borderTop: '1px dashed #44403c', fontSize: 13, color: '#a8a29e' }}>
            📍 Foodtruck Gouden Plakje · op het terras bij de pont
          </div>
        </div>

        <div style={{ marginTop: 18, background: '#fff', borderRadius: 16, padding: 20, boxShadow: '0 3px 0 #fbbf24', textAlign: 'left' }}>
          <div style={{ fontSize: 10, fontWeight: 800, color: '#a8a29e', letterSpacing: '0.18em', textTransform: 'uppercase' }}>
            Bestelling · op naam van Senne Visser
          </div>
          <div style={{ marginTop: 12 }}>
            {lineItems.map((item, i) => (
              <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '6px 0' }}>
                <span style={{ fontSize: 18 }}>{item.emoji}</span>
                <div style={{ flex: 1, fontSize: 14, fontWeight: 700 }}>{item.qty}× {item.name}</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.5, fontWeight: 700, color: '#44403c' }}>Totaal betaald</span>
            <span style={{ fontSize: 20, fontWeight: 900, color: '#16a34a', fontVariantNumeric: 'tabular-nums' }}>€{total.toFixed(2)}</span>
          </div>
        </div>

        <div style={{ marginTop: 14, background: '#fff7ed', border: '2px dashed #fdba74', borderRadius: 12, padding: '12px 14px', fontSize: 13, color: '#9a3412' }}>
          ✉️ Een bon is onderweg naar <strong>sennevisser@outlook.com</strong>
        </div>

        <div style={{ marginTop: 24, fontSize: 12.5, color: '#78716c', lineHeight: 1.6 }}>
          Vragen? Bel <strong style={{ color: '#1c1917' }}>+31 6 31780849</strong> of mail <strong style={{ color: '#1c1917' }}>bestelling@foodtruckgoudenplakje.nl</strong>
        </div>
        <div style={{ height: 48 }} />
      </div>
    </div>
  );
};

const Row = ({ label, value, tabular }) => (
  <div style={{ display: 'flex', justifyContent: 'space-between', padding: '4px 0' }}>
    <span style={{ color: '#78716c' }}>{label}</span>
    <span style={{ fontWeight: 700, fontVariantNumeric: tabular ? 'tabular-nums' : 'normal' }}>{value}</span>
  </div>
);

const DesktopHero = ({ subtitle }) => (
  <div style={{
    background: '#ea580c', color: '#fff', padding: '36px 48px 70px', position: 'relative',
    clipPath: 'polygon(0 0, 100% 0, 100% calc(100% - 28px), 50% 100%, 0 calc(100% - 28px))',
  }}>
    <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', textAlign: 'center' }}>
      <div style={{
        display: 'inline-block', background: '#fff', color: '#ea580c',
        padding: '4px 14px', borderRadius: 100, fontSize: 11, fontWeight: 800,
        letterSpacing: '0.18em', textTransform: 'uppercase',
      }}>Gouden Plakje · Pizza Friday</div>
      <h1 style={{ fontSize: 48, fontWeight: 900, margin: '12px 0 0', lineHeight: 0.95, letterSpacing: '-0.03em', textShadow: '0 4px 0 #c2410c' }}>
        Pizza Zaterdag
      </h1>
      <div style={{ fontSize: 14, marginTop: 8, opacity: 0.95 }}>{subtitle}</div>
    </div>
  </div>
);

const DesktopStepsRow = ({ active }) => (
  <div style={{ maxWidth: 720, margin: '0 auto', padding: '0 48px', marginTop: -32, position: 'relative' }}>
    <div style={{
      background: '#fff', borderRadius: 18, padding: '12px 22px', boxShadow: '0 8px 0 #fbbf24, 0 12px 24px rgba(0,0,0,0.08)',
      display: 'flex', alignItems: 'center', justifyContent: 'space-between', fontSize: 12, fontWeight: 700,
    }}>
      <DStep n={active > 1 ? '✓' : '1'} label="Bestellen" active={active >= 1} />
      <DStepline />
      <DStep n={active > 2 ? '✓' : '2'} label="Overzicht" active={active >= 2} />
      <DStepline />
      <DStep n={active > 3 ? '✓' : '3'} label="Betalen" active={active >= 3} />
      <DStepline />
      <DStep n="4" label="Klaar!" active={active >= 4} />
    </div>
  </div>
);

window.DesktopSummaryPage = DesktopSummaryPage;
window.DesktopSuccessPage = DesktopSuccessPage;