/* global React */
const { useEffect: useFxEffect, useRef: useFxRef } = React;

function Marquee({ items, speed = 38, accent = false }) {
  const list = [...items, ...items];
  return (
    <div
      style={{
        position: "relative",
        overflow: "hidden",
        padding: "22px 0",
        borderTop: "1px solid rgba(255,255,255,0.07)",
        borderBottom: "1px solid rgba(255,255,255,0.07)",
        background: accent
          ? "linear-gradient(90deg, transparent, rgba(94, 233, 242, 0.04) 50%, transparent)"
          : "rgba(255,255,255,0.012)",
      }}
    >
      <div
        style={{
          display: "flex",
          gap: 48,
          width: "max-content",
          animation: `lyn-marquee ${speed}s linear infinite`,
          whiteSpace: "nowrap",
        }}
      >
        {list.map((it, i) => (
          <span
            key={i}
            style={{
              display: "inline-flex",
              alignItems: "center",
              gap: 18,
              fontFamily: "var(--font-display)",
              fontSize: "clamp(28px, 4vw, 56px)",
              fontWeight: 400,
              letterSpacing: "-0.025em",
              color: i % 2 === 0 ? "var(--text)" : "transparent",
              WebkitTextStroke: i % 2 === 1 ? "1px rgba(238, 243, 250, 0.4)" : "0",
            }}
          >
            {it}
            <Spark />
          </span>
        ))}
      </div>
      <style>{`
        @keyframes lyn-marquee {
          0% { transform: translateX(0); }
          100% { transform: translateX(-50%); }
        }
      `}</style>
    </div>
  );
}

function Spark() {
  return (
    <svg width="22" height="22" viewBox="0 0 22 22" aria-hidden="true">
      <path
        d="M 11 1 L 11 21 M 1 11 L 21 11 M 4 4 L 18 18 M 18 4 L 4 18"
        stroke="var(--cyan)"
        strokeWidth="0.6"
        opacity="0.55"
      />
      <circle cx="11" cy="11" r="2" fill="var(--cyan)" />
    </svg>
  );
}

function WordReveal({ text, play, baseDelay = 0, step = 60, className = "", style = {}, clip = true }) {
  const words = String(text).split(" ");
  return (
    <span className={className} style={{ display: "inline", ...style }}>
      {words.map((w, i) => {
        const delay = baseDelay + i * step;
        return (
          <span
            key={i}
            style={{
              display: "inline-block",
              overflow: clip ? "hidden" : "visible",
              verticalAlign: "baseline",
            }}
          >
            <span
              style={{
                display: "inline-block",
                transform: play || !clip ? "translateY(0)" : "translateY(110%)",
                opacity: play ? 1 : 0,
                transition: clip
                  ? `transform 720ms cubic-bezier(.16,.84,.3,1) ${delay}ms, opacity 600ms ease ${delay}ms`
                  : `opacity 600ms ease ${delay}ms`,
                paddingBottom: "0.08em",
              }}
            >
              {w}
              {i < words.length - 1 && " "}
            </span>
          </span>
        );
      })}
    </span>
  );
}

function Tilt({ children, max = 6, scale = 1.0, className = "", style = {} }) {
  const ref = useFxRef(null);
  useFxEffect(() => {
    const el = ref.current;
    if (!el) return;
    if (window.matchMedia && window.matchMedia("(hover: none), (pointer: coarse)").matches) {
      return;
    }
    let raf = null;
    const onMove = (e) => {
      const r = el.getBoundingClientRect();
      const px = (e.clientX - r.left) / r.width - 0.5;
      const py = (e.clientY - r.top) / r.height - 0.5;
      if (raf) cancelAnimationFrame(raf);
      raf = requestAnimationFrame(() => {
        el.style.transform = `perspective(900px) rotateX(${-py * max}deg) rotateY(${px * max}deg) scale(${scale})`;
      });
    };
    const onLeave = () => {
      if (raf) cancelAnimationFrame(raf);
      el.style.transform = "perspective(900px) rotateX(0deg) rotateY(0deg) scale(1)";
    };
    el.addEventListener("mousemove", onMove);
    el.addEventListener("mouseleave", onLeave);
    return () => {
      el.removeEventListener("mousemove", onMove);
      el.removeEventListener("mouseleave", onLeave);
      if (raf) cancelAnimationFrame(raf);
    };
  }, [max, scale]);
  return (
    <div
      ref={ref}
      className={className}
      style={{
        transition: "transform 350ms cubic-bezier(.16,.84,.3,1)",
        transformStyle: "preserve-3d",
        willChange: "transform",
        ...style,
      }}
    >
      {children}
    </div>
  );
}

