import React from "react";
import { Link } from "react-router-dom";
import {
  RocketLaunchIcon,
  ChatBubbleLeftRightIcon,
  ArrowRightIcon,
  CheckCircleIcon,
} from "@heroicons/react/24/outline";
import SEO from "../components/SEO";
import { getMetaTags } from "../config/metaTags";

const CaseStudies: 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 caseStudies = [
    {
      company: "Lumen Publishing",
      headline: "From 40 to 220 articles/month with 3× SERP visibility.",
      metrics: [
        { label: "Organic traffic", value: "+210%" },
        { label: "Time-to-publish", value: "-58%" },
        { label: "Cost per article", value: "-34%" },
      ],
      summary:
        "Publisher running 6 niche brands used Igny8 to centralize research, briefs, and AI-assisted writing. Automation recipes ensured every keyword moved to published content with minimal handoff friction.",
      image: "case-lumen.png",
      iconColor: "from-[var(--color-primary)] to-[var(--color-primary-dark)]",
    },
    {
      company: "Northbeam Digital",
      headline: "Agency tripled client output without adding headcount.",
      metrics: [
        { label: "Client satisfaction", value: "98%" },
        { label: "Deliverables/mo", value: "+175%" },
        { label: "Margin lift", value: "+22%" },
      ],
      summary:
        "Multi-client agency adopted Igny8 to standardize workflows, automate reporting, and launch custom Thinker playbooks. Teams now produce keyword research, content, and images for 20+ clients simultaneously.",
      image: "case-northbeam.png",
      iconColor: "from-[var(--color-success)] to-[var(--color-success-dark)]",
    },
    {
      company: "Arcadia SaaS",
      headline: "In-house team built a 7-stage automation pipeline.",
      metrics: [
        { label: "New keywords ranked", value: "1,040" },
        { label: "Automation coverage", value: "82%" },
        { label: "Time saved monthly", value: "120 hrs" },
      ],
      summary:
        "Arcadia used Igny8 to align SEO, product marketing, and design. Thinker libraries ensured every asset matched product messaging; automation pushed approved content directly into WordPress and HubSpot.",
      image: "case-arcadia.png",
      iconColor: "from-[var(--color-purple)] to-[var(--color-purple-dark)]",
    },
  ];

  return (
    <>
      <SEO meta={getMetaTags("caseStudies")} />
      <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">
            Case Studies
          </span>
          <h1 className="text-5xl md:text-6xl lg:text-5xl font-bold leading-tight text-slate-900 mb-6">
            Stories from teams automating their way to category leadership.
          </h1>
          <p className="text-xl md:text-2xl text-slate-600 mb-10 max-w-2xl mx-auto leading-relaxed">
            See how publishers, agencies, and SaaS companies transformed their SEO and content operations with Igny8.
          </p>
        </div>
      </section>

      {/* CASE STUDIES GRID */}
      <section className="max-w-7xl mx-auto px-6 pb-24 space-y-16">
        {caseStudies.map((cs, idx) => {
          const metricColors = [
            { border: "border-slate-200", bg: "from-white to-slate-50/50", text: "text-[var(--color-primary)]" },
            { border: "border-slate-200", bg: "from-white to-slate-50/50", text: "text-[#0bbf87]" },
            { border: "border-slate-200", bg: "from-white to-slate-50/50", text: "text-[#ff7a00]" },
          ];
          return (
            <div
              key={cs.company}
              className="rounded-3xl border-2 border-slate-200 bg-white p-10 md:p-12 grid grid-cols-1 lg:grid-cols-2 gap-12 hover:shadow-xl hover:-translate-y-1 transition-all"
            >
              <div className="space-y-6">
                <div className="flex items-center gap-3">
                  <div className={`size-12 rounded-xl bg-gradient-to-br ${cs.iconColor} flex items-center justify-center text-white shadow-lg`}>
                    <CheckCircleIcon 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.2em] bg-slate-100 text-slate-600">
                    {cs.company}
                  </span>
                </div>
                <h3 className="text-3xl md:text-4xl font-bold text-slate-900">{cs.headline}</h3>
                <p className="text-base text-slate-600 leading-relaxed">{cs.summary}</p>
                <div className="grid grid-cols-3 gap-4 pt-4">
                  {cs.metrics.map((metric, metricIdx) => {
                    const metricColor = metricColors[metricIdx % metricColors.length];
                    return (
                      <div
                        key={metric.label}
                        className={`rounded-2xl border-2 ${metricColor.border} bg-gradient-to-br ${metricColor.bg} p-5 text-center space-y-2 hover:shadow-lg transition-all`}
                      >
                        <div className={`text-2xl md:text-3xl font-bold ${metricColor.text}`}>
                          {metric.value}
                        </div>
                        <div className="text-xs uppercase tracking-[0.2em] text-slate-600 font-semibold">
                          {metric.label}
                        </div>
                      </div>
                    );
                  })}
                </div>
              </div>
              <div className="relative">
                <div className="rounded-3xl border-2 border-slate-200 bg-gradient-to-br from-slate-50 to-white overflow-hidden shadow-lg">
                  <img
                    src={`/marketing/images/${cs.image}`}
                    alt={`${cs.company} case study`}
                    className="w-full h-full object-cover"
                  />
                </div>
              </div>
            </div>
          );
        })}
      </section>

      {/* RESULTS & ADVISORY BOARD */}
      <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 grid grid-cols-1 lg:grid-cols-2 gap-8">
          <div className="rounded-2xl border-2 border-slate-200 bg-white p-8 space-y-6 shadow-sm">
            <div className="flex items-center gap-3">
              <div className="size-12 rounded-xl bg-gradient-to-br from-[var(--color-primary)] to-[var(--color-primary-dark)] flex items-center justify-center text-white shadow-lg">
                <CheckCircleIcon className="h-6 w-6" />
              </div>
              <h4 className="text-2xl font-bold text-slate-900">
                Results you can expect
              </h4>
            </div>
            <ul className="space-y-4 text-sm text-slate-700">
              {[
                { text: "30-60 day onboarding to deploy automation and Thinker governance.", color: "bg-[#0693e3]" },
                { text: "3-5× increase in content throughput without sacrificing editorial quality.", color: "bg-[#0bbf87]" },
                { text: "Clear ROI dashboards tying automation to revenue outcomes.", color: "bg-[#ff7a00]" },
              ].map((item, index) => (
                <li key={item.text} className="flex gap-3">
                  <span className={`mt-1.5 size-2 rounded-full ${item.color} shadow-sm flex-shrink-0`} />
                  <span>{item.text}</span>
                </li>
              ))}
            </ul>
          </div>
          <div className="rounded-2xl border-2 border-slate-200 bg-white p-8 space-y-6 shadow-sm">
            <div className="flex items-center gap-3">
              <div className="size-12 rounded-xl bg-gradient-to-br from-[var(--color-success)] to-[var(--color-success-dark)] flex items-center justify-center text-white shadow-lg">
                <CheckCircleIcon className="h-6 w-6" />
              </div>
              <h4 className="text-2xl font-bold text-slate-900">
                Customer advisory board
              </h4>
            </div>
            <p className="text-base text-slate-700 leading-relaxed">
              Igny8's roadmap is shaped by an active community of customer strategists, agency partners, and product marketers. Join and get early access to features, template libraries, and industry benchmarks.
            </p>
            <button className="inline-flex items-center justify-center gap-2 rounded-xl bg-gradient-to-r from-[var(--color-primary)] to-[var(--color-primary-dark)] text-white px-6 py-3 text-sm font-semibold hover:shadow-lg transition">
              Join the CAB waitlist
              <ArrowRightIcon className="h-4 w-4" />
            </button>
          </div>
        </div>
      </section>

      {/* FINAL CTA */}
      <section className="relative overflow-hidden bg-gradient-to-br from-[#0693e3] via-[#5d4ae3] to-[#8b5cf6]">
        {/* Radial glow */}
        <div className="absolute inset-0 bg-[radial-gradient(circle_at_50%_50%,rgba(255,255,255,0.1),transparent_70%)]" />
        
        <div className="relative max-w-4xl mx-auto px-6 py-24 md:py-32 text-center z-10">
          <h2 className="text-4xl md:text-5xl lg:text-6xl font-extrabold text-white mb-6 leading-tight">
            Let's document your Igny8 success story next.
          </h2>
          <p className="text-xl md:text-2xl text-white/90 mb-12 max-w-2xl mx-auto font-medium">
            Share your goals and we'll map an automation blueprint specific to your team, then track and celebrate the wins together.
          </p>
          <div className="flex flex-col sm:flex-row gap-5 justify-center">
            <Link
              to="/contact"
              className="inline-flex items-center justify-center gap-2 rounded-xl border-2 border-white/30 bg-white/10 backdrop-blur-sm text-white px-10 py-5 text-lg font-bold hover:bg-white/20 hover:border-white/50 transition"
            >
              <ChatBubbleLeftRightIcon className="h-5 w-5" />
              Book strategy session
            </Link>
            <Link
              to="/resources"
              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" />
              Download case study pack
            </Link>
          </div>
        </div>
      </section>
      </div>
    </>
  );
};

export default CaseStudies;