import React from 'react';
import { CheckCircle } from 'lucide-react';
import AnimatedSection from './AnimatedSection';

const Hero: React.FC = () => {
  return (
    <section id="beranda" className="pt-32 pb-20 px-4 md:px-8 lg:px-12 overflow-hidden relative">
      <div className="max-w-7xl mx-auto">
        <div className="flex flex-col lg:flex-row items-center">
          <AnimatedSection className="lg:w-1/2 z-10">
            <span className="inline-block py-1 px-3 rounded-full bg-blue-50 text-java-blue text-sm font-medium mb-5">
              Solusi IT Terpercaya
            </span>
            <h1 className="text-4xl md:text-5xl lg:text-6xl font-bold leading-tight mb-6">
              Solusi IT Profesional dari{' '}
              <span className="text-gradient">PT. Java Tekno Plus</span>
            </h1>
            <p className="text-lg text-muted-foreground mb-8 max-w-xl">
              Kami menyediakan layanan teknologi informasi terbaik untuk mendukung 
              kebutuhan bisnis Anda dengan solusi yang andal dan inovatif.
            </p>
            
            <div className="mb-8 grid grid-cols-1 md:grid-cols-2 gap-4">
              {[
                'Instalasi CCTV',
                'Jaringan Internet',
                'Penangkal Petir',
                'Development Software', 
                'Pemancar HT',
                'Security System'
              ].map((item, index) => (
                <div key={index} className="flex items-center">
                  <CheckCircle className="h-5 w-5 text-java-blue mr-2" />
                  <span className="text-foreground">{item}</span>
                </div>
              ))}
            </div>
            
            <div className="flex flex-col sm:flex-row gap-4">
              <a href="#layanan" className="btn-hover bg-java-blue text-white px-8 py-3 rounded-full font-medium">
                Layanan Kami
              </a>
              <a href="#kontak" className="btn-hover bg-white border border-slate-200 text-foreground px-8 py-3 rounded-full font-medium">
                Hubungi Kami
              </a>
            </div>
          </AnimatedSection>
          
          <AnimatedSection className="lg:w-1/2 mt-12 lg:mt-0" direction="right" delay={200}>
            <div className="relative">
              <div className="absolute -top-10 -left-10 w-64 h-64 bg-blue-50 rounded-full mix-blend-multiply filter blur-3xl opacity-70 animate-float"></div>
              <div className="absolute -bottom-10 -right-10 w-64 h-64 bg-violet-50 rounded-full mix-blend-multiply filter blur-3xl opacity-70 animate-float animation-delay-2000"></div>
              
              <div className="bg-white relative overflow-hidden rounded-2xl border border-slate-100 shadow-medium p-1">
                <img 
                  src="https://images.unsplash.com/photo-1588702547923-7093a6c3ba33?ixlib=rb-4.0.3&auto=format&fit=crop&w=2670&q=80" 
                  alt="IT Solutions" 
                  className="w-full h-full object-cover rounded-xl"
                />
              </div>
            </div>
          </AnimatedSection>
        </div>
      </div>
      
      {/* Background Elements */}
      <div className="absolute top-20 right-0 w-72 h-72 bg-blue-50 rounded-full mix-blend-multiply filter blur-3xl opacity-70 animate-float"></div>
      <div className="absolute bottom-10 left-10 w-72 h-72 bg-violet-50 rounded-full mix-blend-multiply filter blur-3xl opacity-70 animate-float animation-delay-2000"></div>
    </section>
  );
};

export default Hero;