// Gift Cards page

function GiftCardsPage() {
  const [amount, setAmount] = useState(100);
  const [customAmount, setCustomAmount] = useState('');
  const [design, setDesign] = useState(window.GIFT_DESIGNS[0].id);
  const [recipient, setRecipient] = useState('');
  const [email, setEmail] = useState('');
  const [note, setNote] = useState('');
  const [sent, setSent] = useState(false);

  const designObj = window.GIFT_DESIGNS.find(d => d.id === design) || window.GIFT_DESIGNS[0];
  const displayAmount = amount === null ? (parseInt(customAmount, 10) || 0) : amount;

  const handleSend = (e) => {
    e.preventDefault();
    setSent(true);
    setTimeout(() => setSent(false), 3500);
  };

  return (
    <div className="page">
      <div className="page-head">
        <div>
          <div className="page-eyebrow">Gift Cards</div>
          <h1 className="page-title">A gift that lets them<br/><em>pick the right thing.</em></h1>
          <p className="page-sub">Redeemable across every retailer we work with. Delivered by email the moment you choose, or scheduled for the day it matters.</p>
        </div>
      </div>

      <div className="gift-stage">
        <div className="gift-preview-wrap">
          <div className="gift-card" style={{ background: designObj.bg, color: designObj.ink }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
              <div className="gift-card-mark">MagicRascals</div>
              <div style={{ width: 26, height: 26, borderRadius: '50%', background: designObj.accent, opacity: 0.85 }} />
            </div>
            <div>
              <div className="gift-card-amount">${displayAmount || '—'}</div>
              <div style={{ fontSize: 13, opacity: 0.6, marginTop: 4 }}>{recipient ? `For ${recipient}` : 'For someone you love'}</div>
            </div>
            <div className="gift-card-foot">A gift toward better gear</div>
            <div className="gift-card-shimmer" />
          </div>
          <div style={{ marginTop: 24, fontSize: 13, color: 'var(--ink-3)', textAlign: 'center', maxWidth: 360 }}>
            Cards never expire. Refundable for 60 days if your friend already had it.
          </div>
        </div>

        <form className="gift-form" onSubmit={handleSend}>
          <div>
            <div className="gift-h">Amount</div>
            <div className="gift-amounts">
              {window.GIFT_CARDS.map(g => (
                <button
                  type="button"
                  key={g.id}
                  className={`gift-amount${(g.amount === amount && !(g.amount === null && amount !== null)) ? ' is-current' : ''}`}
                  onClick={() => setAmount(g.amount)}
                >
                  <span className="gift-amount-num">{g.amount === null ? 'Custom' : `$${g.amount}`}</span>
                  {g.label && <span className="gift-amount-lbl">{g.label}</span>}
                </button>
              ))}
            </div>
            {amount === null && (
              <input
                type="number"
                className="gift-input"
                placeholder="$"
                value={customAmount}
                onChange={(e) => setCustomAmount(e.target.value)}
                style={{ marginTop: 10 }}
              />
            )}
          </div>

          <div>
            <div className="gift-h">Design</div>
            <div className="gift-designs">
              {window.GIFT_DESIGNS.map(d => (
                <button
                  type="button"
                  key={d.id}
                  className={`gift-design${design === d.id ? ' is-current' : ''}`}
                  style={{ background: d.bg }}
                  onClick={() => setDesign(d.id)}
                  aria-label={d.name}
                />
              ))}
            </div>
          </div>

          <div className="form-row">
            <span className="form-lbl">Recipient name</span>
            <input className="gift-input" placeholder="Their name" value={recipient} onChange={(e) => setRecipient(e.target.value)} />
          </div>

          <div className="form-row">
            <span className="form-lbl">Their email</span>
            <input type="email" className="gift-input" placeholder="them@example.com" value={email} onChange={(e) => setEmail(e.target.value)} />
          </div>

          <div className="form-row">
            <span className="form-lbl">A short note (optional)</span>
            <textarea className="gift-input gift-textarea" placeholder="Couldn't be more excited for the new arrival…" value={note} onChange={(e) => setNote(e.target.value)} />
          </div>

          <button type="submit" className="btn">
            <span>{sent ? 'Sent · they’ll get it shortly' : `Send $${displayAmount || '—'} gift card`}</span>
            <span className="arrow">{sent ? '✓' : '→'}</span>
          </button>
        </form>
      </div>
    </div>
  );
}

window.GiftCardsPage = GiftCardsPage;