// Anzeigenkette — transition + KPI + CTA
// Globals: window.TransitionBlock, window.KPIBlock, window.CTABlock

const { useEffect: useEffectK, useState: useStateK, useRef: useRefK } = React;

function TransitionBlock() {
  const [ref, inView] = window.useInView({ threshold: 0.4 });
  const words = [
    { t: '4', accent: true }, { t: 'Plattformen.' },
    { t: '4', accent: true }, { t: 'Stimmungen.' },
    { t: '1', accent: true }, { t: 'Stelle.' },
    { t: '7', accent: true }, { t: 'Tage.' },
  ];
  return (
    <section className="transition" ref={ref}>
      <div className="big-line">
        {words.map((w, i) => (
          <span
            key={i}
            className={(inView ? 'in ' : '') + (w.accent ? 'accent' : '')}
            style={{ transitionDelay: `${i * 110}ms` }}
          >{w.t}</span>
        ))}
      </div>
    </section>
  );
}

function KPI({ value, decimals = 0, unit, label, sub, hero, inView }) {
  const formatted = window.useCountUp(value, inView, 1800, decimals);
  return (
    <div className={'kpi-card' + (hero ? ' hero-card' : '') + (inView ? ' in' : '')}>
      <div className="label">{label}</div>
      <div className="value">{formatted}{unit && <span className="unit">{unit}</span>}</div>
      {sub && <div className="sub">{sub}</div>}
      <div className="spark" />
    </div>
  );
}

function KPISmall({ value, decimals = 0, unit, label, inView }) {
  const formatted = window.useCountUp(value, inView, 1500, decimals);
  return (
    <div className={'kpi-card small' + (inView ? ' in' : '')}>
      <div className="label">{label}</div>
      <div className="value">{formatted}{unit && <span className="unit">{unit}</span>}</div>
      <div className="spark" />
    </div>
  );
}

function KPIBlock() {
  const [ref, inView] = window.useInView({ threshold: 0.2 });
  return (
    <section className="kpi-section" ref={ref}>
      <div className="head">
        <div className="eyebrow-mark">Beweis · Echtdaten</div>
        <h2>Was diese Anzeigenkette gerade leistet.</h2>
        <p>
          Echtdaten aus dem laufenden Werbekonto, Stand <b>06.05.2026</b> — Stelle: <b>Teamleitung Bußgeldstelle</b>, Stadt Ellwangen.
        </p>
      </div>

      <div className="kpi-grid-big">
        <KPI value={14280} unit="" label="Menschen erreicht" sub="Unique Reach" hero inView={inView} />
        <KPI value={60867} unit="" label="Sichtkontakte" sub="Impressionen" inView={inView} />
        <KPI value={2568} unit="" label="Klicks zur Stelle" sub="Klicks gesamt" inView={inView} />
        <KPI value={4.22} decimals={2} unit=" %" label="CTR" sub="Click-Through-Rate" inView={inView} />
      </div>

      <div className="kpi-grid-small">
        <KPISmall value={0.25} decimals={2} unit=" €" label="CPC" inView={inView} />
        <KPISmall value={4.3} decimals={1} unit="" label="Frequenz · Kontakte / Person" inView={inView} />
        <KPISmall value={1582} unit="" label="Landingpage-Aufrufe (30 T.)" inView={inView} />
        <KPISmall value={220} unit="" label="Bewerber-Formular gesehen (30 T.)" inView={inView} />
      </div>

      <div className="kpi-note">
        Branchenüblicher Recruiting-CTR auf Meta liegt bei <b>1 – 1,8 %</b>.
        Diese Kampagne erreicht das <b>2- bis 4-fache</b>. Spend bisher: <b>632 €</b>.
      </div>
    </section>
  );
}

function CTABlock() {
  return (
    <section className="cta-footer">
      <h2>So eine Kette für Ihre Stelle?</h2>
      <button className="cta-btn">
        Kostenfreies Strategiegespräch buchen
        <span className="arrow">→</span>
      </button>
      <div className="sub">Wir prüfen vorab, ob die Stelle für eine Anzeigenkette geeignet ist.</div>
      <div className="footer-mark">Clementine Media · Recruiting für den öffentlichen Dienst</div>
    </section>
  );
}

window.TransitionBlock = TransitionBlock;
window.KPIBlock = KPIBlock;
window.CTABlock = CTABlock;