/* global React, LineIcon, useScrolled */
const { useState } = React;

function Header() {
  const scrolled = useScrolled(8);
  const [open, setOpen] = useState(false);
  const [openMenu, setOpenMenu] = useState(null); // 'palvelut' | 'toimialat' | 'tarinat' | null

  const navItems = [
    {
      key: "palvelut", label: "Palvelut",
      items: [
        { label: "Vakuutusten kilpailutus", href: "Vakuutusten Kilpailutus.html" },
        { label: "Vakuutusten hoito", href: "Vakuutusten Hoito.html" },
        { label: "Vahinkojen hoito", href: "Vahinkojen Hoito.html" },
        { label: "Lakimiespalvelut", href: "Lakimiespalvelut.html" },
        { label: "Hinnoittelu", href: "Hinnoittelu.html" },
      ],
    },
    {
      key: "toimialat", label: "Toimialat",
      items: [
        { label: "Kuljetusala", href: "Kuljetusala.html" },
        { label: "Rakennusala", href: "Rakennusala.html" },
        { label: "Tuotanto", href: "Tuotanto.html" },
        { label: "ICT ja konsultointi", href: "ICT.html" },
        { label: "Suunnittelu ja arkkitehtuuri", href: "Suunnittelu.html" },
        { label: "Finanssi ja kiinteistö", href: "Finanssi.html" },
      ],
    },
    {
      key: "tarinat", label: "Tarinat",
      items: [
        { label: "Asiakastarinat", href: "Asiakastarinat.html" },
        { label: "Tietopankki", href: "Oppaat.html" },
      ],
    },
  ];

  return (
    <header className={"hdr" + (scrolled ? " hdr-scrolled" : "")}>
      <div className="container hdr-inner">
        <a href="Etusivu.html" className="hdr-logo" aria-label="Arvomeklarit etusivu">
          <img src="assets/arvomeklarit-logo.png" alt="Arvomeklarit" className="hdr-logo-img" />
        </a>

        <nav className="hdr-nav" aria-label="Päänavigaatio">
          {navItems.map((nav) => (
            <div
              key={nav.key}
              className="hdr-nav-item"
              onMouseEnter={() => setOpenMenu(nav.key)}
              onMouseLeave={() => setOpenMenu(null)}
            >
              <button
                className="hdr-nav-btn"
                aria-expanded={openMenu === nav.key}
                aria-haspopup="true"
                onClick={() => setOpenMenu(openMenu === nav.key ? null : nav.key)}
              >
                {nav.label}
                <LineIcon name="chevron" size={14} />
              </button>
              {openMenu === nav.key && (
                <div className="hdr-dropdown" role="menu">
                  {nav.items.map((it) => (
                    <a key={it.label} href={it.href} role="menuitem" className="hdr-dropdown-item">
                      {it.label}
                    </a>
                  ))}
                </div>
              )}
            </div>
          ))}
          <a href="Tietoa Meista.html" className="hdr-nav-link">Tietoa meistä</a>
          <a href="Yhteystiedot.html" className="hdr-nav-link">Yhteystiedot</a>
        </nav>

        <div className="hdr-actions">
          <a href="Yhteystiedot.html#kalenteri" className="btn btn-primary hdr-cta">Varaa tapaaminen</a>
          <button
            className="hdr-burger"
            aria-label={open ? "Sulje valikko" : "Avaa valikko"}
            aria-expanded={open}
            onClick={() => setOpen(!open)}
          >
            <LineIcon name={open ? "close" : "menu"} size={24} />
          </button>
        </div>
      </div>

      {open && (
        <div className="hdr-mobile">
          <a href="#palvelut" onClick={() => setOpen(false)}>Palvelut</a>
          <a href="#toimialat" onClick={() => setOpen(false)}>Toimialat</a>
          <a href="Asiakastarinat.html" onClick={() => setOpen(false)}>Tarinat</a>
          <a href="Tietoa Meista.html" onClick={() => setOpen(false)}>Tietoa meistä</a>
          <a href="Yhteystiedot.html" onClick={() => setOpen(false)}>Yhteystiedot</a>
          <a href="Yhteystiedot.html#kalenteri" onClick={() => setOpen(false)} className="btn btn-primary" style={{ marginTop: 8, alignSelf: "flex-start" }}>Varaa tapaaminen</a>
        </div>
      )}
    </header>
  );
}

window.Header = Header;

// CSS injected once
if (!document.getElementById("hdr-css")) {
  const s = document.createElement("style");
  s.id = "hdr-css";
  s.textContent = `
    .hdr {
      position: sticky; top: 0; z-index: 50;
      background: transparent;
      transition: background var(--t), border-color var(--t), backdrop-filter var(--t);
      border-bottom: 1px solid transparent;
    }
    .hdr-scrolled {
      background: rgba(250, 247, 242, .85);
      backdrop-filter: saturate(140%) blur(10px);
      -webkit-backdrop-filter: saturate(140%) blur(10px);
      border-bottom-color: var(--line);
    }
    .hdr-inner {
      display: flex; align-items: center; justify-content: space-between;
      padding-top: 18px; padding-bottom: 18px;
      gap: 24px;
    }
    .hdr-logo { display: inline-flex; align-items: center; color: var(--ink); }
    .hdr-logo-img { height: 44px; width: auto; display: block; }
    @media (min-width: 720px) { .hdr-logo-img { height: 52px; } }

    .hdr-nav { display: none; align-items: center; gap: 6px; }
    @media (min-width: 960px) { .hdr-nav { display: inline-flex; } }
    .hdr-nav-item { position: relative; }
    .hdr-nav-btn, .hdr-nav-link {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 10px 14px;
      font-size: 15px; font-weight: 500; color: var(--ink);
      border-radius: 6px;
      transition: background var(--t), color var(--t);
    }
    .hdr-nav-btn:hover, .hdr-nav-link:hover { background: rgba(31, 41, 55, .04); }
    .hdr-dropdown {
      position: absolute; top: calc(100% - 4px); left: 0;
      min-width: 240px;
      background: var(--bg);
      border: 1px solid var(--line);
      border-radius: 10px;
      padding: 8px;
      box-shadow: 0 12px 32px -16px rgba(31, 41, 55, .25);
    }
    .hdr-dropdown-item {
      display: block;
      padding: 10px 12px;
      font-size: 14px;
      color: var(--ink);
      border-radius: 6px;
      transition: background var(--t);
    }
    .hdr-dropdown-item:hover { background: var(--bg-2); }

    .hdr-actions { display: inline-flex; align-items: center; gap: 12px; }
    .hdr-cta { padding: 12px 22px; font-size: 15px; }
    .hdr-burger { display: inline-flex; padding: 10px; border-radius: 6px; }
    .hdr-burger:hover { background: rgba(31, 41, 55, .06); }
    @media (min-width: 960px) {
      .hdr-burger { display: none; }
    }
    @media (max-width: 720px) {
      .hdr-cta { display: none; }
    }

    .hdr-mobile {
      display: flex; flex-direction: column; gap: 4px;
      padding: 8px 24px 24px;
      border-top: 1px solid var(--line);
      background: var(--bg);
    }
    .hdr-mobile a {
      padding: 14px 4px;
      font-size: 16px;
      font-weight: 500;
      border-bottom: 1px solid var(--line);
    }
    .hdr-mobile a:last-child { border-bottom: 0; }
  `;
  document.head.appendChild(s);
}