// Anzeigenkette — week sections (week-nav, days 2-7, hook-map, klick-bridge)
// Globals: window.WeekNav, window.DaysCondensed, window.HookMap, window.KlickBridge

const { useEffect: useEffectW, useState: useStateW, useRef: useRefW, useMemo: useMemoW } = React;

/* shared theme badge — sits inside any ad creative */
function ThemeBadge({ hook, style }) {
  const h = window.HOOKS[hook];
  return (
    <div className="theme-badge pop" style={{ background: h.color, color: '#002a3c', ...(style || {}) }}>
      <span className="dot" style={{ background: '#002a3c' }} />
      {h.label}
    </div>
  );
}

/* compute current day index from scroll position */
function useCurrentDay(weekRef) {
  const [day, setDay] = useStateW(0);
  // count of touchpoints completed (i.e. above viewport center)
  const [seen, setSeen] = useStateW(0);
  // hooks seen so far
  const [hooksSeen, setHooksSeen] = useStateW(new Set());

  useEffectW(() => {
    if (!weekRef.current) return;
    let raf = 0;
    const tick = () => {
      raf = 0;
      const dayEls = weekRef.current.querySelectorAll('[data-day]');
      const center = window.innerHeight * 0.45;
      let bestIdx = 0, bestDist = Infinity;
      dayEls.forEach((el) => {
        const idx = parseInt(el.dataset.day, 10);
        const r = el.getBoundingClientRect();
        const elCenter = r.top + r.height / 2;
        const d = Math.abs(elCenter - center);
        if (d < bestDist) { bestDist = d; bestIdx = idx; }
      });
      setDay(bestIdx);

      // count touchpoints whose elements are above viewport center
      const tps = weekRef.current.querySelectorAll('[data-tp]');
      let count = 0;
      const newHooks = new Set();
      tps.forEach((el) => {
        const r = el.getBoundingClientRect();
        if (r.top + r.height * 0.5 < center) {
          count++;
          if (el.dataset.hook) newHooks.add(el.dataset.hook);
        }
      });
      setSeen(count);
      setHooksSeen(newHooks);
    };
    const onScroll = () => { if (raf) return; raf = requestAnimationFrame(tick); };
    window.addEventListener('scroll', onScroll, { passive: true });
    tick();
    return () => { window.removeEventListener('scroll', onScroll); if (raf) cancelAnimationFrame(raf); };
  }, [weekRef]);

  return { day, seen, hooksSeen };
}

/* Sticky week nav + frequency counter */
function WeekNav({ weekRef }) {
  const { day, seen, hooksSeen } = useCurrentDay(weekRef);
  const todayPoints = window.WEEK_SCHEDULE[day]?.points.length || 0;
  // count today's touchpoints seen
  const todaySeen = useMemoW(() => {
    if (!weekRef.current) return 0;
    const tps = weekRef.current.querySelectorAll(`[data-day-tp="${day}"]`);
    const center = window.innerHeight * 0.45;
    let n = 0;
    tps.forEach(el => {
      const r = el.getBoundingClientRect();
      if (r.top + r.height * 0.5 < center) n++;
    });
    return n;
  }, [day, seen, weekRef]);

  return (
    <div className="week-nav">
      <div className="week-pills">
        {window.DAY_LABELS.map((d, i) => (
          <button
            key={i}
            className={'week-pill' + (i === day ? ' active' : '')}
            onClick={() => {
              const el = weekRef.current?.querySelector(`[data-day="${i}"]`);
              if (el) window.scrollTo({ top: window.scrollY + el.getBoundingClientRect().top - 80, behavior: 'smooth' });
            }}
          >
            <span className="week-pill-day">Tag {i + 1}</span>
            <span className="week-pill-label">{d}</span>
          </button>
        ))}
      </div>
      <div className="freq-counter">
        <div className="freq-item">
          <span className="freq-dot" />
          <span className="freq-label">Heute</span>
          <span className="freq-value">{todaySeen}<span className="of"> / {todayPoints}</span></span>
        </div>
        <div className="freq-item">
          <span className="freq-dot" />
          <span className="freq-label">Diese Woche</span>
          <span className="freq-value">{seen}</span>
        </div>
        <div className="freq-item">
          <span className="freq-dot" />
          <span className="freq-label">Hooks</span>
          <span className="freq-value">{hooksSeen.size}<span className="of"> / 6</span></span>
        </div>
      </div>
    </div>
  );
}

