<script setup lang="ts">
import { Users, MapPin, Building2, Heart } from "lucide-vue-next";
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é."
}];
</script>

<template>
  <section id="apropos" class="py-20 md:py-32">
    <div class="container">
      <div class="grid lg:grid-cols-2 gap-16 items-center">
        <!-- Image/Visual side -->
        <div class="relative">
          <div class="relative rounded-3xl overflow-hidden aspect-[4/3]">
            <img
              :src="targoBureaux"
              alt="Bureaux TARGO à Sainte-Clotilde"
              class="w-full h-full object-cover"
            />
          </div>

          <!-- Stats card -->
          <div class="absolute -bottom-6 -left-6 bg-card p-6 rounded-2xl shadow-xl border border-border">
            <div class="font-display text-4xl font-bold text-primary mb-1">Ste-Clotilde</div>
            <div class="text-muted-foreground">Québec, Canada</div>
          </div>
        </div>

        <!-- Content side -->
        <div class="space-y-8">
          <div>
            <span class="inline-block px-4 py-1 bg-primary/10 rounded-full text-primary font-medium text-sm mb-4">
              À propos
            </span>
            <h2 class="font-display text-4xl md:text-5xl font-bold mb-6">
              100% fibre <span class="text-gradient-targo">locale</span>
            </h2>
            <p class="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 class="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 class="grid sm:grid-cols-2 gap-6 pt-4">
            <div v-for="feature in features" :key="feature.title" class="flex gap-4">
              <div class="w-12 h-12 rounded-xl bg-primary/10 flex items-center justify-center flex-shrink-0">
                <component :is="feature.icon" class="w-6 h-6 text-primary" />
              </div>
              <div>
                <h3 class="font-display font-semibold mb-1">{{ feature.title }}</h3>
                <p class="text-sm text-muted-foreground">{{ feature.description }}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>
