import Link from "next/link";
import Image from "next/image";
import {
  ArrowRight,
  ShieldCheck,
  Compass,
  CheckCircle2,
  MessageCircle,
  Mail,
  ChevronRight,
  ExternalLink,
  Building2,
  Award,
  Handshake,
} from "lucide-react";
import PostCard from "@/components/ui/post-card";
import VietnamWeddingMap from "@/components/ui/vietnam-wedding-map";
import FounderBioSection from "@/components/sections/founder-bio-section";
import LuxuryCTABanner from "@/components/sections/luxury-cta-banner";
import { getWhatsAppUrl } from "@/lib/whatsapp";
import { WhatsAppIcon } from "@/components/ui/whatsapp-icon";
import { POSTS_QUERY_RESULT, SERVICES_QUERY_RESULT } from "@/sanity.types";
import { SITE_DOMAINS } from "@/lib/constants/site";
import type { SanityVenueItem } from "@/sanity/lib/fetch";

export interface HomepageViewProps {
  posts?: POSTS_QUERY_RESULT;
  services?: SERVICES_QUERY_RESULT;
  venues?: SanityVenueItem[];
}

const curatedVenues = [
  {
    name: "InterContinental Phu Quoc Long Beach Resort",
    region: "Phu Quoc",
    logo: "/images/venues/intercontinental-phu-quoc.webp",
    url: "https://phuquoc.intercontinental.com/",
    width: 203,
    height: 90,
  },
  {
    name: "InterContinental Danang Sun Peninsula Resort",
    region: "Da Nang",
    logo: "/images/venues/intercontinental-danang.webp",
    url: "https://www.danang.intercontinental.com/",
    width: 248,
    height: 98,
  },
  {
    name: "Regent Phu Quoc",
    region: "Phu Quoc",
    logo: "/images/venues/regent-phu-quoc.webp",
    url: "https://phuquoc.regenthotels.com/",
    width: 202,
    height: 92,
  },
  {
    name: "JW Marriott Hotel & Suites Saigon",
    region: "Saigon",
    logo: "/images/venues/jw-marriott-saigon.webp",
    url: "https://www.myclubmarriott.com/hotel/hoteldetail/vi/jw-marriott-hotel-suites-saigon",
    width: 110,
    height: 67,
  },
  {
    name: "An Lam Retreats Saigon River",
    region: "Saigon River",
    logo: "/images/venues/an-lam-retreats-saigon-river.webp",
    url: "https://anlam.com/saigon-river/our-retreat/",
    width: 123,
    height: 124,
  },
  {
    name: "Thiskyhall Sala Convention Center",
    region: "Saigon",
    logo: "/images/venues/thiskyhall.webp",
    url: "https://www.thiskyhall.vn/",
    width: 244,
    height: 100,
  },
];

const fallbackGuides = [
  {
    title: "Vietnam Luxury Wedding Cost: Complete Budget Guide (2025)",
    slug: "vietnam-wedding-guide-part-1",
    excerpt:
      "A comprehensive, transparent breakdown of real venue fees, F&B minimums, decoration production, and logistics across Vietnam's 5-star destination resorts.",
    tag: "Budget & Finance",
  },
  {
    title: "Why Vietnam is the Premier Destination for Your Wedding?",
    slug: "why-vietnam",
    excerpt:
      "From pristine beachfronts in Da Nang and Phu Quoc to historic colonial charm in Da Lat and Hoi An, discover why Vietnam outshines traditional regional wedding hubs.",
    tag: "Destination Guide",
  },
  {
    title: "The Compass Framework: A Project Management Approach",
    slug: "wedding-framework-project-managment",
    excerpt:
      "How to treat your cross-border wedding like a luxury production. Essential milestone calendars, vendor screening checklists, and contingency buffers.",
    tag: "Planning Framework",
  },
];