/* Inline platform-frame — kein Iframe, kein Phone-Bezel, kein extra Box.
   Die Karte SELBST ist die Plattform-Ansicht. */
function MiniCreative({ hook, platform }) {
  const h = window.HOOKS[hook];
  const adColor = h.color;
  switch (platform) {
    case 'Instagram-Feed':
    case 'Pinterest-Feed':
    case 'Facebook-Feed':
      return (
        <div className="mc mc-igfeed">
          <div className="mc-ig-top"><span className="mc-ig-logo">Instagram</span><span className="mc-ig-icons">♡  ✉</span></div>
          <div className="mc-ig-stories">{[0,1,2,3].map(i=> <span key={i} className="mc-ig-circle" />)}</div>
          <div className="mc-ig-posthead">
            <span className="mc-av" style={{background: adColor}} />
            <div><b>stadt.ellwangen</b><small>Gesponsert</small></div>
          </div>
          <div className="mc-ad-square" style={{background:`linear-gradient(135deg, ${adColor}, ${shade(adColor,-30)})`}}>
            <span className="mc-ad-line" />
            <span className="mc-ad-line short" />
          </div>
          <div className="mc-ig-actions"><span>♡</span><span>💬</span><span>↗</span></div>
        </div>
      );
    case 'Instagram-Story':
      return (
        <div className="mc mc-story">
          <div className="mc-story-bars"><span className="done"/><span className="active"/><span/></div>
          <div className="mc-story-head"><span className="mc-av-sm" style={{background:adColor}}/><span><b>stadt.ellwangen</b><small>Gesponsert · vor 2 Std</small></span><span className="x">×</span></div>
          <div className="mc-story-bg" style={{background:`linear-gradient(160deg, ${adColor}, ${shade(adColor,-40)})`}}/>
          <div className="mc-story-cta">Mehr erfahren ›</div>
        </div>
      );
    case 'Instagram-Reel':
      return (
        <div className="mc mc-reel">
          <div className="mc-reel-bg" style={{background:`linear-gradient(155deg, ${adColor}, ${shade(adColor,-45)})`}}/>
          <div className="mc-reel-side">
            <span className="mc-av-sm" style={{background:adColor}}/>
            <span>♡</span><span>💬</span><span>↗</span>
          </div>
          <div className="mc-reel-bottom"><b>stadt.ellwangen</b><small>· Gesponsert</small></div>
          <div className="mc-reel-progress"><div/></div>
        </div>
      );
    case 'YouTube':
      return (
        <div className="mc mc-yt">
          <div className="mc-yt-bg" style={{background:`linear-gradient(150deg, ${adColor}, ${shade(adColor,-50)})`}}/>
          <div className="mc-yt-tag">Anzeige · in 4 Sek.</div>
          <div className="mc-yt-skip">Überspringen ›</div>
          <div className="mc-yt-progress"><div/></div>
        </div>
      );
    case 'News-App':
    case 'News-Feed':
      return (
        <div className="mc mc-news">
          <div className="mc-news-top"><span className="mc-news-logo">NEWS</span><span className="mc-news-search">⌕</span></div>
          <div className="mc-news-tabs"><span className="active">Top</span><span>Politik</span><span>Sport</span></div>
          <div className="mc-news-card-thin"/>
          <div className="mc-news-ad" style={{background:`linear-gradient(135deg, ${adColor}, ${shade(adColor,-30)})`}}>
            <span className="mc-news-ad-tag">Anzeige</span>
          </div>
        </div>
      );
    case 'Wetter-App':
      return (
        <div className="mc mc-wetter">
          <div className="mc-we-top">
            <div className="mc-we-city">Ellwangen</div>
            <div className="mc-we-temp">14°</div>
            <div className="mc-we-cond">Leicht bewölkt</div>
          </div>
          <div className="mc-we-ad" style={{background:`linear-gradient(135deg, ${adColor}, ${shade(adColor,-25)})`}}>
            <span className="mc-news-ad-tag">Anzeige</span>
          </div>
        </div>
      );
    case 'Spotify-Display':
    case 'Spotify':
      return (
        <div className="mc mc-spotify">
          <div className="mc-sp-art" style={{background:`linear-gradient(135deg, ${adColor}, ${shade(adColor,-50)})`}}/>
          <div className="mc-sp-track">
            <b>Stadt Ellwangen</b>
            <small>· Gesponsertes Audio</small>
            <div className="mc-sp-bar"><div/></div>
          </div>
          <div className="mc-sp-controls"><span>⏮</span><span className="play">▶</span><span>⏭</span></div>
        </div>
      );
    default:
      return (
        <div className="mc mc-fallback" style={{background:`linear-gradient(135deg, ${adColor}, ${shade(adColor,-30)})`}}>
          <span className="mc-news-ad-tag">Anzeige</span>
        </div>
      );
  }
}

