import { Container } from "@/components/container";
import { Heading } from "@/components/heading";
import { Subheading } from "@/components/subheading";

export function About() {
  return (
    <section id="nosotros" className="py-24 bg-neutral-50">
      <Container>
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
          <div>
            <Heading className="text-left">Más de 10 años construyendo hogares</Heading>
            <Subheading className="mt-6 text-left">
              Construimos Tu Casa nació con la misión de brindar seguridad y transparencia al mercado residencial en La Plata y Zona Sur. 
              Entendemos que construir una casa no es solo una obra, es un proyecto de vida.
            </Subheading>
            <div className="mt-8 space-y-4">
              <div className="flex items-start gap-4">
                <div className="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center flex-shrink-0">
                  <span className="text-blue-600 font-bold">01</span>
                </div>
                <div>
                  <h4 className="font-bold text-lg">Enfoque Humano</h4>
                  <p className="text-neutral-600">Escuchamos activamente tus necesidades para crear espacios que realmente funcionen para vos.</p>
                </div>
              </div>
              <div className="flex items-start gap-4">
                <div className="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center flex-shrink-0">
                  <span className="text-blue-600 font-bold">02</span>
                </div>
                <div>
                  <h4 className="font-bold text-lg">Servicio Integral</h4>
                  <p className="text-neutral-600">Desde la obra gruesa hasta las terminaciones, plomería y electricidad. Todo en un solo lugar.</p>
                </div>
              </div>
              <div className="flex items-start gap-4">
                <div className="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center flex-shrink-0">
                  <span className="text-blue-600 font-bold">03</span>
                </div>
                <div>
                  <h4 className="font-bold text-lg">Acompañamiento Real</h4>
                  <p className="text-neutral-600">Te asesoramos profesionalmente para que cada peso invertido rinda al máximo.</p>
                </div>
              </div>
            </div>
          </div>
          <div className="relative aspect-square rounded-2xl overflow-hidden shadow-2xl">
            <img 
              src="https://images.unsplash.com/photo-1503387762-592dee58292b?q=80&w=1000&auto=format&fit=crop" 
              alt="Construcción de vivienda" 
              className="object-cover w-full h-full"
            />
          </div>
        </div>
      </Container>
    </section>
  );
}