"use client"

import { Button } from "@/components/ui/button"
import { MessageCircle } from "lucide-react"
import { useEffect, useState } from "react"

export function StickyWhatsAppButton() {
  const [isVisible, setIsVisible] = useState(false)

  useEffect(() => {
    const toggleVisibility = () => {
      if (window.scrollY > 300) {
        setIsVisible(true)
      } else {
        setIsVisible(false)
      }
    }

    window.addEventListener("scroll", toggleVisibility)
    return () => window.removeEventListener("scroll", toggleVisibility)
  }, [])

  return (
    <div
      className={`fixed bottom-6 right-6 z-50 transition-all duration-300 ${
        isVisible ? "translate-y-0 opacity-100" : "translate-y-16 opacity-0"
      }`}
    >
      <Button
        size="lg"
        className="gap-2 rounded-full shadow-lg hover:shadow-xl md:hidden bg-blue-600 hover:bg-blue-700"
        asChild
      >
        <a href="https://wa.me/447414470433" target="_blank" rel="noopener noreferrer">
          <MessageCircle className="h-5 w-5" />
          <span>Get Started</span>
        </a>
      </Button>

      <Button
        size="lg"
        className="hidden md:flex gap-2 rounded-full shadow-lg hover:shadow-xl bg-blue-600 hover:bg-blue-700"
        asChild
      >
        <a href="https://buy.stripe.com/aFa7sL0Qw3GH2PI2kQ8k806" target="_blank" rel="noopener noreferrer">
          <span>Get Your Website — £540/year</span>
        </a>
      </Button>
    </div>
  )
}
