// StorePicker — small modal with the real iOS + Android store buttons.
// Used by "Descargar gratis" CTAs throughout the site.

const { motion: storeMotion, AnimatePresence: StoreAnim } = window.Motion;
const { useState: storeUseState, useEffect: storeUseEffect } = React;

const STORE_LINKS = {
  ios:     'https://apps.apple.com/ar/app/wuclock/id6755618949',
  android: 'https://play.google.com/store/apps/details?id=com.agustin.wuclockv2',
};

// Global toggle — call window.openStorePicker() from anywhere
function openStorePicker() {
  window.dispatchEvent(new CustomEvent('wu:open-store-picker'));
}

function StorePicker() {
  const [open, setOpen] = storeUseState(false);

  storeUseEffect(() => {
    const onOpen = () => setOpen(true);
    window.addEventListener('wu:open-store-picker', onOpen);
    return () => window.removeEventListener('wu:open-store-picker', onOpen);
  }, []);

  storeUseEffect(() => {
    if (!open) return;
    const onKey = (e) => { if (e.key === 'Escape') setOpen(false); };
    window.addEventListener('keydown', onKey);
    document.body.style.overflow = 'hidden';
    return () => {
      window.removeEventListener('keydown', onKey);
      document.body.style.overflow = '';
    };
  }, [open]);

  return (
    <StoreAnim>
      {open && (
        <storeMotion.div
          key="backdrop"
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          exit={{ opacity: 0 }}
          transition={{ duration: 0.25 }}
          onClick={() => setOpen(false)}
          className="fixed inset-0 z-[100] flex items-center justify-center px-4"
          style={{ background: 'rgba(0,0,0,0.72)', backdropFilter: 'blur(20px)' }}
        >
          <storeMotion.div
            key="card"
            initial={{ opacity: 0, scale: 0.96, y: 12 }}
            animate={{ opacity: 1, scale: 1, y: 0 }}
            exit={{ opacity: 0, scale: 0.98, y: 6 }}
            transition={{ duration: 0.3, ease: [0.22, 1, 0.36, 1] }}
            onClick={(e) => e.stopPropagation()}
            className="liquid-glass-strong relative w-full max-w-md p-8 md:p-10 text-center"
            style={{ borderRadius: '1.75rem' }}
          >
            {/* Close */}
            <button
              onClick={() => setOpen(false)}
              aria-label="Cerrar"
              className="absolute top-4 right-4 w-9 h-9 rounded-full inline-flex items-center justify-center text-white/70 hover:text-white"
              style={{ background: 'rgba(255,255,255,0.06)', border: '1px solid rgba(255,255,255,0.12)' }}
            >
              <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round">
                <path d="M2 2 L12 12 M12 2 L2 12" />
              </svg>
            </button>

            <div className="relative z-10">
              <p className="text-[11px] font-body uppercase text-[#D4A852]" style={{ letterSpacing: '0.22em' }}>
                Descargar
              </p>
              <h3
                className="mt-3 font-heading italic text-white leading-none"
                style={{ fontSize: 'clamp(36px, 5vw, 48px)', letterSpacing: '-1.5px' }}
              >
                Gratis para iOS<br />y Android.
              </h3>
              <p className="mt-4 text-sm text-white/80 font-body font-light leading-relaxed">
                Más energía, mejor sueño y rituales de 8 minutos — personalizados para tu cuerpo.
              </p>

              <div className="mt-7 flex flex-col gap-3">
                <StoreButton kind="ios"     href={STORE_LINKS.ios} />
                <StoreButton kind="android" href={STORE_LINKS.android} />
              </div>

              <p className="mt-6 text-[11px] text-white/55 font-body">
                Compatible con iOS 16+ · Android 10+
              </p>
            </div>
          </storeMotion.div>
        </storeMotion.div>
      )}
    </StoreAnim>
  );
}

