// Services.jsx — 3 service cards: Trust Architecture / AI Engine Optimization / Conversion Systems

const SERVICES = [
  {
    number: '01',
    title: 'Trust Architecture',
    subtitle: 'First impressions that convert',
    description: 'We engineer every trust signal — social proof, authority markers, visual hierarchy, and messaging — so visitors believe in you before they read a single word of copy.',
    features: ['Brand credibility systems', 'Social proof engineering', 'Authority signal placement', 'Visual trust hierarchy'],
    accent: '#3B82F6',
    icon: (
      <svg viewBox="0 0 48 48" fill="none" style={{ width: '28px', height: '28px' }}>
        <path d="M24 4L6 12v16c0 10 8 16 18 20 10-4 18-10 18-20V12L24 4z" stroke="#3B82F6" strokeWidth="1.5" strokeLinejoin="round" fill="rgba(59,130,246,0.08)" />
        <path d="M16 24l6 6 10-10" stroke="#3B82F6" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
      </svg>
    ),
  },
  {
    number: '02',
    title: 'AI Engine Optimization',
    subtitle: 'Get cited by ChatGPT, Gemini & Claude',
    description: 'The new SEO. We structure your content, schema, and authority signals so AI systems understand, trust, and recommend your business when customers ask.',
    features: ['AI citation architecture', 'Semantic content structuring', 'Knowledge graph optimization', 'LLM-readable schema markup'],
    accent: '#ADFF2F',
    icon: (
      <svg viewBox="0 0 48 48" fill="none" style={{ width: '28px', height: '28px' }}>
        <circle cx="24" cy="24" r="10" stroke="#ADFF2F" strokeWidth="1.5" fill="rgba(173,255,47,0.06)" />
        <circle cx="24" cy="24" r="4" fill="#ADFF2F" opacity="0.8" />
        {[0,72,144,216,288].map((angle, i) => {
          const rad = (angle * Math.PI) / 180;
          return (
            <React.Fragment key={i}>
              <line x1={24 + 10*Math.cos(rad)} y1={24 + 10*Math.sin(rad)} x2={24 + 18*Math.cos(rad)} y2={24 + 18*Math.sin(rad)} stroke="#ADFF2F" strokeWidth="1" opacity="0.5" />
              <circle cx={24 + 19*Math.cos(rad)} cy={24 + 19*Math.sin(rad)} r="2.5" fill="#ADFF2F" opacity="0.6" />
            </React.Fragment>
          );
        })}
      </svg>
    ),
  },
  {
    number: '03',
    title: 'Conversion Systems',
    subtitle: 'Every click, engineered to close',
    description: 'We build conversion flows that guide visitors from awareness to action. CTA architecture, landing page psychology, and funnel engineering — built to compound.',
    features: ['CTA hierarchy design', 'Funnel flow architecture', 'Conversion copywriting', 'A/B test frameworks'],
    accent: '#3B82F6',
    accentGradient: 'linear-gradient(135deg, #3B82F6, #ADFF2F)',
    icon: (
      <svg viewBox="0 0 48 48" fill="none" style={{ width: '28px', height: '28px' }}>
        <path d="M8 38h8V22H8v16zm12 0h8V14H20v24zm12 0h8V8H32v30z" stroke="#3B82F6" strokeWidth="1.5" fill="rgba(59,130,246,0.08)" strokeLinejoin="round" />
        <path d="M10 18l8-6 8 4 10-8" stroke="#ADFF2F" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
      </svg>
    ),
  },
];

