import React from 'react';
import { motion } from 'framer-motion';

import Counter from './Counter';

const Mission: React.FC = () => {
  return (
    <motion.section
      initial={{ opacity: 0, y: 50 }}
      whileInView={{ opacity: 1, y: 0 }}
      viewport={{ once: true, margin: "-100px" }}
      transition={{ duration: 0.8, ease: "easeOut" }}
      className="py-24 bg-background-light dark:bg-background-dark relative bg-[radial-gradient(ellipse_80%_50%_at_50%_-20%,rgba(0,0,0,0.05),rgba(0,0,0,0))] dark:bg-[radial-gradient(ellipse_80%_50%_at_50%_-20%,rgba(255,255,255,0.05),rgba(255,255,255,0))]"
    >
      <div className="max-w-7xl mx-auto px-6">
        <div className="grid grid-cols-1 md:grid-cols-2 gap-16 items-start">
          <motion.div
            initial={{ opacity: 0, x: -200 }}
            whileInView={{ opacity: 1, x: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.8, delay: 0.2 }}
          >
            <div className="flex items-center gap-2 mb-4 text-xs font-semibold uppercase tracking-widest text-gray-500 dark:text-gray-500">
              <span className="w-2 h-2 rounded-full bg-gray-400 dark:bg-gray-600"></span>
              Our Mission
            </div>
            <h2 className="font-display text-4xl md:text-5xl font-medium mb-6 leading-tight text-gray-900 dark:text-white">
              Harness invisible power <span className="text-gray-400 dark:text-gray-600">to operate faster, focus deeper, and scale effortlessly.</span>
            </h2>
          </motion.div>

          <motion.div
            initial={{ opacity: 0, x: 200 }}
            whileInView={{ opacity: 1, x: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.8, delay: 0.4 }}
            className="pt-4"
          >
            <p className="text-lg text-gray-600 dark:text-gray-400 leading-relaxed mb-8">
              Technology shouldn't be a hurdle; it should be the wind at your back. From seamless cloud migrations to robust cybersecurity, we handle the complexities so you can focus on what matters most: your business.
            </p>
            <div className="grid grid-cols-2 gap-8 border-t border-gray-200 dark:border-white/10 pt-8">
              <motion.div whileHover={{ scale: 1.05 }} className="cursor-default">
                <span className="block text-3xl font-display font-bold mb-2 text-gray-900 dark:text-white flex items-center">
                  <Counter value={99.9} />%
                </span>
                <span className="text-sm text-gray-500 dark:text-gray-500">Uptime Guarantee</span>
              </motion.div>
              <motion.div whileHover={{ scale: 1.05 }} className="cursor-default">
                <span className="block text-3xl font-display font-bold mb-2 text-gray-900 dark:text-white flex items-center">
                  <Counter value={24} />/7
                </span>
                <span className="text-sm text-gray-500 dark:text-gray-500">Support Availability</span>
              </motion.div>
            </div>
          </motion.div>
        </div>
      </div>
    </motion.section>
  );
};

export default Mission;