/* global React, Logo, WhatsAppIcon */

// Shared header: TopBar + Nav. Used on every page (home, services, …)
// — edit here only.

/* global React, Arrow, Logo, WhatsAppIcon, Plus, Check */

// ============================================================
// MenuIcon — unified icon set for nav dropdowns
// ============================================================
const MenuIcon = ({ kind }) => {
  const p = { width: 18, height: 18, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.7, strokeLinecap: "round", strokeLinejoin: "round" };
  switch (kind) {
    // ----- Services -----
    case "compass":   return <svg {...p}><circle cx="12" cy="12" r="9"/><path d="M16 8l-2 6-6 2 2-6z"/></svg>;
    case "chart":     return <svg {...p}><path d="M3 20h18"/><path d="M6 16V9M10 16v-4M14 16V6M18 16v-8"/></svg>;
    case "scales":    return <svg {...p}><path d="M12 4v16M5 8h14M3 14l4-8 4 8a4 4 0 0 1-8 0z M13 14l4-8 4 8a4 4 0 0 1-8 0z"/></svg>;

    // ----- Solutions -----
    case "cloud":     return <svg {...p}><path d="M16 19h2a4 4 0 0 0 0-8 6 6 0 0 0-11.6 1.5A3.5 3.5 0 0 0 6 19h10z"/></svg>;
    case "server":    return <svg {...p}><rect x="3" y="4" width="18" height="6" rx="1"/><rect x="3" y="14" width="18" height="6" rx="1"/><circle cx="7" cy="7" r="0.6" fill="currentColor"/><circle cx="7" cy="17" r="0.6" fill="currentColor"/></svg>;
    case "datacenter":return <svg {...p}><rect x="4" y="3" width="5" height="14"/><rect x="10" y="3" width="5" height="14"/><rect x="16" y="3" width="4" height="14"/><path d="M3 21h18M12 17v4"/></svg>;
    case "network":   return <svg {...p}><circle cx="12" cy="12" r="3"/><circle cx="5" cy="5" r="2"/><circle cx="19" cy="5" r="2"/><circle cx="5" cy="19" r="2"/><circle cx="19" cy="19" r="2"/><path d="M7 7l3 3M17 7l-3 3M7 17l3-3M17 17l-3-3"/></svg>;
    case "chip":      return <svg {...p}><rect x="7" y="7" width="10" height="10" rx="1.5"/><path d="M10 7V4M14 7V4M10 20v-3M14 20v-3M7 10H4M7 14H4M20 10h-3M20 14h-3"/></svg>;
    case "shield":    return <svg {...p}><path d="M12 3l8 3v5c0 5-4 9-8 10-4-1-8-5-8-10V6l8-3z"/><path d="M9 12l2 2 4-4"/></svg>;

    // ----- Industries -----
    case "pharma":    return <svg {...p}><rect x="3" y="9" width="18" height="6" rx="3" transform="rotate(-35 12 12)"/><path d="M9 6.5l5 5"/></svg>;
    case "health":    return <svg {...p}><path d="M3 12h4l2-4 4 8 2-4h6"/></svg>;
    case "bank":      return <svg {...p}><path d="M3 9l9-5 9 5"/><path d="M4 9v10h16V9"/><path d="M8 12v5M12 12v5M16 12v5"/><path d="M3 20h18"/></svg>;
    case "oil":       return <svg {...p}><path d="M12 3c-3 4-5 6.5-5 9.5a5 5 0 0 0 10 0c0-3-2-5.5-5-9.5z"/></svg>;
    case "bag":       return <svg {...p}><path d="M5 8h14l-1.5 9a2 2 0 0 1-2 1.7h-7a2 2 0 0 1-2-1.7L5 8z"/><path d="M9 8V6a3 3 0 0 1 6 0v2"/></svg>;
    case "factory":   return <svg {...p}><path d="M3 20V11l5 3V11l5 3V8l8 5v7H3z"/><path d="M6 17h2M11 17h2M16 17h2"/></svg>;
    case "hat":       return <svg {...p}><path d="M4 16h16v3H4z"/><path d="M6 16V9a6 6 0 0 1 12 0v7"/><path d="M12 3v3"/></svg>;
    case "truck":     return <svg {...p}><path d="M2 7h11v9H2z"/><path d="M13 10h5l3 3v3h-8"/><circle cx="6.5" cy="17.5" r="1.5"/><circle cx="17.5" cy="17.5" r="1.5"/></svg>;
    case "cash":      return <svg {...p}><rect x="3" y="7" width="18" height="11" rx="1.5"/><circle cx="12" cy="12.5" r="2.5"/><path d="M6 11v3M18 11v3"/></svg>;
    case "flask":     return <svg {...p}><path d="M10 3v6.5L5 19a2 2 0 0 0 1.7 3h10.6A2 2 0 0 0 19 19l-5-9.5V3"/><path d="M9 3h6"/></svg>;
    case "capitol":   return <svg {...p}><path d="M3 20h18"/><path d="M5 20V9l7-4 7 4v11"/><path d="M9 20v-6M15 20v-6"/><path d="M5 9h14"/></svg>;

    default: return <svg {...p}><circle cx="12" cy="12" r="3"/></svg>;
  }
};

