// Demands: 3 tabs, each with a list of demand cards
function DemandsSection({ t, lang }) {
  const [active, setActive] = React.useState('AHS');
  const demands = window.AstroniaData.demands[active];

  const tabs = ['AHS', 'BMHS', 'BS'];
  const tabColor = (k) => ({
    AHS: 'oklch(0.84 0.15 82)',
    BMHS: 'oklch(0.72 0.17 45)',
    BS: 'oklch(0.65 0.20 305)',
  }[k]);

  return (
    <section className="section">
      <div className="eyebrow">{t('demandsEyebrow')}</div>
      <h2 style={{ fontSize: 'clamp(40px, 6vw, 72px)', lineHeight: 1.05, marginBottom: 18 }}>
        {t('demandsTitle')}
      </h2>
      <p style={{ fontSize: 17, color: 'var(--ink-soft)', maxWidth: 640, marginBottom: 32 }}>
        {t('demandsLead')}
      </p>

      {/* Tabs */}
      <div style={{
        display: 'flex', gap: 0, marginBottom: 32,
        borderBottom: '1px solid var(--line)',
        overflowX: 'auto',
      }}>
        {tabs.map(k => (
          <button key={k}
            onClick={() => setActive(k)}
            style={{
              background: 'transparent',
              border: 'none',
              fontFamily: '"Cormorant Garamond", serif',
              fontSize: 26,
              fontWeight: 400,
              padding: '14px 28px 18px',
              cursor: 'pointer',
              color: active === k ? 'var(--ink-bright)' : 'var(--ink-mute)',
              borderBottom: active === k ? `2px solid ${tabColor(k)}` : '2px solid transparent',
              marginBottom: -1,
              transition: 'color .2s ease, border-color .2s ease',
              letterSpacing: '0.04em',
              display: 'flex', alignItems: 'center', gap: 12,
            }}>
            <span style={{
              width: 8, height: 8, borderRadius: '50%',
              background: tabColor(k),
              boxShadow: active === k ? `0 0 12px ${tabColor(k)}` : 'none',
            }}></span>
            {k}
          </button>
        ))}
      </div>

      <div key={active} style={{ animation: 'sectionIn .4s ease' }}>
        <div style={{
          fontSize: 13, letterSpacing: '0.2em', textTransform: 'uppercase',
          color: tabColor(active), marginBottom: 24,
        }}>
          {demands.tagline[lang]}
        </div>

        <div style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))',
          gap: 16,
          marginBottom: 32,
        }}>
          {demands.points.map((p, i) => (
            <div key={i} className="card" style={{
              padding: '26px 24px',
              transition: 'transform .25s ease, border-color .25s ease',
              cursor: 'default',
            }}
            onMouseEnter={(e) => {
              e.currentTarget.style.transform = 'translateY(-3px)';
              e.currentTarget.style.borderColor = tabColor(active);
            }}
            onMouseLeave={(e) => {
              e.currentTarget.style.transform = '';
              e.currentTarget.style.borderColor = 'var(--line)';
            }}>
              <div style={{
                fontFamily: '"Cormorant Garamond", serif',
                fontSize: 48, lineHeight: 1, color: tabColor(active),
                marginBottom: 16, fontWeight: 400,
              }}>0{i + 1}</div>
              <h3 style={{
                fontSize: 22, fontWeight: 500, marginBottom: 10, lineHeight: 1.2,
              }}>
                {p[lang] || p.de}
              </h3>
              <p style={{ fontSize: 14, color: 'var(--ink-soft)', lineHeight: 1.5 }}>
                {p.desc[lang]}
              </p>
            </div>
          ))}
        </div>

        {demands.papers && demands.papers.length > 0 && (
          <div>
            <div style={{
              display: 'flex', alignItems: 'baseline', justifyContent: 'space-between',
              flexWrap: 'wrap', gap: 12,
              borderTop: '1px solid var(--line)', paddingTop: 22, marginTop: 8, marginBottom: 16,
            }}>
              <div className="eyebrow" style={{ color: tabColor(active) }}>
                {lang === 'de' ? 'Forderungspapiere zum Download' : 'Download demand papers'}
              </div>
              <div style={{ fontSize: 12, color: 'var(--ink-mute)', letterSpacing: '0.08em' }}>
                {demands.papers.length} {lang === 'de' ? 'Dokumente' : 'documents'}
              </div>
            </div>
            <div style={{
              display: 'grid',
              gridTemplateColumns: 'repeat(auto-fit, minmax(260px, 1fr))',
              gap: 10,
            }}>
              {demands.papers.map((p, i) => (
                <PaperCard key={i} paper={p} accent={tabColor(active)} lang={lang} />
              ))}
            </div>
          </div>
        )}
      </div>
    </section>
  );
}

