'use client'

import { motion } from 'framer-motion'
import Navigation from '@/components/Navigation'
import Footer from '@/components/Footer'

export default function Kontakt() {
  return (
    <>
      <Navigation />
      <main>
        <section className="page-hero">
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.8 }}
            className="container"
          >
            <h1>Kontakt</h1>
            <p className="page-hero-subtitle">
              Wir freuen uns auf Ihre Nachricht
            </p>
          </motion.div>
        </section>

        <section className="page-content">
          <div className="container">
            <motion.div
              initial={{ opacity: 0, y: 30 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ duration: 0.6 }}
              className="content-block"
            >
              <h2>Kontaktieren Sie uns</h2>
              <p style={{ marginBottom: '40px' }}>
                Haben Sie Fragen oder möchten Sie mehr über unsere Angebote erfahren? Schreiben Sie uns eine E-Mail oder buchen Sie direkt einen Termin.
              </p>
              
              <a 
                href="mailto:info@doing-it.de" 
                className="btn btn-primary btn-large"
                style={{ 
                  display: 'inline-block',
                  marginBottom: '40px',
                  fontSize: '20px',
                  padding: '20px 40px'
                }}
              >
                E-Mail senden: info@doing-it.de
              </a>
            </motion.div>

            {/* Cal.com Widget */}
            <motion.div
              initial={{ opacity: 0, y: 30 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ duration: 0.6, delay: 0.2 }}
              className="cal-widget"
            >
              <div 
                style={{
                  width: '100%',
                  height: '700px',
                  border: '1px solid rgba(255, 255, 255, 0.1)',
                  borderRadius: '20px',
                  overflow: 'hidden',
                  background: 'var(--color-card)'
                }}
              >
                <iframe
                  src="https://cal.com/embed/doing-it-de"
                  style={{
                    width: '100%',
                    height: '100%',
                    border: 'none',
                    borderRadius: '20px'
                  }}
                  title="Cal.com Booking"
                />
              </div>
            </motion.div>
          </div>
        </section>
      </main>
      <Footer />
    </>
  )
}