"use client";

import { useState } from "react";
import Link from "next/link";
import { SITE, type Lang } from "@/lib/config";

export interface HighIntentCTAProps {
  lang: Lang;
  variant?: "hero" | "section" | "inline" | "sticky";
  showDemo?: boolean;
  showWhatsApp?: boolean;
  showCall?: boolean;
  showPricing?: boolean;
  className?: string;
  title?: string;
  subtitle?: string;
}

const translations = {
  en: {
    bookDemo: "Book a Demo",
    scheduleCall: "Schedule a Call",
    chatWhatsApp: "Chat on WhatsApp",
    viewPricing: "View Pricing",
    talkToExpert: "Talk to an Expert",
    freeTrialBadge: "14-Day Free Trial",
    noCardRequired: "No credit card required",
    responseTime: "Response within 2 hours",
    or: "or",
  },
  ar: {
    bookDemo: "احجز عرضاً",
    scheduleCall: "حدد موعد مكالمة",
    chatWhatsApp: "تواصل عبر واتساب",
    viewPricing: "عرض الأسعار",
    talkToExpert: "تحدث مع خبير",
    freeTrialBadge: "تجربة مجانية 14 يوماً",
    noCardRequired: "لا حاجة لبطاقة ائتمان",
    responseTime: "الرد خلال ساعتين",
    or: "أو",
  },
};

