// ─── ThemaDetail: Unterthemen + Deepdive ─────────────────────────────────────

const ThemaDetail = ({ thema, onBack }) => {
  const [activeUT, setActiveUT] = React.useState(thema.unterthemen[0].id);
  const [expandedSection, setExpandedSection] = React.useState('einleitung');

  // Reset when thema changes
  React.useEffect(() => {
    setActiveUT(thema.unterthemen[0].id);
    setExpandedSection('einleitung');
  }, [thema.id]);

  const ut = thema.unterthemen.find(u => u.id === activeUT);

  const toggle = (sec) => setExpandedSection(prev => prev === sec ? null : sec);

  const sections = [
    { id: 'einleitung', label: 'Einleitung', content: ut.einleitung },
    { id: 'hauptteil',  label: 'Hauptteil',  content: ut.hauptteil },
    { id: 'ergebnis',   label: 'Kernergebnis', content: ut.ergebnis },
  ];

  return (
    <div style={tdS.root}>
      {/* Breadcrumb + back */}
      <div style={tdS.breadcrumb}>
        <div style={tdS.breadcrumbInner}>
          <button onClick={onBack} style={tdS.backBtn}>
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
              <polyline points="15 18 9 12 15 6"/>
            </svg>
            Zurück zur Übersicht
          </button>
          <span style={tdS.breadcrumbSep}>›</span>
          <span style={tdS.breadcrumbCurrent}>{thema.label}</span>
        </div>
      </div>

      {/* Hero band */}
      <div style={{...tdS.hero, background: thema.farbe}}>
        <div style={tdS.heroInner}>
          <div style={tdS.heroEyebrow}>Ergebnissynthese · NRL 2026</div>
          <h1 style={tdS.heroTitle}>{thema.label}</h1>
          <p style={tdS.heroLead}>{thema.einleitung}</p>
        </div>
        {/* Decorative circles */}
        <div style={{...tdS.heroDeco, right: 60, top: -40, width: 220, height: 220, opacity: 0.1}} />
        <div style={{...tdS.heroDeco, right: 200, bottom: -60, width: 160, height: 160, opacity: 0.08}} />
      </div>

      {/* Content layout */}
      <div style={tdS.content}>
        {/* Sidebar: Unterthemen nav */}
        <aside style={tdS.sidebar}>
          <div style={tdS.sidebarTitle}>Unterthemen</div>
          <nav style={tdS.sidebarNav}>
            {thema.unterthemen.map((u, i) => (
              <button
                key={u.id}
                onClick={() => setActiveUT(u.id)}
                style={{
                  ...tdS.sidebarItem,
                  ...(activeUT === u.id ? {...tdS.sidebarItemActive, borderLeftColor: thema.farbe, color: thema.farbeText} : {}),
                }}
              >
                <span style={tdS.sidebarNum}>{i + 1}</span>
                <span style={tdS.sidebarLabel}>{u.titel}</span>
              </button>
            ))}
          </nav>

          {/* Progress indicator */}
          <div style={tdS.progress}>
            <div style={tdS.progressLabel}>Fortschritt</div>
            <div style={tdS.progressBar}>
              <div style={{
                ...tdS.progressFill,
                width: `${((thema.unterthemen.findIndex(u => u.id === activeUT) + 1) / thema.unterthemen.length) * 100}%`,
                background: thema.farbe,
              }} />
            </div>
            <div style={tdS.progressText}>
              {thema.unterthemen.findIndex(u => u.id === activeUT) + 1} / {thema.unterthemen.length}
            </div>
          </div>
        </aside>

        {/* Main panel */}
        <main style={tdS.main}>
          {/* Unterthema header */}
          <div style={tdS.utHeader}>
            <div style={{...tdS.utTag, background: thema.farbeHell, color: thema.farbeText}}>
              {thema.kurzform}
            </div>
            <h2 style={tdS.utTitle}>{ut.titel}</h2>
          </div>

          {/* Accordion sections */}
          <div style={tdS.accordion}>
            {sections.map((sec) => (
              <div key={sec.id} style={tdS.accItem}>
                <button
                  style={{
                    ...tdS.accHeader,
                    ...(expandedSection === sec.id ? {borderLeft: `3px solid ${thema.farbe}`, background: thema.farbeHell} : {}),
                  }}
                  onClick={() => toggle(sec.id)}
                >
                  <div style={tdS.accHeaderLeft}>
                    <span style={{
                      ...tdS.accIcon,
                      background: expandedSection === sec.id ? thema.farbe : '#ECECEC',
                      color: expandedSection === sec.id ? '#fff' : '#7A8A90',
                    }}>
                      {sec.id === 'einleitung' ? '01' : sec.id === 'hauptteil' ? '02' : '03'}
                    </span>
                    <span style={tdS.accLabel}>{sec.label}</span>
                  </div>
                  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke={thema.farbeText} strokeWidth="2.5" strokeLinecap="round"
                    style={{transform: expandedSection === sec.id ? 'rotate(180deg)' : 'none', transition: 'transform 250ms ease', flexShrink: 0}}>
                    <polyline points="6 9 12 15 18 9"/>
                  </svg>
                </button>
                {expandedSection === sec.id && (
                  <div style={tdS.accBody}>
                    <p style={tdS.accText}>{sec.content}</p>
                    {sec.id === 'ergebnis' && (
                      <div style={{...tdS.resultBox, borderColor: thema.farbe, background: thema.farbeHell}}>
                        <div style={{...tdS.resultIcon, color: thema.farbe}}>
                          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                            <polyline points="20 6 9 17 4 12"/>
                          </svg>
                        </div>
                        <div style={{...tdS.resultLabel, color: thema.farbeText}}>Kernergebnis des NRL</div>
                      </div>
                    )}
                  </div>
                )}
              </div>
            ))}
          </div>

          {/* Deepdive / PDF download */}
          <div style={{...tdS.deepdive, borderColor: thema.farbe}}>
            <div style={tdS.deepdiveLeft}>
              <div style={{...tdS.deepdiveIcon, background: thema.farbeHell, color: thema.farbe}}>
                <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
                  <path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/><polyline points="14 2 14 8 20 8"/>
                  <line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/>
                  <polyline points="10 9 9 9 8 9"/>
                </svg>
              </div>
              <div>
                <div style={tdS.deepdiveLabel}>Deep Dive</div>
                <div style={tdS.deepdiveTitle}>{ut.titel}</div>
                <div style={tdS.deepdiveSub}>Vollständige Forschungsergebnisse als PDF-Dokument</div>
              </div>
            </div>
            <a
              href={ut.pdf}
              style={{...tdS.deepdiveBtn, background: thema.farbe}}
              onClick={e => { e.preventDefault(); alert('PDF-Download: In der finalen Version verlinkt mit dem jeweiligen Forschungsdokument.'); }}
            >
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" style={{marginRight:6}}>
                <path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/>
              </svg>
              PDF herunterladen
            </a>
          </div>

          {/* Prev / Next Unterthema navigation */}
          {thema.unterthemen.length > 1 && (
            <div style={tdS.utNav}>
              {(() => {
                const idx = thema.unterthemen.findIndex(u => u.id === activeUT);
                const prev = idx > 0 ? thema.unterthemen[idx - 1] : null;
                const next = idx < thema.unterthemen.length - 1 ? thema.unterthemen[idx + 1] : null;
                return (
                  <>
                    {prev ? (
                      <button onClick={() => setActiveUT(prev.id)} style={tdS.utNavBtn}>
                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round"><polyline points="15 18 9 12 15 6"/></svg>
                        {prev.titel}
                      </button>
                    ) : <div />}
                    {next && (
                      <button onClick={() => setActiveUT(next.id)} style={{...tdS.utNavBtn, marginLeft: 'auto'}}>
                        {next.titel}
                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round"><polyline points="9 18 15 12 9 6"/></svg>
                      </button>
                    )}
                  </>
                );
              })()}
            </div>
          )}
        </main>
      </div>
    </div>
  );
};

