/* BERGFALK BLADES — Maker, Process, Commission, FAQ, Checkout */

function MakerPage({ go }) {
  useReveal();
  return (
    <main>
      <section style={{ position: "relative", minHeight: "78vh", display: "flex", alignItems: "flex-end", overflow: "hidden" }}>
        <img src="assets/maker/doorway-1.jpg" alt="Michael Bergfalk in his shop"
          style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", objectPosition: "center 20%" }} />
        <div style={{ position: "absolute", inset: 0, background: "linear-gradient(180deg, rgba(14,13,12,0.45), rgba(14,13,12,0.15) 40%, var(--black))" }}></div>
        <div className="wrap-wide" style={{ position: "relative", paddingBottom: "var(--sp-9)", width: "100%" }}>
          <div className="eyebrow" style={{ marginBottom: 18 }}>The maker · since 1999</div>
          <h1 className="mega" style={{ color: "var(--bone)", maxWidth: "14ch" }}>Michael Bergfalk</h1>
        </div>
      </section>

      <section className="section">
        <div className="wrap" style={{ maxWidth: 760 }}>
          <p className="lede reveal" style={{ fontSize: 22, color: "var(--bone)", marginBottom: "var(--sp-6)" }}>
            For twenty-five years, Michael Bergfalk has been the people's tattooer — bold, balanced work made to last a lifetime. The blades come from the same hands, and the same conviction.
          </p>
          <div className="reveal">
            <p className="muted" style={{ fontSize: 16.5, lineHeight: 1.75 }}>
              He came up tattooing — Japanese Traditional and Western Traditional — starting in Albuquerque, then Phoenix, before settling near the Great Salt Lake. Colorado originality, carried everywhere he went. The maker of the indelible mark.
            </p>
            <p className="muted" style={{ fontSize: 16.5, lineHeight: 1.75 }}>
              The forge started the way a lot of good things do: as something to do with his hands when the needles were down. It turned into a second craft built on the same rules — strong lines, honest material, nothing that won't hold up. A blade, like a good tattoo, is supposed to outlast the person who made it.
            </p>
            <p className="muted" style={{ fontSize: 16.5, lineHeight: 1.75 }}>
              Today every Bergfalk blade is forged, ground, and finished by him alone in a one-man garage shop. No production line, no two alike. Just steel, fire, and the M/B mark.
            </p>
          </div>
        </div>
      </section>

      <section style={{ paddingBottom: "var(--sp-10)" }}>
        <div className="wrap-wide" style={{ display: "grid", gridTemplateColumns: "1.3fr 0.7fr", gap: 1, background: "var(--soot)", border: "1px solid var(--soot)" }} className="maker-gal">
          <div style={{ aspectRatio: "16/10", overflow: "hidden", background: "var(--ink)" }} className="reveal">
            <img src="assets/maker/shop-wide.jpg" alt="The shop" style={{ width: "100%", height: "100%", objectFit: "cover" }} />
          </div>
          <div style={{ aspectRatio: "8/10", overflow: "hidden", background: "var(--ink)" }} className="reveal">
            <img src="assets/maker/portrait-1.jpg" alt="At the bench" style={{ width: "100%", height: "100%", objectFit: "cover", objectPosition: "center 20%" }} />
          </div>
        </div>
      </section>

      <section className="bone-bg section">
        <div className="wrap" style={{ textAlign: "center" }}>
          <div className="reveal" style={{ fontFamily: "var(--font-display)", textTransform: "uppercase", fontSize: "clamp(28px,4vw,52px)", lineHeight: 1.05, color: "var(--black)", maxWidth: "20ch", margin: "0 auto var(--sp-6)" }}>
            “Bold, balanced, and built to last a lifetime — whether it's on skin or in steel.”
          </div>
          <div className="reveal" style={{ display: "flex", gap: 14, justifyContent: "center", flexWrap: "wrap" }}>
            <button className="btn btn-ember btn-lg" onClick={() => go("shop")}>Shop the blades</button>
            <button className="btn btn-ghost-dark btn-lg" onClick={() => go("commission")}>Commission a knife</button>
          </div>
        </div>
      </section>
    </main>
  );
}