function useMouseGlow() {
  const ref = useFxRef(null);
  useFxEffect(() => {
    const el = ref.current;
    if (!el) return;
    let raf = null;
    const onMove = (e) => {
      const r = el.getBoundingClientRect();
      const mx = (e.clientX - r.left) / r.width;
      const my = (e.clientY - r.top) / r.height;
      if (raf) cancelAnimationFrame(raf);
      raf = requestAnimationFrame(() => {
        el.style.setProperty("--mx", mx);
        el.style.setProperty("--my", my);
      });
    };
    el.addEventListener("mousemove", onMove);
    return () => {
      el.removeEventListener("mousemove", onMove);
      if (raf) cancelAnimationFrame(raf);
    };
  }, []);
  return ref;
}

function FloatingCTA({ show, phone, ICONS }) {
  return (
    <a
      href={`tel:${phone.replace(/\s/g, "")}`}
      aria-label="Llamar a Lyncared"
      className="lyn-float-cta"
      style={{
        position: "fixed",
        right: 16,
        bottom: 16,
        zIndex: 80,
        display: "inline-flex",
        alignItems: "center",
        gap: 12,
        padding: "12px 22px 12px 14px",
        borderRadius: 999,
        background: "var(--cyan)",
        color: "var(--navy-900)",
        boxShadow: "0 16px 50px -10px rgba(94, 233, 242, 0.6), 0 0 0 1px rgba(94, 233, 242, 0.4)",
        fontFamily: "var(--font-display)",
        fontSize: 14,
        fontWeight: 500,
        transform: show ? "translateY(0)" : "translateY(140%)",
        opacity: show ? 1 : 0,
        transition: "transform 500ms cubic-bezier(.16,.84,.3,1), opacity 400ms ease",
        pointerEvents: show ? "auto" : "none",
      }}
    >
      <span
        style={{
          width: 30,
          height: 30,
          borderRadius: 999,
          background: "var(--navy-900)",
          color: "var(--cyan)",
          display: "inline-flex",
          alignItems: "center",
          justifyContent: "center",
          animation: "lyn-call-bounce 2.4s ease-in-out infinite",
        }}
      >
        <span style={{ width: 13, height: 13, display: "inline-flex" }}>{ICONS.phone}</span>
      </span>
      <span className="lyn-float-cta-label">{phone}</span>
      <style>{`
        @keyframes lyn-call-bounce {
          0%, 100% { transform: rotate(0); }
          7% { transform: rotate(-12deg); }
          14% { transform: rotate(12deg); }
          21% { transform: rotate(-8deg); }
          28% { transform: rotate(8deg); }
          35%, 100% { transform: rotate(0); }
        }
        @media (max-width: 540px) {
          .lyn-float-cta { padding: 10px 14px !important; }
          .lyn-float-cta-label { display: none; }
        }
      `}</style>
    </a>
  );
}

function LightningBolt({ delay = 0, style = {}, color = "var(--cyan)" }) {
  return (
    <svg viewBox="0 0 40 120" width="40" height="120" style={style} aria-hidden="true">
      <path
        d="M 22 4 L 6 60 L 18 60 L 14 116 L 36 50 L 22 50 L 28 4 Z"
        fill="none"
        stroke={color}
        strokeWidth="1.2"
        strokeLinejoin="round"
        style={{
          strokeDasharray: 280,
          strokeDashoffset: 280,
          animation: `lyn-bolt-draw 2s ease-out ${delay}ms forwards, lyn-bolt-pulse 3s ease-in-out ${delay + 2000}ms infinite`,
        }}
      />
      <style>{`
        @keyframes lyn-bolt-draw { to { stroke-dashoffset: 0; } }
        @keyframes lyn-bolt-pulse {
          0%, 100% { opacity: 0.5; }
          50% { opacity: 1; filter: drop-shadow(0 0 8px ${color}); }
        }
      `}</style>
    </svg>
  );
}

Object.assign(window, {
  Marquee,
  WordReveal,
  Tilt,
  useMouseGlow,
  FloatingCTA,
  LightningBolt,
});