const EmailReceipt = () => {
  const lineItems = [
    { name: 'Pizza Quattro Stagioni', qty: 1, price: 12.50 },
    { name: 'Pizza Margherita',       qty: 2, price: 10.00 },
  ];
  const total = lineItems.reduce((s, i) => s + i.qty * i.price, 0);

  return (
    <div style={{ background: '#f5f5f4', minHeight: '100%', fontFamily: '"Inter", system-ui, sans-serif', padding: '24px 0' }}>
      {/* Email message preview as it might appear in a client */}
      <div style={{ maxWidth: 600, margin: '0 auto', background: '#fff', borderRadius: 12, overflow: 'hidden', boxShadow: '0 4px 12px rgba(0,0,0,0.06)' }}>
        {/* Email "from" header */}
        <div style={{ padding: '14px 20px', borderBottom: '1px solid #e7e5e4', display: 'flex', alignItems: 'center', gap: 12, background: '#fafaf9' }}>
          <div style={{ width: 36, height: 36, borderRadius: '50%', background: '#ea580c', color: '#fff',
            display: 'inline-flex', alignItems: 'center', justifyContent: 'center', fontWeight: 900, fontSize: 14 }}>GP</div>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ fontSize: 13, fontWeight: 700, color: '#1c1917' }}>Gouden Plakje</div>
            <div style={{ fontSize: 11.5, color: '#78716c' }}>bestelling@foodtruckgoudenplakje.nl</div>
          </div>
          <div style={{ fontSize: 11, color: '#a8a29e' }}>za 09 mei · 12:29</div>
        </div>

        {/* Email body — built like a real branded receipt */}
        <div style={{ background: '#fef3c7', padding: 0 }}>
          {/* Hero */}
          <div style={{
            background: '#ea580c', color: '#fff', padding: '28px 24px 40px', position: 'relative',
            clipPath: 'polygon(0 0, 100% 0, 100% calc(100% - 18px), 50% 100%, 0 calc(100% - 18px))',
          }}>
            <div style={{ position: 'absolute', inset: 0, opacity: 0.12,
              backgroundImage: 'repeating-linear-gradient(45deg, #fff 0 2px, transparent 2px 12px)' }} />
            <div style={{ position: 'relative', textAlign: 'center' }}>
              <div style={{
                display: 'inline-block', background: '#fff', color: '#ea580c',
                padding: '4px 12px', borderRadius: 100, fontSize: 10, fontWeight: 800,
                letterSpacing: '0.15em', textTransform: 'uppercase',
              }}>Bevestiging · #3SKTI3E3</div>
              <h1 style={{ fontSize: 30, fontWeight: 900, margin: '10px 0 0', lineHeight: 0.95, letterSpacing: '-0.02em', textShadow: '0 3px 0 #c2410c' }}>
                Pizza Zaterdag
              </h1>
            </div>
          </div>

          {/* Greeting */}
          <div style={{ padding: '4px 24px 0' }}>
            <p style={{ fontSize: 15, color: '#1c1917', margin: '0 0 4px', fontWeight: 700 }}>Hoi Senne 👋</p>
            <p style={{ fontSize: 13.5, color: '#44403c', margin: 0, lineHeight: 1.55 }}>
              Bedankt voor je bestelling! Hieronder vind je je bon. Tot zaterdag!
            </p>
          </div>

          {/* Big time card */}
          <div style={{ padding: '20px 24px 0' }}>
            <div style={{
              background: '#1c1917', color: '#fef3c7', borderRadius: 16, padding: '20px 18px',
              boxShadow: '0 6px 0 #292524', textAlign: 'center', position: 'relative', overflow: 'hidden',
            }}>
              <div style={{ fontSize: 10, color: '#a8a29e', textTransform: 'uppercase', letterSpacing: '0.18em' }}>
                Klaar om
              </div>
              <div style={{ fontSize: 56, fontWeight: 900, color: '#fbbf24', fontVariantNumeric: 'tabular-nums', letterSpacing: '-0.03em', lineHeight: 1, margin: '6px 0 4px' }}>
                17:35
              </div>
              <div style={{ fontSize: 12, color: '#e7e5e4' }}>zaterdag · 09 mei 2026</div>
            </div>
          </div>

          {/* Order detail */}
          <div style={{ padding: '14px 24px 0' }}>
            <div style={{ background: '#fff', borderRadius: 14, padding: 16, boxShadow: '0 3px 0 #fbbf24' }}>
              <div style={{ fontSize: 10, fontWeight: 800, color: '#a8a29e', letterSpacing: '0.18em', textTransform: 'uppercase' }}>
                Jouw bestelling
              </div>
              <div style={{ marginTop: 10 }}>
                {lineItems.map((item, i) => (
                  <div key={i} style={{
                    display: 'flex', justifyContent: 'space-between', alignItems: 'baseline',
                    padding: '8px 0', borderBottom: '1px dashed #fde68a', fontSize: 13.5,
                  }}>
                    <span><strong style={{ fontVariantNumeric: 'tabular-nums' }}>{item.qty}×</strong> {item.name}</span>
                    <span style={{ fontWeight: 700, fontVariantNumeric: 'tabular-nums' }}>€{(item.qty * item.price).toFixed(2)}</span>
                  </div>
                ))}
              </div>
              <div style={{ marginTop: 12, paddingTop: 8,
                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>

          {/* Footer */}
          <div style={{ padding: '20px 24px 28px', textAlign: 'center' }}>
            <div style={{ fontSize: 12, color: '#78716c', lineHeight: 1.55 }}>
              Vragen over je bestelling?<br/>
              Mail <a href="#" style={{ color: '#ea580c', fontWeight: 700, textDecoration: 'none' }}>bestelling@foodtruckgoudenplakje.nl</a>
            </div>
            <div style={{ marginTop: 16, fontSize: 10.5, color: '#a8a29e', letterSpacing: '0.1em', textTransform: 'uppercase' }}>
              Gouden Plakje · Pizza Friday
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

window.EmailReceipt = EmailReceipt;