function CandidatesSection({ phase }) {
  const { SectionHeading, CandidateCard, Badge, SocialButton, Button } = window.VizeProDamboIceDesignSystem_70ea19;
  const [openIdx, setOpenIdx] = React.useState(null);
  const open = openIdx != null ? window.CANDIDATES[openIdx] : null;

  return (
    <section id="kandidati" style={{ background: 'var(--surface-page)', padding: 'var(--section-y) 0' }}>
      <div style={{ maxWidth: 'var(--container)', margin: '0 auto', padding: '0 var(--gutter)' }}>
        <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 'var(--space-5)', flexWrap: 'wrap' }}>
          <SectionHeading eyebrow="Kandidáti" title="Patnáct lidí, jeden společný cíl"
            intro={phase === 'teaser' ? undefined : 'Na kandidátce se sešlo 15 lidí různých profesí. Postupně je představujeme.'} />
        </div>

        {phase === 'teaser' ? (
          <div style={{
            position: 'relative',
            marginTop: 'var(--space-7)', background: 'var(--surface-card)', border: '1px solid var(--border-subtle)',
            borderRadius: 'var(--radius-lg)', padding: 'clamp(1.75rem,1rem + 3vw,3rem)', boxShadow: 'var(--shadow-sm)',
            textAlign: 'center', maxWidth: 720, marginInline: 'auto',
          }}>
            <span className="vpd-stamp" style={{
              position: 'absolute', top: -16, right: -12, transform: 'rotate(7deg)',
              background: 'var(--color-primary)', color: '#fff',
              fontFamily: 'var(--font-heading)', fontWeight: 700, fontSize: 'var(--fs-small)', letterSpacing: '0.02em',
              padding: '9px 18px', borderRadius: 'var(--radius-pill)', border: '2px solid #fff',
              boxShadow: '0 8px 18px rgba(88,139,61,0.40)', whiteSpace: 'nowrap', zIndex: 3,
            }}>Již brzy…</span>
            <h3 style={{ fontFamily: 'var(--font-heading)', fontWeight: 700, fontSize: 'var(--fs-h3)', color: 'var(--text-strong)', margin: '0 0 var(--space-3)' }}>
              Kandidáty brzy představíme
            </h3>
            <p style={{ fontFamily: 'var(--font-body)', fontSize: 'var(--fs-body)', lineHeight: 'var(--lh-normal)', color: 'var(--text-muted)', margin: '0 0 var(--space-5)' }}>
              Na kandidátce se sešlo 15 lidí různých profesí. Postupně vám je představíme… Nezapomeňte nás sledovat.
            </p>
            <div style={{ display: 'flex', gap: 'var(--space-3)', justifyContent: 'center', flexWrap: 'wrap' }}>
              <SocialButton channel="facebook" href={window.FB_URL} />
              <SocialButton channel="instagram" href={window.IG_URL} />
            </div>
          </div>
        ) : (
          <div className="vpd-candidates-grid" style={{
            display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 'var(--space-6)', marginTop: 'var(--space-8)',
          }}>
            {window.CANDIDATES.map((c, i) => (
              <CandidateCard key={c.n} number={c.n} name={c.name} role={c.role} photo={c.photo}
                bio={c.bio} status={c.missing ? 'soon' : 'revealed'} onOpen={() => setOpenIdx(i)} />
            ))}
          </div>
        )}
      </div>

      {open && (
        <div onClick={() => setOpenIdx(null)} style={{
          position: 'fixed', inset: 0, zIndex: 100, background: 'rgba(27,27,27,0.45)',
          display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 'var(--gutter)',
          backdropFilter: 'blur(2px)',
        }}>
          <div onClick={e => e.stopPropagation()} style={{
            background: 'var(--surface-card)', borderRadius: 'var(--radius-lg)', maxWidth: 640, width: '100%',
            boxShadow: 'var(--shadow-lg)', overflow: 'hidden',
            display: 'grid', gridTemplateColumns: '38% 1fr',
          }} className="vpd-cand-modal">
            <img src={open.photo} alt={open.name} style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center top', minHeight: 220 }} />
            <div style={{ padding: 'clamp(1.5rem,1rem + 2vw,2.25rem)' }}>
              <span style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center', minWidth: 30, height: 30, padding: '0 9px', fontFamily: 'var(--font-heading)', fontWeight: 700, fontSize: 14, color: '#fff', background: 'var(--green-600)', borderRadius: 'var(--radius-pill)', marginBottom: 'var(--space-3)' }}>{open.n}</span>
              <h3 style={{ fontFamily: 'var(--font-heading)', fontWeight: 700, fontSize: 'var(--fs-h3)', color: 'var(--text-strong)', margin: '0 0 4px', letterSpacing: 'var(--ls-tight)' }}>{open.name}</h3>
              {open.role && <p style={{ fontFamily: 'var(--font-body)', fontSize: 'var(--fs-small)', color: 'var(--color-primary)', fontWeight: 600, margin: '0 0 var(--space-4)' }}>{open.role}</p>}
              <p style={{ fontFamily: 'var(--font-heading)', fontSize: 'var(--fs-eyebrow)', fontWeight: 600, letterSpacing: 'var(--ls-eyebrow)', textTransform: 'uppercase', color: 'var(--text-muted)', margin: '0 0 var(--space-2)' }}>Proč kandiduji</p>
              <p style={{ fontFamily: 'var(--font-body)', fontSize: 'var(--fs-body)', lineHeight: 'var(--lh-relaxed)', color: 'var(--text-body)', margin: '0 0 var(--space-5)' }}>{open.bio}</p>
              <Button variant="ghost" onClick={() => setOpenIdx(null)}>Zavřít</Button>
            </div>
          </div>
        </div>
      )}
    </section>
  );
}
window.CandidatesSection = CandidatesSection;