"use client";

import { useEffect, useState } from "react";
import { ArrowLeft, ArrowRight, Bot, CalendarClock, FileText, ListChecks } from "lucide-react";
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";

const slides = [
  {
    icon: Bot,
    eyebrow: "Step 01",
    title: "Invite the bot to your meeting",
    description: "Paste a Meet, Teams, Zoom, or Jitsi link and let the recording assistant join as a visible participant.",
    metric: "Multi-platform",
  },
  {
    icon: FileText,
    eyebrow: "Step 02",
    title: "Capture every important detail",
    description: "Generate transcripts with speaker labels, timestamps, searchable text, and recording playback.",
    metric: "Transcript ready",
  },
  {
    icon: ListChecks,
    eyebrow: "Step 03",
    title: "Turn discussion into action",
    description: "AI summaries pull out decisions, key points, pending action items, and owner follow-ups.",
    metric: "Action focused",
  },
  {
    icon: CalendarClock,
    eyebrow: "Step 04",
    title: "Automate recurring meeting notes",
    description: "Calendar automation can prepare the bot for upcoming calls so teams do not have to remember setup.",
    metric: "Less manual work",
  },
];

export function HomeCarousel() {
  const [active, setActive] = useState(0);
  const slide = slides[active];
  const Icon = slide.icon;

  useEffect(() => {
    const timer = window.setInterval(() => {
      setActive((current) => (current + 1) % slides.length);
    }, 5000);

    return () => window.clearInterval(timer);
  }, []);

  const goToPrevious = () => {
    setActive((current) => (current - 1 + slides.length) % slides.length);
  };

  const goToNext = () => {
    setActive((current) => (current + 1) % slides.length);
  };

  return (
    <section className="rounded-xl border border-gray-200 bg-white p-4 shadow-sm dark:border-gray-800 dark:bg-gray-900 sm:p-5">
      <div className="flex items-center justify-between gap-3">
        <div>
          <p className="text-xs font-semibold uppercase text-blue-600 dark:text-blue-400">{slide.eyebrow}</p>
          <h2 className="mt-1 text-lg font-semibold text-gray-900 dark:text-gray-100">How it works</h2>
        </div>
        <div className="flex items-center gap-2">
          <Button type="button" variant="outline" size="icon" aria-label="Previous slide" onClick={goToPrevious}>
            <ArrowLeft className="h-4 w-4" />
          </Button>
          <Button type="button" variant="outline" size="icon" aria-label="Next slide" onClick={goToNext}>
            <ArrowRight className="h-4 w-4" />
          </Button>
        </div>
      </div>

      <div className="mt-5 grid gap-4 md:grid-cols-[auto_1fr_auto] md:items-center">
        <div className="flex h-12 w-12 items-center justify-center rounded-lg bg-blue-50 dark:bg-blue-950">
          <Icon className="h-6 w-6 text-blue-600 dark:text-blue-400" />
        </div>
        <div>
          <p className="text-base font-semibold text-gray-900 dark:text-gray-100">{slide.title}</p>
          <p className="mt-2 text-sm leading-6 text-gray-600 dark:text-gray-400">{slide.description}</p>
        </div>
        <div className="rounded-lg border border-gray-200 bg-gray-50 px-3 py-2 text-sm font-semibold text-gray-700 dark:border-gray-800 dark:bg-gray-950 dark:text-gray-300">
          {slide.metric}
        </div>
      </div>

      <div className="mt-5 flex gap-2">
        {slides.map((item, index) => (
          <button
            key={item.title}
            type="button"
            aria-label={`Go to ${item.title}`}
            onClick={() => setActive(index)}
            className={cn(
              "h-2 flex-1 rounded-full transition-colors",
              index === active ? "bg-blue-600" : "bg-gray-200 hover:bg-gray-300 dark:bg-gray-800 dark:hover:bg-gray-700"
            )}
          />
        ))}
      </div>
    </section>
  );
}