function ProcessPage({ go }) {
  useReveal();
  const steps = window.BERGFALK.PROCESS;
  const imgs = { "01": "assets/knives/a00.png", "03": "assets/maker/portrait-1.jpg", "05": "assets/knives/b01.png" };
  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 }}>How a blade is made</div>
          <h1 className="mega" style={{ color: "var(--bone)", maxWidth: "16ch", marginBottom: "var(--sp-5)" }}>Steel, fire, and a lot of patience</h1>
          <p className="lede">Every knife travels the same six stages — from a cold bar of steel to a signed, sharpened blade on the stump. No shortcuts, because the shortcuts are exactly what you'd feel later.</p>
        </div>
      </section>

      <section className="section">
        <div className="wrap-wide" style={{ display: "flex", flexDirection: "column", gap: 1, background: "var(--soot)", border: "1px solid var(--soot)" }}>
          {steps.map((s) => (
            <div key={s.n} className="reveal proc-row" style={{ background: "var(--black)", display: "grid", gridTemplateColumns: imgs[s.n] ? "auto 1fr 1fr" : "auto 1fr", gap: "var(--sp-7)", padding: "var(--sp-7) var(--sp-7)", alignItems: "center" }}>
              <div className="mono" style={{ fontSize: 15, color: "var(--ember)", fontWeight: 600, letterSpacing: "0.1em", alignSelf: "flex-start" }}>{s.n}</div>
              <div>
                <h2 className="h2" style={{ color: "var(--bone)", marginBottom: 12 }}>{s.t}</h2>
                <p className="muted" style={{ fontSize: 15.5, maxWidth: "44ch", margin: 0 }}>{s.d}</p>
              </div>
              {imgs[s.n] && (
                <div className="proc-img" style={{ aspectRatio: "16/10", overflow: "hidden", background: "var(--ink)", border: "1px solid var(--soot)" }}>
                  <img src={imgs[s.n]} alt="" style={{ width: "100%", height: "100%", objectFit: "cover" }} />
                </div>
              )}
            </div>
          ))}
        </div>
      </section>

      <section className="section-sm" style={{ borderTop: "1px solid var(--soot)" }}>
        <div className="wrap" style={{ textAlign: "center" }}>
          <h2 className="disp" style={{ color: "var(--bone)", maxWidth: "16ch", margin: "0 auto var(--sp-5)" }}>Want to watch one come together for you?</h2>
          <button className="btn btn-ember btn-lg" onClick={() => go("commission")}>Commission a blade <Icon name="arrow" size={16} /></button>
        </div>
      </section>
    </main>
  );
}

