import {
  Server,
  Scale,
  ShieldAlert,
  Database,
  Lock,
  Eye,
  ShieldCheck,
  AlertTriangle,
  Check,
} from "lucide-react";

export default function PartnershipGovernance() {
  return (
    <section id="governance" className="py-24 bg-[#161412] text-white border-y border-brand-gold/30 relative overflow-hidden">
      {/* Background Technical Grid */}
      <div
        className="absolute inset-0 opacity-[0.03] pointer-events-none"
        style={{
          backgroundImage: "linear-gradient(#C5A880 1px, transparent 1px), linear-gradient(to right, #C5A880 1px, transparent 1px)",
          backgroundSize: "36px 36px",
        }}
      />
      <div className="absolute -top-40 right-0 w-96 h-96 bg-brand-gold/10 rounded-full blur-3xl pointer-events-none" />

      <div className="container max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
        <div className="max-w-3xl mx-auto text-center mb-16">
          <div className="inline-flex items-center px-3.5 py-1.5 rounded-full bg-brand-gold/10 border border-brand-gold/40 text-brand-gold text-xs font-mono tracking-wider uppercase mb-4">
            <span>Asset Integrity &amp; Compliance Framework</span>
          </div>
          <h2 className="text-3xl sm:text-4xl lg:text-5xl font-title font-bold text-white tracking-tight">
            Governance Standards &amp; Operating Principles
          </h2>
          <p className="text-stone-400 mt-3 text-sm sm:text-base leading-relaxed">
            Four inviolable covenants to protect Domain Authority, institutional neutrality, search rankings, and the prestigious global reputation of Vietnam&apos;s destination wedding industry.
          </p>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 gap-6 lg:gap-8">
          {/* Covenant 01 */}
          <div className="p-8 rounded-3xl bg-[#201D1A] border border-stone-800 hover:border-brand-gold/60 transition-all relative group flex flex-col justify-between shadow-lg">
            <div>
              <div className="flex items-center justify-between mb-5">
                <span className="font-mono text-xs font-bold text-brand-gold tracking-widest uppercase bg-brand-gold/10 px-3 py-1 rounded-md border border-brand-gold/30">
                  COVENANT #01
                </span>
                <span className="text-[11px] font-mono text-[#A1B398] bg-[#5B6E50]/20 border border-[#5B6E50]/40 px-2.5 py-0.5 rounded-full flex items-center gap-1.5">
                  <span className="w-1.5 h-1.5 rounded-full bg-[#A1B398] animate-pulse" />
                  DNS Delegation Model
                </span>
              </div>

              <div className="flex items-start gap-4 mb-4">
                <div className="w-12 h-12 rounded-2xl bg-stone-900 border border-stone-700 flex items-center justify-center text-brand-gold text-xl shrink-0">
                  <Server className="w-6 h-6" />
                </div>
                <div>
                  <h3 className="font-title text-2xl font-bold text-white">Technical Infrastructure Isolation</h3>
                  <p className="text-xs font-mono text-stone-400 mt-0.5">Master Registrar Protection</p>
                </div>
              </div>

              <p className="text-sm text-stone-300 leading-relaxed">
                The Licensor preserves master registrar ownership to eliminate chain-of-title risks. The operating partner is granted comprehensive DNS authority (<code className="text-brand-gold bg-stone-900 px-1.5 py-0.5 rounded text-xs font-mono">A Record</code>, <code className="text-brand-gold bg-stone-900 px-1.5 py-0.5 rounded text-xs font-mono">CNAME</code>, <code className="text-brand-gold bg-stone-900 px-1.5 py-0.5 rounded text-xs font-mono">MX</code>) to connect their proprietary hosting architecture and client workflows.
              </p>
            </div>

            <div className="mt-6 pt-4 border-t border-stone-800 flex items-center justify-between text-xs text-stone-400">
              <span className="flex items-center gap-1.5">
                <Lock className="w-3.5 h-3.5 text-brand-gold" />
                Auth/EPP codes are permanently withheld
              </span>
              <span className="font-mono text-[11px] text-stone-500">DNS-SEC</span>
            </div>
          </div>

          {/* Covenant 02 */}
          <div className="p-8 rounded-3xl bg-[#201D1A] border border-stone-800 hover:border-brand-gold/60 transition-all relative group flex flex-col justify-between shadow-lg">
            <div>
              <div className="flex items-center justify-between mb-5">
                <span className="font-mono text-xs font-bold text-brand-gold tracking-widest uppercase bg-brand-gold/10 px-3 py-1 rounded-md border border-brand-gold/30">
                  COVENANT #02
                </span>
                <span className="text-[11px] font-mono text-amber-400 bg-amber-950/60 border border-amber-800/80 px-2.5 py-0.5 rounded-full flex items-center gap-1.5">
                  <span className="w-1.5 h-1.5 rounded-full bg-amber-400" />
                  Anti-Bias Covenant
                </span>
              </div>

              <div className="flex items-start gap-4 mb-4">
                <div className="w-12 h-12 rounded-2xl bg-stone-900 border border-stone-700 flex items-center justify-center text-brand-gold text-xl shrink-0">
                  <Scale className="w-6 h-6" />
                </div>
                <div>
                  <h3 className="font-title text-2xl font-bold text-white">Curated Editorial Neutrality</h3>
                  <p className="text-xs font-mono text-stone-400 mt-0.5">Editorial Credibility Benchmark</p>
                </div>
              </div>

              <p className="text-sm text-stone-300 leading-relaxed">
                Partners commit to maintaining <strong>Vietnam Wedding Guide</strong> as an objective, multi-vendor editorial authority. The platform must never be degraded into an exclusive single-vendor storefront. Channeling all inquiries to one solitary supplier erodes international consumer confidence and destroys domain authority.
              </p>
            </div>

            <div className="mt-6 pt-4 border-t border-stone-800 flex items-center justify-between text-xs text-stone-400">
              <span className="flex items-center gap-1.5">
                <Eye className="w-3.5 h-3.5 text-brand-gold" />
                Transparent vetting across Vietnam&apos;s wedding ecosystem
              </span>
              <span className="font-mono text-[11px] text-stone-500">PUB-STD</span>
            </div>
          </div>

          {/* Covenant 03 */}
          <div className="p-8 rounded-3xl bg-[#201D1A] border-2 border-brand-gold/60 hover:border-brand-gold transition-all relative group flex flex-col justify-between shadow-xl">
            <div className="absolute -top-3.5 right-6 bg-brand-gold text-brand-dark text-[10px] font-mono font-bold uppercase tracking-wider px-3 py-0.5 rounded-full shadow-md">
              Critical Requirement
            </div>

            <div>
              <div className="flex items-center justify-between mb-5">
                <span className="font-mono text-xs font-bold text-brand-gold tracking-widest uppercase bg-brand-gold/10 px-3 py-1 rounded-md border border-brand-gold/30">
                  COVENANT #03
                </span>
                <span className="text-[11px] font-mono text-cyan-400 bg-cyan-950/60 border border-cyan-800/80 px-2.5 py-0.5 rounded-full flex items-center gap-1.5">
                  <ShieldCheck className="w-3 h-3 text-cyan-400" />
                  White-Hat SEO &amp; Copyright
                </span>
              </div>

              <div className="flex items-start gap-4 mb-4">
                <div className="w-12 h-12 rounded-2xl bg-stone-900 border border-brand-gold/40 flex items-center justify-center text-brand-gold text-xl shrink-0">
                  <ShieldAlert className="w-6 h-6 text-brand-gold" />
                </div>
                <div>
                  <h3 className="font-title text-2xl font-bold text-white">White-Hat Search &amp; Strict IP Rights</h3>
                  <p className="text-xs font-mono text-brand-gold mt-0.5">Algorithm Protection &amp; DMCA Safety</p>
                </div>
              </div>

              <div className="space-y-2.5 text-sm text-stone-300 leading-relaxed">
                <p>
                  <strong className="text-white">• White-Hat SEO Compliance:</strong> 100% adherence to organic, authoritative search standards. Zero tolerance for toxic link networks (PBNs), automated content scraping, black-hat redirects, or bot manipulation that risks Google manual action penalties.
                </p>
                <p>
                  <strong className="text-white">• Intellectual Property &amp; Media Copyright:</strong> Every visual, editorial asset, and video must carry legitimate commercial licensing or explicit written artist consent, preventing DMCA takedowns and protecting international legal standing.
                </p>
              </div>
            </div>

            <div className="mt-6 pt-4 border-t border-stone-800 flex items-center justify-between text-xs text-stone-400">
              <span className="flex items-center gap-1.5 text-amber-300 font-medium">
                <AlertTriangle className="w-3.5 h-3.5" />
                Absolute protection against algorithmic de-indexing
              </span>
              <span className="font-mono text-[11px] text-stone-500">IPR-PROT</span>
            </div>
          </div>

          {/* Covenant 04 */}
          <div className="p-8 rounded-3xl bg-[#201D1A] border border-stone-800 hover:border-brand-gold/60 transition-all relative group flex flex-col justify-between shadow-lg">
            <div>
              <div className="flex items-center justify-between mb-5">
                <span className="font-mono text-xs font-bold text-brand-gold tracking-widest uppercase bg-brand-gold/10 px-3 py-1 rounded-md border border-brand-gold/30">
                  COVENANT #04
                </span>
                <span className="text-[11px] font-mono text-rose-400 bg-rose-950/60 border border-rose-800/80 px-2.5 py-0.5 rounded-full flex items-center gap-1.5">
                  <span className="w-1.5 h-1.5 rounded-full bg-rose-400" />
                  Sovereignty &amp; Safeguards
                </span>
              </div>

              <div className="flex items-start gap-4 mb-4">
                <div className="w-12 h-12 rounded-2xl bg-stone-900 border border-stone-700 flex items-center justify-center text-brand-gold text-xl shrink-0">
                  <Database className="w-6 h-6 text-brand-gold" />
                </div>
                <div>
                  <h3 className="font-title text-2xl font-bold text-white">Data Ownership &amp; Transition Security</h3>
                  <p className="text-xs font-mono text-stone-400 mt-0.5">Asset Recovery &amp; Data Rights</p>
                </div>
              </div>

              <p className="text-sm text-stone-300 leading-relaxed">
                The Licensor retains DNS revocation rights strictly upon unrectified breaches or default exceeding 10 business days. Upon contract conclusion, the operating partner retains 100% intellectual property ownership of their produced articles, CMS software, customer inquiries, and database backups.
              </p>
            </div>

            <div className="mt-6 pt-4 border-t border-stone-800 flex items-center justify-between text-xs text-stone-400">
              <span className="flex items-center gap-1.5">
                <Check className="w-3.5 h-3.5 text-brand-gold" />
                Partner databases and creative assets remain their sole property
              </span>
              <span className="font-mono text-[11px] text-stone-500">DATA-SOV</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}