import React from "react";
import SectionHeading from "../components/SectionHeading";
import CTASection from "../components/CTASection";

const articles = [
  {
    title: "AI + SEO: Building topical authority at scale",
    description:
      "How Igny8 customers map thousands of keywords into authoritative clusters that rank faster.",
    date: "October 2025",
  },
  {
    title: "Automating the content supply chain",
    description:
      "A playbook for connecting keyword research, briefs, writing, and imagery without human bottlenecks.",
    date: "September 2025",
  },
  {
    title: "Measuring AI-generated content quality",
    description:
      "Frameworks for tracking performance, editorial standards, and compliance across large AI programs.",
    date: "August 2025",
  },
];

const webinars = [
  {
    title: "Building an automation-first content ops team",
    description: "Live strategy session with Igny8 specialists and customer panel.",
    date: "November 21, 2025",
  },
  {
    title: "From keywords to conversions: dashboards that prove ROI",
    description: "Hands-on walkthrough of Igny8 dashboards and reporting exports.",
    date: "On-demand replay",
  },
];

const Resources: React.FC = () => {
  return (
    <div className="bg-white text-slate-900">
      <section className="max-w-6xl mx-auto px-6 pt-24 pb-16 space-y-6">
        <SectionHeading
          eyebrow="Resources"
          title="Insights, playbooks, and events for AI-led growth teams."
          description="Stay ahead of the curve with strategic content, live sessions, and practical guides built by the Igny8 team."
        />
      </section>

      <section className="max-w-6xl mx-auto px-6 pb-24 grid grid-cols-1 md:grid-cols-3 gap-6">
        {articles.map((article) => (
          <article
            key={article.title}
            className="rounded-3xl border border-slate-200 bg-white p-8 flex flex-col gap-6"
          >
            <span className="text-xs uppercase tracking-[0.3em] text-slate-500">
              {article.date}
            </span>
            <h3 className="text-xl font-semibold text-slate-900">{article.title}</h3>
            <p className="text-sm text-slate-600 leading-relaxed">{article.description}</p>
            <div className="rounded-2xl border border-slate-200 bg-slate-100 h-40 flex items-center justify-center text-xs text-slate-500">
              Article cover placeholder (800×600) → /marketing/images/resource-hero.png
            </div>
          </article>
        ))}
      </section>

      <section className="bg-slate-50/70 border-y border-slate-200">
        <div className="max-w-6xl mx-auto px-6 py-24 grid grid-cols-1 md:grid-cols-2 gap-8">
          {webinars.map((webinar) => (
            <div
              key={webinar.title}
              className="rounded-3xl border border-slate-200 bg-white p-8 flex flex-col gap-4"
            >
              <span className="text-xs uppercase tracking-[0.3em] text-slate-500">
                {webinar.date}
              </span>
              <h3 className="text-lg font-semibold text-slate-900">{webinar.title}</h3>
              <p className="text-sm text-slate-600">{webinar.description}</p>
              <button className="inline-flex items-center justify-center rounded-full bg-brand-500 hover:bg-brand-400 px-5 py-2 text-sm font-semibold">
                Save my seat
              </button>
            </div>
          ))}
        </div>
      </section>

      <section className="max-w-6xl mx-auto px-6 py-24 grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
        <div className="space-y-4">
          <SectionHeading
            eyebrow="Help center"
            title="Get instant answers and product walkthroughs."
            description="Dive into documentation, watch quickstart videos, or join live onboarding cohorts."
            align="left"
          />
          <ul className="space-y-3 text-sm text-slate-600">
            <li className="flex gap-3">
              <span className="mt-1 size-1.5 rounded-full bg-brand-500" />
              Help Center → `/help`
            </li>
            <li className="flex gap-3">
              <span className="mt-1 size-1.5 rounded-full bg-brand-500" />
              Documentation → `/help#docs`
            </li>
            <li className="flex gap-3">
              <span className="mt-1 size-1.5 rounded-full bg-brand-500" />
              API Reference → `/partners#api`
            </li>
          </ul>
        </div>
        <div className="rounded-3xl border border-slate-200 bg-white p-10 space-y-6">
          <h3 className="text-2xl font-semibold text-slate-900">Join the Igny8 newsletter</h3>
          <p className="text-sm text-slate-600">
            Monthly insights on AI, SEO, and automation. No fluff—just tactical guidance and event invites.
          </p>
          <form className="flex flex-col sm:flex-row gap-3">
            <input
              type="email"
              placeholder="you@company.com"
              className="flex-1 rounded-full border border-slate-200 bg-slate-50/60 px-4 py-3 text-sm text-slate-900 placeholder:text-slate-500 focus:outline-none focus:border-brand-400"
            />
            <button
              type="submit"
              className="inline-flex items-center justify-center rounded-full bg-brand-500 hover:bg-brand-400 px-6 py-3 text-sm font-semibold"
            >
              Subscribe
            </button>
          </form>
        </div>
      </section>

      <CTASection
        title="Want deeper access? Join our monthly live strategy lab."
        description="Reserve your seat for upcoming webinars and office hours to learn how teams automate their growth pipeline with Igny8."
        primaryCta={{ label: "Reserve seat", href: "/contact" }}
        secondaryCta={{ label: "Browse articles", href: "/resources" }}
      />
    </div>
  );
};

export default Resources;