// app/routes/academy.tsx
import { useEffect } from "react";
import { gsap } from "gsap";

export default function Academy() {
  useEffect(() => {
    gsap.from(".enroll-card", { y: 120, opacity: 0, duration: 1.6, ease: "power4.out" });
  }, []);

  return (
    <div className="min-h-screen bg-zinc-950 text-white">
      {/* same nav as above */}
      <nav className="..."> {/* copy nav from roadmap */} </nav>

      <section className="pt-40 pb-32 px-6 max-w-4xl mx-auto text-center">
        <div className="text-violet-400 tracking-[4px] text-sm">8-WEEK COHORT • STARTS MARCH 3 2026</div>
        <h1 className="text-7xl md:text-8xl font-black tracking-tighter leading-none mt-6">Master Directed Intelligence</h1>
        <p className="text-3xl text-zinc-400 mt-10">Build your own GSO system. Live labs. Lifetime tools.</p>

        <div className="enroll-card mt-20 bg-zinc-900 border border-zinc-700 rounded-3xl p-16 max-w-lg mx-auto">
          <div className="text-7xl font-black">$4,800</div>
          <div className="text-zinc-400 mt-2">or 4 payments of $1,300</div>
          <ul className="mt-12 space-y-6 text-left text-lg">
            <li>✓ Full GSO Roadmap Blueprint</li>
            <li>✓ Weekly live schema & entity workshops</li>
            <li>✓ Private Notion workspace + Discord</li>
            <li>✓ Lifetime access to all Swell tools</li>
            <li>✓ 1:1 strategy session with the team</li>
          </ul>
          <a href="https://calendly.com/swellmarketing" className="mt-16 block w-full py-7 bg-white text-black rounded-2xl text-2xl font-semibold">Enroll Agent Now →</a>
          <p className="text-xs text-zinc-500 mt-8">Only 12 spots per cohort</p>
        </div>
      </section>
    </div>
  );
}