/* BERGFALK BLADES — Home, Shop, Product */

function HomePage({ go, addToCart, favs, toggleFav }) {
  useReveal();
  const P = window.BERGFALK.PRODUCTS;
  const featured = P.filter((p) => p.featured);
  const inStock = P.filter((p) => p.status === "in-stock" && !p.featured).slice(0, 6);
  const cats = [
    { id: "Kitchen", t: "Kitchen", d: "Gyutos, santokus, slicers", img: "assets/knives/b12.png" },
    { id: "Hunting & EDC", t: "Hunting & EDC", d: "Hunters, bowies, everyday carry", img: "assets/knives/a03.png" },
    { id: "Bushcraft", t: "Bushcraft", d: "Scandi grinds, built to be beaten", img: "assets/knives/a11.png" },
  ];
  return (
    <main>
      {/* HERO */}
      <section style={{ position: "relative", minHeight: "calc(100vh - var(--nav-h))", display: "flex", alignItems: "flex-end", overflow: "hidden" }}>
        <img src="assets/maker/shop-wide.jpg" alt="Michael Bergfalk in his shop"
          style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", objectPosition: "center 30%" }} />
        <div style={{ position: "absolute", inset: 0, background: "linear-gradient(180deg, rgba(14,13,12,0.55) 0%, rgba(14,13,12,0.2) 35%, rgba(14,13,12,0.85) 88%, var(--black) 100%)" }}></div>
        <div className="wrap-wide" style={{ position: "relative", paddingBottom: "var(--sp-10)", paddingTop: "var(--sp-9)", width: "100%" }}>
          <div className="hero-col">
            <div className="eyebrow" style={{ marginBottom: "var(--sp-5)" }}>Hand-forged in Utah · maker of the indelible mark</div>
            <h1 className="hero-t" style={{ color: "var(--bone)", marginBottom: "var(--sp-5)" }}>
              Forged to<br/>outlive you
            </h1>
            <p className="lede" style={{ color: "var(--bone)", opacity: 0.9, marginBottom: "var(--sp-7)" }}>
              One smith. One hammer. Carbon and stainless blades shaped for the kitchen, the field, and the work in between — each one signed with the M/B mark and built to be used hard for a lifetime.
            </p>
            <div style={{ display: "flex", gap: "var(--sp-4)", flexWrap: "wrap" }}>
              <button className="btn btn-ember btn-lg" onClick={() => go("shop")}>Shop the blades <Icon name="arrow" size={16} /></button>
              <button className="btn btn-ghost btn-lg" onClick={() => go("commission")}>Commission a knife</button>
            </div>
          </div>
        </div>
      </section>

      <Marquee items={["1084 Carbon", "AEB-L Stainless", "Desert Ironwood", "80CrV2", "Forced Patina", "52100", "Hand-Rubbed Satin", "Curly Maple", "Mirror Polish"]} />

      {/* SIGNATURE */}
      <section className="section">
        <div className="wrap-wide">
          <div className="reveal" style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", flexWrap: "wrap", gap: 16, marginBottom: "var(--sp-7)" }}>
            <div>
              <div className="eyebrow" style={{ marginBottom: 14 }}>The signatures</div>
              <h2 className="disp" style={{ color: "var(--bone)", maxWidth: "12ch" }}>The blades people ask about</h2>
            </div>
            <button className="nav-link" style={{ paddingBottom: 8 }} onClick={() => go("shop")}>See everything →</button>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: "var(--sp-5)" }} className="feat-grid">
            {featured.map((p) => (
              <button key={p.id} className="reveal" onClick={() => go("product", p.id)}
                style={{ background: "var(--char)", border: "1px solid var(--soot)", textAlign: "left", cursor: "pointer", color: "inherit", padding: 0, display: "grid", gridTemplateColumns: "1fr 1fr", overflow: "hidden" }}>
                <div style={{ aspectRatio: "3/4", overflow: "hidden", background: "var(--ink)" }}>
                  <img src={p.img} alt={p.name} style={{ width: "100%", height: "100%", objectFit: "cover" }} />
                </div>
                <div style={{ padding: "var(--sp-6)", display: "flex", flexDirection: "column", justifyContent: "center" }}>
                  <span className="tag tag-drop" style={{ alignSelf: "flex-start", marginBottom: 14 }}>Signature</span>
                  <span className="h2" style={{ color: "var(--bone)", marginBottom: 10 }}>{p.name}</span>
                  <span className="pcard-steel" style={{ marginBottom: 14 }}>{p.steel}</span>
                  <p className="muted" style={{ fontSize: 14, marginBottom: 18 }}>{p.blurb}</p>
                  <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginTop: "auto" }}>
                    <span className="price">{money(p.price)}</span>
                    <span className="mono" style={{ fontSize: 12, color: "var(--ember)", display: "inline-flex", gap: 5, alignItems: "center", letterSpacing: "0.08em" }}>VIEW <Icon name="arrow" size={13} /></span>
                  </div>
                </div>
              </button>
            ))}
          </div>
        </div>
      </section>

      {/* CATEGORIES */}
      <section className="section-sm">
        <div className="wrap-wide">
          <div className="reveal eyebrow" style={{ marginBottom: "var(--sp-6)" }}>Find your blade</div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 1, background: "var(--soot)", border: "1px solid var(--soot)" }} className="cat-grid">
            {cats.map((c) => (
              <button key={c.id} className="reveal" onClick={() => go("shop", c.id)}
                style={{ position: "relative", aspectRatio: "5/4", border: 0, cursor: "pointer", overflow: "hidden", background: "var(--ink)", padding: 0 }}>
                <img src={c.img} alt="" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", opacity: 0.5, transition: "transform var(--dur-slow) var(--ease), opacity var(--dur)" }} className="cat-img" />
                <div style={{ position: "absolute", inset: 0, background: "linear-gradient(180deg, transparent 30%, rgba(14,13,12,0.9) 100%)" }}></div>
                <div style={{ position: "absolute", left: "var(--sp-6)", bottom: "var(--sp-6)", right: "var(--sp-6)", textAlign: "left" }}>
                  <div className="h2" style={{ color: "var(--bone)", marginBottom: 6 }}>{c.t}</div>
                  <div className="mono" style={{ fontSize: 12, color: "var(--steel)", letterSpacing: "0.06em", display: "flex", justifyContent: "space-between", alignItems: "center" }}>
                    <span>{c.d}</span><Icon name="arrowUpRight" size={16} style={{ color: "var(--ember)" }} />
                  </div>
                </div>
              </button>
            ))}
          </div>
        </div>
      </section>

      {/* IN STOCK */}
      <section className="section-sm">
        <div className="wrap-wide">
          <div className="reveal" style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", flexWrap: "wrap", gap: 16, marginBottom: "var(--sp-6)" }}>
            <div>
              <div className="eyebrow" style={{ marginBottom: 14 }}><span className="dot" style={{ width: 7, height: 7, borderRadius: 999, background: "var(--ember)", boxShadow: "0 0 8px var(--ember)" }}></span>Ready to ship</div>
              <h2 className="disp" style={{ color: "var(--bone)" }}>In stock now</h2>
            </div>
            <button className="nav-link" style={{ paddingBottom: 8 }} onClick={() => go("shop")}>Shop all →</button>
          </div>
          <div className="card-grid">
            {inStock.map((p) => <ProductCard key={p.id} p={p} go={go} fav={favs.includes(p.id)} toggleFav={toggleFav} addToCart={addToCart} />)}
          </div>
        </div>
      </section>

      {/* MAKER TEASER */}
      <section className="section">
        <div className="wrap-wide" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "var(--sp-8)", alignItems: "center" }} >
          <div className="reveal maker-teaser-img" style={{ aspectRatio: "4/5", overflow: "hidden", background: "var(--ink)", border: "1px solid var(--soot)" }}>
            <img src="assets/maker/portrait-2.jpg" alt="Michael Bergfalk" style={{ width: "100%", height: "100%", objectFit: "cover", objectPosition: "center 25%" }} />
          </div>
          <div className="reveal">
            <div className="eyebrow" style={{ marginBottom: 18 }}>The maker</div>
            <h2 className="disp" style={{ color: "var(--bone)", marginBottom: "var(--sp-5)" }}>Michael Bergfalk</h2>
            <p className="lede" style={{ marginBottom: "var(--sp-4)" }}>
              A tattooer of twenty-five years who took the same hand to steel. Colorado-raised, by way of Albuquerque and Phoenix, now forging out of a garage near the Great Salt Lake.
            </p>
            <p className="muted">
              The philosophy is the same as the tattoos: bold, balanced, and built to last a lifetime. No two blades alike. Every one made to be carried, cut with, and handed down.
            </p>
            <button className="btn btn-ghost" style={{ marginTop: "var(--sp-5)" }} onClick={() => go("maker")}>Read his story <Icon name="arrow" size={15} /></button>
          </div>
        </div>
      </section>

      {/* COMMISSION BAND */}
      <section className="bone-bg section">
        <div className="wrap" style={{ textAlign: "center" }}>
          <div className="reveal eyebrow muted" style={{ justifyContent: "center", marginBottom: 20 }}><span></span>Built for you</div>
          <h2 className="disp reveal" style={{ color: "var(--black)", maxWidth: "18ch", margin: "0 auto var(--sp-5)" }}>Have something specific in mind?</h2>
          <p className="lede reveal" style={{ margin: "0 auto var(--sp-7)", color: "#3a352c" }}>
            Most of what leaves the shop is commissioned. Tell me the use, the steel, and the handle — I'll come back with a sketch and a quote before any steel gets hot.
          </p>
          <button className="btn btn-ember btn-lg reveal" onClick={() => go("commission")}>Start a commission <Icon name="arrow" size={16} /></button>
        </div>
      </section>
    </main>
  );
}

