import React from 'react';
import { motion } from 'framer-motion';
import { Code, Users, Coffee, Zap } from 'lucide-react';

// Optimized constants to prevent object recreation on renders
const HARDWARE_ACCELERATION_STYLE = {
  transform: 'translateZ(0)',
  willChange: 'transform, opacity'
} as const;

const clients = [
  'K&M Systems, Inc.',
  'Arrow Plumbing & Drain Services',
  'Play Or Draw',
  'The Perlman Clinic'
];

const team = [
  {
    name: 'Louis Sheid',
    role: 'Technical Lead',
    bio: 'Our founder and owner, a lifelong techie with full-stack experience in radio frequency, healthcare, and e-commerce.',
    hobby: 'Enjoys touching grass and making music.'
  },
  {
    name: 'Alan Trapenard',
    role: 'Developer / Data Analyst',
    bio: 'UCSD alumni, Cognitive Science with Machine Learning specialization.',
    hobby: 'Enjoys video games and playing Giant Steps on alto saxophone.'
  },
  {
    name: 'Christopher Dove',
    role: 'Developer',
    bio: 'Background in computer science, with experience in cybersecurity, web development, and game theory.',
    hobby: 'Enjoys high-stakes poker and shadow boxing.'
  },
  {
    name: 'Alberto Casillas',
    role: 'Accounting',
    bio: 'Experience advising a local plumbing company, preparing for audits.',
    hobby: 'Enjoys skateboarding with his dog and reading.'
  },
  {
    name: 'Jason Lashchuk',
    role: 'Developer',
    bio: 'Passionate about hardware-software intersections, with experience in RF, embedded systems, and web development.',
    hobby: 'Enjoys long walks on the beach.'
  },
  {
    name: 'Leonardo Braga',
    role: 'Marketing Consultant',
    bio: 'Designs web presences and creates marketing strategies for tech startups, e-commerce brands, and B2B campaigns.',
    hobby: 'Loves to surf PB and play soccer.'
  },
  {
    name: 'Lena Albatro',
    role: 'Client Relations',
    bio: 'Fluent in three languages, focuses on international policy compliance and philosophy.',
    hobby: 'Enjoys playing games on her phone.'
  }
];

const About = () => {
  return (
    <section id="about" className="py-24 relative overflow-hidden min-h-screen" role="region" aria-label="About Daedastream and team information">
      {/* Floating Daedastream logo */}
      <motion.div
        animate={{
          rotate: 360,
          x: [0, 50, 0],
          y: [0, -30, 0]
        }}
        transition={{
          rotate: { duration: 30, repeat: Infinity, ease: "linear" },
          x: { duration: 8, repeat: Infinity, ease: "easeInOut" },
          y: { duration: 6, repeat: Infinity, ease: "easeInOut" }
        }}
        className="absolute top-20 right-1/4 w-16 h-12"
        style={{
          transform: 'translateZ(0)', // Hardware acceleration
          willChange: 'transform',
          opacity: 0.5
        }}
      >
        <img
          src="/assets/dslogo.png"
          alt="Daedastream Logo - Custom Web Development and Software Solutions"
          className="w-full h-full object-contain"
          style={{
            transform: 'translateZ(0)',
            imageRendering: 'crisp-edges'
          }}
          loading="lazy"
          decoding="async"
        />
      </motion.div>

      <div className="max-w-7xl mx-auto px-6 lg:px-32 relative z-10">
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8 }}
          className="space-y-8"
          style={HARDWARE_ACCELERATION_STYLE}
        >
          <h3 className="text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-extralight text-white leading-tight">
            About
            <br />
            <span className="text-[#2D80FF] font-light">Daedastream</span>
          </h3>

          <div className="space-y-6 text-lg font-light text-white/70 leading-relaxed max-w-5xl">
            <p>
              We are a San Diego-based custom software development studio founded by a team of builders, coders, and creatives passionate about turning ideas into reality. Our name, inspired by the mythical craftsman Daedalus and the flow of innovation, reflects our commitment to crafting tailored, cutting-edge products.
            </p>

            <p>
              We specialize in building custom software that solves real business problems, whether it's specialized systems to replace costly SAAS tools, a high-end website that elevates your brand, or a mobile app that brings your vision to life. From small businesses to large corporations, what we create fits your unique needs, saves time, and cuts costs.
            </p>

            <p>
              Our expertise spans enterprise tools, web and mobile applications, AI-driven automation, and digital marketing services. What sets us apart is our flexibility to work with clients, budgets, and projects big and small. Our mission is to simplify complexity, delivering solutions that are intuitive, efficient, and engineered to scale. Let us be your technical partner to transform challenges into opportunities.
            </p>
          </div>

          <motion.div
            initial={{ width: 0 }}
            whileInView={{ width: '100%' }}
            transition={{ duration: 1.5, delay: 0.5 }}
            className="h-px bg-gradient-to-r from-[#2D80FF] via-white/20 to-transparent max-w-5xl"
          />
        </motion.div>
        
        {/* Team Section */}
        <motion.div
          initial={{ opacity: 0, y: 10 }}
          whileInView={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8, delay: 0.4 }}
          className="mt-32"
          style={{
            transform: 'translateZ(0)',
            willChange: 'transform, opacity'
          }}
        >
          <h3 className="text-4xl font-light text-white mb-12 text-center">
            Our <span className="text-[#2D80FF]">Team</span>
          </h3>
          
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8">
            {team.map((member, index) => (
              <motion.div
                key={index}
                initial={{
                  scale: 0.9,
                  y: 20,
                  rotate: index % 2 === 0 ? 1 : -1
                }}
                whileInView={{
                  scale: 1,
                  y: 0,
                  rotate: index % 2 === 0 ? 1 : -1
                }}
                transition={{
                  duration: 0.4,
                  delay: index * 0.05,
                  ease: "easeOut"
                }}
                className="bg-white/5 backdrop-blur-xl border border-white/10 rounded-3xl p-6 hover:bg-white/10 transition-all duration-300"
                style={{
                  opacity: 1,
                  transform: 'translateZ(0)',
                  willChange: 'transform, opacity'
                }}
              >
                <div className="mb-4">
                  <h4 className="text-xl font-light text-white mb-1">
                    {member.name}
                  </h4>
                  <div className="text-[#2D80FF] text-sm font-light">
                    {member.role}
                  </div>
                </div>
                
                <p className="text-white/70 font-light text-sm leading-relaxed mb-3">
                  {member.bio}
                </p>
                
                <p className="text-white/50 font-light text-xs italic">
                  {member.hobby}
                </p>
              </motion.div>
            ))}
          </div>
        </motion.div>
      </div>
    </section>
  );
};

export default About;