"use client";
import Link from "next/link";
import Navmenu from "./Navmenu";
import UseSticky from "@/hooks/UseSticky";
import MobileMenu from "./MobileMenu";
import LanguageDropdown from "@/components/homes/home-2/LanguageDropdown";
import { useLanguage } from "@/contexts/LanguageContext";
import { useState } from "react";


export default function HeaderTwo() {
  const { hidden, sticky } = UseSticky();
  const [isOpen, setIsOpen] = useState(false);
  const { t, language } = useLanguage();
  const isRTL = language === "ar";
  const langLink = (path: string) => path.startsWith("http") ? path : `/${language}${path === "/" ? "" : path}`;


  return (
    <>
      <header className={`site-header azzle-header-section section2 ${sticky ? "sticky-menu" : ""} ${hidden ? "hide-header" : ""}`} id="sticky-menu">
        <div className="container">
          <div className="header-row" style={{ 
            display: 'flex', 
            alignItems: 'center', 
            justifyContent: 'space-between',
            flexDirection: isRTL ? 'row-reverse' : 'row',
            width: '100%'
          }}>
            <div className="header-logo">
              <Link href={langLink("/")}>
                <img src="/assets/images/logo.png" alt="SkyLight Chat" className="header-logo-img" width={300} height={300} />
              </Link>
            </div>
            <div className="azzle-main-menu-item d-none d-lg-block">
              <nav className="main-menu menu-style1">
                <Navmenu menu_style={true} />
              </nav>
            </div>
            <div className="d-flex align-items-center" style={{ gap: '10px' }}>
              <LanguageDropdown />
              <div className="azzle-header-button-wraper d-none d-md-flex">
                <div className="azzle-header-login-button button3">
                  <ul>
                    <li>
                      <Link href="https://dashboard.skylightchat.com/login">{t("header.login")}</Link>
                    </li>
                  </ul>
                </div>
                <Link className="azzle-default-btn azzle-header-btn btn2" href="https://dashboard.skylightchat.com/register" data-text={t("header.signup")}>
                  <span className="button-wraper">{t("header.signup")}</span>
                </Link>
              </div>
              <div className="azzle-header-menu d-lg-none">
                <button onClick={() => setIsOpen(!isOpen)} className="azzle-menu-toggle">
                  <span></span>
                </button>
              </div>
            </div>
          </div>
        </div>
        
        <style jsx>{`
          .header-logo-img {
            width: 120px;
            height: 120px;
          }

          .azzle-header-menu {
            display: flex;
            align-items: center;
          }

          .azzle-menu-toggle {
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 8px;
            padding: 8px 12px;
            cursor: pointer;
            display: flex;
            flex-direction: column;
            gap: 4px;
            transition: all 0.3s ease;
          }

          .azzle-menu-toggle:hover {
            background: rgba(255, 255, 255, 0.2);
          }

          .azzle-menu-toggle span {
            width: 24px;
            height: 2px;
            background: #fff;
            display: block;
            transition: all 0.3s ease;
          }

          .azzle-menu-toggle span::before,
          .azzle-menu-toggle span::after {
            content: '';
            width: 24px;
            height: 2px;
            background: #fff;
            display: block;
            position: relative;
          }

          .azzle-menu-toggle span::before {
            top: -8px;
          }

          .azzle-menu-toggle span::after {
            top: 6px;
          }

          @media (max-width: 768px) {
            .header-logo-img {
              width: 60px;
              height: 60px;
            }

            .azzle-header-button-wraper {
              gap: 5px;
              display: flex;
              align-items: center;
            }

            .azzle-header-login-button {
              margin: 0;
            }

            .azzle-header-login-button ul {
              margin: 0;
              padding: 0;
            }

            .azzle-header-login-button ul li {
              margin: 0;
            }

            .azzle-header-login-button ul li a {
              padding: 6px 10px;
              font-size: 12px;
              white-space: nowrap;
            }

            .azzle-header-btn {
              padding: 6px 10px !important;
              font-size: 12px !important;
              white-space: nowrap;
            }

            .azzle-header-btn .button-wraper {
              font-size: 12px !important;
            }
          }

          @media (max-width: 480px) {
            .header-logo-img {
              width: 50px;
              height: 50px;
            }

            .azzle-header-button-wraper {
              gap: 4px;
            }

            .azzle-header-login-button ul li a {
              padding: 5px 8px;
              font-size: 11px;
            }

            .azzle-header-btn {
              padding: 5px 8px !important;
              font-size: 11px !important;
            }

            .azzle-header-btn .button-wraper {
              font-size: 11px !important;
            }
          }
        `}</style>
      </header>
      <MobileMenu setIsOpen={setIsOpen} isOpen={isOpen} />
    </>
  )
}
