import Link from "next/link";
import Image from "next/image";
import {
  ArrowRight,
  ShieldCheck,
  Compass,
  CheckCircle2,
  MessageCircle,
  Mail,
  Clock,
  FileCheck,
  Camera,
  Users,
  Building2,
  ExternalLink,
  ChevronRight,
  HelpCircle,
} from "lucide-react";
import PortableTextRenderer from "@/components/portable-text-renderer";
import Breadcrumbs from "@/components/ui/breadcrumbs";
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 type { PortableTextProps } from "@portabletext/react";
import type { SERVICE_QUERY_RESULT } from "@/sanity.types";

export type ServiceDetailData = {
  _id?: string;
  title?: string | null;
  slug?: { current?: string; _type?: string } | string | null;
  targetAudience?: "couples" | "professionals" | string | null;
  tagline?: string | null;
  shortDescription?: string | null;
  pricing?: string | null;
  features?: string[] | null;
  packages?: Array<{
    name?: string | null;
    tagline?: string | null;
    price?: string | null;
    badge?: string | null;
    description?: string | null;
    deliverables?: Array<string> | null;
    ctaText?: string | null;
    isPopular?: boolean | null;
  }> | null;
  processSteps?: Array<{
    stepNumber?: string | null;
    title?: string | null;
    description?: string | null;
  }> | null;
  faqs?: Array<{
    _id?: string;
    title?: string | null;
    body?: PortableTextProps["value"] | string | null;
  }> | null;
  coverImage?: NonNullable<SERVICE_QUERY_RESULT>["coverImage"] | null;
  body?: PortableTextProps["value"] | null;
  ctaText?: string | null;
  ctaUrl?: string | null;
  _createdAt?: string;
  _updatedAt?: string;
  meta?: NonNullable<SERVICE_QUERY_RESULT>["meta"] | null;
};

export interface ServiceDetailViewProps {
  service: ServiceDetailData;
}

const couplePackages = [
  {
    icon: Clock,
    name: "Hourly Strategic Session",
    tagline: "Direct line to senior advisory when you need immediate clarity",
    price: "$111 USD / hour",
    badge: "Most Popular for Initial Phase",
    description:
      "Whether you are overwhelmed at the starting line or facing a complex vendor dilemma mid-way, this focused 1-on-1 session delivers rapid clarity and actionable direction.",
    deliverables: [
      "Concept & Budget Reality Check: Validate your aesthetic ideas against true local costs",
      "Venue & Region Shortlist Review: Unbiased comparison of Phu Quoc, Da Nang, Cam Ranh, etc.",
      "Timeline & Risk Assessment: Identify bottleneck dates, monsoon risks, and contract pitfalls",
      "Vendor Negotiation Preparation: Strategic prep before critical supplier calls",
      "Complimentary 30-min intro call included on your first booking",
    ],
    ctaText: "Book Hourly Session",
    waQuery: "Hello VWG, I would like to book an Hourly Strategic Planning Session ($111/hr).",
  },
  {
    icon: FileCheck,
    name: "Strategic Vendor Review",
    tagline: "Meticulous contract scrutiny before you sign and commit capital",
    price: "1% – 2% of contract value",
    badge: "Essential Risk Protection",
    description:
      "A vendor contract is the blueprint for your wedding's success. We review up to 5 major supplier contracts (Venue, Planner, Decor, F&B, Accommodation) to protect your interests.",
    deliverables: [
      "Ambiguous clause audit & cancellation policy stress-testing",
      "Hidden fee mitigation: corkage, generator surcharges, late-night overtime penalties",
      "Scope-of-work cross-checking against international hospitality standards",
      "Impartial negotiation points to take back to vendor management",
      "Covers Venue, Planner, Floral/Decor, F&B catering, and Villa contracts",
    ],
    ctaText: "Request Contract Audit",
    waQuery: "Hello VWG, I would like to request a Strategic Vendor Contract Review.",
  },
  {
    icon: Camera,
    name: "Post-Wedding Storytelling",
    tagline: "Preserve and share your wedding legacy with editorial sophistication",
    price: "From $1,111 USD",
    badge: "Legacy & Narrative",
    description:
      "The first 30 days post-wedding is the golden emotional window. Instead of being buried under thousands of raw files, we craft an editorial narrative for your social media and personal archives.",
    deliverables: [
      "3-week curated social media editorial content plan (Facebook, IG, TikTok)",
      "Narrative direction & bespoke caption writing tailored to your voice",
      "Systematic curation of top-tier assets for enduring family archives",
      "Base package covers 3 core events (Welcome Dinner, Ceremony/Reception, After-Party)",
    ],
    ctaText: "Plan Post-Wedding Story",
    waQuery: "Hello VWG, I would like to inquire about the Post-Wedding Storytelling package.",
  },
];

