"use client";

import { motion } from "framer-motion";
import { ArrowRight, PlayCircle, CheckCheck, TrendingUp, Users, Zap } from "lucide-react";
import { Button } from "@/components/ui/button";
import { useMouseParallax } from "@/hooks/use-mouse-parallax";

export function Hero() {
  const { ref, x, y } = useMouseParallax(16);

  return (
    <section id="top" ref={ref} className="relative overflow-hidden pb-24 pt-16 sm:pb-32 sm:pt-24">
      {/* Background */}
      <div className="pointer-events-none absolute inset-0 -z-10 bg-grid mask-fade-b" />
      <div className="pointer-events-none absolute inset-0 -z-10 bg-radial-glow" />
      <div className="pointer-events-none absolute -left-32 top-10 -z-10 h-72 w-72 rounded-full bg-whatsapp/30 blur-3xl animate-blob" />
      <div className="pointer-events-none absolute -right-24 top-40 -z-10 h-96 w-96 rounded-full bg-emerald-400/20 blur-3xl animate-blob [animation-delay:2s]" />
      <div className="pointer-events-none absolute left-1/3 top-96 -z-10 h-64 w-64 rounded-full bg-whatsapp-dark/20 blur-3xl animate-blob [animation-delay:4s]" />

      <div className="container relative">
        <div className="mx-auto flex max-w-3xl flex-col items-center text-center">
          <motion.div
            initial={{ opacity: 0, y: 12 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6 }}
            className="eyebrow"
          >
            <span className="relative flex h-2 w-2">
              <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-whatsapp opacity-75" />
              <span className="relative inline-flex h-2 w-2 rounded-full bg-whatsapp" />
            </span>
            Trusted by 12,500+ businesses worldwide
          </motion.div>

          <motion.h1
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.7, delay: 0.1 }}
            className="mt-6 text-4xl font-bold leading-[1.08] tracking-tight text-ink-900 sm:text-6xl dark:text-white"
          >
            Scale customer conversations with the{" "}
            <span className="gradient-text">official WhatsApp Business API</span>
          </motion.h1>

          <motion.p
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.7, delay: 0.2 }}
            className="mt-6 max-w-xl text-lg text-ink-600 dark:text-white/60"
          >
            One platform to broadcast campaigns, automate support, and manage every
            conversation, built on Meta&apos;s official API and ready to launch in a day.
          </motion.p>

          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.7, delay: 0.3 }}
            className="mt-9 flex flex-col items-center gap-4 sm:flex-row"
          >
            <Button size="lg" className="btn-glow group">
              Start Free
              <ArrowRight className="h-4 w-4 transition-transform group-hover:translate-x-1" />
            </Button>
            <Button size="lg" variant="outline" className="group">
              <PlayCircle className="h-5 w-5 text-whatsapp" />
              Book Demo
            </Button>
          </motion.div>

          <motion.div
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            transition={{ duration: 0.7, delay: 0.45 }}
            className="mt-8 flex flex-wrap items-center justify-center gap-x-6 gap-y-2 text-xs font-medium text-ink-500 dark:text-white/40"
          >
            <span className="flex items-center gap-1.5">
              <CheckCheck className="h-4 w-4 text-whatsapp" /> No credit card required
            </span>
            <span className="flex items-center gap-1.5">
              <CheckCheck className="h-4 w-4 text-whatsapp" /> Official Meta partner
            </span>
            <span className="flex items-center gap-1.5">
              <CheckCheck className="h-4 w-4 text-whatsapp" /> Setup in 24 hours
            </span>
          </motion.div>
        </div>

        {/* Dashboard illustration */}
        <motion.div
          initial={{ opacity: 0, y: 60 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.9, delay: 0.4, ease: [0.22, 1, 0.36, 1] }}
          className="relative mx-auto mt-20 max-w-5xl"
        >
          <motion.div style={{ x, y }} className="glass-card relative overflow-hidden p-3 sm:p-4">
            <div className="flex items-center gap-1.5 border-b border-ink-900/5 px-3 pb-3 dark:border-white/10">
              <span className="h-2.5 w-2.5 rounded-full bg-red-400" />
              <span className="h-2.5 w-2.5 rounded-full bg-amber-400" />
              <span className="h-2.5 w-2.5 rounded-full bg-whatsapp" />
              <span className="ml-3 text-xs font-medium text-ink-400 dark:text-white/30">
                app.chatnest.io/inbox
              </span>
            </div>

            <div className="grid grid-cols-1 gap-3 p-3 sm:grid-cols-[220px_1fr] sm:p-4">
              {/* sidebar */}
              <div className="hidden flex-col gap-2 rounded-2xl bg-ink-900/[0.03] p-3 sm:flex dark:bg-white/[0.03]">
                {["All Chats", "Unassigned", "My Chats", "Broadcasts", "Contacts"].map((item, i) => (
                  <div
                    key={item}
                    className={`rounded-xl px-3 py-2 text-sm font-medium ${
                      i === 0
                        ? "bg-whatsapp text-ink-950"
                        : "text-ink-500 dark:text-white/50"
                    }`}
                  >
                    {item}
                  </div>
                ))}
              </div>

              {/* chat panel */}
              <div className="flex flex-col gap-3 rounded-2xl bg-ink-900/[0.03] p-4 dark:bg-white/[0.03]">
                <ChatBubble align="left" text="Hi! Do you have this in size M?" time="10:02" />
                <ChatBubble
                  align="right"
                  text="Yes! It's in stock, want me to send a checkout link?"
                  time="10:03"
                  read
                />
                <ChatBubble align="left" text="Yes please 🙌" time="10:04" />
                <div className="mt-1 flex items-center gap-2 rounded-xl border border-dashed border-whatsapp/40 bg-whatsapp/5 px-3 py-2 text-xs text-whatsapp-dark dark:text-whatsapp-light">
                  <Zap className="h-3.5 w-3.5" /> AI Assistant suggested a reply
                </div>
              </div>
            </div>
          </motion.div>

          {/* Floating analytics cards */}
          <motion.div
            animate={{ y: [0, -14, 0] }}
            transition={{ duration: 6, repeat: Infinity, ease: "easeInOut" }}
            className="glass-card absolute -left-6 top-8 hidden w-48 p-4 sm:-left-10 sm:block"
          >
            <div className="flex items-center gap-2 text-xs font-medium text-ink-500 dark:text-white/50">
              <TrendingUp className="h-4 w-4 text-whatsapp" /> Delivery rate
            </div>
            <div className="mt-1 text-2xl font-bold text-ink-900 dark:text-white">98.6%</div>
            <div className="mt-2 h-1.5 w-full overflow-hidden rounded-full bg-ink-900/10 dark:bg-white/10">
              <div className="h-full w-[98%] rounded-full bg-gradient-to-r from-whatsapp-dark to-whatsapp" />
            </div>
          </motion.div>

          <motion.div
            animate={{ y: [0, 14, 0] }}
            transition={{ duration: 7, repeat: Infinity, ease: "easeInOut", delay: 0.5 }}
            className="glass-card absolute -right-4 bottom-4 hidden w-52 p-4 sm:-right-10 sm:block"
          >
            <div className="flex items-center gap-2 text-xs font-medium text-ink-500 dark:text-white/50">
              <Users className="h-4 w-4 text-whatsapp" /> Active conversations
            </div>
            <div className="mt-1 text-2xl font-bold text-ink-900 dark:text-white">3,208</div>
            <div className="mt-2 flex -space-x-2">
              {["#25D366", "#16A34A", "#4ADE80", "#0B1220"].map((c, i) => (
                <span
                  key={i}
                  className="h-6 w-6 rounded-full border-2 border-white dark:border-ink-900"
                  style={{ backgroundColor: c }}
                />
              ))}
            </div>
          </motion.div>
        </motion.div>
      </div>
    </section>
  );
}

function ChatBubble({
  align,
  text,
  time,
  read,
}: {
  align: "left" | "right";
  text: string;
  time: string;
  read?: boolean;
}) {
  return (
    <motion.div
      initial={{ opacity: 0, x: align === "left" ? -12 : 12 }}
      whileInView={{ opacity: 1, x: 0 }}
      viewport={{ once: true }}
      transition={{ duration: 0.5 }}
      className={`flex ${align === "right" ? "justify-end" : "justify-start"}`}
    >
      <div
        className={`max-w-[75%] rounded-2xl px-3.5 py-2 text-sm shadow-sm ${
          align === "right"
            ? "rounded-tr-sm bg-whatsapp text-ink-950"
            : "rounded-tl-sm bg-white text-ink-800 dark:bg-white/10 dark:text-white/90"
        }`}
      >
        {text}
        <div
          className={`mt-1 flex items-center justify-end gap-1 text-[10px] ${
            align === "right" ? "text-ink-950/60" : "text-ink-400 dark:text-white/40"
          }`}
        >
          {time}
          {read && <CheckCheck className="h-3 w-3" />}
        </div>
      </div>
    </motion.div>
  );
}