import React from "react";
import { Link } from "react-router-dom";
import {
  BoltIcon,
  SparklesIcon,
  ChartBarIcon,
  PhotoIcon,
  ListBulletIcon,
  UserGroupIcon,
  LightBulbIcon,
  DocumentTextIcon,
  ArrowRightIcon,
  RocketLaunchIcon,
  ChatBubbleLeftRightIcon,
} from "@heroicons/react/24/outline";
import { testimonials } from "../data/testimonials";
import SEO from "../components/SEO";
import { getMetaTags } from "../config/metaTags";

const Product: 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 workflowSteps = [
    { name: "Keywords", icon: ListBulletIcon, color: "from-[var(--color-primary)] to-[var(--color-primary-dark)]" },
    { name: "Clusters", icon: UserGroupIcon, color: "from-[var(--color-purple)] to-[var(--color-purple-dark)]" },
    { name: "Ideas", icon: LightBulbIcon, color: "from-[var(--color-warning)] to-[var(--color-warning-dark)]" },
    { name: "Tasks", icon: DocumentTextIcon, color: "from-[var(--color-success)] to-[var(--color-success-dark)]" },
    { name: "Content", icon: SparklesIcon, color: "from-[var(--color-primary)] to-[var(--color-primary-dark)]" },
    { name: "Publish", icon: BoltIcon, color: "from-[var(--color-success)] to-[var(--color-success-dark)]" },
  ];

  const productModules = [
    {
      title: "Planner",
      subtitle: "Market intelligence and keyword → cluster engine",
      description: "Tap into a living keyword database with real-time search volumes, difficulty scores, and intent classification. Use AI-powered clustering to automatically group related keywords into strategic clusters. Build topical authority maps in minutes, not days.",
      features: [
        "Global keyword database with opportunity scoring, SERP overlays, and traffic estimates",
        "AI-powered semantic clustering that groups related keywords automatically",
        "Drag-and-drop topical mapping with visual cluster organization",
        "Priority scoring based on opportunity, competition, and search intent",
        "Alerts for emerging opportunities, competitive gaps, and seasonality shifts",
      ],
      icon: ChartBarIcon,
      color: "from-[var(--color-primary)] to-[var(--color-primary-dark)]",
      image: "planner-dashboard.png",
      link: "#planner",
    },
    {
      title: "Writer",
      subtitle: "AI writing system with brand rules and editorial logic",
      description: "Generate briefs, long-form articles, and on-brand messaging with contextual SERP data, tone controls, and collaboration tools. Create content that aligns with your brand voice, compliance rules, and target search results.",
      features: [
        "AI briefs with outlines, talking points, and internal link suggestions",
        "Context-aware content generation with SERP analysis and competitor insights",
        "Long-form drafts aligned to your brand voice, compliance rules, and target SERP",
        "Brand voice and tone controls for consistency across all content",
        "Editorial workspace with comments, approvals, and WordPress publishing",
      ],
      icon: SparklesIcon,
      color: "from-[var(--color-success)] to-[var(--color-success-dark)]",
      image: "writer-dashboard.png",
      link: "#writer",
    },
    {
      title: "Thinker",
      subtitle: "Strategic OS and thinking engine",
      description: "Centralize prompts, author voices, and brand playbooks. Sync guidelines directly into every piece of content Igny8 creates. Manage AI instructions, writing styles, and content strategies in one place.",
      features: [
        "Centralized prompt library and brand playbooks with version control",
        "Author voice templates and style guides for consistent content",
        "Automated guideline enforcement across all content generation",
        "Governance dashboards showing who generated what, when, and with which inputs",
        "Version control for AI instructions and playbooks across teams",
      ],
      icon: BoltIcon,
      color: "from-[var(--color-warning)] to-[var(--color-warning-dark)]",
      image: "thinker-dashboard.png",
      link: "#thinker",
    },
    {
      title: "Automation",
      subtitle: "Always-on execution engine",
      description: "Orchestrate keywords to ideas, tasks to content, and assets to WordPress in automated cycles—customized to your cadence. Set it once, and watch it execute with intelligent handoffs between modules.",
      features: [
        "Schedule keywords → ideas → tasks → content → images in fully automated cycles",
        "End-to-end workflow automation with custom triggers and conditions",
        "Trigger workflows based on SERP movements, pipeline bottlenecks, or credit availability",
        "Multi-step handoffs between modules with quality checks at each stage",
        "Monitor every automation with audit logs and manual override controls",
      ],
      icon: PhotoIcon,
      color: "from-[var(--color-purple)] to-[var(--color-purple-dark)]",
      image: "automation-dashboard.png",
      link: "#automation",
    },
  ];

  return (
    <>
      <SEO meta={getMetaTags("product")} />
      <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">
            Product
          </span>
          <h1 className="text-5xl md:text-6xl lg:text-5xl font-bold leading-tight text-slate-900 mb-6">
            One platform for keyword intelligence, AI content, and workflow automation.
          </h1>
          <p className="text-xl md:text-2xl text-slate-600 mb-10 max-w-2xl mx-auto leading-relaxed">
            IGNY8 unifies research, writing, images, and automation so your team creates more output with less effort. Start manual or run fully automated.
          </p>
          <div className="flex flex-col sm:flex-row gap-4 justify-center">
            {renderCta(
              { label: "Start free", href: "https://app.igny8.com/signup" },
              "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"
            )}
            {renderCta(
              { label: "Book a demo", href: "/contact" },
              "inline-flex items-center justify-center rounded-xl border-2 border-slate-300 bg-white text-slate-700 px-8 py-4 text-base font-semibold hover:border-[var(--color-primary)] hover:text-[var(--color-primary)] transition"
            )}
          </div>
        </div>
      </section>

      {/* SYSTEM OVERVIEW - How the IGNY8 Engine Works */}
      <section className="py-24 bg-white">
        <div className="max-w-7xl mx-auto px-6">
          <div className="text-center mb-16">
            <h2 className="text-4xl md:text-5xl font-bold text-slate-900 mb-4">
              How the IGNY8 Engine Works
            </h2>
            <p className="text-lg text-slate-600 max-w-2xl mx-auto">
              A seamless pipeline from keyword discovery to published content
            </p>
          </div>
          
          {/* Horizontal Timeline */}
          <div className="relative">
            {/* Enhanced connecting line with shadow */}
            <div className="absolute top-14 left-0 right-0 h-1 bg-gradient-to-r from-[var(--color-primary)] via-[var(--color-purple)] via-[var(--color-warning)] via-[var(--color-success)] to-[var(--color-primary)] opacity-25 hidden md:block shadow-lg shadow-[var(--color-primary)]/20" />
            
            <div className="grid grid-cols-2 md:grid-cols-6 gap-6 md:gap-4">
              {workflowSteps.map((step, index) => {
                const Icon = step.icon;
                return (
                  <div key={step.name} className="flex flex-col items-center gap-3">
                    <div className={`relative size-28 rounded-full bg-gradient-to-br ${step.color} flex items-center justify-center text-white shadow-xl z-10 group hover:scale-110 transition-transform`}>
                      <Icon className="h-12 w-12" />
                      {/* Glow effect */}
                      <div className={`absolute -inset-2 bg-gradient-to-br ${step.color} rounded-full opacity-0 group-hover:opacity-30 blur-xl transition-opacity -z-10`} />
                    </div>
                    <span className="text-sm font-semibold text-slate-900 text-center">{step.name}</span>
                  </div>
                );
              })}
            </div>
          </div>
        </div>
      </section>

      {/* MODULE DEEP-DIVE SECTIONS */}
      {productModules.map((module, index) => {
        const Icon = module.icon;
        const isLeft = index % 2 === 0;
        const backgroundTints = [
          "bg-white",
          "bg-gradient-to-b from-[var(--color-primary)]/1 to-white",
          "bg-gradient-to-b from-[var(--color-success)]/1 to-white",
          "bg-gradient-to-b from-[var(--color-purple)]/1 to-white",
        ];
        
        return (
          <section key={module.title} id={module.title.toLowerCase()} className={`py-32 ${backgroundTints[index]}`}>
            <div className="max-w-7xl mx-auto px-6">
              <div className={`grid grid-cols-1 lg:grid-cols-2 gap-16 lg:gap-20 items-center ${!isLeft ? "lg:grid-flow-dense" : ""}`}>
                {/* Screenshot */}
                <div className={`relative ${!isLeft ? "lg:col-start-2" : ""}`}>
                  <div className="relative scale-110 lg:scale-115">
                    {/* Gradient frame background with colored glow */}
                    <div className={`absolute -inset-6 bg-gradient-to-br ${module.color} rounded-3xl opacity-25 blur-3xl`} />
                    <div className="relative rounded-2xl border-2 border-slate-200 bg-white shadow-2xl overflow-hidden">
                      <div className="absolute top-0 left-0 right-0 h-12 bg-gradient-to-b from-slate-800/30 to-transparent flex items-center gap-2 px-4">
                        <div className="flex gap-2">
                          <div className="w-3 h-3 rounded-full bg-red-500/50" />
                          <div className="w-3 h-3 rounded-full bg-yellow-500/50" />
                          <div className="w-3 h-3 rounded-full bg-green-500/50" />
                        </div>
                      </div>
                      <img
                        src={`/marketing/images/${module.image}`}
                        alt={`${module.title} dashboard`}
                        className="w-full h-auto object-cover mt-12"
                      />
                    </div>
                    {/* Overlap shadow with module color */}
                    <div className={`absolute -bottom-8 ${isLeft ? "-right-8" : "-left-8"} w-40 h-40 bg-gradient-to-br ${module.color} rounded-2xl opacity-15 blur-3xl -z-10`} />
                  </div>
                </div>

                {/* Text Content */}
                <div className={`${!isLeft ? "lg:col-start-1" : ""}`}>
                  <div className="flex items-center gap-3 mb-4">
                    <div className={`size-12 rounded-xl bg-gradient-to-br ${module.color} flex items-center justify-center text-white shadow-lg`}>
                      <Icon className="h-6 w-6" />
                    </div>
                    <div>
                      <h3 className="text-3xl md:text-4xl font-bold text-slate-900">{module.title}</h3>
                      <p className="text-sm text-slate-600 mt-1">{module.subtitle}</p>
                    </div>
                  </div>
                  <p className="text-lg text-slate-700 mb-6 leading-relaxed">
                    {module.description}
                  </p>
                  <ul className="space-y-3 mb-8">
                    {module.features.map((feature, i) => (
                      <li key={i} className="flex gap-3 text-slate-700">
                        <span className={`mt-2 size-2 rounded-full bg-gradient-to-br ${module.color} shadow-sm flex-shrink-0`} />
                        <span>{feature}</span>
                      </li>
                    ))}
                  </ul>
                  <a
                    href={module.link}
                    className={`inline-flex items-center gap-2 text-base font-semibold text-white px-6 py-3 rounded-xl bg-gradient-to-r ${module.color} hover:shadow-lg hover:-translate-y-0.5 transition-all`}
                  >
                    Learn more about {module.title}
                    <ArrowRightIcon className="h-5 w-5" />
                  </a>
                </div>
              </div>
            </div>
          </section>
        );
      })}

      {/* UNIFIED AUTOMATION ENGINE SECTION */}
      <section className="py-24 bg-gradient-to-br from-slate-950 via-slate-900 to-slate-950 relative overflow-hidden">
        {/* Richer background pattern */}
        <div className="absolute inset-0 bg-[radial-gradient(circle_at_50%_50%,rgba(6,147,227,0.15),transparent_70%)]" />
        <div className="absolute inset-0 bg-[radial-gradient(circle_at_80%_20%,rgba(109,74,227,0.2),transparent_50%)]" />
        <div className="absolute inset-0 bg-[radial-gradient(circle_at_20%_80%,rgba(11,191,135,0.1),transparent_50%)]" />
        
        <div className="relative max-w-7xl mx-auto px-6">
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-16 items-center mb-12">
            {/* Left: Content */}
            <div className="z-10">
              <div className="flex items-center gap-3 mb-6">
                <div className="size-12 rounded-xl bg-gradient-to-br from-[var(--color-primary)] to-[var(--color-purple)] flex items-center justify-center text-white shadow-lg shadow-[var(--color-primary)]/30">
                  <BoltIcon className="h-6 w-6" />
                </div>
                <h2 className="text-4xl md:text-5xl font-bold text-white">
                  Unified Automation Engine
                </h2>
              </div>
              <p className="text-xl text-slate-200 mb-8 leading-relaxed font-medium">
                Orchestrate your entire content pipeline with intelligent handoffs between modules. Set it once, and watch it execute with compounding value at each stage.
              </p>
              
              {/* Automation Timeline with neon glows */}
              <div className="space-y-6">
                {[
                  { from: "Keywords", to: "Clusters", icon: "→", color: "from-[var(--color-primary)] to-[var(--color-purple)]", glow: "shadow-[var(--color-primary)]/50" },
                  { from: "Clusters", to: "Ideas", icon: "→", color: "from-[var(--color-purple)] to-[var(--color-warning)]", glow: "shadow-[var(--color-purple)]/50" },
                  { from: "Ideas", to: "Tasks", icon: "→", color: "from-[var(--color-warning)] to-[var(--color-success)]", glow: "shadow-[var(--color-warning)]/50" },
                  { from: "Tasks", to: "Content", icon: "→", color: "from-[var(--color-success)] to-[var(--color-primary)]", glow: "shadow-[var(--color-success)]/50" },
                  { from: "Content", to: "Images", icon: "→", color: "from-[var(--color-primary)] to-[var(--color-purple)]", glow: "shadow-[var(--color-primary)]/50" },
                  { from: "Images", to: "Publish", icon: "→", color: "from-[var(--color-purple)] to-[var(--color-success)]", glow: "shadow-[var(--color-purple)]/50" },
                ].map((handoff, i) => (
                  <div key={i} className="flex items-center gap-4">
                    <div className={`relative w-12 h-12 rounded-xl bg-gradient-to-br ${handoff.color} flex items-center justify-center text-white font-bold shadow-lg ${handoff.glow} group`}>
                      {handoff.icon}
                      {/* Neon glow effect */}
                      <div className={`absolute -inset-1 bg-gradient-to-br ${handoff.color} rounded-xl opacity-0 group-hover:opacity-60 blur-md transition-opacity -z-10`} />
                    </div>
                    <div className="flex-1">
                      <div className="text-white font-semibold text-lg">{handoff.from} → {handoff.to}</div>
                      <div className="text-sm text-slate-300">Automated handoff with quality checks</div>
                    </div>
                  </div>
                ))}
              </div>
            </div>

            {/* Right: Automation Dashboard Screenshot */}
            <div className="relative z-10">
              <div className="relative rounded-2xl border-2 border-white/20 bg-white/5 backdrop-blur-sm shadow-2xl overflow-hidden">
                <div className="absolute top-0 left-0 right-0 h-12 bg-gradient-to-b from-slate-800/50 to-transparent flex items-center gap-2 px-4">
                  <div className="flex gap-2">
                    <div className="w-3 h-3 rounded-full bg-red-500/50" />
                    <div className="w-3 h-3 rounded-full bg-yellow-500/50" />
                    <div className="w-3 h-3 rounded-full bg-green-500/50" />
                  </div>
                </div>
                <img
                  src="/marketing/images/automation-dashboard.png"
                  alt="Automation dashboard"
                  className="w-full h-auto object-cover mt-12"
                />
              </div>
              {/* Glow effect */}
              <div className="absolute -inset-4 bg-gradient-to-br from-[var(--color-primary)]/20 to-[var(--color-purple)]/20 rounded-2xl blur-2xl -z-10" />
            </div>
          </div>

          {/* Performance KPIs */}
          <div className="grid grid-cols-1 md:grid-cols-2 gap-6 max-w-2xl mx-auto">
            <div className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-xl p-6">
              <div className="text-4xl font-bold text-white mb-2">87%</div>
              <div className="text-sm text-slate-400">Completion Rate</div>
              <div className="text-xs text-slate-500 mt-2">Average automation success across all workflows</div>
            </div>
            <div className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-xl p-6">
              <div className="text-4xl font-bold text-white mb-2">6×</div>
              <div className="text-sm text-slate-400">Faster Velocity</div>
              <div className="text-xs text-slate-500 mt-2">Content creation speed compared to manual processes</div>
            </div>
          </div>
        </div>
      </section>

      {/* TESTIMONIALS */}
      <section className="py-24 bg-white">
        <div className="max-w-7xl mx-auto px-6">
          <div className="text-center mb-12">
            <span className="inline-flex items-center rounded-full border border-[var(--color-primary)]/20 bg-[var(--color-primary)]/10 px-4 py-1 text-xs font-semibold uppercase tracking-[0.2em] text-[var(--color-primary)] mb-4">
              Loved by scaling teams
            </span>
            <h2 className="text-4xl md:text-5xl lg:text-6xl font-bold text-slate-900 mb-4">
              Teams ship more content, capture more demand, and see faster ROI with Igny8.
            </h2>
          </div>
          
          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
            {testimonials.map((testimonial, index) => {
              const gradientColors = [
                "from-[var(--color-primary)]/20 to-[var(--color-primary-dark)]/10",
                "from-[var(--color-success)]/20 to-[var(--color-success-dark)]/10",
                "from-[var(--color-purple)]/20 to-[var(--color-purple-dark)]/10",
              ];
              const borderColors = [
                "border-[var(--color-primary)]/30",
                "border-[var(--color-success)]/30",
                "border-[var(--color-purple)]/30",
              ];
              
              return (
                <div
                  key={testimonial.name}
                  className={`relative rounded-3xl border-2 ${borderColors[index]} bg-gradient-to-br ${gradientColors[index]} bg-white/80 backdrop-blur-sm p-8 flex flex-col gap-6 shadow-xl hover:shadow-2xl hover:-translate-y-1 transition-all`}
                >
                  {/* Avatar placeholder with better contrast */}
                  <div className={`size-14 rounded-full bg-gradient-to-br ${gradientColors[index].split(" ")[0]} flex items-center justify-center text-white font-bold text-xl shadow-lg`}>
                    {testimonial.name.charAt(0)}
                  </div>
                  
                  <p className="text-base text-slate-800 leading-relaxed font-semibold flex-1">
                    "{testimonial.quote}"
                  </p>
                  
                  <div className="flex flex-col gap-1">
                    <span className="font-bold text-slate-900 text-lg">{testimonial.name}</span>
                    <span className="text-sm text-slate-700 font-medium">
                      {testimonial.title} · {testimonial.company}
                    </span>
                  </div>
                  
                  {/* Metrics badge with better contrast */}
                  <div className={`inline-flex items-center gap-2 px-4 py-2 rounded-full bg-gradient-to-r ${gradientColors[index]} text-slate-800 text-xs font-bold w-fit shadow-sm`}>
                    <span>3× faster</span>
                    <span>•</span>
                    <span>+132% lift</span>
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      </section>

      {/* FINAL CTA */}
      <section className="relative overflow-hidden bg-gradient-to-br from-[var(--color-primary)] via-[var(--color-purple)] to-[#8b5cf6]">
        {/* Dashboard overlay in background */}
        <div className="absolute inset-0 opacity-10">
          <div className="absolute inset-0 bg-[url('/marketing/images/hero-dashboard.png')] bg-cover bg-center scale-150 blur-3xl" />
        </div>
        
        {/* 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">
            Ready to unify your search intelligence, content, and automation?
          </h2>
          <p className="text-xl md:text-2xl text-white/90 mb-12 max-w-2xl mx-auto font-medium">
            Start with 14 days on us or book a bespoke walkthrough with our team to map Igny8 to your workflows.
          </p>
          <div className="flex flex-col sm:flex-row gap-5 justify-center">
            <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
            </a>
            <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" />
              Book a demo
            </Link>
          </div>
        </div>
      </section>
      </div>
    </>
  );
};

export default Product;
