import Link from "next/link";
import Image from "next/image";
import {
  ArrowRight,
  ShieldCheck,
  Compass,
  ExternalLink,
  CheckCircle2,
  Building2,
  Users,
  Utensils,
  Globe,
  HeartHandshake,
} from "lucide-react";
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 { SETTINGS_QUERY_RESULT } from "@/sanity.types";

export interface AboutViewProps {
  settings?: SETTINGS_QUERY_RESULT | null;
}

export default function AboutView({ settings }: AboutViewProps = {}) {
  const breadcrumbLinks = [
    { label: "Home", href: "/" },
    { label: "About Our Platform", 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-4xl 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">
                Our Vision &amp; Platform Mission
              </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 tracking-tight text-brand-dark leading-[1.18] mb-6">
              Elevating Vietnam Through the{" "}
              <span className="gold-gradient-text">Art of Celebration</span>
            </h1>

            <p className="text-base sm:text-lg text-brand-muted leading-relaxed max-w-2xl mx-auto">
              {settings?.tagline ||
                "Vietnam Wedding Guide (VWG) is an independent platform founded to transform the destination wedding landscape — evolving our national narrative, promoting experiential tourism, and building profound cross-cultural bridges through unforgettable celebrations."}
            </p>
          </div>
        </div>
      </section>

      {/* 2. THE THREE FOUNDATIONAL PILLARS OF OUR PLATFORM */}
      <section className="py-20 lg:py-28 border-b border-brand-border/60">
        <div className="container max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center max-w-3xl mx-auto mb-16">
            <h2 className="font-title text-3xl sm:text-4xl font-bold text-brand-dark mb-4">
              Our Guiding Principles
            </h2>
            <p className="text-brand-muted text-base">
              Why Vietnam Wedding Guide exists and what drives our editorial and advisory rigor.
            </p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            {/* Pillar 1 */}
            <div className="card-luxury rounded-3xl p-8 sm:p-10 bg-white border border-brand-border flex flex-col justify-between">
              <div>
                <div className="w-14 h-14 rounded-2xl bg-brand-sand flex items-center justify-center text-brand-gold mb-6 shadow-xs">
                  <Globe className="w-7 h-7" />
                </div>
                <div className="inline-block mb-3">
                  <span className="text-xs font-semibold text-brand-gold uppercase tracking-[0.2em]">
                    Pillar 01 &bull; Cultural Pride
                  </span>
                </div>
                <h3 className="font-title text-2xl font-bold text-brand-dark mb-4">
                  From &ldquo;Made in Vietnam&rdquo; to &ldquo;Made by Vietnam&rdquo;
                </h3>
                <p className="text-sm text-brand-muted leading-relaxed">
                  Vietnam has transitioned far beyond an inexpensive manufacturing hub or budget backpacking stop. In the world of high-end celebrations, our country commands world-class architectural sanctuaries, visionary florists, master culinary artists, and an innate culture of hospitality that rivals Lake Como or Bali.
                </p>
              </div>
              <div className="mt-8 pt-6 border-t border-brand-border/60 text-xs font-medium text-brand-dark/80 flex items-center gap-2">
                <CheckCircle2 className="w-4 h-4 text-brand-gold shrink-0" />
                <span>Championing local Vietnamese creative mastery</span>
              </div>
            </div>

            {/* Pillar 2 */}
            <div className="card-luxury rounded-3xl p-8 sm:p-10 bg-white border border-brand-border flex flex-col justify-between">
              <div>
                <div className="w-14 h-14 rounded-2xl bg-brand-sand flex items-center justify-center text-brand-gold mb-6 shadow-xs">
                  <Utensils className="w-7 h-7" />
                </div>
                <div className="inline-block mb-3">
                  <span className="text-xs font-semibold text-brand-gold uppercase tracking-[0.2em]">
                    Pillar 02 &bull; Tourism &amp; Gastronomy
                  </span>
                </div>
                <h3 className="font-title text-2xl font-bold text-brand-dark mb-4">
                  Promoting Experiential Tourism &amp; Culinary Arts
                </h3>
                <p className="text-sm text-brand-muted leading-relaxed">
                  A destination wedding is not merely a single banquet — it is a multi-day cultural expedition for 50 to 200 international guests. Through each wedding, international friends discover the sensory tapestry of Vietnam: from coastal lantern festivals and heritage architecture to our world-celebrated regional gastronomy.
                </p>
              </div>
              <div className="mt-8 pt-6 border-t border-brand-border/60 text-xs font-medium text-brand-dark/80 flex items-center gap-2">
                <CheckCircle2 className="w-4 h-4 text-brand-gold shrink-0" />
                <span>Highlighting Michelin-grade dining &amp; street flavours</span>
              </div>
            </div>

            {/* Pillar 3 */}
            <div className="card-luxury rounded-3xl p-8 sm:p-10 bg-white border border-brand-border flex flex-col justify-between">
              <div>
                <div className="w-14 h-14 rounded-2xl bg-brand-sand flex items-center justify-center text-brand-gold mb-6 shadow-xs">
                  <HeartHandshake className="w-7 h-7" />
                </div>
                <div className="inline-block mb-3">
                  <span className="text-xs font-semibold text-brand-gold uppercase tracking-[0.2em]">
                    Pillar 03 &bull; Harmony &amp; Heritage
                  </span>
                </div>
                <h3 className="font-title text-2xl font-bold text-brand-dark mb-4">
                  The Cultural Bridge for Multicultural Couples
                </h3>
                <p className="text-sm text-brand-muted leading-relaxed">
                  Navigating a multicultural celebration requires deep emotional and cultural fluency. Whether harmonizing a traditional Vietnamese tea ceremony (Lễ Ăn Hỏi) with a Western vows banquet, or translating regional customs into effortless five-star etiquette, VWG ensures both families feel honored and seamlessly integrated.
                </p>
              </div>
              <div className="mt-8 pt-6 border-t border-brand-border/60 text-xs font-medium text-brand-dark/80 flex items-center gap-2">
                <CheckCircle2 className="w-4 h-4 text-brand-gold shrink-0" />
                <span>Zero tension between ancient traditions and modern luxury</span>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* 3. DUAL IMPACT: FOR COUPLES & FOR HOSPITALITY PARTNERS */}
      <section className="py-20 lg:py-28 bg-white 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-2 gap-12 lg:gap-16 items-center">
            <div>
              <div className="inline-block mb-4">
                <span className="text-xs font-semibold text-brand-gold uppercase tracking-[0.2em]">
                  Two-Way Ecosystem
                </span>
              </div>
              <h2 className="font-title text-3xl sm:text-4xl font-bold text-brand-dark mb-6 leading-tight">
                Empowering Couples While Elevating Industry Standards
              </h2>
              <p className="text-base text-brand-muted leading-relaxed mb-8">
                VWG occupies a unique, neutral position in the wedding industry. Because we accept 0% commission from suppliers, our allegiance remains strictly fiduciary to our readers and consulting clients.
              </p>

              <div className="space-y-6">
                <div className="flex items-start gap-4">
                  <div className="w-10 h-10 rounded-xl bg-brand-sand flex items-center justify-center text-brand-gold shrink-0">
                    <Users className="w-5 h-5" />
                  </div>
                  <div>
                    <h3 className="font-title text-lg font-bold text-brand-dark mb-1">
                      For International &amp; Overseas Vietnamese Couples
                    </h3>
                    <p className="text-sm text-brand-muted leading-relaxed">
                      Radical price transparency, realistic season advisories, honest venue appraisals, and contract stress-testing to protect you from unexpected surcharges and planning stress.
                    </p>
                  </div>
                </div>

                <div className="flex items-start gap-4">
                  <div className="w-10 h-10 rounded-xl bg-brand-sand flex items-center justify-center text-brand-gold shrink-0">
                    <Building2 className="w-5 h-5" />
                  </div>
                  <div>
                    <h3 className="font-title text-lg font-bold text-brand-dark mb-1">
                      For Luxury Resorts &amp; Creative Vendors
                    </h3>
                    <p className="text-sm text-brand-muted leading-relaxed">
                      Operational advisory, international client service protocols, and curated global positioning so Vietnamese hospitality brands can confidently capture high-spending destination demand.
                    </p>
                  </div>
                </div>
              </div>

              <div className="mt-10 flex flex-wrap gap-4">
                <Link
                  href="/services/private-consultant"
                  className="inline-flex items-center gap-2 bg-brand-gold hover:bg-brand-gold-hover text-white px-6 py-3 rounded-full text-xs font-semibold uppercase tracking-wider transition-all duration-300"
                >
                  <span>Services for Couples</span>
                  <ArrowRight className="w-4 h-4" />
                </Link>
                <Link
                  href="/services/b2b"
                  className="inline-flex items-center gap-2 bg-brand-sand hover:bg-brand-border text-brand-dark px-6 py-3 rounded-full text-xs font-semibold uppercase tracking-wider transition-all duration-300"
                >
                  <span>B2B Venue Advisory</span>
                  <ArrowRight className="w-4 h-4" />
                </Link>
              </div>
            </div>

            <div className="relative">
              <div className="aspect-[4/3] rounded-3xl overflow-hidden bg-brand-sand border border-brand-border/80 shadow-lg relative">
                <Image
                  src="/images/nhi-vo-profile.webp"
                  alt="Destination Wedding in Vietnam"
                  fill
                  className="object-cover"
                  sizes="(min-width: 1024px) 500px, 100vw"
                />
                <div className="absolute inset-0 bg-gradient-to-t from-brand-dark/70 via-transparent to-transparent" />
                <div className="absolute bottom-6 left-6 right-6 text-white">
                  <span className="text-xs uppercase tracking-widest text-brand-gold font-semibold block mb-1">
                    Authentic Vietnam Experience
                  </span>
                  <p className="font-title text-lg font-bold">
                    Where global luxury benchmarks meet timeless Vietnamese warmth.
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* 4. THE STANDARDS WE STAND FOR */}
      <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="text-center max-w-2xl mx-auto mb-16">
            <h2 className="font-title text-3xl sm:text-4xl font-bold text-brand-dark mb-4">
              The VWG Editorial Promise
            </h2>
            <p className="text-brand-muted text-base">
              Integrity is our primary currency. We uphold three strict operational principles across every article and consulting engagement.
            </p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            <div className="bg-white rounded-3xl p-8 border border-brand-border/80 shadow-xs">
              <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">
                Zero Hidden Margins
              </h3>
              <p className="text-sm text-brand-muted leading-relaxed">
                We accept no kickbacks or referral markups from featured venues, planners, or vendors. When we recommend a supplier or audit a quote, our verdict is 100% candid.
              </p>
            </div>

            <div className="bg-white rounded-3xl p-8 border border-brand-border/80 shadow-xs">
              <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">
                First-Hand Verification
              </h3>
              <p className="text-sm text-brand-muted leading-relaxed">
                We do not copy-paste marketing brochures. Properties featured on VWG undergo real logistical scrutiny: ballrooms, sound curfews, load-in restrictions, and actual service levels.
              </p>
            </div>

            <div className="bg-white rounded-3xl p-8 border border-brand-border/80 shadow-xs">
              <div className="w-12 h-12 rounded-2xl bg-brand-sand flex items-center justify-center text-brand-gold mb-6">
                <Building2 className="w-6 h-6" />
              </div>
              <h3 className="font-title text-xl font-bold text-brand-dark mb-3">
                Honoring Cultural Nuance
              </h3>
              <p className="text-sm text-brand-muted leading-relaxed">
                We advocate for deep cultural integration over superficial aesthetics. Vietnam’s regional traditions and hospitality codes are articulated with clarity and pride.
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* 5. THE FOUNDER & CURATOR — CONCISE BIO LINKING TO NHIVO.IO.VN */}
      <FounderBioSection variant="about" />

      {/* 6. BOTTOM CTA BANNER */}
      <LuxuryCTABanner
        badgeText="Connect with Our Advisory"
        title="Join Us in Championing Exceptional Celebrations"
        description="Whether you are an international couple planning your multi-day celebration in Vietnam, or a hospitality brand seeking to elevate your destination wedding standards, we welcome the conversation."
        primaryCtaText="Submit Inquiry Form"
        primaryCtaHref="/contact"
        primaryCtaIcon="arrow"
        whatsappMessage="Hello Nhi, I just read about the vision of Vietnam Wedding Guide and would like to connect."
        whatsappButtonText="Chat on WhatsApp"
        whatsappNumber={settings?.whatsapp || undefined}
        sectionPadding="pb-20 lg:pb-32 pt-12"
      />
    </div>
  );
}