import type { Metadata } from 'next'
import Image from 'next/image'
import Link from 'next/link'

export const metadata: Metadata = {
  title: 'Kontakt – Michael Peskov | Zauberer Solingen & NRW – Magier buchen für Hochzeit & Firmenfeier',
  description:
    'Planen Sie Ihr Event mit Michael Peskov: Close-up Magie, Taschendieb‑Show, Walking Act & Bühnenzauber. 5/5 Sterne (12), 100% Empfehlung. Solingen, Düsseldorf, Köln, NRW – europaweit (>1000 km). Antwort innerhalb von 24h.'
}

export default function ContactPage() {
  return (
    <section className="section">
      <div className="container">
        {/* 1. Headline with main keyword */}
        <header className="mb-6">
          <h1 className="h1">Zauberer Solingen – Kontakt & Angebot</h1>
          {/* 2. Intro paragraph (USP + 24h response, natural keywords) */}
          <p>
            Magier buchen leicht gemacht: Innerhalb von 24 Stunden erhalten Sie ein maßgeschneidertes Konzept –
            unverbindlich und passgenau für Ihren Anlass. Ob <strong>Close‑up Magie</strong> als <strong>Walking Act</strong>,
            interaktiver <strong>Bühnenzauber</strong> oder eine verblüffende <strong>Taschendieb‑Show</strong> –
            Michael Peskov ist Ihr <strong>Zauberer in Solingen</strong> und <strong>Zauberkünstler NRW</strong> für
            <strong> Firmenfeier</strong>, <strong>Hochzeit</strong> und private Feiern. Profitieren Sie von moderner Präsentation,
            klarer Kommunikation und einer reibungslosen Organisation – damit Ihre Gäste noch lange über Ihr Event sprechen.
          </p>
        </header>

        <div className="grid grid--2">
          {/* 3. Booking form section (conversational labels) */}
          <div className="card" id="booking">
            <h2 className="h2">Anfrage – in 60 Sekunden</h2>
            <form className="bookingForm" style={{ marginTop: 16 }}>
              <div className="grid" style={{ display:'grid', gridTemplateColumns:'repeat(2, minmax(0,1fr))', gap:'16px' }}>
                <label className="label">Wann findet Ihr Event statt?
                  <input className="input" placeholder="TT.MM.JJJJ" type="date" required />
                </label>
                <label className="label">Wo findet es statt?
                  <input className="input" placeholder="Stadt / Location" required />
                </label>
                <label className="label">Wie viele Gäste werden erwartet?
                  <input className="input" type="number" min={1} placeholder="z. B. 120" required />
                </label>
                <label className="label">Anlass
                  <select className="select" defaultValue="Firmenfeier">
                    <option>Firmenfeier</option>
                    <option>Hochzeit</option>
                    <option>Geburtstag</option>
                    <option>Gala</option>
                    <option>Messe</option>
                    <option>Sonstiges</option>
                  </select>
                </label>
              </div>
              <label className="label" style={{ display:'block', marginTop: 12 }}>Erzählen Sie kurz Details (Timing, Location, Wünsche)
                <textarea className="textarea" placeholder="z. B. Dinner 19:00, Outdoor‑Bühne, zweisprachige Moderation" />
              </label>
              {/* 4. Outcome-driven CTA buttons */}
              <div className="h-stack mt-4">
                <button className="btn btn--primary" type="submit">Termin prüfen</button>
                <button className="btn btn--ghost" type="button">Event‑Plan anfordern</button>
                <button className="btn btn--ghost" type="button">Datum reservieren</button>
              </div>
              {/* 7. Privacy reassurance microcopy */}
              <p className="muted mt-2">Kein Spam – Ihre Angaben nutzen wir ausschließlich zur Planung Ihres Events.</p>

              {/* 5. Alternative contact options (clickable) */}
              <div className="h-stack mt-6" style={{ flexWrap:'wrap' as const }}>
                <a className="btn btn--ghost" href="tel:+491234567890" aria-label="Anrufen">📞 Anruf: +49 XXX XXX XXXX</a>
                <a className="btn btn--ghost" href="https://wa.me/491234567890" target="_blank" rel="noopener">💬 WhatsApp: Jetzt chatten</a>
                <a className="btn btn--ghost" href="mailto:booking@michaelpeskov.de">📧 E‑Mail: booking@michaelpeskov.de</a>
              </div>
            </form>
          </div>

          {/* 6. Trust & speed elements + photo */}
          <aside>
            <div className="sparkle ratio-4x5" style={{ marginBottom: 16 }}>
              <Image
                src="https://images.eventpeppers.com/sites/default/files/imagecache/lightbox/images/13234/michael-peskov-magier-taschendieb-450252.jpeg"
                alt="Michael Peskov – Close‑Up Magie mit Gästen"
                width={1200}
                height={1500}
                className="cover"
                sizes="(max-width: 960px) 100vw, 50vw"
              />
            </div>
            <ul className="stack" style={{ listStyle:'none', padding:0, margin:0 }}>
              <li className="badge">✅ Antwort innerhalb von 24 Stunden</li>
              <li className="badge">📍 Solingen (NRW) • europaweit buchbar (&gt;1000 km Aktionsradius)</li>
              <li className="badge">⭐ 5/5 Sterne (12), 100% Empfehlung – Eventpeppers</li>
              <li className="badge badge--accent">Verfügbar in: DE, AT, CH, EU</li>
            </ul>
          </aside>
        </div>

        {/* 6. Service area list for local SEO */}
        <section className="mt-6">
          <h2 className="h3">Einsatzgebiete & lokale Keywords</h2>
          <p>
            Michael ist als <strong>Magier NRW</strong> in <strong>Solingen</strong>, <strong>Zauberer Düsseldorf</strong>,
            <strong> Zauberer Köln</strong> und ganz NRW unterwegs – ebenso deutschland‑ und europaweit. Ideal für
            <strong> Zauberer Firmenfeier</strong>, <strong>Zauberer für Hochzeit</strong>, private Feiern und
            <strong> Event Entertainment</strong>. Buchen Sie moderne <strong>Close‑up Magie</strong>,
            eine verblüffende <strong>Taschendieb‑Show</strong> oder interaktiven <strong>Bühnenzauber</strong> –
            auf Wunsch als flexibler <strong>Walking Act</strong>.
          </p>
          <ul className="grid grid--3 mt-4" style={{ listStyle:'none', padding:0, margin:0 }}>
            <li className="badge">Solingen</li>
            <li className="badge">Düsseldorf</li>
            <li className="badge">Köln</li>
            <li className="badge">Wuppertal</li>
            <li className="badge">Essen</li>
            <li className="badge">Dortmund</li>
            <li className="badge">Bonn</li>
            <li className="badge">Bochum</li>
            <li className="badge">NRW & Ruhrgebiet</li>
          </ul>
        </section>

        {/* 8. Closing CTA with internal links */}
        <section className="cta mt-6">
          <div>
            <h2 className="h2">Jetzt Verfügbarkeit prüfen – sichern Sie Ihren Wunschtermin</h2>
            <p>
              Buchen Sie <strong>Close‑Up Magie</strong>, <strong>Walking Act</strong>, <strong>Bühnenzauber</strong> oder die
              <strong> Taschendieb‑Show</strong> von Michael Peskov. Schauen Sie sich auch die{' '}
              <Link href="/services">Leistungen</Link> und das <Link href="/showreel">Showreel</Link> an.
            </p>
          </div>
          <div className="h-stack">
            <a className="btn btn--primary" href="#booking">Termin anfragen</a>
            <Link className="btn btn--ghost" href="/services">Zu den Leistungen</Link>
          </div>
        </section>

        <p className="muted mt-2"><em>P.S.</em> Beliebte Termine sind schnell vergeben – frühe Anfrage erhöht die Chance auf Ihren Wunschslot.</p>
      </div>
    </section>
  )
}