<script setup lang="ts">
import type { Component } from "vue";
import { RouterLink } from "vue-router";
import Header from "@/components/layout/Header.vue";
import Footer from "@/components/layout/Footer.vue";
import { Button } from "@/components/ui/button";
import { ArrowRight, Phone } from "lucide-vue-next";

defineProps<{
  title: string;
  subtitle?: string;
  description: string;
  icon?: Component;
  heroImage?: string;
}>();
</script>

<template>
  <div class="min-h-screen bg-targo-dark text-white selection:bg-targo-green selection:text-white">
    <Header />

    <!-- Hero Section -->
    <section class="relative pt-32 pb-20 md:pt-40 md:pb-32 overflow-hidden">
      <!-- Background Elements -->
      <div class="absolute inset-0 bg-[radial-gradient(circle_at_top_right,_var(--tw-gradient-stops))] from-targo-green/20 via-targo-dark to-targo-dark" />
      <div class="absolute top-0 left-0 w-full h-full bg-[url('/grid-pattern.svg')] opacity-5" />

      <div class="container relative mx-auto px-4">
        <div
          v-motion
          :initial="{ opacity: 0, y: 30 }"
          :enter="{ opacity: 1, y: 0, transition: { duration: 800, ease: 'easeOut' } }"
          class="max-w-4xl mx-auto text-center"
        >
          <RouterLink
            to="/business"
            class="inline-flex items-center text-targo-green-light hover:text-white transition-colors mb-8 text-sm font-medium tracking-wide uppercase"
          >
            ← Retour aux solutions affaires
          </RouterLink>

          <div
            v-if="icon"
            v-motion
            :initial="{ scale: 0.8, opacity: 0 }"
            :enter="{ scale: 1, opacity: 1, transition: { delay: 200, duration: 500 } }"
            class="w-20 h-20 bg-targo-green/10 rounded-2xl flex items-center justify-center mx-auto mb-8 border border-targo-green/20 backdrop-blur-sm shadow-[0_0_30px_rgba(0,200,83,0.2)]"
          >
            <component :is="icon" class="h-10 w-10 text-targo-green" />
          </div>

          <h1 class="text-5xl md:text-6xl lg:text-7xl font-bold mb-6 font-display tracking-tight">
            {{ title }} <span class="text-transparent bg-clip-text bg-gradient-to-r from-targo-green to-targo-green-light">{{ subtitle }}</span>
          </h1>

          <p class="text-lg md:text-xl text-gray-400 mb-10 max-w-3xl mx-auto leading-relaxed">
            {{ description }}
          </p>

          <div
            v-motion
            :initial="{ opacity: 0, y: 20 }"
            :enter="{ opacity: 1, y: 0, transition: { delay: 400, duration: 500 } }"
            class="flex flex-col sm:flex-row gap-4 justify-center"
          >
            <Button size="lg" class="bg-targo-green hover:bg-targo-green-dark text-white font-bold text-lg px-8 py-6 rounded-xl shadow-lg shadow-targo-green/20 transition-all hover:scale-105">
              Demander une soumission
              <ArrowRight class="ml-2 h-5 w-5" />
            </Button>
            <Button size="lg" variant="outline" class="text-lg px-8 py-6 border-white/10 bg-white/5 text-white hover:bg-white/10 hover:text-white rounded-xl backdrop-blur-sm transition-all hover:scale-105">
              <Phone class="mr-2 h-5 w-5" />
              1-855-888-2746
            </Button>
          </div>
        </div>
      </div>
    </section>

    <slot />

    <div class="border-t border-white/5">
      <Footer />
    </div>
  </div>
</template>
