/* ============================================================
   SAYRU — home.jsx  (hero slider, services, why, about timeline)
   ============================================================ */

/* nl2br comes from shared.jsx (window.nl2br) */

/* ---------------- HERO ---------------- */
const HERO_SLIDES = ['s1', 's2', 's3', 's4', 's5'];
function Hero() {
  const { t } = useT();
  const [i, setI] = useState(0);
  const [paused, setPaused] = useState(false);
  const DUR = 6500;
  useEffect(() => {
    if (paused) return;
    const id = setTimeout(() => setI(v => (v + 1) % HERO_SLIDES.length), DUR);
    return () => clearTimeout(id);
  }, [i, paused]);
  const go = (n) => setI((n + HERO_SLIDES.length) % HERO_SLIDES.length);
  const s = HERO_SLIDES[i];
  const ready = useDeferredMount(); // yazılar önce boyansın, slayt görseli sonra gelsin
  const slideImg = ready ? (window.__SAYRU_HERO_SLIDES || {})[s] : null;

  return (
    <section className="hero dark" onMouseEnter={() => setPaused(true)} onMouseLeave={() => setPaused(false)} data-herovis={(window.__SAYRU_SETTINGS && window.__SAYRU_SETTINGS.heroVisual) || 'none'}>
      <div className="cc-grid hero__grid"></div>
      {slideImg && (
        <div className="hero__bgimg" key={'bg' + s} style={{ backgroundImage: 'url(' + slideImg.url + ')' }}>
          <div className="hero__bgimg-ov" style={{ background: 'linear-gradient(180deg, rgba(3,13,31,' + (slideImg.overlay) + '), rgba(3,13,31,' + Math.min(1, slideImg.overlay + 0.12) + '))' }}></div>
        </div>
      )}
      <div className="hero__rings" aria-hidden="true"><span></span><span></span><span></span><span></span></div>
      <div className="hero__glow hero__glow--1"></div>
      <div className="hero__glow hero__glow--2"></div>
      <div className="hero__scan" aria-hidden="true"></div>
      <div className="wrap hero__in">
        <div className="hero__content">
          <div className="hero__slides" key={s}>
            <div className="kicker kicker--ondark hero__kick">{t('hero.' + s + '.kick')}</div>
            <h1 className="hero__title">{nl2br(t('hero.' + s + '.title'))}</h1>
            <p className="hero__body">{t('hero.' + s + '.body')}</p>
            {s === 's1' && <p className="hero__sub">{t('hero.s1.sub')}</p>}
          </div>
          <div className="hero__actions">
            <a href="#hizmetler" className="btn btn--cyan">{t('hero.cta1')} <span className="ar"><Icon name="arrow" size={17} /></span></a>
            <a href="#iletisim" className="btn btn--ghost-light">{t('hero.cta2')}</a>
          </div>
          <div className="hero__stack">
            <span className="hero__stack-l mono">{t('hero.stack')}</span>
            <div className="hero__stack-chips">
              {['GLPI', 'Zabbix', 'SIEM', 'Denetim'].map(x => <span key={x} className="hero__chip mono">{x}</span>)}
            </div>
          </div>
          <div className="hero__controls">
            <div className="hero__dots">
              {HERO_SLIDES.map((sl, n) => (
                <button key={sl} className={'hero__dot' + (n === i ? ' on' : '')} onClick={() => go(n)} aria-label={'Slide ' + (n + 1)}>
                  <span className="hero__dot-fill" style={{ animationDuration: DUR + 'ms', animationPlayState: (n === i && !paused) ? 'running' : 'paused' }}></span>
                </button>
              ))}
            </div>
            <div className="hero__arrows">
              <button onClick={() => go(i - 1)} aria-label="Önceki"><Icon name="chevron" size={18} /></button>
              <span className="mono hero__count">{String(i + 1).padStart(2, '0')} / {String(HERO_SLIDES.length).padStart(2, '0')}</span>
              <button onClick={() => go(i + 1)} aria-label="Sonraki"><Icon name="chevron" size={18} /></button>
            </div>
          </div>
        </div>
        <div className="hero__visual">
          <HeroVisual slide={s} />
        </div>
      </div>
    </section>
  );
}

