// Section 07 — Quality and trust
// Mobile-only: 10 trust facts grouped into 3 accordion sections (variant B)
function TrustGroupsMobile({ trust }) {
  const GROUPS = [
    { name: 'Інгредієнти', items: [0, 1, 2, 3, 4, 5] },
    { name: 'Виробництво', items: [7, 8] },
    { name: 'Постачальники й довіра', items: [6, 9] },
  ];
  const [open, setOpen] = React.useState(0);
  return (
    <div className="trust-accordion" style={{ flexDirection: 'column', gap: 8 }}>
      {GROUPS.map((g, gi) => {
        const on = open === gi;
        return (
          <div key={gi} style={{ border: '1px solid var(--line)', background: 'var(--bg-alt)', borderLeft: '3px solid var(--accent)' }}>
            <button onClick={() => setOpen(on ? -1 : gi)} style={{ appearance: 'none', cursor: 'pointer', width: '100%', textAlign: 'left', background: 'transparent', border: 'none', padding: '12px 14px', display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 10 }}>
              <span style={{ display: 'flex', alignItems: 'baseline', gap: 8 }}>
                <span style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 14.5, letterSpacing: '-0.01em' }}>{g.name}</span>
                <span style={{ fontSize: 10.5, color: 'var(--ink-mute)', fontWeight: 600 }}>{g.items.length}</span>
              </span>
              <span style={{ color: 'var(--accent)', fontSize: 13, transform: on ? 'rotate(180deg)' : 'none', transition: 'transform .2s' }}>▾</span>
            </button>
            {on && (
              <div style={{ padding: '0 14px 11px' }}>
                {g.items.map(idx => (
                  <div key={idx} style={{ display: 'flex', gap: 8, alignItems: 'baseline', padding: '8px 0', borderTop: '1px solid var(--line)' }}>
                    <span style={{ width: 5, height: 5, borderRadius: 999, background: 'var(--accent)', flexShrink: 0, transform: 'translateY(-1px)' }} />
                    <span><b style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 13 }}>{trust[idx].label}</b> <span style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontSize: 11.5, color: 'var(--ink-soft)' }}>— {trust[idx].sub}</span></span>
                  </div>
                ))}
              </div>
            )}
          </div>
        );
      })}
    </div>
  );
}

