/* Yogavibe — Gift Card page.
   Gift-card Stripe links + Formspree form ID come from config.js. */
const GIFT_CARD_LINKS = window.YOGAVIBE_CONFIG.stripe.giftCards;
const GIFTCARD_FORMSPREE_URL = `https://formspree.io/f/${window.YOGAVIBE_CONFIG.integrations.formspreeFormId}`;

function GiftCardPage({ setPage }) {
  usePageSEO(PAGE_SEO.giftcard);
  const [amount, setAmount] = React.useState(100);
  const [delivery, setDelivery] = React.useState('digital');
  const [form, setForm] = React.useState({
    from: '', fromEmail: '',
    to: '', toEmail: '',
    message: '',
    address: '', city: '', postcode: '', country: '',
  });

  const totalPrice = delivery === 'physical' ? amount + 10 : amount;
  const stripeLink = GIFT_CARD_LINKS[delivery][amount];

  const handleSubmit = (e) => {
    e.preventDefault();
    fetch(GIFTCARD_FORMSPREE_URL, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' },
      body: JSON.stringify({
        _subject: `Gift card — €${amount} ${delivery} — from ${form.from}`,
        'Amount': `€${amount}`,
        'Delivery': delivery === 'digital' ? 'Digital (email)' : 'Physical (post)',
        'Total charged': `€${totalPrice}`,
        'From': form.from,
        'From email': form.fromEmail,
        'To': form.to,
        ...(delivery === 'digital'
          ? { 'Recipient email': form.toEmail }
          : { 'Postal address': form.address, 'City': form.city, 'Postcode': form.postcode, 'Country': form.country }),
        'Message': form.message || '—',
      }),
    }).catch(() => {});
    let url = stripeLink;
    if (form.fromEmail) url += (url.includes('?') ? '&' : '?') + 'prefilled_email=' + encodeURIComponent(form.fromEmail);
    window.open(url, '_blank');
  };

  return (
    <section className="section" style={{ paddingTop: 140 }}>
      <div className="container">
        <button className="caption back-link" onClick={() => setPage('home')}>← Back</button>
        <div className="eyebrow" style={{ marginTop: 32 }}>Gift cards</div>
        <h1 className="h1" style={{ marginTop: 16 }}>Give the gift of<br /><em>escape.</em></h1>
        <p className="body" style={{ marginTop: 20, maxWidth: 520, fontSize: 15 }}>
          A Yogavibe gift card is a beautiful way to offer someone a reset. Redeemable on any retreat or workshop, valid for 24 months from purchase.
        </p>

        <div className="gc-grid">

          {/* Left: card preview + selectors */}
          <div>
            <div className="gc-card-preview">
              <div className="gc-card-inner">
                <div className="gc-card-logo">
                  <LogoMark size={22} style={{ filter: 'invert(1)', opacity: 0.9 }} />
                  <span>yogavibe</span>
                </div>
                <div>
                  <div className="gc-card-amount">€{amount}</div>
                  <div className="gc-card-label">Gift Card</div>
                </div>
                <div>
                  {form.to && <div className="gc-card-recipient">For {form.to}</div>}
                  {form.message && <div className="gc-card-message">"{form.message}"</div>}
                  {!form.to && <div className="gc-card-recipient" style={{ opacity: 0.3 }}>For someone special</div>}
                </div>
              </div>
            </div>

            <div style={{ marginTop: 36 }}>
              <div className="caption" style={{ marginBottom: 14 }}>Choose an amount</div>
              <div className="gc-amounts">
                {[50, 100, 150, 200, 500].map(v => (
                  <button key={v} type="button"
                    className={'gc-amount-btn' + (amount === v ? ' active' : '')}
                    onClick={() => setAmount(v)}>
                    €{v}
                  </button>
                ))}
              </div>
            </div>

            <div style={{ marginTop: 28 }}>
              <div className="caption" style={{ marginBottom: 14 }}>Delivery</div>
              <div className="gc-delivery">
                <button type="button" className={'gc-delivery-btn' + (delivery === 'digital' ? ' active' : '')} onClick={() => setDelivery('digital')}>
                  <div className="gc-delivery-title">Digital</div>
                  <div className="gc-delivery-sub">Sent by email · free</div>
                </button>
                <button type="button" className={'gc-delivery-btn' + (delivery === 'physical' ? ' active' : '')} onClick={() => setDelivery('physical')}>
                  <div className="gc-delivery-title">Physical</div>
                  <div className="gc-delivery-sub">Posted by hand · +€10</div>
                </button>
              </div>
            </div>
          </div>

          {/* Right: form */}
          <div>
            <form onSubmit={handleSubmit} className="reservation-form" style={{ marginTop: 0 }}>

              <div className="caption" style={{ letterSpacing: '.1em' }}>From you</div>
              <div className="res-field">
                <label>Your name</label>
                <input type="text" required placeholder="Your full name"
                  value={form.from} onChange={e => setForm({ ...form, from: e.target.value })} />
              </div>
              <div className="res-field">
                <label>Your email</label>
                <input type="email" required placeholder="you@example.com"
                  value={form.fromEmail} onChange={e => setForm({ ...form, fromEmail: e.target.value })} />
              </div>

              <div className="caption" style={{ marginTop: 8, letterSpacing: '.1em' }}>For</div>
              <div className="res-field">
                <label>Recipient name</label>
                <input type="text" required placeholder="Their name"
                  value={form.to} onChange={e => setForm({ ...form, to: e.target.value })} />
              </div>

              {delivery === 'digital' && (
                <div className="res-field">
                  <label>Recipient email</label>
                  <input type="email" required placeholder="their@email.com"
                    value={form.toEmail} onChange={e => setForm({ ...form, toEmail: e.target.value })} />
                </div>
              )}

              {delivery === 'physical' && (
                <>
                  <div className="res-field">
                    <label>Street & number</label>
                    <input type="text" required placeholder="Kloosterstraat 42"
                      value={form.address} onChange={e => setForm({ ...form, address: e.target.value })} />
                  </div>
                  <div className="gc-address-row">
                    <div className="res-field">
                      <label>Postcode</label>
                      <input type="text" required placeholder="2000"
                        value={form.postcode} onChange={e => setForm({ ...form, postcode: e.target.value })} />
                    </div>
                    <div className="res-field">
                      <label>City</label>
                      <input type="text" required placeholder="Antwerp"
                        value={form.city} onChange={e => setForm({ ...form, city: e.target.value })} />
                    </div>
                  </div>
                  <div className="res-field">
                    <label>Country</label>
                    <input type="text" required placeholder="Belgium"
                      value={form.country} onChange={e => setForm({ ...form, country: e.target.value })} />
                  </div>
                </>
              )}

              <div className="res-field">
                <label>Personal message <span className="res-optional">(optional)</span></label>
                <textarea rows="3" placeholder="Add a note to include with the gift card…"
                  value={form.message} onChange={e => setForm({ ...form, message: e.target.value })} />
              </div>

              <div className="reservation-price-card">
                <div className="reservation-price-row">
                  <span className="caption">Gift card value</span>
                  <span>€{amount}</span>
                </div>
                {delivery === 'physical' && (
                  <div className="reservation-price-row">
                    <span className="caption">Production & postage</span>
                    <span>€10</span>
                  </div>
                )}
                <div className="reservation-price-row reservation-price-row--accent">
                  <span>Total due today</span>
                  <span style={{ fontFamily: 'var(--font-display)', fontSize: 22, color: 'var(--accent)' }}>€{totalPrice}</span>
                </div>
              </div>

              <button type="submit" className="btn btn-primary" style={{ width: '100%', justifyContent: 'center' }}>
                <span className="dot"></span> Pay €{totalPrice} via Stripe →
              </button>

              <div className="reservation-trust">
                <div className="stripe-badge">
                  <span className="stripe-logo">stripe</span>
                  <span>Secured by Stripe · SSL encrypted</span>
                </div>
                <div className="caption" style={{ marginTop: 8 }}>
                  {delivery === 'digital'
                    ? 'Gift card sent by email within 24 hours of payment'
                    : 'Physical card posted within 3–5 business days of payment'}
                </div>
                <div className="caption" style={{ marginTop: 4 }}>
                  Questions? <a href={`mailto:${window.YOGAVIBE_CONFIG.contact.email}`} style={{ color: 'var(--ink)' }}>{window.YOGAVIBE_CONFIG.contact.email}</a>
                </div>
              </div>

            </form>
          </div>

        </div>
      </div>
    </section>
  );
}

Object.assign(window, { GiftCardPage });