// Section 01 — Hero (split editorial cover)
// Running ticker used in the hero footer
function HeroMarquee({ children, speed = 24 }) {
  return (
    <div className="hero-mq">
      <div className="hero-mq__track" style={{ animationDuration: speed + 's' }}>
        <div className="hero-mq__grp">{children}</div>
        <div className="hero-mq__grp" aria-hidden="true">{children}</div>
      </div>
    </div>
  );
}

function SectionHero() {
  const productRoll = [
    'Кава', 'Какао', 'Матча', 'Супер Грінс', 'Супер Редс', 'Колагенові вершки',
  ];

  return (
    <section
      className="section"
      data-screen-label="01 Hero"
      style={{
        padding: 0,
        position: 'relative',
        minHeight: '100vh',
        height: '100vh',
        overflow: 'hidden',
        background: 'var(--bg)',
      }}>

      <SectionMeta num="02" label="Про бренд" />

      <div className="shell" style={{
        position: 'relative',
        zIndex: 2,
        height: '100%',
        display: 'grid',
        gridTemplateColumns: 'minmax(0, 1fr) minmax(0, 0.85fr)',
        gridTemplateRows: '1fr auto',
        gridTemplateAreas: '"headline image" "footer footer"',
        gap: 'clamp(16px, 2vw, 28px) clamp(28px, 4vw, 64px)',
        paddingTop: 'clamp(48px, 5vw, 80px)',
        paddingBottom: 'clamp(20px, 2.5vw, 32px)',
      }}>



        {/* Headline column */}
        <div style={{ gridArea: 'headline', display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
          <Reveal delay={300}>
            <h1 className="display" style={{
              fontSize: 'clamp(48px, 7.4vw, 124px)',
              fontWeight: 700,
              letterSpacing: '-0.045em',
              lineHeight: 0.88,
              marginBottom: 'clamp(16px, 2vw, 28px)',
              textWrap: 'balance',
            }}>
              <span style={{ display: 'block' }}>Підтримка</span>
              <span style={{ display: 'block', fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontWeight: 400, letterSpacing: '-0.04em', color: 'var(--accent)' }}>організму</span>
              <span style={{ display: 'block' }}>як невідʼємна частина дня.</span>
            </h1>
          </Reveal>

          <Reveal delay={450}>
            <p style={{
              fontSize: 'clamp(15px, 1.2vw, 18px)',
              lineHeight: 1.5,
              color: 'var(--ink-soft)',
              maxWidth: '38ch',
              textWrap: 'pretty',
              fontWeight: 500,
            }}>
              Щоденні продукти для тих, хто хоче легше тримати свій стан: енергію, ясність, баланс, красу й турботу про тіло — без складних схем.
            </p>
          </Reveal>
        </div>

        {/* Image column — vertical portrait card */}
        <Reveal delay={400} style={{ gridArea: 'image', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <figure style={{
            position: 'relative',
            width: '100%',
            height: '100%',
            maxHeight: 'min(620px, 70vh)',
            overflow: 'hidden',
            background: 'var(--bg-alt)',
            boxShadow: '0 30px 60px -20px rgba(10,10,10,0.25)',
          }}>
            <img src="uploads/lifestyle-antistress-pour.png" alt="Наливання крему у каву MindMe Antistress" data-zoomable="true" style={{
              position: 'absolute',
              inset: 0,
              width: '100%',
              height: '100%',
              objectFit: 'cover',
              objectPosition: 'center',
            }} />
            {/* Corner mark */}
            <div style={{
              position: 'absolute',
              top: 14, left: 14,
              padding: '5px 9px',
              background: 'var(--ink)',
              color: 'var(--bg)',
              fontSize: 9.5,
              fontFamily: 'var(--font-display)',
              fontWeight: 700,
              letterSpacing: '0.1em',
              textTransform: 'uppercase',
            }}>
              Antistress · Coffee
            </div>
            {/* Bottom caption */}
            <figcaption style={{
              position: 'absolute',
              left: 14, right: 14, bottom: 12,
              fontSize: 10,
              letterSpacing: '0.12em',
              textTransform: 'uppercase',
              color: '#FFFFFF',
              fontWeight: 700,
              textShadow: '0 1px 2px rgba(0,0,0,0.5)',
              display: 'flex',
              justifyContent: 'space-between',
            }}>
              <span>Ранковий ритуал</span>
              <span>фото 01</span>
            </figcaption>
          </figure>
        </Reveal>

        {/* Footer — two tiers: product line + counter, then stats */}
        <Reveal delay={650} style={{ gridArea: 'footer' }}>
          <div style={{
            display: 'flex',
            flexDirection: 'column',
            gap: 'clamp(10px, 1.1vw, 14px)',
            paddingTop: 14,
            borderTop: '1px solid var(--ink)',
            fontSize: 12,
          }}>
            {/* Tier 1 — product roll (left) + slide counter (right) */}
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 24 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 10, minWidth: 0, flex: 1 }}>
                <span style={{
                  fontSize: 10,
                  letterSpacing: '0.14em',
                  textTransform: 'uppercase',
                  fontWeight: 700,
                  color: 'var(--ink-mute)',
                  fontFamily: 'var(--font-display)',
                  flexShrink: 0,
                }}>Що входить</span>
                <HeroMarquee speed={26}>
                  {productRoll.map((p) => (
                    <React.Fragment key={p}>
                      <span style={{
                        fontFamily: 'var(--font-display)',
                        fontSize: 13,
                        fontWeight: 700,
                        letterSpacing: '-0.01em',
                        color: 'var(--ink)',
                      }}>{p}</span>
                      <span style={{ color: 'var(--ink-mute)', fontSize: 9 }}>●</span>
                    </React.Fragment>
                  ))}
                </HeroMarquee>
              </div>

              <div className="slide-counter" style={{ display: 'flex', alignItems: 'center', gap: 14, fontFamily: 'var(--font-display)', fontWeight: 700, flexShrink: 0 }}>
                <span style={{
                  display: 'inline-block',
                  width: 22,
                  height: 1.5,
                  background: 'var(--ink)',
                  animation: 'heroScrollLine 1.4s ease-in-out infinite',
                }} />
                <span style={{ letterSpacing: '0.08em', color: 'var(--ink)' }}>02 / 09</span>
              </div>
            </div>

            {/* Tier 2 — stats (running ticker) */}
            <div style={{
              fontFamily: 'var(--font-display)',
              color: 'var(--ink-soft)',
              paddingTop: 'clamp(8px, 1vw, 12px)',
              borderTop: '1px solid var(--line)',
            }}>
              <HeroMarquee speed={32}>
                <span style={{ marginRight: 30 }}><span style={{ fontWeight: 800, fontSize: 17, color: 'var(--accent)' }}>13</span>&nbsp;продуктів</span>
                <span style={{ marginRight: 30 }}><span style={{ fontWeight: 800, fontSize: 17, color: 'var(--accent)' }}>6</span>&nbsp;категорій</span>
                <span style={{ marginRight: 30, fontWeight: 700, color: 'var(--ink)' }}>готові комплекси продуктів під різні потреби</span>
              </HeroMarquee>
            </div>
          </div>
        </Reveal>
      </div>

      <style>{`
        @keyframes heroScrollLine {
          0%, 100% { transform: scaleX(1); transform-origin: left; }
          50% { transform: scaleX(0.35); transform-origin: left; }
        }
        [data-theme="dark"] .brand-logo { filter: invert(1); }
        .hero-mq { overflow: hidden; width: 100%; min-width: 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
        .hero-mq__track { display: flex; width: max-content; animation-name: heroMarquee; animation-timing-function: linear; animation-iteration-count: infinite; }
        .hero-mq__grp { display: flex; align-items: center; gap: 10px; padding-right: 10px; flex: 0 0 auto; white-space: nowrap; }
        @keyframes heroMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
        @media (prefers-reduced-motion: reduce) { .hero-mq__track { animation: none; } }
        @media (min-width: 761px) {
          .hero-mq { -webkit-mask-image: none; mask-image: none; }
          .hero-mq__track { animation: none; }
          .hero-mq__grp[aria-hidden="true"] { display: none; }
        }
      `}</style>
    </section>
  );
}

window.SectionHero = SectionHero;