import { motion } from 'framer-motion'
import { Container } from '../../components/Container'

export function LoadBalancing() {
  return (
    <section className="bg-gray-50 py-20 lg:py-32">
      <Container>
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
          {/* Visual Placeholder */}
          <motion.div
            initial={{ opacity: 0, x: -20 }}
            whileInView={{ opacity: 1, x: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.8 }}
            className="relative aspect-square rounded-2xl bg-gradient-to-br from-blue-50 to-cyan-50 border border-gray-200 flex items-center justify-center"
          >
            <div className="text-center p-8">
              <div className="text-6xl mb-4">⚖️</div>
              <p className="text-gray-600">Auto-scaling & Load Balancing</p>
            </div>
          </motion.div>

          {/* Content */}
          <motion.div
            initial={{ opacity: 0, x: 20 }}
            whileInView={{ opacity: 1, x: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.8 }}
          >
            <h2 className="text-3xl lg:text-4xl font-medium tracking-tight text-gray-900">
              Effortless Load Balancing & Scaling
            </h2>
            <p className="mt-6 text-lg text-gray-600">
              Mycelium Cloud automatically balances traffic and scales your services up or down based on demand. Enjoy high availability and optimal performance with zero manual intervention.
            </p>
            <div className="mt-6 flex flex-wrap gap-3">
              <span className="inline-flex items-center rounded-full border border-cyan-500 px-4 py-2 text-sm font-medium text-cyan-500">
                Auto-scaling
              </span>
              <span className="inline-flex items-center rounded-full border border-cyan-500 px-4 py-2 text-sm font-medium text-cyan-500">
                Built-in load balancing
              </span>
              <span className="inline-flex items-center rounded-full border border-cyan-500 px-4 py-2 text-sm font-medium text-cyan-500">
                High availability
              </span>
            </div>
          </motion.div>
        </div>
      </Container>
    </section>
  )
}