// Chrome.jsx, TopNav + Footer

const NAV_ITEMS = [
 { id: "directory", label: "Suppliers", ja: "サプライヤー" },
 { id: "products", label: "Products", ja: "製品" },
 { id: "rfq-page", label: "RFQs", ja: "見積依頼" },
 { id: "trading-support", label: "Trading support", ja: "貿易支援" },
];

const TopNav = ({ route, onNavigate, lang, onLangToggle }) => {
 const vp = useViewport();
 const [drawerOpen, setDrawerOpen] = useState(false);
 const isActive = (id) => route === id
  || (id === "directory" && (route === "profile" || route === "directory-map"))
  || (id === "products" && route === "product-detail");

 // Auto-close drawer when crossing back to desktop
 React.useEffect(() => { if (!vp.isTabletDown) setDrawerOpen(false); }, [vp.isTabletDown]);

 const go = (page) => { onNavigate(page); setDrawerOpen(false); };

 return (
  <header style={{
   height: 64, position: "sticky", top: 0, zIndex: 50,
   background: "rgba(255,255,255,0.92)", backdropFilter: "blur(12px)",
   borderBottom: "1px solid var(--color-border)",
   paddingLeft: "var(--pad-x)", paddingRight: "var(--pad-x)",
   display: "flex", alignItems: "center", justifyContent: "space-between",
   gap: 12,
  }}>
   <div style={{ display: "flex", alignItems: "center", gap: vp.isTabletDown ? 16 : 40, minWidth: 0 }}>
    <a href="#" onClick={(e) => { e.preventDefault(); onNavigate("home"); }} style={{ display: "inline-flex", alignItems: "center", border: 0, flexShrink: 0 }}>
     <img src="assets/logo-jvfood.svg" height="44" style={{ height: vp.isMobile ? 36 : 44, width: "auto", display: "block" }} alt="JVFood"/>
    </a>
    {!vp.isTabletDown && (
     <nav style={{ display: "flex", gap: 28, fontSize: 14 }}>
      {NAV_ITEMS.map(it => (
       <a key={it.id}
         href="#"
         onClick={(e) => { e.preventDefault(); onNavigate(it.id); }}
         style={{
          padding: "22px 0",
          color: isActive(it.id) ? "var(--jv-navy-800)" : "var(--color-fg-body)",
          fontWeight: 900,
          borderBottom: isActive(it.id) ? "2px solid var(--jv-navy-800)" : "2px solid transparent",
          whiteSpace: "nowrap",
         }}>
        {lang === "ja" ? it.ja : it.label}
       </a>
      ))}
     </nav>
    )}
   </div>
   <div style={{ display: "flex", alignItems: "center", gap: vp.isMobile ? 6 : 12 }}>
    {!vp.isMobile && (
     <button onClick={onLangToggle} style={{ display: "inline-flex", alignItems: "center", gap: 6, fontSize: 12, color: "var(--color-fg-body)", padding: "6px 10px", border: "1px solid var(--color-border)", borderRadius: 6, background: "#fff", cursor: "pointer", fontFamily: "var(--font-sans)" }}>
      <img src={`assets/flag-${lang === "ja" ? "jp" : "vn"}.svg`} width="16" height="12"/>
      {lang === "ja" ? "日本語" : "English"}
     </button>
    )}
    {!vp.isTabletDown && (
     <>
      <Button variant="secondary" size="sm" onClick={() => onNavigate("login")}>Sign in</Button>
      <Button variant="primary" size="sm" onClick={() => onNavigate("membership")}>Get verified</Button>
     </>
    )}
    {vp.isTabletDown && (
     <>
      {!vp.isMobile && <Button variant="primary" size="sm" onClick={() => onNavigate("membership")}>Get verified</Button>}
      <button
       onClick={() => setDrawerOpen(true)}
       aria-label="Open menu"
       style={{
        width: 40, height: 40, display: "inline-flex", alignItems: "center", justifyContent: "center",
        background: "transparent", border: "1px solid var(--color-border)", borderRadius: 6, cursor: "pointer",
        color: "var(--jv-navy-800)",
       }}>
       <Icon name="menu" size={20}/>
      </button>
     </>
    )}
   </div>

   {/* Drawer (mobile / tablet) */}
   {vp.isTabletDown && (
    <>
     <div className="jv-drawer-scrim" data-open={drawerOpen ? "true" : "false"} onClick={() => setDrawerOpen(false)}/>
     <aside className="jv-drawer" data-open={drawerOpen ? "true" : "false"} aria-hidden={!drawerOpen}>
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "18px 22px", borderBottom: "1px solid var(--color-border)" }}>
       <img src="assets/logo-jvfood.svg" height="32" style={{ height: 32, width: "auto" }} alt="JVFood"/>
       <button onClick={() => setDrawerOpen(false)} aria-label="Close menu" style={{ background: "transparent", border: 0, padding: 6, cursor: "pointer", color: "var(--color-fg-muted)" }}>
        <Icon name="x" size={20}/>
       </button>
      </div>
      <nav style={{ display: "flex", flexDirection: "column", padding: "12px 12px 16px" }}>
       {NAV_ITEMS.map(it => (
        <a key={it.id}
         href="#"
         onClick={(e) => { e.preventDefault(); go(it.id); }}
         style={{
          padding: "14px 14px",
          color: isActive(it.id) ? "var(--jv-navy-800)" : "var(--color-fg-body)",
          fontWeight: isActive(it.id) ? 600 : 500,
          fontSize: 16,
          background: isActive(it.id) ? "var(--jv-navy-50)" : "transparent",
          borderRadius: 6,
          border: 0,
          display: "flex", alignItems: "center", justifyContent: "space-between",
         }}>
         <span>{lang === "ja" ? it.ja : it.label}</span>
         <Icon name="chevron-right" size={16} color="var(--color-fg-muted)"/>
        </a>
       ))}
      </nav>
      <div style={{ marginTop: "auto", padding: "20px 22px", borderTop: "1px solid var(--color-border)", display: "flex", flexDirection: "column", gap: 12 }}>
       <button onClick={() => { onLangToggle(); }} style={{ display: "inline-flex", alignItems: "center", gap: 8, fontSize: 13, color: "var(--color-fg-body)", padding: "10px 12px", border: "1px solid var(--color-border)", borderRadius: 6, background: "#fff", cursor: "pointer", fontFamily: "var(--font-sans)", alignSelf: "flex-start" }}>
        <img src={`assets/flag-${lang === "ja" ? "jp" : "vn"}.svg`} width="18" height="13"/>
        {lang === "ja" ? "日本語" : "English"}
       </button>
       <div style={{ display: "flex", gap: 8 }}>
        <Button variant="secondary" size="md" onClick={() => go("login")} style={{ flex: 1, justifyContent: "center" }}>Sign in</Button>
        <Button variant="primary" size="md" onClick={() => go("membership")} style={{ flex: 1, justifyContent: "center" }}>Get verified</Button>
       </div>
      </div>
     </aside>
    </>
   )}
  </header>
 );
};

