// HowItWorks — vertical timeline, 5 steps, animated line draw on scroll
const { useEffect: useHIWEffect, useRef: useHIWRef, useState: useHIWState } = React;

const steps = [
  {
    num: '01',
    title: 'Krátký vstupní brief',
    desc: 'Projdeme produkt, značku, cílovku a to, jaký typ reklamy má dávat smysl.',
  },
  {
    num: '02',
    title: 'Základní nacítění toho, co může fungovat',
    desc: 'Podíváme se na web, produkt, benefity, konkurenci a případně i reklamy, které klient už použil. Ideálně když nám to ale řeknete vy nebo váš markeťák.',
  },
  {
    num: '03',
    title: 'Pustíme se do práce',
    desc: 'Kombinujeme AI workflow a práci grafika. Hlídáme, aby výstup vypadal uvěřitelně a nebyl plný AI nesmyslů.',
  },
  {
    num: '04',
    title: 'Kreativy pošleme ke schválení',
    desc: 'Kreativy dostanete ke schválení a zpracujeme případné připomínky.',
  },
  {
    num: '05',
    title: 'Export připravený do Meta Ads',
    desc: 'Dodáme finální JPG/PNG soubory připravené ke spuštění.',
  },
];

function TimelineStep({ step, index, lineProgress }) {
  const isActive = lineProgress > index / steps.length;
  const dotProgress = Math.max(0, Math.min(1, (lineProgress - (index / steps.length)) / (1 / steps.length)));

  return (
    <Reveal delay={index * 120} y={20}>
      <div style={{
        display: 'grid',
        gridTemplateColumns: '48px 1fr',
        gap: '24px',
        alignItems: 'flex-start',
      }}>
        {/* Left — number + dot */}
        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', paddingTop: '2px' }}>
          <div style={{
            width: '36px', height: '36px',
            borderRadius: '999px',
            background: isActive ? 'var(--accent)' : 'var(--surface)',
            border: `1px solid ${isActive ? 'var(--accent)' : 'var(--border)'}`,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            flexShrink: 0,
            boxShadow: isActive ? '0 0 16px rgba(247,19,63,0.35)' : 'none',
            transition: 'background 600ms cubic-bezier(0.65, 0, 0.35, 1), border-color 600ms, box-shadow 600ms',
          }}>
            <span style={{
              fontFamily: 'var(--font-mono)', fontSize: '10px',
              fontWeight: 700, letterSpacing: '0.05em',
              color: isActive ? '#fff' : 'var(--text-tertiary)',
              transition: 'color 600ms',
            }}>{step.num}</span>
          </div>
        </div>

        {/* Right — content */}
        <div style={{ paddingBottom: index < steps.length - 1 ? '56px' : '0' }}>
          <h3 style={{
            fontFamily: 'var(--font-display)', fontWeight: 600,
            fontSize: 'clamp(18px, 1.8vw, 24px)',
            letterSpacing: '-0.015em', lineHeight: 1.2,
            color: isActive ? 'var(--text-primary)' : 'var(--text-secondary)',
            margin: '0 0 10px',
            transition: 'color 600ms',
          }}>{step.title}</h3>
          <p style={{
            fontFamily: 'var(--font-body)', fontSize: '15px',
            color: 'var(--text-secondary)', lineHeight: 1.6,
            margin: 0, maxWidth: '52ch',
            opacity: isActive ? 1 : 0.5,
            transition: 'opacity 600ms',
          }}>{step.desc}</p>
        </div>
      </div>
    </Reveal>
  );
}