// ============================================================
// Top announcement bar + nav
// ============================================================
const TopBar = () => (
  <div className="topbar" style={{
    position: "sticky",
    top: 0,
    zIndex: 60,
    background: "var(--ink)",
    color: "var(--cream)",
    fontSize: 13,
    padding: "10px 0",
    fontFamily: "var(--font-mono)",
    letterSpacing: "0.02em",
  }}>
    <div className="wrap topbar__wrap">
      <div className="topbar__status">
        <span className="topbar__dot" />
        <span>India's No-1 Consulting Company · Est. 2012</span>
      </div>
      <div className="topbar__meta">
        <span className="topbar__market">
          Marketplace:{" "}
          <a href="#" style={{ color: "var(--cream)", borderBottom: "1px dotted #888" }}>bigservermart.com</a>
        </span>
        <span className="topbar__sep">·</span>
        <a href="tel:+919911855111" className="topbar__phone">
          <svg className="topbar__phone-ico" width="11" height="11" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
            <path d="M21 16.42v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 3.11 1.6h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L7.09 9.51a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 21 16.42z"/>
          </svg>
          +91 99118 55111
        </a>
      </div>
    </div>

    <style>{`
      .topbar__wrap {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 24px;
        flex-wrap: nowrap;
      }
      .topbar__status,
      .topbar__meta {
        display: flex;
        align-items: center;
        gap: 14px;
        min-width: 0;
      }
      .topbar__meta { gap: 22px; color: #A1A1A8; }
      .topbar__dot {
        width: 6px; height: 6px; border-radius: 50%;
        background: #22C55E; box-shadow: 0 0 0 3px rgba(34,197,94,0.25);
        flex: 0 0 auto;
      }
      .topbar__sep { opacity: 0.5; }
      .topbar__phone {
        color: #A1A1A8;
        white-space: nowrap;
        display: inline-flex;
        align-items: center;
        gap: 6px;
      }
      .topbar__phone:hover { color: var(--cream); }
      .topbar__phone-ico { opacity: 0.8; }

      /* Tablet — shrink, drop separator, keep one line */
      @media (max-width: 900px) {
        .topbar { font-size: 11.5px !important; padding: 8px 0 !important; }
        .topbar__wrap { gap: 12px; }
        .topbar__meta { gap: 12px; }
      }

      /* Mobile — hide Marketplace + phone, center status only */
      @media (max-width: 640px) {
        .topbar { font-size: 11px !important; padding: 7px 0 !important; }
        .topbar__wrap {
          flex-direction: row;
          align-items: center;
          justify-content: center;
          gap: 0;
          text-align: center;
        }
        .topbar__status,
        .topbar__meta { justify-content: center; }
        .topbar__market,
        .topbar__sep,
        .topbar__phone { display: none; }
      }

      /* Tiny mobile — shorten status copy */
      @media (max-width: 420px) {
        .topbar__status span:last-child::before {
          content: "No-1 Consulting · Est. 2012";
        }
        .topbar__status span:last-child {
          font-size: 0;
        }
        .topbar__status span:last-child::before { font-size: 11px; }
      }
    `}</style>
  </div>
);

