/* BERGFALK BLADES — shared components */
const { useState, useEffect, useRef } = React;

/* ---- Icon set (Lucide-style, 1.6px stroke) ---- */
function Icon({ name, size = 20, stroke = 1.6, fill = "none", style }) {
  const p = {
    cart: <><circle cx="9" cy="21" r="1"/><circle cx="20" cy="21" r="1"/><path d="M1 1h4l2.7 13.4a2 2 0 0 0 2 1.6h9.7a2 2 0 0 0 2-1.6L23 6H6"/></>,
    x: <><path d="M18 6 6 18M6 6l12 12"/></>,
    plus: <><path d="M12 5v14M5 12h14"/></>,
    minus: <><path d="M5 12h14"/></>,
    arrow: <><path d="M5 12h14M13 6l6 6-6 6"/></>,
    arrowUpRight: <><path d="M7 17 17 7M8 7h9v9"/></>,
    heart: <><path d="M19 14c1.5-1.5 3-3.2 3-5.5A4.5 4.5 0 0 0 12 5 4.5 4.5 0 0 0 2 8.5c0 2.3 1.5 4 3 5.5l7 7Z"/></>,
    menu: <><path d="M3 6h18M3 12h18M3 18h18"/></>,
    check: <><path d="M20 6 9 17l-5-5"/></>,
    chevron: <><path d="m6 9 6 6 6-6"/></>,
    instagram: <><rect x="2" y="2" width="20" height="20" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.5" cy="6.5" r="0.6" fill="currentColor"/></>,
    facebook: <><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/></>,
    flame: <><path d="M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z"/></>,
    truck: <><path d="M14 18V6H2v12M14 9h4l4 4v5h-6"/><circle cx="7" cy="18" r="2"/><circle cx="17" cy="18" r="2"/></>,
  }[name];
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill={fill} stroke="currentColor"
      strokeWidth={stroke} strokeLinecap="round" strokeLinejoin="round" style={style}>{p}</svg>
  );
}

function money(n) { return "$" + n.toLocaleString("en-US"); }

/* ---- Scroll reveal hook ---- */
function useReveal() {
  useEffect(() => {
    const els = document.querySelectorAll(".reveal:not(.in)");
    const io = new IntersectionObserver((ents) => {
      ents.forEach((e) => { if (e.isIntersecting) { e.target.classList.add("in"); io.unobserve(e.target); } });
    }, { threshold: 0.12, rootMargin: "0px 0px -8% 0px" });
    els.forEach((el) => io.observe(el));
    return () => io.disconnect();
  });
}

/* ---- Status tag ---- */
function StatusTag({ status }) {
  if (status === "in-stock") return <span className="tag tag-stock"><span className="dot"></span>In stock</span>;
  if (status === "made-to-order") return <span className="tag tag-mto">Made to order</span>;
  if (status === "sold") return <span className="tag tag-sold">Sold</span>;
  return null;
}

/* ---- Nav ---- */
function Nav({ route, go, cartCount, openCart }) {
  const links = [
    ["shop", "Shop"], ["maker", "The Maker"], ["process", "Process"],
    ["commission", "Commission"], ["faq", "FAQ"],
  ];
  const [open, setOpen] = useState(false);
  return (
    <nav className="nav">
      <div className="wrap-wide nav-inner">
        <button className="brand" onClick={() => go("home")} aria-label="Bergfalk Blades home">
          <img src="assets/logo-bone.png" alt="" />
          <span className="brand-txt">Bergfalk<br/>Blades</span>
        </button>
        <div className="nav-links">
          {links.map(([id, label]) => (
            <button key={id} className={"nav-link" + (route === id ? " active" : "")} onClick={() => go(id)}>{label}</button>
          ))}
        </div>
        <div className="nav-actions">
          <button className="nav-cart" onClick={openCart}>
            <Icon name="cart" size={16} />
            <span className="nav-cart-label">Cart</span>
            {cartCount > 0 && <span className="cart-count">{cartCount}</span>}
          </button>
          <button className="nav-cart nav-burger" onClick={() => setOpen(!open)} aria-label="Menu">
            <Icon name="menu" size={16} />
          </button>
        </div>
      </div>
      {open && (
        <div style={{ position: "absolute", top: "var(--nav-h)", left: 0, right: 0, background: "var(--ink)", borderBottom: "1px solid var(--soot)", padding: "var(--sp-4) var(--sp-6)", display: "flex", flexDirection: "column", gap: 4 }}>
          {links.map(([id, label]) => (
            <button key={id} className="nav-link" style={{ textAlign: "left", padding: "12px 0" }}
              onClick={() => { go(id); setOpen(false); }}>{label}</button>
          ))}
        </div>
      )}
    </nav>
  );
}

