import React from "react";
import SectionHeading from "../components/SectionHeading";
import CTASection from "../components/CTASection";
import SEO from "../components/SEO";
import { getMetaTags } from "../config/metaTags";
import InputField from "../../components/form/input/InputField";
import TextArea from "../../components/form/input/TextArea";
import Button from "../../components/ui/button/Button";

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-gray-50/30 to-white text-gray-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-gray-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-gray-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">
            <InputField
              type="text"
              placeholder="Name"
            />
            <InputField
              type="email"
              placeholder="Work email"
            />
            <TextArea
              rows={4}
              placeholder="Tell us about your current workflow and why you're excited."
            />
            <Button
              type="submit"
              variant="primary"
              className="w-full"
            >
              Join waitlist
            </Button>
          </form>
        </div>

        <div className="space-y-6">
          <div className="rounded-3xl border-2 border-[var(--color-success)]/30 bg-gradient-to-br from-[var(--color-success)]/10 to-white p-8 space-y-4">
            <h4 className="text-lg font-semibold text-gray-900 flex items-center gap-2">
              <span className="size-2 rounded-full bg-[var(--color-success)]"></span>
              What's coming
            </h4>
            <ul className="space-y-3 text-sm text-gray-600">
              {roadmapItems.map((item, idx) => {
                const colors = ["bg-[var(--color-primary)]", "bg-[var(--color-success)]", "bg-[var(--color-warning)]"];
                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-gray-900">{item.title}</div>
                      <div>{item.description}</div>
                    </div>
                  </li>
                );
              })}
            </ul>
          </div>
          <div className="rounded-3xl border-2 border-[var(--color-warning)]/30 bg-gradient-to-br from-[var(--color-warning)]/10 to-white p-8 text-sm text-gray-600 space-y-3">
            <h4 className="text-lg font-semibold text-gray-900 flex items-center gap-2">
              <span className="size-2 rounded-full bg-[var(--color-warning)]"></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;