// CoolSouq Marketplace — shared chrome (top bar, header, mega search, footer).
// Composes DS primitives via window namespace. Exports to window for sibling scripts.
const NS = window.CoolSouqDesignSystem_f4ec4c;
const { Button, IconButton, Badge, VerifiedDealerBadge } = NS;

const LOGO = (
  <svg width="172" height="40" viewBox="0 0 208 48" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="CoolSouq">
    <rect width="48" height="48" rx="10" fill="#0E2A2E"></rect>
    <g stroke="#8FB81E" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round">
      <path d="M24 8 V40"></path><path d="M24 13 l-4 -4 M24 13 l4 -4"></path><path d="M24 35 l-4 4 M24 35 l4 4"></path>
      <path d="M10.1 16 L37.9 32"></path><path d="M14.4 18.5 l-5.5 -0.1 M14.4 18.5 l-0.1 5.5"></path><path d="M33.6 29.5 l5.5 0.1 M33.6 29.5 l0.1 -5.5"></path>
      <path d="M37.9 16 L10.1 32"></path><path d="M33.6 18.5 l5.5 -0.1 M33.6 18.5 l0.1 5.5"></path><path d="M14.4 29.5 l-5.5 0.1 M14.4 29.5 l-0.1 -5.5"></path>
    </g>
    <circle cx="24" cy="24" r="3" fill="#2BB0C4"></circle>
    <text x="60" y="32" fontFamily="Saira, 'Segoe UI', sans-serif" fontSize="25" fontWeight="700" letterSpacing="-0.4" fill="#15212B">Cool<tspan fill="#0E7C86">Souq</tspan></text>
  </svg>
);
const LOGO_DARK = React.cloneElement(LOGO, {},
  ...React.Children.toArray(LOGO.props.children).slice(0, -1),
  <text key="t" x="60" y="32" fontFamily="Saira, 'Segoe UI', sans-serif" fontSize="25" fontWeight="700" letterSpacing="-0.4" fill="#EFEAE0">Cool<tspan fill="#2BB0C4">Souq</tspan></text>
);

