// Landing page

function LandingPage({ onNav, state, inventory }) {
  const featured = inventory.slice(0, 3);
  const heroExamples = inventory.slice(0, Math.min(5, inventory.length));
  const stats = [
  { k: "Active listings", v: "24", sub: "updated 2 min ago" },
  { k: "Units on floor", v: "3,847", sub: "across 14 projects" },
  { k: "Closed in 2026", v: "$4.2M", sub: "142 lots moved" },
  { k: "Approved buyers", v: "68", sub: "Bay Area + NorCal" }];

  return (
    <div>
      {state.heroVariant === "photo" ? <HeroPhoto onNav={onNav} examples={heroExamples} /> : <HeroStats onNav={onNav} stats={stats} />}

      {/* Featured listings */}
      <section className="section" style={{ background: "var(--bg-sunken)", borderTop: "1px solid var(--line)", borderBottom: "1px solid var(--line)" }}>
        <div className="container">
          <div className="row between" style={{ marginBottom: 28, alignItems: "flex-end", flexWrap: "wrap", gap: 24 }}>
            <div>
              <div className="eyebrow" style={{ marginBottom: 12 }}>02 · Live now</div>
              <h2 className="display" style={{ fontSize: 38, margin: 0 }}>Featured this week</h2>
            </div>
            <button className="btn btn-secondary" onClick={() => onNav("inventory")}>
              View all inventory <IcArrow size={16} />
            </button>
          </div>
          <div className="inv-grid">
            {featured.map((item) =>
            <ListingCard key={item.id} item={item}
            onClick={(id) => onNav("listing", { id })}
            onWatch={() => {}} watching={false} />
            )}
          </div>
        </div>
      </section>

      {/* Value props */}
      <section className="section">
        <div className="container">
          <div className="stack-on-mobile" style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 40 }}>
            {[
            { ic: <IcShield size={22} />, t: "Vetted inventory, graded on-site", d: "Every lot is physically verified by the Clearspace intake team before publish. Condition grades, counts, and photography are reviewed by admins." },
            { ic: <IcBolt size={22} />, t: "Same-day bidding windows", d: "Most lots run on a 10-hour window. Quick-bid buttons, live countdowns, and optional buy-now for buyers who need to lock inventory immediately." },
            { ic: <IcEye size={22} />, t: "Private, blinded bidding", d: "Approved buyer companies only. Bidder identities are hidden throughout the auction — you compete on price, not relationships." }].
            map((v, i) =>
            <div key={i}>
                <div style={{
                width: 44, height: 44, borderRadius: 10,
                background: "var(--bg-sunken)", border: "1px solid var(--line)",
                display: "grid", placeItems: "center", color: "var(--ink)",
                marginBottom: 16
              }}>{v.ic}</div>
                <div style={{ fontSize: 18, fontWeight: 600, letterSpacing: "-0.01em", marginBottom: 8 }}>{v.t}</div>
                <div style={{ fontSize: 14, color: "var(--ink-2)", lineHeight: 1.55 }}>{v.d}</div>
              </div>
            )}
          </div>
        </div>
      </section>

      {/* Application CTA */}
      <section className="section" style={{ paddingTop: 0 }}>
        <div className="container">
          <div className="stack-on-mobile" style={{
            background: "var(--ink)", color: "var(--bg-elev)",
            borderRadius: 16, padding: "48px 56px",
            display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 40, alignItems: "center"
          }}>
            <div>
              <div className="mono" style={{ fontSize: 11, color: "var(--ink-4)", letterSpacing: "0.12em", marginBottom: 14 }}>FOR DEALERS, OUTFITTERS, FACILITIES TEAMS</div>
              <h3 style={{ fontSize: 34, fontWeight: 600, letterSpacing: "-0.025em", lineHeight: 1.1, margin: 0, marginBottom: 14 }}>
                Request buyer access.
              </h3>
              <p style={{ color: "#94A3B8", fontSize: 15, lineHeight: 1.55, margin: 0, marginBottom: 0, maxWidth: "48ch" }}>
                Clearspace vets every buyer company before granting access. We confirm resale channel, logistics capacity, and credit. Most applications are reviewed within two business days.
              </p>
            </div>
            <div className="col gap-12">
              <button className="btn btn-primary btn-lg" onClick={() => onNav("access-request")}>Request access <IcArrow size={16} /></button>
              <a href="mailto:clearspace.sols@gmail.com" className="btn btn-lg" style={{ background: "transparent", color: "#F8FAFC", border: "1px solid #334155", textDecoration: "none" }}>Contact the Clearspace team</a>
            </div>
          </div>
        </div>
      </section>
    </div>);

}