/* ---- Product card ---- */
function ProductCard({ p, go, fav, toggleFav, addToCart }) {
  const sold = p.status === "sold";
  return (
    <button className={"pcard" + (sold ? " is-sold" : "")} onClick={() => go("product", p.id)}>
      <div className="pcard-img">
        <img src={p.img} alt={p.name} loading="lazy" />
        <div className="pcard-badges">
          {p.featured && <span className="tag tag-drop">Signature</span>}
          <StatusTag status={p.status} />
        </div>
        <span className="pcard-fav" onClick={(e) => { e.stopPropagation(); toggleFav(p.id); }}>
          <Icon name="heart" size={16} fill={fav ? "var(--ember)" : "none"} style={{ color: fav ? "var(--ember)" : "var(--bone)" }} />
        </span>
      </div>
      <div className="pcard-body">
        <span className="pcard-cat">{p.cat}</span>
        <span className="pcard-name">{p.name}</span>
        <span className="pcard-steel">{p.steel}</span>
        <div className="pcard-foot">
          <span className={"price" + (sold ? " sold" : "")}>{money(p.price)}</span>
          <span className="pcard-steel" style={{ display: "inline-flex", alignItems: "center", gap: 4, color: sold ? "var(--steel-mut)" : "var(--ember)" }}>
            {sold ? "Archived" : "View"} <Icon name="arrow" size={13} />
          </span>
        </div>
      </div>
    </button>
  );
}

/* ---- Marquee ---- */
function Marquee({ items }) {
  const row = <span>{items.map((t, i) => <span key={i}>{t}</span>)}</span>;
  return (
    <div className="marquee">
      <div className="marquee-track">{row}{row}</div>
    </div>
  );
}

/* ---- Cart drawer ---- */
function CartDrawer({ open, close, items, products, setQty, removeItem, go }) {
  const lines = items.map((it) => ({ ...it, p: products.find((x) => x.id === it.id) })).filter((l) => l.p);
  const subtotal = lines.reduce((s, l) => s + l.p.price * l.qty, 0);
  const ship = lines.length ? 18 : 0;
  return (
    <>
      <div className={"scrim" + (open ? " open" : "")} onClick={close}></div>
      <aside className={"drawer" + (open ? " open" : "")} aria-hidden={!open}>
        <div className="drawer-head">
          <span className="drawer-title">Your Cart</span>
          <button className="icon-btn" onClick={close} aria-label="Close"><Icon name="x" /></button>
        </div>
        <div className="drawer-body">
          {lines.length === 0 ? (
            <div className="cart-empty">
              <Icon name="cart" size={28} style={{ color: "var(--steel-mut)", margin: "0 auto var(--sp-4)" }} />
              <p className="mono" style={{ fontSize: 12, letterSpacing: "0.08em", textTransform: "uppercase" }}>Nothing in the cart yet</p>
              <button className="btn btn-ghost" style={{ marginTop: 16 }} onClick={() => { close(); go("shop"); }}>Browse blades</button>
            </div>
          ) : lines.map((l) => (
            <div className="cart-line" key={l.id}>
              <img src={l.p.img} alt={l.p.name} />
              <div>
                <div className="cart-line-name">{l.p.name}</div>
                <div className="cart-line-cat">{l.p.cat} · {l.p.steel}</div>
                <div className="qty">
                  <button onClick={() => setQty(l.id, l.qty - 1)} aria-label="Decrease"><Icon name="minus" size={13} /></button>
                  <span>{l.qty}</span>
                  <button onClick={() => setQty(l.id, l.qty + 1)} aria-label="Increase"><Icon name="plus" size={13} /></button>
                </div>
                <button className="cart-remove" onClick={() => removeItem(l.id)}>Remove</button>
              </div>
              <div className="price" style={{ fontSize: 14 }}>{money(l.p.price * l.qty)}</div>
            </div>
          ))}
        </div>
        {lines.length > 0 && (
          <div className="drawer-foot">
            <div className="cart-total-row"><span className="lab">Subtotal</span><span className="val">{money(subtotal)}</span></div>
            <div className="cart-total-row"><span className="lab">Insured shipping</span><span className="val">{money(ship)}</span></div>
            <div className="cart-total-row grand" style={{ marginTop: 12, paddingTop: 12, borderTop: "1px solid var(--soot)" }}>
              <span className="lab">Total</span><span className="val">{money(subtotal + ship)}</span>
            </div>
            <button className="btn btn-ember btn-block btn-lg" style={{ marginTop: 20 }} onClick={() => { close(); go("checkout"); }}>
              Checkout <Icon name="arrow" size={15} />
            </button>
            <p className="mono" style={{ fontSize: 10.5, letterSpacing: "0.06em", color: "var(--steel-mut)", textAlign: "center", marginTop: 14, marginBottom: 0, textTransform: "uppercase" }}>
              Hand-forged · ships in 3–5 days
            </p>
          </div>
        )}
      </aside>
    </>
  );
}

