// HomeMotion.jsx — motion layer for the homepage: staggered reveals, a live engagement
// timeline, a global threat-map band, animated section dividers, and a tilt wrapper.

// ── Stagger: reveals direct children one after another when scrolled into view
const Stagger = ({ children, step = 70, style, className }) => {
  const ref = React.useRef(null);
  const [on, setOn] = React.useState(false);
  React.useEffect(() => {
    const el = ref.current; if (!el) return;
    const obs = new IntersectionObserver(([e]) => { if (e.isIntersecting) { setOn(true); obs.disconnect(); } }, { threshold: 0.12 });
    obs.observe(el); return () => obs.disconnect();
  }, []);
  return (
    <div ref={ref} className={className} style={style}>
      {React.Children.map(children, (c, i) => c == null ? c : (
        <div style={{ opacity: on ? 1 : 0, transform: on ? 'none' : 'translateY(14px)', transition: `opacity 560ms ease-out ${i * step}ms, transform 560ms cubic-bezier(.2,.7,.2,1) ${i * step}ms`, minWidth: 0, display: 'contents' }} className="gs-stagger-item">
          {c}
        </div>
      ))}
    </div>
  );
};

// ── Tilt: subtle 3D tilt that follows the cursor, with a moving highlight
const Tilt = ({ children, max = 4, style }) => {
  const ref = React.useRef(null);
  const [t, setT] = React.useState({ rx: 0, ry: 0, gx: 50, gy: 50, on: false });
  const onMove = (e) => {
    const r = ref.current.getBoundingClientRect();
    const px = (e.clientX - r.left) / r.width, py = (e.clientY - r.top) / r.height;
    setT({ rx: (0.5 - py) * max * 2, ry: (px - 0.5) * max * 2, gx: px * 100, gy: py * 100, on: true });
  };
  const onLeave = () => setT({ rx: 0, ry: 0, gx: 50, gy: 50, on: false });
  return (
    <div ref={ref} onMouseMove={onMove} onMouseLeave={onLeave} style={{ perspective: 1200, textAlign: 'left', ...style }}>
      <div style={{ transform: `rotateX(${t.rx}deg) rotateY(${t.ry}deg)`, transition: t.on ? 'transform 80ms linear' : 'transform 500ms cubic-bezier(.2,.7,.2,1)', transformStyle: 'preserve-3d', position: 'relative' }}>
        {children}
        <div style={{ position: 'absolute', inset: 0, borderRadius: 'inherit', pointerEvents: 'none', opacity: t.on ? 1 : 0, transition: 'opacity 300ms', background: `radial-gradient(420px circle at ${t.gx}% ${t.gy}%, rgba(130,143,255,0.10), transparent 60%)` }} />
      </div>
    </div>
  );
};

// ── SectionEdge with a travelling light
const LiveEdge = () => (
  <div style={{ maxWidth: 1280, margin: '0 auto', height: 1, background: '#1a1b1e', position: 'relative', overflow: 'hidden' }}>
    <div style={{ position: 'absolute', top: 0, left: 0, height: 1, width: 180, background: 'linear-gradient(90deg, transparent, rgba(130,143,255,0.7), transparent)', animation: 'gs-edge-travel 7s ease-in-out infinite' }} />
  </div>
);

// ── Engagement timeline: a live, looping view of one engagement from scoping to retest
const TL_STEPS = [
  { d: 'Day 0',  t: 'Scoping call',        m: '30 minutes. Scope, roles, and objectives agreed.',              icon: 'chat' },
  { d: 'Day 2',  t: 'Fixed-fee proposal',  m: 'Statement of work and rules of engagement signed.',           icon: 'layers' },
  { d: 'Day 4',  t: 'Kickoff',             m: 'Your tester joins the shared channel. Test accounts ready.',   icon: 'user' },
  { d: 'Day 5',  t: 'Testing begins',      m: 'Daily updates. Critical findings disclosed within one hour.', icon: 'target' },
  { d: 'Day 14', t: 'Report and readout',  m: 'Executive summary and technical report walked through live.', icon: 'code' },
  { d: 'Day 41', t: 'Free retest',         m: 'Every High and Critical verified fixed. Letter refreshed.',   icon: 'check' },
];

