import React from 'react';
import { Check, Building } from 'lucide-react';
import AnimatedSection from './AnimatedSection';

const About: React.FC = () => {
  const values = [
    {
      title: 'Profesionalisme',
      description: 'Kami bekerja dengan standar tinggi dan komitmen terhadap kualitas'
    },
    {
      title: 'Inovasi',
      description: 'Selalu mengikuti perkembangan teknologi terbaru untuk solusi terbaik'
    },
    {
      title: 'Kepercayaan',
      description: 'Membangun hubungan jangka panjang berbasis kepercayaan dengan klien'
    },
    {
      title: 'Kehandalan',
      description: 'Menyediakan layanan yang dapat diandalkan dan solusi yang tepat waktu'
    }
  ];

  return (
    <section id="tentang" className="section-padding">
      <div className="max-w-7xl mx-auto">
        <div className="flex flex-col lg:flex-row items-center gap-12">
          <AnimatedSection className="lg:w-1/2" direction="left">
            <div className="relative">
              <div className="absolute -top-5 -left-5 w-64 h-64 bg-blue-50 rounded-full mix-blend-multiply filter blur-3xl opacity-70"></div>
              
              <div className="bg-white relative overflow-hidden rounded-2xl shadow-medium border border-slate-100 p-1">
                <img 
                  src="https://images.unsplash.com/photo-1581091226825-a6a2a5aee158?ixlib=rb-4.0.3&auto=format&fit=crop&w=2670&q=80" 
                  alt="Tim Profesional" 
                  className="w-full h-full object-cover rounded-xl"
                />
              </div>
              
              <div className="absolute -bottom-10 -right-0 glass rounded-xl p-4 shadow-blue">
                <div className="flex items-center space-x-3">
                  <Building className="h-12 w-12 text-java-blue" />
                  <div>
                    <h4 className="font-bold">PT. Java Tekno Plus</h4>
                    <p className="text-sm text-muted-foreground">Solusi IT Terpercaya</p>
                  </div>
                </div>
              </div>
            </div>
          </AnimatedSection>
          
          <AnimatedSection className="lg:w-1/2" direction="right" delay={200}>
            <span className="inline-block py-1 px-3 rounded-full bg-blue-50 text-java-blue text-sm font-medium mb-5">
              Tentang Kami
            </span>
            <h2 className="text-3xl md:text-4xl font-bold mb-6">
              Solusi IT Profesional <span className="text-gradient">untuk Bisnis Anda</span>
            </h2>
            <p className="text-muted-foreground mb-6">
              PT. Java Tekno Plus adalah perusahaan yang bergerak di bidang teknologi informasi 
              yang beralamat di Jl. Lamtoro Tidar Baru RT002 RW012, Kelurahan Magersari, 
              Kecamatan Magelang Selatan, Kota Magelang.
            </p>
            <p className="text-muted-foreground mb-8">
              Kami berkomitmen untuk memberikan layanan teknologi informasi terbaik dengan 
              solusi yang inovatif dan handal untuk mendukung pertumbuhan bisnis klien kami.
            </p>
            
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-8">
              {values.map((value, index) => (
                <div key={index} className="flex items-start">
                  <div className="rounded-full bg-blue-50 p-1 mt-1 mr-3">
                    <Check className="h-4 w-4 text-java-blue" />
                  </div>
                  <div>
                    <h4 className="font-medium">{value.title}</h4>
                    <p className="text-sm text-muted-foreground">{value.description}</p>
                  </div>
                </div>
              ))}
            </div>
            
            <a href="#kontak" className="btn-hover bg-java-blue text-white px-8 py-3 rounded-full font-medium inline-block">
              Hubungi Kami
            </a>
          </AnimatedSection>
        </div>
      </div>
    </section>
  );
};

export default About;