export default function HighIntentCTA({
  lang,
  variant = "section",
  showDemo = true,
  showWhatsApp = true,
  showCall = false,
  showPricing = false,
  className = "",
  title,
  subtitle,
}: HighIntentCTAProps) {
  const t = translations[lang];
  const dir = lang === "ar" ? "rtl" : "ltr";
  const [isHovering, setIsHovering] = useState<string | null>(null);

  const whatsappUrl = `https://wa.me/${SITE.contact.whatsapp}?text=${encodeURIComponent(
    lang === "ar"
      ? "مرحباً، أريد معرفة المزيد عن موعدي"
      : "Hi, I want to learn more about Mawidi",
  )}`;

  const phoneUrl = `tel:${SITE.contact.phone}`;

  // Variant-specific styles
  const variantStyles = {
    hero: "py-0",
    section: "py-12 px-6 bg-slate-50 dark:bg-slate-900/50 rounded-2xl",
    inline: "py-4",
    sticky:
      "fixed bottom-0 left-0 right-0 py-4 px-6 bg-white dark:bg-slate-900 shadow-2xl shadow-slate-900/20 border-t border-slate-200 dark:border-slate-800 z-50",
  };

  const buttonBaseStyles = `
    inline-flex items-center justify-center gap-2
    px-6 py-3.5
    font-semibold text-base
    rounded-xl
    transition-all duration-200
    focus:outline-none focus:ring-2 focus:ring-offset-2
  `;

  const primaryButtonStyles = `
    ${buttonBaseStyles}
    bg-brand-green hover:bg-brand-greenHover
    text-white
    shadow-lg shadow-brand-green/25
    hover:shadow-xl hover:shadow-brand-green/30
    hover:-translate-y-0.5
    focus:ring-brand-green
  `;

  const secondaryButtonStyles = `
    ${buttonBaseStyles}
    bg-white dark:bg-slate-800
    text-slate-900 dark:text-white
    border-2 border-slate-200 dark:border-slate-700
    hover:border-brand-green hover:text-brand-green
    dark:hover:border-brand-green dark:hover:text-brand-green
    focus:ring-slate-400
  `;

  const whatsappButtonStyles = `
    ${buttonBaseStyles}
    bg-[#25D366] hover:bg-[#20BD5A]
    text-white
    shadow-lg shadow-[#25D366]/25
    hover:shadow-xl hover:shadow-[#25D366]/30
    hover:-translate-y-0.5
    focus:ring-[#25D366]
  `;

  return (
    <div className={`${variantStyles[variant]} ${className}`} dir={dir}>
      {/* Title & Subtitle for section variant */}
      {variant === "section" && (title || subtitle) && (
        <div className="text-center mb-8">
          {title && (
            <h3 className="text-2xl md:text-3xl font-bold text-slate-900 dark:text-white mb-2">
              {title}
            </h3>
          )}
          {subtitle && (
            <p className="text-slate-600 dark:text-slate-400 max-w-xl mx-auto">
              {subtitle}
            </p>
          )}
        </div>
      )}

      {/* CTA Buttons */}
      <div
        className={`flex flex-wrap items-center gap-4 ${variant === "section" ? "justify-center" : ""}`}
      >
        {/* Primary: Book Demo */}
        {showDemo && (
          <Link
            href={`/${lang}/demo`}
            className={primaryButtonStyles}
            onMouseEnter={() => setIsHovering("demo")}
            onMouseLeave={() => setIsHovering(null)}
          >
            <svg
              className={`w-5 h-5 transition-transform ${isHovering === "demo" ? "scale-110" : ""}`}
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
            >
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth={2}
                d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
              />
            </svg>
            {t.bookDemo}
            <span
              className={`transition-transform ${lang === "ar" ? "rotate-180" : ""} ${isHovering === "demo" ? "translate-x-1" : ""}`}
            >
              &rarr;
            </span>
          </Link>
        )}

        {/* WhatsApp */}
        {showWhatsApp && (
          <a
            href={whatsappUrl}
            target="_blank"
            rel="noopener noreferrer"
            className={whatsappButtonStyles}
            onMouseEnter={() => setIsHovering("whatsapp")}
            onMouseLeave={() => setIsHovering(null)}
          >
            <svg
              className={`w-5 h-5 transition-transform ${isHovering === "whatsapp" ? "scale-110" : ""}`}
              fill="currentColor"
              viewBox="0 0 24 24"
            >
              <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z" />
            </svg>
            {t.chatWhatsApp}
          </a>
        )}

        {/* Schedule Call */}
        {showCall && (
          <a
            href={phoneUrl}
            className={secondaryButtonStyles}
            onMouseEnter={() => setIsHovering("call")}
            onMouseLeave={() => setIsHovering(null)}
          >
            <svg
              className={`w-5 h-5 transition-transform ${isHovering === "call" ? "animate-pulse" : ""}`}
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
            >
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth={2}
                d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"
              />
            </svg>
            {t.scheduleCall}
          </a>
        )}

        {/* View Pricing */}
        {showPricing && (
          <Link
            href={`/${lang}/pricing`}
            className={secondaryButtonStyles}
            onMouseEnter={() => setIsHovering("pricing")}
            onMouseLeave={() => setIsHovering(null)}
          >
            <svg
              className={`w-5 h-5 transition-transform ${isHovering === "pricing" ? "scale-110" : ""}`}
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
            >
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth={2}
                d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
              />
            </svg>
            {t.viewPricing}
          </Link>
        )}
      </div>

      {/* Trust indicators */}
      {variant === "section" && (
        <div className="flex flex-wrap justify-center gap-6 mt-6 text-sm text-slate-500 dark:text-slate-400">
          <div className="flex items-center gap-2">
            <svg
              className="w-4 h-4 text-brand-green"
              fill="currentColor"
              viewBox="0 0 20 20"
            >
              <path
                fillRule="evenodd"
                d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
                clipRule="evenodd"
              />
            </svg>
            <span>{t.freeTrialBadge}</span>
          </div>
          <div className="flex items-center gap-2">
            <svg
              className="w-4 h-4 text-brand-green"
              fill="currentColor"
              viewBox="0 0 20 20"
            >
              <path
                fillRule="evenodd"
                d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
                clipRule="evenodd"
              />
            </svg>
            <span>{t.noCardRequired}</span>
          </div>
          <div className="flex items-center gap-2">
            <svg
              className="w-4 h-4 text-brand-green"
              fill="currentColor"
              viewBox="0 0 20 20"
            >
              <path
                fillRule="evenodd"
                d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
                clipRule="evenodd"
              />
            </svg>
            <span>{t.responseTime}</span>
          </div>
        </div>
      )}
    </div>
  );
}