// Founder, humanizes the brand. Critical conversion piece for a small agency.
const { useRef: useFndRef, useEffect: useFndEffect, useState: useFndState } = React;

function Founder() {
  const [revealed, setRevealed] = useFndState(false);
  const sectionRef = useFndRef(null);

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

  return (
    <section ref={sectionRef} style={{
      padding: '110px 0',
      background: 'var(--bg-primary)',
      position: 'relative', overflow: 'hidden',
    }}>
      {/* Subtle accent line */}
      <div style={{
        position: 'absolute', top: 0, left: 0, right: 0, height: 1,
        background: 'linear-gradient(90deg, transparent, var(--accent-mint), transparent)',
        opacity: 0.18,
      }} />

      <div style={{ maxWidth: 1100, margin: '0 auto', padding: '0 48px' }}>

        <div style={{
          display: 'grid', gridTemplateColumns: '240px 1fr', gap: 64, alignItems: 'center',
          opacity: revealed ? 1 : 0, transform: revealed ? 'translateY(0)' : 'translateY(28px)',
          transition: 'all 0.7s cubic-bezier(0.16,1,0.3,1)',
        }} className="fnd-grid">

          {/* LEFT, avatar block */}
          <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', textAlign: 'center' }}>
            <div style={{
              width: 200, height: 240, borderRadius: 18,
              border: '1px solid var(--border-emphasis)',
              position: 'relative', marginBottom: 22, overflow: 'hidden',
              boxShadow: '0 20px 50px rgba(0,0,0,0.32), inset 0 1px 0 rgba(255,255,255,0.06)',
              background: 'linear-gradient(135deg, rgba(0,217,160,0.10), rgba(139,92,246,0.08))',
            }}>
              <img src="assets/founder.jpg" alt="Ratan Kumar"
                onError={(e) => { e.currentTarget.style.display = 'none'; }}
                style={{
                  width: '100%', height: '100%', objectFit: 'cover',
                  display: 'block',
                }}
              />
              {/* Soft top-left mint highlight */}
              <span style={{
                position: 'absolute', top: 0, left: 0, right: 0, height: 60,
                background: 'linear-gradient(180deg, rgba(0,217,160,0.18), transparent)',
                pointerEvents: 'none',
              }} />
              {/* Live dot */}
              <span style={{
                position: 'absolute', bottom: 12, right: 12,
                width: 14, height: 14, borderRadius: '50%',
                background: 'var(--accent-mint)',
                boxShadow: '0 0 12px var(--accent-mint), 0 0 0 3px rgba(0,0,0,0.4)',
                animation: 'fnd-pulse 2.2s ease infinite',
              }} />
            </div>
            <div style={{
              fontFamily: 'Syne, sans-serif', fontSize: 22, fontWeight: 700,
              letterSpacing: '-0.01em', color: 'var(--text-primary)', marginBottom: 4,
            }}>Ratan Kumar</div>
            <div style={{
              fontFamily: 'JetBrains Mono, monospace', fontSize: 11,
              color: 'var(--accent-mint-text)', letterSpacing: '0.1em', marginBottom: 12,
            }}>FOUNDER · LEAD ENGINEER</div>
            {/* Experience chips, stacked */}
            <div style={{ display: 'flex', flexDirection: 'column', gap: 6, alignItems: 'center' }}>
              {[
                '3+ YRS · AI & AUTOMATION',
                '5+ YRS · AUTOMATION',
                '8+ YRS · SOFTWARE DEVELOPER',
              ].map((chip, i) => (
                <div key={i} style={{
                  fontFamily: 'JetBrains Mono, monospace', fontSize: 9.5,
                  color: 'var(--text-secondary)', letterSpacing: '0.08em',
                  padding: '5px 12px', border: '1px solid var(--border-subtle)',
                  borderRadius: 6, background: 'var(--bg-secondary)',
                }}>{chip}</div>
              ))}
            </div>
          </div>

          {/* RIGHT, story */}
          <div>
            <div style={{
              fontFamily: 'JetBrains Mono, monospace', fontSize: 11,
              color: 'var(--accent-mint-text)', letterSpacing: '0.12em',
              textTransform: 'uppercase', marginBottom: 14,
            }}>// WHY QUANTAEIGHT EXISTS</div>

            <h2 style={{
              fontFamily: 'Syne, sans-serif', fontSize: 'clamp(26px, 3vw, 38px)',
              fontWeight: 700, letterSpacing: '-0.02em', lineHeight: 1.18,
              marginBottom: 22, color: 'var(--text-primary)',
            }}>
              I built this because B2B operators are<br />
              <span style={{ color: 'var(--accent-mint)' }}>drowning in work AI can already do.</span>
            </h2>

            <p style={{
              fontSize: 16, fontFamily: 'Inter, sans-serif',
              color: 'var(--text-secondary)', lineHeight: 1.75, marginBottom: 18, maxWidth: 580,
            }}>
              Most "AI agencies" stitch together no-code tools and call it innovation. I spent five years building real production systems, agents with memory, evals, and uptime SLAs, for teams who needed automation that actually held up under load.
            </p>

            <p style={{
              fontSize: 16, fontFamily: 'Inter, sans-serif',
              color: 'var(--text-secondary)', lineHeight: 1.75, marginBottom: 28, maxWidth: 580,
            }}>
              Quantaeight is the agency I wish existed when I was a founder. Fixed price. Working pilot in 2 weeks. Loom demo every Friday. Code you own. Your system, not our SaaS.
            </p>

            {/* Pull quote */}
            <div style={{
              padding: '20px 24px',
              background: 'var(--bg-secondary)',
              borderLeft: '3px solid var(--accent-mint)',
              borderRadius: '0 8px 8px 0',
              maxWidth: 580, marginBottom: 28,
            }}>
              <div style={{
                fontFamily: 'Syne, sans-serif', fontSize: 17, fontStyle: 'italic',
                color: 'var(--text-primary)', lineHeight: 1.55, fontWeight: 500,
              }}>
                "If we can't make the numbers move in a 2-week pilot,<br />
                we don't deserve a 6-week build."
              </div>
            </div>

            {/* Credentials chips */}
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
              {[
                'Production AI systems',
                'Multi-agent architectures',
                'US · UK · GCC clients',
                'HIPAA · GDPR aware',
              ].map((c, i) => (
                <span key={i} style={{
                  fontFamily: 'JetBrains Mono, monospace', fontSize: 10,
                  color: 'var(--text-secondary)', letterSpacing: '0.04em',
                  padding: '6px 11px',
                  background: 'var(--bg-secondary)',
                  border: '1px solid var(--border-subtle)',
                  borderRadius: 6,
                }}>{c}</span>
              ))}
            </div>
          </div>
        </div>
      </div>

      <style>{`
        @keyframes fnd-pulse {
          0%,100% { transform: scale(1);   opacity: 1; }
          50%     { transform: scale(1.18); opacity: 0.6; }
        }
        @media (max-width: 760px) {
          .fnd-grid { grid-template-columns: 1fr !important; gap: 36px !important; text-align: center; }
          .fnd-grid > div:last-child { text-align: left; }
        }
      `}</style>
    </section>
  );
}

Object.assign(window, { Founder });