'use client'

import * as React from 'react'
import Link from 'next/link'
import { Menu, Phone, X } from 'lucide-react'
import { cn } from '@/lib/utils'
import { Button } from '@/components/ui/button'
import { Sheet, SheetContent, SheetTrigger, SheetClose } from '@/components/ui/sheet'

interface HeaderProps {
  variant?: 'default' | 'transparent'
  className?: string
}

const navigation = [
  { name: 'Imóveis', href: '/' },
  { name: 'Sobre Nós', href: '#sobre' },
  { name: 'Contato', href: '#contato' },
]

export function Header({ variant = 'default', className }: HeaderProps) {
  const [isScrolled, setIsScrolled] = React.useState(false)

  React.useEffect(() => {
    const handleScroll = () => {
      setIsScrolled(window.scrollY > 10)
    }
    window.addEventListener('scroll', handleScroll)
    return () => window.removeEventListener('scroll', handleScroll)
  }, [])

  const showBackground = variant === 'default' || isScrolled

  return (
    <header
      className={cn(
        'fixed top-0 left-0 right-0 z-50 transition-all duration-300',
        showBackground ? 'bg-card/95 backdrop-blur-sm shadow-sm' : 'bg-transparent',
        className
      )}
    >
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="flex items-center justify-between h-16 lg:h-20">
          {/* Logo */}
          <Link href="/" className="flex items-center gap-2">
            <div className="size-10 rounded-lg bg-primary flex items-center justify-center">
              <span className="text-primary-foreground font-bold text-lg">PD</span>
            </div>
            <div className="hidden sm:block">
              <span className={cn(
                'font-bold text-xl transition-colors',
                showBackground ? 'text-foreground' : 'text-card'
              )}>
                Pé Direito
              </span>
              <span className={cn(
                'block text-xs -mt-0.5 transition-colors',
                showBackground ? 'text-muted-foreground' : 'text-card/80'
              )}>
                Imóveis Premium
              </span>
            </div>
          </Link>

          {/* Desktop Navigation */}
          <nav className="hidden lg:flex items-center gap-8">
            {navigation.map((item) => (
              <Link
                key={item.name}
                href={item.href}
                className={cn(
                  'text-sm font-medium transition-colors hover:text-primary',
                  showBackground ? 'text-foreground' : 'text-card'
                )}
              >
                {item.name}
              </Link>
            ))}
          </nav>

          {/* Desktop CTA */}
          <div className="hidden lg:flex items-center gap-4">
            <a 
              href="tel:+551134567890" 
              className={cn(
                'flex items-center gap-2 text-sm font-medium transition-colors',
                showBackground ? 'text-muted-foreground hover:text-foreground' : 'text-card/80 hover:text-card'
              )}
            >
              <Phone className="size-4" />
              (11) 3456-7890
            </a>
            <Button className="bg-primary text-primary-foreground hover:bg-primary/90">
              Área do Cliente
            </Button>
          </div>

          {/* Mobile Menu */}
          <Sheet>
            <SheetTrigger asChild>
              <Button 
                variant="ghost" 
                size="icon" 
                className={cn(
                  'lg:hidden',
                  !showBackground && 'text-card hover:text-card hover:bg-card/10'
                )}
              >
                <Menu className="size-6" />
                <span className="sr-only">Abrir menu</span>
              </Button>
            </SheetTrigger>
            <SheetContent side="right" className="w-full max-w-sm">
              <div className="flex flex-col h-full">
                <div className="flex items-center gap-2 mb-8">
                  <div className="size-10 rounded-lg bg-primary flex items-center justify-center">
                    <span className="text-primary-foreground font-bold text-lg">PD</span>
                  </div>
                  <div>
                    <span className="font-bold text-xl text-foreground">Pé Direito</span>
                    <span className="block text-xs -mt-0.5 text-muted-foreground">
                      Imóveis Premium
                    </span>
                  </div>
                </div>

                <nav className="flex flex-col gap-1">
                  {navigation.map((item) => (
                    <SheetClose key={item.name} asChild>
                      <Link
                        href={item.href}
                        className="flex items-center px-4 py-3 text-lg font-medium text-foreground rounded-lg hover:bg-muted transition-colors"
                      >
                        {item.name}
                      </Link>
                    </SheetClose>
                  ))}
                </nav>

                <div className="mt-auto pt-8 space-y-4">
                  <a 
                    href="tel:+551134567890" 
                    className="flex items-center gap-3 px-4 py-3 text-muted-foreground hover:text-foreground transition-colors"
                  >
                    <Phone className="size-5" />
                    (11) 3456-7890
                  </a>
                  <Button className="w-full bg-primary text-primary-foreground hover:bg-primary/90">
                    Área do Cliente
                  </Button>
                </div>
              </div>
            </SheetContent>
          </Sheet>
        </div>
      </div>
    </header>
  )
}