const b2bPackages = [
  {
    icon: Building2,
    name: "Resort Wedding Experience Audit",
    tagline: "Elevate your property's collateral, packages, and guest flow to global luxury tier",
    price: "Tailored Engagement",
    badge: "Property Transformation",
    description:
      "Comprehensive on-site inspection of venue capacities, acoustic realities, backup weather contingency spaces, and bridal journey touchpoints.",
    deliverables: [
      "Collateral & package audit against international ultra-luxury benchmarks",
      "Wet-weather backup viability & operational floorplan stress-testing",
      "F&B catering packaging and buyout minimum revenue modeling",
      "Detailed actionable roadmap report with operational recommendations",
    ],
    ctaText: "Inquire for Property Audit",
    waQuery: "Hello VWG, I would like to inquire about a Resort Wedding Experience Audit for our property.",
  },
  {
    icon: Users,
    name: "Cross-Cultural Bridal Protocol Training",
    tagline: "Equip your banqueting and event sales teams with international bride empathy",
    price: "Workshop / Retainer",
    badge: "Team Empowerment",
    description:
      "Interactive training for hotel sales, event coordinators, and F&B leads on the unique cultural expectations of Western, Indian, Overseas Vietnamese, and East Asian destination couples.",
    deliverables: [
      "Cultural bridal traditions & dietary restrictions (Western, Indian, VK, HK/SG)",
      "High-touch communication standards during the long-distance inquiry cycle",
      "Contract negotiation finesse without sacrificing property yields",
      "Scenario simulation drills for high-stress wedding day operations",
    ],
    ctaText: "Schedule Protocol Training",
    waQuery: "Hello VWG, I would like to discuss Cross-Cultural Protocol Training for our team.",
  },
  {
    icon: Compass,
    name: "Market Positioning & Yield Strategy",
    tagline: "Position Vietnam's luxury venues into preferred international destination hubs",
    price: "Bespoke Consulting",
    badge: "Strategic Growth",
    description:
      "Position your venue or brand directly in front of high-net-worth couples and elite international planners through strategic advisory and editorial features.",
    deliverables: [
      "High-ticket packaging architecture and multi-day buyout strategy",
      "Strategic introductions to accredited international destination planners",
      "Editorial feature curation on Vietnam Wedding Guide publication",
      "Competitive benchmarking against Bali, Phuket, and Da Nang luxury sets",
    ],
    ctaText: "Explore Market Strategy",
    waQuery: "Hello VWG, I would like to discuss Market Positioning & B2B Strategy.",
  },
];

const coupleFaqs = [
  {
    question: "Why hire an independent consultant instead of just a wedding planner?",
    answer:
      "A wedding planner focuses on logistics and event production on the day, and many operate with commercial ties or commissions from specific vendors. As an independent consultant, VWG acts strictly as your fiduciary advocate: we take zero vendor kickbacks, meaning our budget audits and vendor recommendations are 100% objective and designed to save you thousands of dollars.",
  },
  {
    question: "At what stage should we engage VWG Advisory?",
    answer:
      "The earlier, the better. Most couples reach out during the initial concept phase before signing venue contracts or locking in planners. However, our Hourly Sessions and Contract Reviews can be booked at any stage—even midway when facing a specific pricing dispute or vendor roadblock.",
  },
  {
    question: "Can you help us negotiate better rates with 5-star Vietnam resorts?",
    answer:
      "Yes. Because of our deep understanding of resort margin structures, seasonal occupancy cycles, and banquet minimums across Da Nang, Phu Quoc, and Cam Ranh, we help couples identify leverage points to negotiate complimentary villa upgrades, waived corkage, or reduced setup fees.",
  },
  {
    question: "How do consultations take place?",
    answer:
      "All consultations take place via secure Google Meet video sessions, with follow-up summary documentation and voice notes delivered via WhatsApp. You receive recording access and clear action checklists.",
  },
];

