import { Layers, Sparkles, Check } from "lucide-react";
import Breadcrumbs from "@/components/ui/breadcrumbs";
import { SITE_DOMAINS } from "@/lib/constants/site";

interface PartnershipHeroProps {
  breadcrumbLinks: { label: string; href: string }[];
}

export default function PartnershipHero({ breadcrumbLinks }: PartnershipHeroProps) {
  return (
    <section className="relative hero-pattern pt-12 pb-20 md:pt-20 md:pb-28 border-b border-brand-border/60 overflow-hidden">
      <div className="container max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10 text-center">
        <div className="mb-6">
          <Breadcrumbs links={breadcrumbLinks} />
        </div>

        {/* Highlight Badge */}
        <div className="inline-flex items-center px-4 py-1.5 rounded-full badge-gold text-brand-dark text-xs sm:text-sm font-medium mb-6">
          <span>Strategic Brand Alliance &amp; National Platform Licensing</span>
        </div>

        {/* Main Headline */}
        <h1 className="text-3xl sm:text-5xl lg:text-6xl font-title font-bold tracking-tight text-brand-dark mb-6 leading-tight max-w-5xl mx-auto">
          Develop Vietnam Wedding Guide<br />
          <span className="gold-gradient-text">Vietnam Destination Wedding Authority</span>
        </h1>

        {/* Subtitle */}
        <p className="max-w-3xl mx-auto text-base sm:text-lg lg:text-xl text-brand-muted font-normal leading-relaxed mb-10">
          An exclusive invitation for visionary media agencies, bespoke wedding consultancies, and luxury hospitality alliances to license, steward, and co-develop <strong className="text-brand-dark font-semibold">Vietnam Wedding Guide</strong> across its category-defining dual domains — capturing the surging wave of high-net-worth international couples and overseas diaspora.
        </p>

        {/* Metric Pills */}
        <div className="grid grid-cols-2 md:grid-cols-4 gap-4 max-w-4xl mx-auto mb-10 text-left">
          <div className="bg-white/85 backdrop-blur-xs p-4 rounded-2xl border border-brand-border shadow-xs">
            <p className="text-[11px] text-brand-muted uppercase tracking-wider font-semibold">Flagship Authority</p>
            <p className="text-lg font-title font-bold text-brand-dark mt-1">Dual-Domain Power</p>
            <span className="text-xs text-brand-gold font-medium">{SITE_DOMAINS.secondary} • .com</span>
          </div>
          <div className="bg-white/85 backdrop-blur-xs p-4 rounded-2xl border border-brand-border shadow-xs">
            <p className="text-[11px] text-brand-muted uppercase tracking-wider font-semibold">Entry Tier</p>
            <div className="flex items-baseline gap-1.5 mt-1">
              <p className="text-lg font-title font-bold text-brand-gold">$222 / month</p>
            </div>
            <span className="text-[11px] text-[#5B6E50] font-medium">6-Month Mutual Fit Period</span>
          </div>
          <div className="bg-white/85 backdrop-blur-xs p-4 rounded-2xl border border-brand-border shadow-xs">
            <p className="text-[11px] text-brand-muted uppercase tracking-wider font-semibold">Target Audience</p>
            <p className="text-lg font-title font-bold text-brand-dark mt-1">UHNW &amp; Expats</p>
            <span className="text-xs text-brand-muted">Cross-Border &amp; High-Spenders</span>
          </div>
          <div className="bg-white/85 backdrop-blur-xs p-4 rounded-2xl border border-brand-border shadow-xs">
            <p className="text-[11px] text-brand-muted uppercase tracking-wider font-semibold">Core Principle</p>
            <p className="text-lg font-title font-bold text-brand-dark mt-1">Curated Neutrality</p>
            <span className="text-xs text-amber-800 font-medium">Anti-Bias &amp; Pure Prestige</span>
          </div>
        </div>

        {/* Hero Actions */}
        <div className="flex flex-col sm:flex-row items-center justify-center gap-4">
          <a
            href="#partnership-tiers"
            className="w-full sm:w-auto px-8 py-4 rounded-full bg-brand-gold hover:bg-brand-gold-hover text-white font-medium text-xs sm:text-sm tracking-wide shadow-sm hover:shadow-md transition-all duration-300 hover:-translate-y-0.5 flex items-center justify-center gap-2"
          >
            <Layers className="w-4 h-4" />
            <span>View 3 Partnership Models</span>
          </a>
          <a
            href="#strategic-edge"
            className="w-full sm:w-auto px-8 py-4 rounded-full bg-white hover:bg-brand-sand text-brand-dark font-medium text-xs sm:text-sm tracking-wide border border-brand-border hover:border-brand-gold transition-all duration-300 flex items-center justify-center gap-2 shadow-xs hover:-translate-y-0.5"
          >
            <Sparkles className="w-4 h-4 text-brand-gold" />
            <span>Explore Strategic Advantages</span>
          </a>
        </div>

        <div className="mt-8 flex flex-wrap items-center justify-center gap-6 text-xs text-brand-muted">
          <span className="flex items-center gap-1.5">
            <Check className="w-3.5 h-3.5 text-brand-gold" />
            <span>100% White-Hat SEO &amp; Clean Entity Foundation</span>
          </span>
          <span className="flex items-center gap-1.5">
            <Check className="w-3.5 h-3.5 text-brand-gold" />
            <span>Full DNS Delegation with Clean Infrastructure</span>
          </span>
          <span className="flex items-center gap-1.5">
            <Check className="w-3.5 h-3.5 text-brand-gold" />
            <span>Optional High-Level UHNW Advisory</span>
          </span>
        </div>
      </div>
    </section>
  );
}