/* Floating WhatsApp + Booksy buttons + Popup promo */

function FloatingButtons() {
  const t = useT();
  return (
    <div className="floating-btns">
      <a
        href={`https://wa.me/${GH_DATA.contact.phoneRaw}`}
        target="_blank"
        rel="noreferrer"
        className="fab fab-wa"
        aria-label="WhatsApp"
        title="WhatsApp"
      >
        <SocialIcon kind="wa"/>
        <span className="fab-tip">{t('float_wa')}</span>
      </a>
      <a
        href={GH_DATA.contact.booksy}
        target="_blank"
        rel="noreferrer"
        className="fab fab-book"
        aria-label="Booksy"
      >
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
          <rect x="3" y="5" width="18" height="16" rx="2"/>
          <path d="M3 9h18M8 3v4M16 3v4"/>
          <circle cx="12" cy="14" r="1.5" fill="currentColor"/>
        </svg>
        <span>{t('float_book')}</span>
      </a>

      <style>{`
        .floating-btns {
          position: fixed; bottom: 24px; right: 24px;
          display: flex; flex-direction: column; gap: 12px;
          z-index: 40;
        }
        .fab {
          display: inline-flex; align-items: center; gap: 10px;
          padding: 14px 20px;
          border-radius: 999px;
          font-family: var(--sans); font-size: 13px; font-weight: 600;
          letter-spacing: 0.1em; text-transform: uppercase;
          box-shadow: 0 12px 36px rgba(0,0,0,0.45), 0 0 0 1px rgba(0,0,0,0.2);
          transition: transform 0.25s ease, box-shadow 0.25s ease;
          position: relative;
        }
        .fab:hover {
          transform: translateY(-2px);
          box-shadow: 0 18px 48px rgba(0,0,0,0.55);
        }
        .fab svg { width: 20px; height: 20px; flex-shrink: 0; }
        .fab-wa {
          background: #25D366; color: #fff;
          width: 56px; height: 56px; padding: 0;
          justify-content: center;
        }
        .fab-wa .fab-tip {
          position: absolute; right: calc(100% + 12px);
          background: var(--bg); color: var(--gold);
          border: 1px solid var(--gold-line);
          padding: 6px 12px; border-radius: 4px;
          font-size: 11px; white-space: nowrap;
          opacity: 0; pointer-events: none;
          transition: opacity 0.25s ease;
        }
        .fab-wa:hover .fab-tip { opacity: 1; }
        .fab-book {
          background: var(--gold); color: var(--bg);
        }
        @media (max-width: 600px) {
          .floating-btns { bottom: 16px; right: 16px; }
          .fab-book span { display: none; }
          .fab-book { width: 56px; height: 56px; padding: 0; justify-content: center; }
        }
      `}</style>
    </div>
  );
}

