/* Nexpersona - middle sections */

const { useState: useStateS, useEffect: useEffectS, useRef: useRefS } = React;

// Shared viewport-size hook (mobile <= 720)
function useMobileS(maxWidth = 720) {
  const [is, setIs] = useStateS(
    () => typeof window !== 'undefined' && window.matchMedia(`(max-width:${maxWidth}px)`).matches
  );
  useEffectS(() => {
    if (typeof window === 'undefined') return;
    const mq = window.matchMedia(`(max-width:${maxWidth}px)`);
    const fn = () => setIs(mq.matches);
    mq.addEventListener?.('change', fn);
    return () => mq.removeEventListener?.('change', fn);
  }, [maxWidth]);
  return is;
}
if (typeof window !== 'undefined') window.useMobileNX = useMobileS;

// ---------- 01 Problem

function Problem() {
  const { t, tR } = window.useT();
  return (
    <section className="section shell" id="problem">
      <div className="problem-grid reveal">
        <div>
          <div className="eyebrow-row">
            <span className="dot"></span>
            <span className="mono">{t('problem.eyebrow')}</span>
            <span className="line"></span>
          </div>
          <h2 className="serif problem-h">{tR('problem.title')}</h2>
        </div>
        <div className="problem-body">
          <p>{tR('problem.body.1')}</p>
          <p>{t('problem.body.2')}</p>
          <p>{t('problem.body.3')}</p>
        </div>
      </div>

      <div className="marquee" aria-hidden="true">
        <div className="track">
          {Array.from({length: 2}).map((_, i) => (
            <React.Fragment key={i}>
              <span><span className="em">{t('problem.marquee.1.a')}</span>{t('problem.marquee.1.b')}</span>
              <span className="sep">●</span>
              <span><span className="em">{t('problem.marquee.2.a')}</span>{t('problem.marquee.2.b')}</span>
              <span className="sep">●</span>
              <span><span className="em">{t('problem.marquee.3.a')}</span>{t('problem.marquee.3.b')}</span>
              <span className="sep">●</span>
              <span><span className="em">{t('problem.marquee.4.a')}</span>{t('problem.marquee.4.b')}</span>
              <span className="sep">●</span>
              <span><span className="em">{t('problem.marquee.5.a')}</span>{t('problem.marquee.5.b')}</span>
              <span className="sep">●</span>
            </React.Fragment>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---------- 02 Who we work with

function WhoCarousel({ audiences }) {
  const [i, setI] = useStateS(0);
  const [paused, setPaused] = useStateS(false);
  const N = audiences.length;
  const PERIOD = 4500;

  useEffectS(() => {
    if (paused) return;
    const id = setInterval(() => setI((x) => (x + 1) % N), PERIOD);
    return () => clearInterval(id);
  }, [paused, N]);

  const onTouchStart = () => setPaused(true);
  const onTouchEnd = () => setTimeout(() => setPaused(false), 2500);

  return (
    <div
      className="who-carousel"
      onTouchStart={onTouchStart}
      onTouchEnd={onTouchEnd}
      onMouseEnter={() => setPaused(true)}
      onMouseLeave={() => setPaused(false)}
    >
      <div className="who-carousel-bar" role="tablist">
        {audiences.map((a, idx) => (
          <button
            key={a.n}
            type="button"
            className={`who-carousel-dot ${idx === i ? 'active' : ''}`}
            onClick={() => setI(idx)}
            aria-selected={idx === i}
            role="tab"
          >
            <span>{a.n}</span>
            <span className="who-carousel-line">
              <span
                className="who-carousel-fill"
                key={`${idx}-${paused ? 'p' : 'r'}-${i}`}
                style={{
                  animationName: idx === i && !paused ? 'who-fill' : 'none',
                  animationDuration: `${PERIOD}ms`,
                  animationTimingFunction: 'linear',
                  animationFillMode: 'forwards',
                  animationPlayState: idx === i && !paused ? 'running' : 'paused',
                  transform: idx < i ? 'scaleX(1)' : undefined,
                }}
              />
            </span>
          </button>
        ))}
      </div>
      <div className="who-carousel-stage">
        <div className="who-carousel-track" style={{ transform: `translateX(-${i * 100}%)` }}>
          {audiences.map((a) => (
            <article className="who-card" key={a.n}>
              <header className="who-card-head">
                <span className="who-num serif">{a.n}</span>
                <span className="who-tag mono">{a.tag}</span>
              </header>
              <h3 className="who-title serif">{a.title}</h3>
              <p className="who-desc">{a.desc}</p>
              <footer className="who-note mono">
                <span className="who-note-tick"></span>{a.note}
              </footer>
            </article>
          ))}
        </div>
      </div>
    </div>
  );
}

function Who() {
  const { t, tR } = window.useT();
  const audiences = [1, 2, 3, 4].map((i) => ({
    n: String(i).padStart(2, '0'),
    tag: t(`who.${i}.tag`),
    title: tR(`who.${i}.title`),
    desc: t(`who.${i}.desc`),
    note: t(`who.${i}.note`),
  }));

  return (
    <section className="section shell" id="who">
      <div className="eyebrow-row reveal">
        <span className="dot"></span>
        <span className="mono">{t('who.eyebrow')}</span>
        <span className="line"></span>
      </div>
      <div className="who-head reveal">
        <h2 className="serif problem-h" style={{maxWidth: 900}}>{tR('who.title')}</h2>
        <p className="who-lead">{t('who.lead')}</p>
      </div>

      {/* Desktop grid (hidden on mobile via CSS) */}
      <div className="who-grid">
        {audiences.map((a, i) => (
          <article className={`who-card who-card-${a.n} reveal`} data-delay={i+1} key={a.n}>
            <header className="who-card-head">
              <span className="who-num serif">{a.n}</span>
              <span className="who-tag mono">{a.tag}</span>
            </header>
            <h3 className="who-title serif">{a.title}</h3>
            <p className="who-desc">{a.desc}</p>
            <footer className="who-note mono">
              <span className="who-note-tick"></span>{a.note}
            </footer>
          </article>
        ))}
      </div>

      {/* Mobile auto-advancing carousel (hidden on desktop via CSS) */}
      <WhoCarousel audiences={audiences} />
    </section>
  );
}

// ---------- 03 Services

function ServiceRow({ s, i }) {
  const ref = useRefS(null);
  const onMove = (e) => {
    const el = ref.current;
    if (!el) return;
    const r = el.getBoundingClientRect();
    el.style.setProperty('--mx', `${e.clientX - r.left}px`);
    el.style.setProperty('--my', `${e.clientY - r.top}px`);
  };
  return (
    <div className="svc-row reveal" data-delay={i+1} ref={ref} onMouseMove={onMove}>
      <div className="svc-inner">
        <span className="idx mono">{s.idx} /</span>
        <span className="name serif">{s.name}</span>
        <span className="desc">{s.desc}</span>

        <div className="svc-expand">
          <div className="svc-expand-inner">
            <div className="svc-tags">
              {s.tags.map((t) => (
                <span className="svc-tag mono" key={t}>{t}</span>
              ))}
            </div>
            <ul className="svc-bullets">
              {s.bullets.map((b) => (
                <li className="svc-bullet" key={b}>
                  <span className="svc-bullet-mark" aria-hidden="true"></span>
                  <span>{b}</span>
                </li>
              ))}
            </ul>
          </div>
        </div>
      </div>
    </div>
  );
}

function Services() {
  const { t, tR } = window.useT();
  const services = [1, 2, 3, 4, 5, 6].map((i) => ({
    idx: String(i).padStart(2, '0'),
    name: t(`svc.${i}.name`),
    desc: t(`svc.${i}.desc`),
    tags: [t(`svc.${i}.tag.1`), t(`svc.${i}.tag.2`), t(`svc.${i}.tag.3`)],
    bullets: [t(`svc.${i}.b.1`), t(`svc.${i}.b.2`), t(`svc.${i}.b.3`)],
  }));

  return (
    <section className="section svc-section" id="services">
      <div className="shell">
        <div className="eyebrow-row reveal">
          <span className="dot"></span>
          <span className="mono">{t('services.eyebrow')}</span>
          <span className="line"></span>
        </div>
        <div className="services-head reveal">
          <h2 className="serif services-h">{tR('services.title')}</h2>
          <p className="services-sub">{t('services.sub')}</p>
        </div>
      </div>
      <div className="svc-list">
        {services.map((s, i) => <ServiceRow key={s.idx} s={s} i={i} />)}
      </div>
    </section>
  );
}

// ---------- 04 Process

function Process() {
  const { t, tR } = window.useT();
  const wrapRef = useRefS(null);
  const stickyRef = useRefS(null);
  const trackRef = useRefS(null);
  const [progress, setProgress] = useStateS(0);
  const [enabled, setEnabled] = useStateS(true);
  const [mobileProgress, setMobileProgress] = useStateS(0);

  const STEPS = [1, 2, 3, 4, 5].map((i) => ({
    n: String(i).padStart(2, '0'),
    name: t(`step.${i}.name`),
    short: t(`step.${i}.short`),
    body: t(`step.${i}.body`),
    head: tR(`step.${i}.head`),
    deliverables: [
      { k: t(`step.${i}.d.1.k`), v: t(`step.${i}.d.1.v`) },
      { k: t(`step.${i}.d.2.k`), v: t(`step.${i}.d.2.v`) },
      { k: t(`step.${i}.d.3.k`), v: t(`step.${i}.d.3.v`) },
    ],
    index: i,
  }));

  useEffectS(() => {
    const mq = window.matchMedia('(max-width: 880px)');
    const update = () => setEnabled(!mq.matches);
    update();
    mq.addEventListener?.('change', update);
    return () => mq.removeEventListener?.('change', update);
  }, []);

  useEffectS(() => {
    if (!enabled) { setProgress(0); return; }
    let raf = null;
    const onScroll = () => {
      if (raf) return;
      raf = requestAnimationFrame(() => {
        raf = null;
        const wrap = wrapRef.current;
        if (!wrap) return;
        const rect = wrap.getBoundingClientRect();
        const range = wrap.offsetHeight - window.innerHeight;
        if (range <= 0) return;
        const scrolled = -rect.top;
        const p = Math.max(0, Math.min(1, scrolled / range));
        setProgress(p);
      });
    };
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    window.addEventListener('resize', onScroll);
    return () => {
      window.removeEventListener('scroll', onScroll);
      window.removeEventListener('resize', onScroll);
    };
  }, [enabled]);

  // Mobile: track horizontal scroll of the carousel itself so the
  // progress indicator (count + bar) follows the swipe.
  useEffectS(() => {
    if (enabled) { setMobileProgress(0); return; }
    const track = trackRef.current;
    if (!track) return;
    let raf = null;
    const onScroll = () => {
      if (raf) return;
      raf = requestAnimationFrame(() => {
        raf = null;
        const max = track.scrollWidth - track.clientWidth;
        if (max <= 0) return;
        const p = Math.max(0, Math.min(1, track.scrollLeft / max));
        setMobileProgress(p);
      });
    };
    onScroll();
    track.addEventListener('scroll', onScroll, { passive: true });
    window.addEventListener('resize', onScroll);
    return () => {
      track.removeEventListener('scroll', onScroll);
      window.removeEventListener('resize', onScroll);
    };
  }, [enabled]);

  const N = STEPS.length;
  const translate = enabled ? -progress * (N - 1) * 100 : 0;
  const live = enabled ? progress * (N - 1) : (mobileProgress * (N - 1));
  const active = Math.min(N - 1, Math.round(live));
  const displayProgress = enabled ? progress : mobileProgress;

  return (
    <section
      ref={wrapRef}
      className={`process-scroll ${enabled ? 'enabled' : ''}`}
      id="process"
      style={enabled ? { height: `${(N + 0.4) * 100}vh` } : null}
    >
      <div className="ps-sticky" ref={stickyRef}>
        <div className="ps-head shell">
          <div className="eyebrow-row" style={{marginBottom: 24}}>
            <span className="dot"></span>
            <span className="mono">{t('process.eyebrow')}</span>
            <span className="line"></span>
          </div>
          <div className="ps-head-row">
            <h2 className="serif ps-title">{tR('process.title')}</h2>
            <div className="ps-progress" aria-hidden="true">
              <div className="ps-counter mono">
                <span style={{color:'var(--accent-alt)'}}>{String(active + 1).padStart(2, '0')}</span>
                <span style={{color:'var(--text-muted)', margin:'0 8px'}}>/</span>
                <span>{String(N).padStart(2, '0')}</span>
              </div>
              <div className="ps-bar">
                <div className="ps-bar-fill" style={{ transform: `scaleX(${displayProgress})` }}></div>
                {STEPS.map((_, i) => (
                  <span key={i} className="ps-tick" style={{ left: `${(i / (N - 1)) * 100}%` }}></span>
                ))}
              </div>
              <div className="ps-hint mono">
                {enabled ? tR('process.hint.enabled') : t('process.hint.disabled')}
              </div>
            </div>
          </div>
        </div>

        <div
          ref={trackRef}
          className="ps-track"
          style={enabled ? { transform: `translate3d(${translate}vw, 0, 0)` } : undefined}
        >
          {STEPS.map((s, i) => (
            <ProcessPanel
              key={s.n}
              step={s}
              index={i}
              total={N}
              active={i === active}
              live={live}
              enabled={enabled}
            />
          ))}
        </div>
      </div>
    </section>
  );
}

function ProcessPanel({ step, index, total, active, live, enabled }) {
  const { t } = window.useT();
  const dist = enabled ? live - index : 0;
  const enterT = Math.max(0, Math.min(1, dist + 1));
  const exitT  = Math.max(0, Math.min(1, 1 - dist));
  const opacity = enabled ? Math.min(enterT, exitT) * 0.6 + 0.4 : 1;

  return (
    <article className={`ps-panel ${active ? 'is-active' : ''}`} aria-label={`${step.n} ${step.name}`}>
      <div className="ps-panel-inner" style={{opacity}}>
        <div className="ps-left">
          <div className="ps-num serif" style={{
            transform: enabled ? `translate3d(${(1 - enterT) * 80}px, 0, 0)` : 'none',
            transition: 'transform .9s cubic-bezier(0.16,1,0.3,1)',
          }}>
            <span className="em">{step.n}</span>
            <span className="slash">/</span>
          </div>
          <div className="ps-tag mono">{t('step.phase')} {step.n}</div>
          <div className="ps-name serif">{step.name}</div>
        </div>

        <div className="ps-mid">
          <h3 className="serif ps-headline">{step.head}</h3>
          <p className="ps-body">{step.body}</p>
          <div className="ps-deliv">
            {step.deliverables.map((d, j) => (
              <div className="ps-deliv-row" key={d.k + j} style={{
                transform: enabled && active ? `translateY(0)` : (enabled ? 'translateY(8px)' : 'none'),
                opacity: enabled && active ? 1 : (enabled ? 0.6 : 1),
                transition: `transform .6s cubic-bezier(0.16,1,0.3,1) ${0.1 + j * 0.08}s, opacity .6s ease ${0.1 + j * 0.08}s`,
              }}>
                <span className="k">{d.k}</span>
                <span className="dot-sep">·</span>
                <span className="v">{d.v}</span>
              </div>
            ))}
          </div>
        </div>

        <div className="ps-right" aria-hidden="true">
          <PanelVisual index={index} enterT={enterT} active={active} />
        </div>
      </div>

      {index < total - 1 && enabled && (
        <span className="ps-next-hint mono" aria-hidden="true">{t('process.next')}</span>
      )}
    </article>
  );
}

function PanelVisual({ index, enterT, active }) {
  const { t } = window.useT();
  const drawn = enterT > 0.3;
  if (index === 0) {
    const items = [1,2,3,4,5,6].map((i) => t(`vis.1.item.${i}`));
    return (
      <div className="vis vis-list">
        <div className="vis-label">{t('vis.1.label')}</div>
        {items.map((it, i) => (
          <div key={it} className="vis-list-row" style={{
            opacity: drawn ? 1 : 0,
            transform: drawn ? 'translateX(0)' : 'translateX(-12px)',
            transition: `all .6s var(--ease-out) ${0.15 + i * 0.07}s`,
          }}>
            <span className="vis-idx">{String(i + 1).padStart(2, '0')}</span>
            <span className="vis-name">{it}</span>
            <span className="vis-mark">✓</span>
          </div>
        ))}
      </div>
    );
  }
  if (index === 1) {
    return (
      <div className="vis vis-blueprint">
        <div className="vis-label">{t('vis.2.label')}</div>
        <svg viewBox="0 0 240 240" width="100%" height="100%">
          <defs>
            <pattern id="grid" width="20" height="20" patternUnits="userSpaceOnUse">
              <path d="M 20 0 L 0 0 0 20" fill="none" stroke="currentColor" strokeOpacity="0.08" strokeWidth="1"/>
            </pattern>
          </defs>
          <rect width="240" height="240" fill="url(#grid)"/>
          {[
            ['Voice', 30, 30, 70, 32],
            ['Channels', 110, 30, 100, 32],
            ['Offer', 30, 80, 60, 32],
            ['Funnel', 100, 80, 80, 32],
            ['Ops', 30, 130, 50, 32],
            ['Content', 90, 130, 70, 32],
            ['Paid', 170, 130, 40, 32],
            ['Revenue', 30, 180, 180, 32],
          ].map(([tx, x, y, w, h], i) => (
            <g key={tx} style={{
              opacity: drawn ? 1 : 0,
              transition: `opacity .5s var(--ease-out) ${i * 0.06}s`,
            }}>
              <rect x={x} y={y} width={w} height={h} fill="none" stroke="currentColor" strokeOpacity="0.6" strokeWidth="1.2" rx="2"/>
              <text x={x + 8} y={y + 19} fontSize="10" fill="currentColor" fontFamily="Geist Mono, monospace" letterSpacing="0.5">{tx}</text>
            </g>
          ))}
          <line x1="65" y1="62" x2="65" y2="80" stroke="var(--accent-alt)" strokeWidth="1.4" strokeDasharray="2 3" style={{opacity: drawn ? 1 : 0, transition: 'opacity .5s .5s'}}/>
          <line x1="140" y1="62" x2="140" y2="80" stroke="var(--accent-alt)" strokeWidth="1.4" strokeDasharray="2 3" style={{opacity: drawn ? 1 : 0, transition: 'opacity .5s .55s'}}/>
        </svg>
      </div>
    );
  }
  if (index === 2) {
    const lines = [
      'init  site.config.ts',
      'build content-engine ✓',
      'deploy funnel.v1 ✓',
      'wire  meta-ads ✓',
      'hook  hubspot ↔ ghost',
      'ship  ━━━━━━ 100%',
    ];
    return (
      <div className="vis vis-term">
        <div className="vis-term-bar">
          <span></span><span></span><span></span>
          <span className="t">{t('vis.3.label.path')}</span>
        </div>
        <div className="vis-term-body">
          {lines.map((l, i) => (
            <div key={i} className="vis-term-line" style={{
              opacity: drawn ? 1 : 0,
              transform: drawn ? 'translateY(0)' : 'translateY(4px)',
              transition: `all .4s var(--ease-out) ${0.15 + i * 0.1}s`,
            }}>
              <span className="prompt">$</span> {l}
            </div>
          ))}
        </div>
      </div>
    );
  }
  if (index === 3) {
    const bars = [42, 58, 49, 71, 65, 88, 76, 94, 110, 102, 128, 142];
    const max = Math.max(...bars);
    return (
      <div className="vis vis-chart">
        <div className="vis-label">{t('vis.4.label')}</div>
        <div className="vis-chart-rows">
          {bars.map((b, i) => (
            <div className="vis-bar-col" key={i}>
              <div className="vis-bar" style={{
                height: drawn ? `${(b / max) * 100}%` : '0%',
                background: i === bars.length - 1 ? 'var(--accent-alt)' : 'currentColor',
                opacity: i === bars.length - 1 ? 1 : 0.18,
                transition: `height .8s var(--ease-out) ${0.15 + i * 0.04}s`,
              }}></div>
            </div>
          ))}
        </div>
        <div className="vis-chart-axis">
          <span>W1</span><span>W6</span><span style={{color:'var(--accent-alt)'}}>W12</span>
        </div>
      </div>
    );
  }
  return (
    <div className="vis vis-curve">
      <div className="vis-label">{t('vis.5.label')}</div>
      <svg viewBox="0 0 240 200" width="100%" height="100%">
        <defs>
          <linearGradient id="curveGrad" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0" stopColor="var(--accent-alt)" stopOpacity="0.4"/>
            <stop offset="1" stopColor="var(--accent-alt)" stopOpacity="0"/>
          </linearGradient>
        </defs>
        <line x1="0" y1="180" x2="240" y2="180" stroke="currentColor" strokeOpacity="0.18"/>
        <line x1="0" y1="120" x2="240" y2="120" stroke="currentColor" strokeOpacity="0.08"/>
        <line x1="0" y1="60" x2="240" y2="60" stroke="currentColor" strokeOpacity="0.08"/>
        <path
          d="M0,178 C40,176 70,168 100,150 C130,130 150,100 175,70 C195,46 215,28 240,12"
          fill="none" stroke="var(--accent-alt)" strokeWidth="2"
          strokeDasharray="600"
          strokeDashoffset={drawn ? 0 : 600}
          style={{transition: 'stroke-dashoffset 1.4s var(--ease-out) .1s'}}
        />
        <path
          d="M0,178 C40,176 70,168 100,150 C130,130 150,100 175,70 C195,46 215,28 240,12 L240,200 L0,200 Z"
          fill="url(#curveGrad)"
          opacity={drawn ? 1 : 0}
          style={{transition: 'opacity 1.2s .8s'}}
        />
        {[[0, 178, 'M1'], [60, 165, 'M6'], [120, 130, 'M12'], [180, 75, 'M18'], [232, 18, 'M24']].map(([x, y, l], i) => (
          <g key={i} style={{opacity: drawn ? 1 : 0, transition: `opacity .4s var(--ease-out) ${.6 + i * .15}s`}}>
            <circle cx={x} cy={y} r="3" fill="var(--accent-alt)"/>
            <text x={x} y={y - 10} fontSize="9" textAnchor="middle" fill="currentColor" fontFamily="Geist Mono, monospace">{l}</text>
          </g>
        ))}
      </svg>
    </div>
  );
}

window.NXProblem = Problem;
window.NXWho = Who;
window.NXServices = Services;
window.NXProcess = Process;