"use client";

import Image from "next/image";
import Link from "next/link";
import { useEffect, useState } from "react";
import { UI, type Lang } from "@/lib/config";
import LogoScroller from "./LogoScroller";

const HERO_SLIDES: Record<Lang, Array<{ src: string; alt: string }>> = {
  en: [
    {
      src: "/images/hero-inbox.svg",
      alt: "Conversation inbox showing Arabic and English WhatsApp and voice threads",
    },
    {
      src: "/images/hero-payments.svg",
      alt: "Deposit collection screen with Mada, Apple Pay, and Sadad buttons",
    },
    {
      src: "/images/hero-analytics.svg",
      alt: "Daily reporting dashboard summarising bookings and collections",
    },
  ],
  ar: [
    {
      src: "/images/hero-inbox.svg",
      alt: "صندوق محادثات واتساب والصوت بالعربية والإنجليزية",
    },
    {
      src: "/images/hero-payments.svg",
      alt: "شاشة تحصيل العربون بطرق مدى وآبل باي وسداد",
    },
    {
      src: "/images/hero-analytics.svg",
      alt: "لوحة تقارير يومية للحجوزات والتحصيلات",
    },
  ],
};

export default function Hero({ lang }: { lang: Lang }) {
  const t = UI[lang].t;
  const isAr = lang === "ar";
  const slides = HERO_SLIDES[lang];
  const slideCount = slides.length;

  const title = isAr ? (
    <>
      حوِّل وكلاء الواتساب والاستقبال الصوتي إلى{" "}
      <span className="text-brand-green">جداول ممتلئة</span>
    </>
  ) : (
    <>
      Turn WhatsApp agents and voice reception into{" "}
      <span className="text-brand-green">fully booked diaries</span>
    </>
  );

  const subtitle = isAr
    ? "وكلاء واتساب واستقبال صوتي عند الطلب للعيادات في الخليج—بالعربية والإنجليزية."
    : "WhatsApp agents and voice reception on tap for GCC clinics—native Arabic and English included.";

  const badges = isAr
    ? [
        "طاقم استقبال مدار بالكامل",
        "موافقات واتساب رسمية",
        "تقارير واضحة للمالك",
      ]
    : [
        "Managed reception team",
        "Official WhatsApp approvals",
        "Owner-grade reporting",
      ];

  const [activeIndex, setActiveIndex] = useState(0);

  useEffect(() => {
    setActiveIndex(0);
  }, [lang]);

  useEffect(() => {
    if (slideCount <= 1) return;
    const timer = setInterval(() => {
      setActiveIndex((prev) => (prev + 1) % slideCount);
    }, 6000);
    return () => clearInterval(timer);
  }, [slideCount]);

  return (
    <section className="relative bg-white transition-colors dark:bg-slate-900">
      <div className="mx-auto grid max-w-7xl items-center gap-16 px-6 pb-28 pt-1.5 md:grid-cols-[1.15fr_0.95fr] md:pb-32 md:pt-6">
        <div>
          <div className="inline-flex items-center gap-2 rounded-full bg-white/70 px-4 py-2 text-sm text-brand-green shadow-sm dark:bg-slate-800/60 dark:text-slate-100">
            <span>WhatsApp & Voice Agents • GCC</span>
          </div>
          <h1 className="mt-4 text-5xl font-extrabold leading-tight text-brand-ink md:text-7xl dark:text-slate-100">
            {title}
          </h1>
          <p className="mt-6 text-xl leading-relaxed text-neutral-600 md:text-2xl dark:text-slate-300">
            {subtitle}
          </p>
          <ul className="mt-8 space-y-4 text-lg text-neutral-700 dark:text-slate-200">
            {badges.map((badge) => (
              <li key={badge} className="flex items-center gap-3">
                <span className="inline-flex h-6 w-6 items-center justify-center rounded-full bg-brand-green/10 text-brand-green dark:bg-brand-green/20">
                  ✓
                </span>
                <span>{badge}</span>
              </li>
            ))}
          </ul>
          <div className="mt-10 flex flex-wrap gap-4 text-lg">
            <Link
              href={`/${lang}/contact`}
              className="rounded-lg bg-brand-green px-6 py-3 text-white shadow-sm transition-colors hover:bg-brand-greenHover"
            >
              {isAr ? "احجز جلسة تعريف" : "Book a discovery call"}
            </Link>
            <Link
              href={`/${lang}/pricing`}
              className="rounded-lg border border-brand-green px-6 py-3 text-brand-green transition-colors hover:bg-brand-green hover:text-white"
            >
              {t.ctaSecondary}
            </Link>
          </div>
          <div className="mt-14">
            <p className="text-lg font-semibold uppercase tracking-wider text-neutral-600 dark:text-slate-300">
              {isAr
                ? "موثوق من قبل العديد من الشركات المختلفة"
                : "Trusted by many different companies"}
            </p>
            <LogoScroller />
          </div>
        </div>
        <div className="relative flex h-[300px] w-full items-stretch justify-center overflow-hidden rounded-[32px] bg-white p-10 shadow-2xl dark:bg-slate-800 md:h-[400px]">
          <div className="relative h-full w-full">
            {slides.map((slide, index) => {
              const isActive = index === activeIndex;
              return (
                <Image
                  key={slide.src}
                  src={slide.src}
                  alt={slide.alt}
                  fill
                  className={`object-cover transition-opacity duration-700 ease-out ${
                    isActive ? "opacity-100" : "opacity-0"
                  }`}
                  priority={index === 0}
                />
              );
            })}
          </div>
          <div
            className="pointer-events-none absolute inset-0 rounded-[32px] border border-white/40 dark:border-slate-700/70"
            aria-hidden
          />
          <div className="pointer-events-auto absolute bottom-10 left-1/2 flex -translate-x-1/2 gap-3">
            {slides.map((slide, index) => {
              const isActive = index === activeIndex;
              return (
                <button
                  key={slide.src}
                  type="button"
                  onClick={() => setActiveIndex(index)}
                  className={`h-3 rounded-full transition-all duration-300 ${
                    isActive
                      ? "w-12 bg-brand-green"
                      : "w-3 bg-slate-200 hover:bg-brand-green/60 dark:bg-slate-600"
                  }`}
                  aria-label={
                    isAr
                      ? `عرض الشريحة ${index + 1}`
                      : `Show slide ${index + 1}`
                  }
                  aria-current={isActive}
                />
              );
            })}
          </div>
        </div>
      </div>
    </section>
  );
}