// Boutique — filtres + grille produits (téléphones, laptops, accessoires)
const { Eyebrow, Chip, ProductCard, WaButton } = window.ZedPhoneDesignSystem_1174ff;

const SHOP_PRODUCTS = [
  { id: 1, cat: "telephone", brand: "Apple", model: "iPhone 15 Pro", specs: "256 Go · Titane Naturel", condition: "neuf", price: "145 000", icon: "smartphone" },
  { id: 2, cat: "telephone", brand: "Apple", model: "iPhone 14 Pro Max", specs: "256 Go · Violet Foncé", condition: "garanti", price: "98 000", icon: "smartphone" },
  { id: 3, cat: "telephone", brand: "Apple", model: "iPhone 13", specs: "128 Go · Minuit", condition: "garanti", price: "62 000", icon: "smartphone" },
  { id: 4, cat: "telephone", brand: "Samsung", model: "Galaxy S24", specs: "256 Go · Phantom Black", condition: "neuf", price: "118 000", icon: "smartphone" },
  { id: 5, cat: "telephone", brand: "Samsung", model: "Galaxy A55", specs: "128 Go · Bleu Marine", condition: "neuf", price: "48 000", icon: "smartphone" },
  { id: 6, cat: "telephone", brand: "Xiaomi", model: "Redmi Note 13 Pro", specs: "256 Go · Midnight Black", condition: "neuf", price: "38 000", icon: "smartphone" },
  { id: 7, cat: "laptop", brand: "Apple", model: "MacBook Air M2", specs: "8 / 256 Go", condition: "garanti", price: "Sur devis", icon: "laptop_mac" },
  { id: 8, cat: "laptop", brand: "HP", model: "HP Pavilion 15", specs: "i5 12e gén · 16 / 512 Go", condition: "neuf", price: "Sur devis", icon: "laptop_mac" },
  { id: 9, cat: "laptop", brand: "Lenovo", model: "ThinkPad T14", specs: "i7 · 16 / 512 Go", condition: "garanti", price: "Sur devis", icon: "laptop_mac" },
  { id: 10, cat: "accessoire", brand: "Accessoires", model: "Coques & Verres Trempés", specs: "Tous modèles", condition: "neuf", price: "Dès 500", icon: "phone_iphone" },
  { id: 11, cat: "accessoire", brand: "Accessoires", model: "Chargeurs & Câbles", specs: "Certifiés", condition: "neuf", price: "Dès 800", icon: "cable" },
  { id: 12, cat: "accessoire", brand: "Accessoires", model: "Écouteurs & Audio", specs: "Bluetooth · Filaire", condition: "neuf", price: "Dès 1 500", icon: "headphones" },
];

const CATS = [
  { id: "all", label: "Tout" },
  { id: "telephone", label: "Téléphones" },
  { id: "laptop", label: "Laptops" },
  { id: "accessoire", label: "Accessoires" },
];

function ShopScreen() {
  const [cat, setCat] = React.useState("all");
  const filtered = SHOP_PRODUCTS.filter((p) => cat === "all" || p.cat === cat);

  return (
    <div>
      <section className="zps-container zps-section-sm">
        <Eyebrow>Zed Phone</Eyebrow>
        <div style={{ display: "flex", flexWrap: "wrap", alignItems: "flex-end", justifyContent: "space-between", gap: 12 }}>
          <div>
            <h1 className="zps-h1">La Boutique</h1>
            <p style={{ color: "var(--text-2)", maxWidth: 480, margin: "8px 0 0" }}>
              Chaque appareil est inspecté, testé et vendu avec garantie. Pas de mauvaises surprises.
            </p>
          </div>
          <span style={{ display: "inline-flex", alignItems: "center", gap: 6, fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--accent)" }}>
            <span className="material-symbols-outlined zp-fill" style={{ fontSize: 16 }}>verified</span>
            Testé &amp; Garanti
          </span>
        </div>
      </section>

      <section className="zps-container" style={{ paddingBottom: 16 }}>
        <div style={{ display: "flex", gap: 8, flexWrap: "wrap", alignItems: "center" }}>
          {CATS.map((c) => (
            <Chip key={c.id} active={cat === c.id} onClick={() => setCat(c.id)}>{c.label}</Chip>
          ))}
          <span style={{ marginLeft: "auto", fontFamily: "var(--font-mono)", fontSize: 10, color: "var(--text-3)" }}>
            {filtered.length} article{filtered.length > 1 ? "s" : ""}
          </span>
        </div>
      </section>

      <section className="zps-container zps-section-sm" style={{ paddingTop: 0 }}>
        <div className="zps-products">
          {filtered.map((p) => (
            <ProductCard key={p.id} model={p.model} specs={p.specs} price={p.price} condition={p.condition} icon={p.icon} slotId={"prod-" + p.id} />
          ))}
        </div>
      </section>

      <section className="zps-band">
        <div className="zps-container" style={{ display: "flex", flexWrap: "wrap", alignItems: "center", justifyContent: "space-between", gap: 16, padding: "28px var(--margin-mobile)" }}>
          <div style={{ flex: 1, minWidth: 240 }}>
            <p style={{ margin: 0, fontFamily: "var(--font-display)", fontWeight: 600, fontSize: 19 }}>Tu ne trouves pas ce que tu cherches ?</p>
            <p style={{ margin: "4px 0 0", fontSize: 13.5, color: "var(--text-2)" }}>On peut sourcer n'importe quel modèle. Envoie-nous ta demande.</p>
          </div>
          <WaButton message="Bonjour Zed Phone 👋, je cherche un modèle spécifique, vous pouvez m'aider ?">Demande personnalisée</WaButton>
        </div>
      </section>
    </div>
  );
}

window.ShopScreen = ShopScreen;