/* ---------------- SERVICES ---------------- */
function Services() {
  const { t } = useT();
  return (
    <section className="section" id="hizmetler">
      <div className="wrap">
        <div className="section-head reveal">
          <div className="kicker">{t('services.kick')}</div>
          <h2>{t('services.title')}</h2>
          <p className="lead">{t('services.lead')}</p>
        </div>
        <div className="svc-grid">
          {SERVICES.map((sv, n) => (
            <a key={sv.id} href={sv.href} className={'svc-card reveal d' + (n + 1)}>
              <div className="svc-card__top">
                <span className="svc-card__ic"><Icon name={sv.icon} size={26} /></span>
                <span className="svc-card__num mono">{String(n + 1).padStart(2, '0')}</span>
              </div>
              <h3 className="svc-card__name">{t('svc.' + sv.id + '.name')}</h3>
              <div className="svc-card__meta">
                <span className="svc-card__area">{t('svc.' + sv.id + '.area')}</span>
                <span className="svc-card__tool mono">{t('svc.' + sv.id + '.tool')}</span>
              </div>
              <p className="svc-card__tag">{t('svc.' + sv.id + '.tag')}</p>
              <p className="svc-card__desc">{t('svc.' + sv.id + '.desc')}</p>
              <span className="svc-card__cta">{t('svc.explore')} <Icon name="arrow" size={16} /></span>
              <div className="svc-card__glow"></div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------------- WHY SAYRU ---------------- */
const WHY = ['f1', 'f2', 'f3', 'f4', 'f5', 'f6'];
const WHY_IC = { f1: 'grid', f2: 'yon', f3: 'goz', f4: 'iz', f5: 'dem', f6: 'spark' };
function Why() {
  const { t } = useT();
  return (
    <section className="section section--why" id="neden">
      <div className="wrap why__in">
        <div className="why__aside reveal">
          <div className="kicker">{t('why.kick')}</div>
          <h2 className="why__title">{nl2br(t('why.title'))}</h2>
          <p className="why__lead">{t('why.lead')}</p>
          <div className="why__stats">
            {[['stat1','stat1l'],['stat2','stat2l'],['stat3','stat3l']].map(([v, l]) => (
              <div className="why__stat" key={v}>
                <div className="why__stat-v grad-cyan">{t('why.' + v)}</div>
                <div className="why__stat-l">{t('why.' + l)}</div>
              </div>
            ))}
          </div>
        </div>
        <div className="why__grid">
          {WHY.map((f, n) => (
            <div className={'why__card reveal d' + ((n % 3) + 1)} key={f}>
              <span className="why__ic"><Icon name={WHY_IC[f]} size={22} /></span>
              <h3 className="why__card-t">{t('why.' + f + '.t')}</h3>
              <p className="why__card-d">{t('why.' + f + '.d')}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------------- ABOUT / TIMELINE ---------------- */
const SECTORS = ['t1', 't2', 't3', 't4', 't5', 't6', 't7'];
function About() {
  const { t } = useT();
  const railRef = useRef(null);
  const [fill, setFill] = useState(0);
  useEffect(() => {
    const onScroll = () => {
      const el = railRef.current; if (!el) return;
      const r = el.getBoundingClientRect();
      const vh = window.innerHeight;
      const total = r.height + vh * 0.4;
      const passed = Math.min(Math.max(vh * 0.7 - r.top, 0), total);
      setFill(Math.min(passed / total, 1));
    };
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return (
    <section className="section section--about dark" id="hakkimizda">
      <div className="cc-grid about__grid"></div>
      <div className="wrap">
        <div className="about__head reveal">
          <div className="about__intro">
            <div className="kicker kicker--ondark">{t('about.kick')}</div>
            <h2 className="about__title">{nl2br(t('about.title'))}</h2>
          </div>
          <div className="about__lead-wrap">
            <p className="about__lead">{t('about.lead')}</p>
            <p className="about__body">{t('about.body')}</p>
          </div>
        </div>

        <div className="tl" ref={railRef}>
          <div className="tl__spine"><div className="tl__fill" style={{ height: (fill * 100) + '%' }}></div></div>
          {SECTORS.map((sec, n) => {
            const last = n === SECTORS.length - 1;
            return (
              <div className={'tl__row' + (n % 2 ? ' tl__row--r' : '') + (last ? ' tl__row--final' : '') + ' reveal'} key={sec}>
                <div className="tl__card">
                  <span className="tl__step mono">{last ? '◆' : String(n + 1).padStart(2, '0')}</span>
                  <h3 className="tl__name">{t('about.' + sec)}</h3>
                  <p className="tl__desc">{t('about.' + sec + 'd')}</p>
                </div>
                <span className={'tl__node' + (last ? ' tl__node--final' : '')}>
                  {last && <span className="tl__node-pulse"></span>}
                </span>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Hero, Services, Why, About });