function SectionQuality({ trustStyle = 'cards' }) {
  const trust = window.MINDME_TRUST;
  const [zoomed, setZoomed] = React.useState(null);

  const certificates = [
    { src: 'uploads/cert-pivdentest.png', label: 'ДСТУ ISO 22000:2019', sub: 'Безпечність харчових продуктів · ПІВДЕНТЕСТ · 2024–2027' },
    { src: 'uploads/cert-gdp.png', label: 'GDP', sub: 'Належна дистрибʼюторська практика · виробничий партнер' },
  ];

  return (
    <section className="section" data-screen-label="06 Quality">
      <SectionMeta num="07" label="Якість і довіра" />
      <div className="shell">

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

        <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0, 0.5fr) minmax(0, 1.2fr) minmax(0, 0.7fr)', gap: 'var(--gap-wide)', alignItems: 'stretch' }}>

          {/* Left: ingredient image — single hero */}
          <Reveal>
            <div style={{ background: 'var(--bg-alt)', position: 'relative', overflow: 'hidden', height: '100%', minHeight: 340 }}>
              <img src="uploads/Harmony_Zen_clean.png" alt="Harmony Zen matcha" style={{
                position: 'absolute',
                inset: 0,
                width: '100%',
                height: '100%',
                objectFit: 'contain',
                objectPosition: 'center',
                padding: '6%',
              }} />
              <div style={{ position: 'absolute', left: 12, right: 12, bottom: 10, display: 'flex', justifyContent: 'space-between', fontSize: 9.5, fontWeight: 600, letterSpacing: '0.08em', textTransform: 'uppercase', color: '#0A0A0A' }}>
                <span>Церемоніальна матча</span>
                <span>Удзі, Японія</span>
              </div>
            </div>
          </Reveal>

          {/* Middle: trust facts — switchable style */}
          <TrustGroupsMobile trust={trust} />
          {trustStyle === 'tags' && (
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8, alignContent: 'flex-start' }}>
              {trust.map((t, i) => (
                <Reveal key={i} delay={i * 28}>
                  <div className="trust-chip" style={{
                    border: '1px solid var(--line)', background: 'var(--bg-alt)',
                    padding: '9px 14px', display: 'flex', alignItems: 'baseline', gap: 8,
                    transition: 'border-color var(--t-fast), background var(--t-fast)',
                  }}>
                    <span style={{ width: 5, height: 5, borderRadius: '50%', background: 'var(--accent)', flexShrink: 0, alignSelf: 'center' }} />
                    <span style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 12.5, letterSpacing: '-0.01em' }}>{t.label}</span>
                    <span style={{ fontSize: 10.5, color: 'var(--ink-soft)' }}>{t.sub}</span>
                  </div>
                </Reveal>
              ))}
            </div>
          )}

          {trustStyle === 'spec' && (
            <div style={{ display: 'flex', flexDirection: 'column', alignContent: 'start' }}>
              {trust.map((t, i) => (
                <Reveal key={i} delay={i * 28}>
                  <div style={{ display: 'flex', alignItems: 'baseline', gap: 10, padding: '9px 0', borderBottom: '1px solid var(--line)' }}>
                    <span style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 13, letterSpacing: '-0.01em', lineHeight: 1.2 }}>{t.label}</span>
                    <span style={{ flex: 1, alignSelf: 'center', minWidth: 14, borderTop: '1px dotted color-mix(in srgb, var(--ink) 40%, transparent)' }} />
                    <span style={{ fontSize: 11, color: 'var(--accent)', fontWeight: 600, textAlign: 'right', whiteSpace: 'nowrap' }}>{t.sub}</span>
                  </div>
                </Reveal>
              ))}
            </div>
          )}

          {trustStyle === 'list' && (
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', columnGap: 'clamp(20px, 2.5vw, 36px)', rowGap: 0, alignContent: 'start' }}>
              {trust.map((t, i) => (
                <Reveal key={i} delay={i * 35}>
                  <div style={{ display: 'flex', gap: 10, alignItems: 'baseline', padding: '11px 0', borderBottom: '1px solid var(--line)', height: '100%' }}>
                    <span style={{ width: 6, height: 6, borderRadius: '50%', background: 'var(--accent)', flexShrink: 0, transform: 'translateY(-1px)' }} />
                    <div>
                      <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 14, lineHeight: 1.15, letterSpacing: '-0.01em' }}>{t.label}</div>
                      <div style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontSize: 12.5, color: 'var(--ink-soft)', lineHeight: 1.3, marginTop: 2 }}>{t.sub}</div>
                    </div>
                  </div>
                </Reveal>
              ))}
            </div>
          )}

          {trustStyle === 'cards' && (
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 'clamp(8px, 1vw, 12px)', alignContent: 'start' }}>
              {trust.map((t, i) => (
                <Reveal key={i} delay={i * 35}>
                  <div className="trust-card" style={{
                    position: 'relative', overflow: 'hidden',
                    background: 'var(--bg-alt)', border: '1px solid var(--line)',
                    padding: '14px 15px 13px', height: '100%',
                    display: 'flex', flexDirection: 'column', gap: 4,
                    transition: 'border-color var(--t-fast), transform var(--t-fast), background var(--t-fast)',
                  }}>
                    <span aria-hidden="true" style={{
                      position: 'absolute', top: -10, right: 6,
                      fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontWeight: 400,
                      fontSize: 52, lineHeight: 1, color: 'var(--accent)', opacity: 0.12,
                      pointerEvents: 'none', userSelect: 'none',
                    }}>{String(i + 1).padStart(2, '0')}</span>
                    <span className="trust-rule" style={{ width: 22, height: 3, background: 'var(--accent)', marginBottom: 4, transition: 'width var(--t-fast)' }} />
                    <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 14, lineHeight: 1.12, letterSpacing: '-0.01em', position: 'relative', zIndex: 1 }}>{t.label}</div>
                    <div style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontSize: 12, color: 'var(--ink-soft)', lineHeight: 1.3, position: 'relative', zIndex: 1 }}>{t.sub}</div>
                  </div>
                </Reveal>
              ))}
            </div>
          )}

          {trustStyle === 'numbered' && (
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', columnGap: 'clamp(18px, 2.2vw, 32px)', rowGap: 0, alignContent: 'start' }}>
              {trust.map((t, i) => (
                <Reveal key={i} delay={i * 35}>
                  <div style={{ display: 'flex', gap: 12, alignItems: 'flex-start', padding: '12px 0', borderBottom: '1px solid var(--line)', height: '100%' }}>
                    <span style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 26, lineHeight: 0.85, letterSpacing: '-0.04em', color: 'var(--accent)', flexShrink: 0, width: 30 }}>{String(i + 1).padStart(2, '0')}</span>
                    <div>
                      <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 13.5, lineHeight: 1.15, letterSpacing: '-0.01em' }}>{t.label}</div>
                      <div style={{ fontSize: 11.5, color: 'var(--ink-soft)', lineHeight: 1.3, marginTop: 2 }}>{t.sub}</div>
                    </div>
                  </div>
                </Reveal>
              ))}
            </div>
          )}

          {/* Right: certificates — horizontal scroll strip (no extra vertical height) */}
          <Reveal delay={150}>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 10, height: '100%', minHeight: 340 }}>
              <div className="eyebrow" style={{ marginBottom: 0, color: 'var(--accent)', display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', gap: 10 }}>
                <span style={{ color: 'var(--ink-mute)', whiteSpace: 'nowrap', display: 'inline-flex', alignItems: 'baseline', gap: 8 }}>Сертифікати
                  <button onClick={() => { const el = document.getElementById('cert-strip'); if (el) el.scrollBy({ left: Math.round(el.clientWidth * 0.85), behavior: 'smooth' }); }} style={{ appearance: 'none', border: '1px solid var(--accent)', background: 'transparent', color: 'var(--accent)', cursor: 'pointer', fontFamily: 'inherit', fontSize: 9.5, letterSpacing: '0.08em', textTransform: 'uppercase', fontWeight: 700, padding: '4px 9px', whiteSpace: 'nowrap', display: 'inline-flex', alignItems: 'center', gap: 5 }}
                    onMouseEnter={e => { e.currentTarget.style.background = 'var(--accent)'; e.currentTarget.style.color = '#fff'; }}
                    onMouseLeave={e => { e.currentTarget.style.background = 'transparent'; e.currentTarget.style.color = 'var(--accent)'; }}>гортайте <span className="cert-swipe" style={{ fontSize: 12 }}>→</span></button>
                </span>
              </div>
              <div id="cert-strip" onWheel={(e) => { if (e.deltaY !== 0) { e.currentTarget.scrollLeft += e.deltaY; } }} style={{ display: 'flex', gap: 10, overflowX: 'auto', flex: 1, minHeight: 0, paddingBottom: 6, scrollSnapType: 'x mandatory', WebkitOverflowScrolling: 'touch', cursor: 'grab' }}>
              {certificates.map((cert, i) => (
                cert.isPdf ? (
                  <a
                    key={i}
                    href={cert.src}
                    target="_blank"
                    rel="noopener noreferrer"
                    style={{
                      background: 'var(--bg-alt)',
                      border: '1px solid var(--line)',
                      padding: 0,
                      cursor: 'pointer',
                      display: 'grid',
                      gridTemplateRows: '1fr auto',
                      overflow: 'hidden',
                      textAlign: 'left',
                      fontFamily: 'inherit',
                      flex: 1,
                      minHeight: 220,
                      textDecoration: 'none',
                      color: 'inherit',
                      transition: 'transform var(--t-fast), border-color var(--t-fast)',
                    }}
                    onMouseEnter={e => { e.currentTarget.style.transform = 'translateY(-3px)'; e.currentTarget.style.borderColor = 'var(--ink)'; }}
                    onMouseLeave={e => { e.currentTarget.style.transform = 'translateY(0)'; e.currentTarget.style.borderColor = 'var(--line)'; }}>
                    <div style={{ position: 'relative', overflow: 'hidden', display: 'flex', alignItems: 'stretch', justifyContent: 'center', padding: 8, background: '#FFFFFF' }}>
                      <embed
                        src={`${cert.src}#toolbar=0&navpanes=0&scrollbar=0&view=FitH`}
                        type="application/pdf"
                        style={{ width: '100%', height: '100%', minHeight: 180, border: 'none', pointerEvents: 'none' }}
                      />
                      {/* Fallback PDF icon if embed fails */}
                      <noscript>
                        <svg width="48" height="60" viewBox="0 0 48 60" fill="none" stroke="currentColor" strokeWidth="1.5">
                          <path d="M6 2 H 30 L 42 14 V 58 H 6 Z" strokeLinejoin="round" />
                          <path d="M30 2 V 14 H 42" strokeLinejoin="round" />
                        </svg>
                      </noscript>
                      <span style={{ position: 'absolute', top: 8, right: 8, padding: '4px 8px', background: 'var(--ink)', color: 'var(--bg)', fontSize: 9, letterSpacing: '0.08em', fontWeight: 700, textTransform: 'uppercase' }}>
                        Відкрити PDF
                      </span>
                    </div>
                    <div style={{ padding: '10px 12px', borderTop: '1px solid var(--line)', background: 'var(--bg-alt)' }}>
                      <div style={{ fontFamily: 'var(--font-display)', fontSize: 13, fontWeight: 700, letterSpacing: '-0.01em', marginBottom: 2 }}>{cert.label}</div>
                      <div style={{ fontSize: 10.5, color: 'var(--ink-soft)', lineHeight: 1.35 }}>{cert.sub}</div>
                    </div>
                  </a>
                ) : (
                  <button
                    key={i}
                    onClick={() => setZoomed(cert)}
                    style={{
                      appearance: 'none',
                      background: 'var(--bg-alt)',
                      border: '1px solid var(--line)',
                      padding: 0,
                      cursor: 'zoom-in',
                      display: 'grid',
                      gridTemplateRows: '1fr auto',
                      overflow: 'hidden',
                      textAlign: 'left',
                      fontFamily: 'inherit',
                      flex: '0 0 72%',
                      height: '100%',
                      minHeight: 0,
                      scrollSnapAlign: 'start',
                      transition: 'transform var(--t-fast), border-color var(--t-fast)',
                    }}
                    onMouseEnter={e => { e.currentTarget.style.transform = 'translateY(-3px)'; e.currentTarget.style.borderColor = 'var(--ink)'; }}
                    onMouseLeave={e => { e.currentTarget.style.transform = 'translateY(0)'; e.currentTarget.style.borderColor = 'var(--line)'; }}>
                    <div style={{ position: 'relative', overflow: 'hidden', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 10, background: '#FFFFFF' }}>
                      <img src={cert.src} alt={cert.label} style={{ maxWidth: '100%', maxHeight: '100%', objectFit: 'contain' }} />
                      <span style={{ position: 'absolute', top: 8, right: 8, padding: '4px 8px', background: 'var(--ink)', color: 'var(--bg)', fontSize: 9, letterSpacing: '0.08em', fontWeight: 700, textTransform: 'uppercase' }}>
                        Збільшити
                      </span>
                    </div>
                    <div style={{ padding: '10px 12px', borderTop: '1px solid var(--line)', background: 'var(--bg-alt)' }}>
                      <div style={{ fontFamily: 'var(--font-display)', fontSize: 13, fontWeight: 700, letterSpacing: '-0.01em', marginBottom: 2 }}>{cert.label}</div>
                      <div style={{ fontSize: 10.5, color: 'var(--ink-soft)', lineHeight: 1.35 }}>{cert.sub}</div>
                    </div>
                  </button>
                )
              ))}
              </div>
              {/* Placeholder removed — both certificates now present */}
            </div>
          </Reveal>
        </div>

        {/* Zoom overlay */}
        {zoomed && (
          <div
            onClick={() => setZoomed(null)}
            style={{
              position: 'fixed',
              inset: 0,
              background: 'rgba(10, 10, 10, 0.85)',
              zIndex: 100,
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
              padding: 'clamp(20px, 4vw, 64px)',
              cursor: 'zoom-out',
              animation: 'fadeIn 220ms ease',
            }}>
            <div style={{ position: 'relative', maxWidth: '92vw', maxHeight: '92vh', background: '#FFFFFF', padding: 'clamp(12px, 1.5vw, 24px)', boxShadow: '0 40px 80px rgba(0,0,0,0.4)' }}>
              <img src={zoomed.src} alt={zoomed.label} style={{ maxWidth: '100%', maxHeight: 'calc(92vh - 80px)', objectFit: 'contain', display: 'block' }} />
              <div style={{ marginTop: 12, display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', gap: 16 }}>
                <div>
                  <div style={{ fontFamily: 'var(--font-display)', fontSize: 16, fontWeight: 700, letterSpacing: '-0.01em', color: 'var(--ink)' }}>{zoomed.label}</div>
                  <div style={{ fontSize: 12, color: 'var(--ink-soft)', marginTop: 2 }}>{zoomed.sub}</div>
                </div>
                <button onClick={(e) => { e.stopPropagation(); setZoomed(null); }} style={{
                  appearance: 'none',
                  background: 'var(--ink)',
                  color: 'var(--bg)',
                  border: 'none',
                  padding: '8px 14px',
                  fontSize: 11,
                  letterSpacing: '0.08em',
                  textTransform: 'uppercase',
                  fontWeight: 700,
                  cursor: 'pointer',
                  fontFamily: 'inherit',
                }}>Закрити ×</button>
              </div>
            </div>
          </div>
        )}

        <style>{`
          @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
          @keyframes certSwipe { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(4px); } }
          .cert-swipe { display: inline-block; animation: certSwipe 1.4s ease-in-out infinite; }
          .trust-card:hover { border-color: var(--accent) !important; transform: translateY(-2px); background: color-mix(in srgb, var(--accent) 6%, var(--bg-alt)) !important; }
          .trust-card:hover .trust-rule { width: 38px !important; }
          .trust-chip:hover { border-color: var(--accent) !important; background: color-mix(in srgb, var(--accent) 7%, var(--bg-alt)) !important; }
          @media (prefers-reduced-motion: reduce) { .cert-swipe { animation: none; } }
        `}</style>
      </div>
    </section>
  );
}

window.SectionQuality = SectionQuality;