window.Features = function Features() {
  const features = [
    {
      icon: "🔍",
      title: "UI/UX Audit",
      description: "Comprehensive heuristic evaluation of your interface, identifying friction points and accessibility issues."
    },
    {
      icon: "💡",
      title: "Design Improvement Suggestions",
      description: "Actionable, step-by-step recommendations to elevate your typography, spacing, and visual hierarchy."
    },
    {
      icon: "✨",
      title: "AI Redesign Ideas",
      description: "Get conceptual redesign architectures powered by our specialized disvi vision models immediately."
    }
  ];

  return (
    <section className="section" style={{ position: 'relative' }}>
      <div className="container">
        <h2 className="reveal" style={{
          textAlign: 'center',
          fontSize: '2.5rem',
          fontWeight: '700',
          marginBottom: '64px'
        }}>
          Why choose <span className="bg-gradient-text">disvi</span>
        </h2>
        
        <div style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))',
          gap: '32px'
        }}>
          {features.map((feature, idx) => (
            <div 
              key={idx} 
              className={`glass reveal delay-${idx + 1}`}
              style={{
                padding: '40px 32px',
                borderRadius: '24px',
                transition: 'transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s ease',
                cursor: 'pointer'
              }}
              onMouseEnter={(e) => {
                e.currentTarget.style.transform = 'translateY(-10px)';
                e.currentTarget.style.boxShadow = '0 20px 40px rgba(0,0,0,0.1)';
              }}
              onMouseLeave={(e) => {
                e.currentTarget.style.transform = 'translateY(0)';
                e.currentTarget.style.boxShadow = '0 8px 32px 0 rgba(0, 0, 0, 0.05)';
              }}
            >
              <div style={{
                width: '64px',
                height: '64px',
                borderRadius: '16px',
                background: 'var(--accent-gradient)',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                fontSize: '2rem',
                marginBottom: '24px',
                boxShadow: '0 8px 20px rgba(99, 102, 241, 0.3)'
              }}>
                {feature.icon}
              </div>
              <h3 style={{ fontSize: '1.5rem', marginBottom: '16px', fontWeight: '600' }}>
                {feature.title}
              </h3>
              <p style={{ color: 'var(--text-secondary)', lineHeight: '1.7' }}>
                {feature.description}
              </p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};