breakpilot-pwa/admin-v2/app/(admin)/website/manager/page.tsx

'use client'

/**
 * Website Manager - CMS Dashboard
 *
 * Visual CMS dashboard for the BreakPilot website (macmini:3000).
 * 60/40 split: Section cards with inline editors | Live iframe preview.
 * Status bar, content stats, reset, save.
 */

import { useState, useEffect, useRef, useCallback } from 'react'
import type {
  WebsiteContent,
  HeroContent,
  FeatureContent,
  FAQItem,
  PricingPlan,
} from '@/lib/content-types'

const ADMIN_KEY = 'breakpilot-admin-2024'

// Section metadata for cards
const SECTIONS = [
  { key: 'hero', name: 'Hero Section', icon: '🎯', scrollTo: 'hero' },
  { key: 'features', name: 'Features', icon: '⚡', scrollTo: 'features' },
  { key: 'faq', name: 'FAQ', icon: '❓', scrollTo: 'faq' },
  { key: 'pricing', name: 'Pricing', icon: '💰', scrollTo: 'pricing' },
  { key: 'trust', name: 'Trust Indicators', icon: '🛡️', scrollTo: 'trust' },
  { key: 'testimonial', name: 'Testimonial', icon: '💬', scrollTo: 'trust' },
] as const

type SectionKey = (typeof SECTIONS)[number]['key']

// ─── Helpers ───────────────────────────────────────────────────────────────

function countWords(content: WebsiteContent): number {
  const texts: string[] = []
  // Hero
  texts.push(content.hero.badge, content.hero.title, content.hero.titleHighlight1, content.hero.titleHighlight2, content.hero.subtitle, content.hero.ctaPrimary, content.hero.ctaSecondary, content.hero.ctaHint)
  // Features
  content.features.forEach(f => { texts.push(f.title, f.description) })
  // FAQ
  content.faq.forEach(f => { texts.push(f.question, ...f.answer) })
  // Pricing
  content.pricing.forEach(p => { texts.push(p.name, p.description, p.features.tasks, p.features.taskDescription, ...p.features.included) })
  // Trust
  texts.push(content.trust.item1.value, content.trust.item1.label, content.trust.item2.value, content.trust.item2.label, content.trust.item3.value, content.trust.item3.label)
  // Testimonial
  texts.push(content.testimonial.quote, content.testimonial.author, content.testimonial.role)
  return texts.filter(Boolean).join(' ').split(/\s+/).filter(Boolean).length
}

function sectionComplete(content: WebsiteContent, section: SectionKey): boolean {
  switch (section) {
    case 'hero':
      return !!(content.hero.title && content.hero.subtitle && content.hero.ctaPrimary)
    case 'features':
      return content.features.length > 0 && content.features.every(f => f.title && f.description)
    case 'faq':
      return content.faq.length > 0 && content.faq.every(f => f.question && f.answer.length > 0)
    case 'pricing':
      return content.pricing.length > 0 && content.pricing.every(p => p.name && p.price > 0)
    case 'trust':
      return !!(content.trust.item1.value && content.trust.item2.value && content.trust.item3.value)
    case 'testimonial':
      return !!(content.testimonial.quote && content.testimonial.author)
  }
}

function sectionSummary(content: WebsiteContent, section: SectionKey): string {
  switch (section) {
    case 'hero':
      return `"${content.hero.title} ${content.hero.titleHighlight1}"`.slice(0, 50)
    case 'features':
      return `${content.features.length} Features`
    case 'faq':
      return `${content.faq.length} Fragen`
    case 'pricing':
      return `${content.pricing.length} Plaene`
    case 'trust':
      return `${content.trust.item1.value}, ${content.trust.item2.value}, ${content.trust.item3.value}`
    case 'testimonial':
      return `"${content.testimonial.quote.slice(0, 40)}..."`
  }
}

// ─── Main Component ────────────────────────────────────────────────────────