function HeroPhoto({ onNav, examples }) {
  const items = examples && examples.length ? examples : [];
  const [index, setIndex] = React.useState(0);
  const [paused, setPaused] = React.useState(false);

  React.useEffect(() => {
    if (paused || items.length < 2) return;
    const t = setInterval(() => setIndex((i) => (i + 1) % items.length), 5500);
    return () => clearInterval(t);
  }, [paused, items.length]);

  if (items.length === 0) return null;
  const item = items[index];
  const go = (delta) => setIndex((i) => (i + delta + items.length) % items.length);
  const goTo = (i) => setIndex(((i % items.length) + items.length) % items.length);
  const open = () => onNav("listing", { id: item.id });

  const arrowBtn = {
    position: "absolute", top: "50%", transform: "translateY(-50%)",
    width: 36, height: 36, borderRadius: "50%",
    background: "rgba(255,255,255,0.92)", color: "#111",
    border: "1px solid rgba(0,0,0,0.08)",
    display: "grid", placeItems: "center", cursor: "pointer",
    boxShadow: "0 2px 8px rgba(0,0,0,0.18)", zIndex: 2,
  };

  return (
    <section className="hero">
      <div className="container stack-on-mobile" style={{ display: "grid", gridTemplateColumns: "1.05fr 1fr", gap: 56, alignItems: "center" }}>
        <div>
          <h1 className="hero-headline">
            Bid on vetted office inventory, straight from the decommission.
          </h1>
          <p className="hero-sub">Clearspace runs real Bay Area decommission projects. Every whole lot, category lot, and premium piece on this platform was counted, graded, and photographed by our crew.

          </p>
          <div className="hero-ctas">
            <button className="btn btn-primary btn-lg" onClick={() => onNav("inventory")}>
              View active inventory <IcArrow size={16} />
            </button>
            <button className="btn btn-secondary btn-lg" onClick={() => onNav("access-request")}>Request buyer access</button>
          </div>
          <div className="row gap-32" style={{ marginTop: 48, paddingTop: 28, borderTop: "1px solid var(--line)" }}>
            {[
            { k: "Active lots", v: "24" },
            { k: "Units live", v: "3,847" },
            { k: "Approved buyers", v: "68" }].
            map((s) =>
            <div key={s.k}>
                <div className="stat-num mono">{s.v}</div>
                <div className="stat-kicker" style={{ marginTop: 4 }}>{s.k}</div>
              </div>
            )}
          </div>
        </div>
        <div
          className="hero-carousel"
          style={{ position: "relative" }}
          onMouseEnter={() => setPaused(true)}
          onMouseLeave={() => setPaused(false)}
          onKeyDown={(e) => {
            if (e.key === "ArrowLeft") { e.preventDefault(); go(-1); }
            else if (e.key === "ArrowRight") { e.preventDefault(); go(1); }
          }}>
          <div
            aria-roledescription="carousel"
            aria-label="Featured live listings"
            style={{
              aspectRatio: "4/5", borderRadius: 14, overflow: "hidden",
              border: "1px solid var(--line)", background: "var(--bg-sunken)",
              position: "relative",
            }}>
            <div
              style={{
                display: "flex", height: "100%",
                width: `${items.length * 100}%`,
                transform: `translateX(-${index * (100 / items.length)}%)`,
                transition: "transform 600ms cubic-bezier(0.22, 0.71, 0.21, 1)",
              }}>
              {items.map((it, i) => (
                <div
                  key={it.id}
                  role="button"
                  tabIndex={i === index ? 0 : -1}
                  aria-hidden={i !== index}
                  aria-label={`View listing ${it.title}`}
                  onClick={() => i === index && onNav("listing", { id: it.id })}
                  onKeyDown={(e) => {
                    if (i !== index) return;
                    if (e.key === "Enter" || e.key === " ") { e.preventDefault(); onNav("listing", { id: it.id }); }
                  }}
                  style={{
                    flex: `0 0 ${100 / items.length}%`,
                    position: "relative",
                    cursor: i === index ? "pointer" : "default",
                  }}>
                  <img src={it.photos[0]} alt=""
                    draggable={false}
                    style={{ width: "100%", height: "100%", objectFit: "cover", display: "block", userSelect: "none" }} />
                  <div style={{ position: "absolute", inset: 0, background: "linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.55))" }} />
                  <div style={{ position: "absolute", top: 20, left: 20, right: 20, display: "flex", justifyContent: "space-between" }}>
                    <span className={`tag ${typeTagClass(it.type)}`}>{typeLabel(it.type)}</span>
                    <span className="mono" style={{ color: "white", fontSize: 11, background: "rgba(0,0,0,0.55)", padding: "4px 8px", borderRadius: 4, letterSpacing: "0.08em" }}>{it.id}</span>
                  </div>
                  <div style={{ position: "absolute", bottom: 22, left: 22, right: 22, color: "white" }}>
                    <div className="mono" style={{ fontSize: 11, letterSpacing: "0.1em", opacity: 0.85, marginBottom: 6 }}>LIVE NOW</div>
                    <div style={{ fontSize: 22, fontWeight: 600, letterSpacing: "-0.01em", lineHeight: 1.2, marginBottom: 12 }}>{it.title}</div>
                    <div className="row gap-24" style={{ paddingTop: 12, borderTop: "1px solid rgba(255,255,255,0.2)" }}>
                      <div>
                        <div style={{ fontSize: 10, fontFamily: "JetBrains Mono", letterSpacing: "0.1em", opacity: 0.75 }}>CURRENT BID</div>
                        <div className="mono" style={{ fontSize: 18, fontWeight: 600, marginTop: 2 }}>{fmt$(it.currentBid)}</div>
                      </div>
                      <div>
                        <div style={{ fontSize: 10, fontFamily: "JetBrains Mono", letterSpacing: "0.1em", opacity: 0.75 }}>BUY NOW</div>
                        <div className="mono" style={{ fontSize: 18, fontWeight: 600, marginTop: 2 }}>{fmt$(it.buyNow)}</div>
                      </div>
                      <div>
                        <div style={{ fontSize: 10, fontFamily: "JetBrains Mono", letterSpacing: "0.1em", opacity: 0.75 }}>CLOSES IN</div>
                        <div className="mono" style={{ fontSize: 18, fontWeight: 600, marginTop: 2 }}>{Math.floor((it.closesAt - Date.now()) / 3600000)}h</div>
                      </div>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </div>

          {items.length > 1 && (
            <>
              <button
                aria-label="Previous example"
                className="hero-arrow"
                onClick={(e) => { e.stopPropagation(); go(-1); }}
                style={{ ...arrowBtn, left: 12 }}>
                <span style={{ display: "inline-flex", transform: "rotate(180deg)" }}><IcChev size={18} /></span>
              </button>
              <button
                aria-label="Next example"
                className="hero-arrow"
                onClick={(e) => { e.stopPropagation(); go(1); }}
                style={{ ...arrowBtn, right: 12 }}>
                <IcChev size={18} />
              </button>
              <div style={{ position: "absolute", left: 0, right: 0, bottom: -22, display: "flex", justifyContent: "center", gap: 8 }}>
                {items.map((it, i) => (
                  <button
                    key={it.id}
                    aria-label={`Go to example ${i + 1}`}
                    onClick={(e) => { e.stopPropagation(); goTo(i); }}
                    style={{
                      width: i === index ? 18 : 6, height: 6, borderRadius: 3,
                      background: i === index ? "var(--ink)" : "var(--ink-4)",
                      border: "none", padding: 0, cursor: "pointer",
                      transition: "width 200ms, background 200ms",
                    }} />
                ))}
              </div>
            </>
          )}
        </div>
      </div>
    </section>);

}

function HeroStats({ onNav, stats }) {
  return (
    <section className="hero">
      <div className="container">
        <div style={{ maxWidth: 880 }}>
          <h1 className="hero-headline" style={{ maxWidth: "18ch" }}>
            Wholesale office inventory. Direct from the decommission.
          </h1>
          <p className="hero-sub">
            Clearspace runs real decommission projects across the Bay Area. Every lot listed here was counted, graded, and photographed by our intake crew — then approved by our admins before going live.
          </p>
          <div className="hero-ctas">
            <button className="btn btn-primary btn-lg" onClick={() => onNav("inventory")}>
              View active inventory <IcArrow size={16} />
            </button>
            <button className="btn btn-secondary btn-lg" onClick={() => onNav("access-request")}>Request buyer access</button>
          </div>
        </div>
        <div style={{
          marginTop: 56,
          display: "grid", gridTemplateColumns: "repeat(4, 1fr)",
          borderTop: "1px solid var(--line)",
          borderBottom: "1px solid var(--line)"
        }}>
          {stats.map((s, i) =>
          <div key={s.k} style={{
            padding: "28px 24px 28px 0",
            borderRight: i < stats.length - 1 ? "1px solid var(--line)" : "none",
            paddingLeft: i > 0 ? 24 : 0
          }}>
              <div className="stat-kicker">{s.k}</div>
              <div className="stat-num mono" style={{ marginTop: 10 }}>{s.v}</div>
              <div style={{ fontSize: 12, color: "var(--ink-3)", marginTop: 6 }}>{s.sub}</div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

Object.assign(window, { LandingPage });