/* Cadeaubon — een Loncin-cadeaubon bestellen: van wie, voor wie, een zelf
   in te vullen bedrag, en daarna een betaalopdracht via Bancontact of Visa. */
function CadeaubonScreen({ onNavigate }) {
  const { Input, Button, Eyebrow, Ornament, Badge } = window.LoncinDesignSystem_6f2c51;
  const { PageHead, LINKS } = window;

  const PRESETS = [75, 125, 200, 300];
  const [amount, setAmount] = React.useState('');
  const [from, setFrom] = React.useState('');
  const [to, setTo] = React.useState('');
  const [method, setMethod] = React.useState('bancontact');
  const [step, setStep] = React.useState('form'); // form → pay → done

  const value = parseFloat(String(amount).replace(',', '.'));
  const validAmount = !isNaN(value) && value >= 25 && value <= 2000;
  const ready = from.trim() && to.trim() && validAmount;
  const euro = (n) => '€ ' + n.toFixed(2).replace('.', ',');

  const METHODS = [
    ['bancontact', 'Bancontact'],
    ['visa', 'Visa / Mastercard'],
  ];

  // ---- shared label ----
  const FieldLabel = ({ children, hint }) => (
    <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: '0.7rem', gap: '1rem' }}>
      <span style={{ fontFamily: 'var(--font-sans)', fontSize: 'var(--text-caption)', letterSpacing: 'var(--tracking-caps)', textTransform: 'uppercase', color: 'var(--text-muted)' }}>{children}</span>
      {hint && <span style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontSize: 'var(--text-small)', color: 'var(--text-muted)' }}>{hint}</span>}
    </div>
  );

  return (
    <main style={{ paddingBottom: 'var(--space-9)' }}>
      <PageHead
        eyebrow="Cadeaubon"
        title="Schenk een tafel bij Loncin"
        intro="Verras iemand met een cadeaubon voor Restaurant Loncin — geldig op de volledige kaart. Vul in van wie de bon komt, voor wie hij bestemd is en welk bedrag u wenst; daarna rondt u af met een veilige betaling."
      />

      <section style={{ maxWidth: 640, margin: '0 auto', padding: 'var(--space-5) var(--gutter) 0' }}>
        {step === 'form' && (
          <form
            onSubmit={(e) => { e.preventDefault(); if (ready) setStep('pay'); }}
            style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-6)' }}
          >
            {/* Van / voor wie */}
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))', gap: 'var(--space-5)' }}>
              <Input label="Van wie komt de bon?" placeholder="Uw naam" value={from} onChange={(e) => setFrom(e.target.value)} required />
              <Input label="Voor wie is de bon?" placeholder="Naam van de gelukkige" value={to} onChange={(e) => setTo(e.target.value)} required />
            </div>

            {/* Bedrag */}
            <div>
              <FieldLabel hint="Vrij te kiezen — van € 25 tot € 2.000">Bedrag</FieldLabel>
              <div style={{ display: 'flex', flexWrap: 'wrap', gap: '0.5rem', marginBottom: '1rem' }}>
                {PRESETS.map((p) => (
                  <button
                    key={p}
                    type="button"
                    onClick={() => setAmount(String(p))}
                    style={{
                      cursor: 'pointer',
                      padding: '0.55rem 1.2rem',
                      borderRadius: 'var(--radius-pill, 999px)',
                      fontFamily: 'var(--font-serif)',
                      fontSize: 'var(--text-body)',
                      border: '1px solid',
                      borderColor: value === p ? 'var(--metal-gold)' : 'var(--line-on-dark-strong)',
                      background: value === p ? 'var(--metal-gold)' : 'transparent',
                      color: value === p ? 'var(--text-on-metal)' : 'var(--text-primary)',
                      transition: 'all var(--dur-fast) var(--ease-standard)',
                    }}
                  >
                    {euro(p)}
                  </button>
                ))}
              </div>
              <div style={{ position: 'relative', maxWidth: 260 }}>
                <span style={{ position: 'absolute', left: '1rem', top: '50%', transform: 'translateY(-50%)', fontFamily: 'var(--font-serif)', fontSize: 'var(--text-body-lg)', color: 'var(--metal-gold)', pointerEvents: 'none' }}>€</span>
                <input
                  className="loncin-input"
                  type="number"
                  min="25"
                  max="2000"
                  step="1"
                  inputMode="decimal"
                  placeholder="Eigen bedrag"
                  value={amount}
                  onChange={(e) => setAmount(e.target.value)}
                  required
                  style={{
                    width: '100%',
                    fontFamily: 'var(--font-serif)',
                    fontSize: 'var(--text-body-lg)',
                    color: 'var(--text-primary)',
                    background: 'rgba(242,236,224,0.03)',
                    padding: '0.85rem 1rem 0.85rem 2.2rem',
                    border: '1px solid var(--line-on-dark-strong)',
                    borderRadius: 'var(--radius-sm)',
                  }}
                />
              </div>
            </div>

            {/* Persoonlijke boodschap (optioneel) */}
            <Input
              label="Persoonlijke boodschap (optioneel)"
              variant="boxed"
              placeholder="Een woordje voor bij de bon …"
            />

            {/* Samenvatting + verder */}
            <div
              style={{
                display: 'flex', alignItems: 'center', justifyContent: 'space-between',
                gap: '1rem', flexWrap: 'wrap',
                padding: '0.9rem 1.1rem',
                borderRadius: 'var(--radius-card)',
                border: '1px solid var(--line-on-dark)',
                background: 'rgba(255,255,255,0.015)',
                fontFamily: 'var(--font-serif)',
                color: ready ? 'var(--text-secondary)' : 'var(--text-muted)',
              }}
            >
              <span style={{ fontStyle: ready ? 'normal' : 'italic' }}>
                {ready
                  ? <>Cadeaubon van {from.trim()} voor {to.trim()} — <strong style={{ color: 'var(--metal-gold)', fontWeight: 500 }}>{euro(value)}</strong></>
                  : 'Vul de gegevens en een geldig bedrag in om af te rekenen'}
              </span>
            </div>

            <Button variant="primary" size="lg" type="submit" full disabled={!ready}>
              Naar de betaling
            </Button>
          </form>
        )}

        {step === 'pay' && (
          <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-6)' }}>
            {/* Overzicht */}
            <div style={{ padding: '1.4rem 1.5rem', borderRadius: 'var(--radius-card)', border: '1px solid var(--line-on-dark-strong)', background: 'rgba(255,255,255,0.02)' }}>
              <Eyebrow>Overzicht</Eyebrow>
              <div style={{ marginTop: '1rem', display: 'flex', flexDirection: 'column', gap: '0.6rem', fontFamily: 'var(--font-serif)', color: 'var(--text-secondary)' }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', gap: '1rem' }}><span>Van</span><span style={{ color: 'var(--text-primary)' }}>{from.trim()}</span></div>
                <div style={{ display: 'flex', justifyContent: 'space-between', gap: '1rem' }}><span>Voor</span><span style={{ color: 'var(--text-primary)' }}>{to.trim()}</span></div>
                <div style={{ display: 'flex', justifyContent: 'space-between', gap: '1rem', paddingTop: '0.6rem', borderTop: '1px solid var(--line-on-dark)', fontSize: 'var(--text-body-lg)' }}><span style={{ color: 'var(--text-primary)' }}>Te betalen</span><span style={{ color: 'var(--metal-gold)', fontWeight: 500 }}>{euro(value)}</span></div>
              </div>
            </div>

            {/* Betaalmethode */}
            <div>
              <FieldLabel>Betaalmethode</FieldLabel>
              <div style={{ display: 'flex', flexWrap: 'wrap', gap: '0.7rem' }}>
                {METHODS.map(([id, label]) => (
                  <button
                    key={id}
                    type="button"
                    onClick={() => setMethod(id)}
                    style={{
                      cursor: 'pointer',
                      flex: '1 1 200px',
                      display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '0.6rem',
                      padding: '1rem 1.2rem',
                      borderRadius: 'var(--radius-card)',
                      fontFamily: 'var(--font-sans)',
                      fontSize: 'var(--text-eyebrow)',
                      letterSpacing: 'var(--tracking-caps)',
                      textTransform: 'uppercase',
                      border: '1px solid',
                      borderColor: method === id ? 'var(--metal-gold)' : 'var(--line-on-dark-strong)',
                      background: method === id ? 'rgba(176,141,79,0.12)' : 'transparent',
                      color: method === id ? 'var(--metal-gold)' : 'var(--text-secondary)',
                      transition: 'all var(--dur-fast) var(--ease-standard)',
                    }}
                  >
                    <span aria-hidden="true" style={{ width: 10, height: 10, borderRadius: '50%', border: '1px solid currentColor', background: method === id ? 'currentColor' : 'transparent' }}></span>
                    {label}
                  </button>
                ))}
              </div>
            </div>

            <p style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontSize: 'var(--text-small)', color: 'var(--text-muted)', margin: 0 }}>
              U wordt na bevestiging veilig doorgestuurd naar {method === 'visa' ? 'de kaartbetaling (Visa / Mastercard)' : 'Bancontact'} om de betaling af te ronden. De cadeaubon volgt per e-mail.
            </p>

            <div style={{ display: 'flex', gap: '1rem', flexWrap: 'wrap' }}>
              <Button variant="ghost" onClick={() => setStep('form')}>← Terug</Button>
              <Button variant="primary" size="lg" style={{ flex: '1 1 240px' }} onClick={() => setStep('done')}>
                {euro(value)} betalen met {method === 'visa' ? 'Visa' : 'Bancontact'}
              </Button>
            </div>
          </div>
        )}

        {step === 'done' && (
          <div style={{ textAlign: 'center', maxWidth: 460, margin: '0 auto', padding: 'var(--space-5) 0' }}>
            <div style={{ marginBottom: '1.4rem' }}><Ornament variant="diamond" /></div>
            <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 400, fontSize: 'var(--text-display-m)', color: 'var(--text-primary)', margin: '1.2rem 0', letterSpacing: 'var(--tracking-display)' }}>
              Bedankt
            </h2>
            <p style={{ fontFamily: 'var(--font-serif)', color: 'var(--text-secondary)', fontSize: 'var(--text-body-lg)', lineHeight: 'var(--leading-relaxed)' }}>
              Uw cadeaubon van <strong style={{ color: 'var(--metal-gold)', fontWeight: 500 }}>{euro(value)}</strong> voor {to.trim()} wordt na de {method === 'visa' ? 'Visa-' : 'Bancontact-'}betaling per e-mail bezorgd.
            </p>
            <p style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', color: 'var(--text-muted)', fontSize: 'var(--text-body)', marginTop: '0.8rem' }}>
              Demonstratie — in de live versie volgt hier de echte betaalpagina.
            </p>
            <div style={{ marginTop: '2rem', display: 'flex', gap: '1rem', justifyContent: 'center', flexWrap: 'wrap' }}>
              <Button variant="ghost" onClick={() => { setStep('form'); setAmount(''); setFrom(''); setTo(''); }}>Nog een cadeaubon</Button>
              <Button variant="primary" onClick={() => onNavigate('home')}>Terug naar home</Button>
            </div>
          </div>
        )}
      </section>
    </main>
  );
}
Object.assign(window, { CadeaubonScreen });