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 roadmapItems = [
  {
    title: "One-click workflows",
    description: "Trigger keywords → ideas → drafts directly inside Planner and Writer with new automation toggles.",
  },
  {
    title: "Schedule intelligence",
    description: "Plan automation cycles by day and time with credit-aware throttling and fallback rules.",
  },
  {
    title: "AI quality scoring",
    description: "Monitor readability, compliance, and SERP alignment across AI-generated content with automated fixes.",
  },
];

const Waitlist: React.FC = () => {
  return (
    <>
      <SEO meta={getMetaTags("waitlist")} />
      <div className="bg-gradient-to-b from-white via-slate-50/30 to-white text-slate-900">
      <section className="max-w-4xl mx-auto px-6 pt-24 pb-12">
        <SectionHeading
          eyebrow="Roadmap preview"
          title="Get early access to upcoming Igny8 releases."
          description="We’re releasing a wave of automation upgrades and AI scoring tools. Join the waitlist to test features before they ship."
        />
      </section>

      <section className="max-w-5xl mx-auto px-6 pb-24 grid grid-cols-1 lg:grid-cols-2 gap-12">
        <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-10 space-y-6 shadow-lg">
          <h3 className="text-lg font-semibold text-slate-900 flex items-center gap-2">
            <span className="size-2 rounded-full bg-[var(--color-primary)]"></span>
            Join the waitlist
          </h3>
          <p className="text-sm text-slate-600">
            Share your details and we'll invite you to beta cohorts with onboarding resources and direct feedback loops to our product team.
          </p>
          <form className="space-y-4">
            <input
              type="text"
              placeholder="Name"
              className="w-full rounded-xl border-2 border-slate-200 bg-white px-4 py-3 text-sm text-slate-900 placeholder:text-slate-500 focus:outline-none focus:border-[var(--color-primary)] focus:ring-2 focus:ring-[var(--color-primary)]/20"
            />
            <input
              type="email"
              placeholder="Work email"
              className="w-full rounded-xl border-2 border-slate-200 bg-white px-4 py-3 text-sm text-slate-900 placeholder:text-slate-500 focus:outline-none focus:border-[var(--color-primary)] focus:ring-2 focus:ring-[var(--color-primary)]/20"
            />
            <textarea
              rows={4}
              placeholder="Tell us about your current workflow and why you're excited."
              className="w-full rounded-xl border-2 border-slate-200 bg-white px-4 py-3 text-sm text-slate-900 placeholder:text-slate-500 focus:outline-none focus:border-[var(--color-primary)] focus:ring-2 focus:ring-[var(--color-primary)]/20 resize-none"
            />
            <button
              type="submit"
              className="inline-flex items-center justify-center rounded-full bg-gradient-to-r from-[#0693e3] to-[#0472b8] hover:from-[#0472b8] hover:to-[#0693e3] text-white px-6 py-3 text-sm font-semibold shadow-lg shadow-[#0693e3]/30 transition-all w-full"
            >
              Join waitlist
            </button>
          </form>
        </div>

        <div className="space-y-6">
          <div className="rounded-3xl border-2 border-[#0bbf87]/30 bg-gradient-to-br from-[#0bbf87]/10 to-white p-8 space-y-4">
            <h4 className="text-lg font-semibold text-slate-900 flex items-center gap-2">
              <span className="size-2 rounded-full bg-[#0bbf87]"></span>
              What's coming
            </h4>
            <ul className="space-y-3 text-sm text-slate-600">
              {roadmapItems.map((item, idx) => {
                const colors = ["bg-[var(--color-primary)]", "bg-[#0bbf87]", "bg-[#ff7a00]"];
                return (
                  <li key={item.title} className="flex gap-3">
                    <span className={`mt-1 size-1.5 rounded-full ${colors[idx % colors.length]} shadow-sm`} />
                    <div>
                      <div className="font-semibold text-slate-900">{item.title}</div>
                      <div>{item.description}</div>
                    </div>
                  </li>
                );
              })}
            </ul>
          </div>
          <div className="rounded-3xl border-2 border-[#ff7a00]/30 bg-gradient-to-br from-[#ff7a00]/10 to-white p-8 text-sm text-slate-600 space-y-3">
            <h4 className="text-lg font-semibold text-slate-900 flex items-center gap-2">
              <span className="size-2 rounded-full bg-[#ff7a00]"></span>
              How the beta works
            </h4>
            <p>We onboard new features to the waitlist in weekly waves. You'll receive playbooks, sample workflows, and a feedback channel with our product team.</p>
            <p>Participants also get extended credits to experiment with automation scenarios.</p>
          </div>
        </div>
      </section>

      <CTASection
        title="Prefer to explore now?"
        description="Start your Igny8 trial and you’ll get notified the moment new automation releases are ready."
        primaryCta={{ label: "Start free", href: "https://app.igny8.com/signup" }}
        secondaryCta={{ label: "Contact us", href: "/contact" }}
      />
      </div>
    </>
  );
};

export default Waitlist;