function PaperCard({ paper, accent, lang }) {
  const typeLabel = paper.type.toUpperCase();
  const filename = decodeURIComponent(paper.file.split('/').pop());
  return (
    <a href={paper.file} download={filename} target="_blank" rel="noreferrer"
      title={lang === 'de' ? `${paper.topic} — ${paper.author} (${typeLabel}) herunterladen` : `Download ${paper.topic} — ${paper.author} (${typeLabel})`}
      style={{
        display: 'flex', alignItems: 'center', gap: 14,
        padding: '14px 16px', borderRadius: 14,
        background: 'oklch(0.13 0.05 268 / 0.55)',
        border: '1px solid var(--line)',
        textDecoration: 'none', color: 'inherit',
        transition: 'transform .2s ease, border-color .2s ease, background .2s ease',
      }}
      onMouseEnter={(e) => {
        e.currentTarget.style.transform = 'translateY(-2px)';
        e.currentTarget.style.borderColor = accent;
        e.currentTarget.style.background = `color-mix(in oklch, ${accent} 6%, oklch(0.13 0.05 268 / 0.7))`;
      }}
      onMouseLeave={(e) => {
        e.currentTarget.style.transform = '';
        e.currentTarget.style.borderColor = 'var(--line)';
        e.currentTarget.style.background = 'oklch(0.13 0.05 268 / 0.55)';
      }}>
      {/* File-type badge */}
      <div style={{
        flexShrink: 0,
        width: 44, height: 52, borderRadius: 6,
        background: `linear-gradient(155deg, ${accent}, color-mix(in oklch, ${accent} 60%, oklch(0.10 0.04 268)))`,
        display: 'flex', flexDirection: 'column',
        alignItems: 'center', justifyContent: 'flex-end',
        padding: '4px 4px 6px',
        position: 'relative',
        boxShadow: `0 6px 14px -6px ${accent.replace(')', ' / 0.6)')}`,
      }}>
        {/* folded corner */}
        <div style={{
          position: 'absolute', top: 0, right: 0,
          width: 12, height: 12,
          background: 'oklch(0.10 0.04 268 / 0.55)',
          clipPath: 'polygon(0 0, 100% 100%, 100% 0)',
        }} />
        <div style={{
          fontSize: 9, letterSpacing: '0.16em', fontWeight: 700,
          color: 'oklch(0.10 0.04 60)',
        }}>{typeLabel}</div>
      </div>
      <div style={{ minWidth: 0, flex: 1 }}>
        <div style={{
          fontFamily: '"Cormorant Garamond", serif', fontSize: 18, lineHeight: 1.2,
          color: 'var(--ink-bright)', marginBottom: 2,
          overflow: 'hidden', textOverflow: 'ellipsis',
          display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical',
        }}>
          {paper.topic}
        </div>
        <div style={{
          fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase',
          color: 'var(--ink-mute)', fontWeight: 500,
        }}>
          {paper.author}
        </div>
      </div>
      <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke={accent} strokeWidth="1.6"
        strokeLinecap="round" strokeLinejoin="round" style={{ flexShrink: 0 }}>
        <path d="M 21 15 V 19 a 2 2 0 0 1 -2 2 H 5 a 2 2 0 0 1 -2 -2 V 15" />
        <path d="M 7 10 L 12 15 L 17 10" />
        <path d="M 12 15 V 3" />
      </svg>
    </a>
  );
}

Object.assign(window, { DemandsSection });