// Differentiator v2, Side-by-side panels (Old way vs Q8 way), Linear/Resend-style
const { useRef: useDiffRef, useEffect: useDiffEffect, useState: useDiffState } = React;

const COMPARISON = [
  {
    old:  { icon: '⊘', text: 'Stitches Zapier + Make + ChatGPT API'        },
    ours: { icon: '◆', text: 'Custom code where it matters · n8n where fine' },
  },
  {
    old:  { icon: '⊘', text: 'Single LLM call wrapped in a webhook'          },
    ours: { icon: '◆', text: 'Multi-agent · memory · tools · evals · retry' },
  },
  {
    old:  { icon: '⊘', text: '8-week timeline · vague scope · hourly billing' },
    ours: { icon: '◆', text: 'Working pilot in 2 weeks · fixed price'         },
  },
  {
    old:  { icon: '⊘', text: '"We\'ll get back to you Monday"'              },
    ours: { icon: '◆', text: 'Loom demo every Friday · Linear board live'   },
  },
  {
    old:  { icon: '⊘', text: 'Hands you a Zap and disappears'                 },
    ours: { icon: '◆', text: 'Owns uptime · evals · retraining · drift'      },
  },
  {
    old:  { icon: '⊘', text: 'Locked into their SaaS · monthly subscription' },
    ours: { icon: '◆', text: 'You own the code · run it forever'             },
  },
];