/* darken/lighten helper for gradient-on-hook */
function shade(hex, percent) {
  const n = parseInt(hex.slice(1), 16);
  let r = (n >> 16) & 0xff, g = (n >> 8) & 0xff, b = n & 0xff;
  const t = percent < 0 ? 0 : 255, p = Math.abs(percent) / 100;
  r = Math.round((t - r) * p + r);
  g = Math.round((t - g) * p + g);
  b = Math.round((t - b) * p + b);
  return `rgb(${r}, ${g}, ${b})`;
}

const PLATFORM_GLYPH = {
  'Wetter-App':       '☁',
  'Instagram-Feed':   'IG',
  'Instagram-Story':  'IG',
  'Instagram-Reel':   'IG',
  'YouTube':          '▶',
  'News-App':         '📰',
  'Spotify-Display':  '♫',
  'Spotify':          '♫',
  'Pinterest-Feed':   'P',
  'Facebook-Feed':    'f',
};

/* One condensed day row (Tag 2..7) */
function CondensedDay({ idx, dayData, onClickMoment, isClickActive }) {
  const ref = useRefW(null);
  const [inView, setInView] = useStateW(false);
  useEffectW(() => {
    const obs = new IntersectionObserver(([e]) => { if (e.isIntersecting) setInView(true); }, { threshold: 0.2 });
    if (ref.current) obs.observe(ref.current);
    return () => obs.disconnect();
  }, []);
  const totalSoFar = window.WEEK_SCHEDULE.slice(0, idx).reduce((s, d) => s + d.points.length, 0);
  return (
    <section className={'cday' + (inView ? ' in' : '')} data-day={idx} ref={ref}>
      <div className="cday-grid">
        <div className="cday-left">
          <div className="cday-stamp">
            <span className="num">Tag {idx + 1}</span>
            <span className="day-name">{window.DAY_LONG[dayData.day]}</span>
          </div>
          <div className="cday-meta">Bisher <b>{totalSoFar}×</b> gesehen</div>
          {dayData.thought && <div className="cday-thought">„{dayData.thought}"</div>}
        </div>
        <div className="cday-right">
          {dayData.points.map((p, i) => {
            const h = window.HOOKS[p.hook];
            const isClick = !!p.click;
            return (
              <div
                key={i}
                className={'tp-card' + (isClick ? ' click-card' : '')}
                data-tp
                data-day-tp={idx}
                data-hook={p.hook}
                style={{ transitionDelay: `${i * 80}ms` }}
              >
                <div className="tp-platform">
                  <span className="tp-glyph">{PLATFORM_GLYPH[p.platform] || '·'}</span>
                  <span className="tp-platform-name">{p.platform}</span>
                </div>
                <div className="tp-time">{p.time}</div>
                <MiniCreative hook={p.hook} platform={p.platform} time={p.time} />
                <div className="tp-hook" style={{ color: h.color }}>{h.text}</div>
                {isClick && (
                  <button className="tp-click-cta" onClick={onClickMoment}>
                    Klick-Moment ansehen →
                  </button>
                )}
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

/* All days 2-7 wrapped + week nav */
function DaysCondensed({ weekRef, onClickMoment, clickActive }) {
  return (
    <div className="days-condensed-wrap" ref={weekRef}>
      <WeekNav weekRef={weekRef} />
      {/* Tag 1 marker — its content lives in DaySection above; we register data-day for the nav */}
      <div data-day="0" style={{ position: 'absolute', top: '-100vh', height: '400vh', width: 1, pointerEvents: 'none' }} />
      {window.WEEK_SCHEDULE.slice(1).map((d, i) => (
        <CondensedDay key={i + 1} idx={i + 1} dayData={d} onClickMoment={onClickMoment} isClickActive={clickActive} />
      ))}
    </div>
  );
}

/* HOOK MAP — 7 columns × 4 rows grid of tiles */
function HookMap() {
  const ref = useRefW(null);
  const [inView, setInView] = useStateW(false);
  const [pulseTick, setPulseTick] = useStateW(0);
  useEffectW(() => {
    const obs = new IntersectionObserver(([e]) => { if (e.isIntersecting) setInView(true); }, { threshold: 0.25 });
    if (ref.current) obs.observe(ref.current);
    return () => obs.disconnect();
  }, []);
  // after grid filled, run pulse wave
  useEffectW(() => {
    if (!inView) return;
    const t = setTimeout(() => setPulseTick(1), 1500);
    return () => clearTimeout(t);
  }, [inView]);

  // build grid: 4 rows (daypart) × 7 cols (day)
  const cells = [];
  for (let row = 0; row < 4; row++) {
    for (let col = 0; col < 7; col++) {
      const day = window.WEEK_SCHEDULE[col];
      const tp = day?.points.find(p => window.daypart(p.time) === row);
      cells.push({ row, col, tp });
    }
  }

  const ROW_LABELS = ['Morgens', 'Mittags', 'Nachmittags', 'Abends'];

  return (
    <section className="hook-map" ref={ref}>
      <div className="hook-map-head">
        <div className="eyebrow-mark">System · Variation</div>
        <h2>22 Touchpoints. <span style={{ color: 'var(--c-orange)' }}>6 Geschichten.</span> 1 Stelle.</h2>
        <p>Jeder Kontakt mit einem anderen Winkel — keine Wiederholung.</p>
      </div>

      <div className="hook-map-body">
        <div className="hook-grid-wrap">
          {/* col labels */}
          <div className="hook-grid-cols">
            <div />
            {window.DAY_LABELS.map((d, i) => (
              <div key={i} className="hook-grid-col-label">
                <small>Tag {i + 1}</small>
                <b>{d}</b>
              </div>
            ))}
          </div>
          <div className="hook-grid">
            {cells.map((c, i) => {
              const inViewDelay = (c.row + c.col) * 50;
              return (
                <React.Fragment key={i}>
                  {c.col === 0 && <div className="hook-grid-row-label">{ROW_LABELS[c.row]}</div>}
                  <div
                    className={
                      'hook-tile' +
                      (c.tp ? ' filled' : ' empty') +
                      (inView ? ' in' : '') +
                      (pulseTick && c.tp ? ' pulse' : '')
                    }
                    style={{
                      background: c.tp ? window.HOOKS[c.tp.hook].color : 'rgba(255,255,255,0.025)',
                      transitionDelay: inView ? `${inViewDelay}ms` : '0ms',
                      animationDelay: pulseTick && c.tp ? `${inViewDelay + 200}ms` : '0ms',
                    }}
                    title={c.tp ? `${c.tp.time} · ${c.tp.platform} · ${window.HOOKS[c.tp.hook].label}` : ''}
                  >
                    {c.tp && (
                      <>
                        <span className="hook-tile-time">{c.tp.time}</span>
                        <span className="hook-tile-label">{window.HOOKS[c.tp.hook].label}</span>
                      </>
                    )}
                  </div>
                </React.Fragment>
              );
            })}
          </div>
        </div>
        <div className="hook-legend">
          <div className="hook-legend-title">Hook-Themen</div>
          {Object.entries(window.HOOKS).map(([key, h]) => (
            <div key={key} className="hook-legend-item">
              <span className="hook-pill" style={{ background: h.color }} />
              <span className="hook-legend-label">{h.label}</span>
              <span className="hook-legend-count">{window.HOOK_COUNTS[key]}×</span>
            </div>
          ))}
        </div>
      </div>

      <div className="hook-map-foot">
        <em>Variation ist kein Zufall. Jede Position der Woche wird gezielt mit einem anderen Botschafts-Winkel besetzt.</em>
      </div>
    </section>
  );
}

/* KLICK BRIDGE — 3-frame phone funnel */
function KlickBridge({ activate }) {
  const ref = useRefW(null);
  const [frame, setFrame] = useStateW(0);
  const [started, setStarted] = useStateW(false);
  useEffectW(() => {
    const obs = new IntersectionObserver(([e]) => { if (e.isIntersecting) setStarted(true); }, { threshold: 0.3 });
    if (ref.current) obs.observe(ref.current);
    return () => obs.disconnect();
  }, []);
  useEffectW(() => {
    if (!started) return;
    let i = 0;
    const id = setInterval(() => {
      i++;
      if (i >= 3) { clearInterval(id); return; }
      setFrame(i);
    }, 1500);
    return () => clearInterval(id);
  }, [started]);

  return (
    <section className="klick-bridge" ref={ref}>
      <div className="klick-line">
        <span className="dot" />
        Sie ist eine von <b>220 Personen</b>, die diese Woche das Bewerber-Formular geöffnet haben.
      </div>
      <div className="klick-phone">
        <div className="phone-notch" />
        <div className="phone-screen">
          <div className={'kf' + (frame === 0 ? ' active' : '')}>
            <div className="kf-hero">
              <div className="kf-eyebrow">Stadt Ellwangen · Karriere</div>
              <h4>Teamleitung Bußgeldstelle (m/w/d)</h4>
              <p>EG 9b / A 10 · Vollzeit · unbefristet · Start nach Absprache</p>
              <div className="kf-cta">In 60 Sekunden bewerben</div>
              <svg className="kf-bg" viewBox="0 0 300 200" preserveAspectRatio="none">
                <path d="M0,180 L40,180 L40,140 L70,140 L70,160 L100,160 L100,110 L130,110 L130,90 L150,90 L150,70 L165,70 L165,90 L185,90 L185,40 L195,40 L195,90 L215,90 L215,110 L260,110 L260,130 L300,130 L300,200 L0,200 Z" fill="rgba(255,255,255,0.08)" />
              </svg>
            </div>
          </div>
          <div className={'kf' + (frame === 1 ? ' active' : '')}>
            <div className="kf-q">
              <div className="kf-step">Frage 1 / 4</div>
              <h4>Hast Du Erfahrung im öffentlichen Dienst?</h4>
              <div className="kf-options">
                <div className="kf-opt selected">Ja, mehrere Jahre</div>
                <div className="kf-opt">Etwas Berührung</div>
                <div className="kf-opt">Nein, bisher nicht</div>
              </div>
              <div className="kf-cta">Weiter</div>
            </div>
          </div>
          <div className={'kf' + (frame === 2 ? ' active' : '')}>
            <div className="kf-done">
              <div className="kf-check">✓</div>
              <h4>Vielen Dank.</h4>
              <p>Wir melden uns innerhalb von 48 Stunden bei Dir.</p>
            </div>
          </div>
          {/* progress dots */}
          <div className="kf-dots">
            {[0, 1, 2].map(i => <span key={i} className={i === frame ? 'on' : ''} />)}
          </div>
        </div>
      </div>
    </section>
  );
}

window.WeekNav = WeekNav;
window.DaysCondensed = DaysCondensed;
window.HookMap = HookMap;
window.KlickBridge = KlickBridge;
window.ThemeBadge = ThemeBadge;