import { Link } from "react-router-dom";
import { Button } from "@/components/ui/button";
import { ArrowRight, Sparkles } from "lucide-react";

export function HeroSection() {
  return (
    <section className="relative py-24 md:py-32 overflow-hidden">
      {/* Gradient background blobs */}
      <div
        className="absolute bg-primary/10 w-[600px] h-[600px] rounded-full -top-48 -left-24 blur-[120px] pointer-events-none"
        aria-hidden="true"
      />
      <div
        className="absolute bg-violet-500/10 w-[700px] h-[700px] rounded-full -bottom-48 -right-24 blur-[140px] pointer-events-none"
        aria-hidden="true"
      />

      <div className="container relative z-10 flex flex-col items-center text-center">
        <div className="mb-6 inline-flex items-center gap-2 rounded-full border border-primary/20 bg-primary/5 px-4 py-1.5 text-xs font-bold uppercase tracking-wider text-primary">
          <Sparkles className="h-3 w-3" />
          <img
            src="https://yqdefzjapnzabowsgoyd.supabase.co/storage/v1/object/public/company-assets/media/e4245f9f-dfd2-49db-ab70-c3eb634d2aa1.png"
            width="100"
            alt=""
          />
          <Sparkles className="h-3 w-3" />
        </div>
        <h1 className="max-w-3xl text-5xl font-extrabold tracking-tight text-foreground sm:text-6xl md:text-7xl leading-tight">
          Community <span className="text-primary">Cloud</span>
        </h1>
        <p className="mt-6 max-w-2xl text-lg md:text-2xl text-muted-foreground leading-relaxed font-medium">
          The next generation of association management. Streamlined, secure, and built for modern communities.
        </p>
        <div className="flex flex-col sm:flex-row gap-4 justify-center pt-10">
          <Button
            size="lg"
            className="gap-2 h-14 px-10 rounded-full shadow-xl hover:shadow-2xl hover:-translate-y-0.5 transition-all duration-300 text-lg font-bold"
            asChild
          >
            <Link to="/auth">
              Access Portal
              <ArrowRight className="h-5 w-5" />
            </Link>
          </Button>
        </div>
      </div>
    </section>
  );
}
