/* ===========================================================================
   VESTIRÉ STUDIO — customer shopping flow -> window
   Home · Browse · Gown detail · Cart · Checkout · Confirmation
   Each screen takes a single { ctx } prop (router + cart + toast + tweaks).
   =========================================================================== */

const { useState, useEffect, useRef, useMemo } = React;

/* ---- HOME ---------------------------------------------------------------- */
function CHome({ ctx }) {
  const featured = VS.gowns.slice(0, 4);
  const steps = [
    { icon: "search", t: "Discover", d: "Browse rental & purchase pieces by occasion, colour and size." },
    { icon: "calendar", t: "Reserve", d: "Pick your dates, submit a request - no payment until we confirm." },
    { icon: "ruler", t: "Fit", d: "Come in for a fitting; we tailor the details to you." },
    { icon: "sparkle", t: "Shine", d: "Collect your gown and make the entrance you imagined." }
  ];
  return (
    <div className="anim-fade">
      {/* HERO */}
      <section style={{ position: "relative", padding: "0 0 0" }}>
        <div className="container" style={{ paddingTop: 38, paddingBottom: 56 }}>
          <div style={{ display: "grid", gridTemplateColumns: "minmax(0,1.05fr) minmax(0,1fr)", gap: 40, alignItems: "stretch" }} className="hero-grid">
            <div className="col" style={{ justifyContent: "center", gap: 26, paddingRight: 10 }}>
              <span className="eyebrow">Couture rental &amp; atelier · est. 2026</span>
              <h1 className="disp" style={{ fontSize: "clamp(46px, 6.2vw, 86px)", lineHeight: 0.96, letterSpacing: "-.01em" }}>
                Gowns for the<br /><em style={{ fontStyle: "italic", color: "var(--accent-2)" }}>moments</em> that matter.
              </h1>
              <p className="muted" style={{ fontSize: 17, lineHeight: 1.6, maxWidth: 440 }}>
                Rent a showpiece for a single night or make it yours forever. Reserve online, fit in studio, and wear something unforgettable.
              </p>
              <div className="row gap12 wrap">
                <Btn variant="accent" size="lg" iconR="arrow" onClick={() => ctx.nav("browse")}>Browse the collection</Btn>
                <Btn variant="ghost" size="lg" icon="calendar" onClick={() => ctx.nav("browse", { transaction: "Rental" })}>How rental works</Btn>
              </div>
              <div className="row gap32 wrap" style={{ marginTop: 6 }}>
                {[["120+", "Gowns in atelier"], ["3 days", "Avg. rental window"], ["4.9", "From 380 clients"]].map(([n, l]) => (
                  <div className="col" key={l}>
                    <span className="disp" style={{ fontSize: 26 }}>{n}</span>
                    <span className="muted" style={{ fontSize: 12 }}>{l}</span>
                  </div>
                ))}
              </div>
            </div>
            <div style={{ position: "relative", minHeight: 440 }}>
              <img src={VS.editorial.hero} alt="" style={{ width: "100%", height: "100%", objectFit: "cover", borderRadius: "var(--r-xl)", boxShadow: "var(--shadow-lg)" }} />
              <div className="card pad20" style={{ position: "absolute", left: -18, bottom: 28, width: 220, borderRadius: "var(--r-md)", boxShadow: "var(--shadow-lg)" }}>
                <span className="eyebrow">This week</span>
                <p className="disp" style={{ fontSize: 22, marginTop: 6, lineHeight: 1.1 }}>Étoile Blanche</p>
                <p className="muted" style={{ fontSize: 12.5, marginTop: 4 }}>Rental from {VS.peso(6200)} · 2 left</p>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* MARQUEE STRIP */}
      <div style={{ borderTop: "1px solid var(--line)", borderBottom: "1px solid var(--line)", background: "var(--surface-2)", overflow: "hidden" }}>
        <div className="container row between" style={{ padding: "16px 28px", flexWrap: "wrap", gap: 18 }}>
          {["Wedding", "Debut", "Cocktail", "Evening", "Civil Ceremony"].map((c) => (
            <span key={c} className="serif" style={{ fontSize: 19, fontStyle: "italic", color: "var(--muted)" }}>{c}</span>
          ))}
        </div>
      </div>

      {/* FEATURED */}
      <section className="container" style={{ padding: "64px 28px 20px" }}>
        <div className="row between aend wrap gap16" style={{ marginBottom: 30 }}>
          <div className="col gap8">
            <span className="kicker">The edit</span>
            <h2 className="disp" style={{ fontSize: 40 }}>Pieces we're loving now</h2>
          </div>
          <Link onClick={() => ctx.nav("browse")}>See all {VS.gowns.length} gowns</Link>
        </div>
        <div className="gown-grid">
          {featured.map((g) => <GownCard key={g.id} g={g} ctx={ctx} />)}
        </div>
      </section>

      {/* ATELIER SPLIT */}
      <section className="container" style={{ padding: "60px 28px" }}>
        <div className="card" style={{ overflow: "hidden", display: "grid", gridTemplateColumns: "minmax(0,1fr) minmax(0,1fr)", borderRadius: "var(--r-xl)" }}>
          <img src={VS.editorial.atelier} alt="" style={{ width: "100%", height: "100%", objectFit: "cover", minHeight: 320 }} />
          <div className="col" style={{ justifyContent: "center", gap: 18, padding: "44px clamp(24px,4vw,52px)" }}>
            <span className="kicker">Our atelier</span>
            <h2 className="disp" style={{ fontSize: 38, lineHeight: 1.04 }}>Every gown, fitted by hand.</h2>
            <p className="muted" style={{ fontSize: 15.5, lineHeight: 1.65 }}>
              From Davao's own studio, each piece is steamed, fitted and finished for you before pickup. Rentals include one complimentary alteration; purchases, a full bespoke fitting.
            </p>
            <div className="row gap12 wrap">
              <Btn variant="primary" iconR="arrow" onClick={() => ctx.nav("browse")}>Explore the collection</Btn>
              <Btn variant="ghost" icon="mail" onClick={() => ctx.nav("contact")}>Book a visit</Btn>
            </div>
          </div>
        </div>
      </section>

      {/* PROCESS */}
      <section className="container" style={{ padding: "30px 28px 70px" }}>
        <div className="center col gap8" style={{ marginBottom: 36, alignItems: "center" }}>
          <span className="kicker">How it works</span>
          <h2 className="disp" style={{ fontSize: 38 }}>From browse to entrance</h2>
        </div>
        <div className="proc-grid">
          {steps.map((s, i) => (
            <div key={s.t} className="card pad24 col gap14" style={{ borderRadius: "var(--r-md)" }}>
              <div className="row between acenter">
                <div className="avatar" style={{ width: 44, height: 44, borderRadius: "var(--r-sm)", background: "var(--accent-soft)" }}><Icon name={s.icon} size={20} /></div>
                <span className="disp" style={{ fontSize: 34, color: "var(--line)" }}>0{i + 1}</span>
              </div>
              <h3 className="disp" style={{ fontSize: 22 }}>{s.t}</h3>
              <p className="muted" style={{ fontSize: 13.5, lineHeight: 1.55 }}>{s.d}</p>
            </div>
          ))}
        </div>
      </section>

      {/* QUOTE */}
      <section style={{ background: "var(--ink)", color: "var(--paper)" }}>
        <div className="container center" style={{ padding: "70px 28px", maxWidth: 820 }}>
          <Icon name="sparkle" size={26} style={{ color: "var(--accent)" }} />
          <p className="disp" style={{ fontSize: "clamp(26px,3.4vw,38px)", lineHeight: 1.3, marginTop: 18, fontStyle: "italic" }}>
            "I rented the Lumière for our garden vows and it fit like it was made for me. The studio thought of everything."
          </p>
          <p style={{ marginTop: 20, letterSpacing: ".2em", textTransform: "uppercase", fontSize: 12, color: "var(--accent)" }}>Maria S. · Wedding, Davao</p>
        </div>
      </section>
    </div>
  );
}