const Nav = () => {
  const [openMenu, setOpenMenu] = React.useState(null);
  const links = [
    { label: "Home", href: "#home" },
    { label: "Services", href: "#services", menu: [
      { name: "IT Consulting", desc: "Strategy, transformation, advisory", icon: "compass" },
      { name: "Business Empowerment", desc: "Growth, ops, GTM enablement", icon: "chart" },
      { name: "Corporate Legal", desc: "Compliance, contracts, structuring", icon: "scales" },
    ]},
    { label: "Solutions", href: "#solutions", menu: [
      { name: "Cloud", desc: "Strategy, migration & FinOps across Azure / AWS / GCP", icon: "cloud" },
      { name: "Server", desc: "Sizing, procurement & lifecycle for compute estates", icon: "server" },
      { name: "Datacenter", desc: "Colocation, on-prem modernization, DR planning", icon: "datacenter" },
      { name: "Network", desc: "LAN, WAN, SD-WAN, segmentation & observability", icon: "network" },
      { name: "IoT & Automation", desc: "Edge devices, telemetry pipelines, control logic", icon: "chip" },
      { name: "Security", desc: "Posture audits, DPDP, SOC 2 & ISO 27001 prep", icon: "shield" },
    ]},
    { label: "Industries", href: "#industries", menu: [
      { name: "Pharmaceuticals", desc: "", icon: "pharma" },
      { name: "Healthcare", desc: "", icon: "health" },
      { name: "Finance & Banking", desc: "", icon: "bank" },
      { name: "Oil & Gas", desc: "", icon: "oil" },
      { name: "eCommerce", desc: "", icon: "bag" },
      { name: "Technology & Research", desc: "", icon: "chip" },
      { name: "Manufacturing", desc: "", icon: "factory" },
      { name: "Construction", desc: "", icon: "hat" },
      { name: "Transportation", desc: "", icon: "truck" },
      { name: "Cash & Logistics", desc: "", icon: "cash" },
      { name: "Chemicals", desc: "", icon: "flask" },
      { name: "Government & Public", desc: "", icon: "capitol" },
    ], wide: true },
    { label: "Marketplace", href: "https://bigservermart.com" },
    { label: "About", href: "#about" },
  ];

  return (
    <header className="nav-header" style={{ position: "sticky", top: 40, zIndex: 50, background: "rgba(250,246,236,0.86)", backdropFilter: "blur(14px)", borderBottom: "1px solid var(--line)" }}>
      <div className="wrap nav-wrap" style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 32, height: 78 }}>
        <a href="#home" className="nav-logo" style={{ display: "inline-flex", alignItems: "center" }}>
          <Logo height={26} />
        </a>
        <nav style={{ display: "flex", alignItems: "center", gap: 4 }}>
          {links.map((l, i) => (
            <div key={i} style={{ position: "relative" }}
                 onMouseEnter={() => l.menu && setOpenMenu(i)}
                 onMouseLeave={() => setOpenMenu(null)}>
              <a href={l.href}
                 style={{
                   display: "inline-flex", alignItems: "center", gap: 6,
                   padding: "10px 14px",
                   fontSize: 14.5, fontWeight: 500,
                   color: "var(--ink-2)",
                   borderRadius: 10,
                 }}>
                {l.label}
                {l.menu && <span style={{ fontSize: 10, opacity: 0.6 }}>▾</span>}
              </a>
              {l.menu && openMenu === i && (
                <div style={{
                  position: "absolute", top: "100%", left: 0,
                  marginTop: 4, padding: 8,
                  background: "var(--paper)",
                  border: "1px solid var(--line)",
                  borderRadius: 16,
                  boxShadow: "0 24px 50px -20px rgba(24,24,27,0.18)",
                  minWidth: l.wide ? 560 : 320,
                  display: "grid",
                  gridTemplateColumns: l.wide ? "1fr 1fr" : "1fr",
                  gap: 2,
                }}>
                  {l.menu.map((m, j) => (
                    <a key={j} href="#" style={{ padding: "10px 12px", borderRadius: 10, display: "flex", alignItems: "center", gap: 12 }}
                       onMouseEnter={e => e.currentTarget.style.background = "var(--cream)"}
                       onMouseLeave={e => e.currentTarget.style.background = "transparent"}>
                      <span style={{
                        width: 36, height: 36, borderRadius: 10,
                        background: "var(--bel-blue-soft)",
                        color: "var(--bel-blue)",
                        display: "grid", placeItems: "center",
                        flexShrink: 0,
                      }}>
                        <MenuIcon kind={m.icon} />
                      </span>
                      <span style={{ display: "flex", flexDirection: "column", gap: 2, minWidth: 0 }}>
                        <span style={{ fontWeight: 600, fontSize: 14.5, color: "var(--ink)" }}>{m.name}</span>
                        {m.desc && <span style={{ fontSize: 13, color: "var(--ink-soft)", lineHeight: 1.35 }}>{m.desc}</span>}
                      </span>
                    </a>
                  ))}
                </div>
              )}
            </div>
          ))}
        </nav>
        <div className="nav-actions" style={{ display: "flex", alignItems: "center", gap: 10 }}>
          <a href="#contact" className="btn btn--ghost" style={{ height: 42, fontSize: 14 }}>
            Contact
          </a>
          <a href="#contact" className="btn btn--accent" style={{ height: 42, fontSize: 14 }}>
            <WhatsAppIcon size={14} />
            Get Expert Advice
          </a>
        </div>
      </div>

      <style>{`
        /* Mobile — hide menu + actions, center the logo */
        @media (max-width: 720px) {
          .nav-header .nav-wrap { justify-content: center !important; height: 62px !important; }
          .nav-header nav,
          .nav-header .nav-actions { display: none !important; }
          .nav-header .nav-logo { margin: 0 auto; }
        }
      `}</style>
    </header>
  );
};

Object.assign(window, { MenuIcon, TopBar, Nav });