import React from "react";
import { Link } from "react-router-dom";
import {
  RocketLaunchIcon,
  ArrowRightIcon,
  ArrowDownTrayIcon,
  PlayIcon,
  BookOpenIcon,
  SparklesIcon,
  ChartBarIcon,
  BoltIcon,
  DocumentTextIcon,
  WrenchScrewdriverIcon,
  ClipboardDocumentCheckIcon,
  AcademicCapIcon,
  CalendarIcon,
  ClockIcon,
  CheckCircleIcon,
  ListBulletIcon,
} from "@heroicons/react/24/outline";
import SEO from "../components/SEO";
import { getMetaTags } from "../config/metaTags";

const Resources: 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 learnAIResources = [
    {
      title: "AI SEO: Building Topical Authority at Scale",
      description: "A comprehensive guide on how AI systems accelerate research, map thousands of keywords into authoritative clusters, and streamline content production for rapid growth. Learn the frameworks that top-performing teams use to dominate search results.",
      type: "Article",
      tag: "Strategy",
      icon: ChartBarIcon,
      color: "from-[var(--color-primary)] to-[var(--color-primary-dark)]",
    },
    {
      title: "The Complete Framework for AI Content Quality",
      description: "Deep dive into measuring accuracy, consistency, and editorial control across all AI-generated outputs. Includes frameworks for tracking performance, maintaining brand voice, and ensuring compliance at scale.",
      type: "Framework Guide",
      tag: "Strategy",
      icon: AcademicCapIcon,
      color: "from-[var(--color-success)] to-[var(--color-success-dark)]",
    },
    {
      title: "SERP-Guided Content Planning Playbook",
      description: "Learn how context-aware scoring improves prioritization and publishing velocity. This downloadable PDF covers everything from keyword opportunity analysis to content brief generation using SERP insights.",
      type: "PDF Guide",
      tag: "Strategy",
      icon: BookOpenIcon,
      color: "from-[var(--color-warning)] to-[var(--color-warning-dark)]",
    },
  ];

  const buildSystemResources = [
    {
      title: "Notion Content Calendar Template",
      description: "A complete Notion workspace template for managing your content pipeline from keywords to published posts. Includes automation tracking, editorial calendars, and team collaboration boards.",
      type: "Template",
      tags: ["Template", "System"],
      icon: CalendarIcon,
      color: "from-[var(--color-primary)] to-[var(--color-primary-dark)]",
    },
    {
      title: "Airtable Keyword Cluster System",
      description: "Pre-built Airtable base for organizing keywords, clusters, and content ideas. Includes formulas for opportunity scoring, status tracking, and automated workflows that sync with IGNY8.",
      type: "System",
      tags: ["System", "Workflow"],
      icon: ChartBarIcon,
      color: "from-[var(--color-success)] to-[var(--color-success-dark)]",
    },
    {
      title: "Content Calendar Kit (Excel)",
      description: "Downloadable Excel template with macros for content planning, publishing schedules, and performance tracking. Perfect for teams that prefer spreadsheet-based workflows.",
      type: "Template",
      tags: ["Template", "Workflow"],
      icon: DocumentTextIcon,
      color: "from-[var(--color-purple)] to-[var(--color-purple-dark)]",
    },
    {
      title: "Cluster Mapping Board",
      description: "Visual board template for mapping keyword relationships and building topical authority maps. Works with Miro, Figma, or any whiteboard tool. Includes starter frameworks and examples.",
      type: "Template",
      tags: ["Template", "System"],
      icon: SparklesIcon,
      color: "from-[var(--color-warning)] to-[var(--color-warning-dark)]",
    },
  ];

  const attendWatchResources = [
    {
      title: "Building an Automation-First Content Ops Team",
      description: "Live strategy session with IGNY8 specialists covering workflow design, team structure, and automation best practices.",
      date: "November 21, 2025",
      type: "Workshop",
      tag: "Live",
      icon: BoltIcon,
      color: "from-[var(--color-primary)] to-[var(--color-primary-dark)]",
    },
    {
      title: "From Keywords to Conversions: Dashboard Deep-Dive",
      description: "A full walkthrough of reporting and insights that prove ROI. Learn how to build executive-ready dashboards that showcase content impact.",
      date: "December 5, 2025",
      type: "Workshop",
      tag: "Live",
      icon: ChartBarIcon,
      color: "from-[var(--color-success)] to-[var(--color-success-dark)]",
    },
    {
      title: "Automating Cluster Research at Scale",
      description: "Replay of our most popular session on using AI to group thousands of keywords into strategic clusters. Includes Q&A with automation experts.",
      type: "Replay",
      tag: "Replay",
      icon: PlayIcon,
      color: "from-[var(--color-purple)] to-[var(--color-purple-dark)]",
    },
    {
      title: "Editorial Control and AI Tone Systems",
      description: "Deep-dive content audit session covering brand voice management, tone consistency, and editorial workflows for AI-generated content.",
      type: "Replay",
      tag: "Replay",
      icon: BookOpenIcon,
      color: "from-[var(--color-warning)] to-[var(--color-warning-dark)]",
    },
  ];

  const executeFasterResources = [
    {
      title: "IGNY8 Quick-Start Documentation",
      description: "Get up and running in 30 minutes with our step-by-step quick-start guide. Covers account setup, first keyword import, and basic automation configuration.",
      type: "Quick-Start",
      tags: ["Checklist", "Execution"],
      icon: RocketLaunchIcon,
      color: "from-[var(--color-primary)] to-[var(--color-primary-dark)]",
    },
    {
      title: "SEO Content Quality Checklist",
      description: "A comprehensive checklist for ensuring every piece of AI-generated content meets editorial standards. Includes SERP analysis, keyword optimization, and compliance checks.",
      type: "Checklist",
      tags: ["Checklist", "Execution"],
      icon: ClipboardDocumentCheckIcon,
      color: "from-[var(--color-success)] to-[var(--color-success-dark)]",
    },
    {
      title: "Content Production SOPs Pack",
      description: "Standard operating procedures for content teams using IGNY8. Includes workflows for brief generation, content review, image creation, and publishing.",
      type: "SOP Pack",
      tags: ["Execution", "Prompt Pack"],
      icon: ListBulletIcon,
      color: "from-[var(--color-purple)] to-[var(--color-purple-dark)]",
    },
    {
      title: "AI Prompt Library for Content Teams",
      description: "Pre-built prompt templates for clustering, brief generation, content writing, and image creation. Customize these prompts to match your brand voice and editorial standards.",
      type: "Prompt Pack",
      tags: ["Prompt Pack", "Execution"],
      icon: SparklesIcon,
      color: "from-[var(--color-warning)] to-[var(--color-warning-dark)]",
    },
  ];

  return (
    <>
      <SEO meta={getMetaTags("resources")} />
      <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">
            Resources
          </span>
          <h1 className="text-5xl md:text-6xl lg:text-5xl font-bold leading-tight text-slate-900 mb-6">
            Resources to Power Your AI SEO Journey
          </h1>
          <p className="text-xl md:text-2xl text-slate-600 mb-10 max-w-2xl mx-auto leading-relaxed">
            Templates, Guides, Workflows & Tools – Built for High-Scale Content Teams
          </p>
          <div className="flex justify-center">
            {renderCta(
              { label: "Explore All Resources", href: "#learn" },
              "inline-flex items-center justify-center rounded-xl bg-gradient-to-r from-[var(--color-primary)] to-[var(--color-primary-dark)] text-white px-8 py-4 text-base font-semibold hover:shadow-lg hover:-translate-y-0.5 transition shadow-md"
            )}
          </div>
        </div>
      </section>

      {/* CONTENT GROUP 1: Learn AI SEO */}
      <section id="learn" className="max-w-7xl mx-auto px-6 py-24">
        <div className="mb-12">
          <h2 className="text-4xl md:text-5xl font-bold text-slate-900 mb-4">
            Learn AI SEO
          </h2>
          <p className="text-lg text-slate-600 max-w-2xl">
            Editorial guidance, frameworks, and strategic insights to master AI-powered content creation.
          </p>
        </div>
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          {learnAIResources.map((resource, index) => {
            const Icon = resource.icon;
            return (
              <div
                key={resource.title}
                className={`rounded-3xl border-2 border-slate-200 bg-white p-8 flex flex-col gap-4 hover:shadow-xl hover:-translate-y-1 transition-all`}
              >
                <div className="flex items-center justify-between mb-2">
                  <div className={`inline-flex size-12 rounded-xl bg-gradient-to-br ${resource.color} items-center justify-center text-white shadow-lg`}>
                    <Icon className="h-6 w-6" />
                  </div>
                  <span className="inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold uppercase tracking-[0.1em] bg-slate-100 text-slate-600">
                    {resource.tag}
                  </span>
                </div>
                <div className="text-xs uppercase tracking-[0.2em] text-slate-500 font-semibold">
                  {resource.type}
                </div>
                <h3 className="text-xl font-semibold text-slate-900">{resource.title}</h3>
                <p className="text-sm text-slate-600 leading-relaxed flex-1">{resource.description}</p>
                <a
                  href="#"
                  className="inline-flex items-center gap-2 text-sm font-semibold text-[var(--color-primary)] hover:text-[var(--color-primary-dark)] group"
                >
                  {resource.type.includes("PDF") ? "Download" : "Read"} {resource.type.toLowerCase().includes("article") ? "article" : "guide"}
                  <ArrowRightIcon className="h-4 w-4 group-hover:translate-x-1 transition-transform" />
                </a>
              </div>
            );
          })}
        </div>
        <div className="text-center mt-12">
          <a
            href="#"
            className="inline-flex items-center gap-2 text-base font-semibold text-slate-700 hover:text-[var(--color-primary)] transition"
          >
            View All Guides
            <ArrowRightIcon className="h-5 w-5" />
          </a>
        </div>
      </section>

      {/* CONTENT GROUP 2: Build Your System */}
      <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">
          <div className="mb-12">
            <h2 className="text-4xl md:text-5xl font-bold text-slate-900 mb-4">
              Build Your System
            </h2>
            <p className="text-lg text-slate-600 max-w-2xl">
              Help users operationalize their workflows with ready-to-use templates and systems.
            </p>
          </div>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            {buildSystemResources.map((resource, index) => {
              const Icon = resource.icon;
              const colors = [
                "from-[var(--color-primary)]/10 to-white",
                "from-[var(--color-success)]/10 to-white",
                "from-[var(--color-purple)]/10 to-white",
                "from-[var(--color-warning)]/10 to-white",
              ];
              const borders = [
                "border-[#0693e3]/30",
                "border-[#0bbf87]/30",
                "border-[#5d4ae3]/30",
                "border-[#ff7a00]/30",
              ];
              return (
                <div
                  key={resource.title}
                  className={`rounded-3xl border-2 ${borders[index]} bg-gradient-to-br ${colors[index]} p-8 flex flex-col gap-4 hover:shadow-xl hover:-translate-y-1 transition-all`}
                >
                  <div className="flex items-start gap-4">
                    <div className={`inline-flex size-12 rounded-xl bg-gradient-to-br ${resource.color} items-center justify-center text-white shadow-lg flex-shrink-0`}>
                      <Icon className="h-6 w-6" />
                    </div>
                    <div className="flex-1">
                      <div className="flex flex-wrap gap-2 mb-2">
                        {resource.tags.map((tag) => (
                          <span
                            key={tag}
                            className="inline-flex items-center px-2 py-1 rounded-full text-xs font-semibold uppercase tracking-[0.1em] bg-white/80 text-slate-600 border border-slate-200"
                          >
                            {tag}
                          </span>
                        ))}
                      </div>
                      <div className="text-xs uppercase tracking-[0.2em] text-slate-500 font-semibold mb-2">
                        {resource.type}
                      </div>
                      <h3 className="text-xl font-semibold text-slate-900 mb-3">{resource.title}</h3>
                      <p className="text-sm text-slate-600 leading-relaxed mb-4">{resource.description}</p>
                      <a
                        href="#"
                        className="inline-flex items-center gap-2 text-sm font-semibold text-[var(--color-primary)] hover:text-[var(--color-primary-dark)] group"
                      >
                        <ArrowDownTrayIcon className="h-4 w-4" />
                        Download {resource.type.toLowerCase()}
                        <ArrowRightIcon className="h-4 w-4 group-hover:translate-x-1 transition-transform" />
                      </a>
                    </div>
                  </div>
                </div>
              );
            })}
          </div>
          <div className="text-center mt-12">
            <a
              href="#"
              className="inline-flex items-center gap-2 text-base font-semibold text-slate-700 hover:text-[var(--color-primary)] transition"
            >
              Explore Templates
              <ArrowRightIcon className="h-5 w-5" />
            </a>
          </div>
        </div>
      </section>

      {/* CONTENT GROUP 3: Attend or Watch */}
      <section className="py-24 bg-white">
        <div className="max-w-7xl mx-auto px-6">
          <div className="mb-12">
            <h2 className="text-4xl md:text-5xl font-bold text-slate-900 mb-4">
              Attend or Watch
            </h2>
            <p className="text-lg text-slate-600 max-w-2xl">
              Live + recorded teaching sessions to accelerate your AI content operations.
            </p>
          </div>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            {attendWatchResources.map((resource, index) => {
              const Icon = resource.icon;
              const colors = [
                "from-[var(--color-primary)]/10 to-white",
                "from-[var(--color-success)]/10 to-white",
                "from-[var(--color-purple)]/10 to-white",
                "from-[var(--color-warning)]/10 to-white",
              ];
              const borders = [
                "border-[#0693e3]/30",
                "border-[#0bbf87]/30",
                "border-[#5d4ae3]/30",
                "border-[#ff7a00]/30",
              ];
              return (
                <div
                  key={resource.title}
                  className={`rounded-3xl border-2 ${borders[index]} bg-gradient-to-br ${colors[index]} p-8 flex flex-col gap-4 hover:shadow-xl hover:-translate-y-1 transition-all`}
                >
                  <div className="flex items-start justify-between mb-2">
                    <div className={`inline-flex size-12 rounded-xl bg-gradient-to-br ${resource.color} items-center justify-center text-white shadow-lg`}>
                      <Icon className="h-6 w-6" />
                    </div>
                    <span
                      className={`inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold uppercase tracking-[0.1em] ${
                        resource.tag === "Live"
                          ? "bg-[#0bbf87]/10 text-[#0bbf87] border border-[#0bbf87]/30"
                          : "bg-[#5d4ae3]/10 text-[#5d4ae3] border border-[#5d4ae3]/30"
                      }`}
                    >
                      {resource.tag}
                    </span>
                  </div>
                  {resource.date && (
                    <div className="flex items-center gap-2 text-xs uppercase tracking-[0.2em] text-slate-500 font-semibold">
                      <ClockIcon className="h-4 w-4" />
                      {resource.date}
                    </div>
                  )}
                  <div className="text-xs uppercase tracking-[0.2em] text-slate-500 font-semibold">
                    {resource.type}
                  </div>
                  <h3 className="text-xl font-semibold text-slate-900">{resource.title}</h3>
                  <p className="text-sm text-slate-600 leading-relaxed flex-1">{resource.description}</p>
                  <button
                    className={`inline-flex items-center justify-center gap-2 rounded-xl px-6 py-3 text-sm font-semibold transition ${
                      resource.tag === "Live"
                        ? "bg-gradient-to-r from-[var(--color-primary)] to-[var(--color-primary-dark)] text-white hover:shadow-lg"
                        : "border-2 border-slate-300 bg-white text-slate-700 hover:border-[#0693e3] hover:text-[var(--color-primary)]"
                    }`}
                  >
                    {resource.tag === "Live" ? (
                      <>
                        <CalendarIcon className="h-4 w-4" />
                        Register now
                      </>
                    ) : (
                      <>
                        <PlayIcon className="h-4 w-4" />
                        Watch replay
                      </>
                    )}
                  </button>
                </div>
              );
            })}
          </div>
          <div className="text-center mt-12">
            <a
              href="#"
              className="inline-flex items-center gap-2 text-base font-semibold text-slate-700 hover:text-[var(--color-primary)] transition"
            >
              View Schedule
              <ArrowRightIcon className="h-5 w-5" />
            </a>
          </div>
        </div>
      </section>

      {/* CONTENT GROUP 4: Execute Faster */}
      <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">
          <div className="mb-12">
            <h2 className="text-4xl md:text-5xl font-bold text-slate-900 mb-4">
              Execute Faster
            </h2>
            <p className="text-lg text-slate-600 max-w-2xl">
              Done-for-you components, fast-start kits, and execution tools to get you running immediately.
            </p>
          </div>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
            {executeFasterResources.map((resource, index) => {
              const Icon = resource.icon;
              return (
                <div
                  key={resource.title}
                  className="rounded-3xl border-2 border-slate-200 bg-white p-8 flex flex-col gap-4 hover:shadow-xl hover:-translate-y-1 transition-all"
                >
                  <div className={`inline-flex size-12 rounded-xl bg-gradient-to-br ${resource.color} items-center justify-center text-white shadow-lg`}>
                    <Icon className="h-6 w-6" />
                  </div>
                  <div className="flex flex-wrap gap-2 mb-2">
                    {resource.tags.map((tag) => (
                      <span
                        key={tag}
                        className="inline-flex items-center px-2 py-1 rounded-full text-xs font-semibold uppercase tracking-[0.1em] bg-slate-100 text-slate-600"
                      >
                        {tag}
                      </span>
                    ))}
                  </div>
                  <div className="text-xs uppercase tracking-[0.2em] text-slate-500 font-semibold">
                    {resource.type}
                  </div>
                  <h3 className="text-lg font-semibold text-slate-900">{resource.title}</h3>
                  <p className="text-sm text-slate-600 leading-relaxed flex-1">{resource.description}</p>
                  <a
                    href="#"
                    className="inline-flex items-center gap-2 text-sm font-semibold text-[var(--color-primary)] hover:text-[var(--color-primary-dark)] group"
                  >
                    <ArrowDownTrayIcon className="h-4 w-4" />
                    Download Now
                    <ArrowRightIcon className="h-4 w-4 group-hover:translate-x-1 transition-transform" />
                  </a>
                </div>
              );
            })}
          </div>
        </div>
      </section>

      {/* CROSS-MODULE TOOLKIT BANNER */}
      <section className="py-16 bg-gradient-to-r from-[#0bbf87]/10 via-[#0693e3]/10 to-[#0bbf87]/10 border-y border-[#0bbf87]/20">
        <div className="max-w-7xl mx-auto px-6">
          <div className="flex flex-col md:flex-row items-center justify-between gap-6">
            <div className="flex-1">
              <p className="text-lg md:text-xl text-slate-900 font-medium leading-relaxed">
                Build your full-stack AI content engine with our toolkits from every module — Planner, Writer, Thinker & beyond.
              </p>
            </div>
            <div>
              <a
                href="#"
                className="inline-flex items-center gap-2 rounded-xl bg-gradient-to-r from-[var(--color-success)] to-[var(--color-success-dark)] text-white px-8 py-4 text-base font-semibold hover:shadow-lg hover:-translate-y-0.5 transition shadow-md"
              >
                Browse Toolkits
                <ArrowRightIcon className="h-5 w-5" />
              </a>
            </div>
          </div>
        </div>
      </section>

      {/* FINAL CTA - Dark Background */}
      <section className="relative overflow-hidden bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900">
        {/* Radial glow */}
        <div className="absolute inset-0 bg-[radial-gradient(circle_at_50%_50%,rgba(6,147,227,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">
            Everything you need to plan, write, and grow with AI — in one ecosystem.
          </h2>
          <div className="flex justify-center mt-10">
            <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 for $1
            </a>
          </div>
        </div>
      </section>
      </div>
    </>
  );
};

export default Resources;