import Link from "next/link";
import { Mail } from "lucide-react";
import ServiceCard from "@/components/ui/service-card";
import Breadcrumbs from "@/components/ui/breadcrumbs";
import { getWhatsAppUrl } from "@/lib/whatsapp";
import { WhatsAppIcon } from "@/components/ui/whatsapp-icon";
import { SERVICES_QUERY_RESULT } from "@/sanity.types";

export interface ServicesViewProps {
  /** Destination wedding and B2B services dynamically fetched from Sanity CMS */
  services?: SERVICES_QUERY_RESULT;
}

export default function ServicesView({ services = [] }: ServicesViewProps) {
  const breadcrumbLinks = [
    { label: "Home", href: "/" },
    { label: "Services", href: "#" },
  ];

  return (
    <div className="bg-brand-ivory">
      {/* 1. HERO SECTION */}
      <section className="hero-pattern pt-12 pb-16 lg:pt-20 lg:pb-24 border-b border-brand-border/60">
        <div className="container max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <Breadcrumbs links={breadcrumbLinks} />

          <div className="max-w-3xl mx-auto text-center mt-6">
            <div className="inline-flex items-center gap-3 mb-6">
              <span className="w-8 h-px bg-brand-gold/60" />
              <span className="text-xs font-semibold tracking-[0.25em] text-brand-gold uppercase">
                Private Consultancy &amp; Advisory
              </span>
              <span className="w-8 h-px bg-brand-gold/60" />
            </div>

            <h1 className="font-title text-3xl sm:text-4xl lg:text-5xl font-bold text-brand-dark mb-6">
              Bespoke <span className="gold-gradient-text">Advisory Services</span>
            </h1>

            <p className="text-base sm:text-lg text-brand-muted leading-relaxed max-w-2xl mx-auto mb-10">
              Whether you are an international couple planning from abroad or a luxury resort team positioning for global destination weddings, our independent advisory brings peace of mind and strategic rigor.
            </p>

            <div className="flex flex-col sm:flex-row items-center justify-center gap-4">
              <Link
                href="/contact"
                className="w-full sm:w-auto inline-flex items-center justify-center gap-2.5 bg-brand-gold hover:bg-brand-gold-hover text-white px-8 py-3.5 rounded-full font-medium tracking-wide shadow-sm hover:shadow-md transition-all duration-300"
              >
                <Mail className="w-4 h-4 text-white" />
                <span>Inquire Now</span>
              </Link>
              <a
                href={getWhatsAppUrl("Hello Nhi, I would like to inquire about your wedding advisory services in Vietnam.")}
                target="_blank"
                rel="noopener noreferrer"
                className="w-full sm:w-auto inline-flex items-center justify-center gap-2.5 bg-white hover:bg-brand-sand text-brand-dark border border-brand-border hover:border-brand-gold px-8 py-3.5 rounded-full font-medium tracking-wide transition-all duration-300 shadow-xs hover:-translate-y-0.5"
              >
                <WhatsAppIcon className="w-4 h-4 fill-[#25D366] shrink-0" />
                <span>Chat on WhatsApp</span>
              </a>
            </div>
          </div>
        </div>
      </section>

      {/* 2. SERVICES GRID */}
      <section className="py-20 lg:py-28">
        <div className="container max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 max-w-5xl mx-auto">
            {services && services.length > 0 ? (
              services.map((service) => {
                const slugStr =
                  typeof service.slug === "object" && service.slug !== null
                    ? (service.slug as { current?: string }).current
                    : typeof service.slug === "string"
                    ? service.slug
                    : undefined;
                const isCouples = service.targetAudience === "couples";
                const defaultCtaText = isCouples
                  ? "Inquire on WhatsApp"
                  : "Contact for B2B Advisory";
                const defaultCtaUrl = getWhatsAppUrl(
                  `Hello Nhi, I would like to inquire about ${service.title || "your advisory services"}.`
                );

                return (
                  <ServiceCard
                    key={service._id}
                    title={service.title || "Advisory Service"}
                    slug={slugStr}
                    targetAudience={service.targetAudience || "couples"}
                    featured={isCouples}
                    tagline={service.tagline ?? undefined}
                    shortDescription={service.shortDescription ?? undefined}
                    features={service.features ?? []}
                    pricing={service.pricing ?? undefined}
                    ctaText={service.ctaText || defaultCtaText}
                    ctaUrl={service.ctaUrl || defaultCtaUrl}
                  />
                );
              })
            ) : (
              <>
                <ServiceCard
                  title="Private Couple Consultation"
                  slug="private-consultant"
                  targetAudience="couples"
                  featured={true}
                  tagline="1-on-1 unbiased planning navigation & budget stress-testing"
                  shortDescription="Designed for international couples planning a destination wedding in Vietnam who need honest insider scrutiny on quotes, vendor selections, and contract terms without conflict of interest."
                  features={[
                    "Unbiased venue & region shortlisting (Da Nang, Phu Quoc, Nha Trang)",
                    "Full budget modeling with hidden fee & import tariff audit",
                    "Vendor contract scrutiny and milestone timeline validation",
                    "Direct WhatsApp support during critical decision phases",
                  ]}
                  pricing="From $111 USD / Hour"
                  ctaText="Inquire on WhatsApp"
                  ctaUrl={getWhatsAppUrl(
                    "Hello Nhi, I would like to inquire about the Private Couple Consultation."
                  )}
                />

                <ServiceCard
                  title="B2B Venue & Partner Advisory"
                  slug="b2b"
                  targetAudience="professionals"
                  featured={false}
                  tagline="Elevating Vietnamese luxury hospitality to global wedding standards"
                  shortDescription="Consultancy for resorts, hotels, and premium vendors seeking to attract high-net-worth international destination couples and optimize their event yield."
                  features={[
                    "International wedding package & collateral experience audit",
                    "Cross-cultural bridal expectations & culinary protocol training",
                    "B2B partner matchmaking and editorial showcase opportunities",
                    "Market positioning & high-ticket revenue model design",
                  ]}
                  pricing="Tailored Engagement on Request"
                  ctaText="Contact for B2B Advisory"
                  ctaUrl={getWhatsAppUrl(
                    "Hello Nhi, I would like to inquire about B2B Venue Advisory."
                  )}
                />
              </>
            )}
          </div>
        </div>
      </section>
    </div>
  );
}