// Section 02 — Why it makes sense
function SectionWhy() {
  return (
    <section className="section" data-screen-label="02 Why">
      <SectionMeta num="03" label="Чому це має сенс" />
      <div className="shell">

        <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0, 1fr) minmax(0, 1.45fr)', gap: 'var(--gap-wide)', alignItems: 'start' }}>

          {/* Left: context label + lifestyle image */}
          <div>
            <Reveal>
              <div className="eyebrow" style={{ marginBottom: 16 }}>Контекст</div>
            </Reveal>

            <Reveal delay={250}>
              <figure style={{ position: 'relative', width: '100%', aspectRatio: '4 / 5', maxHeight: '62vh', overflow: 'hidden', background: 'var(--bg-alt)' }}>
                <img src="uploads/lifestyle-creative-desk.png" alt="MindMe Creative Coffee на робочому столі" data-zoomable="true" style={{
                  position: 'absolute',
                  inset: 0,
                  width: '100%',
                  height: '100%',
                  objectFit: 'cover',
                  objectPosition: 'center',
                  transform: 'none',
                }} />
                <figcaption style={{ position: 'absolute', left: 14, right: 14, bottom: 12, display: 'flex', justifyContent: 'space-between', fontSize: 10, letterSpacing: '0.1em', textTransform: 'uppercase', color: '#0A0A0A', fontWeight: 600 }}>
                  <span>Щоденна сцена</span>
                  <span>Creative · Coffee</span>
                </figcaption>
              </figure>
            </Reveal>
          </div>

          {/* Right: big editorial statement + supporting text + 3-up grid */}
          <div>
            <Reveal delay={100}>
              <p className="display h-3" style={{ fontWeight: 600, lineHeight: 1.1, marginBottom: 'clamp(12px, 1.4vw, 18px)', letterSpacing: '-0.02em', maxWidth: '24ch' }}>
                Люди хочуть жити активно сьогодні — і зберігати тіло, <span style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontWeight: 400 }}>енергію та ясність мислення</span> на майбутнє.
              </p>
            </Reveal>

            <Reveal delay={150}>
              <p style={{ fontSize: 14.5, lineHeight: 1.55, color: 'var(--ink-soft)', marginBottom: 'clamp(10px, 1.2vw, 16px)', maxWidth: '54ch' }}>
                Вони хочуть нормально функціонувати протягом дня, виглядати добре, думати ясно й мати сили не лише на роботу, а й на родину, себе, рух і життя після роботи.
              </p>
            </Reveal>

            <Reveal delay={180}>
              <p style={{ fontSize: 14.5, lineHeight: 1.55, color: 'var(--ink-soft)', marginBottom: 'clamp(16px, 2vw, 26px)', maxWidth: '54ch' }}>
                Але шлях до щоденної турботи про себе часто складний: багато дієтичних добавок, мінералів, вітамінів, форматів, дозувань і рішень. <span style={{ color: 'var(--ink)', fontWeight: 600 }}>MindMe спрощує цей шлях</span> — через готові продукти й комплекси, які легко вбудувати у звичний день.
              </p>
            </Reveal>

            <Reveal delay={200}>
              <p className="eyebrow" style={{ marginBottom: 14 }}>Щоб це працювало щодня, потрібні три речі</p>
            </Reveal>

            <div className="why-cards" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 'var(--gap)' }}>
              {[
                { n: '01', t: 'Простота', d: 'Не потрібно самостійно збирати формули, поєднання й дозування.' },
                { n: '02', t: 'Щоденність', d: 'Формати, які легко вписати у звичний день.' },
                { n: '03', t: 'Довіра', d: 'Формули, де можна довіряти кожному рядку складу.' },
              ].map((b, i) => (
                <Reveal key={b.n} delay={200 + i * 120}>
                  <div style={{ borderTop: '1px solid var(--ink)', paddingTop: 14 }}>
                    <div className="eyebrow" style={{ marginBottom: 10 }}>{b.n}</div>
                    <h4 className="display h-4" style={{ marginBottom: 6 }}>{b.t}</h4>
                    <p style={{ fontSize: 13.5, color: 'var(--ink-soft)', lineHeight: 1.5 }}>{b.d}</p>
                  </div>
                </Reveal>
              ))}
            </div>
            <div className="why-nav" aria-hidden="true">
              <button type="button" className="why-arrow" aria-label="Попередній" onClick={(e)=>{const s=e.currentTarget.closest('.why-nav').previousElementSibling; s.scrollBy({left:-s.clientWidth*0.75, behavior:'smooth'});}}>←</button>
              <button type="button" className="why-arrow" aria-label="Наступний" onClick={(e)=>{const s=e.currentTarget.closest('.why-nav').previousElementSibling; s.scrollBy({left:s.clientWidth*0.75, behavior:'smooth'});}}>→</button>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

window.SectionWhy = SectionWhy;