import React from 'react'
import { useMeta } from '../hooks/useContent'
import { ExternalLink, Globe } from 'lucide-react'
import SpeakerCvRequest from '../components/SpeakerCvRequest'
import SEOHead from '../components/SEOHead'

export default function About() {
  const { profile, about } = useMeta()
  const links = about?.links || {}
  const stations = about?.stations || []
  const certifications = about?.certifications || []
  const personal = about?.personal || []

  return (
    <main style={{ paddingTop: '120px', minHeight: '100vh' }}>
      <SEOHead title="Über mich" description="Über Dr. André Knie, seine Arbeit, Stationen und Perspektive auf KI und digitale Souveränität." url="/ueber-mich" />
      <div className="app-container" style={{ maxWidth: '800px' }}>
        <div className="section-header">
          <h1 className="section-title">Über <span className="text-gradient">mich</span></h1>
        </div>

        {/* Profile Card */}
        <div className="glass-panel" style={{ padding: '48px', marginBottom: '40px', display: 'flex', gap: '32px', alignItems: 'flex-start', flexWrap: 'wrap' }}>
          <img src="/images/andre-knie.webp" alt="Dr. André Knie" style={{ width: '140px', height: '140px', borderRadius: '50%', objectFit: 'cover', border: '3px solid rgba(var(--accent-color-rgb), 0.3)' }} />
          <div style={{ flex: 1, minWidth: '250px' }}>
            <h2 style={{ marginBottom: '8px' }}>{profile?.name || 'Dr. André Knie'}</h2>
            <p style={{ color: 'var(--accent-color)', marginBottom: '16px', fontSize: '0.95rem' }}>
              {profile?.roles?.join(' · ')}
            </p>
            <p style={{ color: 'var(--text-secondary)', lineHeight: 1.7 }}>
              {profile?.summary}
            </p>
          </div>
        </div>

        {/* Links */}
        <div style={{ display: 'flex', gap: '16px', flexWrap: 'wrap', marginBottom: '40px', alignItems: 'flex-start' }}>
          {links.linkedin && (
            <a href={links.linkedin} target="_blank" rel="noopener noreferrer" className="secondary-button" style={{ display: 'inline-flex', alignItems: 'center', gap: '8px' }}>
              <ExternalLink size={18} /> LinkedIn
            </a>
          )}
          {links.dhive && (
            <a href={links.dhive} target="_blank" rel="noopener noreferrer" className="secondary-button" style={{ display: 'inline-flex', alignItems: 'center', gap: '8px' }}>
              <Globe size={18} /> Data Hive Cassel
            </a>
          )}
          <SpeakerCvRequest />
        </div>

        {/* Career Timeline */}
        {stations.length > 0 && (
          <>
            <h2 style={{ marginBottom: '24px' }}>Stationen</h2>
            <div style={{ display: 'flex', flexDirection: 'column', gap: '16px', marginBottom: '60px' }}>
              {stations.map((entry, i) => (
                <div key={i} className="glass-panel" style={{ padding: '20px 28px', display: 'flex', gap: '20px', alignItems: 'baseline' }}>
                  <span style={{ color: 'var(--accent-color)', fontSize: '0.85rem', fontWeight: 'var(--font-weight-semibold)', minWidth: '90px', whiteSpace: 'nowrap' }}>{entry.period}</span>
                  <div>
                    <strong>{entry.title}</strong>
                    <span style={{ color: 'var(--text-secondary)', marginLeft: '8px' }}>— {entry.org}</span>
                  </div>
                </div>
              ))}
            </div>
          </>
        )}

        {/* Certifications */}
        {certifications.length > 0 && (
          <>
            <h2 style={{ marginBottom: '24px' }}>Zertifizierungen & Weiterbildungen</h2>
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: '12px', marginBottom: '60px' }}>
              {certifications.map((cert, i) => (
                <span key={i} style={{ background: 'rgba(var(--accent-color-rgb), 0.1)', color: 'var(--accent-color)', padding: '8px 16px', borderRadius: 'var(--radius-pill)', fontSize: '0.85rem' }}>
                  {cert}
                </span>
              ))}
            </div>
          </>
        )}

        {/* Personal */}
        {personal.length > 0 && (
          <>
            <h2 style={{ marginBottom: '24px' }}>Engagement & Persönliches</h2>
            <div className="glass-panel" style={{ padding: '28px', color: 'var(--text-secondary)', lineHeight: 1.8 }}>
              {personal.map((para, i) => (
                <p key={i} style={{ margin: i === personal.length - 1 ? 0 : '0 0 12px' }}>{para}</p>
              ))}
            </div>
          </>
        )}
      </div>
    </main>
  )
}