"use client";
import React from "react";
import Link from "next/link";
import Image from "next/image";

export default function Header2() {
  const handleScroll = (sectionId) => {
    const element = document.getElementById(sectionId);
    if (element) {
      element.scrollIntoView({
        behavior: 'smooth',
        block: 'start',
      });
    }
  };

  return (
    <header id="header-main" className="header style-1">
      <div className="header-inner">
        <div className="tf-container">
          <div className="row">
            <div className="col-12">
              <div className="header-inner-wrap">
                <div className="header-left d-flex align-items-center">
                  <div className="header-logo">
                    <Link href={`/#`} className="site-logo">
                      <Image
                        src="/images/logo/footer-logo1.png" // Replace with your logo path
                        alt="Logo"
                        width={140}
                        height={40}
                      />
                    </Link>
                  </div>
                  <nav className="main-menu style-1">
                    <ul className="navigation">
                      <li>
                        <button 
                          onClick={() => handleScroll('home')}
                          style={{
                            background: 'none',
                            border: 'none',
                            color: 'inherit',
                            font: 'inherit',
                            cursor: 'pointer',
                            padding: 0
                          }}
                        >
                          Home
                        </button>
                      </li>
                      <li>
                        <button 
                          onClick={() => handleScroll('services')}
                          style={{
                            background: 'none',
                            border: 'none',
                            color: 'inherit',
                            font: 'inherit',
                            cursor: 'pointer',
                            padding: 0
                          }}
                        >
                          Services
                        </button>
                      </li>
                      <li>
                        <button 
                          onClick={() => handleScroll('focus-areas')}
                          style={{
                            background: 'none',
                            border: 'none',
                            color: 'inherit',
                            font: 'inherit',
                            cursor: 'pointer',
                            padding: 0
                          }}
                        >
                          Focus Areas
                        </button>
                      </li>
                      <li>
                        <button 
                          onClick={() => handleScroll('team')}
                          style={{
                            background: 'none',
                            border: 'none',
                            color: 'inherit',
                            font: 'inherit',
                            cursor: 'pointer',
                            padding: 0
                          }}
                        >
                          Team
                        </button>
                      </li>
                      <li>
                        <button 
                          onClick={() => handleScroll('about')}
                          style={{
                            background: 'none',
                            border: 'none',
                            color: 'inherit',
                            font: 'inherit',
                            cursor: 'pointer',
                            padding: 0
                          }}
                        >
                          About Us
                        </button>
                      </li>
                    </ul>
                  </nav>
                </div>
                <div className="header-right d-flex align-items-center">
                  <div className="support text-body-2 d-flex gap_12 align-items-center text_mono-dark-9">
                    <i className="icon-customer-support" />
                    24/7 Support: (234) 109-6666
                  </div>
                  <button
                    onClick={() => handleScroll('focus-areas')}
                    className="tf-btn btn-border hide-sm h36 rounded-0"
                  >
                    <span className="text-caption-3">Get Started</span>
                    <span className="bg-effect" />
                  </button>
                  <button
                    onClick={() => handleScroll('contact')}
                    className="tf-btn hide-sm btn-dark h36 rounded-0"
                  >
                    <span className="text-caption-3">Contact Us</span>
                    <span className="bg-effect" />
                  </button>
                  <div
                    className="mobile-button"
                    data-bs-toggle="offcanvas"
                    data-bs-target="#menu-mobile"
                    aria-controls="menu-mobile"
                  >
                    <div className="burger">
                      <span />
                      <span />
                      <span />
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </header>
  );
}