import React from 'react'
import { useMeta } from '../hooks/useContent'
import LogoMarquee from '../components/LogoMarquee'
import TestimonialSlider from '../components/TestimonialSlider'
import UpcomingEvents from '../components/UpcomingEvents'
import StatsCube from '../components/StatsCube'
import DotCloudIcon from '../components/DotCloudIcon'
import PhotoBand from '../components/PhotoBand'
import SEOHead from '../components/SEOHead'
import './Home.css'

const PHOTO_BAND_IMAGES = [
  '/images/workshop-1.webp',
  '/images/keynote-1.webp',
  '/images/workshop-2.webp',
  '/images/panel-1.webp',
  '/images/workshop-3.webp',
]

export default function Home() {
  const { profile, testimonials, logos } = useMeta()

  return (
    <main>
      <SEOHead url="/" />
      {/* Hero */}
      <section className="hero">
        <div className="app-container hero-content">
          <img src="/images/andre-knie.webp" alt="Dr. André Knie" className="hero-photo" />
          <h1>
            {profile?.name || 'Dr. André Knie'}
          </h1>
          <p className="hero-roles">
            {profile?.roles?.join(' · ')}
          </p>
          <p className="hero-subtext">
            {profile?.summary}
          </p>
          <div className="hero-actions">
            <a href="/speaking" className="primary-button">Speaking anfragen</a>
            <a href="/kontakt" className="secondary-button">Kontakt</a>
          </div>
        </div>
      </section>

      {/* Stats Cube */}
      <StatsCube />

      {/* Photo Band — full width, no text, just scrolling images */}
      <PhotoBand images={PHOTO_BAND_IMAGES} />

      {/* Positioning — Mein Ansatz */}
      <section className="positioning-section">
        <div className="app-container">
          <div className="section-header">
            <h2 className="section-title">Mein <span className="text-gradient">Ansatz</span></h2>
          </div>
          <div className="positioning-grid">
            <div className="positioning-card glass-panel">
              <DotCloudIcon shape="germany" size={120} />
              <h3>Souveränität</h3>
              <p>{profile?.positioning?.sovereignty}</p>
            </div>
            <div className="positioning-card glass-panel">
              <DotCloudIcon shape="shield" size={120} />
              <h3>Sicher von KI profitieren</h3>
              <p>{profile?.positioning?.data_sovereignty}</p>
            </div>
            <div className="positioning-card glass-panel">
              <DotCloudIcon shape="tools" size={120} />
              <h3>Praxis</h3>
              <p>{profile?.positioning?.practical}</p>
            </div>
            <div className="positioning-card glass-panel">
              <DotCloudIcon shape="person" size={120} />
              <h3>Mensch im Zentrum</h3>
              <p>KI ist kein Selbstzweck, sondern unterstützt Menschen.</p>
            </div>
          </div>
        </div>
      </section>

      {/* Audiences */}
      {profile?.audiences && (
        <section className="audiences-section">
          <div className="app-container">
            <div className="section-header">
              <h2 className="section-title">Für wen ich <span className="text-gradient">arbeite</span></h2>
            </div>
            <div className="audiences-grid">
              {profile.audiences.map((aud) => (
                <div className="audience-card glass-panel" key={aud.id}>
                  <h3>{aud.label}</h3>
                  <p>{aud.description}</p>
                </div>
              ))}
            </div>
          </div>
        </section>
      )}

      {/* Logo Marquee — Kunden & Partner */}
      <LogoMarquee
        title="Kunden &"
        titleAccent="Partner"
        variant="light"
        logos={logos?.light || []}
      />
      <LogoMarquee
        variant="dark"
        logos={logos?.dark || []}
      />

      {/* Testimonials */}
      <TestimonialSlider testimonials={testimonials || []} />

      {/* Upcoming Events */}
      <UpcomingEvents />
    </main>
  )
}