import { Target, Eye, Heart, Award, Users, TrendingUp } from 'lucide-react';
import viniciusSales from '@/assets/vinicius-sales.jpg';
import michaelRocha from '@/assets/michael-rocha.jpg';

const Sobre = () => {
  const values = [
    { icon: Heart, title: 'Confiança', description: 'Construímos relacionamentos duradouros baseados na transparência' },
    { icon: Users, title: 'Humanização', description: 'Cada cliente é único e merece atenção personalizada' },
    { icon: TrendingUp, title: 'Inovação', description: 'Utilizamos tecnologia para oferecer as melhores soluções' },
    { icon: Award, title: 'Excelência', description: 'Comprometimento com a qualidade em cada atendimento' },
  ];

  return (
    <div className="min-h-screen">
      {/* Hero Section */}
      <section className="py-20 bg-gradient-to-br from-secondary via-secondary to-primary/20 text-secondary-foreground">
        <div className="container mx-auto px-4">
          <div className="max-w-4xl mx-auto text-center">
            <h1 className="text-5xl md:text-6xl font-bold mb-6">
              Quem <span className="text-gradient-gold">Somos</span>
            </h1>
            <p className="text-xl text-muted-foreground leading-relaxed">
              Fundada em 2020, a Rocha Sales nasceu da união de dois especialistas em planos de saúde 
              que acreditam que todo brasileiro merece acesso a um atendimento justo, transparente e eficiente.
            </p>
          </div>
        </div>
      </section>

      {/* Mission, Vision, Values */}
      <section className="py-20">
        <div className="container mx-auto px-4">
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8 mb-20">
            {[
              {
                icon: Target,
                title: 'Missão',
                description: 'Oferecer soluções inovadoras em planos de saúde com atendimento humanizado, garantindo acesso facilitado e economia real para nossos clientes.',
                gradient: 'from-primary to-primary-soft'
              },
              {
                icon: Eye,
                title: 'Visão',
                description: 'Ser a maior e mais tecnológica corretora de planos de saúde do Brasil, reconhecida pela excelência e inovação no atendimento.',
                gradient: 'from-secondary to-primary'
              },
              {
                icon: Heart,
                title: 'Valores',
                description: 'Confiança, Transparência, Humanização, Inovação e Excelência guiam cada decisão e relacionamento que construímos.',
                gradient: 'from-primary to-secondary'
              },
            ].map((item, index) => (
              <div 
                key={index}
                className="group relative p-8 rounded-2xl bg-card hover-lift gold-border overflow-hidden"
              >
                <div className={`absolute top-0 left-0 right-0 h-1 bg-gradient-to-r ${item.gradient}`} />
                <item.icon className="h-12 w-12 text-primary mb-6 group-hover:scale-110 transition-transform duration-300" />
                <h3 className="text-2xl font-bold mb-4 group-hover:text-primary transition-colors">
                  {item.title}
                </h3>
                <p className="text-muted-foreground leading-relaxed">
                  {item.description}
                </p>
              </div>
            ))}
          </div>

          {/* Values Grid */}
          <div className="mb-20">
            <h2 className="text-4xl font-bold text-center mb-12">
              Nossos <span className="text-gradient-gold">Valores</span>
            </h2>
            <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-6 rounded-xl bg-muted/30 hover:bg-card hover-lift gold-border text-center"
                >
                  <value.icon className="h-10 w-10 text-primary mx-auto mb-4" />
                  <h4 className="text-lg font-bold mb-2">{value.title}</h4>
                  <p className="text-sm text-muted-foreground">{value.description}</p>
                </div>
              ))}
            </div>
          </div>

          {/* Founders Section */}
          <div className="bg-gradient-to-br from-muted/30 to-transparent rounded-3xl p-12">
            <h2 className="text-4xl font-bold text-center mb-12">
              Nossos <span className="text-gradient-gold">Sócios</span>
            </h2>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-12 max-w-4xl mx-auto">
              {[
                {
                  name: 'Vinícius Sales',
                  role: 'CEO & Co-fundador',
                  specialty: 'Especialista em Planos Empresariais e MEI',
                  description: 'Com mais de 10 anos de experiência no mercado, Vinícius é referência em soluções corporativas e empreendedores individuais.'
                },
                {
                  name: 'Michael Rocha',
                  role: 'CEO & Co-fundador',
                  specialty: 'Especialista em Planos Familiares',
                  description: 'Michael combina expertise em planos familiares com estratégias de comunicação para entregar o melhor atendimento.'
                },
              ].map((founder, index) => (
                <div 
                  key={index}
                  className="text-center p-8 rounded-2xl bg-card hover-lift gold-border"
                >
                  <img 
                    src={index === 0 ? viniciusSales : michaelRocha} 
                    alt={founder.name}
                    className="w-32 h-32 rounded-full mx-auto mb-6 object-cover"
                  />
                  <h3 className="text-2xl font-bold mb-2">{founder.name}</h3>
                  <p className="text-primary font-semibold mb-2">{founder.role}</p>
                  <p className="text-sm text-muted-foreground font-medium mb-4">{founder.specialty}</p>
                  <p className="text-muted-foreground leading-relaxed">{founder.description}</p>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>
    </div>
  );
};

export default Sobre;