// ───────── POPUP ─────────
function Popup() {
  const t = useT();
  const [show, setShow] = React.useState(false);
  const [dismissed, setDismissed] = React.useState(false);

  // El popup se basa en el curso "featured" definido en data.jsx
  const featured = GH_DATA.courses.find((c) => c.featured) || GH_DATA.courses[0];
  const { lang } = useLang();

  React.useEffect(() => {
    try {
      if (sessionStorage.getItem('gh-popup-dismissed') === '1') {
        setDismissed(true);
        return;
      }
    } catch {}
    const timer = setTimeout(() => setShow(true), 5500);
    return () => clearTimeout(timer);
  }, []);

  const close = () => {
    setShow(false);
    try { sessionStorage.setItem('gh-popup-dismissed', '1'); } catch {}
  };

  if (dismissed) return null;

  return (
    <div className={`popup-wrap ${show ? 'on' : ''}`}>
      <div className="popup">
        <button className="popup-close" onClick={close} aria-label={t('pop_close')}>×</button>
        <div className="popup-img-wrap">
          {featured.img ? (
            <img src={featured.img} alt={featured[lang]} />
          ) : (
            <div className="img-ph" style={{height: '100%'}}>
              <div>
                <span className="icon">✺</span>
                <span className="lbl">Curso destacado</span>
              </div>
            </div>
          )}
        </div>
        <div className="popup-body">
          <div className="eyebrow" style={{color: 'var(--gold)'}}>{t('pop_eyebrow')}</div>
          <h3 className="serif popup-title">{featured[lang]}</h3>
          <div className="popup-price">
            <span className="popup-price-tag serif">
              {featured.price ? `${featured.price}€` : (t('pop_cta'))}
            </span>
            <span className="popup-price-mode">
              {featured.mode === 'online' ? t('mode_on') : t('mode_in')}
              {' · '}
              {featured[`duration_${lang}`] || `${featured.hours || ''} ${t('hours')}`}
            </span>
          </div>
          <p className="popup-sub">{t('pop_sub')}</p>
          <div className="popup-ctas">
            <a
              href={featured.buyUrl || '#academy'}
              target={featured.buyUrl ? '_blank' : undefined}
              rel="noreferrer"
              className="btn btn-solid"
              onClick={close}
            >
              {t('pop_cta')}
            </a>
            <button className="popup-no" onClick={close}>{t('pop_close')}</button>
          </div>
        </div>
      </div>

      <style>{`
        .popup-wrap {
          position: fixed; bottom: 24px; left: 24px;
          width: 360px; max-width: calc(100vw - 48px);
          z-index: 45;
          transform: translateY(120%);
          opacity: 0;
          transition: transform 0.5s cubic-bezier(.2,.7,.2,1), opacity 0.4s ease;
        }
        .popup-wrap.on { transform: translateY(0); opacity: 1; }
        .popup {
          background: var(--bg-card); border: 1px solid var(--gold-line);
          position: relative;
          box-shadow: 0 24px 64px rgba(0,0,0,0.6);
        }
        .popup-close {
          position: absolute; top: 8px; right: 8px;
          width: 32px; height: 32px; border-radius: 99px;
          background: rgba(0,0,0,0.7); color: var(--gold);
          border: 0; cursor: pointer; font-size: 22px; line-height: 1;
          z-index: 1;
          transition: background 0.2s ease, color 0.2s ease;
        }
        .popup-close:hover { background: var(--gold); color: var(--bg); }
        .popup-img-wrap {
          aspect-ratio: 2/1;
          overflow: hidden;
          background: var(--bg-soft);
        }
        .popup-img-wrap img {
          width: 100%; height: 100%;
          object-fit: cover;
        }
        .popup-img { aspect-ratio: 2/1; }
        .popup-body { padding: 24px; }
        .popup-title {
          font-size: 24px; line-height: 1.2; color: var(--white);
          margin: 12px 0 8px;
        }
        .popup-price {
          display: flex; align-items: baseline; gap: 12px;
          margin: 12px 0 12px;
          padding-bottom: 12px;
          border-bottom: 1px solid rgba(212,175,55,0.15);
        }
        .popup-price-tag {
          font-size: 28px; color: var(--gold); font-weight: 500;
        }
        .popup-price-mode {
          font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
          color: var(--gray);
        }
        .popup-sub {
          font-size: 13px; color: var(--gray); margin: 0 0 20px;
        }
        .popup-ctas { display: flex; gap: 12px; align-items: center; }
        .popup-ctas .btn { padding: 10px 18px; font-size: 10px; }
        .popup-no {
          background: transparent; border: 0;
          color: var(--gray); cursor: pointer;
          font: inherit; font-size: 12px; letter-spacing: 0.15em;
          text-transform: uppercase;
          padding: 10px;
        }
        .popup-no:hover { color: var(--gold); }
        @media (max-width: 600px) {
          .popup-wrap { left: 16px; bottom: 96px; width: calc(100vw - 32px); }
        }
      `}</style>
    </div>
  );
}

window.FloatingButtons = FloatingButtons;
window.Popup = Popup;