const EngagementTimeline = () => {
  const ref = React.useRef(null);
  const [seen, setSeen] = React.useState(false);
  const [i, setI] = React.useState(0);
  React.useEffect(() => {
    const el = ref.current; if (!el) return;
    const obs = new IntersectionObserver(([e]) => { if (e.isIntersecting) { setSeen(true); obs.disconnect(); } }, { threshold: 0.25 });
    obs.observe(el); return () => obs.disconnect();
  }, []);
  React.useEffect(() => { if (!seen) return; const t = setInterval(() => setI(x => (x + 1) % TL_STEPS.length), 2200); return () => clearInterval(t); }, [seen]);
  const pct = (i / (TL_STEPS.length - 1)) * 100;
  return (
    <section ref={ref} style={{ maxWidth: 1280, margin: '0 auto', padding: '96px 32px' }}>
      <div style={{ maxWidth: 680, margin: '0 auto 48px', textAlign: 'center' }}>
        <p style={{ fontSize: 13, fontWeight: 500, color: '#828fff', letterSpacing: '0.5px', textTransform: 'uppercase', margin: '0 0 14px' }}>Timeline</p>
        <h2 style={{ fontFamily: 'var(--font-display)', fontSize: 'clamp(32px, 4vw, 50px)', fontWeight: 600, lineHeight: 1.05, letterSpacing: '-1.8px', color: '#f7f8f8', margin: '0 0 14px' }}>From first call to verified fix</h2>
        <p style={{ fontSize: 17, color: '#8a8f98', lineHeight: 1.55, margin: 0 }}>A typical two-week engagement, with the free retest included.</p>
      </div>

      <div style={{ position: 'relative', padding: '8px 0 0' }}>
        {/* Track */}
        <div className="gs-tl-track" style={{ position: 'absolute', left: '8.33%', right: '8.33%', top: 25, height: 2, background: '#1e1f22', borderRadius: 2 }}>
          <div style={{ position: 'absolute', left: 0, top: 0, bottom: 0, width: `${pct}%`, background: 'linear-gradient(90deg, #5e6ad2, #828fff)', borderRadius: 2, transition: 'width 900ms cubic-bezier(.2,.7,.2,1)' }} />
          <div style={{ position: 'absolute', top: -5, left: `${pct}%`, width: 12, height: 12, marginLeft: -6, borderRadius: '50%', background: '#828fff', boxShadow: '0 0 0 6px rgba(130,143,255,0.18), 0 0 24px rgba(130,143,255,0.6)', transition: 'left 900ms cubic-bezier(.2,.7,.2,1)' }} />
        </div>

        <div className="gs-tl-grid" style={{ display: 'grid', gridTemplateColumns: `repeat(${TL_STEPS.length}, minmax(0, 1fr))`, gap: 12 }}>
          {TL_STEPS.map((s, k) => {
            const active = k === i, done = k < i;
            return (
              <button key={s.t} onClick={() => setI(k)} style={{ background: 'none', border: 'none', padding: 0, cursor: 'pointer', textAlign: 'left', minWidth: 0, color: 'inherit', font: 'inherit', display: 'flex', flexDirection: 'column' }} aria-pressed={active}>
                <div style={{ display: 'flex', justifyContent: 'center', marginBottom: 22, height: 36, alignItems: 'center' }}>
                  <div style={{ width: 36, height: 36, borderRadius: '50%', display: 'flex', alignItems: 'center', justifyContent: 'center', position: 'relative', zIndex: 1,
                    background: active ? '#5e6ad2' : done ? 'rgba(94,105,210,0.18)' : '#0f1011',
                    border: `1px solid ${active ? '#828fff' : done ? 'rgba(94,105,210,0.4)' : '#23252a'}`,
                    boxShadow: active ? '0 0 0 8px rgba(94,105,210,0.12)' : 'none', transition: 'all 400ms' }}>
                    <Icon name={done ? 'check' : s.icon} size={14} color={active ? '#fff' : done ? '#828fff' : '#62666d'} strokeWidth={2} />
                  </div>
                </div>
                <div style={{ background: active ? '#141516' : '#0f1011', border: `1px solid ${active ? '#34343a' : '#23252a'}`, borderRadius: 12, padding: 16, minHeight: 132, height: '100%', transition: 'all 400ms', boxShadow: active ? '0 18px 40px -22px rgba(0,0,0,0.9), 0 0 0 1px rgba(130,143,255,0.14)' : 'none', position: 'relative', overflow: 'hidden' }}>
                  {active && <div style={{ position: 'absolute', top: 0, left: 0, right: 0, height: 1, background: 'linear-gradient(90deg, transparent, rgba(130,143,255,0.6), transparent)' }} />}
                  <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: active ? '#828fff' : '#62666d', marginBottom: 6, transition: 'color 300ms' }}>{s.d}</div>
                  <div style={{ fontFamily: 'var(--font-display)', fontSize: 15, fontWeight: 500, color: '#f7f8f8', letterSpacing: '-0.2px', marginBottom: 6 }}>{s.t}</div>
                  <div style={{ fontSize: 12.5, color: active ? '#a8aeb8' : '#62666d', lineHeight: 1.5, transition: 'color 300ms' }}>{s.m}</div>
                </div>
              </button>
            );
          })}
        </div>
      </div>
    </section>
  );
};

