'use client'

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

export default function Testimonials() {
  const testimonials = [
    {
      type: 'unternehmen',
      quote: 'Die IT-Analyse von doing-it.de hat uns geholfen, Schwachstellen zu identifizieren, die wir vorher nicht gesehen haben. Die Schulungen waren praxisnah und unsere Mitarbeiter konnten das Gelernte sofort anwenden.',
      author: 'Max Mustermann',
      position: 'IT-Leiter',
      company: 'Musterfirma GmbH',
      image: '👨‍💼',
    },
    {
      type: 'unternehmen',
      quote: 'Durch die maßgeschneiderten Schulungen haben wir interne Experten aufgebaut und konnten unsere externen IT-Kosten um 40% reduzieren. Eine lohnende Investition!',
      author: 'Anna Schmidt',
      position: 'Geschäftsführerin',
      company: 'TechSolutions AG',
      image: '👩‍💼',
    },
    {
      type: 'quereinsteiger',
      quote: 'Ohne Vorkenntnisse habe ich mit doing-it.de meinen Einstieg in die IT geschafft. Das niveaubasierte System hat mich nicht überfordert und die Experten waren immer da, wenn ich Fragen hatte.',
      author: 'Thomas Weber',
      position: 'Junior IT-Support',
      company: 'Digital Solutions',
      image: '👨‍💻',
    },
    {
      type: 'quereinsteiger',
      quote: 'Die Zertifizierung hat mir den Karriere-Boost gegeben, den ich brauchte. Heute arbeite ich als IT-Sicherheitsspezialist – etwas, das vor einem Jahr noch unvorstellbar war.',
      author: 'Lisa Müller',
      position: 'IT-Sicherheitsspezialistin',
      company: 'SecureIT GmbH',
      image: '👩‍💻',
    },
  ]

  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>Kundenstimmen</h1>
            <p className="page-hero-subtitle">
              Was unsere Kunden über uns sagen
            </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>Erfolgreiche Projekte, zufriedene Kunden</h2>
              <p>
                Unsere Kunden sind unser größter Erfolg. Lesen Sie, was Unternehmen und 
                Quereinsteiger über ihre Erfahrungen mit doing-it.de berichten.
              </p>
            </motion.div>

            <div className="features-grid" style={{ gridTemplateColumns: '1fr', gap: '40px', marginTop: '60px' }}>
              {testimonials.map((testimonial, index) => (
                <motion.div
                  key={index}
                  initial={{ opacity: 0, y: 30 }}
                  whileInView={{ opacity: 1, y: 0 }}
                  viewport={{ once: true }}
                  transition={{ duration: 0.6, delay: index * 0.1 }}
                  className="feature-card-large"
                  style={{ textAlign: 'left' }}
                >
                  <div style={{ fontSize: '48px', marginBottom: '20px' }}>
                    {testimonial.image}
                  </div>
                  <p style={{ fontSize: '19px', lineHeight: '1.7', marginBottom: '30px', fontStyle: 'italic' }}>
                    &ldquo;{testimonial.quote}&rdquo;
                  </p>
                  <div>
                    <h3 style={{ marginBottom: '5px' }}>{testimonial.author}</h3>
                    <p style={{ color: 'var(--color-text-secondary)', fontSize: '17px' }}>
                      {testimonial.position} bei {testimonial.company}
                    </p>
                  </div>
                </motion.div>
              ))}
            </div>

            <motion.div
              initial={{ opacity: 0, y: 30 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ duration: 0.6 }}
              className="cta-section"
            >
              <h2>Werden Sie Teil unserer Erfolgsgeschichte</h2>
              <p>Kontaktieren Sie uns und starten Sie Ihre IT-Weiterbildung</p>
              <Link href="/kontakt" className="btn btn-primary">
                Jetzt Kontakt aufnehmen
              </Link>
            </motion.div>
          </div>
        </section>
      </main>
      <Footer />
    </>
  )
}