"use client"
import Image from 'next/image'
import Link from 'next/link'

type Dict = Awaited<ReturnType<typeof import('@/lib/i18n').getDictionary>>

export default function Hero({ dict }: { dict: Dict }) {
  const d = dict.home.hero
  return (
    <>
      <div className="site-bg" aria-hidden="true" />
      <section className="section hero" aria-label="Hero">
        <div className="container hero__grid">
          <div>
            <span className="kicker">Modern Magician &amp; Pickpocket</span>
            <h1 className="h1 hero__title">{d.headline1.title}</h1>
            <p className="hero__lead">{d.headline1.sub}</p>
            <div className="h-stack mt-4">
              <Link href="/contact#booking" className="btn btn--primary">{dict.common.cta.bookNow}</Link>
              <Link href="/showreel" className="btn btn--ghost">{dict.common.cta.watchShowreel}</Link>
            </div>
            <div className="stack mt-6">
              <div className="badge badge--accent">Seen on: SAT.1 • WDR • ZDF • Amazon Prime Video</div>
              <div className="badge">5/5 stars, 12 reviews, 20+ bookings, 100% recommendation; since 12/2022 on Eventpeppers.</div>
              <div className="badge">Location: 42699 Solingen, travel radius &gt;1000 km</div>
            </div>
          </div>
          <div className="hero__media sparkle">
            <Image src="https://images.eventpeppers.com/sites/default/files/imagecache/profile-picture/images/13234/michael-peskov-magier-taschendieb-453624.jpeg" alt="Michael Peskov – Magier & Taschendieb" priority width={1200} height={1200} sizes="(max-width: 960px) 100vw, 50vw" className="cover" />
            <div className="hero__badge">Live reactions • Close-up &amp; Stage</div>
          </div>
        </div>
      </section>
    </>
  )
}