import { Users, MapPin, Building2, Heart } from "lucide-react";
import targoBureaux from "@/assets/targo-bureaux.jpg";

const features = [{
  icon: MapPin,
  title: "Fibre 100% locale",
  description: "Un réseau fibre optique indépendant, conçu et géré localement pour notre communauté."
}, {
  icon: Users,
  title: "Service personnalisé",
  description: "Une équipe dévouée qui connaît chaque client. Un service humain, proche de vous."
}, {
  icon: Building2,
  title: "Économie locale",
  description: "Nous créons des emplois de qualité et soutenons les organismes et écoles de la région."
}, {
  icon: Heart,
  title: "Engagement communautaire",
  description: "Fiers partenaires des événements locaux, nous redonnons à notre communauté."
}];
const About = () => {
  return <section id="apropos" className="py-20 md:py-32">
      <div className="container">
        <div className="grid lg:grid-cols-2 gap-16 items-center">
          {/* Image/Visual side */}
          <div className="relative">
            <div className="relative rounded-3xl overflow-hidden aspect-[4/3]">
              <img 
                src={targoBureaux} 
                alt="Bureaux TARGO à Sainte-Clotilde" 
                className="w-full h-full object-cover"
              />
            </div>
            
            {/* Stats card */}
            <div className="absolute -bottom-6 -left-6 bg-card p-6 rounded-2xl shadow-xl border border-border">
              <div className="font-display text-4xl font-bold text-primary mb-1">Ste-Clotilde</div>
              <div className="text-muted-foreground">Québec, Canada</div>
            </div>
          </div>
          
          {/* Content side */}
          <div className="space-y-8">
            <div>
              <span className="inline-block px-4 py-1 bg-primary/10 rounded-full text-primary font-medium text-sm mb-4">
                À propos
              </span>
              <h2 className="font-display text-4xl md:text-5xl font-bold mb-6">
                100% fibre <span className="text-gradient-targo">locale</span>
              </h2>
              <p className="text-muted-foreground text-lg mb-4">
                Fondée il y a 20 ans par un citoyen local, TARGO est née pour connecter les citoyens d'ici, 
                à une époque où les grands fournisseurs ne s'y intéressaient pas. Au fil des années, nous avons 
                branché des milliers de familles et d'entreprises de la région, en offrant une connexion fiable 
                et des prix stables.
              </p>
              <p className="text-muted-foreground">
                En choisissant TARGO, vous soutenez un service local qui réinvestit chaque année plus de 
                100 000 $ dans la communauté et favorise l'embauche de talents d'ici, incluant des emplois 
                d'été et des postes liés à l'innovation.
              </p>
            </div>
            
            {/* Features grid */}
            <div className="grid sm:grid-cols-2 gap-6 pt-4">
              {features.map(feature => <div key={feature.title} className="flex gap-4">
                  <div className="w-12 h-12 rounded-xl bg-primary/10 flex items-center justify-center flex-shrink-0">
                    <feature.icon className="w-6 h-6 text-primary" />
                  </div>
                  <div>
                    <h3 className="font-display font-semibold mb-1">{feature.title}</h3>
                    <p className="text-sm text-muted-foreground">{feature.description}</p>
                  </div>
                </div>)}
            </div>
          </div>
        </div>
      </div>
    </section>;
};
export default About;