import React from "react";
import { Link } from "react-router-dom";
import {
  RocketLaunchIcon,
  ChatBubbleLeftRightIcon,
  ChartBarIcon,
  DocumentTextIcon,
  SparklesIcon,
  UserGroupIcon,
  PhotoIcon,
  BoltIcon,
  ArrowTrendingUpIcon,
  ClockIcon,
  WrenchScrewdriverIcon,
  ExclamationTriangleIcon,
  CheckCircleIcon,
} from "@heroicons/react/24/outline";
import SEO from "../components/SEO";
import { getMetaTags } from "../config/metaTags";

const Solutions: 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 personas = [
    {
      name: "Publishers & Media",
      description: "Scale content production while maintaining editorial standards and brand voice across multiple verticals.",
      pains: [
        "Monthly content quotas and strict editorial standards",
        "Need faster research without sacrificing topical authority",
        "Multiple brands and verticals competing for attention",
        "Manual image sourcing and WordPress publishing bottlenecks",
      ],
      outcomes: [
        "Launch keyword → content automation that protects brand voice",
        "Keep editors in control with approvals and Thinker playbooks",
        "Automate image generation and WordPress publishing by site",
      ],
      color: "from-[var(--color-primary)]/5 to-white",
      borderColor: "border-[var(--color-primary)]/20",
      iconColor: "from-[var(--color-primary)] to-[var(--color-primary-dark)]",
      painColor: "bg-rose-500",
      outcomeColor: "bg-[var(--color-primary)]",
    },
    {
      name: "Agencies & Consultancies",
      description: "Deliver consistent, high-quality content at scale across client accounts with unified workflows.",
      pains: [
        "Manual reporting and slow client deliverables",
        "Disjointed tool stack for research, writing, and visuals",
        "Scaling teams across time zones with consistent quality",
        "Client-specific brand guidelines and tone management",
      ],
      outcomes: [
        "Shared workspaces for each client with automation templates",
        "Real-time dashboards to prove impact and showcase velocity",
        "Reusable Thinker libraries to standardize tone and strategy",
      ],
      color: "from-[var(--color-success)]/5 to-white",
      borderColor: "border-[var(--color-success)]/20",
      iconColor: "from-[var(--color-success)] to-[var(--color-success-dark)]",
      painColor: "bg-rose-500",
      outcomeColor: "bg-[var(--color-success)]",
    },
    {
      name: "In-house Marketing Teams",
      description: "Unify SEO, content, and creative workflows to accelerate output with limited resources.",
      pains: [
        "Demand for multi-channel content with lean resources",
        "Difficulty aligning SEO, content, and creative workflows",
        "Pressure to report results to leadership quickly",
        "Tool sprawl creating visibility gaps",
      ],
      outcomes: [
        "Automated pipeline from keyword intake to published content",
        "Dashboards that unite SEO, writers, designers, and leadership",
        "Insights to reallocate focus when campaigns spike or drop",
      ],
      color: "from-[var(--color-purple)]/5 to-white",
      borderColor: "border-[var(--color-purple)]/20",
      iconColor: "from-[var(--color-purple)] to-[var(--color-purple-dark)]",
      painColor: "bg-rose-500",
      outcomeColor: "bg-[var(--color-purple)]",
    },
  ];

  const useCases = [
    {
      title: "Keyword Research",
      description: "Discover high-opportunity keywords from a global database with real-time volumes and difficulty scores.",
      icon: ChartBarIcon,
      color: "from-[var(--color-primary)] to-[var(--color-primary-dark)]",
    },
    {
      title: "Content Briefs",
      description: "Generate comprehensive briefs with outlines, talking points, and internal link suggestions.",
      icon: DocumentTextIcon,
      color: "from-[var(--color-success)] to-[var(--color-success-dark)]",
    },
    {
      title: "Content Writing",
      description: "Create long-form articles aligned to your brand voice, compliance rules, and target SERP.",
      icon: SparklesIcon,
      color: "from-[var(--color-warning)] to-[var(--color-warning-dark)]",
    },
    {
      title: "Cluster Analysis",
      description: "AI-powered semantic clustering to group related keywords and build topical authority maps.",
      icon: UserGroupIcon,
      color: "from-[var(--color-purple)] to-[var(--color-purple-dark)]",
    },
    {
      title: "Image Generation",
      description: "AI-generated featured and in-article images based on your content with brand consistency.",
      icon: PhotoIcon,
      color: "from-[var(--color-primary)] to-[var(--color-purple)]",
    },
    {
      title: "Workflow Automation",
      description: "End-to-end automation from keywords to published content with intelligent handoffs.",
      icon: BoltIcon,
      color: "from-[var(--color-success)] to-[var(--color-primary)]",
    },
  ];

  return (
    <>
      <SEO meta={getMetaTags("solutions")} />
      <div className="bg-white">
      {/* LIGHT 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">
            Solutions
          </span>
          <h1 className="text-5xl md:text-6xl lg:text-5xl font-bold leading-tight text-slate-900 mb-6">
            Designed for teams that operate at scale.
          </h1>
          <p className="text-xl md:text-2xl text-slate-600 mb-10 max-w-2xl mx-auto leading-relaxed">
            IGNY8 adapts to agencies, publishers, and in-house teams. Automate repetitive work, unify strategy, and accelerate content velocity with AI.
          </p>
          <div className="flex flex-col sm:flex-row gap-4 justify-center">
            {renderCta(
              { label: "See use cases", href: "#use-cases" },
              "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: "Talk to sales", 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>

      {/* PERSONAS SECTIONS */}
      {personas.map((persona, index) => (
        <section key={persona.name} className={`py-24 bg-gradient-to-b ${persona.color}`}>
          <div className="max-w-7xl mx-auto px-6">
            <div className="grid grid-cols-1 lg:grid-cols-3 gap-12 lg:gap-16">
              {/* Left: Persona Badge & Info */}
              <div className="space-y-6">
                <div className="inline-flex items-center gap-3 px-4 py-2 rounded-full bg-white border-2 border-slate-200 shadow-sm">
                  <div className={`size-3 rounded-full bg-gradient-to-br ${persona.iconColor}`} />
                  <span className="text-xs uppercase tracking-[0.2em] text-slate-600 font-semibold">
                    Persona
                  </span>
                </div>
                <div>
                  <h3 className="text-3xl md:text-4xl font-bold text-slate-900 mb-3">
                    {persona.name}
                  </h3>
                  <p className="text-lg text-slate-600 leading-relaxed">
                    {persona.description}
                  </p>
                </div>
              </div>

              {/* Middle: Pain Points */}
              <div className="bg-white rounded-2xl border-2 border-slate-200 p-8 shadow-sm">
                <div className="flex items-center gap-2 mb-6">
                  <ExclamationTriangleIcon className="h-5 w-5 text-rose-500" />
                  <h4 className="text-sm uppercase tracking-[0.2em] text-rose-600 font-semibold">
                    Pain Points
                  </h4>
                </div>
                <ul className="space-y-4">
                  {persona.pains.map((pain, i) => (
                    <li key={i} className="flex gap-3 text-slate-700">
                      <span className={`mt-1.5 size-2 rounded-full ${persona.painColor} shadow-sm flex-shrink-0`} />
                      <span>{pain}</span>
                    </li>
                  ))}
                </ul>
              </div>

              {/* Right: IGNY8 Outcomes */}
              <div className="bg-white rounded-2xl border-2 border-slate-200 p-8 shadow-sm">
                <div className="flex items-center gap-2 mb-6">
                  <CheckCircleIcon className={`h-5 w-5 ${persona.outcomeColor === 'bg-[var(--color-primary)]' ? 'text-[var(--color-primary)]' : persona.outcomeColor === 'bg-[var(--color-success)]' ? 'text-[var(--color-success)]' : 'text-[var(--color-purple)]'}`} />
                  <h4 className={`text-sm uppercase tracking-[0.2em] font-semibold ${persona.outcomeColor === 'bg-[var(--color-primary)]' ? 'text-[var(--color-primary)]' : persona.outcomeColor === 'bg-[var(--color-success)]' ? 'text-[var(--color-success)]' : 'text-[var(--color-purple)]'}`}>
                    IGNY8 Outcomes
                  </h4>
                </div>
                <ul className="space-y-4">
                  {persona.outcomes.map((outcome, i) => (
                    <li key={i} className="flex gap-3 text-slate-700">
                      <span className={`mt-1.5 size-2 rounded-full ${persona.outcomeColor} shadow-sm flex-shrink-0`} />
                      <span>{outcome}</span>
                    </li>
                  ))}
                </ul>
              </div>
            </div>
          </div>
        </section>
      ))}

      {/* BENEFITS STATISTICS SECTION */}
      <section className="py-24 bg-gradient-to-b from-white via-slate-50/30 to-white">
        <div className="max-w-6xl mx-auto px-6">
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            {[
              {
                metric: "3.2×",
                label: "organic lift",
                description: "Average lift in organic traffic within 90 days",
                icon: ArrowTrendingUpIcon,
                color: "from-[var(--color-primary)] to-[var(--color-primary-dark)]",
                glow: "shadow-[var(--color-primary)]/30",
              },
              {
                metric: "48%",
                label: "reduction in time to publish",
                description: "Faster time-to-publish from keyword discovery",
                icon: ClockIcon,
                color: "from-[var(--color-success)] to-[var(--color-success-dark)]",
                glow: "shadow-[var(--color-success)]/30",
              },
              {
                metric: "4 tools",
                label: "replaced",
                description: "Average number of point solutions replaced by Igny8",
                icon: WrenchScrewdriverIcon,
                color: "from-[var(--color-warning)] to-[var(--color-warning-dark)]",
                glow: "shadow-[var(--color-warning)]/30",
              },
            ].map((stat, index) => {
              const Icon = stat.icon;
              return (
                <div
                  key={index}
                  className="relative rounded-3xl border-2 border-slate-200 bg-gradient-to-br from-white to-slate-50/50 p-8 text-center space-y-4 hover:shadow-2xl hover:-translate-y-1 transition-all group"
                >
                  {/* Glow effect */}
                  <div className={`absolute -inset-1 bg-gradient-to-br ${stat.color} rounded-3xl opacity-0 group-hover:opacity-20 blur-xl transition-opacity -z-10 ${stat.glow}`} />
                  
                  {/* Icon */}
                  <div className={`inline-flex size-16 rounded-2xl bg-gradient-to-br ${stat.color} items-center justify-center text-white shadow-lg mb-2`}>
                    <Icon className="h-8 w-8" />
                  </div>
                  
                  {/* Metric */}
                  <div className={`text-5xl md:text-6xl font-bold bg-gradient-to-br ${stat.color} bg-clip-text text-transparent`}>
                    {stat.metric}
                  </div>
                  
                  {/* Label */}
                  <div className="text-lg font-semibold text-slate-900">
                    {stat.label}
                  </div>
                  
                  {/* Description */}
                  <p className="text-sm text-slate-600">
                    {stat.description}
                  </p>
                </div>
              );
            })}
          </div>
        </div>
      </section>

      {/* USE CASES OVERVIEW */}
      <section id="use-cases" 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">
              Use Cases
            </h2>
            <p className="text-lg text-slate-600 max-w-2xl mx-auto">
              Practical applications that help teams scale content production and accelerate growth
            </p>
          </div>
          
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            {useCases.map((useCase, index) => {
              const Icon = useCase.icon;
              return (
                <div
                  key={useCase.title}
                  className="relative rounded-2xl border-2 border-slate-200 bg-white p-6 space-y-4 hover:shadow-xl hover:-translate-y-1 transition-all group"
                >
                  {/* Icon */}
                  <div className={`inline-flex size-12 rounded-xl bg-gradient-to-br ${useCase.color} items-center justify-center text-white shadow-md`}>
                    <Icon className="h-6 w-6" />
                  </div>
                  
                  {/* Title */}
                  <h3 className="text-xl font-semibold text-slate-900">
                    {useCase.title}
                  </h3>
                  
                  {/* Description */}
                  <p className="text-sm text-slate-600 leading-relaxed">
                    {useCase.description}
                  </p>
                  
                  {/* Subtle gradient on hover */}
                  <div className={`absolute -inset-0.5 bg-gradient-to-br ${useCase.color} rounded-2xl opacity-0 group-hover:opacity-10 blur transition-opacity -z-10`} />
                </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]">
        {/* 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">
            Start automating your content engine today.
          </h2>
          <p className="text-xl md:text-2xl text-white/90 mb-12 max-w-2xl mx-auto font-medium">
            Book a strategy session or start a trial to explore IGNY8 for your 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 Solutions;
