rapharehap/components/layout/header/Header2.js

"use client";
import React, { useState, useEffect } from "react";
import Link from "next/link";
import Menu from "../Menu";
import MobileMenu from "../MobileMenu";
import Image from "next/image";

export default function Header2({
  scroll,
  isMobileMenu,
  handleMobileMenu,
  handlePopup,
  handleSidebar,
  isHome = false,
}) {
  const [isMobile, setIsMobile] = useState(false);

  // ✅ Detect mobile screen
  useEffect(() => {
    const checkScreenSize = () => setIsMobile(window.innerWidth <= 768);
    checkScreenSize();
    window.addEventListener("resize", checkScreenSize);
    return () => window.removeEventListener("resize", checkScreenSize);
  }, []);

  // ✅ Switch logo based on screen size
  const logoSrc = isMobile
    ? "/assets/images/logo-mbl.png" // mobile logo
    : "/assets/images/logo.png"; // desktop logo

  return (
    <>
      <header
        className={`main-header header-style-two ${
          scroll ? "fixed-header" : ""
        } ${isHome ? "home-page" : ""}`}
      >
        <div className="header-top">
          <div className="top-inner">
            <ul className="info-list clearfix">
              <li>
                <img
                  src="/assets/images/icons/call.webp"
                  alt="Phone"
                  className="contact-icon"
                />
                <Link href="tel:647-722-3434" aria-label="Call us at 647-722-3434">
                  647-722-3434
                </Link>
              </li>
              <li>
                <img
                  src="/assets/images/icons/mail.webp"
                  alt="Mail"
                  className="contact-icon"
                />
                <Link href="mailto:bloor@rapharehab.ca" aria-label="Send email to bloor@rapharehab.ca">
                  bloor@rapharehab.ca
                </Link>
              </li>
            </ul>

            <ul className="social-links clearfix">
              <li>
                <Link href="/why-rapha-physiotherapy-etobicoke" aria-label="Why Us page">
                  Why Us
                </Link>
              </li>
              <li>
                <Link href="/faq-physiotherapy-etobicoke" aria-label="FAQ’s page">
                  FAQ’s
                </Link>
              </li>
              <li>
                <Link href="/what-to-expect" aria-label="What To Expect page">
                  What To Expect
                </Link>
              </li>
              <li>
                <Link href="/payment-insurance" aria-label="Payment And Insurance page">
                  Payment And Insurance
                </Link>
              </li>
              <li>
                <Link
                  href="https://www.instagram.com/elrapharehab/"
                  target="_blank"
                  rel="noopener noreferrer"
                  aria-label="Instagram profile"
                >
                  <i className="icon-4"></i>
                </Link>
              </li>
              <li>
                <Link
                  href="https://www.facebook.com/ELRaphaRehabCenter/"
                  target="_blank"
                  rel="noopener noreferrer"
                  aria-label="Facebook page"
                >
                  <i className="icon-7"></i>
                </Link>
              </li>
            </ul>
          </div>
        </div>

        <div className="header-lower">
          <div className="outer-container">
            <div className="outer-box">
              <div className="logo-box">
                <figure className="logo">
                  {/* ✅ Responsive logo using Next/Image */}
                  <Link href="/" aria-label="Home page">
                    <Image
                      src={logoSrc}
                      alt="rapharehab logo"
                      width={isMobile ? 150 : 200} // smaller on mobile
                      height={isMobile ? 45 : 60}
                      priority
                      quality={80}
                      sizes="(max-width: 768px) 150px, 200px"
                      style={{
                        width: "100%",
                        height: "auto",
                        objectFit: "contain",
                      }}
                    />
                  </Link>
                </figure>
              </div>

              <div className="menu-area">
                <div className="mobile-nav-toggler" onClick={handleMobileMenu}>
                  <i className="icon-bar"></i>
                  <i className="icon-bar"></i>
                  <i className="icon-bar"></i>
                </div>

                <nav className="main-menu navbar-expand-md navbar-light clearfix">
                  <div
                    className="collapse navbar-collapse show clearfix"
                    id="navbarSupportedContent"
                  >
                    <Menu />
                  </div>
                </nav>
              </div>
            </div>
          </div>
        </div>

        <div className="sticky-header">
          <div className="auto-container">
            <div className="outer-box">
              <div className="logo-box">
                <figure className="logo">
                  {/* ✅ Sticky header also gets responsive logo */}
                  <Link href="/" aria-label="Home page">
                    <Image
                      src={logoSrc}
                      alt="rapharehab logo"
                      width={isMobile ? 150 : 200}
                      height={isMobile ? 45 : 60}
                      priority
                      quality={80}
                      sizes="(max-width: 768px) 150px, 200px"
                      style={{
                        width: "100%",
                        height: "auto",
                        objectFit: "contain",
                      }}
                    />
                  </Link>
                </figure>
              </div>

              <nav className="main-menu navbar-expand-md navbar-light clearfix">
                <div
                  className="collapse navbar-collapse show clearfix"
                  id="navbarSupportedContent"
                >
                  <Menu />
                </div>
              </nav>
            </div>
          </div>
        </div>

        <MobileMenu handleMobileMenu={handleMobileMenu} />
      </header>
    </>
  );
}