src/components/HeroSection.tsx

export default function HeroSection() {
  return (
    <section className="relative overflow-hidden bg-hero-gradient">
      <div className="absolute inset-0 opacity-[0.03]" style={{backgroundImage:'url("data:image/svg+xml,%3Csvg width=\'60\' height=\'60\' viewBox=\'0 0 60 60\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cg fill=\'none\' fill-rule=\'evenodd\'%3E%3Cg fill=\'%23C4A265\' fill-opacity=\'1\'%3E%3Cpath d=\'M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z\'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")'}} />
      <div className="wedding-section relative py-24 md:py-32 lg:py-40">
        <div className="max-w-3xl mx-auto text-center">
          <p className="text-gold-400 font-heading text-sm md:text-base tracking-[0.2em] uppercase mb-4">
            Your journey begins here
          </p>
          <h1 className="font-heading text-4xl md:text-5xl lg:text-6xl font-semibold text-charcoal-700 leading-tight mb-6 text-balance">
            Plan the wedding<br />
            <span className="text-gold-400">you&apos;ve always imagined</span>
          </h1>
          <p className="text-charcoal-400 text-lg md:text-xl leading-relaxed mb-10 max-w-2xl mx-auto">
            Discover curated vendors, manage your budget, sign contracts with confidence — all in one elegant place.
          </p>
          <div className="flex flex-col sm:flex-row items-center justify-center gap-4">
            <a href="/search" className="wedding-btn-primary text-base px-8 py-4">
              Explore Vendors
            </a>
            <a href="/planner" className="wedding-btn-outline text-base px-8 py-4">
              Start Planning
            </a>
          </div>
        </div>
      </div>
    </section>
  )
}