<script setup lang="ts">
import { Phone, Mail, MapPin, Clock, Send } from "lucide-vue-next";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea";
import { ref } from "vue";
import { useToast } from "@/components/ui/toast/use-toast";

const contactInfo = [
  {
    icon: Phone,
    label: "Téléphone",
    value: "1-855-88-TARGO",
    subValue: "514-448-0773",
  },
  {
    icon: Mail,
    label: "Courriel",
    value: "support@targo.ca",
  },
  {
    icon: MapPin,
    label: "Adresse",
    value: "1867 chemin de la rivière",
    subValue: "Ste-Clotilde, Québec J0L 1W0",
  },
  {
    icon: Clock,
    label: "Heures d'ouverture",
    value: "Lun-Ven: 8h00 – 20h00",
    subValue: "Sam-Dim: 8h00 – 16h00",
  },
];

const { toast } = useToast();
const formData = ref({
  name: "",
  address: "",
  postalCode: "",
  email: "",
  phone: "",
  message: "",
});

const sending = ref(false);

const handleSubmit = async () => {
  sending.value = true;
  try {
    await fetch("/rpc/contact", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(formData.value),
    });
    toast({
      title: "Message envoyé!",
      description: "Nous vous répondrons dans les plus brefs délais.",
    });
    formData.value = { name: "", address: "", postalCode: "", email: "", phone: "", message: "" };
  } catch {
    toast({ title: "Erreur", description: "Impossible d'envoyer. Réessayez ou appelez-nous.", variant: "destructive" });
  }
  sending.value = false;
};
</script>

<template>
  <section id="contact" class="py-20 md:py-32 bg-secondary/30">
    <div class="container">
      <div class="text-center max-w-2xl mx-auto mb-16">
        <span class="inline-block px-4 py-1 bg-primary/10 rounded-full text-primary font-medium text-sm mb-4">
          Contactez-nous
        </span>
        <h2 class="font-display text-4xl md:text-5xl font-bold mb-4">
          On aime <span class="text-gradient-targo">aider</span>
        </h2>
        <p class="text-muted-foreground text-lg">
          Nous vous invitons à nous contacter pour bien évaluer votre situation
          et vous faire profiter des meilleurs forfaits.
        </p>
      </div>

      <div class="grid lg:grid-cols-5 gap-12">
        <!-- Contact form -->
        <div class="lg:col-span-3">
          <form @submit.prevent="handleSubmit" class="bg-card rounded-3xl p-8 shadow-lg border border-border">
            <div class="grid sm:grid-cols-2 gap-6 mb-6">
              <div class="space-y-2">
                <label for="name" class="text-sm font-medium">Nom</label>
                <Input
                  id="name"
                  name="name"
                  placeholder="Votre nom"
                  v-model="formData.name"
                  required
                />
              </div>
              <div class="space-y-2">
                <label for="email" class="text-sm font-medium">Courriel</label>
                <Input
                  id="email"
                  name="email"
                  type="email"
                  placeholder="votre@courriel.com"
                  v-model="formData.email"
                  required
                />
              </div>
            </div>

            <div class="grid sm:grid-cols-2 gap-6 mb-6">
              <div class="space-y-2">
                <label for="address" class="text-sm font-medium">Adresse (où le service est livré)</label>
                <Input
                  id="address"
                  name="address"
                  placeholder="123 rue Principale"
                  v-model="formData.address"
                  required
                />
              </div>
              <div class="space-y-2">
                <label for="postalCode" class="text-sm font-medium">Code postal</label>
                <Input
                  id="postalCode"
                  name="postalCode"
                  placeholder="J0L 1W0"
                  v-model="formData.postalCode"
                  required
                />
              </div>
            </div>

            <div class="space-y-2 mb-6">
              <label for="phone" class="text-sm font-medium">Téléphone</label>
              <Input
                id="phone"
                name="phone"
                type="tel"
                placeholder="514-000-0000"
                v-model="formData.phone"
              />
            </div>

            <div class="space-y-2 mb-6">
              <label for="message" class="text-sm font-medium">Message</label>
              <Textarea
                id="message"
                name="message"
                placeholder="Comment pouvons-nous vous aider?"
                :rows="4"
                v-model="formData.message"
                required
              />
            </div>

            <Button type="submit" size="lg" class="w-full gradient-targo">
              <Send class="w-5 h-5 mr-2" />
              Envoyer
            </Button>
          </form>
        </div>

        <!-- Contact info -->
        <div class="lg:col-span-2 space-y-6">
          <div v-for="item in contactInfo" :key="item.label" class="flex gap-4 p-4 bg-card rounded-2xl border border-border">
            <div class="w-12 h-12 rounded-xl gradient-targo flex items-center justify-center flex-shrink-0">
              <component :is="item.icon" class="w-6 h-6 text-primary-foreground" />
            </div>
            <div>
              <div class="text-sm text-muted-foreground mb-1">{{ item.label }}</div>
              <div class="font-medium">{{ item.value }}</div>
              <div v-if="item.subValue" class="text-sm text-muted-foreground">{{ item.subValue }}</div>
            </div>
          </div>

          <div class="p-6 bg-primary/10 rounded-2xl">
            <div class="font-display font-semibold mb-2">Surveillance 24/7/365</div>
            <p class="text-sm text-muted-foreground">
              Notre équipe surveille le réseau et répond aux urgences 24 heures sur 24,
              7 jours sur 7, toute l'année.
            </p>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>
