// CoolSouq Marketplace — Home / landing screen.
const NSh = window.CoolSouqDesignSystem_f4ec4c;

function HomeScreen({ onSearch, onOpenProduct, onBrowse }) {
  const { Button, Badge, ProductCard, VerifiedDealerBadge } = NSh;
  const products = window.CS_PRODUCTS.slice(0, 4);
  const cats = [
    ["Chillers", "1,284", "M3 3h18v4H3zM5 7v14h14V7M9 11h6M9 15h6"],
    ["VRF / VRV", "862", "M3 5h18v14H3zM7 9h2M7 13h2M13 9h4M13 13h4"],
    ["Air handling units", "540", "M2 8h20v8H2zM6 8v8M10 8v8M14 8v8M18 8v8"],
    ["Cooling towers", "318", "M5 21 7 6h10l2 15M8 6V3h8v3M9 11h6M8 16h8"],
    ["Heat pumps", "476", "M4 4h16v16H4zM9 9l6 6M15 9l-6 6"],
    ["Compressors", "1,090", "M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18zM12 8v4l3 2"],
  ];
  return (
    <div>
      {/* HERO */}
      <section className="theme-dark" style={{ background: "linear-gradient(150deg, var(--slate-950) 0%, var(--slate-900) 55%, #1a2c38 100%)", color: "var(--paper)", position: "relative", overflow: "hidden" }}>
        <div aria-hidden style={{ position: "absolute", inset: 0, opacity: 0.06, backgroundImage: "repeating-linear-gradient(90deg, #fff 0 1px, transparent 1px 40px), repeating-linear-gradient(0deg, #fff 0 1px, transparent 1px 40px)" }} />
        <div style={{ maxWidth: 1280, margin: "0 auto", padding: "64px 24px 56px", position: "relative", display: "grid", gridTemplateColumns: "1.1fr 0.9fr", gap: 40, alignItems: "center" }}>
          <div>
            <span style={{ display: "inline-flex", alignItems: "center", gap: 8, padding: "5px 12px", border: "1px solid var(--border-dark)", borderRadius: 100, fontFamily: "var(--font-sans)", fontSize: 12, fontWeight: 600, letterSpacing: "0.04em", color: "var(--gold-300)", background: "rgba(201,162,39,0.08)" }}>
              <span style={{ width: 6, height: 6, borderRadius: 3, background: "var(--accent)" }} /> 2,400+ verified dealers · MENA · EU · TR
            </span>
            <h1 style={{ fontFamily: "var(--font-display)", fontSize: 52, lineHeight: 1.04, fontWeight: 700, letterSpacing: "-0.025em", margin: "20px 0 0" }}>
              The marketplace for<br/>industrial <span style={{ color: "var(--gold-400)" }}>cooling</span> equipment
            </h1>
            <p style={{ fontFamily: "var(--font-sans)", fontSize: 17, lineHeight: 1.6, color: "var(--text-on-dark-muted)", maxWidth: 480, marginTop: 18 }}>
              Source new, used and refurbished chillers, VRF systems and air handling units from trusted dealers. Compare specs, request quotes, ship anywhere.
            </p>
            <div style={{ display: "flex", gap: 12, marginTop: 26 }}>
              <Button size="lg" onClick={onBrowse}>Browse 18,400+ listings</Button>
              <Button size="lg" variant="secondary" style={{ background: "transparent", color: "var(--paper)", borderColor: "var(--border-strong)" }}>List your equipment</Button>
            </div>
            <div style={{ display: "flex", gap: 32, marginTop: 38 }}>
              {[["18,400+", "live listings"], ["52", "countries shipped"], ["€ 0", "to list & browse"]].map(([n, l]) => (
                <div key={l}>
                  <div style={{ fontFamily: "var(--font-mono)", fontSize: 26, fontWeight: 600, color: "var(--paper)" }}>{n}</div>
                  <div style={{ fontFamily: "var(--font-sans)", fontSize: 12.5, color: "var(--text-on-dark-muted)", textTransform: "uppercase", letterSpacing: "0.06em", marginTop: 2 }}>{l}</div>
                </div>
              ))}
            </div>
          </div>
          {/* hero card */}
          <div style={{ background: "var(--surface-card)", borderRadius: "var(--radius-xl)", padding: 8, boxShadow: "var(--shadow-xl)" }}>
            <ProductCard {...window.CS_PRODUCTS[1]} onCta={() => onOpenProduct(window.CS_PRODUCTS[1])} onCompare={null} style={{ border: "none", boxShadow: "none" }} />
          </div>
        </div>
      </section>

      {/* CATEGORY STRIP */}
      <section style={{ background: "var(--surface-card)", borderBottom: "1px solid var(--border)" }}>
        <div style={{ maxWidth: 1280, margin: "0 auto", padding: "28px 24px", display: "grid", gridTemplateColumns: "repeat(6, 1fr)", gap: 14 }}>
          {cats.map(([name, n, path]) => (
            <button key={name} onClick={onBrowse} style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 10, padding: "20px 8px", border: "1px solid var(--border)", borderRadius: "var(--radius-lg)", background: "var(--surface-card)", cursor: "pointer", transition: "var(--t-color)" }}
              onMouseEnter={e => { e.currentTarget.style.borderColor = "var(--brand)"; e.currentTarget.style.background = "var(--surface-brand-tint)"; }}
              onMouseLeave={e => { e.currentTarget.style.borderColor = "var(--border)"; e.currentTarget.style.background = "var(--surface-card)"; }}>
              <svg width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="var(--slate-700)" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><path d={path}/></svg>
              <div style={{ fontFamily: "var(--font-sans)", fontSize: 13, fontWeight: 600, color: "var(--text-strong)", textAlign: "center" }}>{name}</div>
              <div style={{ fontFamily: "var(--font-mono)", fontSize: 11.5, color: "var(--text-muted)" }}>{n} listings</div>
            </button>
          ))}
        </div>
      </section>

      {/* FEATURED */}
      <section style={{ background: "var(--bg-page)" }}>
        <div style={{ maxWidth: 1280, margin: "0 auto", padding: "44px 24px 56px" }}>
          <div style={{ display: "flex", alignItems: "flex-end", justifyContent: "space-between", marginBottom: 22 }}>
            <div>
              <span className="cs-eyebrow" style={{ color: "var(--brand-ink)", fontFamily: "var(--font-sans)", fontSize: 11.5, fontWeight: 600, letterSpacing: "0.08em", textTransform: "uppercase" }}>Just listed</span>
              <h2 style={{ fontFamily: "var(--font-display)", fontSize: 28, fontWeight: 700, color: "var(--text-strong)", margin: "6px 0 0", letterSpacing: "-0.02em" }}>Featured equipment</h2>
            </div>
            <Button variant="ghost" onClick={onBrowse} rightIcon={<span style={{ display: "inline-flex" }}>{window.CS_I.chevron}</span>}>View all</Button>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 18 }}>
            {products.map(p => <ProductCard key={p.id} {...p} onCta={() => onOpenProduct(p)} onCompare={null} />)}
          </div>
        </div>
      </section>

      {/* TRUST BAND */}
      <section className="theme-dark" style={{ background: "var(--slate-900)", color: "var(--paper)" }}>
        <div style={{ maxWidth: 1280, margin: "0 auto", padding: "40px 24px", display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 28 }}>
          {[["Verified dealers", "Every seller KYC-checked and rated by buyers", "M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10Z"], ["Buyer protection", "Funds released only when you confirm delivery", "M20 7 9 18l-5-5"], ["Independent inspection", "On-site equipment checks before you commit", "M11 4a7 7 0 1 0 0 14 7 7 0 0 0 0-14zM21 21l-4.3-4.3"], ["Global logistics", "Door-to-door freight & customs across 52 countries", "M3 12h18M12 3v18"]].map(([h, s, path]) => (
            <div key={h} style={{ display: "flex", gap: 14, alignItems: "flex-start" }}>
              <span style={{ width: 38, height: 38, flexShrink: 0, borderRadius: "var(--radius-md)", border: "1px solid var(--border-dark)", color: "var(--gold-300)", display: "inline-flex", alignItems: "center", justifyContent: "center" }}>
                <svg width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d={path}/></svg>
              </span>
              <div>
                <div style={{ fontFamily: "var(--font-display)", fontSize: 15.5, fontWeight: 600, color: "var(--paper)" }}>{h}</div>
                <div style={{ fontFamily: "var(--font-sans)", fontSize: 13, lineHeight: 1.5, color: "var(--text-on-dark-muted)", marginTop: 4 }}>{s}</div>
              </div>
            </div>
          ))}
        </div>
      </section>
    </div>
  );
}
window.HomeScreen = HomeScreen;