// Pretty App Store / Play Store buttons
function StoreButton({ kind, href, variant = 'solid' }) {
  const isIos = kind === 'ios';
  return (
    <a
      href={href}
      target="_blank"
      rel="noopener noreferrer"
      className={
        "group relative flex items-center gap-4 px-5 py-3.5 text-white whitespace-nowrap " +
        (variant === 'ghost' ? "liquid-glass" : "")
      }
      style={{
        borderRadius: '14px',
        background: variant === 'solid' ? '#000' : undefined,
        border: variant === 'solid' ? '1px solid rgba(255,255,255,0.20)' : undefined,
        boxShadow: variant === 'solid' ? 'inset 0 1px 0 rgba(255,255,255,0.08), 0 4px 16px rgba(0,0,0,0.40)' : undefined,
        transition: 'transform 220ms cubic-bezier(0.22,1,0.36,1), border-color 220ms',
      }}
    >
      <span className="relative z-10 inline-flex items-center gap-4 w-full">
        <span style={{ width: 32, height: 32, flexShrink: 0 }}>
          {isIos ? <AppleLogo /> : <PlayStoreLogo />}
        </span>
        <span className="flex flex-col items-start leading-tight">
          <span className="text-[10px] font-body uppercase text-white/65" style={{ letterSpacing: '0.18em' }}>
            {isIos ? 'Descargar en el' : 'Disponible en'}
          </span>
          <span className="font-heading italic text-white text-2xl" style={{ letterSpacing: '-0.5px', lineHeight: 1.1, marginTop: 2 }}>
            {isIos ? 'App Store' : 'Google Play'}
          </span>
        </span>
        <span className="ml-auto text-white/40 group-hover:text-white/80 transition-colors">
          <ArrowUpRight className="h-4 w-4" />
        </span>
      </span>
    </a>
  );
}

function AppleLogo() {
  return (
    <svg viewBox="0 0 24 24" fill="currentColor" width="100%" height="100%" style={{ color: '#fff' }}>
      <path d="M17.05 20.28c-.98.95-2.05.8-3.08.35-1.09-.46-2.09-.48-3.24 0-1.44.62-2.2.44-3.06-.35C2.79 15.25 3.51 7.59 9.05 7.31c1.35.07 2.29.74 3.08.8 1.18-.24 2.31-.93 3.57-.84 1.51.12 2.65.72 3.4 1.8-3.12 1.87-2.38 5.98.48 7.13-.57 1.5-1.31 2.99-2.54 4.09zM12.03 7.25c-.15-2.23 1.66-4.07 3.74-4.25.29 2.58-2.34 4.5-3.74 4.25z"/>
    </svg>
  );
}
function PlayStoreLogo() {
  return (
    <svg viewBox="0 0 24 24" width="100%" height="100%">
      <defs>
        <linearGradient id="play-g1" x1="0%" y1="0%" x2="100%" y2="0%">
          <stop offset="0%" stopColor="#00C3FF"/><stop offset="100%" stopColor="#00B8D9"/>
        </linearGradient>
        <linearGradient id="play-g2" x1="0%" y1="0%" x2="100%" y2="100%">
          <stop offset="0%" stopColor="#FFCE00"/><stop offset="100%" stopColor="#FFB300"/>
        </linearGradient>
        <linearGradient id="play-g3" x1="0%" y1="0%" x2="100%" y2="100%">
          <stop offset="0%" stopColor="#FF3D00"/><stop offset="100%" stopColor="#E65100"/>
        </linearGradient>
        <linearGradient id="play-g4" x1="0%" y1="0%" x2="100%" y2="100%">
          <stop offset="0%" stopColor="#00E676"/><stop offset="100%" stopColor="#00C853"/>
        </linearGradient>
      </defs>
      <path d="M3.5 2.5v19c0 .4.2.7.5.85L14.6 12 4 2.65A.9.9 0 0 0 3.5 2.5z" fill="url(#play-g1)"/>
      <path d="M17.6 8.7 14.6 12l3 3.3 3.4-1.95c1-.55 1-2.15 0-2.7L17.6 8.7z" fill="url(#play-g2)"/>
      <path d="m4 21.35 10.6-9.35-3 3.3 4.5 4.5c.4.4 1 .5 1.5.25L4 21.35z" fill="url(#play-g3)"/>
      <path d="M4 2.65 14.6 12l3-3.3-9.95-5.7c-.5-.3-1.1-.2-1.5.25-.7.05-2.15 1-2.15 1z" fill="url(#play-g4)"/>
    </svg>
  );
}

Object.assign(window, { StorePicker, StoreButton, openStorePicker, STORE_LINKS });