const Footer = ({ onNavigate = () => {} }) => {
 const vp = useViewport();
 const cols = [
  { h: "Marketplace", items: [["Suppliers","directory"], ["Products","products"], ["RFQs","rfq-page"], ["By location","directory-map"]] },
  { h: "Trust", items: [["Verification","membership"], ["Audits","membership"], ["Premium tier","membership"], ["Trade insurance","trading-support"]] },
  { h: "Resources", items: [["Trading support","trading-support"], ["Trade guide","trading-support"], ["HS code lookup","trading-support"], ["Glossary","trading-support"]] },
  { h: "Company", items: [["About","about"], ["Contact","contact"], ["Careers","about"], ["Press","about"]] },
 ];
 // Brand block + 4 link columns. Desktop: 2fr 1fr 1fr 1fr 1fr.
 // Tablet: stack brand full-width on top, 4 link cols below.
 // Mobile: brand on top, 2-col link grid below.
 const gridTemplateColumns = vp.isWide
  ? "2fr 1fr 1fr 1fr 1fr"
  : vp.isDesktop
   ? "1.5fr 1fr 1fr 1fr 1fr"
   : "1fr";

 return (
  <footer style={{ background: "var(--jv-navy-900)", color: "var(--color-fg-on-inverse)", paddingTop: 64, paddingBottom: 40, paddingLeft: "var(--pad-x)", paddingRight: "var(--pad-x)", marginTop: 80 }}>
   <div style={{ maxWidth: 1280, margin: "0 auto" }}>
    {vp.isDesktop ? (
     <div style={{ display: "grid", gridTemplateColumns, gap: 40, paddingBottom: 48, borderBottom: "1px solid var(--color-border-inverse)" }}>
      <div>
       <img src="assets/logo-jvfood-inverse.svg" height="36" style={{ height: 36, width: "auto", display: "block" }} alt="JVFood"/>
       <p style={{ marginTop: 16, color: "var(--color-fg-on-inverse-muted)", fontSize: 14, lineHeight: 1.6, maxWidth: 280 }}>
        Verified B2B trade infrastructure connecting Vietnam and Japan in food, seafood, and food manufacturing.
       </p>
      </div>
      {cols.map((col, i) => (
       <FooterCol key={i} col={col} onNavigate={onNavigate}/>
      ))}
     </div>
    ) : (
     <div style={{ paddingBottom: 40, borderBottom: "1px solid var(--color-border-inverse)" }}>
      <img src="assets/logo-jvfood-inverse.svg" height="32" style={{ height: 32, width: "auto", display: "block" }} alt="JVFood"/>
      <p style={{ marginTop: 14, color: "var(--color-fg-on-inverse-muted)", fontSize: 14, lineHeight: 1.6, maxWidth: 420 }}>
       Verified B2B trade infrastructure connecting Vietnam and Japan in food, seafood, and food manufacturing.
      </p>
      <div style={{ marginTop: 36, display: "grid", gridTemplateColumns: vp.isMobile ? "1fr 1fr" : "repeat(4, 1fr)", gap: vp.isMobile ? 28 : 32 }}>
       {cols.map((col, i) => (
        <FooterCol key={i} col={col} onNavigate={onNavigate}/>
       ))}
      </div>
     </div>
    )}
    <div style={{ paddingTop: 24, display: "flex", justifyContent: "space-between", color: "var(--color-fg-on-inverse-muted)", fontSize: 12, gap: 16, flexWrap: "wrap" }}>
     <div>© 2026 JVFood Inc. All rights reserved.</div>
     <div style={{ display: "flex", gap: vp.isMobile ? 14 : 18, flexWrap: "wrap" }}>
      <a href="#" style={{ color: "var(--color-fg-on-inverse-muted)", border: 0 }}>Terms</a>
      <a href="#" style={{ color: "var(--color-fg-on-inverse-muted)", border: 0 }}>Privacy</a>
      <a href="#" style={{ color: "var(--color-fg-on-inverse-muted)", border: 0 }}>JP 特定商取引法</a>
      <a href="#" style={{ color: "var(--color-fg-on-inverse-muted)", border: 0 }}>VN 越南法律</a>
     </div>
    </div>
   </div>
  </footer>
 );
};

const FooterCol = ({ col, onNavigate }) => (
 <div>
  <Eyebrow style={{ color: "var(--color-fg-on-inverse-muted)", marginBottom: 14 }}>{col.h}</Eyebrow>
  <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
   {col.items.map(([label, route]) => (
    <a key={label} href="#" onClick={(e) => { e.preventDefault(); onNavigate(route); }} style={{ fontSize: 14, color: "var(--color-fg-on-inverse)", border: 0 }}>{label}</a>
   ))}
  </div>
 </div>
);

Object.assign(window, { TopNav, Footer });