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 Home: 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: "Images", icon: PhotoIcon, color: "from-[var(--color-purple)] to-[var(--color-purple-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, cluster at scale, and prioritize opportunities with AI scoring. Build topical maps in minutes, not days.",
      bullets: [
        "Living keyword database with real-time search volumes",
        "AI-powered clustering for topical authority mapping",
        "Priority scoring based on opportunity and competition",
      ],
      icon: ChartBarIcon,
      color: "from-[var(--color-primary)] to-[var(--color-primary-dark)]",
      image: "planner-dashboard.png",
      link: "/product#planner",
      align: "left",
    },
    {
      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.",
      bullets: [
        "Context-aware content generation with SERP analysis",
        "Brand voice and tone controls for consistency",
        "Collaborative editing and approval workflows",
      ],
      icon: SparklesIcon,
      color: "from-[var(--color-success)] to-[var(--color-success-dark)]",
      image: "writer-dashboard.png",
      link: "/product#writer",
      align: "right",
    },
    {
      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.",
      bullets: [
        "Centralized prompt library and brand playbooks",
        "Author voice templates and style guides",
        "Automated guideline enforcement across all content",
      ],
      icon: BoltIcon,
      color: "from-[var(--color-warning)] to-[var(--color-warning-dark)]",
      image: "thinker-dashboard.png",
      link: "/product#thinker",
      align: "left",
    },
    {
      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.",
      bullets: [
        "End-to-end workflow automation with custom triggers",
        "Multi-step handoffs between modules",
        "Real-time monitoring and error handling",
      ],
      icon: PhotoIcon,
      color: "from-[var(--color-purple)] to-[var(--color-purple-dark)]",
      image: "automation-dashboard.png",
      link: "/product#automation",
      align: "right",
    },
  ];

  return (
    <>
      <SEO meta={getMetaTags("home")} />
      <div className="bg-white">
        {/* HERO SECTION */}
        <section className="relative overflow-hidden bg-gradient-to-br from-[var(--color-primary)] via-[var(--color-purple)] to-[#8b5cf6]">
        {/* Radial glow behind headline */}
        <div className="absolute inset-0 bg-[radial-gradient(circle_at_30%_50%,rgba(255,255,255,0.1),transparent_60%)]" />
        <div className="absolute inset-0 bg-[radial-gradient(circle_at_70%_20%,rgba(109,74,227,0.2),transparent_50%)]" />
        
        <div className="relative max-w-7xl mx-auto px-6 py-20 md:py-32 lg:py-40">
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-16 items-center">
            {/* Left: Text Content */}
            <div className="flex flex-col gap-6 z-10">
              <span className="inline-flex items-center gap-2 text-xs font-semibold uppercase tracking-[0.28em] text-white/90 bg-white/10 px-4 py-2 rounded-full border border-white/20 backdrop-blur-sm w-fit">
                AI + SEO Platform
              </span>
              <h1 className="text-5xl md:text-6xl lg:text-5xl font-bold leading-tight text-white">
                Scale SEO content from keyword discovery to AI-crafted outputs.
              </h1>
              <p className="text-lg md:text-xl text-white/85 leading-relaxed max-w-xl">
                IGNY8 automates your growth engine from research to briefs, from content writing to image generation.
              </p>
              <div className="flex flex-col sm:flex-row gap-4 mt-2">
                {renderCta(
                  { label: "Start Free", href: "https://app.igny8.com/signup" },
                  "inline-flex items-center justify-center rounded-xl bg-white text-[var(--color-primary)] px-8 py-4 text-base font-semibold hover:bg-white/95 transition shadow-xl hover:shadow-2xl hover:-translate-y-0.5"
                )}
                {renderCta(
                  { label: "Book Demo", href: "/contact" },
                  "inline-flex items-center justify-center rounded-xl border-2 border-white/30 bg-white/10 backdrop-blur-sm text-white px-8 py-4 text-base font-semibold hover:bg-white/20 hover:border-white/50 transition"
                )}
              </div>
            </div>

            {/* Right: Dashboard Screenshot - Increased size 20-30% */}
            <div className="relative z-10">
              <div className="relative scale-110 lg:scale-125">
                {/* Soft glow behind screenshot */}
                <div className="absolute -inset-8 bg-gradient-to-br from-white/30 via-[var(--color-primary)]/20 to-[var(--color-purple)]/20 rounded-3xl blur-3xl" />
                {/* Device frame effect */}
                <div className="absolute -inset-4 bg-gradient-to-br from-white/20 to-white/5 rounded-3xl blur-2xl" />
                <div className="relative rounded-2xl border-4 border-white/20 bg-white/10 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/hero-dashboard.png"
                    alt="Igny8 dashboard"
                    className="w-full h-auto object-cover mt-12"
                  />
                </div>
                {/* Soft shadow */}
                <div className="absolute -bottom-8 -left-8 right-8 h-32 bg-gradient-to-t from-[var(--color-primary)]/20 to-transparent blur-3xl -z-10" />
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* SOCIAL PROOF LOGOS */}
      <section className="py-8 bg-white border-b border-slate-100">
        <div className="max-w-6xl mx-auto px-6">
          <div className="flex flex-col gap-4 items-center">
            <span className="text-xs uppercase tracking-[0.28em] text-slate-500 font-medium">
              Trusted by modern organic teams
            </span>
            <div className="flex flex-wrap justify-center gap-8 md:gap-10 items-center">
              {["launchpad", "northbeam", "scaleops", "pathfinder", "catalyst", "orbit"].map((name) => (
                <div
                  key={name}
                  className="h-8 md:h-10 opacity-60 grayscale hover:opacity-100 hover:grayscale-0 transition"
                >
                  <img
                    src={`/marketing/images/logo-${name}.png`}
                    alt={`${name} logo`}
                    className="h-full w-auto"
                  />
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* HOW IGNY8 WORKS (PIPELINE) */}
      <section className="py-24 bg-gradient-to-b from-white via-[var(--color-primary)]/3 to-[var(--color-purple)]/3">
        <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 Igny8 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-7 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>

      {/* PRODUCT MODULE SNAPSHOTS */}
      {productModules.map((module, index) => {
        const Icon = module.icon;
        const isLeft = module.align === "left";
        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} 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 - Larger scale 1.15 */}
                <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-10 blur-xl`} />
                    <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-10 blur-xl -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.bullets.map((bullet, 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>{bullet}</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`}
                  >
                    See {module.title}
                    <ArrowRightIcon className="h-5 w-5" />
                  </a>
                </div>
              </div>
            </div>
          </section>
        );
      })}

      {/* AUTOMATION SNAPSHOT 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">
            {/* 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">
                  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.
              </p>
              
              {/* Automation Timeline with neon glows */}
              <div className="space-y-6 mb-8">
                {[
                  { 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>

              {/* Metrics */}
              <div className="grid grid-cols-2 gap-4">
                <div className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-xl p-4">
                  <div className="text-3xl font-bold text-white mb-1">87%</div>
                  <div className="text-sm text-slate-400">Completion Rate</div>
                </div>
                <div className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-xl p-4">
                  <div className="text-3xl font-bold text-white mb-1">6×</div>
                  <div className="text-sm text-slate-400">Faster Velocity</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>
        </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-[#8b5cf6] via-[var(--color-purple)] to-[var(--color-primary)]">
        {/* 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 orchestrate SEO, content, and creative in one AI engine?
          </h2>
          <p className="text-xl md:text-2xl text-white/90 mb-12 max-w-2xl mx-auto font-medium">
            Launch Igny8 in minutes. Start automating your workflow, or book a white-glove onboarding session with our team.
          </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" />
              Talk to Sales
            </Link>
          </div>
        </div>
      </section>
      </div>
    </>
  );
};

export default Home;