export default function WebsiteManagerPage() {
  const [content, setContent] = useState<WebsiteContent | null>(null)
  const [originalContent, setOriginalContent] = useState<WebsiteContent | null>(null)
  const [loading, setLoading] = useState(true)
  const [saving, setSaving] = useState(false)
  const [message, setMessage] = useState<{ type: 'success' | 'error'; text: string } | null>(null)
  const [expandedSection, setExpandedSection] = useState<SectionKey | null>(null)
  const [websiteStatus, setWebsiteStatus] = useState<{ online: boolean; responseTime: number } | null>(null)
  const iframeRef = useRef<HTMLIFrameElement>(null)

  // Load content
  useEffect(() => {
    loadContent()
    checkWebsiteStatus()
  }, [])

  // Auto-dismiss messages
  useEffect(() => {
    if (message) {
      const t = setTimeout(() => setMessage(null), 4000)
      return () => clearTimeout(t)
    }
  }, [message])

  async function loadContent() {
    try {
      const res = await fetch('/api/website/content')
      if (res.ok) {
        const data = await res.json()
        setContent(data)
        setOriginalContent(JSON.parse(JSON.stringify(data)))
      } else {
        setMessage({ type: 'error', text: 'Fehler beim Laden des Contents' })
      }
    } catch {
      setMessage({ type: 'error', text: 'Verbindungsfehler beim Laden' })
    } finally {
      setLoading(false)
    }
  }

  async function checkWebsiteStatus() {
    try {
      const res = await fetch('/api/website/status')
      if (res.ok) {
        const data = await res.json()
        setWebsiteStatus(data)
      }
    } catch {
      setWebsiteStatus({ online: false, responseTime: 0 })
    }
  }

  async function saveChanges() {
    if (!content) return
    setSaving(true)
    setMessage(null)
    try {
      const res = await fetch('/api/website/content', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'x-admin-key': ADMIN_KEY },
        body: JSON.stringify(content),
      })
      if (res.ok) {
        setMessage({ type: 'success', text: 'Erfolgreich gespeichert!' })
        setOriginalContent(JSON.parse(JSON.stringify(content)))
        // Reload iframe to reflect changes
        if (iframeRef.current) {
          iframeRef.current.src = iframeRef.current.src
        }
      } else {
        const err = await res.json()
        setMessage({ type: 'error', text: err.error || 'Fehler beim Speichern' })
      }
    } catch {
      setMessage({ type: 'error', text: 'Verbindungsfehler beim Speichern' })
    } finally {
      setSaving(false)
    }
  }

  function resetContent() {
    if (originalContent) {
      setContent(JSON.parse(JSON.stringify(originalContent)))
      setMessage({ type: 'success', text: 'Zurueckgesetzt auf letzten gespeicherten Stand' })
    }
  }

  // Scroll iframe to section
  const scrollPreview = useCallback((scrollTo: string) => {
    if (!iframeRef.current?.contentWindow) return
    try {
      iframeRef.current.contentWindow.postMessage(
        { type: 'scrollTo', section: scrollTo },
        '*'
      )
    } catch {
      // cross-origin fallback
    }
  }, [])

  function toggleSection(key: SectionKey) {
    const newExpanded = expandedSection === key ? null : key
    setExpandedSection(newExpanded)
    if (newExpanded) {
      const section = SECTIONS.find(s => s.key === newExpanded)
      if (section) scrollPreview(section.scrollTo)
    }
  }

  // ─── Render ────────────────────────────────────────────────────────────────

  if (loading) {
    return (
      <div className="flex items-center justify-center py-20">
        <div className="flex items-center gap-3 text-slate-500">
          <svg className="w-5 h-5 animate-spin" fill="none" viewBox="0 0 24 24">
            <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
            <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
          </svg>
          Lade Website-Content...
        </div>
      </div>
    )
  }

  if (!content) {
    return (
      <div className="flex items-center justify-center py-20">
        <div className="text-red-600">Content konnte nicht geladen werden.</div>
      </div>
    )
  }

  const wordCount = countWords(content)
  const completeSections = SECTIONS.filter(s => sectionComplete(content, s.key)).length
  const completionPct = Math.round((completeSections / SECTIONS.length) * 100)
  const hasChanges = JSON.stringify(content) !== JSON.stringify(originalContent)

  return (
    <div className="space-y-4">
      {/* ── Status Bar ───────────────────────────────────────────────────── */}
      <div className="bg-white rounded-xl border border-slate-200 px-5 py-3 flex items-center justify-between">
        <div className="flex items-center gap-4">
          {/* Website status */}
          <div className="flex items-center gap-2">
            <span className={`w-2.5 h-2.5 rounded-full ${websiteStatus?.online ? 'bg-green-500' : 'bg-red-500'}`} />
            <span className="text-sm text-slate-700">
              Website {websiteStatus?.online ? 'online' : 'offline'}
              {websiteStatus?.online && websiteStatus.responseTime > 0 && (
                <span className="text-slate-400 ml-1">({websiteStatus.responseTime}ms)</span>
              )}
            </span>
          </div>
          {/* Link */}
          <a
            href="https://macmini:3000"
            target="_blank"
            rel="noopener noreferrer"
            className="text-sm text-sky-600 hover:text-sky-700 flex items-center gap-1"
          >
            Zur Website
            <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
            </svg>
          </a>
        </div>
        <div className="flex items-center gap-3">
          {message && (
            <span className={`px-3 py-1 rounded-lg text-sm font-medium ${
              message.type === 'success' ? 'bg-green-50 text-green-700' : 'bg-red-50 text-red-700'
            }`}>
              {message.text}
            </span>
          )}
          <button
            onClick={resetContent}
            disabled={!hasChanges}
            className="px-4 py-2 text-sm font-medium text-slate-600 bg-slate-100 rounded-lg hover:bg-slate-200 disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
          >
            Reset
          </button>
          <button
            onClick={saveChanges}
            disabled={saving || !hasChanges}
            className="px-5 py-2 text-sm font-medium text-white bg-sky-600 rounded-lg hover:bg-sky-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
          >
            {saving ? 'Speichern...' : 'Speichern'}
          </button>
        </div>
      </div>

      {/* ── Stats Bar ────────────────────────────────────────────────────── */}
      <div className="grid grid-cols-4 gap-3">
        {[
          { label: 'Sektionen', value: `${SECTIONS.length}`, icon: '📄' },
          { label: 'Woerter', value: wordCount.toLocaleString('de-DE'), icon: '📝' },
          { label: 'Vollstaendig', value: `${completionPct}%`, icon: completionPct === 100 ? '✅' : '🔧' },
          { label: 'Aenderungen', value: hasChanges ? 'Ungespeichert' : 'Aktuell', icon: hasChanges ? '🟡' : '🟢' },
        ].map((stat) => (
          <div key={stat.label} className="bg-white rounded-xl border border-slate-200 px-4 py-3 flex items-center gap-3">
            <span className="text-xl">{stat.icon}</span>
            <div>
              <div className="text-sm font-semibold text-slate-900">{stat.value}</div>
              <div className="text-xs text-slate-500">{stat.label}</div>
            </div>
          </div>
        ))}
      </div>

      {/* ── Main Layout: 60/40 ───────────────────────────────────────────── */}
      <div className="grid grid-cols-5 gap-4" style={{ height: 'calc(100vh - 300px)' }}>
        {/* ── Left: Section Cards (3/5 = 60%) ──────────────────────────── */}
        <div className="col-span-3 overflow-y-auto pr-1 space-y-3">
          {SECTIONS.map((section) => {
            const isExpanded = expandedSection === section.key
            const isComplete = sectionComplete(content, section.key)
            return (
              <div
                key={section.key}
                className={`bg-white rounded-xl border transition-all ${
                  isExpanded ? 'border-sky-300 shadow-md' : 'border-slate-200 hover:border-slate-300'
                }`}
              >
                {/* Card Header */}
                <button
                  onClick={() => toggleSection(section.key)}
                  className="w-full px-5 py-4 flex items-center justify-between text-left"
                >
                  <div className="flex items-center gap-3">
                    <span className="text-xl">{section.icon}</span>
                    <div>
                      <div className="font-medium text-slate-900">{section.name}</div>
                      <div className="text-xs text-slate-500 mt-0.5">{sectionSummary(content, section.key)}</div>
                    </div>
                  </div>
                  <div className="flex items-center gap-3">
                    {isComplete ? (
                      <span className="w-6 h-6 rounded-full bg-green-100 text-green-600 flex items-center justify-center text-xs">
                        <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" /></svg>
                      </span>
                    ) : (
                      <span className="w-6 h-6 rounded-full bg-amber-100 text-amber-600 flex items-center justify-center text-xs">!</span>
                    )}
                    <svg
                      className={`w-5 h-5 text-slate-400 transition-transform ${isExpanded ? 'rotate-180' : ''}`}
                      fill="none" viewBox="0 0 24 24" stroke="currentColor"
                    >
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
                    </svg>
                  </div>
                </button>

                {/* Inline Editor */}
                {isExpanded && (
                  <div className="px-5 pb-5 border-t border-slate-100 pt-4">
                    {section.key === 'hero' && <HeroEditor content={content} setContent={setContent} />}
                    {section.key === 'features' && <FeaturesEditor content={content} setContent={setContent} />}
                    {section.key === 'faq' && <FAQEditor content={content} setContent={setContent} />}
                    {section.key === 'pricing' && <PricingEditor content={content} setContent={setContent} />}
                    {section.key === 'trust' && <TrustEditor content={content} setContent={setContent} />}
                    {section.key === 'testimonial' && <TestimonialEditor content={content} setContent={setContent} />}
                  </div>
                )}
              </div>
            )
          })}
        </div>

        {/* ── Right: Live Preview (2/5 = 40%) ──────────────────────────── */}
        <div className="col-span-2 bg-white rounded-xl border border-slate-200 overflow-hidden flex flex-col">
          {/* Preview Header */}
          <div className="bg-slate-50 border-b border-slate-200 px-4 py-2.5 flex items-center justify-between flex-shrink-0">
            <div className="flex items-center gap-2">
              <div className="flex gap-1.5">
                <div className="w-2.5 h-2.5 rounded-full bg-red-400" />
                <div className="w-2.5 h-2.5 rounded-full bg-yellow-400" />
                <div className="w-2.5 h-2.5 rounded-full bg-green-400" />
              </div>
              <span className="text-xs text-slate-500 ml-2">macmini:3000</span>
            </div>
            <button
              onClick={() => { if (iframeRef.current) iframeRef.current.src = iframeRef.current.src }}
              className="p-1 text-slate-400 hover:text-slate-600 rounded transition-colors"
              title="Preview neu laden"
            >
              <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
              </svg>
            </button>
          </div>
          {/* iframe */}
          <div className="flex-1 relative bg-slate-100">
            <iframe
              ref={iframeRef}
              src="https://macmini:3000/?preview=true"
              className="absolute inset-0 w-full h-full border-0"
              style={{
                width: '166.67%',
                height: '166.67%',
                transform: 'scale(0.6)',
                transformOrigin: 'top left',
              }}
              title="Website Preview"
              sandbox="allow-same-origin allow-scripts"
            />
          </div>
        </div>
      </div>
    </div>
  )
}

