import { AutocompleteSearch } from '@/components/search/AutocompleteSearch';

export function SimpleHeroSearch() {
  return (
    <section className="relative py-8 bg-gradient-to-br from-primary/10 via-secondary/5 to-accent/10">
      <div className="container mx-auto px-4 text-center">
        <div className="max-w-4xl mx-auto space-y-8">
          <h1 className="text-5xl md:text-6xl font-bold leading-tight">
            <span className="bg-gradient-to-r from-primary via-secondary to-accent bg-clip-text text-transparent text-7xl">
              ThrillWiki
            </span>
          </h1>
          
          <p className="text-xl text-muted-foreground max-w-2xl mx-auto">
            The ultimate theme park database. Discover parks, track rides, and connect with enthusiasts.
          </p>
          
          {/* Modern Autocomplete Search */}
          <div className="max-w-2xl mx-auto">
            <AutocompleteSearch
              placeholder="Search parks, rides, or locations..."
              variant="hero"
              types={['park', 'ride', 'company']}
              limit={6}
              showRecentSearches={true}
            />
          </div>
        </div>
      </div>
    </section>
  );
}