export default function HomepageView({
  posts = [],
  services = [],
  venues = [],
}: HomepageViewProps) {
  const displayPosts = posts && posts.length > 0 ? posts.slice(0, 3) : null;

  const displayVenues =
    venues && venues.length > 0
      ? venues.map((v) => ({
          name: v.name || "Curated Venue",
          region: v.region || "Vietnam",
          logo:
            v.logo?.asset?.url ||
            v.logoUrl ||
            "/images/venues/intercontinental-phu-quoc.webp",
          url: v.url || "#",
          width: v.width || 200,
          height: v.height || 90,
        }))
      : curatedVenues;

  const coupleService = services?.find(
    (s) =>
      s.targetAudience === "couples" ||
      s.slug?.current === "private-consultant"
  );
  const b2bService = services?.find(
    (s) =>
      s.targetAudience === "professionals" ||
      s.slug?.current === "b2b"
  );

  const coupleTitle = coupleService?.title || "Private Couple Advisory";
  const coupleDesc =
    coupleService?.shortDescription ||
    coupleService?.tagline ||
    "Fiduciary 1-on-1 planning navigation, unbiased Da Nang / Phu Quoc venue shortlisting, and rigorous contract & budget reality stress-testing.";
  const coupleSlug = coupleService?.slug?.current || "private-consultant";
  const coupleCta = coupleService?.ctaText || "Explore Couple Advisory";

  const b2bTitle = b2bService?.title || "B2B Venue & Partner Advisory";
  const b2bDesc =
    b2bService?.shortDescription ||
    b2bService?.tagline ||
    "Strategic consulting for luxury resorts, boutique hotels, and creative vendors seeking to elevate their packages to global luxury standards.";
  const b2bSlug = b2bService?.slug?.current || "b2b";
  const b2bCta = b2bService?.ctaText || "Explore B2B Advisory";

  return (
    <div className="bg-brand-ivory">
      {/* 1. HERO SECTION (SPLIT EDITORIAL LUXURY WITH INTERACTIVE VIETNAM MAP) */}
      <section className="hero-pattern relative overflow-hidden pt-12 pb-16 lg:pt-16 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">
          <div className="grid grid-cols-1 lg:grid-cols-12 gap-10 lg:gap-12 xl:gap-16 items-center">
            {/* Left Column: Editorial Headline, Refined Subtitle & Actions (7 cols) */}
            <div className="lg:col-span-7 xl:col-span-7 text-left">
              {/* Luxury Badge */}
              <div className="inline-flex items-center gap-3 mb-6 animate-fade-up">
                <span className="w-8 h-px bg-brand-gold/60" />
                <span className="text-[11px] sm:text-xs font-semibold tracking-[0.25em] text-brand-gold uppercase">
                  Bespoke Destination Wedding Editorial &amp; Advisory
                </span>
              </div>

              {/* H1 Heading */}
              <h1 className="font-title text-4xl sm:text-5xl lg:text-6xl font-bold tracking-tight text-brand-dark leading-[1.14] mb-6">
                Plan Your Dream Wedding in{" "}
                <span className="gold-gradient-text">Vietnam</span>
              </h1>

              {/* Refined, High-Impact Subtitle */}
              <p className="text-base sm:text-lg text-brand-muted font-normal leading-relaxed mb-8 max-w-xl">
                The independent insider publication and private fiduciary advisory for couples seeking
                extraordinary celebrations across Vietnam&apos;s most coveted coastal and heritage destinations.
              </p>

              {/* CTA Buttons */}
              <div className="flex flex-col sm:flex-row items-stretch sm:items-center gap-4 mb-10">
                <Link
                  href="/contact"
                  className="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"
                >
                  <span>Inquire Now</span>
                  <ArrowRight className="w-4 h-4" />
                </Link>
                <a
                  href={getWhatsAppUrl("Hello Nhi, I would like to inquire about planning a destination wedding in Vietnam.")}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="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>

              {/* Minimalist Luxury Fiduciary Seals (Streamlined from bulky text cards) */}
              <div className="pt-8 border-t border-brand-border/60 grid grid-cols-1 sm:grid-cols-3 gap-4">
                <div className="flex items-center gap-2.5">
                  <div className="w-8 h-8 rounded-full bg-brand-sand flex items-center justify-center text-brand-gold shrink-0">
                    <ShieldCheck className="w-4 h-4" />
                  </div>
                  <div>
                    <h4 className="font-title text-xs font-bold text-brand-dark uppercase tracking-wider">Zero Kickbacks</h4>
                    <p className="text-[11px] text-brand-muted">100% Impartial Fiduciary</p>
                  </div>
                </div>

                <div className="flex items-center gap-2.5">
                  <div className="w-8 h-8 rounded-full bg-brand-sand flex items-center justify-center text-brand-gold shrink-0">
                    <Compass className="w-4 h-4" />
                  </div>
                  <div>
                    <h4 className="font-title text-xs font-bold text-brand-dark uppercase tracking-wider">Local Mastery</h4>
                    <p className="text-[11px] text-brand-muted">Coast, Heritage &amp; Highlands</p>
                  </div>
                </div>

                <div className="flex items-center gap-2.5">
                  <div className="w-8 h-8 rounded-full bg-brand-sand flex items-center justify-center text-brand-gold shrink-0">
                    <CheckCircle2 className="w-4 h-4" />
                  </div>
                  <div>
                    <h4 className="font-title text-xs font-bold text-brand-dark uppercase tracking-wider">Production Rigor</h4>
                    <p className="text-[11px] text-brand-muted">International Standards</p>
                  </div>
                </div>
              </div>
            </div>

            {/* Right Column: Interactive Vietnam Wedding Map (5 cols) */}
            <div className="lg:col-span-5 xl:col-span-5">
              <VietnamWeddingMap />
            </div>
          </div>
        </div>
      </section>

      {/* 2. CURATED VENUE PERSPECTIVE SECTION (1-line transparent marquee, no blocks) */}
      <section className="py-16 lg:py-24 bg-transparent border-b border-brand-border/60 overflow-hidden">
        <div className="container max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="max-w-3xl mx-auto text-center mb-10">
            <span className="text-xs font-semibold tracking-widest text-brand-gold uppercase block mb-3">
              Independent Venue Analysis
            </span>
            <h2 className="font-title text-3xl sm:text-4xl lg:text-5xl font-bold text-brand-dark mb-4">
              Our <span className="gold-gradient-text">Curated Venue</span> Perspective
            </h2>
            <p className="text-base sm:text-lg text-brand-dark/85 leading-relaxed max-w-2xl mx-auto">
              An independent operational benchmark across Vietnam&apos;s leading luxury properties in Phu Quoc, Da Nang, and Saigon — evaluated solely on verified infrastructure and international luxury standards.
            </p>
          </div>

          {/* Single Continuous Horizontal Line (Transparent Background, Marquee-Ready) */}
          <div className="relative w-full overflow-hidden py-8 my-4">
            {/* Edge fade gradients for seamless luxury look */}
            <div className="pointer-events-none absolute inset-y-0 left-0 w-16 sm:w-28 bg-gradient-to-r from-brand-ivory via-brand-ivory/80 to-transparent z-10" />
            <div className="pointer-events-none absolute inset-y-0 right-0 w-16 sm:w-28 bg-gradient-to-l from-brand-ivory via-brand-ivory/80 to-transparent z-10" />

          {/* Marquee Track on 1 single line */}
          <div className="flex w-max items-center gap-14 sm:gap-20 md:gap-24 animate-marquee hover:[animation-play-state:paused] select-none">
            {[...displayVenues, ...displayVenues].map((venue, idx) => (
              <a
                key={`${venue.name}-${idx}`}
                href={venue.url}
                target="_blank"
                rel="noopener noreferrer"
                className="group inline-flex items-center justify-center transition-all duration-300 shrink-0"
                title={`Visit ${venue.name} (${venue.region})`}
              >
                <Image
                  src={venue.logo}
                  alt={venue.name}
                  width={venue.width}
                  height={venue.height}
                  unoptimized
                  sizes="(min-width: 768px) 180px, 120px"
                  style={{ width: "auto" }}
                  className="object-contain h-10 sm:h-12 md:h-14 w-auto filter opacity-75 group-hover:opacity-100 group-hover:scale-105 transition-all duration-300"
                />
              </a>
            ))}
          </div>
          </div>

          {/* Bottom Note & Compare CTA */}
          <div className="max-w-2xl mx-auto text-center pt-8 border-t border-brand-border/60">
            <p className="text-brand-muted text-sm sm:text-base italic mb-6">
              Considering a different venue? Not a problem. Let&apos;s explore it together for a clear and concise comparison.
            </p>
            <a
              href={getWhatsAppUrl("Hello Nhi, I would like to request an independent venue comparison for luxury resorts in Vietnam.")}
              target="_blank"
              rel="noopener noreferrer"
              className="inline-flex items-center justify-center gap-2 bg-brand-sand hover:bg-brand-border/70 text-brand-dark px-7 py-3 rounded-full text-xs font-semibold uppercase tracking-widest transition-all duration-300 border border-brand-border hover:border-brand-gold"
            >
              <Building2 className="w-4 h-4 text-brand-gold" />
              <span>Compare Venues with Advisor</span>
              <ArrowRight className="w-4 h-4" />
            </a>
          </div>
        </div>
      </section>

      {/* 3. THE STORY BEHIND THIS BLOG / ABOUT AUTHOR NHI VÕ */}
      <FounderBioSection variant="editorial" />

      {/* 4. FEATURED GUIDES SECTION */}
      <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="flex flex-col md:flex-row md:items-end justify-between mb-14">
            <div>
              <span className="text-xs font-semibold tracking-widest text-brand-gold uppercase block mb-2">
                Curated Editorial
              </span>
              <h2 className="font-title text-3xl sm:text-4xl font-bold text-brand-dark">
                Featured Wedding Guides
              </h2>
              <p className="text-brand-muted text-sm sm:text-base mt-2 max-w-xl">
                Independent analysis on luxury venues, budgeting realities, and milestone timelines.
              </p>
            </div>
            <Link
              href="/blog"
              className="inline-flex items-center gap-2 text-sm font-semibold text-brand-gold hover:text-brand-gold-hover transition-colors mt-4 md:mt-0"
            >
              <span>View All Guides</span>
              <ArrowRight className="w-4 h-4" />
            </Link>
          </div>

          {/* Guides Grid */}
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            {displayPosts ? (
              displayPosts.map((post) => (
                <Link
                  key={post?.slug?.current || post?.title}
                  href={`/blog/${post?.slug?.current}`}
                  className="flex w-full group rounded-3xl"
                >
                  <PostCard
                    title={post?.title ?? ""}
                    excerpt={post?.excerpt ?? ""}
                    image={post?.image ?? null}
                  />
                </Link>
              ))
            ) : (
              fallbackGuides.map((guide) => (
                <Link
                  key={guide.slug}
                  href={`/blog/${guide.slug}`}
                  className="card-luxury group flex w-full flex-col justify-between overflow-hidden rounded-3xl p-6 bg-white border border-brand-border transition-all duration-300 hover:border-brand-gold hover:shadow-xl"
                >
                  <div>
                    <div className="mb-4 relative h-[14rem] rounded-2xl bg-brand-sand flex flex-col justify-between p-5 overflow-hidden">
                      <div className="flex justify-between items-start">
                        <span className="badge-gold px-3 py-1 rounded-full text-xs font-semibold text-brand-dark tracking-wider uppercase">
                          {guide.tag}
                        </span>
                      </div>
                      <div className="font-title text-xs uppercase tracking-widest text-brand-muted">
                        Vietnam Wedding Guide Editorial
                      </div>
                    </div>
                    <h3 className="font-title font-bold text-xl leading-snug text-brand-dark group-hover:text-brand-gold transition-colors duration-300 line-clamp-2">
                      {guide.title}
                    </h3>
                    <p className="mt-3 text-sm text-brand-muted leading-relaxed line-clamp-3">
                      {guide.excerpt}
                    </p>
                  </div>

                  <div className="mt-6 pt-4 border-t border-brand-border/60 flex items-center justify-between">
                    <span className="text-xs font-semibold text-brand-gold uppercase tracking-wider group-hover:underline">
                      Read Guide
                    </span>
                    <div className="w-8 h-8 rounded-full border border-brand-border flex items-center justify-center text-brand-gold group-hover:bg-brand-gold group-hover:text-white transition-all duration-300">
                      <ChevronRight size={16} />
                    </div>
                  </div>
                </Link>
              ))
            )}
          </div>
        </div>
      </section>

      {/* 5. BESPOKE SERVICES OVERVIEW */}
      <section className="py-20 lg:py-28 bg-brand-sand/50 border-y border-brand-border/60">
        <div className="container max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="max-w-3xl mx-auto text-center mb-16">
            <span className="text-xs font-semibold tracking-widest text-brand-gold uppercase block mb-2">
              Private Consultancy
            </span>
            <h2 className="font-title text-3xl sm:text-4xl font-bold text-brand-dark">
              Bespoke Advisory Services
            </h2>
            <p className="text-brand-muted text-sm sm:text-base mt-2">
              Whether you are an international couple planning from abroad or a luxury resort team
              positioning for global wedding clients.
            </p>
          </div>

          {/* 2 Concise Service Pathway Cards */}
          <div className="grid grid-cols-1 md:grid-cols-2 gap-6 max-w-4xl mx-auto mb-10">
            {/* Pathway 1: For Couples */}
            <div className="card-luxury p-8 rounded-3xl bg-white border border-brand-border flex flex-col justify-between hover:border-brand-gold/60 transition-all duration-300">
              <div>
                <span className="inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold uppercase tracking-wider bg-brand-sand text-brand-dark mb-4">
                  For Couples
                </span>
                <h3 className="font-title text-xl sm:text-2xl font-bold text-brand-dark mb-2">
                  {coupleTitle}
                </h3>
                <p className="text-sm text-brand-muted leading-relaxed">
                  {coupleDesc}
                </p>
              </div>
              <div className="pt-6 mt-6 border-t border-brand-border/60">
                <Link
                  href={`/services/${coupleSlug}`}
                  className="inline-flex items-center gap-1.5 text-xs font-bold uppercase tracking-wider text-brand-gold hover:text-brand-gold-hover group transition-colors"
                >
                  <span>{coupleCta}</span>
                  <ArrowRight className="w-3.5 h-3.5 transition-transform group-hover:translate-x-1" />
                </Link>
              </div>
            </div>

            {/* Pathway 2: For Professionals */}
            <div className="card-luxury p-8 rounded-3xl bg-white border border-brand-border flex flex-col justify-between hover:border-brand-gold/60 transition-all duration-300">
              <div>
                <span className="inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold uppercase tracking-wider bg-brand-sand text-brand-dark mb-4">
                  For Professionals
                </span>
                <h3 className="font-title text-xl sm:text-2xl font-bold text-brand-dark mb-2">
                  {b2bTitle}
                </h3>
                <p className="text-sm text-brand-muted leading-relaxed">
                  {b2bDesc}
                </p>
              </div>
              <div className="pt-6 mt-6 border-t border-brand-border/60">
                <Link
                  href={`/services/${b2bSlug}`}
                  className="inline-flex items-center gap-1.5 text-xs font-bold uppercase tracking-wider text-brand-gold hover:text-brand-gold-hover group transition-colors"
                >
                  <span>{b2bCta}</span>
                  <ArrowRight className="w-3.5 h-3.5 transition-transform group-hover:translate-x-1" />
                </Link>
              </div>
            </div>
          </div>

          {/* Central CTA to /services */}
          <div className="text-center">
            <Link
              href="/services"
              className="inline-flex items-center gap-2 bg-brand-gold hover:bg-brand-gold-hover text-white px-8 py-3.5 rounded-full font-medium text-xs sm:text-sm uppercase tracking-wider transition-all duration-300 shadow-sm hover:shadow-md hover:-translate-y-0.5"
            >
              <span>Explore All Advisory Services</span>
              <ArrowRight className="w-4 h-4" />
            </Link>
          </div>
        </div>
      </section>

      {/* 6. PHILOSOPHY & WHY VWG */}
      <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="max-w-3xl mx-auto text-center mb-16">
            <span className="text-xs font-semibold tracking-widest text-brand-gold uppercase block mb-2">
              Our Editorial Standard
            </span>
            <h2 className="font-title text-3xl sm:text-4xl font-bold text-brand-dark">
              Why Couples &amp; Planners Trust VWG
            </h2>
            <p className="text-brand-muted text-sm sm:text-base mt-2">
              We operate with uncompromising editorial integrity to demystify destination weddings in Vietnam.
            </p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            <div className="card-luxury rounded-3xl p-8 bg-white border border-brand-border">
              <div className="w-12 h-12 rounded-2xl bg-brand-sand flex items-center justify-center text-brand-gold mb-6">
                <ShieldCheck className="w-6 h-6" />
              </div>
              <h3 className="font-title text-xl font-bold text-brand-dark mb-3">
                Uncompromising Independence
              </h3>
              <p className="text-sm text-brand-muted leading-relaxed">
                Traditional directories profit from paid listings and undisclosed referral kickbacks.
                VWG refuses commission agreements to guarantee recommendations that serve you exclusively.
              </p>
            </div>

            <div className="card-luxury rounded-3xl p-8 bg-white border border-brand-border">
              <div className="w-12 h-12 rounded-2xl bg-brand-sand flex items-center justify-center text-brand-gold mb-6">
                <Compass className="w-6 h-6" />
              </div>
              <h3 className="font-title text-xl font-bold text-brand-dark mb-3">
                Actionable Cost Reality
              </h3>
              <p className="text-sm text-brand-muted leading-relaxed">
                We publish itemized price ranges, hidden service charges, and real resort minimums so
                you never get blindsided halfway through your planning journey.
              </p>
            </div>

            <div className="card-luxury rounded-3xl p-8 bg-white border border-brand-border">
              <div className="w-12 h-12 rounded-2xl bg-brand-sand flex items-center justify-center text-brand-gold mb-6">
                <Award className="w-6 h-6" />
              </div>
              <h3 className="font-title text-xl font-bold text-brand-dark mb-3">
                Bespoke Luxury Curation
              </h3>
              <p className="text-sm text-brand-muted leading-relaxed">
                Every property and supplier we feature is evaluated against international luxury
                benchmarks, guest experience standards, and aesthetic refinement.
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* 6.5 SPECIAL COLLABORATION OPPORTUNITY (STANDOUT BRAND GOLD) */}
      <section className="py-12 lg:py-16">
        <div className="container max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="relative rounded-3xl bg-gradient-to-br from-[#C1A378] via-[#D2B68E] to-[#B29166] text-brand-dark p-8 sm:p-12 lg:p-14 overflow-hidden border border-[#DECAAA] shadow-xl">
            {/* Background subtle light reflections */}
            <div className="absolute -top-24 -right-24 w-96 h-96 rounded-full bg-white/20 blur-3xl pointer-events-none" />
            <div className="absolute -bottom-24 -left-24 w-96 h-96 rounded-full bg-black/10 blur-3xl pointer-events-none" />

            <div className="relative z-10 max-w-3xl mx-auto text-center">
              <div className="inline-flex items-center px-3.5 py-1.5 rounded-full bg-brand-dark/10 border border-brand-dark/20 text-brand-dark text-xs font-semibold tracking-wider uppercase mb-5">
                <span>Special Collaboration Opportunity</span>
              </div>

              <h2 className="font-title text-2xl sm:text-3xl lg:text-4xl font-bold text-brand-dark tracking-tight mb-4">
                Develop Vietnam Wedding Guide With Us
              </h2>

              <p className="text-brand-dark/85 text-sm sm:text-base leading-relaxed max-w-xl mx-auto mb-5">
                Co-develop and steward Vietnam&apos;s two category-defining digital assets:
              </p>

              {/* Dual-Domain Showcase Capsule (Visual Anchor) */}
              <div className="inline-flex flex-wrap items-center justify-center gap-2 sm:gap-3 px-5 py-2 rounded-full bg-white/85 backdrop-blur-xs border border-white/70 shadow-xs mb-8">
                <span className="font-mono text-xs sm:text-sm font-bold text-brand-dark tracking-tight">
                  {SITE_DOMAINS.primary}
                </span>
                <span className="text-brand-gold font-bold">•</span>
                <span className="font-mono text-xs sm:text-sm font-bold text-brand-dark tracking-tight">
                  {SITE_DOMAINS.secondary}
                </span>
              </div>

              {/* 3 Strategic Pillars (Concise, High-Impact Cards) */}
              <div className="grid grid-cols-1 md:grid-cols-3 gap-4 max-w-3xl mx-auto mb-8 text-left">
                <div className="p-5 sm:p-6 rounded-2xl bg-white/95 backdrop-blur-xs border border-white/80 shadow-xs hover:shadow-md hover:bg-white transition-all flex flex-col justify-between">
                  <div>
                    <span className="text-[11px] font-mono font-bold text-brand-gold tracking-wider block mb-1.5">
                      01 / GLOBAL ASSET
                    </span>
                    <h3 className="font-title text-base sm:text-lg font-bold text-brand-dark leading-snug mb-1.5">
                      .COM Domain Authority
                    </h3>
                    <p className="text-xs text-brand-muted leading-relaxed">
                      Category-defining duopoly capturing direct, high-trust global search traffic.
                    </p>
                  </div>
                </div>

                <div className="p-5 sm:p-6 rounded-2xl bg-white/95 backdrop-blur-xs border border-white/80 shadow-xs hover:shadow-md hover:bg-white transition-all flex flex-col justify-between">
                  <div>
                    <span className="text-[11px] font-mono font-bold text-brand-gold tracking-wider block mb-1.5">
                      02 / SEARCH &amp; AI
                    </span>
                    <h3 className="font-title text-base sm:text-lg font-bold text-brand-dark leading-snug mb-1.5">
                      AI &amp; Intent Driven
                    </h3>
                    <p className="text-xs text-brand-muted leading-relaxed">
                      High citation share across ChatGPT, Perplexity &amp; Google AI Overviews.
                    </p>
                  </div>
                </div>

                <div className="p-5 sm:p-6 rounded-2xl bg-white/95 backdrop-blur-xs border border-white/80 shadow-xs hover:shadow-md hover:bg-white transition-all flex flex-col justify-between">
                  <div>
                    <span className="text-[11px] font-mono font-bold text-brand-gold tracking-wider block mb-1.5">
                      03 / HIGH-VALUE AUDIENCE
                    </span>
                    <h3 className="font-title text-base sm:text-lg font-bold text-brand-dark leading-snug mb-1.5">
                      Foreign &amp; Multicultural
                    </h3>
                    <p className="text-xs text-brand-muted leading-relaxed">
                      Curated specifically for overseas, expat, and high-budget destination celebrations.
                    </p>
                  </div>
                </div>
              </div>

              <div>
                <Link
                  href="/partnership"
                  className="inline-flex items-center justify-center gap-2 bg-brand-dark hover:bg-black text-white px-9 py-4 rounded-full font-medium text-xs sm:text-sm uppercase tracking-wider transition-all duration-300 shadow-md hover:shadow-xl hover:-translate-y-0.5"
                >
                  <span>Explore Partnership Details</span>
                  <ArrowRight className="w-4 h-4" />
                </Link>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* 7. CTA BANNER */}
      <LuxuryCTABanner
        badgeText="Begin Your Journey"
        title="Ready to Plan Your Vietnam Wedding?"
        description="Whether you need independent advice on venues, honest cost modeling, or full advisory, we are here to ensure your celebration is seamless and extraordinary."
        primaryCtaText="Inquire Now"
        primaryCtaHref="/contact"
        primaryCtaIcon="mail"
        whatsappMessage="Hello Nhi, I would like to schedule a discovery consultation for our wedding in Vietnam."
        whatsappButtonText="Chat on WhatsApp"
        sectionPadding="pb-20 lg:pb-32"
      />
    </div>
  );
}