/* ---- GOWN CARD ----------------------------------------------------------- */
function priceLabel(g) {
  if (g.transaction === "Purchase") return "Buy " + VS.peso(g.priceBuy);
  if (g.transaction === "Rental") return "Rent " + VS.peso(g.priceRent) + "/" + "set";
  return "Rent " + VS.peso(g.priceRent) + " · Buy " + VS.peso(g.priceBuy);
}
function GownCard({ g, ctx }) {
  const low = g.stock <= 1;
  return (
    <div className="gcard" onClick={() => ctx.nav("detail", { id: g.id })}>
      <div className="gcard-media">
        <img src={g.image} alt={g.name} loading="lazy" />
        <div className="gcard-tags">
          <span className="tag">{g.transaction === "Both" ? "Rent · Buy" : g.transaction}</span>
          {low && <span className="tag tag--line" style={{ background: "var(--surface)" }}>{g.stock === 0 ? "Sold out" : "1 left"}</span>}
        </div>
        <div className="gcard-quick">
          <Btn variant="accent" size="sm" block icon="eye">View piece</Btn>
        </div>
      </div>
      <div className="col gap4" style={{ padding: "14px 4px 4px" }}>
        <div className="row between acenter gap8">
          <h3 className="disp" style={{ fontSize: 21, lineHeight: 1 }}>{g.name}</h3>
        </div>
        <div className="row between acenter">
          <span className="muted" style={{ fontSize: 12.5, letterSpacing: ".04em" }}>{g.category} · {g.color}</span>
          <span style={{ fontSize: 13, fontWeight: 700, color: "var(--accent-2)" }}>{g.transaction === "Purchase" ? VS.peso(g.priceBuy) : VS.peso(g.priceRent)}</span>
        </div>
      </div>
    </div>
  );
}