const Icon = ({ d, size = 18, fill = "none", w = 2 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill={fill} stroke="currentColor" strokeWidth={w} strokeLinecap="round" strokeLinejoin="round">{d}</svg>
);
const I = {
  search: <Icon d={<><circle cx="11" cy="11" r="7"/><path d="m21 21-4.3-4.3"/></>} />,
  heart: <Icon d={<path d="M19 21l-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"/>} />,
  user: <Icon d={<><circle cx="12" cy="8" r="4"/><path d="M4 21c0-4 4-6 8-6s8 2 8 6"/></>} />,
  cart: <Icon d={<><circle cx="9" cy="20" r="1.6"/><circle cx="18" cy="20" r="1.6"/><path d="M2 3h3l2.4 12.2a2 2 0 0 0 2 1.6h8.2a2 2 0 0 0 2-1.6L23 7H6"/></>} />,
  globe: <Icon d={<><circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3c2.5 2.5 2.5 15 0 18M12 3c-2.5 2.5-2.5 15 0 18"/></>} size={16} />,
  chevron: <Icon d={<path d="m6 9 6 6 6-6"/>} size={15} />,
  menu: <Icon d={<><path d="M3 6h18M3 12h18M3 18h18"/></>} />,
  phone: <Icon d={<path d="M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3 19.5 19.5 0 0 1-6-6 19.8 19.8 0 0 1-3-8.6A2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8.1 9.9a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.8.7a2 2 0 0 1 1.7 2Z"/>} size={15} />,
};

const CATEGORIES = ["Chillers", "VRF / VRV Systems", "Air Handling Units", "Cooling Towers", "Heat Pumps", "Dry Coolers", "Compressors", "Spare Parts"];

function TopBar() {
  return (
    <div style={{ background: "var(--slate-950)", color: "var(--text-on-dark-muted)", fontFamily: "var(--font-sans)", fontSize: 12 }}>
      <div style={{ maxWidth: 1280, margin: "0 auto", padding: "0 24px", height: 36, display: "flex", alignItems: "center", justifyContent: "space-between" }}>
        <div style={{ display: "flex", alignItems: "center", gap: 18 }}>
          <span style={{ display: "inline-flex", alignItems: "center", gap: 6 }}>{I.phone} +971 4 555 0100</span>
          <span style={{ opacity: 0.4 }}>·</span>
          <span>Mon–Fri 08:00–18:00 GST</span>
        </div>
        <div style={{ display: "flex", alignItems: "center", gap: 18 }}>
          <span style={{ display: "inline-flex", alignItems: "center", gap: 6, cursor: "pointer" }}>{I.globe} EN <span style={{ opacity: 0.5 }}>· العربية · TR</span></span>
          <span style={{ opacity: 0.4 }}>·</span>
          <span style={{ cursor: "pointer" }}>Sell equipment</span>
          <span style={{ opacity: 0.4 }}>·</span>
          <span style={{ cursor: "pointer" }}>Help center</span>
        </div>
      </div>
    </div>
  );
}

function Header({ onLogo, onSell, query = "", onQuery, onSearch, watchCount = 3 }) {
  return (
    <header style={{ background: "var(--surface-card)", borderBottom: "1px solid var(--border)", position: "sticky", top: 0, zIndex: 30 }}>
      <div style={{ maxWidth: 1280, margin: "0 auto", padding: "0 24px", height: 76, display: "flex", alignItems: "center", gap: 24 }}>
        <a onClick={onLogo} style={{ cursor: "pointer", flexShrink: 0, display: "flex" }}>{LOGO}</a>
        <form onSubmit={(e) => { e.preventDefault(); onSearch && onSearch(); }} style={{ flex: 1, maxWidth: 640, display: "flex", height: 46, border: "1.5px solid var(--border-strong)", borderRadius: "var(--radius-control)", overflow: "hidden", background: "var(--surface-card)" }}>
          <div style={{ display: "flex", alignItems: "center", gap: 7, padding: "0 14px", flexShrink: 0, borderInlineEnd: "1px solid var(--border)", color: "var(--text-muted)", fontFamily: "var(--font-sans)", fontSize: 13, cursor: "pointer" }}>
            All categories {I.chevron}
          </div>
          <input value={query} onChange={(e) => onQuery && onQuery(e.target.value)} placeholder="Search 18,400+ listings — model, brand, capacity…"
            style={{ flex: 1, border: "none", outline: "none", padding: "0 14px", fontFamily: "var(--font-sans)", fontSize: 14, color: "var(--text-strong)", background: "transparent" }} />
          <button type="submit" style={{ width: 54, border: "none", background: "var(--brand)", color: "var(--text-on-brand)", cursor: "pointer", display: "flex", alignItems: "center", justifyContent: "center" }}>{I.search}</button>
        </form>
        <div style={{ marginInlineStart: "auto", display: "flex", alignItems: "center", gap: 4 }}>
          <HeaderAction icon={I.heart} label="Watchlist" badge={watchCount} />
          <HeaderAction icon={I.user} label="Account" />
          <div style={{ marginInlineStart: 10 }}>
            <Button variant="primary" leftIcon={<span style={{ display: "inline-flex" }}>{I.cart}</span>} onClick={onSell}>Sell equipment</Button>
          </div>
        </div>
      </div>
      <nav style={{ borderTop: "1px solid var(--border-faint)" }}>
        <div style={{ maxWidth: 1280, margin: "0 auto", padding: "0 24px", height: 46, display: "flex", alignItems: "center", gap: 4, fontFamily: "var(--font-sans)", fontSize: 13.5 }}>
          <span style={{ display: "inline-flex", alignItems: "center", gap: 8, fontWeight: 600, color: "var(--text-strong)", padding: "0 14px 0 0", marginInlineEnd: 6, borderInlineEnd: "1px solid var(--border)", height: 22 }}>{I.menu} All categories</span>
          {CATEGORIES.slice(0, 6).map((c) => (
            <a key={c} style={{ padding: "0 12px", height: 46, display: "inline-flex", alignItems: "center", color: "var(--text-body)", cursor: "pointer", fontWeight: 500 }}>{c}</a>
          ))}
          <a style={{ padding: "0 12px", color: "var(--accent-ink)", cursor: "pointer", fontWeight: 600, marginInlineStart: "auto", display: "inline-flex", alignItems: "center", gap: 6 }}>Capacity calculator</a>
        </div>
      </nav>
    </header>
  );
}

function HeaderAction({ icon, label, badge }) {
  const [h, setH] = React.useState(false);
  return (
    <button onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)}
      style={{ position: "relative", display: "flex", flexDirection: "column", alignItems: "center", gap: 2, padding: "6px 12px", border: "none", background: h ? "var(--bg-sunken)" : "transparent", borderRadius: "var(--radius-md)", cursor: "pointer", color: h ? "var(--text-strong)" : "var(--text-body)", fontFamily: "var(--font-sans)", fontSize: 11, fontWeight: 500 }}>
      <span style={{ display: "inline-flex" }}>{icon}</span>
      {label}
      {badge ? <span style={{ position: "absolute", top: 2, insetInlineEnd: 6, minWidth: 16, height: 16, padding: "0 4px", background: "var(--brand)", color: "var(--text-on-brand)", borderRadius: 8, fontSize: 10, fontWeight: 700, display: "flex", alignItems: "center", justifyContent: "center" }}>{badge}</span> : null}
    </button>
  );
}

