'use client'

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

export default function Wiki() {
  const [showFullPage, setShowFullPage] = useState(true)
  
  // Wiki URL über den Next.js API Proxy
  const wikiUrl = '/api/wiki'

  if (showFullPage) {
    // Vollständige Wiki-Seite als iframe
    return (
      <>
        <Navigation />
        <main style={{ paddingTop: '52px', height: 'calc(100vh - 52px)', display: 'flex', flexDirection: 'column' }}>
          <div style={{ 
            position: 'fixed', 
            top: '52px', 
            left: 0, 
            right: 0, 
            background: 'rgba(0, 0, 0, 0.9)', 
            padding: '10px 20px', 
            display: 'flex', 
            justifyContent: 'space-between', 
            alignItems: 'center',
            zIndex: 999,
            borderBottom: '1px solid rgba(255, 255, 255, 0.1)'
          }}>
            <h2 style={{ fontSize: '18px', fontWeight: '600', margin: 0 }}>doing-it Wiki</h2>
            <button
              onClick={() => setShowFullPage(false)}
              className="btn btn-secondary"
              style={{ padding: '8px 20px', fontSize: '14px' }}
            >
              Zur Übersicht
            </button>
          </div>
          <iframe
            src={wikiUrl}
            style={{
              width: '100%',
              height: '100%',
              border: 'none',
              marginTop: '50px',
              background: '#fff'
            }}
            title="doing-it Wiki"
          />
        </main>
      </>
    )
  }

  // Übersichtsseite mit Option zum Öffnen des Wikis
  return (
    <>
      <Navigation />
      <main>
        <section className="hero">
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.8 }}
            className="hero-content"
          >
            <h1 className="hero-title">Wiki</h1>
            <p className="hero-subtitle">
              Unser Wissensbereich mit nützlichen Informationen<br />
              rund um IT-Weiterbildung und Schulungen
            </p>
            <div className="hero-buttons" style={{ marginTop: '40px' }}>
              <button 
                onClick={() => setShowFullPage(true)}
                className="btn btn-primary"
                style={{ cursor: 'pointer' }}
              >
                Wiki öffnen
              </button>
              <a 
                href={wikiUrl} 
                target="_blank" 
                rel="noopener noreferrer"
                className="btn btn-secondary"
              >
                In neuem Tab öffnen
              </a>
            </div>
          </motion.div>
        </section>

        <section className="features" style={{ paddingTop: '80px' }}>
          <div className="container">
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.8, delay: 0.2 }}
            >
              <h2 style={{ fontSize: '48px', fontWeight: '600', marginBottom: '40px', textAlign: 'center' }}>
                Was finden Sie im Wiki?
              </h2>
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))', gap: '30px', marginTop: '60px' }}>
                <div className="feature-card">
                  <h3 style={{ fontSize: '24px', fontWeight: '600', marginBottom: '16px' }}>
                    IT-Grundlagen
                  </h3>
                  <p style={{ color: 'var(--color-text-secondary)', lineHeight: '1.6' }}>
                    Umfassende Informationen zu grundlegenden IT-Konzepten, Technologien und Best Practices.
                  </p>
                </div>
                <div className="feature-card">
                  <h3 style={{ fontSize: '24px', fontWeight: '600', marginBottom: '16px' }}>
                    Schulungsmethoden
                  </h3>
                  <p style={{ color: 'var(--color-text-secondary)', lineHeight: '1.6' }}>
                    Moderne Ansätze und bewährte Methoden für effektive IT-Schulungen und Weiterbildungen.
                  </p>
                </div>
                <div className="feature-card">
                  <h3 style={{ fontSize: '24px', fontWeight: '600', marginBottom: '16px' }}>
                    Ressourcen
                  </h3>
                  <p style={{ color: 'var(--color-text-secondary)', lineHeight: '1.6' }}>
                    Sammlung von nützlichen Tools, Materialien und weiterführenden Ressourcen.
                  </p>
                </div>
              </div>
            </motion.div>
          </div>
        </section>

        <section className="features" style={{ paddingTop: '80px', paddingBottom: '120px' }}>
          <div className="container">
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.8, delay: 0.4 }}
              style={{ textAlign: 'center' }}
            >
              <h3 style={{ fontSize: '32px', fontWeight: '600', marginBottom: '20px' }}>
                Bereit loszulegen?
              </h3>
              <p style={{ color: 'var(--color-text-secondary)', fontSize: '20px', marginBottom: '40px' }}>
                Klicken Sie auf den Button oben, um direkt zum Wiki zu gelangen.
              </p>
            </motion.div>
          </div>
        </section>
      </main>
      <Footer />
    </>
  )
}