/* ---- BROWSE -------------------------------------------------------------- */
function CBrowse({ ctx }) {
  const init = ctx.route.params || {};
  const [cat, setCat] = useState(init.category || "All");
  const [trans, setTrans] = useState(init.transaction || "All");
  const [q, setQ] = useState("");
  const [sort, setSort] = useState("featured");

  const list = useMemo(() => {
    let r = VS.gowns.filter((g) =>
      (cat === "All" || g.category === cat) &&
      (trans === "All" || g.transaction === trans || (trans !== "All" && g.transaction === "Both")) &&
      (q === "" || g.name.toLowerCase().includes(q.toLowerCase()) || g.color.toLowerCase().includes(q.toLowerCase()))
    );
    if (sort === "low") r = [...r].sort((a, b) => (a.priceRent || a.priceBuy) - (b.priceRent || b.priceBuy));
    if (sort === "high") r = [...r].sort((a, b) => (b.priceBuy || b.priceRent) - (a.priceBuy || a.priceRent));
    return r;
  }, [cat, trans, q, sort]);

  return (
    <div className="container anim-fade" style={{ padding: "32px 28px 70px" }}>
      <div className="col gap8" style={{ marginBottom: 24 }}>
        <span className="kicker">The collection</span>
        <h1 className="disp" style={{ fontSize: 46 }}>Find your gown</h1>
      </div>

      {/* filter bar */}
      <div className="card pad16 col gap14" style={{ borderRadius: "var(--r-md)", marginBottom: 26, position: "sticky", top: 78, zIndex: 40 }}>
        <div className="row between wrap gap12">
          <div className="row gap8 wrap">
            {["All", ...VS.categories].map((c) => (
              <button key={c} className={"chip" + (cat === c ? " chip--on" : "")} onClick={() => setCat(c)}>{c}</button>
            ))}
          </div>
          <div className="row gap8 acenter" style={{ position: "relative" }}>
            <Icon name="search" size={16} style={{ position: "absolute", left: 13, color: "var(--muted)" }} />
            <input className="input" style={{ paddingLeft: 36, width: 200 }} placeholder="Search gowns…" value={q} onChange={(e) => setQ(e.target.value)} />
            <select className="select" style={{ width: "auto" }} value={sort} onChange={(e) => setSort(e.target.value)}>
              <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 className="row gap8 acenter">
          <span className="label" style={{ marginRight: 2 }}>Offered as</span>
          {["All", "Rental", "Purchase", "Both"].map((tt) => (
            <button key={tt} className={"chip" + (trans === tt ? " chip--on" : "")} onClick={() => setTrans(tt)}>{tt}</button>
          ))}
          <span className="muted grow" style={{ textAlign: "right", fontSize: 12.5 }}>{list.length} piece{list.length !== 1 ? "s" : ""}</span>
        </div>
      </div>

      {list.length === 0 ? (
        <div className="card pad32 center col gap10" style={{ alignItems: "center" }}>
          <Icon name="search" size={26} style={{ color: "var(--muted)" }} />
          <p className="disp" style={{ fontSize: 24 }}>No gowns match those filters</p>
          <Btn variant="ghost" size="sm" onClick={() => { setCat("All"); setTrans("All"); setQ(""); }}>Clear filters</Btn>
        </div>
      ) : (
        <div className="gown-grid">{list.map((g) => <GownCard key={g.id} g={g} ctx={ctx} />)}</div>
      )}
    </div>
  );
}

