import React from "react";
import SectionHeading from "../components/SectionHeading";
import CTASection from "../components/CTASection";
import SEO from "../components/SEO";
import { getMetaTags } from "../config/metaTags";

const tourSteps = [
  {
    title: "Kick off in the Dashboard",
    description:
      "Get instant visibility into automation coverage, credit usage, and pipeline health with filters for every site and team.",
    image: "tour-dash.png",
  },
  {
    title: "Research in Planner",
    description:
      "Explore the global keyword graph, build clustering blueprints, and score opportunities with AI to set your roadmap.",
    image: "tour-planner.png",
  },
  {
    title: "Generate briefs and drafts in Writer",
    description:
      "Create detailed briefs, assign tasks, and produce on-brand drafts tuned to your tone, format, and competitive insights.",
    image: "tour-writer.png",
  },
  {
    title: "Automate delivery",
    description:
      "Configure recipes that move keywords to ideas, content, and imagery. Publish to WordPress or notify your CMS automatically.",
    image: "tour-automation.png",
  },
];

const Tour: React.FC = () => {
  return (
    <>
      <SEO meta={getMetaTags("tour")} />
      <div className="bg-gradient-to-b from-white via-slate-50/30 to-white text-slate-900">
      <section className="max-w-6xl mx-auto px-6 pt-24 pb-16 space-y-6">
        <SectionHeading
          eyebrow="Guided Tour"
          title="Experience the entire Igny8 journey in minutes."
          description="Walk through the workflow that moves market intelligence into production-ready content. Each step builds toward an automated growth flywheel."
        />
        <div className="rounded-3xl border-2 border-[var(--color-primary)]/30 bg-gradient-to-br from-[var(--color-primary)]/10 via-white to-[var(--color-success)]/5 p-8 shadow-lg">
          <div className="aspect-video rounded-2xl border-2 border-slate-200 bg-gradient-to-br from-slate-50 to-white flex items-center justify-center text-slate-500 text-sm shadow-inner">
            Video walkthrough placeholder (embed demo or Loom)
          </div>
        </div>
      </section>

      <section className="max-w-6xl mx-auto px-6 pb-24 space-y-12">
        {tourSteps.map((step, index) => {
          const colors = [
            { border: "border-[var(--color-primary)]/40", gradient: "from-[var(--color-primary)]/10 to-white", dot: "bg-[var(--color-primary)]" },
            { border: "border-[var(--color-success)]/40", gradient: "from-[var(--color-success)]/10 to-white", dot: "bg-[var(--color-success)]" },
            { border: "border-[var(--color-warning)]/40", gradient: "from-[var(--color-warning)]/10 to-white", dot: "bg-[var(--color-warning)]" },
            { border: "border-[#5d4ae3]/40", gradient: "from-[#5d4ae3]/10 to-white", dot: "bg-[#5d4ae3]" },
          ];
          const colorScheme = colors[index % colors.length];
          return (
            <div
              key={step.title}
              className={`grid grid-cols-1 lg:grid-cols-2 gap-12 items-center rounded-3xl border-2 ${colorScheme.border} bg-gradient-to-br ${colorScheme.gradient} p-8 hover:shadow-xl transition-all`}
            >
              <div className={`space-y-4 ${index % 2 === 1 ? "lg:order-2" : ""}`}>
                <span className="text-xs uppercase tracking-[0.3em] text-slate-500 font-semibold flex items-center gap-2">
                  <span className={`size-1.5 rounded-full ${colorScheme.dot}`}></span>
                  Step {index + 1}
                </span>
                <h3 className="text-2xl font-semibold">{step.title}</h3>
                <p className="text-sm text-slate-600 leading-relaxed">{step.description}</p>
              </div>
              <div className={`rounded-3xl border-2 border-slate-200 bg-gradient-to-br from-slate-50 to-white overflow-hidden shadow-inner ${index % 2 === 1 ? "lg:order-1" : ""}`}>
                <img
                  src={`/marketing/images/${step.image}`}
                  alt={step.title}
                  className="w-full h-full object-cover"
                />
              </div>
            </div>
          );
        })}
      </section>

      <section className="bg-gradient-to-br from-[var(--color-primary)]/10 via-slate-50/70 to-[#0bbf87]/10 border-y border-[#0693e3]/20">
        <div className="max-w-6xl mx-auto px-6 py-24 space-y-10">
          <SectionHeading
            eyebrow="Automation recipes"
            title="Pre-built workflows you can launch on day one."
            description="Activate automation templates or customize them in minutes. Igny8 tracks dependencies, statuses, and handoffs."
          />
          <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6 text-sm text-slate-600">
            {[
              { name: "Keywords → Ideas", time: "Nightly", highlight: "Targets new opportunities", color: "border-[var(--color-primary)]/40", gradient: "from-[var(--color-primary)]/10 to-white" },
              { name: "Ideas → Tasks", time: "Daily", highlight: "Staff writers automatically", color: "border-[var(--color-success)]/40", gradient: "from-[var(--color-success)]/10 to-white" },
              { name: "Tasks → Content", time: "Hourly", highlight: "Generate & queue drafts", color: "border-[var(--color-warning)]/40", gradient: "from-[var(--color-warning)]/10 to-white" },
              { name: "Content → Images", time: "On approval", highlight: "Produce branded visuals", color: "border-[#5d4ae3]/40", gradient: "from-[#5d4ae3]/10 to-white" },
              { name: "Content → WordPress", time: "Manual launch", highlight: "One-click publish", color: "border-[var(--color-primary)]/40", gradient: "from-[var(--color-primary)]/10 to-white" },
              { name: "SERP Win/Loss Alerts", time: "Real-time", highlight: "Trigger optimizations", color: "border-[var(--color-success)]/40", gradient: "from-[var(--color-success)]/10 to-white" },
            ].map((recipe) => (
              <div
                key={recipe.name}
                className={`rounded-3xl border-2 ${recipe.color} bg-gradient-to-br ${recipe.gradient} p-6 space-y-3 hover:shadow-xl transition-all hover:-translate-y-1`}
              >
                <h4 className="text-base font-semibold text-slate-900">{recipe.name}</h4>
                <div className="text-xs uppercase tracking-[0.3em] text-slate-500 font-semibold">
                  {recipe.time}
                </div>
                <p>{recipe.highlight}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <CTASection
        title="See Igny8 in action with a live strategist."
        description="Book a walkthrough and we’ll tailor the tour to your stack, data sources, and growth targets."
        primaryCta={{ label: "Book live tour", href: "/contact" }}
        secondaryCta={{ label: "Start free", href: "https://app.igny8.com/signup" }}
      />
      </div>
    </>
  );
};

export default Tour;