// ─── Section Editors ─────────────────────────────────────────────────────────

interface EditorProps {
  content: WebsiteContent
  setContent: React.Dispatch<React.SetStateAction<WebsiteContent | null>>
}

const inputCls = 'w-full px-3 py-2 border border-slate-300 rounded-lg text-sm focus:ring-2 focus:ring-sky-500 focus:border-sky-500 transition-colors'
const labelCls = 'block text-xs font-medium text-slate-600 mb-1'

// ─── Hero Editor ─────────────────────────────────────────────────────────────

function HeroEditor({ content, setContent }: EditorProps) {
  function update(field: keyof HeroContent, value: string) {
    setContent(c => c ? { ...c, hero: { ...c.hero, [field]: value } } : c)
  }
  return (
    <div className="grid gap-3">
      <div>
        <label className={labelCls}>Badge</label>
        <input className={inputCls} value={content.hero.badge} onChange={e => update('badge', e.target.value)} />
      </div>
      <div>
        <label className={labelCls}>Titel</label>
        <input className={inputCls} value={content.hero.title} onChange={e => update('title', e.target.value)} />
      </div>
      <div className="grid grid-cols-2 gap-3">
        <div>
          <label className={labelCls}>Highlight 1</label>
          <input className={inputCls} value={content.hero.titleHighlight1} onChange={e => update('titleHighlight1', e.target.value)} />
        </div>
        <div>
          <label className={labelCls}>Highlight 2</label>
          <input className={inputCls} value={content.hero.titleHighlight2} onChange={e => update('titleHighlight2', e.target.value)} />
        </div>
      </div>
      <div>
        <label className={labelCls}>Untertitel</label>
        <textarea className={inputCls} rows={2} value={content.hero.subtitle} onChange={e => update('subtitle', e.target.value)} />
      </div>
      <div className="grid grid-cols-3 gap-3">
        <div>
          <label className={labelCls}>CTA Primaer</label>
          <input className={inputCls} value={content.hero.ctaPrimary} onChange={e => update('ctaPrimary', e.target.value)} />
        </div>
        <div>
          <label className={labelCls}>CTA Sekundaer</label>
          <input className={inputCls} value={content.hero.ctaSecondary} onChange={e => update('ctaSecondary', e.target.value)} />
        </div>
        <div>
          <label className={labelCls}>CTA Hinweis</label>
          <input className={inputCls} value={content.hero.ctaHint} onChange={e => update('ctaHint', e.target.value)} />
        </div>
      </div>
    </div>
  )
}

