"use client";
import { Container } from "@/components/container";
import { Heading } from "@/components/heading";
import { Subheading } from "@/components/subheading";
import { Button } from "@/components/ui/button";
import { Phone } from "lucide-react";

export function Hero() {
  return (
    <section className="relative py-20 md:py-32 overflow-hidden bg-slate-50">
      <div className="absolute inset-0 bg-grid-slate-200 [mask-image:linear-gradient(0deg,white,rgba(255,255,255,0.6))]" />
      <Container className="relative">
        <div className="max-w-3xl mx-auto text-center">
          <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-blue-100 text-blue-700 text-sm font-medium mb-6">
            <span className="relative flex h-2 w-2">
              <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-blue-400 opacity-75"></span>
              <span className="relative inline-flex rounded-full h-2 w-2 bg-blue-500"></span>
            </span>
            Disponible pour les Urgences
          </div>
          <Heading as="h1" className="text-4xl md:text-6xl font-bold tracking-tight text-slate-900">
            Dépannage Chauffage & Plomberie d'Urgence
          </Heading>
          <Subheading className="mt-6 text-lg text-slate-600 max-w-2xl mx-auto">
            Intervention rapide et assistance professionnelle pour toutes vos urgences de chauffage et plomberie. Nos 6 techniciens qualifiés sont prêts à intervenir quand vous en avez le plus besoin.
          </Subheading>
          <div className="mt-10 flex flex-col sm:flex-row gap-4 justify-center">
            <Button size="lg" className="bg-blue-600 hover:bg-blue-700 text-white px-8" onClick={() => document.getElementById('emergency-form')?.scrollIntoView({ behavior: 'smooth' })}>
              Demander une Intervention
            </Button>
            <Button size="lg" variant="outline" className="gap-2 border-slate-300 text-slate-700">
              <Phone className="w-4 h-4" />
              01 23 45 67 89
            </Button>
          </div>
        </div>
      </Container>
    </section>
  );
}