import { cn } from "@/lib/utils";
import Link from "next/link";
import { Check, ArrowUpRight } from "lucide-react";
import { WhatsAppIcon } from "@/components/ui/whatsapp-icon";

export interface ServiceCardProps {
  title: string;
  slug?: string;
  targetAudience: "couples" | "professionals" | string;
  tagline?: string;
  shortDescription?: string;
  features?: string[];
  pricing?: string;
  ctaText?: string;
  ctaUrl?: string;
  featured?: boolean;
  className?: string;
}

export default function ServiceCard({
  title,
  slug,
  targetAudience,
  tagline,
  shortDescription,
  features = [],
  pricing,
  ctaText = "Learn More",
  ctaUrl = "/services",
  featured = false,
  className,
}: ServiceCardProps) {
  const isCouples = targetAudience === "couples";
  const audienceLabel = isCouples ? "For Destination Couples" : "For Resorts & Venues";
  const detailHref = slug ? `/services/${slug}` : "/services";
  const isWhatsApp = ctaUrl.includes("wa.me") || ctaUrl.includes("/whatsapp") || ctaText.toLowerCase().includes("whatsapp");

  return (
    <div
      className={cn(
        "card-luxury rounded-3xl p-8 sm:p-10 bg-white border flex flex-col justify-between relative transition-all duration-300",
        featured
          ? "border-brand-gold/60 ring-1 ring-brand-gold/20 shadow-md"
          : "border-brand-border shadow-xs",
        className,
      )}
    >
      {/* Featured Badge */}
      {featured && (
        <div className="absolute -top-3.5 right-8">
          <span className="bg-brand-gold text-white px-3.5 py-1 rounded-full text-2xs font-bold uppercase tracking-widest shadow-xs">
            Signature Advisory
          </span>
        </div>
      )}

      <div>
        {/* Audience Badge */}
        <div className="inline-block mb-4">
          <span className="badge-gold px-3.5 py-1.5 rounded-full text-xs font-semibold text-brand-dark uppercase tracking-wider">
            {audienceLabel}
          </span>
        </div>

        {/* Title & Tagline */}
        <h3 className="font-title text-2xl font-bold text-brand-dark leading-tight">
          {title}
        </h3>
        {tagline && (
          <p className="mt-1.5 text-sm font-medium text-brand-gold">
            {tagline}
          </p>
        )}

        {/* Description */}
        {shortDescription && (
          <p className="mt-4 text-sm text-brand-muted leading-relaxed">
            {shortDescription}
          </p>
        )}

        {/* Deliverables / Features List */}
        {features && features.length > 0 && (
          <div className="mt-6 pt-6 border-t border-brand-border/60">
            <h4 className="text-xs font-semibold uppercase tracking-wider text-brand-dark mb-3">
              Included Deliverables
            </h4>
            <ul className="space-y-2.5">
              {features.map((feature, idx) => (
                <li key={idx} className="flex items-start gap-2.5 text-sm text-brand-dark/90">
                  <span className="shrink-0 mt-0.5 w-4 h-4 rounded-full bg-brand-sand flex items-center justify-center text-brand-gold">
                    <Check size={11} strokeWidth={3} />
                  </span>
                  <span>{feature}</span>
                </li>
              ))}
            </ul>
          </div>
        )}
      </div>

      {/* Pricing & CTA */}
      <div className="mt-8 pt-6 border-t border-brand-border/60">
        {pricing && (
          <div className="mb-4">
            <span className="text-xs text-brand-muted uppercase tracking-wider block">
              Investment Guidance
            </span>
            <span className="font-title text-xl font-bold text-brand-dark">
              {pricing}
            </span>
          </div>
        )}

        <div className="flex flex-col sm:flex-row gap-3">
          {isWhatsApp ? (
            <a
              href={ctaUrl}
              target="_blank"
              rel="noopener noreferrer"
              className="flex-1 inline-flex items-center justify-center gap-2 text-center bg-white hover:bg-brand-sand text-brand-dark border border-brand-border hover:border-brand-gold py-3 px-5 rounded-full text-xs font-semibold uppercase tracking-widest transition-all duration-300 shadow-xs hover:shadow-md hover:-translate-y-0.5"
            >
              <WhatsAppIcon className="w-4 h-4 fill-[#25D366] shrink-0" />
              <span>{ctaText}</span>
            </a>
          ) : (
            <Link
              href={ctaUrl}
              className="flex-1 inline-flex items-center justify-center text-center bg-brand-gold hover:bg-brand-gold-hover text-white py-3 px-5 rounded-full text-xs font-semibold uppercase tracking-widest transition-all duration-300 shadow-xs hover:shadow-md"
            >
              {ctaText}
            </Link>
          )}
          <Link
            href={detailHref}
            className="inline-flex items-center justify-center gap-1.5 py-3 px-5 rounded-full border border-brand-border hover:border-brand-gold text-brand-dark hover:text-brand-gold text-xs font-medium uppercase tracking-wider transition-all duration-300"
          >
            <span>Overview</span>
            <ArrowUpRight size={14} />
          </Link>
        </div>
      </div>
    </div>
  );
}