function CommissionPage({ go, prefillId }) {
  useReveal();
  const P = window.BERGFALK.PRODUCTS;
  const pre = P.find((x) => x.id === prefillId);
  const [done, setDone] = useState(false);
  const [form, setForm] = useState({
    name: "", email: "", type: pre ? pre.cat : "Kitchen", steel: pre ? (pre.steel.includes("Carbon") ? "High-carbon" : "Stainless") : "Either / your call",
    handle: pre ? pre.handle : "", budget: "$300–$500", timeline: "No rush", details: pre ? `Inspired by the ${pre.name}. ` : "",
  });
  const set = (k) => (e) => setForm({ ...form, [k]: e.target.value });

  if (done) return (
    <main>
      <section className="section" style={{ minHeight: "70vh", display: "flex", alignItems: "center" }}>
        <div className="wrap" style={{ textAlign: "center", maxWidth: 640 }}>
          <div style={{ width: 64, height: 64, border: "1px solid var(--ember)", display: "flex", alignItems: "center", justifyContent: "center", margin: "0 auto var(--sp-6)", color: "var(--ember)" }}><Icon name="check" size={28} /></div>
          <div className="eyebrow" style={{ justifyContent: "center", marginBottom: 18 }}>Request received</div>
          <h1 className="disp" style={{ color: "var(--bone)", marginBottom: "var(--sp-5)" }}>Let's build something</h1>
          <p className="lede" style={{ margin: "0 auto var(--sp-7)" }}>Thanks, {form.name ? form.name.split(" ")[0] : "friend"}. Michael will look this over and reply within a few days with a sketch, a quote, and a deposit invoice. Nothing's locked until you approve it.</p>
          <button className="btn btn-ghost btn-lg" onClick={() => go("shop")}>Browse the shop while you wait</button>
        </div>
      </section>
    </main>
  );

  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 }}>Commission a blade</div>
          <h1 className="mega" style={{ color: "var(--bone)", maxWidth: "20ch", marginBottom: "var(--sp-6)" }}>Built to your hand</h1>
          <p className="lede">Tell me what you need and how you'll use it. I'll come back with a sketch and a quote before any steel gets hot. A 50% deposit secures your spot in the queue.</p>
        </div>
      </section>

      <section className="section">
        <div className="wrap-wide" style={{ display: "grid", gridTemplateColumns: "1fr 0.8fr", gap: "var(--sp-8)", alignItems: "start" }} >
          <form className="reveal" onSubmit={(e) => { e.preventDefault(); window.scrollTo(0, 0); setDone(true); }}>
            {pre && (
              <div style={{ display: "flex", gap: 14, alignItems: "center", padding: "var(--sp-4)", border: "1px solid var(--soot)", background: "var(--ink)", marginBottom: "var(--sp-6)" }}>
                <img src={pre.img} alt="" style={{ width: 56, height: 70, objectFit: "cover" }} />
                <div>
                  <div className="mono" style={{ fontSize: 11, color: "var(--ember)", letterSpacing: "0.08em", textTransform: "uppercase", marginBottom: 4 }}>Starting from</div>
                  <div className="h3" style={{ color: "var(--bone)", fontSize: 16 }}>{pre.name}</div>
                </div>
              </div>
            )}
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "var(--sp-4)" }}>
              <div className="field"><label>Name</label><input required value={form.name} onChange={set("name")} placeholder="Your name" /></div>
              <div className="field"><label>Email</label><input required type="email" value={form.email} onChange={set("email")} placeholder="you@email.com" /></div>
            </div>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "var(--sp-4)" }}>
              <div className="field"><label>Blade type</label>
                <select value={form.type} onChange={set("type")}>
                  <option>Kitchen</option><option>Hunting & EDC</option><option>Bushcraft</option><option>Something else</option>
                </select>
              </div>
              <div className="field"><label>Steel</label>
                <select value={form.steel} onChange={set("steel")}>
                  <option>Either / your call</option><option>High-carbon</option><option>Stainless</option>
                </select>
              </div>
            </div>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "var(--sp-4)" }}>
              <div className="field"><label>Budget</label>
                <select value={form.budget} onChange={set("budget")}>
                  <option>$200–$300</option><option>$300–$500</option><option>$500–$800</option><option>$800+</option>
                </select>
              </div>
              <div className="field"><label>Timeline</label>
                <select value={form.timeline} onChange={set("timeline")}>
                  <option>No rush</option><option>Within 2 months</option><option>It's a gift — has a date</option>
                </select>
              </div>
            </div>
            <div className="field"><label>Handle material (optional)</label><input value={form.handle} onChange={set("handle")} placeholder="Desert ironwood, walnut, micarta…" /></div>
            <div className="field"><label>Tell me about it</label><textarea required value={form.details} onChange={set("details")} placeholder="What will you use it for? Any dimensions, references, or details that matter?"></textarea></div>
            <button className="btn btn-ember btn-lg btn-block" type="submit">Send commission request <Icon name="arrow" size={16} /></button>
          </form>

          <aside className="reveal" style={{ position: "sticky", top: "calc(var(--nav-h) + 24px)" }}>
            <div style={{ border: "1px solid var(--soot)", background: "var(--ink)", padding: "var(--sp-6)" }}>
              <div className="eyebrow" style={{ marginBottom: 20 }}>How it works</div>
              {[["You tell me", "Use, steel, handle, budget, timeline."], ["I sketch & quote", "A drawing and a firm price within a few days."], ["50% deposit", "Secures your spot. Balance due when it ships."], ["I forge it", "6–10 weeks, start to finish, by hand."], ["It ships", "Sharpened, signed, sheathed, and insured."]].map(([t, d], i) => (
                <div key={i} style={{ display: "flex", gap: 14, paddingBottom: i < 4 ? "var(--sp-5)" : 0, marginBottom: i < 4 ? "var(--sp-5)" : 0, borderBottom: i < 4 ? "1px solid var(--soot)" : 0 }}>
                  <span className="mono" style={{ color: "var(--ember)", fontSize: 13, fontWeight: 600 }}>{String(i + 1).padStart(2, "0")}</span>
                  <div>
                    <div className="h3" style={{ color: "var(--bone)", fontSize: 15, marginBottom: 4 }}>{t}</div>
                    <p className="muted" style={{ fontSize: 13.5, margin: 0 }}>{d}</p>
                  </div>
                </div>
              ))}
            </div>
          </aside>
        </div>
      </section>
    </main>
  );
}

