94 lines
2.7 KiB
TypeScript
94 lines
2.7 KiB
TypeScript
|
||
'use client'
|
||
|
||
import { Phone, ArrowRight } from 'lucide-react'
|
||
import { Button } from '@/components/ui/button'
|
||
import { useToast } from '@/hooks/use-toast'
|
||
|
||
interface InteractiveButtonsProps {
|
||
variant?: 'hero' | 'header' | 'footer' | 'pricing'
|
||
className?: string
|
||
}
|
||
|
||
export default function InteractiveButtons({ variant = 'hero', className = '' }: InteractiveButtonsProps) {
|
||
const { toast } = useToast()
|
||
|
||
const handlePhoneClick = () => {
|
||
const phoneNumber = '89854891619'
|
||
const telUrl = `tel:${phoneNumber}`
|
||
|
||
// Try to make a phone call on mobile devices
|
||
if (window?.navigator?.userAgent?.match(/Mobile|Android|iPhone|iPad/)) {
|
||
window.location.href = telUrl
|
||
} else {
|
||
// Copy to clipboard on desktop
|
||
navigator.clipboard?.writeText(phoneNumber).then(() => {
|
||
toast({
|
||
title: "Номер скопирован!",
|
||
description: "8(985)489-16-19 скопирован в буфер обмена",
|
||
})
|
||
}).catch(() => {
|
||
// Fallback: show alert if clipboard API is not available
|
||
alert('Номер телефона: 8(985)489-16-19')
|
||
})
|
||
}
|
||
}
|
||
|
||
const scrollToContact = () => {
|
||
const contactSection = document.getElementById('contact-section')
|
||
if (contactSection) {
|
||
contactSection.scrollIntoView({
|
||
behavior: 'smooth',
|
||
block: 'start'
|
||
})
|
||
}
|
||
}
|
||
|
||
const scrollToContactForm = () => {
|
||
const contactForm = document.getElementById('contact-form')
|
||
if (contactForm) {
|
||
contactForm.scrollIntoView({
|
||
behavior: 'smooth',
|
||
block: 'center'
|
||
})
|
||
}
|
||
}
|
||
|
||
if (variant === 'hero') {
|
||
return (
|
||
<div className={`flex flex-col sm:flex-row gap-3 sm:gap-4 justify-center ${className}`}>
|
||
<Button
|
||
size="lg"
|
||
className="bg-blue-600 hover:bg-blue-700 text-white px-6 sm:px-8 py-3 sm:py-4 text-base sm:text-lg w-full sm:w-auto"
|
||
onClick={handlePhoneClick}
|
||
>
|
||
<Phone className="mr-2 h-4 w-4 sm:h-5 sm:w-5" />
|
||
8(985)489-16-19
|
||
</Button>
|
||
<Button
|
||
size="lg"
|
||
variant="outline"
|
||
className="border-white text-white hover:bg-white hover:text-gray-900 px-6 sm:px-8 py-3 sm:py-4 text-base sm:text-lg w-full sm:w-auto"
|
||
onClick={scrollToContact}
|
||
>
|
||
Получить консультацию
|
||
<ArrowRight className="ml-2 h-4 w-4 sm:h-5 sm:w-5" />
|
||
</Button>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
if (variant === 'pricing') {
|
||
return (
|
||
<Button
|
||
className={`w-full mt-6 bg-blue-600 hover:bg-blue-700 ${className}`}
|
||
onClick={scrollToContactForm}
|
||
>
|
||
Заказать
|
||
</Button>
|
||
)
|
||
}
|
||
|
||
return null
|
||
}
|