const ServicesSection = () => {
  const [hoveredCard, setHoveredCard] = React.useState(null);
  const [tilts, setTilts] = React.useState({});
  const cardRefs = React.useRef([]);

  const handleCardMouseMove = React.useCallback((e, i) => {
    const card = cardRefs.current[i];
    if (!card) return;
    const rect = card.getBoundingClientRect();
    const x = ((e.clientX - rect.left) / rect.width  - 0.5) * 2;
    const y = ((e.clientY - rect.top)  / rect.height - 0.5) * 2;
    setTilts(prev => ({ ...prev, [i]: { rotX: -y * 9, rotY: x * 9 } }));
  }, []);

  const handleCardMouseLeave = React.useCallback((i) => {
    setHoveredCard(null);
    setTilts(prev => ({ ...prev, [i]: { rotX: 0, rotY: 0 } }));
  }, []);

  return (
    <section
      id="services"
      style={{
        background: '#0B1222',
        padding: 'clamp(80px, 12vh, 140px) 5vw',
        position: 'relative',
        overflow: 'hidden',
      }}
    >
      {/* Background decoration */}
      <div style={{
        position: 'absolute',
        top: '10%', right: '-10%',
        width: '500px', height: '500px',
        background: 'radial-gradient(circle, rgba(59,130,246,0.04) 0%, transparent 70%)',
        pointerEvents: 'none',
      }} />

      <div style={{ maxWidth: '1200px', margin: '0 auto' }}>
        {/* Section header */}
        <div style={{ marginBottom: 'clamp(48px, 8vh, 80px)' }}>
          <span style={{
            fontSize: '0.65rem',
            letterSpacing: '0.18em',
            textTransform: 'uppercase',
            color: '#3B82F6',
            fontFamily: "'DM Sans', sans-serif",
            fontWeight: 500,
          }}>
            What we build
          </span>
          <h2 style={{
            fontFamily: "'Syne', sans-serif",
            fontSize: 'clamp(2rem, 4.5vw, 3.8rem)',
            fontWeight: 300,
            letterSpacing: '-0.02em',
            color: '#e8e8e8',
            margin: '12px 0 0',
            lineHeight: 1.1,
          }}>
            Three systems.<br />
            <span style={{ color: '#ADFF2F' }}>One outcome.</span>
          </h2>
        </div>

        {/* Cards grid */}
        <div style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fit, minmax(320px, 1fr))',
          gap: '24px',
        }}>
          {SERVICES.map((svc, i) => {
            const tilt = tilts[i] || { rotX: 0, rotY: 0 };
            const isHovered = hoveredCard === i;
            return (
            <div
              key={i}
              ref={el => cardRefs.current[i] = el}
              onMouseEnter={() => setHoveredCard(i)}
              onMouseMove={e => handleCardMouseMove(e, i)}
              onMouseLeave={() => handleCardMouseLeave(i)}
              style={{
                background: isHovered ? 'rgba(255,255,255,0.04)' : 'rgba(255,255,255,0.02)',
                border: `1px solid ${isHovered ? svc.accent + '44' : 'rgba(255,255,255,0.06)'}`,
                borderRadius: '16px',
                padding: '36px',
                cursor: 'default',
                transition: isHovered
                  ? 'background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, transform 0.08s ease-out'
                  : 'all 0.55s cubic-bezier(0.2, 0.8, 0.2, 1)',
                transform: `perspective(1000px) rotateX(${tilt.rotX}deg) rotateY(${tilt.rotY}deg) translateY(${isHovered ? '-4px' : '0'})`,
                transformStyle: 'preserve-3d',
                boxShadow: isHovered ? `0 20px 60px rgba(0,0,0,0.5), 0 0 0 1px ${svc.accent}22` : 'none',
                position: 'relative',
                overflow: 'hidden',
                willChange: 'transform',
              }}
            >
              {/* Card glow on hover */}
              {hoveredCard === i && (
                <div style={{
                  position: 'absolute',
                  top: 0, right: 0,
                  width: '200px', height: '200px',
                  background: `radial-gradient(circle at top right, ${svc.accent}0f, transparent 70%)`,
                  pointerEvents: 'none',
                }} />
              )}

              {/* Number + icon row */}
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: '24px' }}>
                <span style={{
                  fontFamily: "'Syne', sans-serif",
                  fontSize: '0.7rem',
                  letterSpacing: '0.12em',
                  color: svc.accent,
                  opacity: 0.5,
                  fontWeight: 600,
                }}>
                  {svc.number}
                </span>
                <div style={{
                  width: '48px', height: '48px',
                  borderRadius: '12px',
                  background: `${svc.accent}10`,
                  border: `1px solid ${svc.accent}22`,
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'center',
                }}>
                  {svc.icon}
                </div>
              </div>

              {/* Title */}
              <h3 style={{
                fontFamily: "'Syne', sans-serif",
                fontSize: 'clamp(1.2rem, 2vw, 1.5rem)',
                fontWeight: 400,
                color: '#e8e8e8',
                margin: '0 0 6px',
                letterSpacing: '-0.01em',
              }}>
                {svc.title}
              </h3>
              <p style={{
                fontFamily: "'DM Sans', sans-serif",
                fontSize: '0.78rem',
                color: svc.accent,
                margin: '0 0 16px',
                letterSpacing: '0.04em',
              }}>
                {svc.subtitle}
              </p>
              <p style={{
                fontFamily: "'DM Sans', sans-serif",
                fontSize: '0.93rem',
                color: '#64748B',
                lineHeight: 1.7,
                margin: '0 0 28px',
              }}>
                {svc.description}
              </p>

              {/* Feature list */}
              <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
                {svc.features.map((f, j) => (
                  <div key={j} style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
                    <span style={{ width: '4px', height: '4px', borderRadius: '50%', background: svc.accent, flexShrink: 0 }} />
                    <span style={{ fontFamily: "'DM Sans', sans-serif", fontSize: '0.82rem', color: '#94a3b8' }}>{f}</span>
                  </div>
                ))}
              </div>
            </div>
          );
          })}
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { ServicesSection });