function FaqPage({ go }) {
  useReveal();
  const FAQ = window.BERGFALK.FAQ;
  const [open, setOpen] = useState(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 }}>Answers · shipping · care</div>
          <h1 className="mega" style={{ color: "var(--bone)", marginBottom: "var(--sp-5)" }}>Good to know</h1>
          <p className="lede">Everything about buying, commissioning, shipping, and caring for a hand-forged blade. Still stuck? Reach out on Instagram.</p>
        </div>
      </section>

      <section className="section">
        <div className="wrap" style={{ maxWidth: 820 }}>
          <div style={{ borderTop: "1px solid var(--soot)" }}>
            {FAQ.map((f, i) => (
              <div key={i} style={{ borderBottom: "1px solid var(--soot)" }} className="reveal">
                <button onClick={() => setOpen(open === i ? -1 : i)} style={{ width: "100%", background: "none", border: 0, cursor: "pointer", display: "flex", justifyContent: "space-between", alignItems: "center", gap: 20, padding: "var(--sp-6) 0", textAlign: "left" }}>
                  <span className="h3" style={{ color: "var(--bone)", fontSize: 19 }}>{f.q}</span>
                  <span className="icon-btn" style={{ transform: open === i ? "rotate(180deg)" : "none", transition: "transform var(--dur)", color: open === i ? "var(--ember)" : "var(--steel-dim)" }}><Icon name="chevron" /></span>
                </button>
                <div style={{ maxHeight: open === i ? 320 : 0, overflow: "hidden", transition: "max-height var(--dur-slow) var(--ease)" }}>
                  <p className="muted" style={{ fontSize: 16, lineHeight: 1.7, paddingBottom: "var(--sp-6)", maxWidth: "62ch", margin: 0 }}>{f.a}</p>
                </div>
              </div>
            ))}
          </div>

          <div style={{ marginTop: "var(--sp-8)", display: "grid", gridTemplateColumns: "1fr 1fr", gap: "var(--sp-5)" }} className="faq-cards">
            <div style={{ border: "1px solid var(--soot)", background: "var(--ink)", padding: "var(--sp-6)" }}>
              <Icon name="truck" size={22} style={{ color: "var(--ember)", marginBottom: 14 }} />
              <div className="h3" style={{ color: "var(--bone)", marginBottom: 8 }}>Shipping</div>
              <p className="muted" style={{ fontSize: 14, margin: 0 }}>Flat $18 insured shipping in the US. In-stock blades go out in 3–5 business days. Local pickup available near the Great Salt Lake.</p>
            </div>
            <div style={{ border: "1px solid var(--soot)", background: "var(--ink)", padding: "var(--sp-6)" }}>
              <Icon name="flame" size={22} style={{ color: "var(--ember)", marginBottom: 14 }} />
              <div className="h3" style={{ color: "var(--bone)", marginBottom: 8 }}>Blade care</div>
              <p className="muted" style={{ fontSize: 14, margin: 0 }}>Hand-wash and dry every time. Carbon steel will patina — keep it dry and oiled. Never the dishwasher, never left in the sink.</p>
            </div>
          </div>
        </div>
      </section>
    </main>
  );
}

