import { ChevronsUpDown } from "lucide-react";
import { cn } from "@/lib/utils";
import { LanguageSelector } from "@/components/LanguageSelector";
import { Link } from "react-router-dom";
import { trackAdClick } from "@/utils/analytics";
import { PageBreadcrumbs } from "@/components/PageBreadcrumbs";

export function Header() {
  const scrollToAbout = (e: React.MouseEvent) => {
    e.preventDefault();
    const aboutSection = document.querySelector('#about-unitconverter');
    if (aboutSection) {
      aboutSection.scrollIntoView({ behavior: 'smooth' });
    }
  };

  // Updated affiliate URLs with UTM parameters for better tracking
  const bookingDealsUrl = "https://yazing.com/deals/booking/BJMarketing?utm_source=unitconverter&utm_medium=header&utm_campaign=hotels";
  const tripDealsUrl = "https://trip.tp.st/2baTOCz7?utm_source=unitconverter&utm_medium=header&utm_campaign=flights";

  // Handler for tracking affiliate link clicks with enhanced tracking
  const handleAdClick = (provider: string, linkText: string, position: string = 'header') => {
    trackAdClick(provider, position, linkText);
    // Log additional data for enhanced analytics
    console.log(`User clicked on ${provider} link - ${linkText} at ${position} - ${new Date().toISOString()}`);
  };

  return (
    <header className="w-full bg-primary py-4 px-6 shadow-md" role="banner" itemScope itemType="http://schema.org/WPHeader" data-seo-key="true">
      <div className="container mx-auto flex items-center justify-between">
        <div className="flex items-center gap-2" itemProp="publisher" itemScope itemType="http://schema.org/Organization">
          <ChevronsUpDown className="h-6 w-6 text-white" aria-hidden="true" />
          <h1 className="text-xl md:text-2xl font-bold text-white">
            <a 
              href="/" 
              className="hover:text-white/90 transition-colors" 
              title="UnitConverter Home - Free Online Unit Conversion Tool" 
              itemProp="name"
              rel="home"
            >
              UnitConverter
            </a>
          </h1>
          <meta itemProp="logo" content="https://unitconverter.store/logo.png" />
          <meta itemProp="description" content="Free online unit converter for accurate conversions between length, weight, temperature, area, volume & more." />
          <meta itemProp="sameAs" content="https://twitter.com/unitconverter" />
          <meta itemProp="sameAs" content="https://facebook.com/unitconverter" />
          <meta itemProp="sameAs" content="https://linkedin.com/company/unitconverter" />
        </div>
        <div className="flex items-center gap-4">
          <nav 
            className="hidden md:flex space-x-6" 
            aria-label="Main Navigation" 
            itemScope 
            itemType="http://schema.org/SiteNavigationElement"
            role="navigation"
          >
            <a 
              href="/" 
              className="text-white/90 hover:text-white transition-colors" 
              title="UnitConverter Home Page - Free Unit Conversion Tools" 
              itemProp="url"
              rel="nofollow"
            >
              <span itemProp="name">Home</span>
            </a>
            <a 
              href="#about-unitconverter" 
              onClick={scrollToAbout} 
              className="text-white/90 hover:text-white transition-colors" 
              title="About UnitConverter - Learn About Our Free Conversion Tools" 
              itemProp="url"
              rel="nofollow"
            >
              <span itemProp="name">About</span>
            </a>
            <a 
              href={bookingDealsUrl}
              target="_blank"
              rel="noopener noreferrer sponsored"
              className="text-white/90 hover:text-white transition-colors bg-blue-600 px-3 py-1 rounded-md" 
              title="Save on Hotels - Booking.com Deals" 
              itemProp="url"
              onClick={() => handleAdClick('booking', 'Hotels')}
              data-tracking="booking-hotels-header"
            >
              <span itemProp="name">Hotels</span>
            </a>
            <a 
              href={tripDealsUrl}
              target="_blank"
              rel="noopener noreferrer sponsored"
              className="text-white/90 hover:text-white transition-colors bg-purple-600 px-3 py-1 rounded-md" 
              title="Flight Deals - Trip.com Special Offers" 
              itemProp="url"
              onClick={() => handleAdClick('trip', 'Flights')}
              data-tracking="trip-flights-header"
            >
              <span itemProp="name">Flights</span>
            </a>
          </nav>
          <div className="flex items-center" title="Select your preferred language" aria-label="Language selection">
            <LanguageSelector minimal />
          </div>
        </div>
      </div>
      {/* Add breadcrumbs for better user navigation and SEO */}
      <div className="container mx-auto mt-2">
        <PageBreadcrumbs className="text-white text-sm" />
      </div>
    </header>
  );
}