const b2bFaqs = [
  {
    question: "What types of venues and hospitality brands does VWG advise?",
    answer:
      "We consult 5-star destination resorts, boutique luxury hotels, convention ballrooms, and premium decor production houses seeking to upgrade their service delivery for high-net-worth international couples.",
  },
  {
    question: "How long does a typical B2B advisory engagement take?",
    answer:
      "Property audits typically require 1-2 weeks including on-site inspection and roadmap delivery. Protocol training workshops can be conducted in 2 to 3-day intensive sessions or on an ongoing quarterly retainer.",
  },
  {
    question: "Does VWG take commissions from recommended couples?",
    answer:
      "Never. We maintain a strict zero-kickback policy. Our revenue comes solely from our transparent consulting advisory fees. This is why couples and international planners trust our editorial and advisory recommendations implicitly.",
  },
];

const defaultProcessSteps = [
  {
    stepNumber: "01",
    title: "Initial WhatsApp Discovery",
    description:
      "Reach out with your wedding vision, tentative date, guest count, and current friction points. We clarify scope and confirm if we are the right strategic fit.",
  },
  {
    stepNumber: "02",
    title: "Deep-Dive Audit & Session",
    description:
      "We review your supplier proposals, budget spreadsheets, or floorplans, followed by an intensive 1-on-1 strategic video session with immediate answers.",
  },
  {
    stepNumber: "03",
    title: "Actionable Execution Blueprint",
    description:
      "Receive concrete negotiation counter-proposals, milestone checklists, and direct WhatsApp voice-note support during critical vendor contract negotiations.",
  },
];