// ── Global reach band: ThreatMap canvas with three live counters
const GlobalBand = () => {
  const ref = React.useRef(null);
  const [seen, setSeen] = React.useState(false);
  React.useEffect(() => {
    const el = ref.current; if (!el) return;
    const obs = new IntersectionObserver(([e]) => { if (e.isIntersecting) { setSeen(true); obs.disconnect(); } }, { threshold: 0.2 });
    obs.observe(el); return () => obs.disconnect();
  }, []);
  const Counter = ({ to, suffix = '', label }) => {
    const [v, setV] = React.useState(0);
    React.useEffect(() => {
      if (!seen) return; const s = performance.now(); let raf;
      const tick = (t) => { const p = Math.min(1, (t - s) / 1400); setV(Math.round(to * (1 - Math.pow(1 - p, 3)))); if (p < 1) raf = requestAnimationFrame(tick); };
      raf = requestAnimationFrame(tick); return () => cancelAnimationFrame(raf);
    }, [seen]);
    return (
      <div>
        <div style={{ fontFamily: 'var(--font-display)', fontSize: 'clamp(28px, 3vw, 40px)', fontWeight: 600, letterSpacing: '-1.4px', color: '#f7f8f8', lineHeight: 1, fontVariantNumeric: 'tabular-nums' }}>{v.toLocaleString()}{suffix}</div>
        <div style={{ fontSize: 12.5, color: '#8a8f98', marginTop: 8 }}>{label}</div>
      </div>
    );
  };
  return (
    <section ref={ref} style={{ background: '#0a0b0c', borderTop: '1px solid #1a1b1e', borderBottom: '1px solid #1a1b1e', position: 'relative', overflow: 'hidden' }}>
      <div style={{ position: 'absolute', inset: 0, opacity: 0.55, maskImage: 'linear-gradient(90deg, transparent, black 30%, black 70%, transparent)', WebkitMaskImage: 'linear-gradient(90deg, transparent, black 30%, black 70%, transparent)' }}>
        <ThreatMap height={420} />
      </div>
      <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(90deg, #0a0b0c 0%, rgba(10,11,12,0.7) 40%, rgba(10,11,12,0.2) 100%)', pointerEvents: 'none' }} />
      <div style={{ position: 'relative', maxWidth: 1280, margin: '0 auto', padding: '88px 32px', display: 'grid', gridTemplateColumns: 'minmax(0, 1fr) minmax(0, 1fr)', gap: 48, alignItems: 'center' }} className="gs-band">
        <div>
          <p style={{ fontSize: 13, fontWeight: 500, color: '#828fff', letterSpacing: '0.5px', textTransform: 'uppercase', margin: '0 0 14px' }}>The team</p>
          <h2 style={{ fontFamily: 'var(--font-display)', fontSize: 'clamp(30px, 3.6vw, 46px)', fontWeight: 600, lineHeight: 1.05, letterSpacing: '-1.6px', color: '#f7f8f8', margin: '0 0 14px' }}>Built for how your team works</h2>
          <p style={{ fontSize: 16, color: '#a8aeb8', lineHeight: 1.6, margin: 0, maxWidth: 480 }}>Engagements are delivered remotely and scheduled around your working hours, with your data handled according to your residency requirements.</p>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, minmax(0, 1fr))', gap: 12 }}>
          {/* Coverage facts drawn from this page (Services, WhyUs, FAQ), not client statistics */}
          <div style={{ background: 'rgba(15,16,17,0.85)', border: '1px solid #23252a', borderRadius: 12, padding: 18, backdropFilter: 'blur(6px)' }}><Counter to={100} suffix="%" label="Delivered remotely" /></div>
          <div style={{ background: 'rgba(15,16,17,0.85)', border: '1px solid #23252a', borderRadius: 12, padding: 18, backdropFilter: 'blur(6px)' }}><Counter to={6} label="Service lines, one team" /></div>
          <div style={{ background: 'rgba(15,16,17,0.85)', border: '1px solid #23252a', borderRadius: 12, padding: 18, backdropFilter: 'blur(6px)' }}><Counter to={9} label="Compliance frameworks mapped" /></div>
        </div>
      </div>
    </section>
  );
};

