"use client";

import { useState, useEffect, useCallback } from "react";
import Image from "next/image";

const slides = [
  {
    src: "/images/dashboard-real.svg",
    alt: "Paid2Marketing live platform — real dashboard with CRM, SMS, Email, and Analytics",
    label: "Live Platform",
    labelColor: "#28c76f",
  },
  {
    src: "/images/dashboard-mockup.svg",
    alt: "Paid2Marketing analytics dashboard — campaign performance, delivery rates, and revenue",
    label: "Analytics View",
    labelColor: "#6366f1",
  },
];

const INTERVAL = 4000;

export default function HeroSlider() {
  const [current, setCurrent] = useState(0);
  const [paused, setPaused] = useState(false);
  const [fading, setFading] = useState(false);

  const goTo = useCallback((index: number) => {
    if (index === current) return;
    setFading(true);
    setTimeout(() => {
      setCurrent(index);
      setFading(false);
    }, 300);
  }, [current]);

  useEffect(() => {
    if (paused) return;
    const timer = setInterval(() => {
      goTo((current + 1) % slides.length);
    }, INTERVAL);
    return () => clearInterval(timer);
  }, [current, paused, goTo]);

  return (
    <div
      className="relative"
      onMouseEnter={() => setPaused(true)}
      onMouseLeave={() => setPaused(false)}
    >
      {/* Glow */}
      <div className="absolute -inset-4 bg-[#28c76f]/8 blur-[60px] rounded-3xl pointer-events-none" />

      {/* Slide frame */}
      <div
        className="relative rounded-2xl overflow-hidden shadow-2xl shadow-black/40"
        style={{ border: "1px solid var(--border)" }}
      >
        {/* Label pill */}
        <div
          className="absolute top-3 left-3 z-10 flex items-center gap-1.5 px-2.5 py-1 rounded-full text-[10px] font-semibold text-white"
          style={{ background: slides[current].labelColor + "cc" }}
        >
          <span
            className="w-1.5 h-1.5 rounded-full bg-white animate-pulse"
          />
          {slides[current].label}
        </div>

        <div
          style={{
            opacity: fading ? 0 : 1,
            transition: "opacity 0.3s ease",
          }}
        >
          <Image
            src={slides[current].src}
            alt={slides[current].alt}
            width={960}
            height={580}
            className="w-full h-auto"
            priority={current === 0}
          />
        </div>
      </div>

      {/* Dots */}
      <div className="absolute -bottom-6 left-1/2 -translate-x-1/2 flex items-center gap-2">
        {slides.map((_, i) => (
          <button
            key={i}
            onClick={() => goTo(i)}
            aria-label={`Slide ${i + 1}`}
            className="rounded-full transition-all duration-300"
            style={{
              width: i === current ? "20px" : "6px",
              height: "6px",
              background: i === current ? slides[current].labelColor : "var(--border-strong)",
            }}
          />
        ))}
      </div>

      {/* Floating badges */}
      <div className="absolute -bottom-4 -left-4 glass-card rounded-xl px-4 py-3 shadow-xl flex items-center gap-3 z-10">
        <div className="w-8 h-8 rounded-full bg-[#28c76f]/20 flex items-center justify-center text-sm">🚀</div>
        <div>
          <div className="text-xs font-bold" style={{ color: "var(--fg1)" }}>98.2% Delivery Rate</div>
          <div className="text-[10px]" style={{ color: "var(--fg3)" }}>Industry avg: 91%</div>
        </div>
      </div>
      <div className="absolute -top-4 -right-4 glass-card rounded-xl px-4 py-3 shadow-xl flex items-center gap-3 z-10">
        <div className="w-8 h-8 rounded-full bg-[#6366f1]/20 flex items-center justify-center text-sm">📈</div>
        <div>
          <div className="text-xs font-bold" style={{ color: "var(--fg1)" }}>+43% avg ROI</div>
          <div className="text-[10px]" style={{ color: "var(--fg3)" }}>Across all clients</div>
        </div>
      </div>
    </div>
  );
}