function Screens() {
  const list = [
    { src: 'assets/screen-home.png',     label: 'Главная', k: 'Сегодня' },
    { src: 'assets/screen-balance.png',  label: 'Аналитика', k: 'Карта здоровья' },
    { src: 'assets/screen-nutrients.png',label: 'Нутриенты', k: 'БЖУ + калории' },
    { src: 'assets/screen-vitamins.png', label: 'Витамины', k: 'Микро всё' },
    { src: 'assets/screen-cards.png',    label: 'Тело', k: 'Шаги, сон, ЖКТ' },
    { src: 'assets/screen-add.png',      label: 'Добавить', k: 'Фото, голос, текст' },
  ];

  const scrollRef = React.useRef(null);
  const [progress, setProgress] = React.useState(0);
  const [visibleRatio, setVisibleRatio] = React.useState(1);

  const updateScroll = React.useCallback(() => {
    const el = scrollRef.current;
    if (!el) return;
    const max = el.scrollWidth - el.clientWidth;
    setProgress(max > 0 ? el.scrollLeft / max : 0);
    setVisibleRatio(el.scrollWidth > 0 ? Math.min(1, el.clientWidth / el.scrollWidth) : 1);
  }, []);

  React.useEffect(() => {
    updateScroll();
    window.addEventListener('resize', updateScroll);
    return () => window.removeEventListener('resize', updateScroll);
  }, [updateScroll]);

  const showCustomBar = visibleRatio < 1;

  return (
    <section id="screens" className="pad-y-lg">
      <div className="wrap">
        <Reveal>
          <SectionLabel n={5}>Внутри</SectionLabel>
          <h2 className="display" style={{ fontSize: 'clamp(40px, 6vw, 80px)', margin: '0 0 16px', maxWidth: '16ch' }}>
            Чистая инфографика. <span style={{ color: 'var(--violet)' }}>Никаких таблиц.</span>
          </h2>
          <p className="lede" style={{ marginBottom: 56 }}>
            Спокойный интерфейс, логичные сценарии, понятные данные. Ничего лишнего.
          </p>
        </Reveal>

        <div ref={scrollRef} onScroll={updateScroll} className="screens-scroll" style={{
          display: 'flex', gap: 24, overflowX: 'auto',
          paddingBottom: 16, paddingRight: 24,
          scrollSnapType: 'x mandatory',
          WebkitOverflowScrolling: 'touch',
        }}>
          {list.map((s, i) => (
            <div key={i} className="glass" style={{
              flex: '0 0 320px',
              padding: 28, paddingBottom: 0, overflow: 'hidden',
              position: 'relative', height: 540,
              display: 'flex', flexDirection: 'column',
              scrollSnapAlign: 'start',
            }}>
              <div className="eyebrow" style={{ color: 'var(--violet)', marginBottom: 6 }}>{s.label}</div>
              <h3 style={{
                margin: 0, fontFamily: 'var(--display)', fontWeight: 700,
                fontSize: 26, letterSpacing: '-0.02em', marginBottom: 28,
              }}>{s.k}</h3>
              <div style={{ flex: 1, position: 'relative' }}>
                <div style={{
                  position: 'absolute', top: 0, left: '50%', transform: 'translateX(-50%)',
                }}>
                  <PhoneFrame width={190}>
                    <img src={s.src} alt="" style={{
                      width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'top',
                    }}/>
                  </PhoneFrame>
                </div>
              </div>
            </div>
          ))}
        </div>

        {showCustomBar && (
          <div className="screens-bar" style={{
            position: 'relative',
            height: 6, marginTop: 12,
            borderRadius: 3,
            background: 'rgba(255,255,255,0.08)',
            overflow: 'hidden',
          }}>
            <div style={{
              position: 'absolute', top: 0, left: 0,
              height: '100%',
              width: `${visibleRatio * 100}%`,
              transform: `translateX(${(progress / Math.max(visibleRatio, 0.0001)) * (1 - visibleRatio) * 100}%)`,
              background: 'linear-gradient(90deg, var(--violet), var(--pink))',
              borderRadius: 3,
              boxShadow: '0 0 12px rgba(236,72,153,0.55)',
              transition: 'transform .08s linear',
            }}/>
          </div>
        )}
      </div>
      <style>{`
        .screens-scroll { scrollbar-width: none; }
        .screens-scroll::-webkit-scrollbar { display: none; }
      `}</style>
    </section>
  );
}
window.Screens = Screens;