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

const Hero = () => {
  return (
    <section className="relative min-h-screen flex items-center pt-20 overflow-hidden">
      {/* Background elements */}
      <div className="absolute top-1/4 -left-20 w-96 h-96 bg-primary/10 rounded-full glow-orb" />
      <div className="absolute bottom-1/4 -right-20 w-96 h-96 bg-secondary/10 rounded-full glow-orb" />
      <div className="absolute inset-0 bg-grid-pattern opacity-20 pointer-events-none" />

      <div className="container mx-auto px-6 grid md:grid-cols-2 gap-12 items-center relative z-10">
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.6 }}
        >
          <h1 className="text-5xl md:text-7xl font-extrabold leading-tight mb-6">
            Budujemy <span className="text-gradient">ludzką stronę</span> AI
          </h1>
          <p className="text-lg md:text-xl text-muted mb-10 max-w-lg leading-relaxed">
            Projektujemy i wdrażamy systemy AI, które pomagają ludziom pracować szybciej, mądrzej i spokojniej — od automatyzacji po multiagentowe platformy produktowe.
          </p>
          <div className="flex flex-col sm:flex-row gap-4">
            <a href="#contact" className="btn-primary">
              Zacznijmy od audytu AI
              <ArrowRight className="ml-2" size={20} />
            </a>
            <a href="#offerings" className="btn-secondary">
              Zobacz ofertę
            </a>
          </div>
        </motion.div>

        <motion.div
          initial={{ opacity: 0, scale: 0.9 }}
          animate={{ opacity: 1, scale: 1 }}
          transition={{ duration: 0.8, delay: 0.2 }}
          className="relative flex justify-center"
        >
          {/* Abstract SVG Visualization */}
          <div className="w-full max-w-lg aspect-square relative">
            <svg viewBox="0 0 400 400" className="w-full h-full">
              {/* Central Human Node */}
              <motion.circle
                cx="200"
                cy="200"
                r="40"
                fill="none"
                stroke="currentColor"
                strokeWidth="2"
                className="text-primary"
                animate={{ r: [38, 42, 38] }}
                transition={{ duration: 4, repeat: Infinity }}
              />
              <circle cx="200" cy="200" r="30" className="fill-primary/20" />
              <circle cx="200" cy="200" r="8" className="fill-primary" />
              
              {/* Agent Nodes & Connections */}
              {[0, 60, 120, 180, 240, 300].map((angle, i) => {
                const x = 200 + 120 * Math.cos((angle * Math.PI) / 180);
                const y = 200 + 120 * Math.sin((angle * Math.PI) / 180);
                
                return (
                  <g key={i}>
                    <motion.line
                      x1="200"
                      y1="200"
                      x2={x}
                      y2={y}
                      stroke="currentColor"
                      strokeWidth="1"
                      className="text-white/20"
                      initial={{ pathLength: 0 }}
                      animate={{ pathLength: 1 }}
                      transition={{ duration: 1, delay: 0.5 + i * 0.1 }}
                    />
                    <motion.circle
                      cx={x}
                      cy={y}
                      r="12"
                      className="fill-surface stroke-white/20"
                      strokeWidth="1"
                      animate={{ y: [y - 5, y + 5, y - 5] }}
                      transition={{ duration: 3 + i, repeat: Infinity }}
                    />
                    <motion.circle
                      cx={x}
                      cy={y}
                      r="4"
                      className="fill-secondary"
                      animate={{ opacity: [0.4, 1, 0.4] }}
                      transition={{ duration: 2 + i, repeat: Infinity }}
                    />
                    
                    {/* Small outer nodes */}
                    <circle 
                      cx={x + 30 * Math.cos(angle)} 
                      cy={y + 30 * Math.sin(angle)} 
                      r="2" 
                      className="fill-white/10" 
                    />
                  </g>
                );
              })}
              
              {/* Orbiting particles */}
              <motion.g
                animate={{ rotate: 360 }}
                transition={{ duration: 20, repeat: Infinity, ease: "linear" }}
                style={{ originX: "200px", originY: "200px" }}
              >
                <circle cx="200" cy="50" r="3" className="fill-primary" />
                <circle cx="350" cy="200" r="2" className="fill-secondary" />
                <circle cx="200" cy="350" r="4" className="fill-accent" />
              </motion.g>
            </svg>
            
            {/* Glass decoration */}
            <div className="absolute inset-0 rounded-full border border-white/5 pointer-events-none" />
            <div className="absolute inset-10 rounded-full border border-white/5 pointer-events-none" />
          </div>
        </motion.div>
      </div>
    </section>
  );
};

export default Hero;