// Section 05 — Complexes (3 curated product scenarios, all visible at once)
function SectionComplexes() {
  const complexes = window.MINDME_COMPLEXES;
  const products = window.MINDME_PRODUCTS;

  // Distinct accent per scenario so each reads as its own life-context
  const ACCENTS = {
    beauty: '#B23A5B',
    performance: '#2E7D5B',
    coffee: '#B5651D',
  };
  const CAT_LABELS = { coffee: 'Кава', cocoa: 'Какао', matcha: 'Матча', greens: 'Грінс', reds: 'Редс', creamer: 'Вершки', drip: 'Дріп Кава' };
  const CAT_RELABEL = { greens: 'функціональна суміш', reds: 'функціональна суміш' };

  // Accordion on mobile only; desktop shows all scenarios fully expanded.
  const [isMobile, setIsMobile] = useState(typeof window !== 'undefined' && window.matchMedia('(max-width: 760px)').matches);
  const [openId, setOpenId] = useState(complexes[0] && complexes[0].id);
  useEffect(() => {
    const mq = window.matchMedia('(max-width: 760px)');
    const on = () => setIsMobile(mq.matches);
    mq.addEventListener('change', on);
    return () => mq.removeEventListener('change', on);
  }, []);

  return (
    <section className="section" data-screen-label="05 Complexes">
      <SectionMeta num="06" label="Приклад комплексів" />
      <div className="shell">

        {/* Headline + intro inline */}
        <Reveal>
          <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0, 1fr) minmax(0, 1.2fr)', gap: 'var(--gap-wide)', alignItems: 'end', marginBottom: 'clamp(16px, 2vw, 26px)' }}>
            <h2 className="display h-3" style={{ letterSpacing: '-0.02em', lineHeight: 1.05, maxWidth: '14ch' }}>
              Три <span style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontWeight: 400 }}>сценарії</span>, що працюють разом як комплекс.
            </h2>
            <p style={{ maxWidth: '54ch', color: 'var(--ink-soft)', fontSize: 14, lineHeight: 1.5 }}>
              Окремі продукти складаються у комплекси під реальні щоденні задачі. Кожен сценарій — окремий результат: краса, продуктивність, керування кофеїном.
            </p>
          </div>
        </Reveal>

        {/* All three scenarios, stacked as distinct color-coded blocks */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 'clamp(10px, 1.2vw, 16px)' }}>
          {complexes.map((complex, ci) => {
            const accent = ACCENTS[complex.id] || 'var(--accent)';
            const open = !isMobile || openId === complex.id;
            return (
              <Reveal key={complex.id} delay={ci * 110}>
                <div style={{
                  background: `color-mix(in srgb, ${accent} 9%, var(--bg))`,
                  border: '1px solid var(--line)',
                  borderLeft: `4px solid ${accent}`,
                }}>

                  {/* Header — toggles open on mobile, static on desktop */}
                  <button
                    onClick={() => { if (isMobile) setOpenId(open ? null : complex.id); }}
                    aria-expanded={open}
                    style={{
                      appearance: 'none', width: '100%', textAlign: 'left',
                      background: 'transparent', border: 'none',
                      cursor: isMobile ? 'pointer' : 'default',
                      display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12,
                      padding: 'clamp(14px, 1.5vw, 20px)',
                      paddingBottom: open ? 0 : 'clamp(14px, 1.5vw, 20px)',
                    }}>
                    <span style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
                      <span style={{ fontSize: 11, letterSpacing: '0.12em', textTransform: 'uppercase', fontWeight: 700, color: accent }}>
                        Сценарій {String(ci + 1).padStart(2, '0')}
                      </span>
                      <span className="display" style={{ fontSize: 'clamp(22px, 2.2vw, 32px)', fontWeight: 700, lineHeight: 1.02, letterSpacing: '-0.025em', color: 'var(--ink)' }}>
                        {complex.label}
                      </span>
                    </span>
                    <span aria-hidden="true" style={{
                      display: isMobile ? 'flex' : 'none', alignItems: 'center', justifyContent: 'center',
                      flexShrink: 0, width: 34, height: 34, borderRadius: '50%',
                      border: `1.5px solid ${accent}`, color: accent, fontSize: 15,
                      transform: open ? 'rotate(180deg)' : 'none', transition: 'transform .22s',
                    }}>▾</span>
                  </button>

                  {/* Body */}
                  {open && (
                  <div style={{
                    display: 'grid',
                    gridTemplateColumns: 'minmax(220px, 0.78fr) minmax(0, 1.55fr)',
                    gap: 'clamp(20px, 2.6vw, 40px)',
                    padding: 'clamp(10px, 1.2vw, 14px) clamp(14px, 1.5vw, 20px) clamp(14px, 1.5vw, 20px)',
                    alignItems: 'stretch',
                  }}>

                  {/* Left: scenario idea + how-it-works-together line */}
                  <div style={{ display: 'flex', flexDirection: 'column' }}>
                    <p style={{ fontSize: 12.5, lineHeight: 1.45, color: 'var(--ink-soft)', marginBottom: 'auto', maxWidth: '40ch' }}>
                      {complex.idea}
                    </p>
                    <div style={{ marginTop: 12, paddingTop: 10, borderTop: `1px solid color-mix(in srgb, ${accent} 30%, var(--line))` }}>
                      <div style={{ fontSize: 9.5, letterSpacing: '0.1em', textTransform: 'uppercase', fontWeight: 700, color: accent, marginBottom: 5 }}>Разом це дає</div>
                      <p style={{ fontSize: 12.5, lineHeight: 1.45, color: 'var(--ink)', fontWeight: 500 }}>{complex.closing}</p>
                    </div>
                  </div>

                  {/* Right: products working in combination */}
                  <div>
                    <div style={{ fontSize: 9.5, letterSpacing: '0.1em', textTransform: 'uppercase', fontWeight: 700, color: 'var(--ink-mute)', marginBottom: 10 }}>
                      Як це працює разом
                    </div>
                    <div style={{ display: 'grid', gridTemplateColumns: '1fr auto 1fr auto 1fr', gap: 8, alignItems: 'start' }}>
                      {complex.products.flatMap((entry, idx) => {
                        const p = products.find(pr => pr.id === entry.id);
                        const alt = entry.alt && products.find(pr => pr.id === entry.alt);
                        const step = complex.how[idx];
                        const card = (
                          <div key={entry.id} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', textAlign: 'center', gap: 8 }}>
                            <div style={{ position: 'relative', width: '100%', height: 72, background: '#FFFFFF', border: '1px solid var(--line)', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 6 }}>
                              <img src={p.image} alt={p.name} data-zoomable="true" style={{ maxHeight: 56, width: 'auto', objectFit: 'contain', filter: 'drop-shadow(0 6px 12px rgba(10,10,10,0.14))' }} />
                              <span style={{ position: 'absolute', top: 5, left: 7, fontFamily: 'var(--font-display)', fontSize: 15, fontWeight: 800, letterSpacing: '-0.03em', color: accent, lineHeight: 1 }}>{String(idx + 1).padStart(2, '0')}</span>
                            </div>
                            <div>
                              <div style={{ fontFamily: 'var(--font-display)', fontSize: 12.5, fontWeight: 700, lineHeight: 1.12, letterSpacing: '-0.01em', marginBottom: 3 }}>
                                {p.name}
                              </div>
                              <div style={{ fontSize: 10, fontWeight: 600, letterSpacing: '0.06em', textTransform: 'uppercase', color: accent, lineHeight: 1.2 }}>{CAT_RELABEL[p.category] || CAT_LABELS[p.category] || p.category}</div>
                              <p style={{ fontSize: 10, lineHeight: 1.3, color: 'var(--ink-soft)', marginTop: 3 }}>{step ? step.d : entry.desc}</p>
                            </div>
                          </div>
                        );
                        if (idx === 0) return [card];
                        const plus = (
                          <div key={'plus-' + idx} aria-hidden="true" style={{
                            display: 'flex', alignItems: 'center', justifyContent: 'center',
                            marginTop: 36, width: 26, height: 26, borderRadius: '50%',
                            background: accent, color: '#fff', fontFamily: 'var(--font-display)',
                            fontSize: 17, fontWeight: 700, lineHeight: 1, flexShrink: 0,
                          }}>+</div>
                        );
                        return [plus, card];
                      })}
                    </div>
                  </div>
                  </div>
                  )}
                </div>
              </Reveal>
            );
          })}
        </div>
      </div>
    </section>
  );
}

window.SectionComplexes = SectionComplexes;