"use client";

export function NewsletterHero() {
  return (
    <section className="w-full flex flex-col items-center justify-center text-center px-4 py-16">
      <h1 className="text-4xl sm:text-5xl font-bold tracking-tight text-foreground mb-4">
        Join the waitlist.
      </h1>
      <p className="text-lg text-muted-foreground mb-8 max-w-md">
        Get early access to our next-generation design tools before anyone else. No spam, ever.
      </p>
      <form className="flex w-full max-w-sm items-center space-x-2" onSubmit={e => e.preventDefault()}>
        <input 
          type="email" 
          placeholder="Enter your email" 
          className="flex-1 rounded-md border border-border bg-transparent px-3 py-2.5 text-sm focus:outline-none focus:ring-1 focus:ring-foreground" 
        />
        <button type="submit" className="rounded-md bg-foreground text-background px-4 py-2.5 text-sm font-medium hover:bg-[#e0e0e0] transition-colors">
          Subscribe
        </button>
      </form>
      <p className="text-xs text-muted-foreground mt-4">
        Over 5,000 designers already joined.
      </p>
    </section>
  );
}