import React from "react";
import {
  BoltIcon,
  SparklesIcon,
  ChartBarIcon,
  PhotoIcon,
} from "@heroicons/react/24/outline";
import HeroSection from "../components/HeroSection";
import MetricsBar from "../components/MetricsBar";
import { heroMetrics, workflowSteps } from "../data/metrics";
import LogoCloud from "../components/LogoCloud";
import WorkflowSteps from "../components/WorkflowSteps";
import FeatureGrid from "../components/FeatureGrid";
import SectionHeading from "../components/SectionHeading";
import TestimonialSlider from "../components/TestimonialSlider";
import CTASection from "../components/CTASection";

const Home: React.FC = () => {
  return (
    <div className="bg-gradient-to-b from-white via-slate-50/30 to-white">
      <HeroSection
        image="hero-dashboard.png"
        headline="Scale SEO content from keyword discovery to AI-crafted outputs."
        subheadline="Igny8 automates your entire growth workflow—from market intelligence to publishing-ready content and imagery—so your team builds momentum, not spreadsheets."
        primaryCta={{
          label: "Start free trial",
          href: "https://app.igny8.com/signup",
        }}
        secondaryCta={{
          label: "Book a live tour",
          href: "/tour",
        }}
      />

      <MetricsBar metrics={heroMetrics} />

      <LogoCloud />

      <section className="max-w-6xl mx-auto px-6 py-24 space-y-12">
        <SectionHeading
          eyebrow="Unified growth engine"
          title="Four deeply connected products deliver one end-to-end workflow."
          description="Every step compounds the next—from keyword intelligence to AI-powered writing and design. Automations keep your pipeline moving while strategy stays in your control."
        />
        <FeatureGrid
          features={[
            {
              title: "Planner · Market intelligence",
              description:
                "Tap into a living keyword database, cluster at scale, and prioritize opportunities with AI scoring. Build topical maps in minutes, not days.",
              icon: <ChartBarIcon className="h-6 w-6" />,
              link: { label: "See Planner", href: "/product#planner" },
            },
            {
              title: "Writer · AI content studio",
              description:
                "Generate briefs, long-form articles, and on-brand messaging with contextual SERP data, tone controls, and collaboration tools.",
              icon: <SparklesIcon className="h-6 w-6" />,
              link: { label: "See Writer", href: "/product#writer" },
            },
            {
              title: "Thinker · Strategy OS",
              description:
                "Centralize prompts, author voices, and brand playbooks. Sync guidelines directly into every piece of content Igny8 creates.",
              icon: <BoltIcon className="h-6 w-6" />,
              link: { label: "See Thinker", href: "/product#thinker" },
            },
            {
              title: "Automation · Always-on execution",
              description:
                "Orchestrate keywords to ideas, tasks to content, and assets to WordPress in automated cycles—customized to your cadence.",
              icon: <PhotoIcon className="h-6 w-6" />,
              link: { label: "See Automation", href: "/product#automation" },
            },
          ]}
        />
      </section>

      <WorkflowSteps steps={workflowSteps} />

      <section className="max-w-6xl mx-auto px-6 py-24 grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
        <div className="space-y-6">
          <SectionHeading
            eyebrow="Full visibility"
            title="See the entire pipeline—from keyword intake to published content—in one dashboard."
            description="Monitor velocity, quality, and automation coverage across every site. Use filters to dive into sectors, teams, and campaigns. Igny8 keeps leadership confident and operations aligned."
            align="left"
          />
          <ul className="space-y-4 text-sm text-slate-600">
            <li className="flex gap-3">
              <span className="mt-1 size-2 rounded-full bg-[#0693e3] shadow-sm shadow-[#0693e3]/30" />
              Real-time metrics on keyword additions, clusters formed, briefs generated, and content shipped.
            </li>
            <li className="flex gap-3">
              <span className="mt-1 size-2 rounded-full bg-[#0bbf87] shadow-sm shadow-[#0bbf87]/30" />
              Drill into automation logs to understand every AI action, approvals, and handoffs.
            </li>
            <li className="flex gap-3">
              <span className="mt-1 size-2 rounded-full bg-[#ff7a00] shadow-sm shadow-[#ff7a00]/30" />
              Export-ready visuals for leadership updates and client reporting.
            </li>
          </ul>
        </div>
        <div className="relative">
          <div className="rounded-3xl border border-slate-200 bg-white overflow-hidden shadow-lg">
            <img
              src="/marketing/images/workflow-overview.png"
              alt="Workflow overview"
              className="w-full h-full object-cover"
            />
          </div>
          <div className="absolute -bottom-8 -left-8 md:-left-12 bg-white border border-slate-200 rounded-3xl p-6 w-64 shadow-lg">
            <h4 className="text-sm font-semibold text-slate-900">Automation snapshot</h4>
            <p className="text-xs text-slate-600 mt-2">
              87 keywords → 63 briefs → 48 articles → 48 image sets generated this week.
            </p>
          </div>
        </div>
      </section>

      <TestimonialSlider />

      <section className="max-w-6xl mx-auto px-6 py-24 grid grid-cols-1 lg:grid-cols-3 gap-8">
        {[
          {
            title: "Deploy anywhere",
            description:
              "Publish directly to WordPress with Igny8 automations or export polished assets to CMS, docs, or project tools.",
          },
          {
            title: "Collaborate cross-team",
            description:
              "Give SEO, content, and creative teams a shared workspace—complete with approvals, version history, and assignments.",
          },
          {
            title: "Stay on-brand and compliant",
            description:
              "Govern prompts, author voices, and AI usage with centralized policies and audit-ready histories.",
          },
        ].map((item, index) => {
          const gradients = [
            "from-[#0693e3]/10 to-[#0472b8]/5",
            "from-[#0bbf87]/10 to-[#08966b]/5",
            "from-[#5d4ae3]/10 to-[#3a2f94]/5",
          ];
          const borders = [
            "border-[#0693e3]/30",
            "border-[#0bbf87]/30",
            "border-[#5d4ae3]/30",
          ];
          return (
            <div
              key={item.title}
              className={`rounded-3xl border-2 ${borders[index]} bg-gradient-to-br ${gradients[index]} bg-white/50 backdrop-blur-sm p-8 space-y-4 shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all`}
            >
              <h3 className="text-lg font-semibold text-slate-900">{item.title}</h3>
              <p className="text-sm text-slate-600 leading-relaxed">{item.description}</p>
            </div>
          );
        })}
      </section>

      <CTASection
        title="Ready to orchestrate SEO, content, and creative in one AI engine?"
        description="Launch Igny8 in minutes. Start automating your workflow, or book a white-glove onboarding session with our team."
        primaryCta={{ label: "Start free trial", href: "https://app.igny8.com/signup" }}
        secondaryCta={{ label: "Talk to sales", href: "/contact" }}
      />
    </div>
  );
};

export default Home;