import {
  Sliders,
  CheckCircle2,
  Crown,
  Gem,
  Check,
  Lightbulb,
} from "lucide-react";
import { SITE_DOMAINS } from "@/lib/constants/site";
import {
  PARTNERSHIP_TIERS,
  UHNW_ADVISORY_CONFIG,
} from "@/lib/constants/partnership";

interface PartnershipTiersProps {
  onSelectTier: (tier: string) => void;
  includeUHNW: boolean;
  onToggleUHNW: () => void;
}

export default function PartnershipTiers({
  onSelectTier,
  includeUHNW,
  onToggleUHNW,
}: PartnershipTiersProps) {
  return (
    <section id="partnership-tiers" className="py-24 bg-brand-ivory relative border-t 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 uppercase tracking-widest text-brand-gold font-bold">
            Transparent Strategic Collaboration
          </span>
          <h2 className="text-3xl sm:text-4xl lg:text-5xl font-title font-bold text-brand-dark mt-2">
            3 Partnership Pathways
          </h2>
          <p className="text-brand-muted mt-3 text-sm sm:text-base leading-relaxed">
            Select between autonomous platform stewardship, full dual-domain brand alliance, and elevate either pathway with specialized content advisory for Ultra-High-Net-Worth (UHNW) client engagement.
          </p>
        </div>

        {/* Comparison Cards Grid (Standard vs Pro) */}
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 items-stretch mb-12">
          {/* Tier 1: Standard */}
          <div className="card-luxury p-8 sm:p-10 rounded-3xl flex flex-col justify-between relative bg-white border-2 border-brand-border hover:border-brand-gold/70 shadow-xs">
            <div className="absolute -top-3.5 left-8 bg-stone-800 text-stone-100 text-[11px] font-semibold uppercase tracking-wider px-4 py-1 rounded-full border border-stone-600 shadow-xs flex items-center gap-1.5">
              <Sliders className="w-3 h-3 text-brand-gold" />
              <span>{PARTNERSHIP_TIERS.standard.badge}</span>
            </div>

            <div>
              <div className="flex justify-between items-start mb-6 pt-2">
                <div>
                  <span className="text-xs font-bold uppercase tracking-widest text-brand-gold">Pathway 01</span>
                  <h3 className="text-3xl font-title font-bold text-brand-dark mt-1">{PARTNERSHIP_TIERS.standard.name}</h3>
                  <p className="text-xs text-brand-muted mt-1">{PARTNERSHIP_TIERS.standard.tagline}</p>
                </div>
                <div className="w-12 h-12 rounded-2xl bg-brand-ivory border border-brand-border flex items-center justify-center text-brand-dark text-xl">
                  <Sliders className="w-6 h-6 text-brand-gold" />
                </div>
              </div>

              {/* Price Display */}
              <div className="p-6 rounded-2xl bg-stone-50 border border-stone-200 mb-6">
                <div className="flex items-center justify-between">
                  <span className="text-[11px] font-bold uppercase tracking-wider text-stone-700 bg-stone-200/80 px-2 py-0.5 rounded font-mono">
                    Initial {PARTNERSHIP_TIERS.standard.commitmentMonths}-Month Fit Review
                  </span>
                  <span className="text-xs text-stone-500 font-mono">Renewable 1–3 Years</span>
                </div>
                <div className="flex items-baseline gap-2 mt-2">
                  <span className="text-4xl sm:text-5xl font-title font-bold text-brand-dark">{PARTNERSHIP_TIERS.standard.monthlyPriceDisplay}</span>
                  <span className="text-sm text-brand-muted font-medium">/ month</span>
                </div>
                <p className="text-xs text-stone-600 mt-2 leading-relaxed">
                  Initial {PARTNERSHIP_TIERS.standard.commitmentMonths}-month commitment (<strong>{PARTNERSHIP_TIERS.standard.initialTotalDisplay}</strong>) structured to assess strategic alignment, brand synergy, and editorial execution before formalizing long-term 1 to 3-year extensions.
                </p>
              </div>

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

              <div className="space-y-3.5 mb-8 text-sm">
                {PARTNERSHIP_TIERS.standard.deliverables.map((item, idx) => (
                  <div key={idx} className="flex items-start gap-3">
                    <CheckCircle2 className="w-4 h-4 text-brand-gold mt-1 shrink-0" />
                    <span className="text-brand-dark"><strong>{item.title}:</strong> {item.description}</span>
                  </div>
                ))}
              </div>
            </div>

            <div>
              <button
                type="button"
                onClick={() => onSelectTier(PARTNERSHIP_TIERS.standard.selectLabel)}
                className="w-full py-4 rounded-full bg-white hover:bg-brand-sand text-brand-dark font-medium text-xs uppercase tracking-wider border border-brand-border hover:border-brand-gold transition-all duration-300 flex items-center justify-center cursor-pointer shadow-xs hover:-translate-y-0.5"
              >
                Select Standard Pathway
              </button>
            </div>
          </div>

          {/* Tier 2: Pro */}
          <div className="card-luxury p-8 sm:p-10 rounded-3xl flex flex-col justify-between relative bg-white border-2 border-brand-gold shadow-lg">
            <div className="absolute -top-3.5 left-8 bg-brand-dark text-brand-gold text-[11px] font-bold uppercase tracking-wider px-4 py-1 rounded-full border border-brand-gold/40 shadow-xs flex items-center gap-1.5">
              <Crown className="w-3.5 h-3.5 text-brand-gold" />
              <span>{PARTNERSHIP_TIERS.pro.badge}</span>
            </div>

            <div>
              <div className="flex justify-between items-start mb-6 pt-2">
                <div>
                  <span className="text-xs font-bold uppercase tracking-widest text-brand-gold">Pathway 02</span>
                  <h3 className="text-3xl font-title font-bold text-brand-dark mt-1">{PARTNERSHIP_TIERS.pro.name}</h3>
                  <p className="text-xs text-brand-muted mt-1">{PARTNERSHIP_TIERS.pro.tagline}</p>
                </div>
                <div className="w-12 h-12 rounded-2xl bg-brand-dark text-brand-gold flex items-center justify-center text-xl">
                  <Gem className="w-6 h-6 text-brand-gold" />
                </div>
              </div>

              {/* Price Display */}
              <div className="p-6 rounded-2xl bg-amber-50/70 border border-brand-gold/50 mb-6">
                <div className="flex items-center justify-between">
                  <span className="text-[11px] font-bold uppercase tracking-wider text-amber-950 bg-amber-200/80 px-2 py-0.5 rounded font-mono">
                    Dual-Domain Synergy
                  </span>
                  <span className="text-xs text-amber-900 font-mono font-semibold">Maximum Authority</span>
                </div>
                <div className="flex items-baseline gap-2 mt-2">
                  <span className="text-4xl sm:text-5xl font-title font-bold text-brand-dark">{PARTNERSHIP_TIERS.pro.monthlyPriceDisplay}</span>
                  <span className="text-sm text-brand-muted font-medium">/ month</span>
                </div>
                <p className="text-xs text-amber-950 mt-2 leading-relaxed">
                  Empowering the full brand identity of <strong>Vietnam Wedding Guide</strong> backed by both <code className="bg-white/80 px-1 py-0.5 rounded text-[11px] font-mono">{SITE_DOMAINS.secondary}</code> and <code className="bg-white/80 px-1 py-0.5 rounded text-[11px] font-mono">{SITE_DOMAINS.primary}</code>.
                </p>
              </div>

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

              <div className="space-y-3.5 mb-8 text-sm">
                <div className="flex items-start gap-3">
                  <Crown className="w-4 h-4 text-brand-gold mt-1 shrink-0" />
                  <span className="text-brand-dark"><strong>{PARTNERSHIP_TIERS.pro.deliverables[0].title}:</strong> Co-develop and cross-link both <strong className="text-brand-dark font-medium">{SITE_DOMAINS.secondary}</strong> and <strong className="text-brand-dark font-medium">{SITE_DOMAINS.primary}</strong> for absolute category monopoly.</span>
                </div>
                <div className="flex items-start gap-3">
                  <Crown className="w-4 h-4 text-brand-gold mt-1 shrink-0" />
                  <span className="text-brand-dark"><strong>{PARTNERSHIP_TIERS.pro.deliverables[1].title}:</strong> {PARTNERSHIP_TIERS.pro.deliverables[1].description}</span>
                </div>
                <div className="flex items-start gap-3">
                  <Crown className="w-4 h-4 text-brand-gold mt-1 shrink-0" />
                  <span className="text-brand-dark"><strong>{PARTNERSHIP_TIERS.pro.deliverables[2].title}:</strong> {PARTNERSHIP_TIERS.pro.deliverables[2].description}</span>
                </div>
                <div className="flex items-start gap-3">
                  <Crown className="w-4 h-4 text-brand-gold mt-1 shrink-0" />
                  <span className="text-brand-dark"><strong>{PARTNERSHIP_TIERS.pro.deliverables[3].title}:</strong> {PARTNERSHIP_TIERS.pro.deliverables[3].description}</span>
                </div>
              </div>
            </div>

            <div>
              <button
                type="button"
                onClick={() => onSelectTier(PARTNERSHIP_TIERS.pro.selectLabel)}
                className="w-full py-4 rounded-full bg-brand-gold hover:bg-brand-gold-hover text-white font-medium text-xs uppercase tracking-wider shadow-sm hover:shadow-md transition-all duration-300 flex items-center justify-center cursor-pointer hover:-translate-y-0.5"
              >
                Select Pro Brand Alliance
              </button>
            </div>
          </div>
        </div>

        {/* Plus Add-on: UHNW Advisory Banner */}
        <div className="max-w-5xl mx-auto rounded-3xl bg-gradient-to-br from-[#1C1917] via-[#2A241F] to-[#1C1917] text-white p-8 sm:p-12 border-2 border-brand-gold/50 shadow-2xl relative overflow-hidden">
          <div className="absolute -right-10 -bottom-10 w-72 h-72 bg-brand-gold/10 rounded-full blur-3xl pointer-events-none" />

          <div className="relative z-10 flex flex-col lg:flex-row items-center justify-between gap-8">
            <div className="max-w-2xl">
              <div className="inline-flex items-center px-3 py-1 rounded-full bg-brand-gold/20 border border-brand-gold/40 text-brand-gold text-xs font-mono tracking-wider uppercase mb-3">
                <span>{UHNW_ADVISORY_CONFIG.badge}</span>
              </div>

              <h3 className="text-2xl sm:text-3xl font-title font-bold text-white mb-3">
                {UHNW_ADVISORY_CONFIG.title}
              </h3>

              <p className="text-sm text-stone-300 leading-relaxed mb-4">
                Private advisory led directly by <strong className="text-white">{UHNW_ADVISORY_CONFIG.founderName}</strong> ({UHNW_ADVISORY_CONFIG.founderCredentials}). {UHNW_ADVISORY_CONFIG.description}
              </p>

              <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 text-xs text-stone-300">
                {UHNW_ADVISORY_CONFIG.deliverables.map((d, idx) => (
                  <div key={idx} className="flex items-center gap-2">
                    <Check className="w-4 h-4 text-brand-gold shrink-0" />
                    <span>{d}</span>
                  </div>
                ))}
              </div>
            </div>

            <div className="shrink-0 text-center lg:text-right bg-stone-900/80 p-6 rounded-2xl border border-stone-700/80 w-full lg:w-auto">
              <span className="text-xs uppercase tracking-wider text-stone-400 block font-medium">
                Bespoke Retainer / Hourly
              </span>
              <div className="flex items-baseline justify-center lg:justify-end gap-1.5 my-2">
                <span className="text-xs text-stone-400">from</span>
                <span className="text-4xl sm:text-5xl font-title font-bold text-brand-gold">{UHNW_ADVISORY_CONFIG.hourlyRateDisplay}</span>
                <span className="text-xs text-stone-400">{UHNW_ADVISORY_CONFIG.rateUnit}</span>
              </div>
              <p className="text-[11px] text-stone-400 mb-4">{UHNW_ADVISORY_CONFIG.rateNote}</p>
              <button
                type="button"
                onClick={onToggleUHNW}
                className={`w-full px-6 py-3.5 rounded-full font-medium text-xs uppercase tracking-wider shadow-sm transition-all duration-300 cursor-pointer ${
                  includeUHNW
                    ? "bg-[#5B6E50] hover:bg-[#4E5E44] text-white ring-2 ring-white/30"
                    : "bg-brand-gold hover:bg-brand-gold-hover text-white"
                }`}
              >
                <span>{includeUHNW ? "UHNW Advisory Included ✓" : "Include UHNW Advisory"}</span>
              </button>
            </div>
          </div>
        </div>

        {/* Strategic Guidance Box */}
        <div className="mt-12 max-w-4xl mx-auto p-6 sm:p-7 rounded-3xl bg-amber-50/80 border border-amber-200/90 shadow-xs">
          <div className="flex flex-col sm:flex-row items-start gap-4">
            <div className="w-12 h-12 rounded-2xl bg-amber-100 text-amber-800 shrink-0 flex items-center justify-center text-xl shadow-xs">
              <Lightbulb className="w-6 h-6 text-amber-800" />
            </div>
            <div>
              <div className="flex items-center gap-2 mb-1">
                <span className="text-xs font-bold uppercase tracking-wider text-amber-900">
                  Strategic Guidance For Prospective Partners
                </span>
                <span className="text-[10px] bg-amber-200/70 text-amber-900 px-2 py-0.5 rounded-full font-medium">
                  Capital &amp; Time Efficiency
                </span>
              </div>
              <h4 className="font-title text-lg sm:text-xl font-bold text-amber-950 mb-2">
                Prepare Your Content Framework Prior to Domain Delegation
              </h4>
              <p className="text-xs sm:text-sm text-amber-900/85 leading-relaxed">
                We strongly encourage partners to <strong>design their staging UI and prepare core pillar articles before officially initiating the delegation cycle</strong>. This prevents recurring subscription costs during design downtime and avoids pointing a highly indexed, authoritative category domain to an &quot;Under Construction&quot; placeholder, which damages international user trust and algorithmic rank strength.
              </p>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}