// ── Floating "book a call" pill that appears after the hero and hides near the contact form
const FloatingCta = () => {
  const [show, setShow] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => {
      const c = document.getElementById('contact');
      const nearContact = c ? c.getBoundingClientRect().top < window.innerHeight : false;
      setShow(window.scrollY > window.innerHeight * 0.9 && !nearContact);
    };
    onScroll(); window.addEventListener('scroll', onScroll, { passive: true }); return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return (
    <a href="#contact" aria-hidden={!show} tabIndex={show ? 0 : -1} className="gs-float-cta" style={{
      position: 'fixed', left: '50%', bottom: 24, transform: `translateX(-50%) translateY(${show ? 0 : 24}px)`, opacity: show ? 1 : 0, pointerEvents: show ? 'auto' : 'none',
      transition: 'opacity 300ms, transform 300ms cubic-bezier(.2,.7,.2,1)', zIndex: 60,
      display: 'inline-flex', alignItems: 'center', gap: 10, padding: '10px 10px 10px 16px', borderRadius: 9999, textDecoration: 'none',
      background: 'rgba(15,16,17,0.92)', border: '1px solid #34343a', boxShadow: '0 12px 40px -12px rgba(0,0,0,0.8)', backdropFilter: 'blur(10px)',
    }}>
      <span className="gs-pulse" style={{ width: 7, height: 7, borderRadius: '50%', background: '#27a644' }} />
      <span style={{ fontSize: 13, color: '#d0d6e0' }}>Scoping calls this week</span>
      <span style={{ fontSize: 13, fontWeight: 500, color: '#fff', background: '#5e6ad2', borderRadius: 9999, padding: '6px 12px' }}>Get a quote</span>
    </a>
  );
};

Object.assign(window, { Stagger, Tilt, LiveEdge, EngagementTimeline, GlobalBand, FloatingCta });