import Link from "next/link";
import HomeHero from "./components/HomeHero";
import ParallaxImage from "./components/ParallaxImage";
import ScrollReveal from "./components/ScrollReveal";
import { featuredResearch } from "../lib/research";

export default function Home() {
  return (
    <div className="w-full">
      <HomeHero />

      <div className="mx-auto w-full max-w-7xl px-4 pb-12 sm:px-6">
        <ScrollReveal>
          <section className="mb-10 rounded-3xl border border-slate-200 bg-white p-6 shadow-sm md:p-8">
            <div className="grid gap-6 lg:grid-cols-[1fr_0.9fr] lg:items-center">
              <div>
                <p className="text-sm uppercase tracking-[0.35em] text-blue-600">Why creators love it</p>
                <h2 className="mt-3 font-serif text-3xl font-bold text-slate-900">
                  Flexible pricing, strong visuals, and special offers that buyers actually notice.
                </h2>
                <p className="mt-4 text-slate-600">
                  Creators set their own paper rates, publish premium cover art, and launch limited-time discounts
                  while buyers browse a polished marketplace designed for mobile and desktop.
                </p>
              </div>
              <div className="rounded-3xl bg-slate-900 p-6 text-white shadow-sm">
                <p className="text-sm uppercase tracking-[0.35em] text-blue-200">Creator plan</p>
                <p className="mt-3 font-serif text-3xl font-bold">$10/month</p>
                <p className="mt-2 text-slate-200">
                  Unlock the full seller toolkit and keep pricing flexible for each paper you publish.
                </p>
              </div>
            </div>
          </section>
        </ScrollReveal>

        <ScrollReveal delay={100}>
          <section className="mb-10 rounded-3xl border border-slate-200 bg-white p-6 shadow-sm md:p-8">
            <div className="grid gap-6 lg:grid-cols-[1fr_0.95fr] lg:items-center">
              <div>
                <p className="text-sm uppercase tracking-[0.35em] text-blue-600">Newsletter</p>
                <h2 className="mt-3 font-serif text-3xl font-bold text-slate-900">
                  Get weekly research drops and exclusive discounts.
                </h2>
                <p className="mt-4 text-slate-600">
                  Subscribe to receive curated updates from the marketplace, creator launches, and special offer alerts
                  for new research.
                </p>
              </div>
              <Link
                href="/newsletter"
                className="inline-flex w-fit items-center justify-center rounded-2xl bg-blue-600 px-5 py-3 text-sm font-semibold text-white hover:bg-blue-700"
              >
                Join the newsletter
              </Link>
            </div>
          </section>
        </ScrollReveal>

        <ScrollReveal delay={150}>
          <section>
            <div className="mb-8 flex items-end justify-between">
              <h2 className="font-serif text-3xl font-bold text-slate-900">Latest Research</h2>
              <Link href="/library" className="text-sm font-medium text-blue-600 hover:underline">
                View all papers &rarr;
              </Link>
            </div>

            <div className="grid gap-6 md:grid-cols-2 xl:grid-cols-3">
              {featuredResearch.map((item, index) => (
                <ScrollReveal key={item.id} delay={index * 80}>
                  <article className="overflow-hidden rounded-3xl border border-slate-200 bg-white shadow-sm transition duration-200 hover:-translate-y-1 hover:shadow-xl">
                    <ParallaxImage src={item.imageUrl} alt={item.title} speed={0.2 + index * 0.05} />
                    <div className="p-6">
                      <p className="text-sm uppercase tracking-[0.25em] text-blue-600">{item.category}</p>
                      <p className="mt-3 text-sm text-slate-500">{item.date}</p>
                      <h3 className="mt-4 font-serif text-2xl font-semibold text-slate-900">{item.title}</h3>
                      <p className="mt-4 text-slate-600">{item.description}</p>
                      <div className="mt-6 flex items-center justify-between border-t border-slate-100 pt-4 text-sm">
                        <span className="font-semibold text-slate-900">{item.price}</span>
                        <Link href="/library" className="text-blue-600 hover:underline">
                          Read more
                        </Link>
                      </div>
                    </div>
                  </article>
                </ScrollReveal>
              ))}
            </div>
          </section>
        </ScrollReveal>
      </div>
    </div>
  );
}