// ─── Features Editor ─────────────────────────────────────────────────────────

function FeaturesEditor({ content, setContent }: EditorProps) {
  function update(index: number, field: keyof FeatureContent, value: string) {
    setContent(c => {
      if (!c) return c
      const features = [...c.features]
      features[index] = { ...features[index], [field]: value }
      return { ...c, features }
    })
  }
  return (
    <div className="space-y-3">
      {content.features.map((feature, i) => (
        <div key={feature.id} className="bg-slate-50 rounded-lg p-3 space-y-2">
          <div className="grid grid-cols-6 gap-2">
            <div>
              <label className={labelCls}>Icon</label>
              <input className={`${inputCls} text-center text-lg`} value={feature.icon} onChange={e => update(i, 'icon', e.target.value)} />
            </div>
            <div className="col-span-5">
              <label className={labelCls}>Titel</label>
              <input className={inputCls} value={feature.title} onChange={e => update(i, 'title', e.target.value)} />
            </div>
          </div>
          <div>
            <label className={labelCls}>Beschreibung</label>
            <textarea className={inputCls} rows={2} value={feature.description} onChange={e => update(i, 'description', e.target.value)} />
          </div>
        </div>
      ))}
    </div>
  )
}

// ─── FAQ Editor ──────────────────────────────────────────────────────────────

