import { Link } from "react-router-dom";
import { Briefcase, Share2, CheckCircle2, ArrowRight, Megaphone } from "lucide-react";
import { Button } from "@/components/ui/button";
import Navbar from "@/components/Navbar";
import Footer from "@/components/Footer";

const Partners = () => {
  const agencyFeatures = [
    "Dedicated partner manager",
    "Co-branded sales materials",
    "Priority client onboarding support",
    "Recurring revenue as clients stay active",
    "Quarterly business reviews (Preferred+)",
  ];

  const affiliateFeatures = [
    "Get your unique referral link instantly",
    "Promote to your audience your way",
    "No client management required",
    "Real-time referral dashboard",
    "Ready-to-use promotional assets",
  ];

  return (
    <div className="min-h-screen bg-[#0D1117] text-[#E2E8F0]">
      <Navbar />

      {/* Hero */}
      <section className="pt-28 pb-12 relative overflow-hidden">
        {/* Faint dot pattern */}
        <div
          className="absolute inset-0 opacity-[0.04]"
          style={{
            backgroundImage: "radial-gradient(#00C9A7 1px, transparent 1px)",
            backgroundSize: "24px 24px",
          }}
        />
        <div className="relative max-w-3xl mx-auto px-4 text-center">
          <span className="inline-block px-3 py-1 rounded-full bg-[#00C9A7]/10 text-[#00C9A7] text-xs font-semibold uppercase tracking-[0.15em] mb-5">
            Partner Program
          </span>
          <h1 className="text-4xl md:text-5xl font-bold text-white mb-4" style={{ fontFamily: "Inter, sans-serif" }}>
            Grow With ChatSKU
          </h1>
          <p className="text-lg text-[#94A3B8] max-w-xl mx-auto">
            We have two ways to partner with us — pick the one that fits how you work.
          </p>
        </div>
      </section>

      {/* Two path cards */}
      <section className="pb-16 px-4">
        <div className="max-w-5xl mx-auto grid md:grid-cols-2 gap-6">
          {/* Agency card */}
          <div className="group bg-[#161B22] border border-[#21262D] rounded-lg p-8 flex flex-col hover:border-[#00C9A7] hover:shadow-[0_0_20px_rgba(0,201,167,0.1)] transition-all duration-200">
            <Briefcase className="w-8 h-8 text-[#00C9A7] mb-4" />
            <span className="text-[10px] font-bold text-[#00C9A7] uppercase tracking-[0.2em] mb-2">
              For Agencies
            </span>
            <h2 className="text-xl font-bold text-white mb-3">Agency Partner</h2>
            <p className="text-sm text-[#E2E8F0] leading-relaxed mb-5">
              You work with B2B manufacturers, distributors, or wholesalers. Recommend ChatSKU to your clients, support their onboarding, and build a meaningful new revenue stream for your agency.
            </p>
            <ul className="space-y-2 mb-6 flex-1">
              {agencyFeatures.map((f) => (
                <li key={f} className="flex items-start gap-2 text-sm text-[#E2E8F0]">
                  <CheckCircle2 className="w-4 h-4 text-[#00C9A7] mt-0.5 shrink-0" />
                  {f}
                </li>
              ))}
            </ul>
            <Button asChild className="w-full bg-[#00C9A7] hover:bg-[#00b396] text-[#0D1117] font-semibold rounded-lg">
              <Link to="/partners/agency">
                Apply as an Agency Partner <ArrowRight className="w-4 h-4 ml-2" />
              </Link>
            </Button>
          </div>

          {/* Affiliate card */}
          <div className="group bg-[#161B22] border border-[#21262D] rounded-lg p-8 flex flex-col hover:border-[#00C9A7] hover:shadow-[0_0_20px_rgba(0,201,167,0.1)] transition-all duration-200">
            <Megaphone className="w-8 h-8 text-[#00C9A7] mb-4" />
            <span className="text-[10px] font-bold text-[#00C9A7] uppercase tracking-[0.2em] mb-2">
              For Creators & Consultants
            </span>
            <h2 className="text-xl font-bold text-white mb-3">Affiliate Partner</h2>
            <p className="text-sm text-[#E2E8F0] leading-relaxed mb-5">
              You have an audience of B2B buyers, procurement professionals, or industrial business owners. Share ChatSKU with your followers and earn every time your referral becomes a customer.
            </p>
            <ul className="space-y-2 mb-6 flex-1">
              {affiliateFeatures.map((f) => (
                <li key={f} className="flex items-start gap-2 text-sm text-[#E2E8F0]">
                  <CheckCircle2 className="w-4 h-4 text-[#00C9A7] mt-0.5 shrink-0" />
                  {f}
                </li>
              ))}
            </ul>
            <Button
              asChild
              variant="outline"
              className="w-full border-[#00C9A7] text-[#00C9A7] hover:bg-[#00C9A7]/10 font-semibold rounded-lg"
            >
              <Link to="/partners/affiliate">
                Join the Affiliate Program <ArrowRight className="w-4 h-4 ml-2" />
              </Link>
            </Button>
          </div>
        </div>
      </section>

      {/* Not sure section */}
      <section className="pb-20 px-4">
        <div className="max-w-2xl mx-auto text-center">
          <h3 className="text-lg font-semibold text-white mb-3">Not sure which fits you?</h3>
          <p className="text-sm text-[#94A3B8] leading-relaxed mb-4">
            If you actively manage B2B client relationships and want to bring ChatSKU into your service offering, you're an Agency Partner. If you have an audience you want to share ChatSKU with, you're an Affiliate.
          </p>
          <a
            href="mailto:partners@chatsku.com"
            className="text-sm font-medium text-[#00C9A7] hover:underline inline-flex items-center gap-1"
          >
            Questions? Reach out to our partnerships team <ArrowRight className="w-3.5 h-3.5" />
          </a>
        </div>
      </section>

      <Footer />
    </div>
  );
};

export default Partners;
