import React from "react";
import { Link } from "react-router-dom";
import {
  RocketLaunchIcon,
  ChatBubbleLeftRightIcon,
  CheckIcon,
  XMarkIcon,
  SparklesIcon,
  PhotoIcon,
  BoltIcon,
  ChartBarIcon,
  UserGroupIcon,
  CreditCardIcon,
  ShieldCheckIcon,
} from "@heroicons/react/24/outline";
import SEO from "../components/SEO";
import { getMetaTags } from "../config/metaTags";

const Pricing: 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 = [
    {
      name: "Starter",
      price: "$89",
      cadence: "per month",
      description: "For small teams starting workflows.",
      icon: SparklesIcon,
      iconColor: "from-[var(--color-primary)] to-[var(--color-primary-dark)]",
      features: [
        "3 sites",
        "5 users",
        "500 keywords",
        "100 clusters",
        "300 content ideas",
        "120K words/month",
        "10 daily content tasks",
        "1,000 AI credits/month",
        "120 images/month",
        "HIDREAM image model",
        "AI Writer",
        "Image Generation",
        "Email support",
      ],
      badge: "For startups",
    },
    {
      name: "Growth",
      price: "$139",
      cadence: "per month",
      description: "For teams automating multiple workflows.",
      icon: BoltIcon,
      iconColor: "from-[var(--color-success)] to-[var(--color-success-dark)]",
      features: [
        "10 sites",
        "10 users",
        "1,000 keywords",
        "200 clusters",
        "600 content ideas",
        "240K words/month",
        "20 daily content tasks",
        "2,000 AI credits/month",
        "240 images/month",
        "DALL-E 3 + HIDREAM",
        "AI Writer",
        "Image Generation",
        "Auto Publish",
        "Priority support & onboarding",
      ],
      featured: true,
      badge: "Best value",
    },
    {
      name: "Scale",
      price: "$229",
      cadence: "per month",
      description: "For publishers and large orgs needing deeper control.",
      icon: ChartBarIcon,
      iconColor: "from-[var(--color-purple)] to-[var(--color-purple-dark)]",
      features: [
        "25 sites",
        "25 users",
        "2,000 keywords",
        "400 clusters",
        "1,200 content ideas",
        "480K words/month",
        "40 daily content tasks",
        "4,000 AI credits/month",
        "500 images/month",
        "DALL-E 3 + HIDREAM",
        "AI Writer",
        "Image Generation",
        "Auto Publish",
        "Custom Prompts",
        "Priority support & onboarding",
      ],
      badge: "For scaling teams",
    },
  ];

  const featureMatrix = [
    {
      feature: "Sites",
      starter: "3",
      growth: "10",
      scale: "25",
    },
    {
      feature: "Users",
      starter: "5",
      growth: "10",
      scale: "25",
    },
    {
      feature: "Keywords",
      starter: "500",
      growth: "1,000",
      scale: "2,000",
    },
    {
      feature: "Clusters",
      starter: "100",
      growth: "200",
      scale: "400",
    },
    {
      feature: "Content Ideas",
      starter: "300",
      growth: "600",
      scale: "1,200",
    },
    {
      feature: "Monthly Word Count",
      starter: "120K",
      growth: "240K",
      scale: "480K",
    },
    {
      feature: "Daily Content Tasks",
      starter: "10",
      growth: "20",
      scale: "40",
    },
    {
      feature: "AI Credits / Month",
      starter: "1,000",
      growth: "2,000",
      scale: "4,000",
    },
    {
      feature: "Images / Month",
      starter: "120",
      growth: "240",
      scale: "500",
    },
    {
      feature: "Image Models",
      starter: "HIDREAM",
      growth: "DALL-E 3 + HIDREAM",
      scale: "DALL-E 3 + HIDREAM",
    },
    {
      feature: "AI Writer",
      starter: true,
      growth: true,
      scale: true,
    },
    {
      feature: "Image Generation",
      starter: true,
      growth: true,
      scale: true,
    },
    {
      feature: "Auto Publish",
      starter: false,
      growth: true,
      scale: true,
    },
    {
      feature: "Custom Prompts",
      starter: false,
      growth: false,
      scale: true,
    },
    {
      feature: "Support",
      starter: "Email + docs",
      growth: "Priority + onboarding",
      scale: "Priority + onboarding",
    },
  ];

  return (
    <>
      <SEO meta={getMetaTags("pricing")} />
      <div className="bg-white">
      {/* PRICING HERO SECTION */}
      <section className="relative overflow-hidden bg-gradient-to-b from-white via-slate-50/30 to-white">
        <div className="absolute inset-0 bg-[radial-gradient(circle_at_50%_50%,rgba(6,147,227,0.02),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">
            Pricing
          </span>
          <h1 className="text-5xl md:text-6xl lg:text-5xl font-bold leading-tight text-slate-900 mb-6">
            Simple plans that scale with your automation goals.
          </h1>
          <p className="text-xl md:text-2xl text-slate-600 mb-10 max-w-2xl mx-auto leading-relaxed">
            Flexible pricing for teams of all sizes. No seat limits. No hidden charges. Built for growth.
          </p>
        </div>
      </section>

      {/* PRICING TIERS SECTION */}
      <section className="max-w-7xl mx-auto px-6 pb-24">
        <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
          {tiers.map((tier) => {
            const Icon = tier.icon;
            return (
              <div
                key={tier.name}
                className={`relative rounded-3xl border-2 ${
                  tier.featured
                    ? "border-[var(--color-primary)]/60 bg-gradient-to-br from-[#0693e3]/10 via-[#5d4ae3]/5 to-[#0bbf87]/5 shadow-[0_0_70px_rgba(6,147,227,0.25)]"
                    : "border-slate-200 bg-gradient-to-br from-white to-slate-50/50"
                } p-10 flex flex-col gap-6 hover:shadow-xl transition-all group ${
                  tier.featured ? "lg:scale-105" : "hover:-translate-y-1"
                }`}
              >
                {/* Badge and Icon - Aligned */}
                <div className="flex items-center gap-4">
                  {/* Icon */}
                  <div className={`inline-flex size-14 rounded-2xl bg-gradient-to-br ${tier.iconColor} items-center justify-center text-white shadow-lg flex-shrink-0`}>
                    <Icon className="h-7 w-7" />
                  </div>
                  
                  {/* Badge and Plan Name */}
                  <div className="flex-1">
                    {tier.badge && (
                      <span
                        className={`inline-flex items-center rounded-full border px-3 py-1 text-[10px] uppercase tracking-[0.25em] mb-2 ${
                          tier.featured
                            ? "border-[var(--color-primary)]/30 bg-gradient-to-r from-[#0693e3]/20 to-[#0472b8]/20 text-[#0472b8]"
                            : "border-slate-200 bg-gradient-to-r from-[#0693e3]/10 to-[#0bbf87]/10 text-[var(--color-primary)]"
                        }`}
                      >
                        {tier.badge}
                      </span>
                    )}
                    <h3 className="text-2xl font-semibold text-slate-900">{tier.name}</h3>
                  </div>
                </div>

                {/* Plan Description */}
                <p className="text-sm text-slate-600">{tier.description}</p>

                {/* Price */}
                <div className="text-4xl font-semibold text-slate-900">
                  {tier.price}
                  {tier.cadence && (
                    <span className="text-sm font-normal text-slate-500 ml-2">
                      {tier.cadence}
                    </span>
                  )}
                </div>

                {/* Features List */}
                <ul className="space-y-4 text-sm text-slate-600 flex-1">
                  {tier.features.map((feature, idx) => {
                    // Subtle check icons: light bg with dark check for starter/scale, colored for growth
                    const checkStyle = tier.featured
                      ? "bg-[var(--color-success)]/10 text-[#0bbf87]"
                      : "bg-slate-100 text-slate-600";
                    return (
                      <li key={feature} className="flex gap-3 items-start">
                        <CheckIcon className={`h-5 w-5 ${checkStyle} rounded-full p-0.5 flex-shrink-0 mt-0.5`} />
                        <span>{feature}</span>
                      </li>
                    );
                  })}
                </ul>

                {/* CTA Button */}
                <div className="pt-4">
                  <a
                    href="https://app.igny8.com/signup"
                    className={`inline-flex w-full items-center justify-center rounded-full px-6 py-3 text-sm font-semibold transition ${
                      tier.featured
                        ? "bg-gradient-to-r from-[var(--color-primary)] to-[var(--color-primary-dark)] text-white hover:from-[#0472b8] hover:to-[#0693e3] shadow-lg shadow-[#0693e3]/30"
                        : "border-2 border-slate-300 bg-white/50 backdrop-blur-sm text-slate-900 hover:border-[var(--color-primary)] hover:bg-white"
                    }`}
                  >
                    Start free trial
                  </a>
                </div>
              </div>
            );
          })}
        </div>
      </section>

      {/* COMPARISON TABLE SECTION */}
      <section className="max-w-7xl mx-auto px-6 pb-24">
        <h3 className="text-3xl font-bold text-slate-900 mb-8 text-center">
          Compare plan capabilities
        </h3>
        <div className="overflow-hidden rounded-3xl border-2 border-slate-200 bg-white shadow-lg">
          <div className="overflow-x-auto">
            <table className="min-w-full text-sm">
              <thead className="bg-gradient-to-r from-[#0693e3]/10 via-[#5d4ae3]/10 to-[#0bbf87]/10 sticky top-0">
                <tr>
                  <th className="px-6 py-4 text-left font-semibold text-slate-900">Capability</th>
                  <th className="px-6 py-4 text-center font-semibold text-slate-900">Starter</th>
                  <th className="px-6 py-4 text-center font-semibold text-[var(--color-primary)] bg-gradient-to-br from-[#0693e3]/5 to-transparent">
                    Growth
                  </th>
                  <th className="px-6 py-4 text-center font-semibold text-slate-900">Scale</th>
                </tr>
              </thead>
              <tbody>
                {featureMatrix.map((row, index) => (
                  <tr
                    key={row.feature}
                    className={index % 2 === 0 ? "bg-white" : "bg-slate-50/50"}
                  >
                    <td className="px-6 py-5 text-slate-900 font-medium">{row.feature}</td>
                    <td className="px-6 py-5 text-center text-slate-700">
                      {row.starter === true ? (
                        <CheckIcon className="h-5 w-5 text-[#0bbf87] mx-auto" />
                      ) : row.starter === false ? (
                        <XMarkIcon className="h-5 w-5 text-slate-300 mx-auto" />
                      ) : (
                        <span className="inline-flex items-center gap-1">
                          <span className="size-1.5 rounded-full bg-[var(--color-primary)]"></span>
                          {row.starter}
                        </span>
                      )}
                    </td>
                    <td className="px-6 py-5 text-center font-medium text-[var(--color-primary)] bg-gradient-to-br from-[#0693e3]/5 to-transparent">
                      {row.growth === true ? (
                        <CheckIcon className="h-5 w-5 text-[#0bbf87] mx-auto" />
                      ) : row.growth === false ? (
                        <XMarkIcon className="h-5 w-5 text-slate-300 mx-auto" />
                      ) : (
                        <span className="inline-flex items-center gap-1">
                          <span className="size-1.5 rounded-full bg-[var(--color-primary)]"></span>
                          {row.growth}
                        </span>
                      )}
                    </td>
                    <td className="px-6 py-5 text-center text-slate-700">
                      {row.scale === true ? (
                        <CheckIcon className="h-5 w-5 text-[#0bbf87] mx-auto" />
                      ) : row.scale === false ? (
                        <XMarkIcon className="h-5 w-5 text-slate-300 mx-auto" />
                      ) : (
                        <span className="inline-flex items-center gap-1">
                          <span className="size-1.5 rounded-full bg-[#5d4ae3]"></span>
                          {row.scale}
                        </span>
                      )}
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      </section>

      {/* INFO BLOCKS SECTION */}
      <section className="bg-gradient-to-b from-white via-slate-50/30 to-white">
        <div className="max-w-6xl mx-auto px-6 py-24 grid grid-cols-1 md:grid-cols-2 gap-8">
          <div className="rounded-3xl border-2 border-[var(--color-primary)]/30 bg-gradient-to-br from-[#0693e3]/5 via-white to-[#0bbf87]/5 p-8 space-y-4 shadow-lg hover:shadow-xl transition-all">
            <div className="flex items-center gap-3 mb-4">
              <div className="size-12 rounded-full bg-gradient-to-br from-[var(--color-primary)] to-[var(--color-primary-dark)] flex items-center justify-center text-white shadow-lg">
                <CreditCardIcon className="h-6 w-6" />
              </div>
              <h4 className="text-lg font-semibold text-slate-900">
                Usage-based credits explained
              </h4>
            </div>
            <p className="text-sm text-slate-600 leading-relaxed">
              Igny8 credits cover AI-generated drafts, clustering, and image creation. Monitor usage in real time from your dashboard. Credits roll over for 30 days.
            </p>
            <p className="text-sm text-slate-600 leading-relaxed">
              Need more? Add packs instantly or set automation rules to pause when thresholds are hit.
            </p>
          </div>
          <div className="rounded-3xl border-2 border-[#0bbf87]/30 bg-gradient-to-br from-[#0bbf87]/5 via-white to-[#5d4ae3]/5 p-8 space-y-4 shadow-lg hover:shadow-xl transition-all">
            <div className="flex items-center gap-3 mb-4">
              <div className="size-12 rounded-full bg-gradient-to-br from-[var(--color-success)] to-[var(--color-success-dark)] flex items-center justify-center text-white shadow-lg">
                <ShieldCheckIcon className="h-6 w-6" />
              </div>
              <h4 className="text-lg font-semibold text-slate-900">
                Security & compliance
              </h4>
            </div>
            <p className="text-sm text-slate-600 leading-relaxed">
              Igny8 supports granular access controls, SSO, audit logging, and data residency requests. Enterprise plans include SOC 2 documentation and custom security reviews.
            </p>
          </div>
        </div>
      </section>

      {/* FINAL CTA */}
      <section className="relative overflow-hidden bg-gradient-to-br from-[var(--color-primary)] via-[var(--color-purple)] 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">
            Let's build a plan tailored to your growth.
          </h2>
          <p className="text-xl md:text-2xl text-white/90 mb-12 max-w-2xl mx-auto font-medium">
            Get guidance for automation mapping, migration, and onboarding.
          </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" />
              Talk to sales
            </Link>
            <a
              href="https://app.igny8.com/signup"
              target="_blank"
              rel="noreferrer"
              className="inline-flex items-center justify-center gap-2 rounded-xl bg-white text-[var(--color-primary)] 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" />
              Start free trial
            </a>
          </div>
        </div>
      </section>
      </div>
    </>
  );
};

export default Pricing;