function Footer() {
  const cols = [
    { h: "Marketplace", links: ["Browse all", "Chillers", "VRF systems", "Cooling towers", "New arrivals", "Auctions"] },
    { h: "Sell", links: ["List equipment", "Dealer accounts", "Pricing & fees", "Seller protection", "Logistics partners"] },
    { h: "Company", links: ["About CoolSouq", "Verified dealer program", "Press", "Careers", "Contact"] },
    { h: "Support", links: ["Help center", "Buyer protection", "Inspection service", "Shipping & customs", "Returns"] },
  ];
  return (
    <footer className="theme-dark" style={{ background: "var(--slate-950)", color: "var(--text-on-dark-muted)", fontFamily: "var(--font-sans)" }}>
      <div style={{ maxWidth: 1280, margin: "0 auto", padding: "52px 24px 0" }}>
        <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr 1fr 1fr 1fr", gap: 36 }}>
          <div>
            <div style={{ marginBottom: 16 }}>{LOGO_DARK}</div>
            <p style={{ fontSize: 13, lineHeight: 1.6, color: "var(--text-on-dark-muted)", maxWidth: 260, margin: 0 }}>The Middle East marketplace for industrial HVAC & cooling equipment. New, used and refurbished — from verified dealers across MENA, Europe and Türkiye.</p>
            <div style={{ marginTop: 18 }}><VerifiedDealerBadge name="2,400+ verified dealers" deals={48000} country="AE" size="sm" /></div>
          </div>
          {cols.map((c) => (
            <div key={c.h}>
              <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: "0.08em", textTransform: "uppercase", color: "var(--paper)", marginBottom: 14 }}>{c.h}</div>
              <ul style={{ listStyle: "none", margin: 0, padding: 0, display: "flex", flexDirection: "column", gap: 9 }}>
                {c.links.map((l) => <li key={l} style={{ fontSize: 13, cursor: "pointer" }}>{l}</li>)}
              </ul>
            </div>
          ))}
        </div>
        <div style={{ marginTop: 44, padding: "20px 0", borderTop: "1px solid var(--border-dark)", display: "flex", alignItems: "center", justifyContent: "space-between", fontSize: 12.5 }}>
          <span>© 2026 CoolSouq FZ-LLC · Dubai · Istanbul · Riyadh</span>
          <div style={{ display: "flex", gap: 20 }}>
            <span style={{ cursor: "pointer" }}>Terms</span><span style={{ cursor: "pointer" }}>Privacy</span><span style={{ cursor: "pointer" }}>Cookies</span>
            <span style={{ display: "inline-flex", alignItems: "center", gap: 6 }}>{I.globe} English (UAE)</span>
          </div>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { CS_LOGO: LOGO, CS_LOGO_DARK: LOGO_DARK, CS_I: I, CS_Icon: Icon, CS_CATEGORIES: CATEGORIES, TopBar, Header, HeaderAction, Footer });