// Socials — top-right. A small seashell that clicks open to reveal social links.

const Socials = () => {
  const [open, setOpen] = React.useState(false);
  const [t, setT] = React.useState(0);

  // close on click outside
  React.useEffect(() => {
    if (!open) return;
    const onDown = (e) => {
      if (e.target.closest('[data-popup="socials"]')) return;
      setOpen(false);
    };
    const id = setTimeout(() => document.addEventListener('mousedown', onDown), 0);
    return () => { clearTimeout(id); document.removeEventListener('mousedown', onDown); };
  }, [open]);

  React.useEffect(() => {
    let raf;
    const start = performance.now();
    const loop = (now) => {
      setT((now - start) / 1000);
      raf = requestAnimationFrame(loop);
    };
    raf = requestAnimationFrame(loop);
    return () => cancelAnimationFrame(raf);
  }, []);

  const breathe = 1 + Math.sin(t * 1.1) * 0.035;
  const sway = Math.sin(t * 0.6) * 4;
  const isMobile = window.innerWidth < 600 || window.matchMedia('(pointer: coarse)').matches;
  const scale = isMobile ? 0.68 : 1;

  return (
    <>
      <div
        data-popup="socials"
        style={{
          position: 'fixed',
          right: isMobile ? 24 : 44,
          top: isMobile ? 14 : 28,
          width: isMobile ? 44 : 64,
          height: isMobile ? 44 : 64,
          zIndex: 50,
          pointerEvents: 'auto',
          cursor: 'none',
        }}
        onClick={() => setOpen(o => !o)}
      >
        {!open && (
          <span style={{
            position: 'absolute', inset: 0, borderRadius: '50%',
            border: '1.5px solid rgba(127,179,201,0.6)',
            animation: 'shellPulse 2.4s ease-out infinite',
            pointerEvents: 'none',
          }} />
        )}
        <svg
          width="78" height="86" viewBox="-40 -44 80 88"
          style={{
            display: 'block', overflow: 'visible',
            transform: `rotate(${sway - 18}deg) scale(${breathe * scale})`,
            filter: open ? 'drop-shadow(0 6px 14px rgba(61,122,149,0.4))' : 'none',
          }}
        >
          {/* soft water shadow behind */}
          <path
            d="M 18 -38
               C 14 -34, 10 -28, 6 -18
               C 2 -8, -6 0, -22 8
               C -34 14, -36 24, -30 32
               C -22 40, -8 40, 6 34
               C 18 28, 26 16, 28 2
               C 30 -14, 28 -28, 22 -36
               C 21 -38, 20 -39, 18 -38 Z"
            fill="rgba(26,58,74,0.14)"
            transform="translate(1.2, 2.5)"
          />

          {/* Main body — flat painterly fill, ink linework */}
          <path
            d="M 18 -38
               C 14 -34, 10 -28, 6 -18
               C 2 -8, -6 0, -22 8
               C -34 14, -36 24, -30 32
               C -22 40, -8 40, 6 34
               C 18 28, 26 16, 28 2
               C 30 -14, 28 -28, 22 -36
               C 21 -38, 20 -39, 18 -38 Z"
            fill="#EBD3A8"
            stroke="var(--ink)"
            strokeWidth="1.4"
            strokeLinejoin="round"
          />

          {/* Flared outer lip — slightly warmer flat fill */}
          <path
            d="M -30 32
               C -36 24, -34 14, -22 8
               C -14 4, -8 6, -6 10
               C -10 18, -16 26, -24 32
               C -28 34, -30 34, -30 32 Z"
            fill="#E5A88A"
            stroke="var(--ink)"
            strokeWidth="1.2"
            strokeLinejoin="round"
          />

          {/* Dark aperture opening — flat ink shadow */}
          <path
            d="M -24 26
               C -28 22, -26 16, -18 14
               C -12 13, -10 16, -12 20
               C -16 25, -22 28, -24 26 Z"
            fill="rgba(26,58,74,0.55)"
          />

          {/* Spiral whorl lines — ink linework only */}
          <path d="M 6 -18 C 12 -16, 18 -20, 20 -26"
                stroke="var(--ink)" strokeWidth="0.9" fill="none" strokeLinecap="round" opacity="0.5"/>
          <path d="M 2 -8 C 10 -6, 18 -10, 22 -18"
                stroke="var(--ink)" strokeWidth="0.9" fill="none" strokeLinecap="round" opacity="0.4"/>
          <path d="M -6 2 C 4 4, 14 0, 22 -8"
                stroke="var(--ink)" strokeWidth="0.8" fill="none" strokeLinecap="round" opacity="0.35"/>

          {/* Small ink-dot knobs on the shoulder — same vocabulary as starfish speckles */}
          <circle cx="10" cy="-22" r="1.4" fill="rgba(26,58,74,0.4)" />
          <circle cx="6"  cy="-12" r="1.5" fill="rgba(26,58,74,0.4)" />
          <circle cx="0"  cy="-2"  r="1.6" fill="rgba(26,58,74,0.4)" />
          <circle cx="-8" cy="8"   r="1.4" fill="rgba(26,58,74,0.35)" />
        </svg>

        {/* little "sound waves" emitting from the aperture (lower-left) when not open */}
        {!open && !isMobile && (
          <svg width="70" height="70" viewBox="0 0 70 70"
            style={{ position: 'absolute', left: -56, top: 30, pointerEvents: 'none', opacity: 0.55 }}>
            <path d="M 34 34 Q 22 38, 14 30" stroke="var(--ink)" strokeWidth="1.2" fill="none" strokeLinecap="round"
              style={{ animation: 'sndA 2s ease-out infinite' }} />
            <path d="M 38 38 Q 20 44, 8 32" stroke="var(--ink)" strokeWidth="1.2" fill="none" strokeLinecap="round"
              style={{ animation: 'sndB 2s ease-out infinite' }} />
          </svg>
        )}
      </div>

      {/* Hint label next to the conch */}
      {!open && (
        <div style={{
          position: 'fixed',
          right: isMobile ? 72 : 118,
          top: isMobile ? 24 : 56,
          fontFamily: "'Fraunces', serif",
          fontStyle: 'italic',
          fontSize: isMobile ? 11 : 14,
          color: 'var(--ink)',
          opacity: 0.75,
          zIndex: 50,
          pointerEvents: 'none',
          display: 'flex', alignItems: 'center', gap: isMobile ? 4 : 6,
          animation: 'hintFloat 3s ease-in-out infinite',
          whiteSpace: 'nowrap',
        }}>
          <span>follow the call</span>
          <svg width={isMobile ? 24 : 34} height={isMobile ? 14 : 20} viewBox="0 0 34 20" fill="none">
            {isMobile ? (
              <>
                <path d="M 4 9 C 14 8 22 10 28 11" stroke="currentColor" strokeWidth="1.1" strokeDasharray="3 3" fill="none" strokeLinecap="round"/>
                <path d="M 22.7 12.2 L 28 11 L 23.4 8.2" stroke="currentColor" strokeWidth="1.1" fill="none" strokeLinecap="round" strokeLinejoin="round"/>
              </>
            ) : (
              <>
                <path d="M 4 10 C 14 10 20 7 28 4" stroke="currentColor" strokeWidth="1.1" strokeDasharray="3 3" fill="none" strokeLinecap="round"/>
                <path d="M 24.1 7.9 L 28 4 L 22.5 3.6" stroke="currentColor" strokeWidth="1.1" fill="none" strokeLinecap="round" strokeLinejoin="round"/>
              </>
            )}
          </svg>
        </div>
      )}

      {/* Socials panel */}
      <div
        data-popup="socials"
        style={{
          position: 'fixed',
          right: isMobile ? 24 : 40,
          top: isMobile ? 66 : 100,
          width: isMobile ? 220 : 300,
          pointerEvents: open ? 'auto' : 'none',
          opacity: open ? 1 : 0,
          transform: open ? 'translateY(0) scale(1)' : 'translateY(-8px) scale(0.96)',
          transformOrigin: '100% 0%',
          transition: 'opacity 0.3s ease, transform 0.3s cubic-bezier(.2,.9,.3,1.2)',
          zIndex: 60,
        }}
      >
        <div style={{
          background: 'rgba(255,255,255,0.78)',
          backdropFilter: 'blur(14px)',
          WebkitBackdropFilter: 'blur(14px)',
          border: '1px solid rgba(26,58,74,0.12)',
          borderRadius: 18,
          padding: isMobile ? '14px 16px' : '20px 24px',
          boxShadow: '0 18px 40px -18px rgba(26,58,74,0.35), inset 0 1px 0 rgba(255,255,255,0.7)',
          color: 'var(--ink)',
        }}>
          <div style={{
            fontSize: 10, letterSpacing: '0.22em',
            textTransform: 'uppercase', opacity: 0.55, marginBottom: 10,
          }}>Say hello</div>
          {[
            { label: 'Instagram', handle: '@tides_deals', href: 'https://www.instagram.com/tides_deals/' },
            { label: 'TikTok', handle: '@tides_deals', href: 'https://www.tiktok.com/@tides_deals' },
            { label: 'Email', handle: 'info@tides.deals', href: 'mailto:info@tides.deals' },
          ].map((s,i)=>(
            <a key={i} href={s.href} target="_blank" rel="noopener"
              style={{
                display: 'flex', justifyContent: 'space-between', alignItems: 'center',
                padding: isMobile ? '8px 0' : '11px 0',
                borderBottom: 'none',
                color: 'var(--ink)', textDecoration: 'none', cursor: 'none',
                fontSize: isMobile ? 13 : 15,
              }}
            >
              <span style={{ fontFamily: "'Fraunces', serif", fontStyle: 'italic', fontSize: isMobile ? 15 : 18 }}>{s.label}</span>
              <span style={{ opacity: 0.6, fontSize: isMobile ? 12 : 14 }}>{s.handle} ↗</span>
            </a>
          ))}
        </div>
      </div>
    </>
  );
};

window.Socials = Socials;

if (typeof document !== 'undefined' && !document.getElementById('socials-kf')) {
  const s = document.createElement('style');
  s.id = 'socials-kf';
  s.textContent = `
    @keyframes shellPulse {
      0%   { transform: scale(1);   opacity: 0.55; }
      70%  { transform: scale(1.6); opacity: 0; }
      100% { transform: scale(1.6); opacity: 0; }
    }
    @keyframes sndA {
      0%   { opacity: 0; transform: translateX(0); }
      40%  { opacity: 0.9; }
      100% { opacity: 0; transform: translateX(-6px); }
    }
    @keyframes sndB {
      0%   { opacity: 0; transform: translateX(0); }
      20%  { opacity: 0; }
      60%  { opacity: 0.7; }
      100% { opacity: 0; transform: translateX(-8px); }
    }
  `;
  document.head.appendChild(s);
}