function CheckoutPage({ go, items, products, clearCart }) {
  useReveal();
  const [done, setDone] = useState(false);
  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;

  if (done) return (
    <main>
      <section className="section" style={{ minHeight: "70vh", display: "flex", alignItems: "center" }}>
        <div className="wrap" style={{ textAlign: "center", maxWidth: 620 }}>
          <div style={{ width: 64, height: 64, border: "1px solid var(--ember)", display: "flex", alignItems: "center", justifyContent: "center", margin: "0 auto var(--sp-6)", color: "var(--ember)" }}><Icon name="check" size={28} /></div>
          <div className="eyebrow" style={{ justifyContent: "center", marginBottom: 18 }}>Order confirmed</div>
          <h1 className="disp" style={{ color: "var(--bone)", marginBottom: "var(--sp-5)" }}>It's on the stump</h1>
          <p className="lede" style={{ margin: "0 auto var(--sp-7)" }}>Your blade is packed and headed out within 3–5 days. You'll get a tracking number by email. Thanks for carrying a piece of the shop.</p>
          <button className="btn btn-ghost btn-lg" onClick={() => go("home")}>Back home</button>
        </div>
      </section>
    </main>
  );

  if (lines.length === 0) return (
    <main>
      <section className="section" style={{ minHeight: "60vh", display: "flex", alignItems: "center" }}>
        <div className="wrap" style={{ textAlign: "center" }}>
          <h1 className="disp" style={{ color: "var(--bone)", marginBottom: "var(--sp-4)" }}>Your cart is empty</h1>
          <p className="lede" style={{ margin: "0 auto var(--sp-6)" }}>Nothing to check out yet.</p>
          <button className="btn btn-ember btn-lg" onClick={() => go("shop")}>Shop the blades</button>
        </div>
      </section>
    </main>
  );

  return (
    <main>
      <section style={{ borderBottom: "1px solid var(--soot)", padding: "var(--sp-8) 0 var(--sp-6)" }}>
        <div className="wrap-wide"><div className="eyebrow" style={{ marginBottom: 14 }}>Checkout</div><h1 className="disp" style={{ color: "var(--bone)" }}>Almost yours</h1></div>
      </section>
      <section className="section-sm">
        <div className="wrap-wide" style={{ display: "grid", gridTemplateColumns: "1fr 0.8fr", gap: "var(--sp-8)", alignItems: "start" }}>
          <form className="reveal" onSubmit={(e) => { e.preventDefault(); window.scrollTo(0, 0); clearCart(); setDone(true); }}>
            <div className="eyebrow" style={{ marginBottom: 20 }}>Shipping</div>
            <div className="field"><label>Full name</label><input required placeholder="Your name" /></div>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "var(--sp-4)" }}>
              <div className="field"><label>Email</label><input required type="email" placeholder="you@email.com" /></div>
              <div className="field"><label>Phone</label><input placeholder="(optional)" /></div>
            </div>
            <div className="field"><label>Address</label><input required placeholder="Street address" /></div>
            <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr 0.8fr", gap: "var(--sp-4)" }}>
              <div className="field"><label>City</label><input required /></div>
              <div className="field"><label>State</label><input required /></div>
              <div className="field"><label>ZIP</label><input required /></div>
            </div>
            <div className="eyebrow" style={{ margin: "var(--sp-5) 0 20px" }}>Payment</div>
            <div className="field"><label>Card number</label><input required placeholder="4242 4242 4242 4242" /></div>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "var(--sp-4)" }}>
              <div className="field"><label>Expiry</label><input required placeholder="MM / YY" /></div>
              <div className="field"><label>CVC</label><input required placeholder="123" /></div>
            </div>
            <button className="btn btn-ember btn-lg btn-block" type="submit" style={{ marginTop: 8 }}>Place order — {money(subtotal + ship)}</button>
            <p className="mono" style={{ fontSize: 10.5, letterSpacing: "0.05em", color: "var(--steel-mut)", textAlign: "center", marginTop: 14, textTransform: "uppercase" }}>Demo checkout · no card is charged</p>
          </form>

          <aside className="reveal" style={{ border: "1px solid var(--soot)", background: "var(--ink)", padding: "var(--sp-6)", position: "sticky", top: "calc(var(--nav-h) + 24px)" }}>
            <div className="eyebrow" style={{ marginBottom: 20 }}>Order summary</div>
            {lines.map((l) => (
              <div key={l.id} style={{ display: "flex", gap: 14, paddingBottom: "var(--sp-4)", marginBottom: "var(--sp-4)", borderBottom: "1px solid var(--soot)" }}>
                <img src={l.p.img} alt="" style={{ width: 50, height: 62, objectFit: "cover" }} />
                <div style={{ flex: 1 }}>
                  <div className="cart-line-name" style={{ fontSize: 15 }}>{l.p.name}</div>
                  <div className="cart-line-cat">Qty {l.qty} · {l.p.steel}</div>
                </div>
                <div className="price" style={{ fontSize: 14 }}>{money(l.p.price * l.qty)}</div>
              </div>
            ))}
            <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>
          </aside>
        </div>
      </section>
    </main>
  );
}

Object.assign(window, { MakerPage, ProcessPage, CommissionPage, FaqPage, CheckoutPage });