function ShopPage({ go, addToCart, favs, toggleFav, initialCat }) {
  useReveal();
  const P = window.BERGFALK.PRODUCTS;
  const [cat, setCat] = useState(initialCat || "All");
  const [inStockOnly, setInStockOnly] = useState(false);
  const [sort, setSort] = useState("featured");
  useEffect(() => { if (initialCat) setCat(initialCat); }, [initialCat]);

  let list = P.filter((p) => (cat === "All" || p.cat === cat) && (!inStockOnly || p.status === "in-stock"));
  if (sort === "low") list = [...list].sort((a, b) => a.price - b.price);
  else if (sort === "high") list = [...list].sort((a, b) => b.price - a.price);
  else list = [...list].sort((a, b) => (b.featured ? 1 : 0) - (a.featured ? 1 : 0));

  return (
    <main>
      <section style={{ borderBottom: "1px solid var(--soot)", padding: "var(--sp-9) 0 var(--sp-7)" }}>
        <div className="wrap-wide">
          <div className="eyebrow" style={{ marginBottom: 18, whiteSpace: "nowrap" }}>The shop · {P.length} blades</div>
          <h1 className="mega" style={{ color: "var(--bone)", marginBottom: "var(--sp-5)" }}>Every blade</h1>
          <p className="lede">Carbon and stainless, kitchen and field. What's in stock ships this week; the rest is made to order. Each one is one of a kind.</p>
        </div>
      </section>

      <div style={{ position: "sticky", top: "var(--nav-h)", zIndex: 100, background: "rgba(14,13,12,0.85)", backdropFilter: "blur(12px)", borderBottom: "1px solid var(--soot)" }}>
        <div className="wrap-wide" style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 16, padding: "var(--sp-4) var(--sp-6)", flexWrap: "wrap" }}>
          <div className="filters">
            {window.BERGFALK.CATEGORIES.map((c) => (
              <button key={c} className={"chip" + (cat === c ? " active" : "")} onClick={() => setCat(c)}>{c}</button>
            ))}
            <button className={"chip" + (inStockOnly ? " active" : "")} onClick={() => setInStockOnly(!inStockOnly)} style={{ marginLeft: 8 }}>● In stock</button>
          </div>
          <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
            <span className="mono" style={{ fontSize: 11, color: "var(--steel-mut)", letterSpacing: "0.08em" }}>SORT</span>
            <select value={sort} onChange={(e) => setSort(e.target.value)}
              style={{ background: "var(--char)", border: "1px solid var(--soot-2)", color: "var(--bone)", padding: "8px 12px", fontFamily: "var(--font-mono)", fontSize: 12, letterSpacing: "0.05em" }}>
              <option value="featured">Featured</option>
              <option value="low">Price: low to high</option>
              <option value="high">Price: high to low</option>
            </select>
          </div>
        </div>
      </div>

      <section style={{ padding: "var(--sp-7) 0 var(--sp-10)" }}>
        <div className="wrap-wide">
          {list.length === 0 ? (
            <p className="muted mono" style={{ textAlign: "center", padding: "var(--sp-9) 0", letterSpacing: "0.06em" }}>No blades match that filter.</p>
          ) : (
            <div className="card-grid cols-4">
              {list.map((p) => <ProductCard key={p.id} p={p} go={go} fav={favs.includes(p.id)} toggleFav={toggleFav} addToCart={addToCart} />)}
            </div>
          )}
        </div>
      </section>
    </main>
  );
}