function Differentiator() {
  const [revealed, setRevealed] = useDiffState(false);
  const [highlight, setHighlight] = useDiffState(-1);
  const sectionRef = useDiffRef(null);

  useDiffEffect(() => {
    const obs = new IntersectionObserver(([e]) => { if (e.isIntersecting) setRevealed(true); }, { threshold: 0.1 });
    if (sectionRef.current) obs.observe(sectionRef.current);
    return () => obs.disconnect();
  }, []);

  // Auto-cycle highlight when in view
  useDiffEffect(() => {
    if (!revealed) return;
    const id = setInterval(() => setHighlight(h => (h + 1) % COMPARISON.length), 2200);
    return () => clearInterval(id);
  }, [revealed]);

  return (
    <section ref={sectionRef} style={{
      padding: '120px 0',
      background: 'var(--bg-primary)',
      position: 'relative', overflow: 'hidden',
    }}>
      {/* Subtle grid backdrop */}
      <div style={{
        position: 'absolute', inset: 0, pointerEvents: 'none',
        backgroundImage: `linear-gradient(rgba(0,217,160,0.018) 1px, transparent 1px), linear-gradient(90deg, rgba(0,217,160,0.018) 1px, transparent 1px)`,
        backgroundSize: '80px 80px',
      }} />

      <div style={{ maxWidth: 1180, margin: '0 auto', padding: '0 48px', position: 'relative', zIndex: 1 }}>

        {/* Header */}
        <div style={{
          marginBottom: 60, textAlign: 'center',
          opacity: revealed ? 1 : 0, transform: revealed ? 'translateY(0)' : 'translateY(24px)',
          transition: 'all 0.6s var(--ease-expo)',
        }}>
          <div style={{
            fontFamily: 'JetBrains Mono, monospace', fontSize: 11,
            color: 'var(--accent-violet-text)', letterSpacing: '0.12em',
            textTransform: 'uppercase', marginBottom: 14,
          }}>// THE DIFFERENCE</div>
          <h2 style={{
            fontFamily: 'Syne, sans-serif',
            fontSize: 'clamp(30px, 4.2vw, 54px)',
            fontWeight: 700, letterSpacing: '-0.02em',
            lineHeight: 1.08, marginBottom: 16,
          }}>
            Most "AI agencies" sell you<br />
            <span style={{ color: 'var(--accent-mint)' }}>a chatbot in a trench coat.</span>
          </h2>
          <p style={{
            fontSize: 17, color: 'var(--text-secondary)',
            maxWidth: 560, margin: '0 auto', lineHeight: 1.65, fontFamily: 'Inter, sans-serif',
          }}>
            Here's what a real production AI system looks like, and what people get instead.
          </p>
        </div>

        {/* ── Two-card panel ─────────────────────────────────────────────── */}
        <div style={{
          display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 20,
          opacity: revealed ? 1 : 0, transform: revealed ? 'translateY(0)' : 'translateY(28px)',
          transition: 'all 0.7s var(--ease-expo) 0.15s',
        }} className="diff-panels">

          {/* ── OLD WAY ────────────────────────────────────────────── */}
          <div style={{
            background: 'var(--bg-primary)',
            border: '1px solid var(--border-subtle)',
            borderTop: '2px solid #F87171',
            borderRadius: 16, overflow: 'hidden',
            boxShadow: 'var(--shadow-card)',
          }}>
            {/* Header bar */}
            <div style={{
              padding: '18px 22px',
              borderBottom: '1px solid var(--border-subtle)',
              display: 'flex', alignItems: 'center', gap: 10,
              background: 'rgba(248,113,113,0.04)',
            }}>
              <span style={{
                width: 8, height: 8, borderRadius: '50%',
                background: '#F87171', opacity: 0.8,
              }} />
              <span style={{
                fontFamily: 'JetBrains Mono, monospace', fontSize: 11,
                color: '#F87171', letterSpacing: '0.1em', fontWeight: 500,
              }}>OLD-SCHOOL AGENCIES</span>
            </div>
            {/* Rows */}
            <div style={{ padding: '8px 0' }}>
              {COMPARISON.map((row, i) => (
                <div key={i} style={{
                  display: 'flex', alignItems: 'flex-start', gap: 13,
                  padding: '14px 22px',
                  background: highlight === i ? 'rgba(248,113,113,0.05)' : 'transparent',
                  transition: 'background 0.35s ease',
                  opacity: revealed ? 1 : 0,
                  transform: revealed ? 'translateX(0)' : 'translateX(-12px)',
                  transitionDelay: `${0.2 + i * 0.06}s`,
                  transitionDuration: '0.5s',
                  transitionProperty: 'opacity, transform, background',
                }}>
                  <span style={{
                    width: 22, height: 22, borderRadius: '50%',
                    background: 'rgba(248,113,113,0.1)',
                    border: '1px solid rgba(248,113,113,0.3)',
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                    color: '#F87171', fontSize: 12, flexShrink: 0, marginTop: 1,
                  }}>{row.old.icon}</span>
                  <span style={{
                    fontFamily: 'Inter, sans-serif', fontSize: 14,
                    color: 'var(--text-tertiary)', lineHeight: 1.55,
                    textDecoration: highlight === i ? 'line-through' : 'none',
                    textDecorationColor: 'rgba(248,113,113,0.5)',
                    textDecorationThickness: '1.5px',
                    transition: 'text-decoration 0.35s ease',
                  }}>{row.old.text}</span>
                </div>
              ))}
            </div>
            {/* Footer label */}
            <div style={{
              padding: '14px 22px',
              borderTop: '1px solid var(--border-subtle)',
              background: 'var(--bg-tertiary)',
              fontFamily: 'JetBrains Mono, monospace', fontSize: 10,
              color: 'var(--text-tertiary)', letterSpacing: '0.08em',
              textAlign: 'center',
            }}>RESULT · 60% OF AI PROJECTS NEVER REACH PRODUCTION</div>
          </div>

          {/* ── Q8 WAY ─────────────────────────────────────────────── */}
          <div style={{
            background: 'var(--bg-primary)',
            border: '1px solid rgba(0,217,160,0.32)',
            borderTop: '2px solid var(--accent-mint)',
            borderRadius: 16, overflow: 'hidden',
            boxShadow: '0 16px 48px rgba(0,217,160,0.12), var(--shadow-card)',
            position: 'relative',
          }}>
            {/* Glow streak */}
            <div style={{
              position: 'absolute', top: 0, left: 0, right: 0, height: 1,
              background: 'linear-gradient(90deg, transparent, var(--accent-mint), transparent)',
              opacity: 0.6,
            }} />
            {/* Header bar */}
            <div style={{
              padding: '18px 22px',
              borderBottom: '1px solid var(--border-subtle)',
              display: 'flex', alignItems: 'center', gap: 10,
              background: 'rgba(0,217,160,0.05)',
            }}>
              <span style={{
                width: 8, height: 8, borderRadius: '50%',
                background: 'var(--accent-mint)',
                boxShadow: '0 0 8px var(--accent-mint)',
              }} />
              <span style={{
                fontFamily: 'JetBrains Mono, monospace', fontSize: 11,
                color: 'var(--accent-mint-text)', letterSpacing: '0.1em', fontWeight: 600,
              }}>QUANTAEIGHT</span>
              <span style={{
                marginLeft: 'auto',
                fontFamily: 'JetBrains Mono, monospace', fontSize: 9,
                color: 'var(--accent-mint-text)', letterSpacing: '0.08em',
                padding: '2px 8px', background: 'rgba(0,217,160,0.1)',
                borderRadius: 4, border: '1px solid rgba(0,217,160,0.3)',
              }}>RECOMMENDED</span>
            </div>
            {/* Rows */}
            <div style={{ padding: '8px 0' }}>
              {COMPARISON.map((row, i) => (
                <div key={i} style={{
                  display: 'flex', alignItems: 'flex-start', gap: 13,
                  padding: '14px 22px',
                  background: highlight === i ? 'rgba(0,217,160,0.06)' : 'transparent',
                  transition: 'background 0.35s ease',
                  opacity: revealed ? 1 : 0,
                  transform: revealed ? 'translateX(0)' : 'translateX(12px)',
                  transitionDelay: `${0.2 + i * 0.06}s`,
                  transitionDuration: '0.5s',
                  transitionProperty: 'opacity, transform, background',
                  borderLeft: highlight === i ? '2px solid var(--accent-mint)' : '2px solid transparent',
                }}>
                  <span style={{
                    width: 22, height: 22, borderRadius: '50%',
                    background: 'rgba(0,217,160,0.1)',
                    border: '1px solid rgba(0,217,160,0.4)',
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                    color: 'var(--accent-mint)', fontSize: 11, flexShrink: 0, marginTop: 1,
                  }}>{row.ours.icon}</span>
                  <span style={{
                    fontFamily: 'Inter, sans-serif', fontSize: 14,
                    color: 'var(--text-primary)', lineHeight: 1.55,
                    fontWeight: 500,
                  }}>{row.ours.text}</span>
                </div>
              ))}
            </div>
            {/* Footer label */}
            <div style={{
              padding: '14px 22px',
              borderTop: '1px solid var(--border-subtle)',
              background: 'rgba(0,217,160,0.04)',
              fontFamily: 'JetBrains Mono, monospace', fontSize: 10,
              color: 'var(--accent-mint-text)', letterSpacing: '0.08em',
              textAlign: 'center',
            }}>RESULT · 100% OF SHIPPED PILOTS HIT THEIR METRIC</div>
          </div>
        </div>

        {/* Stats below */}
        <div style={{
          marginTop: 36,
          display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 16,
          opacity: revealed ? 1 : 0,
          transition: 'opacity 0.7s ease 0.7s',
        }} className="diff-stats">
          {[
            { v: '2 wks',  l: 'average pilot deployment',  c: 'var(--accent-mint)'   },
            { v: '99.97%', l: 'production uptime SLA',     c: 'var(--accent-violet)' },
            { v: '6 wks',  l: 'discovery to deployed',     c: 'var(--accent-warm)'   },
          ].map((s, i) => (
            <div key={i} style={{
              padding: '24px 26px',
              background: 'var(--bg-tertiary)',
              border: '1px solid var(--border-subtle)',
              borderRadius: 12,
              borderLeft: `3px solid ${s.c}`,
            }}>
              <div style={{
                fontFamily: 'Syne, sans-serif', fontSize: 32, fontWeight: 700,
                color: s.c, letterSpacing: '-0.02em', lineHeight: 1, marginBottom: 8,
              }}>{s.v}</div>
              <div style={{
                fontFamily: 'JetBrains Mono, monospace', fontSize: 11,
                color: 'var(--text-tertiary)', letterSpacing: '0.06em',
              }}>{s.l}</div>
            </div>
          ))}
        </div>
      </div>

      <style>{`
        @media (max-width: 880px) {
          .diff-panels { grid-template-columns: 1fr !important; }
          .diff-stats  { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>
  );
}

Object.assign(window, { Differentiator });