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

  return (
    <section id="program" style={{ background: 'var(--surface-section)', 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="Program" title="Pět oblastí, na kterých nám záleží"
            intro={phase === 'teaser' ? undefined : 'Postupně vám představujeme náš program. Detaily otevřete kliknutím na kapitolu.'} />
        </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)' }}>
              Program připravujeme
            </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)' }}>
              V následujících týdnech vám postupně představíme náš program v pěti oblastech. Sledujte nás na Facebooku a Instagramu, ať vám nic neunikne.
            </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-program-grid" style={{
            display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 'var(--space-6)', marginTop: 'var(--space-8)',
          }}>
            {window.PROGRAM.map((c, i) => (
              <ProgramCard key={c.number} number={c.number} title={c.title} summary={c.summary}
                status={i >= 3 ? 'soon' : 'ready'} 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: 560, width: '100%',
            padding: 'clamp(1.75rem,1rem + 2vw,2.5rem)', boxShadow: 'var(--shadow-lg)',
          }}>
            <span style={{ fontFamily: 'var(--font-heading)', fontWeight: 800, fontSize: 26, color: 'var(--green-300)' }}>
              {String(open.number).padStart(2, '0')}
            </span>
            <h3 style={{ fontFamily: 'var(--font-heading)', fontWeight: 700, fontSize: 'var(--fs-h3)', color: 'var(--text-strong)', margin: '6px 0 var(--space-4)' }}>
              {open.title}
            </h3>
            <p style={{ fontFamily: 'var(--font-body)', fontSize: 'var(--fs-body)', lineHeight: 'var(--lh-relaxed)', color: 'var(--text-body)', margin: '0 0 var(--space-4)' }}>
              {open.summary}
            </p>
            <p style={{ fontFamily: 'var(--font-body)', fontSize: 'var(--fs-small)', color: 'var(--text-muted)', margin: '0 0 var(--space-5)', fontStyle: 'italic' }}>
              Konkrétní body této kapitoly doplníme z programu.
            </p>
            <Button variant="ghost" onClick={() => setOpenIdx(null)}>Zavřít</Button>
          </div>
        </div>
      )}
    </section>
  );
}
window.ProgramSection = ProgramSection;