/* Industrial Union UI Kit — app shell: routing + cart state */
const { useState: uSA, useEffect: uEA } = window;
const { Nav, Home, Shop, ProductView, Newsletter, Footer,
        Label: LA, Bracket: BA, BracketRow: BRA, ArrowLink: ALA, Figure: FA } = window;

/* About page copy, in reading order. Each entry is either a paragraph of
   text or a photo. To add a picture between two paragraphs, insert a
   { type: "image", src: "assets/your-file.jpg", tag: "CAPTION", side: "left" }
   object at that position in the array. `side` is "left", "right", or
   omitted (stacked full-width, centered) — left/right photos float so
   the surrounding paragraph text wraps around them. The tag shows as a
   label if the photo is ever removed, matching the blank-slot convention
   used elsewhere. */
const ABOUT_CONTENT = [
  { type: "text", text: "Industrial Union was founded on the belief that the best workwear is developed alongside the people who depend on it every day." },
  { type: "text", text: "We work directly with professionals across a wide range of industries to understand the demands of their trade. By listening to the people wearing our garments, testing prototypes in real working environments, and refining every detail through feedback, we create clothing that serves a purpose beyond appearance. Every pocket placement, reinforcement, closure, and fit is the result of collaboration with the people who put our products to work." },
  { type: "image", src: "assets/workers-photo.jpg", tag: "THE CREW", side: "left" },
  { type: "text", text: "Our design philosophy is rooted in the industrial era of the late 1800s and early 1900s—a time when clothing was built to withstand years of demanding labor. We study these timeless garments, preserving the silhouettes, proportions, and functional details while adapting them for today's workforce." },
  { type: "text", text: "We never compromise on materials. Every garment is built from premium fabrics and components selected for their strength, longevity, and ability to age with character. From selvedge denim and heavyweight duck canvas to hickory stripe and vegetable-tanned leather, every material is chosen because it has earned its place in the history of workwear." },
  { type: "image", src: "assets/mill-photo.png", tag: "MILL · RAW DUCK", side: "right" },
  { type: "text", text: "Industrial Union is committed to building garments that become better with time. They are made to be repaired, maintained, and worn for years" },
  { type: "text", text: "That commitment extends beyond the day your garment leaves our shop. If your Industrial Union garment is damaged through normal use, send it back to us. We'll repair it and return it to the job because we believe quality workwear should be built to last and supported for the life of the garment." },
  { type: "image", src: "assets/jumpsuit-back.jpg", tag: "CONSTRUCTION DETAIL", side: "left" },
  { type: "text", text: "Industrial Union is more than a clothing company. It's a partnership with the people who build, create, repair, and keep the world moving. Every garment we make is shaped by the workers who wear it and built to earn its place alongside them." },
];

/* lightweight editorial views for WORKSHOP / ABOUT */
function Editorial({ kind }) {
  const isShop = kind === "workshop";
  return (
    <main className="sk-main">
      <section className="sk-hero">
        <BRA cols="minmax(150px,1fr) 3fr" className="sk-bracket-divider" style={{ marginBottom: 18 }}><BA /><BA /></BRA>
        <BRA cols="minmax(150px,1fr) 3fr" className="sk-section-head">
          <LA>{isShop ? "THE WORKSHOP" : "ABOUT"}</LA>
          <div>
            <h1 className="iu-display sk-hero-title" style={{ fontSize: "clamp(2.6rem,6vw,5rem)", marginBottom: 28 }}>
              {isShop ? "Cut, sewn &\nmended in L.A." : "Crafted by hand,\nfor the trades."}
            </h1>
            {isShop ? (
              <div className="sk-twocol">
                <p className="iu-body">
                  <span className="sk-arrow">↘</span>
                  Every Industrial Union garment is structured after early-1900s silhouettes and innovated to todays trades, then cut and sewn in our Los Angeles workshop to best fit your needs. We chainstitch, bartack, and rivet the way the old union shops did — because details are what let a garment stand the test of time.
                </p>
                <p className="iu-body">
                  We keep the line short on purpose. When something wears through, send it back — we repair before we replace. The goal isn't this season's jacket. It's the one you pass down.
                </p>
              </div>
            ) : (
              <div className="sk-about-copy">
                {(() => { let textSeen = 0; return ABOUT_CONTENT.map((item, i) => {
                  if (item.type === "image") {
                    const side = item.side; // "left" | "right" | undefined
                    const sideClass = side === "left" ? "sk-about-figure--left"
                      : side === "right" ? "sk-about-figure--right"
                      : "sk-about-figure--full";
                    return (
                      <div key={i} className={"sk-about-figure " + sideClass}>
                        <FA tag={item.tag} src={item.src} ratio="4 / 5" />
                      </div>
                    );
                  }
                  const isFirst = textSeen === 0;
                  textSeen += 1;
                  return (
                    <p className="iu-body sk-about-para" key={i}>
                      {isFirst && <span className="sk-arrow">↘</span>}
                      {item.text}
                    </p>
                  );
                }); })()}
                <div className="sk-about-clear" />
              </div>
            )}
            {isShop && (
              <div className="sk-duo" style={{ marginTop: 40 }}>
                <FA tag="WORKSHOP" src="assets/workshop-photo.jpg" ratio="4 / 5" />
                <FA tag="WORKSHOP · DETAIL" src="assets/workshop-detail.png" ratio="4 / 5" />
              </div>
            )}
          </div>
        </BRA>
      </section>
    </main>
  );
}

function App() {
  const [view, setView] = uSA("home");
  const [current, setCurrent] = uSA(null);
  const [filter, setFilter] = uSA("all");
  const [searchOpen, setSearchOpen] = uSA(false);

  uEA(() => { window.scrollTo({ top: 0, behavior: "auto" }); }, [view, current]);

  const go = (v) => { setSearchOpen(false); if (v === "home") { setView("home"); } else { setView(v); } };
  const openProduct = (id) => { setCurrent(window.findProduct(id)); setView("product"); setSearchOpen(false); };
  const openCategory = (cat) => { setFilter(cat); setView("shop"); setSearchOpen(false); };

  let content;
  if (view === "home") content = <Home onShop={() => go("shop")} onOpen={openProduct} onCategory={openCategory} onWorkshop={() => go("workshop")} />;
  else if (view === "shop") content = <Shop filter={filter} onFilter={setFilter} onOpen={openProduct} />;
  else if (view === "product") content = <ProductView product={current} onBack={() => go("shop")} onOpen={openProduct} />;
  else if (view === "workshop") content = <Editorial kind="workshop" />;
  else content = <Editorial kind="about" />;

  return (
    <div className="sk-app">
      <Nav view={view} onNav={go}
           onSearch={() => setSearchOpen((s) => !s)} searchOpen={searchOpen} />
      {content}
      {view !== "product" && <Newsletter />}
      <Footer onNav={go} onCategory={openCategory} />
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);