/* ============================================================
   AfricaMart — Home page
   ============================================================ */
function HomePage({ nav, currency }) {
  const [q, setQ] = useState("");
  const [cat, setCat] = useState("");
  const [country, setCountry] = useState("");

  const doSearch = () => nav("browse", { q, cat, country });

  const featured = AM.SUPPLIERS.filter(s => s.verified).slice(0, 4);
  const trending = AM.PRODUCTS.slice(0, 4);

  return (
    <div className="route-anim">
      {/* HERO */}
      <section style={{ background: "linear-gradient(160deg, var(--navy-800) 0%, var(--navy-700) 55%, var(--navy-600) 100%)", color: "#fff", position: "relative", overflow: "hidden" }}>
        <div style={{ position: "absolute", inset: 0, opacity: .5,
          backgroundImage: "linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px)",
          backgroundSize: "44px 44px" }} />
        <div style={{ position: "absolute", top: -120, right: -80, width: 420, height: 420, borderRadius: "50%", background: "radial-gradient(circle, rgba(232,184,75,.22), transparent 70%)" }} />
        <div className="wrap" style={{ position: "relative", padding: "76px 24px 88px" }}>
          <div style={{ maxWidth: 780 }}>
            <span className="ai-chip" style={{ background: "rgba(255,255,255,.1)", color: "var(--gold-400)" }}>
              <Icon name="sparkles" size={13} /> AI Smart Search — describe what you need
            </span>
            <h1 style={{ fontSize: "clamp(34px, 5.2vw, 60px)", lineHeight: 1.04, marginTop: 18, color: "#fff" }}>
              Source from verified suppliers across <span style={{ color: "var(--gold-500)" }}>all 54 African countries</span>.
            </h1>
            <p style={{ fontSize: 18, color: "var(--navy-200)", marginTop: 18, maxWidth: 620, lineHeight: 1.55 }}>
              From Ethiopian coffee to Kenyan steel — connect directly with manufacturers, exporters and distributors. Request quotes, compare, and trade with confidence.
            </p>
          </div>

          {/* Search bar */}
          <div className="hero-search" style={{ marginTop: 32, background: "#fff", borderRadius: 14, padding: 8, display: "flex", gap: 8, boxShadow: "var(--sh-lg)", maxWidth: 920 }}>
            <div style={{ flex: 2, display: "flex", alignItems: "center", gap: 10, padding: "0 12px" }}>
              <Icon name="search" size={20} style={{ color: "var(--ink-400)" }} />
              <input className="hero-input" value={q} onChange={e => setQ(e.target.value)} onKeyDown={e => e.key === "Enter" && doSearch()}
                placeholder="Describe what you need — e.g. 80 MT of BS4449 rebar delivered to Nairobi"
                style={{ border: "none", outline: "none", flex: 1, fontSize: 15.5, color: "var(--ink-900)", padding: "14px 0", minWidth: 0 }} />
            </div>
            <select className="select hero-sel" value={cat} onChange={e => setCat(e.target.value)}
              style={{ border: "none", borderLeft: "1px solid var(--border)", borderRadius: 0, width: "auto", fontWeight: 600, color: "var(--ink-700)" }}>
              <option value="">All categories</option>
              {AM.CATEGORIES.map(c => <option key={c.id} value={c.id}>{c.name}</option>)}
            </select>
            <select className="select hero-sel" value={country} onChange={e => setCountry(e.target.value)}
              style={{ border: "none", borderLeft: "1px solid var(--border)", borderRadius: 0, width: "auto", fontWeight: 600, color: "var(--ink-700)" }}>
              <option value="">All countries</option>
              {AM.COUNTRIES.map(c => <option key={c.code} value={c.code}>{c.name}</option>)}
            </select>
            <button className="btn btn-gold" onClick={doSearch} style={{ padding: "0 26px" }}>Search</button>
          </div>
          <div style={{ marginTop: 16, display: "flex", gap: 10, flexWrap: "wrap", alignItems: "center" }}>
            <span style={{ fontSize: 13, color: "var(--navy-300)" }}>Popular:</span>
            {["Rebar", "Green coffee", "Cement", "HDPE pipe", "Sesame seed"].map(t => (
              <a key={t} onClick={() => nav("browse", { q: t })} style={{ cursor: "pointer", fontSize: 13, color: "var(--navy-200)", border: "1px solid rgba(255,255,255,.18)", padding: "5px 12px", borderRadius: 999 }}
                onMouseEnter={e => { e.currentTarget.style.background = "rgba(255,255,255,.1)"; }} onMouseLeave={e => { e.currentTarget.style.background = "transparent"; }}>{t}</a>
            ))}
          </div>
        </div>
      </section>

      {/* STATS BAR */}
      <section style={{ background: "var(--navy-900)", borderTop: "1px solid rgba(255,255,255,.07)" }}>
        <div className="wrap stats-bar" style={{ display: "grid", gridTemplateColumns: "repeat(4,1fr)", padding: "26px 24px" }}>
          {[["suppliers", "Verified suppliers"], ["products", "Products listed"], ["countries", "Countries covered"], ["buyers", "Active buyers"]].map(([k, label], i) => (
            <div key={k} style={{ textAlign: "center", borderLeft: i ? "1px solid rgba(255,255,255,.1)" : "none" }}>
              <div style={{ fontSize: 32, fontWeight: 800, color: "var(--gold-500)", letterSpacing: "-.02em" }}>{AM.STATS[k]}</div>
              <div style={{ fontSize: 13, color: "var(--navy-300)", marginTop: 2 }}>{label}</div>
            </div>
          ))}
        </div>
      </section>

      {/* CATEGORIES */}
      <section className="section-sm wrap">
        <SectionHead eyebrow="Browse by category" title="Every industry, one marketplace"
          action={{ label: "All categories", onClick: () => nav("browse") }} />
        <div className="cat-grid" style={{ display: "grid", gridTemplateColumns: "repeat(5,1fr)", gap: 14, marginTop: 24 }}>
          {AM.CATEGORIES.map(c => (
            <a key={c.id} className="card" onClick={() => nav("browse", { cat: c.id })} style={{ padding: 18, display: "flex", flexDirection: "column", gap: 12, cursor: "pointer", transition: "transform .16s, box-shadow .16s" }}
              onMouseEnter={e => { e.currentTarget.style.boxShadow = "var(--sh-md)"; e.currentTarget.style.transform = "translateY(-3px)"; }}
              onMouseLeave={e => { e.currentTarget.style.boxShadow = "var(--sh-sm)"; e.currentTarget.style.transform = "none"; }}>
              <CatIcon cat={c} />
              <div>
                <div style={{ fontWeight: 600, fontSize: 14.5 }}>{c.name}</div>
                <div className="muted" style={{ fontSize: 12.5, marginTop: 2 }}>{c.count.toLocaleString()} products</div>
              </div>
            </a>
          ))}
        </div>
      </section>

      {/* FEATURED SUPPLIERS */}
      <section style={{ background: "var(--white)", borderTop: "1px solid var(--border)", borderBottom: "1px solid var(--border)" }}>
        <div className="section-sm wrap">
          <SectionHead eyebrow="Featured verified suppliers" title="Trusted partners, vetted by AfricaMart"
            action={{ label: "View all suppliers", onClick: () => nav("suppliers") }} />
          <div className="card-grid-4" style={{ display: "grid", gridTemplateColumns: "repeat(4,1fr)", gap: 16, marginTop: 24 }}>
            {featured.map(s => <SupplierCard key={s.id} supplier={s} nav={nav} />)}
          </div>
        </div>
      </section>

      {/* TRENDING PRODUCTS */}
      <section className="section-sm wrap">
        <SectionHead eyebrow="Trending now" title="Most-inquired products this week"
          action={{ label: "Browse products", onClick: () => nav("browse") }} />
        <div className="card-grid-4" style={{ display: "grid", gridTemplateColumns: "repeat(4,1fr)", gap: 16, marginTop: 24 }}>
          {trending.map(p => <ProductCard key={p.id} product={p} nav={nav} cur={currency} />)}
        </div>
      </section>

      {/* TRUST */}
      <section style={{ background: "var(--navy-50)", borderTop: "1px solid var(--border)" }}>
        <div className="section wrap">
          <div style={{ textAlign: "center", maxWidth: 560, margin: "0 auto" }}>
            <span className="eyebrow">Why AfricaMart</span>
            <h2 style={{ fontSize: 34, marginTop: 10 }}>Trade across borders, with confidence</h2>
          </div>
          <div className="trust-grid" style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 22, marginTop: 40 }}>
            {[
              { icon: "badge-check", t: "Verified suppliers", d: "Every Verified and Premium supplier is vetted with trade licenses, certifications and on-site checks before listing." },
              { icon: "shield-check", t: "Secure trade", d: "Trade Assurance protects your orders end-to-end — from quotation to delivery — with transparent dispute resolution." },
              { icon: "globe", t: "Pan-Africa coverage", d: "Source and sell across all 54 countries with localized currencies, logistics partners and language support." },
            ].map(item => (
              <div key={item.t} className="card" style={{ padding: 28, textAlign: "center" }}>
                <div style={{ width: 56, height: 56, borderRadius: 14, background: "var(--gold-100)", color: "var(--gold-700)", display: "inline-flex", alignItems: "center", justifyContent: "center", marginBottom: 16 }}>
                  <Icon name={item.icon} size={26} sw={1.7} />
                </div>
                <h3 style={{ fontSize: 18 }}>{item.t}</h3>
                <p className="muted" style={{ fontSize: 14, marginTop: 8, lineHeight: 1.6 }}>{item.d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* CTA */}
      <section className="wrap section">
        <div style={{ background: "linear-gradient(120deg, var(--navy-800), var(--navy-600))", borderRadius: 22, padding: "clamp(32px,5vw,56px)", display: "flex", gap: 28, alignItems: "center", justifyContent: "space-between", flexWrap: "wrap", position: "relative", overflow: "hidden" }}>
          <div style={{ position: "absolute", right: -60, bottom: -60, width: 280, height: 280, borderRadius: "50%", background: "radial-gradient(circle, rgba(232,184,75,.18), transparent 70%)" }} />
          <div style={{ position: "relative", maxWidth: 540 }}>
            <h2 style={{ color: "#fff", fontSize: 32 }}>Sell to buyers across the continent</h2>
            <p style={{ color: "var(--navy-200)", fontSize: 16, marginTop: 12, lineHeight: 1.55 }}>List your products free, get a branded store page, and start receiving qualified inquiries within days.</p>
          </div>
          <div style={{ position: "relative", display: "flex", gap: 12, flexWrap: "wrap" }}>
            <button className="btn btn-gold btn-lg" onClick={() => nav("auth", { mode: "register", role: "supplier" })}>Become a supplier</button>
            <button className="btn btn-ghost-light btn-lg" onClick={() => nav("rfq")}>Post an RFQ</button>
          </div>
        </div>
      </section>
    </div>
  );
}

function SectionHead({ eyebrow, title, action }) {
  return (
    <div style={{ display: "flex", alignItems: "flex-end", justifyContent: "space-between", gap: 16, flexWrap: "wrap" }}>
      <div>
        <span className="eyebrow">{eyebrow}</span>
        <h2 style={{ fontSize: 28, marginTop: 8 }}>{title}</h2>
      </div>
      {action && (
        <a onClick={action.onClick} style={{ cursor: "pointer", color: "var(--navy-600)", fontWeight: 600, fontSize: 14, display: "inline-flex", alignItems: "center", gap: 5 }}>
          {action.label} <Icon name="arrow-right" size={16} />
        </a>
      )}
    </div>
  );
}

Object.assign(window, { HomePage, SectionHead });