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

export default function Consulting() {
  const { items } = useContent('consulting', { pageSize: 10 })
  const { services } = useMeta()

  return (
    <main style={{ paddingTop: '120px', minHeight: '100vh' }}>
      <SEOHead title="Beratung" description="Beratung zu KI-Strategie, digitaler Souveränität und praktischer Transformation." url="/consulting" />
      <div className="app-container">
        <div className="section-header">
          <h1 className="section-title"><span className="text-gradient">Leistungen</span></h1>
          <p className="section-subtitle">Von der Strategie bis zur Umsetzung. Souverän, pragmatisch, evidenzbasiert.</p>
        </div>

        {/* Service Accordion */}
        <ServiceAccordion services={services || []} />

        {/* Concrete Examples */}
        {items.length > 0 && (
          <div style={{ marginTop: '80px' }}>
            <div className="section-header">
              <h2 className="section-title">Beispiele aus der <span className="text-gradient">Praxis</span></h2>
              <p className="section-subtitle">Anonymisiert, aber konkret.</p>
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(320px, 1fr))', gap: '24px', maxWidth: '1000px', margin: '0 auto' }}>
              {items.map(example => (
                <div key={example.id || example.slug} className="glass-panel" style={{ padding: '32px', display: 'flex', flexDirection: 'column' }}>
                  <div style={{ display: 'flex', gap: '8px', marginBottom: '12px', flexWrap: 'wrap' }}>
                    {example.industry && <span style={{ background: 'rgba(var(--accent-color-rgb), 0.1)', color: 'var(--accent-color)', padding: '4px 10px', borderRadius: 'var(--radius-sm)', fontSize: '0.8rem' }}>{example.industry}</span>}
                    {example.organization_size && <span style={{ background: 'rgba(255,255,255,0.05)', color: 'var(--text-secondary)', padding: '4px 10px', borderRadius: 'var(--radius-sm)', fontSize: '0.8rem' }}>{example.organization_size} MA</span>}
                  </div>
                  <h3 style={{ marginBottom: '12px', fontSize: '1.2rem' }}>{example.title}</h3>
                  <p style={{ color: 'var(--text-secondary)', fontSize: '0.95rem', marginBottom: '8px' }}><strong style={{ color: 'var(--text-primary)' }}>Problem:</strong> {example.problem_domain}</p>
                  <p style={{ color: 'var(--text-secondary)', fontSize: '0.95rem', marginBottom: '8px' }}><strong style={{ color: 'var(--text-primary)' }}>Ansatz:</strong> {example.approach}</p>
                  <p style={{ color: 'var(--text-secondary)', fontSize: '0.95rem', marginTop: 'auto' }}><strong style={{ color: 'var(--accent-color)' }}>Ergebnis:</strong> {example.outcomes}</p>
                </div>
              ))}
            </div>
          </div>
        )}
      </div>
    </main>
  )
}