/* global React */
const { useState: useNavState } = React;

const SVC_ITEMS = [
  "Voter Intelligence",
  "Ground Operations",
  "Digital Campaigns",
  "Strategic Communication",
];

const NAV_ITEMS = [
  { id: "story",   label: "Services", hasDropdown: true },
  { id: "work",    label: "Work"      },
  { id: "impact",  label: "Impact"    },
  { id: "press",   label: "Press"     },
  { id: "regions", label: "Our Reach" },
];

const Nav = ({ onJoin, onContact }) => {
  const [open, setOpen] = useNavState(false);
  const [svcOpen, setSvcOpen] = useNavState(false);

  const scrollTo = (id) => {
    const el = document.getElementById(id);
    if (el) el.scrollIntoView({ behavior: "smooth", block: "start" });
    setOpen(false);
  };

  return (
    <header style={{
      position: "sticky", top: 0, zIndex: 50,
      background: "rgba(12, 26, 40, 0.97)",
      backdropFilter: "blur(20px) saturate(180%)",
      WebkitBackdropFilter: "blur(20px) saturate(180%)",
      borderBottom: "1px solid rgba(11, 110, 104, 0.3)"
    }}>
      {/* Teal→gold gradient accent strip */}
      <div style={{ height: 2, background: "linear-gradient(90deg, var(--peacock) 0%, var(--gold) 55%, var(--peacock) 100%)" }}/>

      <div className="nav-inner" style={{
        maxWidth: 1280, margin: "0 auto", padding: "12px 32px",
        display: "flex", alignItems: "center", justifyContent: "space-between"
      }}>
        {/* Logo */}
        <a
          href="#top"
          onClick={(e) => { e.preventDefault(); window.scrollTo({ top: 0, behavior: "smooth" }); }}
          style={{ display: "flex", alignItems: "center", gap: 14, textDecoration: "none" }}
        >
          <img
            src="./assets/logo-pravah-mark-transparent.png"
            alt="Pravah Solution"
            style={{ height: 40, width: "auto", display: "block" }}
          />
          <div>
            <div style={{
              fontFamily: "var(--font-condensed)", fontWeight: 800,
              fontSize: 20, letterSpacing: "0.1em", textTransform: "uppercase",
              color: "var(--parchment)", lineHeight: 1
            }}>Pravah Solution</div>
            <div style={{
              fontFamily: "var(--font-mono)", fontSize: 9,
              letterSpacing: "0.16em", textTransform: "uppercase",
              color: "var(--peacock-bright)", lineHeight: 1, marginTop: 3
            }}>Political & Election Consultancy</div>
          </div>
        </a>

        {/* Desktop nav links */}
        <nav className="nav-links" style={{ display: "flex", gap: 32, alignItems: "center" }}>
          {NAV_ITEMS.map(item => {
            if (item.hasDropdown) return (
              <div
                key={item.id}
                style={{ position: "relative" }}
                onMouseEnter={() => setSvcOpen(true)}
                onMouseLeave={() => setSvcOpen(false)}
              >
                <a
                  href={`#${item.id}`}
                  onClick={(e) => { e.preventDefault(); scrollTo(item.id); }}
                  style={{
                    fontFamily: "var(--font-condensed)", fontSize: 13, fontWeight: 700,
                    letterSpacing: "0.12em", textTransform: "uppercase",
                    color: svcOpen ? "var(--gold)" : "rgba(240,233,216,0.65)",
                    textDecoration: "none", transition: "color 180ms",
                    paddingBottom: 2, display: "flex", alignItems: "center", gap: 5,
                    borderBottom: `1px solid ${svcOpen ? "var(--gold)" : "transparent"}`,
                  }}
                >
                  {item.label}
                  <span style={{
                    fontSize: 8, opacity: 0.7,
                    display: "inline-block",
                    transform: svcOpen ? "rotate(180deg)" : "rotate(0deg)",
                    transition: "transform 200ms ease",
                  }}>▾</span>
                </a>
                {svcOpen && (
                  <div style={{
                    position: "absolute", top: "calc(100% + 16px)", left: "50%",
                    transform: "translateX(-50%)",
                    background: "rgba(8,18,30,0.97)",
                    border: "1px solid rgba(11,110,104,0.35)",
                    borderTop: "2px solid var(--peacock)",
                    minWidth: 234, padding: "6px 0 8px", zIndex: 200,
                    boxShadow: "0 20px 50px rgba(0,0,0,0.55)",
                    backdropFilter: "blur(20px)",
                    animation: "nav-drawer-in 150ms ease forwards",
                  }}>
                    {SVC_ITEMS.map((svc, i) => (
                      <a
                        key={i}
                        href="#story"
                        onClick={(e) => { e.preventDefault(); scrollTo("story"); setSvcOpen(false); }}
                        style={{
                          display: "flex", alignItems: "center", gap: 10,
                          padding: "9px 18px",
                          fontFamily: "var(--font-condensed)", fontSize: 11, fontWeight: 700,
                          letterSpacing: "0.1em", textTransform: "uppercase",
                          color: "rgba(240,233,216,0.6)", textDecoration: "none",
                          borderLeft: "3px solid transparent", transition: "all 140ms",
                        }}
                        onMouseEnter={(e) => {
                          e.currentTarget.style.color = "var(--gold)";
                          e.currentTarget.style.borderLeftColor = "var(--gold)";
                          e.currentTarget.style.background = "rgba(201,168,76,0.07)";
                        }}
                        onMouseLeave={(e) => {
                          e.currentTarget.style.color = "rgba(240,233,216,0.6)";
                          e.currentTarget.style.borderLeftColor = "transparent";
                          e.currentTarget.style.background = "transparent";
                        }}
                      >
                        <span style={{
                          fontFamily: "var(--font-mono)", fontSize: 8,
                          color: "var(--peacock-bright)", letterSpacing: "0.04em", flexShrink: 0
                        }}>{String(i + 1).padStart(2, "0")}</span>
                        {svc}
                      </a>
                    ))}
                  </div>
                )}
              </div>
            );
            return (
              <a
                key={item.id}
                href={`#${item.id}`}
                onClick={(e) => { e.preventDefault(); scrollTo(item.id); }}
                style={{
                  fontFamily: "var(--font-condensed)", fontSize: 13, fontWeight: 700,
                  letterSpacing: "0.12em", textTransform: "uppercase",
                  color: "rgba(240,233,216,0.65)", textDecoration: "none",
                  transition: "color 180ms", paddingBottom: 2,
                  borderBottom: "1px solid transparent"
                }}
                onMouseEnter={(e) => {
                  e.currentTarget.style.color = "var(--gold)";
                  e.currentTarget.style.borderBottomColor = "var(--gold)";
                }}
                onMouseLeave={(e) => {
                  e.currentTarget.style.color = "rgba(240,233,216,0.65)";
                  e.currentTarget.style.borderBottomColor = "transparent";
                }}
              >
                {item.label}
              </a>
            );
          })}
        </nav>

        <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
          <span className="nav-cta"><Button variant="teal" size="sm" onClick={onContact} arrow={false}>Get in touch</Button></span>
          {/* Mobile hamburger */}
          <button
            aria-label="Menu"
            onClick={() => setOpen(!open)}
            style={{
              display: "none", border: "1px solid rgba(11,110,104,0.4)",
              background: "transparent", width: 44, height: 44,
              borderRadius: 2, cursor: "pointer", color: "var(--parchment)",
              alignItems: "center", justifyContent: "center"
            }}
            className="mobile-menu-btn"
          >
            <Icon name={open ? "x" : "menu"} size={18}/>
          </button>
        </div>
      </div>

      {/* Mobile drawer */}
      {open && (
        <div className="nav-drawer" style={{
          borderTop: "1px solid rgba(11,110,104,0.3)",
          background: "var(--ink)",
          padding: "8px 24px 28px",
          display: "flex", flexDirection: "column", gap: 0
        }}>
          {NAV_ITEMS.map(item => (
            <React.Fragment key={item.id}>
              <a
                href={`#${item.id}`}
                onClick={(e) => { e.preventDefault(); scrollTo(item.id); }}
                style={{
                  fontFamily: "var(--font-condensed)", fontWeight: 700,
                  fontSize: 18, letterSpacing: "0.1em", textTransform: "uppercase",
                  color: "rgba(240,233,216,0.8)", textDecoration: "none",
                  padding: "13px 0",
                  borderBottom: item.hasDropdown ? "none" : "1px solid rgba(11,110,104,0.2)",
                  display: "flex", alignItems: "center", minHeight: 44
                }}
              >
                {item.label}
              </a>
              {item.hasDropdown && SVC_ITEMS.map((svc, i) => (
                <a
                  key={i}
                  href="#story"
                  onClick={(e) => { e.preventDefault(); scrollTo("story"); }}
                  style={{
                    fontFamily: "var(--font-condensed)", fontWeight: 600,
                    fontSize: 13, letterSpacing: "0.09em", textTransform: "uppercase",
                    color: "rgba(240,233,216,0.45)", textDecoration: "none",
                    padding: "8px 0 8px 18px",
                    borderBottom: i === SVC_ITEMS.length - 1 ? "1px solid rgba(11,110,104,0.2)" : "none",
                    display: "flex", alignItems: "center", gap: 10, minHeight: 36,
                  }}
                >
                  <span style={{
                    fontFamily: "var(--font-mono)", fontSize: 8,
                    color: "var(--peacock-bright)", letterSpacing: "0.04em", flexShrink: 0
                  }}>{String(i + 1).padStart(2, "0")}</span>
                  {svc}
                </a>
              ))}
            </React.Fragment>
          ))}
          <div style={{ paddingTop: 20 }}>
            <Button variant="teal" onClick={() => { onContact(); setOpen(false); }} arrow={false}>Get in touch</Button>
          </div>
        </div>
      )}

      <style>{`
        @media (max-width: 600px) {
          .nav-links { display: none !important; }
          .mobile-menu-btn { display: inline-flex !important; }
        }
        @keyframes nav-drawer-in {
          from { opacity: 0; transform: translateY(-8px); }
          to   { opacity: 1; transform: translateY(0); }
        }
        .nav-drawer { animation: nav-drawer-in 180ms ease forwards; }
      `}</style>
    </header>
  );
};

window.Nav = Nav;