export default function SisuSyndicate() {
  return (
    <div className="min-h-screen bg-black text-white font-sans">
      {/* Hero Section */}
      <section className="flex flex-col items-center justify-center text-center px-6 py-32 bg-gradient-to-b from-black via-zinc-900 to-black">
        <h1 className="text-5xl md:text-7xl font-bold tracking-tight">
          SISU SYNDICATE
        </h1>
        <p className="mt-6 text-xl md:text-2xl text-zinc-300 max-w-2xl">
          Built on Sisu.
        </p>
        <p className="mt-4 text-zinc-400 max-w-xl">
          A creator network for those who choose growth over comfort and impact over attention.
        </p>
        <div className="mt-10 flex gap-4">
          <button className="px-6 py-3 bg-purple-600 hover:bg-purple-500 transition rounded-2xl shadow-lg">
            Apply to Join
          </button>
          <button className="px-6 py-3 border border-zinc-600 hover:border-zinc-400 transition rounded-2xl">
            Learn More
          </button>
        </div>
      </section>

      {/* About Section */}
         <section id="about" className="px-6 py-24 max-w-5xl mx-auto grid md:grid-cols-2 gap-16">
        <div>
          <h2 className="text-3xl font-semibold">What We Are</h2>
          <p className="mt-6 text-zinc-400 leading-relaxed">
            Sisu Syndicate is a long-term creator network focused on discipline, strategy, and sustainable growth. 
            We don’t chase trends — we build careers.
          </p>
        </div>
        <div>
          <h2 className="text-3xl font-semibold">Who We Work With</h2>
          <p className="mt-6 text-zinc-400 leading-relaxed">
            Ambitious creators who are serious about leveling up. 
            If you are consistent, coachable, and ready to build something that lasts, you belong here.
          </p>
        </div>
        <section id="about" className="px-6 py-24 max-w-5xl mx-auto grid md:grid-cols-2 gap-16">
      </section>

      {/* Values Section */}
      <section className="bg-zinc-900 px-6 py-24">
        <div className="max-w-6xl mx-auto grid md:grid-cols-3 gap-12 text-center">
          <div className="p-8 bg-black rounded-2xl shadow-lg">
            <h3 className="text-2xl font-semibold">Discipline</h3>
            <p className="mt-4 text-zinc-400">Consistency beats hype. Every time.</p>
          </div>
          <div className="p-8 bg-black rounded-2xl shadow-lg">
            <h3 className="text-2xl font-semibold">Strategy</h3>
            <p className="mt-4 text-zinc-400">We grow with intention, not randomness.</p>
          </div>
          <div className="p-8 bg-black rounded-2xl shadow-lg">
            <h3 className="text-2xl font-semibold">Longevity</h3>
            <p className="mt-4 text-zinc-400">We build creators who last.</p>
          </div>
        </div>
      </section>

      {/* CTA Section */}
      <section className="px-6 py-24 text-center">
        <h2 className="text-4xl font-bold">Ready to Build?</h2>
        <p className="mt-6 text-zinc-400 max-w-xl mx-auto">
          This is not for everyone. But if you’re ready to grow with structure, support, and ambition — we’re ready for you.
        </p>
        <button className="mt-10 px-8 py-4 bg-purple-600 hover:bg-purple-500 transition rounded-2xl shadow-xl text-lg">
          Join Sisu Syndicate
        </button>
        <a
  href="#apply"
  className="px-6 py-3 bg-purple-600 hover:bg-purple-500 transition rounded-2xl shadow-lg"
>
  Apply to Join
</a>

<a
  href="#about"
  className="px-6 py-3 border border-zinc-600 hover:border-zinc-400 transition rounded-2xl"
>
  Learn More
</a>
      </section>

      {/* Footer */}
      <footer className="border-t border-zinc-800 px-6 py-10 text-center text-zinc-500">
        © {new Date().getFullYear()} Sisu Syndicate. All rights reserved.
      </footer>
    </div>
  );
}