function ProductPage({ id, go, addToCart, favs, toggleFav }) {
  useReveal();
  const P = window.BERGFALK.PRODUCTS;
  const p = P.find((x) => x.id === id) || P[0];
  const related = P.filter((x) => x.cat === p.cat && x.id !== p.id).slice(0, 4);
  const sold = p.status === "sold";
  const mto = p.status === "made-to-order";
  useEffect(() => { window.scrollTo(0, 0); }, [id]);

  return (
    <main>
      <div className="wrap-wide" style={{ padding: "var(--sp-5) 0", borderBottom: "1px solid var(--soot)" }}>
        <div className="mono" style={{ fontSize: 11.5, color: "var(--steel-mut)", letterSpacing: "0.08em", display: "flex", gap: 8, alignItems: "center", textTransform: "uppercase" }}>
          <button className="nav-link" style={{ padding: 0 }} onClick={() => go("shop")}>Shop</button>
          <span>/</span>
          <button className="nav-link" style={{ padding: 0 }} onClick={() => go("shop", p.cat)}>{p.cat}</button>
          <span>/</span><span style={{ color: "var(--steel)" }}>{p.name}</span>
        </div>
      </div>

      <section className="section-sm">
        <div className="wrap-wide" style={{ display: "grid", gridTemplateColumns: "1.1fr 0.9fr", gap: "var(--sp-8)", alignItems: "start" }} >
          <div style={{ position: "sticky", top: "calc(var(--nav-h) + 24px)" }} className="pdp-img">
            <div style={{ aspectRatio: "4/5", overflow: "hidden", background: "var(--ink)", border: "1px solid var(--soot)", position: "relative" }}>
              <img src={p.img} alt={p.name} style={{ width: "100%", height: "100%", objectFit: "cover", filter: sold ? "grayscale(0.6) brightness(0.75)" : "none" }} />
              <div style={{ position: "absolute", top: "var(--sp-5)", left: "var(--sp-5)", display: "flex", gap: 8 }}>
                {p.featured && <span className="tag tag-drop">Signature</span>}
                <StatusTag status={p.status} />
              </div>
            </div>
          </div>

          <div>
            <span className="pcard-cat" style={{ display: "block", marginBottom: 12 }}>{p.cat}</span>
            <h1 className="disp" style={{ color: "var(--bone)", marginBottom: "var(--sp-4)" }}>{p.name}</h1>
            <div style={{ display: "flex", alignItems: "center", gap: 18, marginBottom: "var(--sp-5)" }}>
              <span className="price" style={{ fontSize: 26 }}>{money(p.price)}</span>
              <StatusTag status={p.status} />
            </div>
            <p className="lede" style={{ fontSize: 17, marginBottom: "var(--sp-6)" }}>{p.blurb}</p>

            {!sold && (
              <div style={{ display: "flex", gap: 12, marginBottom: "var(--sp-5)" }}>
                {mto ? (
                  <button className="btn btn-ember btn-lg btn-block" onClick={() => go("commission", p.id)}>Commission this build <Icon name="arrow" size={16} /></button>
                ) : (
                  <button className="btn btn-ember btn-lg btn-block" onClick={() => addToCart(p.id)}>Add to cart — {money(p.price)}</button>
                )}
                <button className="btn btn-ghost btn-lg" onClick={() => toggleFav(p.id)} aria-label="Save" style={{ flexShrink: 0 }}>
                  <Icon name="heart" size={17} fill={favs.includes(p.id) ? "var(--ember)" : "none"} style={{ color: favs.includes(p.id) ? "var(--ember)" : "var(--bone)" }} />
                </button>
              </div>
            )}
            {sold && (
              <div style={{ marginBottom: "var(--sp-5)" }}>
                <button className="btn btn-bone btn-lg btn-block" onClick={() => go("commission", p.id)}>Commission one like it <Icon name="arrow" size={16} /></button>
              </div>
            )}

            <div style={{ display: "flex", alignItems: "center", gap: 10, color: "var(--steel-dim)", marginBottom: "var(--sp-6)" }}>
              <Icon name="truck" size={17} />
              <span className="mono" style={{ fontSize: 11.5, letterSpacing: "0.06em", textTransform: "uppercase" }}>
                {mto ? "Made to order · " + (p.specs["Lead time"] || "6–8 weeks") : "In stock · ships in 3–5 days"} · insured US shipping $18
              </span>
            </div>

            <div className="eyebrow" style={{ marginBottom: 16 }}>Specifications</div>
            <dl className="specs">
              {Object.entries(p.specs).map(([k, v]) => (
                <div className="spec" key={k}><dt>{k}</dt><dd>{v}</dd></div>
              ))}
            </dl>

            <div style={{ marginTop: "var(--sp-6)", padding: "var(--sp-5)", border: "1px solid var(--soot)", background: "var(--ink)", display: "flex", gap: 14, alignItems: "flex-start" }}>
              <Icon name="flame" size={22} style={{ color: "var(--ember)", flexShrink: 0, marginTop: 2 }} />
              <div>
                <div className="h3" style={{ color: "var(--bone)", fontSize: 15, marginBottom: 6 }}>{p.steel.includes("Carbon") ? "Carbon steel — it will patina" : "Easy-care stainless"}</div>
                <p className="muted" style={{ fontSize: 13.5, margin: 0 }}>
                  {p.steel.includes("Carbon")
                    ? "This blade will develop a gray patina with use — that's the steel protecting itself. Keep it dry, oil it now and then. See the care guide."
                    : "Low-maintenance stainless. Hand-wash and dry; it'll hold its finish for years. Never the dishwasher."}
                </p>
              </div>
            </div>
          </div>
        </div>
      </section>

      {related.length > 0 && (
        <section className="section-sm" style={{ borderTop: "1px solid var(--soot)" }}>
          <div className="wrap-wide">
            <div className="eyebrow" style={{ marginBottom: "var(--sp-6)" }}>More from {p.cat}</div>
            <div className="card-grid cols-4">
              {related.map((r) => <ProductCard key={r.id} p={r} go={go} fav={favs.includes(r.id)} toggleFav={toggleFav} addToCart={addToCart} />)}
            </div>
          </div>
        </section>
      )}
    </main>
  );
}

Object.assign(window, { HomePage, ShopPage, ProductPage });
