"use client";

import { motion } from "framer-motion";
import { ShoppingCart, Headphones, CheckCircle, TrendingUp } from "lucide-react";
import Link from "next/link";
import { useEffect, useRef, useState } from "react";
import AudioPlayer from "react-h5-audio-player";

import { Player } from "@/components/audioPlayer";
import { TypingTranscript, TranscriptLine } from "@/components/TypingTranscript";
import ecommerceData from "@/data/industries/e-commerce-images.json";
import { REGISTER_URL } from "@/lib/links";

function normalizeTranscript(
  transcript: { time: number; speaker: string; text: string }[]
): TranscriptLine[] {
  return transcript.map((line) => ({
    ...line,
    speaker:
      line.speaker === "Agent" || line.speaker === "Customer"
        ? line.speaker
        : "Agent",
  }));
}

const transcript = normalizeTranscript(ecommerceData.ecommerce.transcript);
const audioUrl = ecommerceData.ecommerce.fileUrl;

export function EcommerceHeroSection() {
  const [isPlaying, setIsPlaying] = useState(false);
  const audioRef = useRef<AudioPlayer | null>(null);

  useEffect(() => {
    const audio = audioRef.current?.audio.current;
    if (!audio) return;

    // 🔒 Disable autoplay completely
    audio.autoplay = false;
    audio.preload = "metadata";

    const onPlay = () => setIsPlaying(true);
    const onPause = () => setIsPlaying(false);

    audio.addEventListener("play", onPlay);
    audio.addEventListener("pause", onPause);

    return () => {
      audio.removeEventListener("play", onPlay);
      audio.removeEventListener("pause", onPause);
    };
  }, []);

  useEffect(() => {
    const audio = audioRef.current?.audio.current;
    if (!audio) return;

    const handleLoadedMetadata = () => {
      // force re-render so duration appears
      setIsPlaying((prev) => prev);
    };

    audio.addEventListener("loadedmetadata", handleLoadedMetadata);

    return () => {
      audio.removeEventListener("loadedmetadata", handleLoadedMetadata);
    };
  }, []);

  return (
    <section className="relative pt-32 pb-20 bg-background min-h-screen">
      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">

        {/* Hero */}
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center mb-16">

          {/* LEFT — Content */}
          <div className="text-left relative">
            <div
              className="absolute -left-8 -top-8 h-32 w-32 blur-[80px] opacity-60"
              style={{
                background:
                  "linear-gradient(152.92deg, rgba(var(--primary-rgb), 0.6) 4.54%, rgba(var(--primary-rgb), 0.35) 34.2%, rgba(var(--primary-rgb), 0.95) 77.55%)",
              }}
            />

            <motion.h1
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.6, delay: 0.1 }}
              className="font-geist text-4xl font-light tracking-tighter text-foreground sm:text-5xl lg:text-6xl mb-6 relative z-10"
            >
              Unlock Conversational AI for{" "}
              <span className="text-primary">Ecommerce Excellence</span>
            </motion.h1>

            <motion.p
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.6, delay: 0.2 }}
              className="text-lg leading-8 text-muted-foreground mb-10"
            >
              Elevate your customer experience across channels with QuickVoice&apos;s
              generative AI-powered conversational platform, replicating human-like
              in-store assistance on your online store.
            </motion.p>

            <motion.div
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.6, delay: 0.3 }}
              className="flex justify-start"
            >
              <Link
                href={REGISTER_URL}
                className="relative w-full sm:w-auto overflow-hidden rounded-full border px-8 py-4 text-foreground shadow-lg transition-all duration-300
                bg-gradient-to-b from-white/80 to-white/60 hover:border-gray-300 hover:shadow-md
                dark:bg-gradient-to-b dark:from-white/10 dark:to-white/5 dark:border-white/10
                dark:hover:border-primary/30 dark:hover:shadow-[0_0_20px_rgba(var(--primary-rgb),0.5)]"
              >
                Book a Free Demo
              </Link>
            </motion.div>
          </div>

          {/* RIGHT — AUDIO + TRANSCRIPT */}
          <motion.div
            initial={{ opacity: 0, x: 20 }}
            animate={{ opacity: 1, x: 0 }}
            transition={{ duration: 0.6, delay: 0.4 }}
            className="relative flex flex-col gap-4"
          >
            <div className="rounded-xl border border-border bg-muted p-4 shadow-xl">
              <h3 className="text-sm font-medium text-muted-foreground mb-3">
                Live AI Voice Demo
              </h3>

              {audioUrl ? (
                <Player ref={audioRef} src={audioUrl} />
              ) : (
                <div className="h-16 rounded-md bg-background/50 animate-pulse" />
              )}
            </div>

            <div className="rounded-xl border border-border bg-background shadow-lg">
              {audioUrl ? (
                <TypingTranscript
                  audioRef={audioRef}
                  transcript={transcript}
                  isPlaying={isPlaying}
                />
              ) : (
                <div className="p-4 space-y-2">
                  <div className="h-4 w-3/4 bg-muted rounded animate-pulse" />
                  <div className="h-4 w-2/3 bg-muted rounded animate-pulse" />
                </div>
              )}
            </div>
          </motion.div>
        </div>

        {/* Stats Section */}
        <div className="text-center">
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6, delay: 0.5 }}
            className="grid grid-cols-2 gap-8 sm:grid-cols-4 mb-16"
          >
            <motion.div
              className="text-center group"
              whileHover={{ scale: 1.05 }}
              transition={{ duration: 0.2, ease: "easeOut" }}
            >
              <div className="text-3xl font-bold text-primary mb-2 transition-colors duration-300 group-hover:text-primary/80">
                +40%
              </div>
              <div className="text-sm text-muted-foreground transition-colors duration-300 group-hover:text-foreground/80">
                Conversion Rate
              </div>
            </motion.div>

            <motion.div
              className="text-center group"
              whileHover={{ scale: 1.05 }}
              transition={{ duration: 0.2, ease: "easeOut" }}
            >
              <div className="text-3xl font-bold text-primary mb-2 transition-colors duration-300 group-hover:text-primary/80">
                -60%
              </div>
              <div className="text-sm text-muted-foreground transition-colors duration-300 group-hover:text-foreground/80">
                Support Tickets
              </div>
            </motion.div>

            <motion.div
              className="text-center group"
              whileHover={{ scale: 1.05 }}
              transition={{ duration: 0.2, ease: "easeOut" }}
            >
              <div className="text-3xl font-bold text-primary mb-2 transition-colors duration-300 group-hover:text-primary/80">
                24/7
              </div>
              <div className="text-sm text-muted-foreground transition-colors duration-300 group-hover:text-foreground/80">
                Customer Support
              </div>
            </motion.div>

            <motion.div
              className="text-center group"
              whileHover={{ scale: 1.05 }}
              transition={{ duration: 0.2, ease: "easeOut" }}
            >
              <div className="text-3xl font-bold text-primary mb-2 transition-colors duration-300 group-hover:text-primary/80">
                +35%
              </div>
              <div className="text-sm text-muted-foreground transition-colors duration-300 group-hover:text-foreground/80">
                Customer Satisfaction
              </div>
            </motion.div>
          </motion.div>

          {/* Key Features */}
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6, delay: 0.6 }}
            className="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-4"
          >
            <motion.div
              className="flex flex-col items-center group"
              whileHover={{ scale: 1.05, y: -4 }}
              transition={{ duration: 0.2, ease: "easeOut" }}
            >
              <div className="flex h-16 w-16 items-center justify-center rounded-full bg-primary/10 mb-4 transition-all duration-200 ease-out group-hover:bg-primary/20 group-hover:scale-110">
                <ShoppingCart className="h-8 w-8 text-primary transition-transform duration-200 ease-out group-hover:scale-110" />
              </div>
              <h3 className="text-lg font-semibold text-foreground mb-2 transition-colors duration-200 ease-out group-hover:text-primary">
                Smart Shopping
              </h3>
              <p className="text-sm text-muted-foreground text-center transition-colors duration-200 ease-out group-hover:text-foreground/80">
                AI-guided product recommendations
              </p>
            </motion.div>

            <motion.div
              className="flex flex-col items-center group"
              whileHover={{ scale: 1.05, y: -4 }}
              transition={{ duration: 0.2, ease: "easeOut" }}
            >
              <div className="flex h-16 w-16 items-center justify-center rounded-full bg-primary/10 mb-4 transition-all duration-200 ease-out group-hover:bg-primary/20 group-hover:scale-110">
                <Headphones className="h-8 w-8 text-primary transition-transform duration-200 ease-out group-hover:scale-110" />
              </div>
              <h3 className="text-lg font-semibold text-foreground mb-2 transition-colors duration-200 ease-out group-hover:text-primary">
                Instant Support
              </h3>
              <p className="text-sm text-muted-foreground text-center transition-colors duration-200 ease-out group-hover:text-foreground/80">
                24/7 multilingual customer service
              </p>
            </motion.div>

            <motion.div
              className="flex flex-col items-center group"
              whileHover={{ scale: 1.05, y: -4 }}
              transition={{ duration: 0.2, ease: "easeOut" }}
            >
              <div className="flex h-16 w-16 items-center justify-center rounded-full bg-primary/10 mb-4 transition-all duration-200 ease-out group-hover:bg-primary/20 group-hover:scale-110">
                <TrendingUp className="h-8 w-8 text-primary transition-transform duration-200 ease-out group-hover:scale-110" />
              </div>
              <h3 className="text-lg font-semibold text-foreground mb-2 transition-colors duration-200 ease-out group-hover:text-primary">
                Sales Boost
              </h3>
              <p className="text-sm text-muted-foreground text-center transition-colors duration-200 ease-out group-hover:text-foreground/80">
                Proactive upselling and cross-selling
              </p>
            </motion.div>

            <motion.div
              className="flex flex-col items-center group"
              whileHover={{ scale: 1.05, y: -4 }}
              transition={{ duration: 0.2, ease: "easeOut" }}
            >
              <div className="flex h-16 w-16 items-center justify-center rounded-full bg-primary/10 mb-4 transition-all duration-200 ease-out group-hover:bg-primary/20 group-hover:scale-110">
                <CheckCircle className="h-8 w-8 text-primary transition-transform duration-200 ease-out group-hover:scale-110" />
              </div>
              <h3 className="text-lg font-semibold text-foreground mb-2 transition-colors duration-200 ease-out group-hover:text-primary">
                Easy Integration
              </h3>
              <p className="text-sm text-muted-foreground text-center transition-colors duration-200 ease-out group-hover:text-foreground/80">
                No-code setup with existing tools
              </p>
            </motion.div>
          </motion.div>
        </div>

      </div>
    </section>
  );
}