function FAQEditor({ content, setContent }: EditorProps) {
  function updateItem(index: number, field: 'question' | 'answer', value: string) {
    setContent(c => {
      if (!c) return c
      const faq = [...c.faq]
      if (field === 'answer') {
        faq[index] = { ...faq[index], answer: value.split('\n') }
      } else {
        faq[index] = { ...faq[index], question: value }
      }
      return { ...c, faq }
    })
  }
  function addItem() {
    setContent(c => c ? { ...c, faq: [...c.faq, { question: 'Neue Frage?', answer: ['Antwort hier...'] }] } : c)
  }
  function removeItem(index: number) {
    setContent(c => c ? { ...c, faq: c.faq.filter((_, i) => i !== index) } : c)
  }
  return (
    <div className="space-y-3">
      {content.faq.map((item, i) => (
        <div key={i} className="bg-slate-50 rounded-lg p-3 space-y-2 relative group">
          <button
            onClick={() => removeItem(i)}
            className="absolute top-2 right-2 p-1 text-red-400 hover:text-red-600 opacity-0 group-hover:opacity-100 transition-opacity"
            title="Entfernen"
          >
            <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
            </svg>
          </button>
          <div>
            <label className={labelCls}>Frage {i + 1}</label>
            <input className={inputCls} value={item.question} onChange={e => updateItem(i, 'question', e.target.value)} />
          </div>
          <div>
            <label className={labelCls}>Antwort</label>
            <textarea className={`${inputCls} font-mono`} rows={3} value={item.answer.join('\n')} onChange={e => updateItem(i, 'answer', e.target.value)} />
          </div>
        </div>
      ))}
      <button onClick={addItem} className="w-full py-2 border-2 border-dashed border-slate-300 rounded-lg text-sm text-slate-500 hover:border-sky-400 hover:text-sky-600 transition-colors">
        + Frage hinzufuegen
      </button>
    </div>
  )
}

// ─── Pricing Editor ──────────────────────────────────────────────────────────

