import React from "react";
import { Link } from "react-router-dom";
import {
  RocketLaunchIcon,
  ChatBubbleLeftRightIcon,
  ArrowRightIcon,
  CheckCircleIcon,
  CodeBracketIcon,
  WrenchScrewdriverIcon,
} from "@heroicons/react/24/outline";

const Partners: React.FC = () => {
  const renderCta = (cta: { label: string; href: string }, className: string) => {
    const isExternal = cta.href.startsWith("http");
    
    if (isExternal) {
      return (
        <a
          href={cta.href}
          className={className}
          target="_blank"
          rel="noreferrer"
        >
          {cta.label}
        </a>
      );
    }
    
    return (
      <Link to={cta.href} className={className}>
        {cta.label}
      </Link>
    );
  };

  const tiers = [
    {
      title: "Certified Agency",
      description: "For agencies delivering content services at scale",
      benefits: [
        "Co-branded marketing assets and listing in partner directory",
        "Dedicated partner manager and quarterly business reviews",
        "Access to automation templates and think tank sessions",
      ],
      icon: CheckCircleIcon,
      iconColor: "from-[var(--igny8-blue)] to-[var(--igny8-blue-dark)]",
    },
    {
      title: "Technology Partner",
      description: "For platforms building integrations with IGNY8",
      benefits: [
        "API access, sandbox environments, and technical documentation",
        "Joint integration roadmap planning and go-to-market support",
        "Shared lead programs and launch promotion campaigns",
      ],
      icon: CodeBracketIcon,
      iconColor: "from-[var(--igny8-green)] to-[var(--igny8-green-dark)]",
    },
    {
      title: "Affiliate & Advocate",
      description: "For individuals and teams referring IGNY8",
      benefits: [
        "Performance-based revenue share with lifetime attribution",
        "Early access to new features and partner community channels",
        "Custom reporting dashboards to track referred accounts",
      ],
      icon: RocketLaunchIcon,
      iconColor: "from-[var(--igny8-amber)] to-[var(--igny8-amber-dark)]",
    },
  ];

  return (
    <div className="bg-white">
      {/* HERO SECTION */}
      <section className="relative overflow-hidden bg-gradient-to-b from-white via-slate-50/50 to-white">
        <div className="absolute inset-0 bg-[radial-gradient(circle_at_50%_50%,rgba(6,147,227,0.03),transparent_60%)]" />
        
        <div className="relative max-w-4xl mx-auto px-6 py-24 md:py-32 text-center z-10">
          <span className="inline-flex items-center gap-2 text-xs font-semibold uppercase tracking-[0.28em] text-slate-500 bg-slate-100 px-4 py-2 rounded-full mb-6">
            Partners
          </span>
          <h1 className="text-5xl md:text-6xl lg:text-5xl font-bold leading-tight text-slate-900 mb-6">
            Grow faster together—build services and solutions on Igny8.
          </h1>
          <p className="text-xl md:text-2xl text-slate-600 mb-10 max-w-2xl mx-auto leading-relaxed">
            Join our partner ecosystem to co-create automations, deliver measurable results, and co-market AI-driven success stories.
          </p>
        </div>
      </section>

      {/* PARTNER TIERS */}
      <section className="max-w-7xl mx-auto px-6 pb-24">
        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
          {tiers.map((tier, idx) => {
            const Icon = tier.icon;
            return (
              <div
                key={tier.title}
                className="rounded-3xl border-2 border-slate-200 bg-white p-8 flex flex-col gap-6 hover:shadow-xl hover:-translate-y-1 transition-all"
              >
                <div className="flex items-center gap-4">
                  <div className={`inline-flex size-14 rounded-xl bg-gradient-to-br ${tier.iconColor} items-center justify-center text-white shadow-lg`}>
                    <Icon className="h-7 w-7" />
                  </div>
                  <div>
                    <span className="inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold uppercase tracking-[0.2em] bg-slate-100 text-slate-600 mb-2">
                      Program
                    </span>
                    <h3 className="text-2xl font-bold text-slate-900">{tier.title}</h3>
                  </div>
                </div>
                <p className="text-sm text-slate-600 font-medium">{tier.description}</p>
                <ul className="space-y-4 text-sm text-slate-700 flex-1">
                  {tier.benefits.map((benefit, benefitIdx) => {
                    const dotColors = ["bg-[var(--igny8-blue)]", "bg-[var(--igny8-green)]", "bg-[var(--igny8-amber)]", "bg-[var(--igny8-purple)]"];
                    return (
                      <li key={benefit} className="flex gap-3">
                        <span className={`mt-1.5 size-2 rounded-full ${dotColors[benefitIdx % dotColors.length]} shadow-sm flex-shrink-0`} />
                        <span>{benefit}</span>
                      </li>
                    );
                  })}
                </ul>
              </div>
            );
          })}
        </div>
      </section>

      {/* API & INTEGRATIONS + PARTNER RESOURCES */}
      <section className="bg-gradient-to-b from-white via-slate-50/30 to-white py-24">
        <div className="max-w-7xl mx-auto px-6 grid grid-cols-1 lg:grid-cols-2 gap-12">
          {/* Left: API & Integrations */}
          <div className="space-y-6">
            <div className="flex items-center gap-3 mb-4">
              <div className="size-12 rounded-xl bg-gradient-to-br from-[var(--igny8-blue)] to-[var(--igny8-blue-dark)] flex items-center justify-center text-white shadow-lg">
                <CodeBracketIcon className="h-6 w-6" />
              </div>
              <div>
                <span className="inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold uppercase tracking-[0.2em] bg-slate-100 text-slate-600 mb-2">
                  API & Integrations
                </span>
                <h2 className="text-3xl md:text-4xl font-bold text-slate-900">
                  Embed Igny8 intelligence into your workflows.
                </h2>
              </div>
            </div>
            <p className="text-lg text-slate-600 leading-relaxed">
              Use Igny8 APIs and webhooks to power your own products, analytics, or client portals. Automate keyword ingestion, content creation, asset delivery, and reporting.
            </p>
            <div className="rounded-2xl border-2 border-slate-200 bg-white p-8 shadow-sm">
              <div className="rounded-2xl border-2 border-slate-200 bg-gradient-to-br from-slate-50 to-white h-64 flex items-center justify-center text-sm text-slate-400 shadow-inner">
                API docs placeholder
              </div>
            </div>
          </div>

          {/* Right: Partner Resources */}
          <div className="rounded-2xl border-2 border-slate-200 bg-white p-10 space-y-6 shadow-sm">
            <div className="flex items-center gap-3">
              <div className="size-12 rounded-xl bg-gradient-to-br from-[var(--igny8-green)] to-[var(--igny8-green-dark)] flex items-center justify-center text-white shadow-lg">
                <WrenchScrewdriverIcon className="h-6 w-6" />
              </div>
              <h4 className="text-2xl font-bold text-slate-900">
                Partner resources
              </h4>
            </div>
            <ul className="space-y-4 text-sm text-slate-700">
              {[
                { text: "Sales playbooks, ROI calculators, and demo environments.", color: "bg-[var(--igny8-blue)]" },
                { text: "Shared Slack channels with Igny8 product and marketing teams.", color: "bg-[var(--igny8-green)]" },
                { text: "Quarterly partner labs to showcase launches and integrations.", color: "bg-[var(--igny8-amber)]" },
              ].map((item, index) => (
                <li key={item.text} className="flex gap-3">
                  <span className={`mt-1.5 size-2 rounded-full ${item.color} shadow-sm flex-shrink-0`} />
                  <span>{item.text}</span>
                </li>
              ))}
            </ul>
          </div>
        </div>
      </section>

      {/* FINAL CTA */}
      <section className="relative overflow-hidden bg-gradient-to-br from-[#0693e3] via-[#5d4ae3] to-[#8b5cf6]">
        {/* Radial glow */}
        <div className="absolute inset-0 bg-[radial-gradient(circle_at_50%_50%,rgba(255,255,255,0.1),transparent_70%)]" />
        
        <div className="relative max-w-4xl mx-auto px-6 py-24 md:py-32 text-center z-10">
          <h2 className="text-4xl md:text-5xl lg:text-6xl font-extrabold text-white mb-6 leading-tight">
            Become an Igny8 partner.
          </h2>
          <p className="text-xl md:text-2xl text-white/90 mb-12 max-w-2xl mx-auto font-medium">
            Apply today to co-create automations, launch integrations, and grow with our shared go-to-market engine.
          </p>
          <div className="flex flex-col sm:flex-row gap-5 justify-center">
            <Link
              to="/contact"
              className="inline-flex items-center justify-center gap-2 rounded-xl border-2 border-white/30 bg-white/10 backdrop-blur-sm text-white px-10 py-5 text-lg font-bold hover:bg-white/20 hover:border-white/50 transition"
            >
              <ChatBubbleLeftRightIcon className="h-5 w-5" />
              Apply now
            </Link>
            <a
              href="/marketing/images/partner-program.png"
              target="_blank"
              rel="noreferrer"
              className="inline-flex items-center justify-center gap-2 rounded-xl bg-white text-[#0693e3] px-10 py-5 text-lg font-bold hover:bg-white/95 transition shadow-xl hover:shadow-2xl hover:-translate-y-0.5"
            >
              <RocketLaunchIcon className="h-5 w-5" />
              Download partner deck
            </a>
          </div>
        </div>
      </section>
    </div>
  );
};

export default Partners;