/* ---- Footer ---- */
function Footer({ go }) {
  return (
    <footer className="footer">
      <div className="wrap-wide">
        <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr 1fr", gap: "var(--sp-7)", alignItems: "start", marginBottom: "var(--sp-9)" }} className="foot-grid">
          <div>
            <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 20 }}>
              <img src="assets/logo-bone.png" alt="" style={{ width: 40 }} />
              <span className="h2" style={{ color: "var(--bone)" }}>Bergfalk<br/>Blades</span>
            </div>
            <p className="muted" style={{ maxWidth: "34ch" }}>Hand-forged kitchen knives, hunters, and custom blades. Made one at a time in a garage in the Great Salt Lake area, Utah.</p>
            <div style={{ display: "flex", gap: 12, marginTop: 20 }}>
              <a href="https://www.instagram.com/bergfalkblades/" target="_blank" rel="noopener" className="icon-btn" style={{ border: "1px solid var(--soot-2)", padding: 10 }}><Icon name="instagram" size={18} /></a>
              <a href="https://www.facebook.com/michael.bergfalk" target="_blank" rel="noopener" className="icon-btn" style={{ border: "1px solid var(--soot-2)", padding: 10 }}><Icon name="facebook" size={18} /></a>
            </div>
          </div>
          <div>
            <div className="eyebrow muted no-rule" style={{ marginBottom: 18 }}>Shop</div>
            {[["shop", "All blades"], ["commission", "Commission"], ["process", "How it's made"], ["faq", "FAQ & shipping"]].map(([id, l]) => (
              <button key={id} className="nav-link" style={{ display: "block", textAlign: "left", padding: "7px 0" }} onClick={() => go(id)}>{l}</button>
            ))}
          </div>
          <div>
            <div className="eyebrow muted no-rule" style={{ marginBottom: 18 }}>Drop alerts</div>
            <p className="muted" style={{ fontSize: 14, maxWidth: "30ch" }}>New blades sell fast. Get a heads-up before they hit the shop.</p>
            <NewsletterMini />
          </div>
        </div>
        <div className="foot-mark">M/B</div>
        <div style={{ display: "flex", justifyContent: "space-between", flexWrap: "wrap", gap: 12, borderTop: "1px solid var(--soot)", paddingTop: "var(--sp-5)", marginTop: "var(--sp-5)" }}>
          <span className="mono" style={{ fontSize: 11, color: "var(--steel-mut)", letterSpacing: "0.06em" }}>© {new Date().getFullYear()} BERGFALK BLADES · MICHAEL BERGFALK</span>
          <span className="mono" style={{ fontSize: 11, color: "var(--steel-mut)", letterSpacing: "0.06em" }}>MAKER OF THE INDELIBLE MARK</span>
        </div>
      </div>
    </footer>
  );
}

function NewsletterMini() {
  const [v, setV] = useState(""); const [done, setDone] = useState(false);
  return done ? (
    <div className="mono" style={{ fontSize: 12, color: "var(--ember)", marginTop: 16, display: "flex", alignItems: "center", gap: 8 }}><Icon name="check" size={15} /> You're on the list.</div>
  ) : (
    <form style={{ display: "flex", marginTop: 16 }} onSubmit={(e) => { e.preventDefault(); if (v.includes("@")) setDone(true); }}>
      <input value={v} onChange={(e) => setV(e.target.value)} placeholder="you@email.com" type="email"
        style={{ flex: 1, background: "var(--char)", border: "1px solid var(--soot-2)", borderRight: 0, color: "var(--bone)", padding: "12px 14px", fontFamily: "var(--font-body)", fontSize: 14 }} />
      <button className="btn btn-ember" type="submit" style={{ padding: "0 18px" }}><Icon name="arrow" size={16} /></button>
    </form>
  );
}

Object.assign(window, { Icon, money, useReveal, StatusTag, Nav, ProductCard, Marquee, CartDrawer, Footer });