// Section 08 — Final frame
function SectionFrame() {
  const pillars = [
    'зрозумілу споживчу потребу',
    'готову продуктову систему',
    'різні формати споживання',
    'продумані функціональні формули',
    'преміальні інгредієнти',
    'виробництво в Україні',
    'потенціал розширення у нові формати',
  ];
  return (
    <section className="section section--alt" data-screen-label="07 Frame">
      <SectionMeta num="07" label="Більше, ніж продукт" />
      <div className="shell">

        {/* Top: headline + dark closing block side-by-side */}
        <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0, 1fr) minmax(0, 1.1fr)', gap: 'var(--gap-wide)', alignItems: 'stretch', marginBottom: 'clamp(20px, 2.5vw, 32px)' }}>
          <Reveal>
            <h2 className="display h-3" style={{ maxWidth: '20ch', lineHeight: 1.05, letterSpacing: '-0.02em' }}>
              Основа для нової{' '}
              <span style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontWeight: 400 }}>локальної категорії</span>{' '}
              функціонального щоденного споживання.
            </h2>
          </Reveal>

          <Reveal delay={150}>
            <div style={{ padding: 'clamp(20px, 2.5vw, 32px)', background: 'var(--ink)', color: 'var(--bg)', height: '100%', display: 'flex', alignItems: 'center' }}>
              <p style={{ fontFamily: 'var(--font-display)', fontSize: 'clamp(16px, 1.5vw, 22px)', fontWeight: 500, lineHeight: 1.3, letterSpacing: '-0.015em' }}>
                MindMe — не окремий продукт і не разова лінійка. Це{' '}
                <span style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontWeight: 400 }}>брендова система</span>, яка може розвивати категорію функціональних продуктів для щоденного життя.
              </p>
            </div>
          </Reveal>
        </div>

        {/* Pillars eyebrow */}
        <Reveal>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', borderTop: '1px solid var(--ink)', paddingTop: 12, marginBottom: 'clamp(12px, 1.5vw, 20px)' }}>
            <span className="eyebrow">MindMe поєднує</span>
            <span style={{ fontSize: 11, color: 'var(--ink-mute)', letterSpacing: '0.06em' }}>{pillars.length} опор</span>
          </div>
        </Reveal>

        {/* Pillars in compact grid */}
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(240px, 1fr))', gap: 'var(--gap)' }}>
          {pillars.map((p, i) => (
            <Reveal key={i} delay={i * 50}>
              <div style={{
                display: 'grid',
                gridTemplateColumns: 'auto 1fr',
                gap: 14,
                alignItems: 'baseline',
                padding: '14px 0',
                borderTop: '1px solid var(--line)',
              }}>
                <span style={{ fontFamily: 'var(--font-display)', fontSize: 11, fontWeight: 700, letterSpacing: '0.04em', color: 'var(--accent)' }}>
                  {String(i + 1).padStart(2, '0')}
                </span>
                <span style={{ fontFamily: 'var(--font-display)', fontSize: 'clamp(15px, 1.4vw, 19px)', fontWeight: 600, lineHeight: 1.2, letterSpacing: '-0.01em' }}>
                  {p}.
                </span>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

window.SectionFrame = SectionFrame;