function HowItWorks() {
  const sectionRef = useHIWRef(null);
  const lineRef = useHIWRef(null);
  const [lineProgress, setLineProgress] = useHIWState(0);

  useHIWEffect(() => {
    const reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
    if (reduced) { setLineProgress(1); return; }

    const onScroll = () => {
      const el = sectionRef.current;
      if (!el) return;
      const rect = el.getBoundingClientRect();
      const vh = window.innerHeight;
      // complete when the whole section is visible in viewport
      const scrolled = vh - rect.top;
      const progress = Math.max(0, Math.min(1, scrolled / rect.height));
      setLineProgress(progress);
    };

    window.addEventListener('scroll', onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  return (
    <section data-screen-label="06 Jak to probíhá" style={{
      maxWidth: '1280px', margin: '0 auto',
      padding: '65px 32px',
    }}>
      <NumberedHeader
        num="06"
        title="Jak to probíhá."
        sub="Od prvního kontaktu po hotové bannery v Meta Ads."
      />

      <div style={{
        display: 'grid',
        gridTemplateColumns: '1fr 1fr',
        gap: '0 80px',
        alignItems: 'start',
      }}>
        {/* Left — timeline */}
        <div ref={sectionRef} style={{ position: 'relative' }}>
          {/* Animated line */}
          <div style={{
            position: 'absolute',
            left: '17px',
            top: '36px',
            width: '2px',
            bottom: '36px',
            background: 'var(--border-subtle)',
            borderRadius: '999px',
            overflow: 'hidden',
          }}>
            <div ref={lineRef} style={{
              position: 'absolute',
              top: 0, left: 0, right: 0,
              height: `${lineProgress * 100}%`,
              background: 'linear-gradient(to bottom, var(--accent), rgba(247,19,63,0.3))',
              borderRadius: '999px',
              transition: 'height 200ms linear',
            }} />
          </div>

          {/* Steps */}
          <div>
            {steps.map((step, i) => (
              <TimelineStep key={step.num} step={step} index={i} lineProgress={lineProgress} />
            ))}
          </div>
        </div>

        {/* Right — sticky context box */}
        <Reveal delay={300} y={24}>
          <div style={{
            position: 'sticky', top: '120px',
            background: 'var(--surface)',
            border: '1px solid var(--border)',
            borderRadius: '16px',
            padding: '36px',
            display: 'flex', flexDirection: 'column', gap: '24px',
          }}>
            <div style={{
              display: 'flex', alignItems: 'center', gap: '10px',
              fontFamily: 'var(--font-mono)', fontSize: '10px',
              color: 'var(--text-tertiary)', letterSpacing: '0.15em',
            }}>
              <span style={{
                width: '7px', height: '7px', borderRadius: '999px',
                background: 'var(--accent)',
                animation: 'recBlink 1.4s ease-in-out infinite',
              }} />
              ADS STUDIO · GALANDR
            </div>

            <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
              <p style={{
                fontFamily: 'var(--font-display)', fontWeight: 600,
                fontSize: 'clamp(20px, 1.8vw, 26px)', letterSpacing: '-0.015em',
                lineHeight: 1.25, color: 'var(--text-primary)', margin: 0,
              }}>
                Popište váš produkt<br />a cíl kampaně.
              </p>
              <p style={{
                fontFamily: 'var(--font-body)', fontSize: '15px',
                color: 'var(--text-secondary)', lineHeight: 1.6, margin: 0,
              }}>
                Cenu sestavíme podle rozsahu.
              </p>
            </div>

            <div style={{ height: '1px', background: 'var(--border-subtle)' }} />

            <div style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
              {[
                'Statické bannery pro Meta Ads',
                'AI videa a motion bannery',
                'Kreativní varianty pro A/B test',
                'Whitelabel spolupráce',
              ].map((item, i) => (
                <div key={i} style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
                  <span style={{ width: '5px', height: '5px', borderRadius: '999px', background: 'var(--accent)', flexShrink: 0 }} />
                  <span style={{ fontFamily: 'var(--font-body)', fontSize: '14px', color: 'var(--text-secondary)' }}>{item}</span>
                </div>
              ))}
            </div>

            <CTA size="lg">Chci nabídku na míru</CTA>

            <div style={{ display: 'flex', flexDirection: 'column', gap: '6px' }}>
              <a href="mailto:agentura@galandr.com" style={{ fontFamily: 'var(--font-body)', fontSize: '13px', color: 'var(--text-secondary)', textDecoration: 'none' }}>agentura@galandr.com</a>
              <a href="tel:+420776292036" style={{ fontFamily: 'var(--font-mono)', fontSize: '12px', color: 'var(--text-tertiary)', textDecoration: 'none', letterSpacing: '0.05em' }}>+420 776 292 036</a>
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

window.HowItWorks = HowItWorks;