export default function ServiceDetailView({ service }: ServiceDetailViewProps) {
  const isCouples = service.targetAudience === "couples";
  const basePackages = isCouples ? couplePackages : b2bPackages;

  const packages =
    service.packages && service.packages.length > 0
      ? service.packages.map((pkg) => ({
          icon: isCouples ? Clock : Building2,
          name: pkg.name || "Advisory Package",
          tagline: pkg.tagline || "",
          price: pkg.price || "Investment on Request",
          badge: pkg.badge || "Advisory Tier",
          description: pkg.description || "",
          deliverables: pkg.deliverables || [],
          ctaText: pkg.ctaText || "Inquire Now",
          waQuery: `Hello VWG, I would like to inquire about ${pkg.name || "Advisory Package"}.`,
        }))
      : basePackages.map((pkg, idx) => {
          if (idx === 0 && service.pricing) {
            return {
              ...pkg,
              price: service.pricing,
              waQuery: `Hello VWG, I would like to inquire about ${pkg.name} (${service.pricing}).`,
            };
          }
          return pkg;
        });

  const faqs =
    service.faqs && service.faqs.length > 0
      ? service.faqs.map((faq) => ({
          question: faq.title || "Frequently Asked Question",
          answer: faq.body || "",
        }))
      : isCouples
        ? coupleFaqs
        : b2bFaqs;

  const processSteps =
    service.processSteps && service.processSteps.length > 0
      ? service.processSteps
      : defaultProcessSteps;

  const title = service.title || (isCouples ? "Private Couple Consultation" : "B2B Venue & Partner Advisory");
  const tagline =
    service.tagline ||
    (isCouples
      ? "1-on-1 unbiased planning navigation, budget stress-testing & vendor contract protection"
      : "Elevating Vietnamese luxury hospitality properties to international destination wedding standards");
  const shortDescription =
    service.shortDescription ||
    (isCouples
      ? "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."
      : "Strategic consultancy for luxury resorts, hotels, and premium vendors seeking to attract high-net-worth international destination couples and optimize event yield.");

  const defaultWaText = isCouples
    ? "Hello VWG, I would like to inquire about the Private Couple Consultation services."
    : "Hello VWG, I would like to inquire about B2B Venue & Partner Advisory.";

  const breadcrumbLinks = [
    { label: "Home", href: "/" },
    { label: "Services", href: "/services" },
    { label: title, href: "#" },
  ];

  return (
    <div className="bg-brand-ivory">
      {/* 1. HERO SECTION */}
      <section className="hero-pattern relative 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-4xl mx-auto text-center mt-6">
            {/* Target Audience Badge */}
            <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">
                {isCouples ? "Bespoke Couple Advisory" : "Hospitality & Venue Consulting"}
              </span>
              <span className="w-8 h-px bg-brand-gold/60" />
            </div>

            {/* H1 Heading */}
            <h1 className="font-title text-3xl sm:text-4xl lg:text-5xl font-bold tracking-tight text-brand-dark leading-[1.18] mb-6">
              {title}
            </h1>

            {/* Tagline */}
            <p className="text-base sm:text-xl font-normal text-brand-gold mb-6 max-w-3xl mx-auto leading-relaxed">
              {tagline}
            </p>

            {/* Short Description */}
            <p className="text-sm sm:text-base text-brand-muted max-w-2xl mx-auto leading-relaxed mb-8">
              {shortDescription}
            </p>

            {/* Key Investment Indicator */}
            {service.pricing && (
              <div className="inline-flex items-center gap-2 text-xs uppercase tracking-wider text-brand-muted mb-6">
                <span className="font-semibold text-brand-dark/70">Investment Guidance:</span>
                <span className="font-bold text-brand-gold tracking-normal text-sm font-title">{service.pricing}</span>
              </div>
            )}

            {/* Features Deliverables Tags (if provided from CMS) */}
            {service.features && service.features.length > 0 && (
              <div className="flex flex-wrap items-center justify-center gap-2 max-w-2xl mx-auto mb-8">
                {service.features.map((feature, fIdx) => (
                  <span
                    key={fIdx}
                    className="inline-flex items-center gap-1.5 px-3.5 py-1.5 rounded-full bg-white border border-brand-border text-xs font-medium text-brand-dark/80 shadow-2xs"
                  >
                    <CheckCircle2 className="w-3.5 h-3.5 text-brand-gold shrink-0" />
                    <span>{feature}</span>
                  </span>
                ))}
              </div>
            )}

            {/* Cover Image (if provided from CMS) */}
            {service.coverImage?.asset?.url && (
              <div className="relative w-full max-w-3xl mx-auto aspect-[16/9] rounded-3xl overflow-hidden mb-8 border border-brand-border shadow-md">
                <Image
                  src={service.coverImage.asset.url}
                  alt={service.coverImage.alt || title}
                  fill
                  className="object-cover"
                  sizes="(min-width: 1024px) 800px, 90vw"
                />
              </div>
            )}

            {/* Primary Action Buttons */}
            <div className="flex flex-col sm:flex-row items-center justify-center gap-4">
              <Link
                href={service.ctaUrl && !service.ctaUrl.startsWith("http") ? service.ctaUrl : "/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>{service.ctaText || "Inquire Now"}</span>
              </Link>
              <a
                href={service.ctaUrl && service.ctaUrl.startsWith("https://wa.me") ? service.ctaUrl : getWhatsAppUrl(defaultWaText)}
                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. CORE VALUE PILLARS (Uncompromising Neutrality) */}
      <section className="py-16 lg:py-20 border-b border-brand-border/60 bg-white">
        <div className="container max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            <div className="p-8 rounded-3xl bg-brand-sand/40 border border-brand-border/80">
              <div className="w-12 h-12 rounded-2xl bg-white flex items-center justify-center text-brand-gold mb-6 border border-brand-border shadow-xs">
                <ShieldCheck className="w-6 h-6" />
              </div>
              <h3 className="font-title text-xl font-bold text-brand-dark mb-3">
                100% Impartial Fiduciary
              </h3>
              <p className="text-sm text-brand-muted leading-relaxed">
                Zero vendor kickbacks, zero hidden commissions. We are paid solely by our clients, guaranteeing advice that protects your capital and aesthetic integrity.
              </p>
            </div>

            <div className="p-8 rounded-3xl bg-brand-sand/40 border border-brand-border/80">
              <div className="w-12 h-12 rounded-2xl bg-white flex items-center justify-center text-brand-gold mb-6 border border-brand-border shadow-xs">
                <Compass className="w-6 h-6" />
              </div>
              <h3 className="font-title text-xl font-bold text-brand-dark mb-3">
                On-The-Ground Mastery
              </h3>
              <p className="text-sm text-brand-muted leading-relaxed">
                Insider knowledge of Vietnam&apos;s 5-star hospitality infrastructure across Da Nang, Phu Quoc, Nha Trang, and Saigon, avoiding costly regional surprises.
              </p>
            </div>

            <div className="p-8 rounded-3xl bg-brand-sand/40 border border-brand-border/80">
              <div className="w-12 h-12 rounded-2xl bg-white flex items-center justify-center text-brand-gold mb-6 border border-brand-border shadow-xs">
                <CheckCircle2 className="w-6 h-6" />
              </div>
              <h3 className="font-title text-xl font-bold text-brand-dark mb-3">
                Production-Grade Rigor
              </h3>
              <p className="text-sm text-brand-muted leading-relaxed">
                Applying rigorous corporate event project management frameworks to multi-day, cross-border destination wedding operations.
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* 3. STRATEGIC PACKAGES & DELIVERABLES BREAKDOWN */}
      <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-3">
              Tailored Collaboration
            </span>
            <h2 className="font-title text-3xl sm:text-4xl lg:text-5xl font-bold text-brand-dark mb-6">
              Available <span className="gold-gradient-text">Advisory Packages</span>
            </h2>
            <p className="text-base sm:text-lg text-brand-muted leading-relaxed">
              {isCouples
                ? "Flexible engagement tools designed to support you at critical decision milestones throughout your wedding journey."
                : "Institutional consulting programs to optimize event yield and international bridal satisfaction."}
            </p>
          </div>

          {/* 3-Column Package Grid */}
          <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
            {packages.map((pkg, idx) => {
              const Icon = pkg.icon;
              return (
                <div
                  key={idx}
                  className="card-luxury flex flex-col justify-between rounded-3xl p-8 bg-white border border-brand-border hover:border-brand-gold relative"
                >
                  <div>
                    {/* Badge */}
                    <div className="mb-4">
                      <span className="text-[11px] font-semibold text-brand-gold uppercase tracking-[0.2em]">
                        {pkg.badge}
                      </span>
                    </div>

                    <div className="w-12 h-12 rounded-2xl bg-brand-sand flex items-center justify-center text-brand-gold mb-6">
                      <Icon className="w-6 h-6" />
                    </div>

                    <h3 className="font-title text-2xl font-bold text-brand-dark mb-2">
                      {pkg.name}
                    </h3>
                    <p className="text-xs font-medium text-brand-gold mb-4 leading-normal">
                      {pkg.tagline}
                    </p>

                    <div className="my-5 pb-5 border-b border-brand-border/60">
                      <span className="text-xs text-brand-muted uppercase tracking-wider block">Investment</span>
                      <span className="font-title text-2xl font-bold text-brand-dark">{pkg.price}</span>
                    </div>

                    <p className="text-sm text-brand-muted leading-relaxed mb-6">
                      {pkg.description}
                    </p>

                    <div className="space-y-3 pt-2">
                      <h4 className="text-xs font-bold uppercase tracking-wider text-brand-dark">
                        Key Deliverables:
                      </h4>
                      <ul className="space-y-2.5">
                        {pkg.deliverables.map((item, dIdx) => (
                          <li key={dIdx} className="flex items-start gap-2.5 text-xs sm:text-sm text-brand-dark/90 leading-relaxed">
                            <span className="shrink-0 mt-0.5 w-4 h-4 rounded-full bg-brand-sand flex items-center justify-center text-brand-gold">
                              <CheckCircle2 size={12} />
                            </span>
                            <span>{item}</span>
                          </li>
                        ))}
                      </ul>
                    </div>
                  </div>

                  <div className="mt-8 pt-6 border-t border-brand-border/60">
                    <a
                      href={getWhatsAppUrl(pkg.waQuery)}
                      target="_blank"
                      rel="noopener noreferrer"
                      className="w-full inline-flex items-center justify-center gap-2 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 hover:-translate-y-0.5"
                    >
                      <WhatsAppIcon className="w-3.5 h-3.5 fill-white shrink-0" />
                      <span>{pkg.ctaText}</span>
                    </a>
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      </section>

      {/* 4. CMS PORTABLE TEXT (If available) */}
      {service.body && (
        <section className="py-16 bg-white border-y border-brand-border/60">
          <div className="container max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
            <h2 className="font-title text-2xl sm:text-3xl font-bold text-brand-dark mb-8 text-center">
              Comprehensive Service Overview
            </h2>
            <div className="prose prose-stone max-w-none">
              <PortableTextRenderer value={service.body} />
            </div>
          </div>
        </section>
      )}

      {/* 5. 3-STEP ADVISORY PROCESS */}
      <section className="py-20 lg:py-28 bg-brand-sand/40 border-b 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-3">
              Structured Methodology
            </span>
            <h2 className="font-title text-3xl sm:text-4xl font-bold text-brand-dark mb-4">
              How We Work Together
            </h2>
            <p className="text-brand-muted text-sm sm:text-base">
              A transparent, calm, and collaborative pathway to complete wedding clarity.
            </p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            {processSteps.map((step, idx) => (
              <div key={idx} className="bg-white rounded-3xl p-8 border border-brand-border">
                <div className="w-10 h-10 rounded-full bg-brand-gold text-white font-title font-bold text-base flex items-center justify-center mb-6">
                  {step.stepNumber || `0${idx + 1}`}
                </div>
                <h3 className="font-title text-xl font-bold text-brand-dark mb-2">
                  {step.title}
                </h3>
                <p className="text-sm text-brand-muted leading-relaxed">
                  {step.description}
                </p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* 6. FOUNDER CREDIBILITY SECTION */}
      <FounderBioSection variant="card" />

      {/* 7. FREQUENTLY ASKED QUESTIONS */}
      <section className="py-20 lg:py-24 bg-brand-sand/30 border-t border-brand-border/60">
        <div className="container max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-14">
            <span className="text-xs font-semibold tracking-widest text-brand-gold uppercase block mb-3">
              Clarity &amp; Transparency
            </span>
            <h2 className="font-title text-3xl sm:text-4xl font-bold text-brand-dark">
              Frequently Asked Questions
            </h2>
          </div>

          <div className="space-y-6">
            {faqs.map((faq, idx) => (
              <div
                key={idx}
                className="rounded-2xl p-6 bg-white border border-brand-border/80 shadow-xs"
              >
                <h3 className="font-title text-lg font-bold text-brand-dark flex items-start gap-3 mb-2.5">
                  <HelpCircle className="w-5 h-5 text-brand-gold shrink-0 mt-0.5" />
                  <span>{faq.question}</span>
                </h3>
                <div className="text-sm text-brand-muted leading-relaxed pl-8">
                  {typeof faq.answer === "string" ? (
                    <p>{faq.answer}</p>
                  ) : faq.answer ? (
                    <PortableTextRenderer value={faq.answer} />
                  ) : null}
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* 8. BOTTOM LUXURY CTA BANNER */}
      <LuxuryCTABanner
        badgeText="Direct Consultation"
        title="Ready for Honest, Unbiased Guidance?"
        description="Connect directly with our senior consultant on WhatsApp to clarify your questions, stress-test your budget, or book an hourly session."
        primaryCtaText="Inquire Now"
        primaryCtaHref="/contact"
        primaryCtaIcon="mail"
        whatsappMessage={defaultWaText}
        whatsappButtonText="Chat on WhatsApp"
        sectionPadding="pb-20 lg:pb-32 pt-10"
      />
    </div>
  );
}