const tdS = {
  root: { display: 'flex', flexDirection: 'column', flex: 1, },
  breadcrumb: { background: '#F4F6F7', borderBottom: '1px solid #E8EDEF', },
  breadcrumbInner: { maxWidth: 1200, margin: '0 auto', padding: '10px 32px', display: 'flex', alignItems: 'center', gap: 8, },
  backBtn: { background: 'none', border: 'none', cursor: 'pointer', fontFamily: "'Nunito Sans', Arial, sans-serif", fontSize: 13, fontWeight: 600, color: '#569EBE', display: 'flex', alignItems: 'center', gap: 4, padding: 0, },
  breadcrumbSep: { color: '#C8C8C8', fontSize: 14, },
  breadcrumbCurrent: { fontFamily: "'Nunito Sans', Arial, sans-serif", fontSize: 13, color: '#7A8A90', },
  hero: { position: 'relative', overflow: 'hidden', padding: '52px 0 44px', },
  heroInner: { maxWidth: 1200, margin: '0 auto', padding: '0 32px', position: 'relative', zIndex: 1, },
  heroEyebrow: { fontFamily: "'Nunito Sans', Arial, sans-serif", fontSize: 11, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.75)', marginBottom: 10, },
  heroTitle: { fontFamily: "'Nunito Sans', Arial, sans-serif", fontSize: 34, fontWeight: 800, color: '#fff', lineHeight: 1.15, letterSpacing: '-0.02em', margin: '0 0 16px', },
  heroLead: { fontFamily: "'Nunito Sans', Arial, sans-serif", fontSize: 15, color: 'rgba(255,255,255,0.88)', lineHeight: 1.7, maxWidth: 640, margin: 0, },
  heroDeco: { position: 'absolute', borderRadius: '50%', background: '#fff', pointerEvents: 'none', },
  content: { maxWidth: 1200, margin: '0 auto', padding: '40px 32px 64px', display: 'grid', gridTemplateColumns: '260px 1fr', gap: 48, width: '100%', },
  sidebar: { display: 'flex', flexDirection: 'column', gap: 0, },
  sidebarTitle: { fontFamily: "'Nunito Sans', Arial, sans-serif", fontSize: 11, fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase', color: '#7A8A90', marginBottom: 12, },
  sidebarNav: { display: 'flex', flexDirection: 'column', gap: 2, },
  sidebarItem: { background: 'none', border: '1px solid #E8EDEF', borderLeft: '3px solid transparent', borderRadius: 4, cursor: 'pointer', fontFamily: "'Nunito Sans', Arial, sans-serif", fontSize: 13, color: '#434343', padding: '10px 14px', textAlign: 'left', display: 'flex', alignItems: 'flex-start', gap: 10, transition: 'all 150ms ease', marginBottom: 2, },
  sidebarItemActive: { background: '#F4F6F7', fontWeight: 700, },
  sidebarNum: { flexShrink: 0, fontFamily: "'Nunito Sans', Arial, sans-serif", fontSize: 11, fontWeight: 700, color: '#9AABB2', marginTop: 1, },
  sidebarLabel: { lineHeight: 1.4, },
  progress: { marginTop: 28, padding: '16px 0', borderTop: '1px solid #E8EDEF', },
  progressLabel: { fontFamily: "'Nunito Sans', Arial, sans-serif", fontSize: 11, fontWeight: 700, color: '#9AABB2', textTransform: 'uppercase', letterSpacing: '0.06em', marginBottom: 8, },
  progressBar: { height: 4, background: '#ECECEC', borderRadius: 2, overflow: 'hidden', marginBottom: 6, },
  progressFill: { height: '100%', borderRadius: 2, transition: 'width 300ms ease', },
  progressText: { fontFamily: "'Nunito Sans', Arial, sans-serif", fontSize: 12, color: '#9AABB2', },
  main: { display: 'flex', flexDirection: 'column', gap: 0, minWidth: 0, },
  utHeader: { marginBottom: 24, },
  utTag: { display: 'inline-block', fontFamily: "'Nunito Sans', Arial, sans-serif", fontSize: 11, fontWeight: 700, letterSpacing: '0.06em', textTransform: 'uppercase', padding: '3px 10px', borderRadius: 3, marginBottom: 10, },
  utTitle: { fontFamily: "'Nunito Sans', Arial, sans-serif", fontSize: 24, fontWeight: 700, color: '#1A1C1D', lineHeight: 1.25, margin: 0, },
  accordion: { display: 'flex', flexDirection: 'column', gap: 0, marginBottom: 32, border: '1px solid #E8EDEF', borderRadius: 6, overflow: 'hidden', },
  accItem: { borderBottom: '1px solid #E8EDEF', },
  accHeader: { width: '100%', background: '#fff', border: 'none', borderLeft: '3px solid transparent', cursor: 'pointer', fontFamily: "'Nunito Sans', Arial, sans-serif", padding: '16px 20px', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12, transition: 'background 150ms ease', },
  accHeaderLeft: { display: 'flex', alignItems: 'center', gap: 12, },
  accIcon: { flexShrink: 0, width: 28, height: 28, borderRadius: 4, display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: "'Nunito Sans', Arial, sans-serif", fontSize: 11, fontWeight: 700, transition: 'all 150ms ease', },
  accLabel: { fontFamily: "'Nunito Sans', Arial, sans-serif", fontSize: 15, fontWeight: 600, color: '#1A1C1D', textAlign: 'left', },
  accBody: { padding: '20px 24px 24px', background: '#FAFBFC', },
  accText: { fontFamily: "'Nunito Sans', Arial, sans-serif", fontSize: 15, color: '#434343', lineHeight: 1.75, margin: 0, },
  resultBox: { marginTop: 16, padding: '14px 16px', borderRadius: 4, border: '1px solid', display: 'flex', alignItems: 'flex-start', gap: 10, },
  resultIcon: { flexShrink: 0, marginTop: 2, },
  resultLabel: { fontFamily: "'Nunito Sans', Arial, sans-serif", fontSize: 13, fontWeight: 700, },
  deepdive: { border: '1.5px solid', borderRadius: 6, padding: '24px', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 24, marginBottom: 32, flexWrap: 'wrap', },
  deepdiveLeft: { display: 'flex', alignItems: 'flex-start', gap: 16, flex: 1, minWidth: 0, },
  deepdiveIcon: { flexShrink: 0, width: 52, height: 52, borderRadius: 8, display: 'flex', alignItems: 'center', justifyContent: 'center', },
  deepdiveLabel: { fontFamily: "'Nunito Sans', Arial, sans-serif", fontSize: 11, fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase', color: '#7A8A90', marginBottom: 4, },
  deepdiveTitle: { fontFamily: "'Nunito Sans', Arial, sans-serif", fontSize: 15, fontWeight: 700, color: '#1A1C1D', marginBottom: 4, lineHeight: 1.3, },
  deepdiveSub: { fontFamily: "'Nunito Sans', Arial, sans-serif", fontSize: 13, color: '#7A8A90', },
  deepdiveBtn: { flexShrink: 0, fontFamily: "'Nunito Sans', Arial, sans-serif", fontSize: 14, fontWeight: 700, color: '#fff', border: 'none', borderRadius: 4, padding: '12px 20px', cursor: 'pointer', display: 'flex', alignItems: 'center', textDecoration: 'none', },
  utNav: { display: 'flex', gap: 16, paddingTop: 16, borderTop: '1px solid #E8EDEF', },
  utNavBtn: { background: 'none', border: '1px solid #E8EDEF', borderRadius: 4, cursor: 'pointer', fontFamily: "'Nunito Sans', Arial, sans-serif", fontSize: 13, fontWeight: 600, color: '#569EBE', padding: '8px 14px', display: 'flex', alignItems: 'center', gap: 6, },
};

Object.assign(window, { ThemaDetail });