function PricingEditor({ content, setContent }: EditorProps) {
  function update(index: number, field: string, value: string | number | boolean) {
    setContent(c => {
      if (!c) return c
      const pricing = [...c.pricing]
      if (field === 'price') {
        pricing[index] = { ...pricing[index], price: Number(value) }
      } else if (field === 'popular') {
        pricing[index] = { ...pricing[index], popular: Boolean(value) }
      } else if (field.startsWith('features.')) {
        const sub = field.replace('features.', '')
        if (sub === 'included' && typeof value === 'string') {
          pricing[index] = { ...pricing[index], features: { ...pricing[index].features, included: value.split('\n') } }
        } else {
          pricing[index] = { ...pricing[index], features: { ...pricing[index].features, [sub]: value } }
        }
      } else {
        pricing[index] = { ...pricing[index], [field]: value }
      }
      return { ...c, pricing }
    })
  }
  return (
    <div className="space-y-4">
      {content.pricing.map((plan, i) => (
        <div key={plan.id} className="bg-slate-50 rounded-lg p-3 space-y-2">
          <div className="flex items-center gap-2 mb-1">
            <span className="text-sm font-semibold text-slate-800">{plan.name}</span>
            {plan.popular && <span className="text-xs bg-sky-100 text-sky-700 px-1.5 py-0.5 rounded">Beliebt</span>}
          </div>
          <div className="grid grid-cols-4 gap-2">
            <div>
              <label className={labelCls}>Name</label>
              <input className={inputCls} value={plan.name} onChange={e => update(i, 'name', e.target.value)} />
            </div>
            <div>
              <label className={labelCls}>Preis (EUR)</label>
              <input className={inputCls} type="number" step="0.01" value={plan.price} onChange={e => update(i, 'price', e.target.value)} />
            </div>
            <div>
              <label className={labelCls}>Intervall</label>
              <input className={inputCls} value={plan.interval} onChange={e => update(i, 'interval', e.target.value)} />
            </div>
            <div className="flex items-end pb-1">
              <label className="flex items-center gap-2 cursor-pointer">
                <input type="checkbox" checked={plan.popular || false} onChange={e => update(i, 'popular', e.target.checked)} className="w-4 h-4 text-sky-600 rounded" />
                <span className="text-xs text-slate-600">Beliebt</span>
              </label>
            </div>
          </div>
          <div>
            <label className={labelCls}>Beschreibung</label>
            <input className={inputCls} value={plan.description} onChange={e => update(i, 'description', e.target.value)} />
          </div>
          <div className="grid grid-cols-2 gap-2">
            <div>
              <label className={labelCls}>Aufgaben</label>
              <input className={inputCls} value={plan.features.tasks} onChange={e => update(i, 'features.tasks', e.target.value)} />
            </div>
            <div>
              <label className={labelCls}>Aufgaben-Beschreibung</label>
              <input className={inputCls} value={plan.features.taskDescription} onChange={e => update(i, 'features.taskDescription', e.target.value)} />
            </div>
          </div>
          <div>
            <label className={labelCls}>Features (eine pro Zeile)</label>
            <textarea className={`${inputCls} font-mono`} rows={3} value={plan.features.included.join('\n')} onChange={e => update(i, 'features.included', e.target.value)} />
          </div>
        </div>
      ))}
    </div>
  )
}

// ─── Trust Editor ────────────────────────────────────────────────────────────

function TrustEditor({ content, setContent }: EditorProps) {
  function update(key: 'item1' | 'item2' | 'item3', field: 'value' | 'label', val: string) {
    setContent(c => c ? { ...c, trust: { ...c.trust, [key]: { ...c.trust[key], [field]: val } } } : c)
  }
  return (
    <div className="grid grid-cols-3 gap-3">
      {(['item1', 'item2', 'item3'] as const).map((key, i) => (
        <div key={key} className="bg-slate-50 rounded-lg p-3 space-y-2">
          <div>
            <label className={labelCls}>Wert {i + 1}</label>
            <input className={inputCls} value={content.trust[key].value} onChange={e => update(key, 'value', e.target.value)} />
          </div>
          <div>
            <label className={labelCls}>Label {i + 1}</label>
            <input className={inputCls} value={content.trust[key].label} onChange={e => update(key, 'label', e.target.value)} />
          </div>
        </div>
      ))}
    </div>
  )
}

// ─── Testimonial Editor ──────────────────────────────────────────────────────

function TestimonialEditor({ content, setContent }: EditorProps) {
  function update(field: 'quote' | 'author' | 'role', value: string) {
    setContent(c => c ? { ...c, testimonial: { ...c.testimonial, [field]: value } } : c)
  }
  return (
    <div className="space-y-3">
      <div>
        <label className={labelCls}>Zitat</label>
        <textarea className={inputCls} rows={3} value={content.testimonial.quote} onChange={e => update('quote', e.target.value)} />
      </div>
      <div className="grid grid-cols-2 gap-3">
        <div>
          <label className={labelCls}>Autor</label>
          <input className={inputCls} value={content.testimonial.author} onChange={e => update('author', e.target.value)} />
        </div>
        <div>
          <label className={labelCls}>Rolle</label>
          <input className={inputCls} value={content.testimonial.role} onChange={e => update('role', e.target.value)} />
        </div>
      </div>
    </div>
  )
}