import React from 'react'
import { useContent, useMeta } from '../hooks/useContent'
import SpeakingAccordion from '../components/SpeakingAccordion'
import SEOHead from '../components/SEOHead'

export default function Speaking() {
  const { items: allTalks } = useContent('talks', { visibility: 'all', pageSize: 100 })
  const { speaking } = useMeta()
  const sections = speaking?.sections || []

  return (
    <main style={{ paddingTop: '120px', minHeight: '100vh' }}>
      <SEOHead title="Speaking" description="Keynotes, Workshops und Panels von Dr. André Knie zu KI, Transformation und Leadership." url="/speaking" />
      <div className="app-container">
        <div className="section-header">
          <h1 className="section-title"><span className="text-gradient">Speaking</span></h1>
          <p className="section-subtitle">Keynotes, Workshops und Panels zu KI, Transformation und Leadership.</p>
        </div>

        {/* Speaker Bio */}
        {speaking?.bio && (
          <div className="glass-panel" style={{ padding: '32px', maxWidth: '900px', margin: '0 auto 48px', display: 'flex', gap: '28px', alignItems: 'flex-start', flexWrap: 'wrap' }}>
            <img src="/images/andre-knie.webp" alt="Dr. André Knie" style={{ width: '100px', height: '100px', borderRadius: '50%', objectFit: 'cover', border: '2px solid rgba(var(--accent-color-rgb), 0.3)', flexShrink: 0 }} />
            <div style={{ flex: 1, minWidth: '250px' }}>
              <p style={{ color: 'var(--text-secondary)', lineHeight: 1.7, margin: '0 0 16px' }}>{speaking.bio}</p>
              {speaking.style && (
                <div style={{ display: 'flex', flexWrap: 'wrap', gap: '8px' }}>
                  {speaking.style.map((s, i) => (
                    <span key={i} style={{ background: 'rgba(var(--accent-color-rgb), 0.1)', color: 'var(--accent-color)', padding: '6px 12px', borderRadius: 'var(--radius-pill)', fontSize: '0.8rem' }}>{s}</span>
                  ))}
                </div>
              )}
            </div>
          </div>
        )}

        <SpeakingAccordion sections={sections} talks={allTalks} />
      </div>
    </main>
  )
}