/* global React, Icon, Button */
const { useState: useStateN, useEffect: useEffectN } = React;

const NAV = [
  { label: "About HCDI", groupLabel: "Company", items: [
    { t: "Who We Are", s: "30 years closing the distance between data and care", href: "who-we-are.html", ic: "compass" },
    { t: "Leadership", s: "The team behind the mission", href: "leadership.html", ic: "users" },
  ], feature: {
    eyebrow: "Latest research", t: "The Dove Report", ic: "fileText",
    s: "Field insights on health equity, engagement, and closing care gaps.",
    cta: "Read the report", href: "dove-report.html",
  } },
  { label: "Solutions", wide: true, groupLabel: "By audience", items: [
    { t: "Health Plans", s: "Reach the hardest-to-reach members, reduce cost", href: "health-plans.html", ic: "shieldCheck" },
    { t: "Providers & Risk-Bearing Groups", s: "Clinical transformation for value-based care", href: "providers.html", ic: "stethoscope" },
    { t: "Communities", s: "Strategic partnerships for health equity", href: "communities.html", ic: "users" },
    { t: "Government", s: "Policy-to-practice past performance", href: "government.html", ic: "landmark" },
  ], feature: {
    eyebrow: "Featured platform", t: "A.I.M. Platform", ic: "database",
    s: "The Advanced Integrated Matrix turns your data into outreach decisions.",
    cta: "Explore A.I.M.", href: "aim.html",
  } },
  { label: "The Dove Report", href: "dove-report.html" },
];

function Nav({ onContact }) {
  const [scrolled, setScrolled] = useStateN(false);
  const [open, setOpen] = useStateN(false);
  useEffectN(() => {
    const f = () => setScrolled(window.scrollY > 10);
    window.addEventListener("scroll", f); f();
    return () => window.removeEventListener("scroll", f);
  }, []);
  return (
    <React.Fragment>
      <nav className={`nav ${scrolled ? "scrolled" : ""}`}>
        <div className="wrap nav-in">
          <a href="index.html" className="nav-logo"><img src="assets/hcdi-logo.png" alt="HCDI — HealthCare Dynamics International" /></a>
          <div className="nav-links">
            {NAV.map((n) => (
              <div className="nav-item" key={n.label}>
                {n.href
                  ? <a className="nav-link" href={n.href}>{n.label}</a>
                  : <span className="nav-link">{n.label}<Icon name="chevronDown" size={15} className="chev" /></span>}
                {n.items && (
                  <div className={`mega ${n.wide ? "mega-lg" : ""}`}>
                    <div className="mega-main">
                      {n.groupLabel && <span className="mega-label">{n.groupLabel}</span>}
                      <div className="mega-grid">
                        {n.items.map((it) => (
                          <a className="mega-card" href={it.href} key={it.t}>
                            <span className="mega-tx">
                              <span className="mega-t">{it.t}</span>
                              <span className="mega-s">{it.s}</span>
                            </span>
                          </a>
                        ))}
                      </div>
                    </div>
                    {n.feature && (
                      <a className="mega-feature" href={n.feature.href}>
                        <span className="mf-eyebrow">{n.feature.eyebrow}</span>
                        <span className="mf-t">{n.feature.t}</span>
                        <span className="mf-s">{n.feature.s}</span>
                        <span className="mf-cta">{n.feature.cta}<Icon name="arrowRight" size={15} /></span>
                      </a>
                    )}
                  </div>
                )}
              </div>
            ))}
          </div>
          <div className="nav-right">
            <Button variant="grad" size="sm" onClick={onContact}>Contact Us</Button>
            <button className="nav-toggle" onClick={() => setOpen(true)} aria-label="Menu"><Icon name="menu" size={26} /></button>
          </div>
        </div>
      </nav>

      <div className={`drawer ${open ? "open" : ""}`}>
        <div className="drawer-top">
          <span className="nav-logo"><img src="assets/hcdi-logo.png" alt="HCDI" style={{ height: 34 }} /></span>
          <button className="nav-toggle" onClick={() => setOpen(false)} aria-label="Close"><Icon name="x" size={26} /></button>
        </div>
        {NAV.map((n) => (
          <div className="drawer-group" key={n.label}>
            {n.href
              ? <a className="dg-h" href={n.href} style={{ display: "block" }}>{n.label}</a>
              : <div className="dg-h">{n.label}</div>}
            {n.items && n.items.map((it) => <a key={it.t} href={it.href}>{it.t}</a>)}
          </div>
        ))}
        <div style={{ marginTop: 22 }}>
          <Button variant="grad" size="lg" onClick={() => { setOpen(false); onContact(); }}>Contact Us</Button>
        </div>
      </div>
    </React.Fragment>
  );
}

window.Nav = Nav;
window.NAV = NAV;