"use client";

import React, { useState, useEffect } from "react";
import { motion } from "framer-motion";
import { ShoppingBag } from "lucide-react";
import { SITE_BRAND } from "@/config/siteContent";

interface HeaderProps {
  onOpenSchedule: () => void;
}

export default function Header({ onOpenSchedule }: HeaderProps) {
  const [isScrolled, setIsScrolled] = useState(false);
  const [isInstaHovered, setIsInstaHovered] = useState(false);
  const [isWaHovered, setIsWaHovered] = useState(false);

  useEffect(() => {
    const heroSection = document.getElementById("intro");
    if (!heroSection) return;

    const observer = new IntersectionObserver(
      ([entry]) => {
        // Turn black once the hero section is completely out of view
        setIsScrolled(!entry.isIntersecting);
      },
      { threshold: 0, rootMargin: "0px 0px 0px 0px" }
    );

    observer.observe(heroSection);
    return () => observer.disconnect();
  }, []);

  return (
    <motion.header
      initial={{ y: -20, opacity: 0 }}
      animate={{ y: 0, opacity: 1 }}
      transition={{ duration: 0.5, ease: "easeOut" }}
      className={`w-full transition-all duration-300 z-40 ${
        isScrolled
          ? "fixed top-0 left-0 bg-black/95 backdrop-blur-md shadow-md py-3 text-white"
          : "sticky top-0 bg-white py-4 text-zinc-900 border-b border-zinc-100"
      }`}
    >
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between gap-6">
        
        {/* TRICITY Logo & Emblem */}
        <a href="#intro" className="flex items-center gap-3 group shrink-0">
          <img 
            src={SITE_BRAND.logoUrl} 
            alt={`${SITE_BRAND.companyName} ${SITE_BRAND.companySub}`} 
            className={`h-12 w-auto object-contain transition-transform duration-300 group-hover:scale-105 ${
              isScrolled ? "brightness-110" : ""
            }`}
          />
          <div className="flex flex-col text-left">
            <span className="text-xl sm:text-2xl font-black tracking-[0.18em] text-gold-gradient font-serif leading-none">
              {SITE_BRAND.companyName}
            </span>
            <span className="text-[9px] sm:text-[10px] font-bold tracking-[0.25em] text-[#c5a059] uppercase mt-0.5">
              {SITE_BRAND.companySub}
            </span>
          </div>
        </a>

        {/* Right Header Actions */}
        <div className="flex items-center gap-3 shrink-0">
          {/* Instagram Link */}
          <motion.a
            href={SITE_BRAND.instagramUrl}
            target="_blank"
            rel="noopener noreferrer"
            onMouseEnter={() => setIsInstaHovered(true)}
            onMouseLeave={() => setIsInstaHovered(false)}
            whileHover={{ scale: 1.08 }}
            whileTap={{ scale: 0.92 }}
            className={`w-9 h-9 rounded-full border transition-all duration-300 flex items-center justify-center relative overflow-hidden ${
              isScrolled
                ? "border-zinc-800 hover:border-pink-500 bg-zinc-950 text-zinc-300 hover:text-white"
                : "border-zinc-200 hover:border-pink-500 bg-zinc-50 hover:bg-zinc-100/50 text-zinc-700 hover:text-pink-500"
            }`}
            aria-label="Instagram"
          >
            <motion.div
              className="absolute inset-0 bg-gradient-to-tr from-yellow-400 via-red-500 to-purple-600 transition-opacity duration-300"
              style={{ opacity: isInstaHovered ? 0.08 : 0 }}
            />
            <svg
              viewBox="0 0 24 24"
              width="18"
              height="18"
              stroke={isInstaHovered ? "url(#instagram-gradient)" : "currentColor"}
              strokeWidth="1.8"
              fill="none"
              strokeLinecap="round"
              strokeLinejoin="round"
              className="w-4.5 h-4.5 z-10 transition-all duration-300"
            >
              <defs>
                <linearGradient id="instagram-gradient" x1="0%" y1="100%" x2="100%" y2="0%">
                  <stop offset="0%" stopColor="#f09433" />
                  <stop offset="30%" stopColor="#e6683c" />
                  <stop offset="50%" stopColor="#dc2743" />
                  <stop offset="70%" stopColor="#cc2366" />
                  <stop offset="100%" stopColor="#bc1888" />
                </linearGradient>
              </defs>
              <rect width="20" height="20" x="2" y="2" rx="5" ry="5" />
              <path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z" />
              <line x1="17.5" x2="17.51" y1="6.5" y2="6.5" />
            </svg>
          </motion.a>

          {/* WhatsApp Link */}
          <motion.a
            href={SITE_BRAND.whatsappUrl}
            target="_blank"
            rel="noopener noreferrer"
            onMouseEnter={() => setIsWaHovered(true)}
            onMouseLeave={() => setIsWaHovered(false)}
            whileHover={{ scale: 1.08 }}
            whileTap={{ scale: 0.92 }}
            className={`w-9 h-9 rounded-full border transition-all duration-300 flex items-center justify-center relative overflow-hidden ${
              isScrolled
                ? "border-zinc-800 hover:border-[#25D366] bg-zinc-950 text-zinc-300 hover:text-white"
                : "border-zinc-200 hover:border-[#25D366] bg-zinc-50 hover:bg-zinc-100/50 text-zinc-700 hover:text-[#25D366]"
            }`}
            aria-label="WhatsApp"
          >
            <motion.div
              className="absolute inset-0 bg-[#25D366] transition-opacity duration-300"
              style={{ opacity: isWaHovered ? 0.08 : 0 }}
            />
            <svg
              viewBox="0 0 24 24"
              width="18"
              height="18"
              fill="currentColor"
              className={`w-4.5 h-4.5 z-10 transition-colors duration-300 ${
                isWaHovered 
                  ? "text-[#25D366]" 
                  : isScrolled 
                    ? "text-zinc-200" 
                    : "text-zinc-700"
              }`}
            >
              <path d="M19.05 4.91A9.816 9.816 0 0 0 12.04 2c-5.46 0-9.91 4.45-9.91 9.91 0 1.75.46 3.45 1.32 4.95L2.05 22l5.25-1.38c1.45.79 3.08 1.21 4.74 1.21 5.46 0 9.91-4.45 9.91-9.91 0-2.65-1.03-5.14-2.9-7.01zm-7.01 15.24c-1.48 0-2.93-.4-4.18-1.15l-.3-.18-3.11.82.83-3.03-.2-.31a8.098 8.098 0 0 1-1.24-4.38c0-4.49 3.66-8.15 8.16-8.15 2.18 0 4.22.85 5.75 2.39a8.09 8.09 0 0 1 2.39 5.76c-.01 4.51-3.67 8.16-8.15 8.15zm4.48-6.12c-.24-.12-1.45-.72-1.68-.8-.23-.08-.39-.12-.56.12-.17.24-.66.83-.8 1-.15.17-.3.19-.54.07-2.73-1.36-3.88-2.62-4.16-3.1-.17-.29-.02-.45.13-.59.13-.13.3-.35.45-.53.15-.18.2-.3.3-.5.1-.2.05-.38-.02-.5-.07-.12-.56-1.36-.77-1.87-.2-.5-.4-.43-.56-.43-.15 0-.32-.01-.49-.01-.17 0-.44.06-.67.31-.23.25-.88.86-.88 2.1s.9 2.43 1.02 2.6c.12.17 1.78 2.73 4.32 3.83.6.26 1.08.42 1.45.54.61.19 1.17.16 1.61.1.49-.07 1.45-.59 1.65-1.14.2-.55.2-1.02.14-1.12-.06-.1-.22-.16-.46-.28z"/>
            </svg>
          </motion.a>

          <motion.button
            whileHover={{ scale: 1.03 }}
            whileTap={{ scale: 0.97 }}
            onClick={onOpenSchedule}
            className={`flex items-center gap-2 text-xs font-bold uppercase tracking-wider px-5 py-2.5 transition duration-300 shadow-md rounded-sm cursor-pointer ${
              isScrolled 
                ? "bg-white text-zinc-950 hover:bg-[#c5a059] hover:text-white" 
                : "bg-zinc-900 text-white hover:bg-[#c5a059]"
            }`}
          >
            <ShoppingBag size={14} />
            Inquire
          </motion.button>
        </div>
      </div>
    </motion.header>
  );
}