/* ---- GOWN DETAIL --------------------------------------------------------- */
function CDetail({ ctx }) {
  const g = VS.gownById[ctx.route.params.id];
  const offersBoth = g.transaction === "Both";
  const [mode, setMode] = useState(g.transaction === "Purchase" ? "purchase" : "rental");
  const [size, setSize] = useState(g.sizes[Math.min(1, g.sizes.length - 1)]);
  const [active, setActive] = useState(0);
  const [start, setStart] = useState("");
  const [days, setDays] = useState(3);
  const unit = mode === "rental" ? g.priceRent : g.priceBuy;
  const soldOut = g.stock === 0;

  function add() {
    ctx.addToCart({
      gownId: g.id, name: g.name, image: g.image, size,
      lineType: mode, unitPrice: unit, qty: 1,
      rentalStart: mode === "rental" ? start : null, rentalDays: mode === "rental" ? days : 0
    });
    ctx.showToast(g.name + " added to your bag", "bag");
  }

  return (
    <div className="container anim-fade" style={{ padding: "22px 28px 70px" }}>
      <div className="row gap8 acenter" style={{ marginBottom: 20, fontSize: 13, color: "var(--muted)" }}>
        <span className="lnk" onClick={() => ctx.nav("browse")} style={{ color: "var(--muted)" }}><Icon name="arrowL" size={14} />Collection</span>
        <span>/</span><span style={{ color: "var(--ink)" }}>{g.name}</span>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "minmax(0,1.05fr) minmax(0,.95fr)", gap: 44 }} className="detail-grid">
        {/* gallery */}
        <div className="col gap12">
          <img src={g.gallery[active]} alt={g.name} style={{ width: "100%", aspectRatio: "4/5", objectFit: "cover", borderRadius: "var(--r-lg)", boxShadow: "var(--shadow-md)" }} />
          {g.gallery.length > 1 && (
            <div className="row gap10">
              {g.gallery.map((src, i) => (
                <img key={i} src={src} onClick={() => setActive(i)} alt=""
                  style={{ width: 74, height: 92, objectFit: "cover", borderRadius: "var(--r-sm)", cursor: "pointer", border: active === i ? "2px solid var(--accent)" : "2px solid transparent", opacity: active === i ? 1 : 0.7 }} />
              ))}
            </div>
          )}
        </div>

        {/* info */}
        <div className="col gap20">
          <div className="col gap10">
            <div className="row gap8 wrap">
              <span className="tag">{g.category}</span>
              <span className="tag tag--line">{g.occasion}</span>
              {g.stock <= 1 && <span className="tag tag--line" style={{ color: "var(--cancelled)", borderColor: "var(--cancelled-bg)" }}>{soldOut ? "Sold out" : "Only 1 left"}</span>}
            </div>
            <h1 className="disp" style={{ fontSize: 48, lineHeight: 1 }}>{g.name}</h1>
            <p className="muted" style={{ fontSize: 15.5, lineHeight: 1.6 }}>{g.desc}</p>
          </div>

          {/* mode toggle */}
          {offersBoth && (
            <div className="field">
              <span className="label">How would you like it?</span>
              <div className="row gap10">
                {[["rental", "Rent", g.priceRent, "/event"], ["purchase", "Purchase", g.priceBuy, ""]].map(([m, lbl, pr, suf]) => (
                  <button key={m} onClick={() => setMode(m)}
                    className="card" style={{
                      flex: 1, padding: "14px 16px", textAlign: "left", cursor: "pointer", borderRadius: "var(--r-md)",
                      borderColor: mode === m ? "var(--accent)" : "var(--line)", boxShadow: mode === m ? "0 0 0 3px var(--accent-soft)" : "none", background: "var(--surface)"
                    }}>
                    <div style={{ fontWeight: 700, fontSize: 13, letterSpacing: ".04em" }}>{lbl}</div>
                    <div className="price" style={{ fontSize: 24, marginTop: 4 }}>{VS.peso(pr)}<span className="muted" style={{ fontSize: 12, fontFamily: "var(--font-sans)" }}>{suf}</span></div>
                  </button>
                ))}
              </div>
            </div>
          )}

          {/* price (single-mode) */}
          {!offersBoth && (
            <div className="row gap10 aend">
              <span className="price" style={{ fontSize: 38 }}>{VS.peso(unit)}</span>
              <span className="muted" style={{ paddingBottom: 7 }}>{mode === "rental" ? "per event · " + "3-day window" : "to own"}</span>
            </div>
          )}

          {/* size */}
          <Field label="Select size">
            <div className="row gap8 wrap">
              {["XS", "S", "M", "L", "XL"].map((s) => (
                <button key={s} className={"sizechip" + (size === s ? " sizechip--on" : "")} disabled={!g.sizes.includes(s)} onClick={() => setSize(s)}>{s}</button>
              ))}
            </div>
          </Field>

          {/* rental dates */}
          {mode === "rental" && (
            <div className="row gap12 wrap">
              <Field label="Event date"><input className="input" type="date" value={start} onChange={(e) => setStart(e.target.value)} /></Field>
              <Field label="Rental days">
                <select className="select" value={days} onChange={(e) => setDays(+e.target.value)}>
                  {[2, 3, 4, 5].map((d) => <option key={d} value={d}>{d} days</option>)}
                </select>
              </Field>
            </div>
          )}

          <div className="row gap12 wrap">
            <Btn variant="accent" size="lg" icon="bag" disabled={soldOut} onClick={add}>{soldOut ? "Sold out" : "Add to bag"}</Btn>
            <Btn variant="ghost" size="lg" icon="heart">Save</Btn>
          </div>

          {/* details */}
          <div className="card pad20 col gap2" style={{ borderRadius: "var(--r-md)" }}>
            {[["Colour", g.color], ["Available sizes", g.sizes.join(" · ")], ["Occasion", g.occasion], ["In atelier", g.stock + " piece" + (g.stock !== 1 ? "s" : "")], ["Includes", mode === "rental" ? "1 fitting · steaming · garment bag" : "Bespoke fitting · garment bag"]].map(([k, v], i) => (
              <div key={k} className="row between" style={{ padding: "10px 0", borderTop: i ? "1px solid var(--line-2)" : "none" }}>
                <span className="muted" style={{ fontSize: 13 }}>{k}</span>
                <span style={{ fontSize: 13.5, fontWeight: 600 }}>{v}</span>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* related */}
      <div style={{ marginTop: 60 }}>
        <div className="row between aend" style={{ marginBottom: 22 }}>
          <h2 className="disp" style={{ fontSize: 30 }}>You may also love</h2>
          <Link onClick={() => ctx.nav("browse")}>All gowns</Link>
        </div>
        <div className="gown-grid">
          {VS.gowns.filter((x) => x.id !== g.id && x.category === g.category).concat(VS.gowns.filter((x) => x.id !== g.id && x.category !== g.category)).slice(0, 4).map((x) => <GownCard key={x.id} g={x} ctx={ctx} />)}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { CHome, CBrowse, CDetail, GownCard, priceLabel });