// Project hub — landing page for a single decommission project.
// Shows hero, project metadata, the whole lot (if any), and premium carveouts.

function ProjectPage({ onNav, project, inventory, watching, onWatch }) {
  if (!project) {
    return <div className="container" style={{ padding: 80, textAlign: "center", color: "var(--ink-3)" }}>Project not found.</div>;
  }
  const lots = inventory.filter((i) => i.projectId === project.id);
  const whole = lots.find((l) => l.type === "whole-lot");
  const premiums = lots.filter((l) => l.type === "premium");

  return (
    <div>
      {/* Hero */}
      <section style={{ position: "relative", borderBottom: "1px solid var(--line)" }}>
        <div style={{ position: "relative", height: 440, overflow: "hidden", background: "var(--bg-sunken)" }}>
          <img src={project.hero} alt="" style={{ width: "100%", height: "100%", objectFit: "cover" }} />
          <div style={{ position: "absolute", inset: 0, background: "linear-gradient(180deg, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.85) 100%)" }} />
          <div className="container" style={{ position: "absolute", inset: 0, display: "flex", flexDirection: "column", justifyContent: "flex-end", paddingBottom: 40, color: "white" }}>
            <div className="row center gap-8" style={{ fontSize: 13, opacity: 0.85, marginBottom: 14 }}>
              <a href="#" onClick={(e) => { e.preventDefault(); onNav("inventory"); }} style={{ color: "white", opacity: 0.8, textDecoration: "none" }}>Inventory</a>
              <IcChev size={13} />
              <span>Projects</span>
              <IcChev size={13} />
              <span className="mono">{project.id}</span>
            </div>
            <h1 className="display" style={{ fontSize: 56, margin: 0, maxWidth: "20ch", color: "white" }}>{project.name}</h1>
            <div className="row gap-24" style={{ marginTop: 18, fontSize: 14, opacity: 0.9 }}>
              <span className="row center gap-6"><IcMapPin size={14} /> {(project.address || "").split(",").slice(-2).join(",").trim() || "Bay Area"}</span>
              <span className="row center gap-6"><IcShield size={14} /> {project.intakeBy}</span>
            </div>
          </div>
        </div>
      </section>

      <section className="container" style={{ padding: "40px 32px 64px" }}>
        <div className="stack-on-mobile" style={{ display: "grid", gridTemplateColumns: "1.5fr 1fr", gap: 48, marginBottom: 48 }}>
          <div>
            <div className="eyebrow" style={{ marginBottom: 12 }}>Project overview</div>
            <h2 style={{ fontSize: 26, fontWeight: 600, letterSpacing: "-0.02em", margin: 0, marginBottom: 14, maxWidth: "28ch" }}>
              {project.tenant}
            </h2>
            <p style={{ fontSize: 15, color: "var(--ink-2)", lineHeight: 1.65, margin: 0, maxWidth: "60ch" }}>
              {project.summary}
            </p>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 1, background: "var(--line)", border: "1px solid var(--line)", borderRadius: 12, overflow: "hidden", alignSelf: "start" }}>
            {[
              { k: "Total units", v: project.totalUnits.toLocaleString() },
              { k: "Listings", v: lots.length },
              { k: "Intake date", v: new Date(project.intakeDate).toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric" }) },
              { k: "Carveouts", v: `${premiums.length} premium` },
            ].map((s) => (
              <div key={s.k} style={{ background: "var(--bg-elev)", padding: "16px 18px" }}>
                <div className="stat-kicker">{s.k}</div>
                <div style={{ fontSize: 20, fontWeight: 600, marginTop: 6, letterSpacing: "-0.01em" }}>{s.v}</div>
              </div>
            ))}
          </div>
        </div>

        {whole && (
          <div style={{ marginBottom: 48 }}>
            <div className="row between" style={{ alignItems: "flex-end", marginBottom: 18 }}>
              <div>
                <div className="eyebrow" style={{ marginBottom: 8 }}>Whole lot · one bid, take it all</div>
                <h3 style={{ fontSize: 22, fontWeight: 600, margin: 0, letterSpacing: "-0.015em" }}>The entire remainder after carveouts</h3>
              </div>
              <span className="tag tag-whole">Whole lot</span>
            </div>
            <div className="inv-grid" style={{ gridTemplateColumns: "repeat(auto-fill, minmax(300px, 1fr))" }}>
              <ListingCard item={whole}
                onClick={(id) => onNav("listing", { id })}
                onWatch={onWatch} watching={watching.has(whole.id)} />
            </div>
          </div>
        )}

        {premiums.length > 0 && (
          <div>
            <div className="row between" style={{ alignItems: "flex-end", marginBottom: 18 }}>
              <div>
                <div className="eyebrow" style={{ marginBottom: 8 }}>Premium carveouts · individually auctioned</div>
                <h3 style={{ fontSize: 22, fontWeight: 600, margin: 0, letterSpacing: "-0.015em" }}>High-value pieces, sold separately</h3>
              </div>
              <span className="mono" style={{ fontSize: 12, color: "var(--ink-3)" }}>{premiums.length} listings</span>
            </div>
            <div className="inv-grid" style={{ gridTemplateColumns: "repeat(auto-fill, minmax(300px, 1fr))" }}>
              {premiums.map((p) => (
                <ListingCard key={p.id} item={p}
                  onClick={(id) => onNav("listing", { id })}
                  onWatch={onWatch} watching={watching.has(p.id)} />
              ))}
            </div>
          </div>
        )}
      </section>
    </div>
  );
}

Object.assign(window, { ProjectPage });