import React from 'react';
import Image from 'next/image';
import { Shield, Lightbulb, Award, TrendingUp } from 'lucide-react';
import { Avatar } from '@mui/material';

import contable from '../../assets/img/about.jpg';
import Carlos from '../../assets/img/Carlos.jpg';
import Cristian from '../../assets/img/Cristian.jpg';
import Edgar from '../../assets/img/Edgar.jpg';
import Maria from '../../assets/img/Maria.jpg';
import Jorge from '../../assets/img/Jorge.jpg';
import Adriana from '../../assets/img/Adriana.jpg';
import Uriel from '../../assets/img/Uriel.jpg';
import Tatiana from '@/assets/img/Tatiana.webp'

const Nosotros = ({ darkMode = false }) => {
  const values = [
    {
      title: 'Integridad',
      description: 'Actuamos con honestidad y transparencia en todo momento',
      icon: Shield
    },
    {
      title: 'Innovación',
      description: 'Buscamos constantemente nuevas soluciones',
      icon: Lightbulb
    },
    {
      title: 'Calidad',
      description: 'Excelencia en cada uno de nuestros servicios',
      icon: Award
    },
    {
      title: 'Superación',
      description: 'Mejora continua en nuestro desarrollo profesional',
      icon: TrendingUp
    }
  ];

  const services = [
    {
      title: 'Consultoría Contable',
      description: 'Asesoramiento especializado en contabilidad y finanzas'
    },
    {
      title: 'Outsourcing Contable',
      description: 'Departamento contable externo ajustado a tu operación'
    },
    {
      title: 'Asesoría Inmobiliaria',
      description: 'Servicio Contable y Tributario para inmobiliarias'
    },
    {
      title: 'Revisoría Fiscal',
      description: 'Verificación legal y eficiencia organizacional con tecnología avanzada'
    },
    {
      title: 'Creación de Empresa',
      description: 'Servicio integral para inversores extranjeros en Colombia'
    },
    {
      title: 'Representación Legal',
      description: 'Asesoramiento legal especializado para tu negocio'
    }
  ];

  const team = [
    { name: 'Carlos Campaña Cando', position: 'Especialista en Impuestos', image: Carlos },
    { name: 'Cristian Daniel Navarro', position: 'Coordinador de Sistemas', image: Cristian },
    { name: 'Edgar Hernandez Carranza', position: 'Presidente y Fundador', image: Edgar },
    { name: 'Maria del Mar Rios Rosero', position: 'Asesora Financiera', image: Maria },
    { name: 'Jorge Benavidez Fonseca', position: 'Asesor Financiero', image: Jorge },
    { name: 'Adriana Patricia Rodrigues', position: 'Contadora Pública', image: Adriana },
    { name: 'Uriel Tovar G', position: 'Contador Público y Abogado', image: Uriel },
    { name: 'Leidy Tatiana Rubio', position: 'Asesora Financiera y Revisora Fiscal', image: Tatiana },
    { name: 'Laura Vanessa Marciales', position: 'Asesora Financiera', image: "" },
    { name: 'Caren Torres', position: 'Asesora Financiera', image: "" },

  ];

  const metrics = [
    { value: '100+', label: 'Clientes Satisfechos' },
    { value: '10', label: 'Años de Experiencia' }
  ];

  const clients = [
    { name: 'Atos Inmobiliaria SAS', logo: '🏢' },
    { name: 'Elspec Engineering LTDA', logo: '⚡' },
    { name: 'Dutti Inversiones SAS', logo: '💼' },
    { name: 'G&M Grupo Inmobiliario', logo: '🏗️' },
    { name: 'Nubo Networks SAS', logo: '☁️' },
    { name: 'Moderas Constructores SAS', logo: '🏭' },
    { name: 'Alianza Inmobiliaria SAS', logo: '🤝' },
    { name: 'Acevedo & Cia SAS', logo: '📊' },
  ];

  return (
    <div className={`min-h-screen ${darkMode ? 'bg-slate-900' : 'bg-white'}`}>
      <section className={`py-20 ${darkMode ? 'bg-gradient-to-b from-slate-800 to-slate-900' : 'bg-gradient-to-b from-blue-50 to-white'}`}>
        <div className="max-w-6xl mx-auto px-4">
          <div className="text-center mb-12">
            <h1 className={`text-5xl font-bold mb-4 ${darkMode ? 'text-white' : 'text-slate-900'}`}>
              Nuestra Historia
            </h1>
            <div className="w-20 h-1 bg-gradient-to-r from-blue-500 to-blue-600 mx-auto"></div>
          </div>

          <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
            <div>
              <h3 className={`text-3xl font-semibold mb-6 ${darkMode ? 'text-white' : 'text-slate-900'}`}>
                Más de 10 años de experiencia en el sector
              </h3>
              <p className={`text-lg leading-relaxed ${darkMode ? 'text-slate-300' : 'text-slate-600'}`}>
                Somos una firma comprometida con la excelencia y la innovación en servicios contables y financieros. Desde nuestra fundación, nos hemos dedicado a proporcionar soluciones integrales a nuestros clientes.
              </p>
            </div>
            <div className="relative w-full h-80">
              <Image
                src={contable}
                alt="About Us"
                fill
                className="object-cover rounded-lg shadow-lg"
              />
            </div>
          </div>
        </div>
      </section>

      <section className={`py-20 ${darkMode ? 'bg-slate-800' : 'bg-blue-50'}`}>
        <div className="max-w-6xl mx-auto px-4">
          <h2 className={`text-4xl font-bold text-center mb-4 ${darkMode ? 'text-white' : 'text-slate-900'}`}>
            Nuestros Valores
          </h2>
          <div className="w-20 h-1 bg-gradient-to-r from-blue-500 to-blue-600 mx-auto mb-12"></div>

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
            {values.map((value, index) => (
              <div
                key={index}
                className={`p-8 rounded-lg transition-all duration-300 hover:shadow-xl hover:scale-105 ${darkMode
                  ? 'bg-slate-700 border border-blue-500/30 hover:border-blue-400'
                  : 'bg-white border border-blue-100 hover:border-blue-400'
                  }`}
              >
                <div className="flex justify-center mb-4">
                  <div className="w-16 h-16 bg-gradient-to-br from-blue-500 to-blue-600 rounded-full flex items-center justify-center">
                    <value.icon className="w-8 h-8 text-white" />
                  </div>
                </div>
                <h4 className={`text-xl font-semibold text-center mb-3 ${darkMode ? 'text-white' : 'text-slate-900'}`}>
                  {value.title}
                </h4>
                <p className={`text-center text-sm leading-relaxed ${darkMode ? 'text-slate-400' : 'text-slate-600'}`}>
                  {value.description}
                </p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className={`py-20 ${darkMode ? 'bg-slate-900' : 'bg-white'}`}>
        <div className="max-w-6xl mx-auto px-4">
          <div className="grid grid-cols-2 lg:grid-cols-4 gap-8 text-center mb-12">
            {metrics.map((metric, index) => (
              <div key={index}>
                <h3 className="text-4xl font-bold mb-2 text-blue-600">
                  {metric.value}
                </h3>
                <p className={`${darkMode ? 'text-slate-400' : 'text-slate-600'}`}>
                  {metric.label}
                </p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className={`py-20 ${darkMode ? 'bg-slate-800' : 'bg-slate-50'}`}>
        <div className="max-w-6xl mx-auto px-4">
          <h2 className={`text-4xl font-bold text-center mb-4 ${darkMode ? 'text-white' : 'text-slate-900'}`}>
            Nuestros Servicios
          </h2>
          <div className="w-20 h-1 bg-gradient-to-r from-blue-500 to-blue-600 mx-auto mb-12"></div>

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            {services.map((service, index) => (
              <div
                key={index}
                className={`p-6 rounded-lg border-l-4 border-l-blue-500 transition-all duration-300 hover:shadow-xl hover:scale-105 ${darkMode
                  ? 'bg-slate-700 hover:bg-slate-600'
                  : 'bg-white hover:bg-blue-50'
                  }`}
              >
                <h4 className={`text-lg font-semibold mb-3 ${darkMode ? 'text-white' : 'text-slate-900'}`}>
                  {service.title}
                </h4>
                <p className={`text-sm leading-relaxed ${darkMode ? 'text-slate-400' : 'text-slate-600'}`}>
                  {service.description}
                </p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section id='nuestro-equipo' className={`py-20 ${darkMode ? 'bg-slate-800' : 'bg-slate-50'}`}>
        <div className="max-w-6xl mx-auto px-4">
          <h2 className={`text-4xl font-bold text-center mb-4 ${darkMode ? 'text-white' : 'text-slate-900'}`}>
            Nuestro Equipo
          </h2>
          <div className="w-20 h-1 bg-gradient-to-r from-blue-500 to-blue-600 mx-auto mb-12"></div>

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
            {team.map((member, index) => (
              <div
                key={index}
                className={`text-center transition-all duration-300 hover:scale-105 p-6 rounded-lg ${darkMode
                  ? 'hover:bg-slate-800 border border-slate-700'
                  : 'hover:bg-blue-50 border border-blue-100'
                  }`}
              >
                <div className="relative w-32 h-32 mx-auto mb-4">
                  {member.image ? (
                    <Image
                      src={member.image}
                      alt={member.name}
                      fill
                      className="rounded-full border-4 border-blue-500 object-cover"
                    />

                  ) : (
                    <Avatar
                      sx={{ width: 128, height: 128, fontSize: 48, bgcolor: darkMode ? 'blueGrey.700' : 'blueGrey.300', color: darkMode ? 'white' : 'black' }}
                    >
                      {member.name.split(' ').map(n => n[0]).join('')}
                    </Avatar>

                  )}
                </div>
                <h4 className={`font-semibold text-lg mb-1 ${darkMode ? 'text-white' : 'text-slate-900'}`}>
                  {member.name}
                </h4>
                <p className="text-sm text-blue-600 font-medium">
                  {member.position}
                </p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className={`py-20 ${darkMode ? 'bg-slate-900' : 'bg-white'}`}>
        <div className="max-w-6xl mx-auto px-4">
          <h2 className={`text-4xl font-bold text-center mb-4 ${darkMode ? 'text-white' : 'text-slate-900'}`}>
            Algunos De Nuestros Clientes
          </h2>
          <div className="w-20 h-1 bg-gradient-to-r from-blue-500 to-blue-600 mx-auto mb-12"></div>

          <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-8 gap-6">
            {clients.map((client, index) => (
              <div
                key={index}
                className={`flex items-center justify-center p-6 rounded-lg transition-all duration-300 hover:shadow-lg hover:scale-110 ${darkMode
                  ? 'bg-slate-800 border border-slate-700 hover:border-blue-400'
                  : 'bg-slate-100 border border-slate-200 hover:border-blue-400'
                  }`}
              >
                <div className="text-center">
                  <div className="text-4xl mb-2">{client.logo}</div>
                  <p className={`text-xs font-medium text-center leading-tight ${darkMode ? 'text-slate-400' : 'text-slate-600'}`}>
                    {client.name}
                  </p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>
    </div>
  );
};

export default Nosotros;