// Cinematic effects — haptic, country flag component, CSS keyframes.

(function () {
  let lastHaptic = 0;
  function haptic(ms = 8) {
    if (!navigator.vibrate) return;
    const now = performance.now();
    if (now - lastHaptic < 40) return;
    lastHaptic = now;
    try { navigator.vibrate(ms); } catch (_) {}
  }

  const EASE = {
    spring:    'cubic-bezier(0.34, 1.56, 0.64, 1)',
    bigSpring: 'cubic-bezier(0.18, 1.7, 0.32, 1.0)',
    soft:      'cubic-bezier(0.16, 1, 0.3, 1)',
  };

  // CSS keyframes used throughout the calculator. Idempotent injection.
  if (!document.getElementById('jl-fx')) {
    const s = document.createElement('style');
    s.id = 'jl-fx';
    s.textContent = `
      @keyframes jlBoot {
        0%   { opacity: 0; transform: translateY(8px) scale(0.99); filter: blur(4px); }
        70%  { opacity: 1; filter: blur(0); }
        100% { opacity: 1; transform: translateY(0) scale(1); }
      }
      @keyframes jlPop {
        0%   { transform: scale(0.6); opacity: 0; }
        60%  { transform: scale(1.12); opacity: 1; }
        100% { transform: scale(1); opacity: 1; }
      }
      @keyframes jlPulse {
        0%, 100% { transform: scale(1); opacity: 0.7; }
        50%      { transform: scale(1.18); opacity: 1; }
      }
      @keyframes jlTwink {
        0%, 100% { opacity: 0.3; transform: scale(0.7); }
        50%      { opacity: 1; transform: scale(1.1); }
      }
      @keyframes jlScan {
        0%   { transform: translateX(-110%); opacity: 0; }
        30%  { opacity: 0.7; }
        100% { transform: translateX(110%); opacity: 0; }
      }
      @keyframes jlSweep {
        0%   { stroke-dashoffset: 999; opacity: 0; }
        20%  { opacity: 1; }
        100% { stroke-dashoffset: 0;   opacity: 1; }
      }
      @keyframes jlDigit {
        0%   { transform: translateY(20%); opacity: 0; filter: blur(2px); }
        100% { transform: translateY(0);   opacity: 1; filter: blur(0); }
      }
      @keyframes jlSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

      /* ── Liquid Glass ───────────────────────────────────────────
         Frosted backdrop blur + thin specular highlight ring + soft
         glossy gradient. Use .jl-glass on any container; .jl-glass-strong
         for darker scenes where more frost is needed. */
      .jl-glass {
        position: relative;
        background: rgba(255, 255, 255, 0.06);
        backdrop-filter: blur(22px) saturate(160%);
        -webkit-backdrop-filter: blur(22px) saturate(160%);
        border: 1px solid rgba(255, 255, 255, 0.18);
        box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, 0.25),
          inset 0 -1px 0 rgba(255, 255, 255, 0.05),
          0 8px 32px rgba(0, 0, 0, 0.35),
          0 2px 8px rgba(0, 0, 0, 0.2);
        overflow: hidden;
      }
      /* Glossy top-edge highlight that gives the "liquid" specular look */
      .jl-glass::before {
        content: '';
        position: absolute;
        top: 0; left: 0; right: 0; height: 50%;
        background: linear-gradient(180deg,
          rgba(255, 255, 255, 0.10) 0%,
          rgba(255, 255, 255, 0.02) 60%,
          transparent 100%);
        pointer-events: none;
        border-radius: inherit;
        z-index: 0;
      }
      /* Diffuse rim-light reflection across the top */
      .jl-glass::after {
        content: '';
        position: absolute;
        top: -1px; left: 10%; right: 10%; height: 1px;
        background: linear-gradient(90deg,
          transparent 0%,
          rgba(255, 255, 255, 0.45) 50%,
          transparent 100%);
        pointer-events: none;
        z-index: 1;
      }
      .jl-glass > * { position: relative; z-index: 2; }

      .jl-glass-strong {
        background: rgba(20, 20, 30, 0.45);
        backdrop-filter: blur(32px) saturate(180%);
        -webkit-backdrop-filter: blur(32px) saturate(180%);
      }

      .jl-glass-chip {
        position: relative;
        background: rgba(255, 255, 255, 0.05);
        backdrop-filter: blur(14px) saturate(160%);
        -webkit-backdrop-filter: blur(14px) saturate(160%);
        border: 1px solid rgba(255, 255, 255, 0.14);
        box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, 0.18),
          0 4px 14px rgba(0, 0, 0, 0.25);
        overflow: hidden;
      }
      .jl-glass-chip::before {
        content: '';
        position: absolute;
        top: 0; left: 0; right: 0; height: 60%;
        background: linear-gradient(180deg,
          rgba(255, 255, 255, 0.10) 0%,
          transparent 100%);
        pointer-events: none;
        border-radius: inherit;
        z-index: 0;
      }
      .jl-glass-chip > * { position: relative; z-index: 2; }
      .jl-glass-chip.is-selected {
        background: rgba(255, 255, 255, 0.10);
        box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, 0.28),
          0 6px 20px rgba(0, 0, 0, 0.4);
      }

      .jl-boot  { animation: jlBoot 0.7s cubic-bezier(0.16, 1, 0.3, 1) both; }
      .jl-pop   { animation: jlPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
      .jl-digit { animation: jlDigit 0.45s cubic-bezier(0.16, 1, 0.3, 1) both; }
      .jl-scan  { animation: jlScan 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards; }

      .jl-stagger > *      { opacity: 0; animation: jlBoot 0.6s cubic-bezier(0.16, 1, 0.3, 1) both; }
      .jl-stagger > *:nth-child(1) { animation-delay: 0.05s; }
      .jl-stagger > *:nth-child(2) { animation-delay: 0.13s; }
      .jl-stagger > *:nth-child(3) { animation-delay: 0.21s; }
      .jl-stagger > *:nth-child(4) { animation-delay: 0.29s; }
      .jl-stagger > *:nth-child(5) { animation-delay: 0.37s; }
      .jl-stagger > *:nth-child(6) { animation-delay: 0.45s; }
      .jl-stagger > *:nth-child(7) { animation-delay: 0.53s; }

      .jl-row { transition: background .12s ease, transform .15s cubic-bezier(0.34, 1.56, 0.64, 1); }
      .jl-row:hover { transform: translateX(2px); }

      .jl-btn {
        transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease, background 0.2s ease;
      }
      .jl-btn:hover { transform: translateY(-1px) scale(1.02); }
      .jl-btn:active { transform: translateY(0) scale(0.97); }
    `;
    document.head.appendChild(s);
  }

  // <Flag code="gb" size={20}> — flagcdn.com PNG, falls back to globe emoji.
  function Flag({ code, size = 18, radius = 3, style }) {
    const [err, setErr] = React.useState(false);
    if (err || !code) {
      return <span style={{ fontSize: size, lineHeight: 1, ...style }}>🌐</span>;
    }
    const w = size >= 40 ? 80 : size >= 20 ? 40 : 20;
    const h = Math.round(size * 0.75);
    return (
      <img
        src={`https://flagcdn.com/w${w}/${code}.png`}
        srcSet={`https://flagcdn.com/w${w * 2}/${code}.png 2x, https://flagcdn.com/w${w * 4}/${code}.png 3x`}
        width={size}
        height={h}
        alt={`${code.toUpperCase()}`}
        onError={() => setErr(true)}
        style={{
          display: 'inline-block', verticalAlign: 'middle',
          borderRadius: radius, objectFit: 'cover',
          boxShadow: '0 1px 0 rgba(0,0,0,0.18), 0 0 0 0.5px rgba(255,255,255,0.12)',
          ...style,
        }}
      />
    );
  }

  window.JLFX = { haptic, EASE, Flag };
})();