// Gift Voucher — Custom PDP

const VOUCHER_AMOUNTS = [50, 100, 250, 500, 1000];

const GiftVoucher = () => {
  const { go, lang, t, addToCart } = useApp();
  const [amount, setAmount] = React.useState(250);
  const [custom, setCustom] = React.useState('');
  const [isCustom, setIsCustom] = React.useState(false);
  const [recipient, setRecipient] = React.useState('');
  const [sender, setSender] = React.useState('');
  const [message, setMessage] = React.useState('');
  const [added, setAdded] = React.useState(false);

  const cardRef = React.useRef(null);
  const shineRef = React.useRef(null);

  const activeAmount = isCustom ? (parseInt(custom) || 0) : amount;

  const onCardMove = (e) => {
    const card = cardRef.current;
    if (!card) return;
    const rect = card.getBoundingClientRect();
    const x = (e.clientX - rect.left) / rect.width;
    const y = (e.clientY - rect.top) / rect.height;
    const rotY = (x - 0.5) * 18;
    const rotX = (0.5 - y) * 12;
    card.style.transform = `perspective(800px) rotateY(${rotY}deg) rotateX(${rotX}deg)`;
    if (shineRef.current) {
      shineRef.current.style.background = `radial-gradient(circle at ${x*100}% ${y*100}%, rgba(255,255,255,0.3) 0%, transparent 55%)`;
    }
  };

  const onCardLeave = () => {
    const card = cardRef.current;
    if (!card) return;
    card.style.transform = 'perspective(800px) rotateY(0) rotateX(0)';
    if (shineRef.current) shineRef.current.style.background = 'transparent';
  };

  const handleAdd = () => {
    if (activeAmount < 25) return;
    setAdded(true);
    setTimeout(() => setAdded(false), 2400);
  };

  return (
    <section className="gv-page">
      <div className="gv-hero">
        <div className="gv-hero-inner">
          <div className="eyebrow">{t('Verschenke Design')}</div>
          <h1>Geschenk<span className="accent-word">gutschein.</span></h1>
          <p className="gv-hero-sub">{t('Das perfekte Geschenk für alle, die außergewöhnliches Design lieben. Einlösbar für jedes Piece aus unserer Kollektion.')}</p>
        </div>
      </div>

      <div className="gv-main">
        <div className="gv-card-col">
          <div
            className="gv-card"
            ref={cardRef}
            onMouseMove={onCardMove}
            onMouseLeave={onCardLeave}
          >
            <div className="gv-card-shine" ref={shineRef}/>
            <div className="gv-card-border"/>
            <div className="gv-card-content">
              <div className="gv-card-logo"><img src="assets/logo-black.png" alt="ZinCuTec"/></div>
              <div className="gv-card-label">Geschenkgutschein</div>
              <div className="gv-card-amount">{activeAmount > 0 ? `${activeAmount} €` : '— €'}</div>
              {recipient && <div className="gv-card-recipient">{lang==='en'?'For':'Für'} {recipient}</div>}
              {sender && <div className="gv-card-sender">{lang==='en'?'From':'Von'} {sender}</div>}
            </div>
            <div className="gv-card-footer">
              <span>Handgefertigt in Deutschland</span>
              <span>Since 2000</span>
            </div>
          </div>
          <p className="gv-card-hint">{t('Bewege die Maus über die Karte')}</p>
        </div>

        <div className="gv-config">
          <div className="gv-section">
            <div className="gv-label">{t('Betrag wählen')}</div>
            <div className="gv-amounts">
              {VOUCHER_AMOUNTS.map(v => (
                <button
                  key={v}
                  className={`gv-amt ${!isCustom && amount===v ? 'active' : ''}`}
                  onClick={() => { setAmount(v); setIsCustom(false); setCustom(''); }}
                >
                  {v} €
                </button>
              ))}
              <button
                className={`gv-amt gv-amt-custom ${isCustom ? 'active' : ''}`}
                onClick={() => setIsCustom(true)}
              >
                {t('Eigener Betrag')}
              </button>
            </div>
            {isCustom && (
              <div className="gv-custom-input">
                <input
                  type="number"
                  min="25"
                  max="10000"
                  step="1"
                  placeholder="250"
                  value={custom}
                  onChange={e => setCustom(e.target.value)}
                  autoFocus
                />
                <span className="gv-currency">€</span>
                <span className="gv-min">Min. 25 €</span>
              </div>
            )}
          </div>

          <div className="gv-section">
            <div className="gv-label">{t('Personalisieren')}<span className="gv-opt">{t('Optional')}</span></div>
            <label className="gv-field">
              <span>{lang==='en'?'Recipient':'Empfänger'}</span>
              <input type="text" value={recipient} onChange={e=>setRecipient(e.target.value)} placeholder={lang==='en'?'Who is this for?':'Für wen ist der Gutschein?'}/>
            </label>
            <label className="gv-field">
              <span>{lang==='en'?'From':'Von'}</span>
              <input type="text" value={sender} onChange={e=>setSender(e.target.value)} placeholder={lang==='en'?'Your name':'Dein Name'}/>
            </label>
            <label className="gv-field">
              <span>{t('Nachricht')}</span>
              <textarea rows="2" value={message} onChange={e=>setMessage(e.target.value)} placeholder={lang==='en'?'A personal note...':'Eine persönliche Nachricht...'}/>
            </label>
          </div>

          <div className="gv-section">
            <div className="gv-total">
              <span>{t('Gesamt')}</span>
              <span className="gv-total-amount">{activeAmount > 0 ? `${activeAmount},00 €` : '—'}</span>
            </div>
            <button
              className={`btn brass gv-cta ${added ? 'gv-cta-added' : ''}`}
              onClick={handleAdd}
              disabled={activeAmount < 25}
            >
              {added
                ? <><Icon name="check"/> {t('Hinzugefügt')}</>
                : <>{t('In den Warenkorb')} <Icon name="arrow"/></>
              }
            </button>
            <div className="gv-delivery">
              <div><Icon name="mail"/><span>{t('Digitaler Versand per E-Mail')}</span></div>
              <div><Icon name="truck"/><span>{t('Sofort einlösbar')}</span></div>
              <div><Icon name="shield"/><span>{t('3 Jahre gültig')}</span></div>
            </div>
          </div>
        </div>
      </div>

      <div className="gv-info">
        <div className="gv-info-inner">
          <div className="gv-info-item">
            <div className="gv-info-num">01</div>
            <h3>{t('Betrag wählen')}</h3>
            <p>{t('Ab 25 € bis 10.000 €. Jeder Betrag, jedes Piece.')}</p>
          </div>
          <div className="gv-info-item">
            <div className="gv-info-num">02</div>
            <h3>{t('Per E-Mail erhalten')}</h3>
            <p>{t('Der Gutschein kommt als PDF mit persönlichem Design direkt in dein Postfach.')}</p>
          </div>
          <div className="gv-info-item">
            <div className="gv-info-num">03</div>
            <h3>{t('Einlösen')}</h3>
            <p>{t('Online oder direkt in der Werkstatt. Für alle Pieces und Auftragsarbeiten.')}</p>
          </div>
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { GiftVoucher });