// Process — interactive 4-step timeline with scroll reveal + click-to-expand
function Process({ lang }) {
  const t = (de, pl) => lang === 'de' ? de : pl;
  const isMobile = window.useIsMobile ? window.useIsMobile() : false;
  const steps = [
    {
      n: '01',
      title: t('Erstgespräch','Pierwsza rozmowa'),
      d: t('Kostenloser Call. Wir lernen dein Business kennen.','Bezpłatna rozmowa. Poznajemy Twój biznes.'),
      duration: t('30 Min','30 min'),
      deliverables: [
        t('Bedarfs-Analyse','Analiza potrzeb'),
        t('Erste Ideen & Empfehlungen','Wstępne pomysły i rekomendacje'),
        t('Klare nächste Schritte','Jasne kolejne kroki')
      ],
      youDo: t('Erzähl uns von deinem Business.','Opowiedz nam o swoim biznesie.')
    },
    {
      n: '02',
      title: t('Strategie & Angebot','Strategia i oferta'),
      d: t('Maßgeschneiderter Plan mit klaren Zielen und Preisen.','Spersonalizowany plan z jasnymi celami i cenami.'),
      duration: t('3–5 Tage','3–5 dni'),
      deliverables: [
        t('Strategie-Dokument','Dokument strategii'),
        t('Content- & Automations-Plan','Plan contentu i automatyzacji'),
        t('Transparentes Festpreis-Angebot','Przejrzysta oferta z ceną stałą')
      ],
      youDo: t('Feedback geben & Angebot freigeben.','Daj feedback i zatwierdź ofertę.')
    },
    {
      n: '03',
      title: t('Umsetzung','Realizacja'),
      d: t('Wir produzieren, automatisieren und launchen.','Produkujemy, automatyzujemy, uruchamiamy.'),
      duration: t('2–6 Wochen','2–6 tygodni'),
      deliverables: [
        t('Content-Produktion','Produkcja contentu'),
        t('Automations-Setup (n8n / API)','Setup automatyzacji (n8n / API)'),
        t('Launch & Übergabe','Launch i przekazanie')
      ],
      youDo: t('Wöchentliche Updates checken.','Sprawdzaj cotygodniowe aktualizacje.')
    },
    {
      n: '04',
      title: t('Optimierung','Optymalizacja'),
      d: t('Kontinuierliches Monitoring und Skalierung.','Stały monitoring i skalowanie.'),
      duration: t('Laufend','Na bieżąco'),
      deliverables: [
        t('Performance-Reporting','Raporty wydajności'),
        t('A/B-Tests & Iteration','Testy A/B i iteracja'),
        t('Skalierung der Automations','Skalowanie automatyzacji')
      ],
      youDo: t('Ergebnisse genießen. Wir machen den Rest.','Ciesz się rezultatami. Resztą zajmujemy się my.')
    }
  ];

  const [active, setActive] = React.useState(null);
  const [revealed, setRevealed] = React.useState(false);
  const [progress, setProgress] = React.useState(0);
  const sectionRef = React.useRef(null);

  React.useEffect(() => {
    const el = sectionRef.current;
    if (!el) return;
    let ticking = false;
    const onScroll = () => {
      if (ticking) return;
      ticking = true;
      requestAnimationFrame(() => {
        const r = el.getBoundingClientRect();
        const vh = window.innerHeight;
        if (r.top < vh * 0.8) setRevealed(true);
        const start = vh * 0.7;
        const end = vh * 0.2;
        const p = (start - r.top) / (start - end);
        setProgress(Math.max(0, Math.min(1, p)));
        ticking = false;
      });
    };
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    window.addEventListener('resize', onScroll);
    return () => {
      window.removeEventListener('scroll', onScroll);
      window.removeEventListener('resize', onScroll);
    };
  }, []);

  const liveStep = Math.min(steps.length - 1, Math.floor(progress * steps.length));

  return (
    <section id="process" ref={sectionRef} className="section" style={{ padding: isMobile ? '80px 0' : '120px 0' }}>
      <div className="container">
        <div style={{ marginBottom: isMobile ? 44 : 72 }}>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--gold)', letterSpacing: '.25em', textTransform: 'uppercase', marginBottom: 18 }}>— {t('Prozess','Proces')}</div>
          <h2 style={{
            fontFamily: 'var(--font-display)',
            fontSize: isMobile ? 'clamp(34px, 9vw, 44px)' : 64,
            lineHeight: 1.05, letterSpacing: '-0.03em', maxWidth: 900
          }}>
            {t('Vom Erstgespräch zum Ergebnis — in 4 Schritten.','Od pierwszej rozmowy do rezultatu — w 4 krokach.')}
          </h2>
          <p style={{ marginTop: 18, fontFamily: 'var(--font-body)', fontSize: 12, fontWeight: 500, color: 'var(--text-2)', letterSpacing: '.16em', textTransform: 'uppercase', opacity: .7 }}>
            {t('Klick auf einen Schritt für Details','Kliknij krok, aby zobaczyć szczegóły')}
          </p>
        </div>

        <div style={{
          display: 'grid',
          gridTemplateColumns: isMobile ? '1fr' : 'repeat(4,1fr)',
          gap: isMobile ? 20 : 24,
          position: 'relative'
        }}>
          {!isMobile && (
            <div style={{ position: 'absolute', top: 28, left: '12%', right: '12%', height: 1 }}>
              <div style={{ position: 'absolute', inset: 0, background: 'rgba(212,175,55,.15)' }}/>
              <div style={{
                position: 'absolute', top: 0, left: 0, height: 1,
                width: `${progress * 100}%`,
                background: 'linear-gradient(90deg, rgba(212,175,55,.1), var(--gold))',
                boxShadow: '0 0 12px rgba(212,175,55,.6)',
                transition: 'width .25s ease-out'
              }}/>
            </div>
          )}

          {isMobile && (
            <div style={{ position: 'absolute', top: 28, bottom: 28, left: 27, width: 1 }}>
              <div style={{ position: 'absolute', inset: 0, background: 'rgba(212,175,55,.15)' }}/>
              <div style={{
                position: 'absolute', top: 0, left: 0, width: 1,
                height: `${progress * 100}%`,
                background: 'linear-gradient(180deg, rgba(212,175,55,.1), var(--gold))',
                boxShadow: '0 0 12px rgba(212,175,55,.6)',
                transition: 'height .25s ease-out'
              }}/>
            </div>
          )}

          {steps.map((s, i) => {
            const isOpen = active === i;
            const isLive = revealed && i <= liveStep;
            const reveal = revealed;
            return (
              <div
                key={s.n}
                onClick={() => setActive(isOpen ? null : i)}
                role="button"
                tabIndex={0}
                onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); setActive(isOpen ? null : i); } }}
                style={{
                  position: 'relative',
                  textAlign: 'left',
                  display: isMobile ? 'grid' : 'block',
                  gridTemplateColumns: isMobile ? '56px 1fr' : undefined,
                  gap: isMobile ? 20 : 0,
                  alignItems: isMobile ? 'start' : undefined,
                  cursor: 'pointer',
                  opacity: reveal ? 1 : 0,
                  transform: reveal ? 'translateY(0)' : 'translateY(24px)',
                  transition: `opacity .7s cubic-bezier(.2,.7,.2,1) ${i * 120}ms, transform .7s cubic-bezier(.2,.7,.2,1) ${i * 120}ms`,
                  outline: 'none'
                }}
              >
                <div style={{
                  width: 56, height: 56, borderRadius: '50%',
                  background: isLive ? 'radial-gradient(circle at 30% 30%, rgba(212,175,55,.18), #0A0A0A 70%)' : '#0A0A0A',
                  border: `1px solid ${isLive ? 'var(--gold)' : 'rgba(212,175,55,.4)'}`,
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  fontFamily: 'var(--font-display)', fontSize: 20,
                  color: 'var(--gold)',
                  marginBottom: isMobile ? 0 : 24,
                  boxShadow: isOpen
                    ? '0 0 0 4px rgba(212,175,55,.12), 0 0 32px rgba(212,175,55,.35)'
                    : isLive
                      ? '0 0 28px rgba(212,175,55,.28)'
                      : '0 0 24px rgba(212,175,55,.08)',
                  transform: isOpen ? 'scale(1.06)' : 'scale(1)',
                  transition: 'box-shadow .35s ease, transform .35s ease, border-color .35s ease, background .35s ease',
                  flexShrink: 0,
                  position: 'relative',
                  zIndex: 1
                }}>{s.n}</div>

                <div>
                  <h3 style={{
                    fontFamily: 'var(--font-display)',
                    fontSize: isMobile ? 20 : 24,
                    fontWeight: 600,
                    letterSpacing: '-0.01em',
                    marginBottom: 10,
                    color: isOpen ? 'var(--gold)' : 'inherit',
                    transition: 'color .3s ease'
                  }}>{s.title}</h3>
                  <p style={{ fontSize: 13, color: 'var(--text-2)', lineHeight: 1.7 }}>{s.d}</p>

                  <div style={{
                    marginTop: 14,
                    display: 'inline-flex',
                    alignItems: 'center',
                    gap: 8,
                    fontFamily: 'var(--font-body)',
                    fontSize: 11,
                    fontWeight: 600,
                    color: 'var(--gold)',
                    letterSpacing: '.18em',
                    textTransform: 'uppercase',
                    opacity: isOpen ? 1 : .65,
                    transition: 'opacity .25s ease'
                  }}>
                    <span>{isOpen ? t('Schließen','Zamknij') : t('Mehr','Więcej')}</span>
                    <span style={{
                      display: 'inline-block',
                      width: 10, height: 10,
                      transform: isOpen ? 'rotate(45deg)' : 'rotate(0deg)',
                      transition: 'transform .35s cubic-bezier(.2,.7,.2,1)',
                      position: 'relative'
                    }}>
                      <span style={{ position: 'absolute', top: '50%', left: 0, right: 0, height: 1, background: 'currentColor', transform: 'translateY(-50%)' }}/>
                      <span style={{ position: 'absolute', left: '50%', top: 0, bottom: 0, width: 1, background: 'currentColor', transform: 'translateX(-50%)' }}/>
                    </span>
                  </div>

                  <div style={{
                    overflow: 'hidden',
                    maxHeight: isOpen ? 480 : 0,
                    opacity: isOpen ? 1 : 0,
                    transition: 'max-height .5s cubic-bezier(.2,.7,.2,1), opacity .35s ease, margin-top .35s ease',
                    marginTop: isOpen ? 18 : 0
                  }}>
                    <div style={{
                      padding: 18,
                      borderRadius: 14,
                      background: 'linear-gradient(180deg, rgba(212,175,55,.06), rgba(212,175,55,.02))',
                      border: '1px solid rgba(212,175,55,.2)',
                      backdropFilter: 'blur(6px)'
                    }}>
                      <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 14 }}>
                        <span style={{ fontFamily: 'var(--font-body)', fontSize: 11, fontWeight: 600, color: 'var(--gold)', letterSpacing: '.18em', textTransform: 'uppercase', opacity: .85 }}>
                          {t('Dauer','Czas trwania')}
                        </span>
                        <span style={{ fontFamily: 'var(--font-body)', fontSize: 13, color: 'var(--text)' }}>{s.duration}</span>
                      </div>

                      <div style={{ fontFamily: 'var(--font-body)', fontSize: 11, fontWeight: 600, color: 'var(--gold)', letterSpacing: '.18em', textTransform: 'uppercase', opacity: .85, marginBottom: 10 }}>
                        {t('Was du bekommst','Co otrzymujesz')}
                      </div>
                      <ul style={{ margin: 0, padding: 0, marginBottom: 14, listStyle: 'none' }}>
                        {s.deliverables.map((d, di) => (
                          <li key={di} style={{
                            position: 'relative',
                            paddingLeft: 18,
                            fontSize: 13,
                            color: 'var(--text)',
                            lineHeight: 1.6,
                            marginBottom: 6
                          }}>
                            <span style={{
                              position: 'absolute', left: 0, top: '0.7em',
                              width: 8, height: 1, background: 'var(--gold)'
                            }}/>
                            {d}
                          </li>
                        ))}
                      </ul>

                      <div style={{
                        marginTop: 12,
                        paddingTop: 12,
                        borderTop: '1px solid rgba(212,175,55,.15)',
                        display: 'flex',
                        alignItems: 'baseline',
                        gap: 10,
                        flexWrap: 'wrap'
                      }}>
                        <span style={{ fontFamily: 'var(--font-body)', fontSize: 11, fontWeight: 600, color: 'var(--gold)', letterSpacing: '.18em', textTransform: 'uppercase', opacity: .85 }}>
                          {t('Dein Part','Twoja rola')}
                        </span>
                        <span style={{ fontSize: 13, color: 'var(--text-2)', fontStyle: 'italic' }}>{s.youDo}</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}
window.Process = Process;