/* ===================================================================
   GLOBALSTAFF — Projects (featured completed installations)
   Replaces the coverage map. Uses <image-slot> so the user drops in
   their own real project photography (persists across reloads).
   =================================================================== */

const PROJECTS = [
  {
    id: "proj-harbour",
    name: "Harbour House Facade",
    cat: "Facade Cladding",
    location: "Tallinn, EE",
    work: "Ventilated granite facade",
    photo: "uploads/harbour-1781250159496.png",
    rid: "photoHarbour",
  },
  {
    id: "proj-villa",
    name: "Lakeside Villa",
    cat: "Natural Stone",
    location: "Pärnu, EE",
    work: "Limestone walls & flooring",
    photo: "uploads/villa-1781249909424.png",
    rid: "photoVilla",
  },
  {
    id: "proj-plaza",
    name: "Old Town Plaza",
    cat: "Landscape",
    location: "Tartu, EE",
    work: "Granite paving & steps",
    photo: "uploads/plaza-1781250009363.png",
    rid: "photoPlaza",
  },
  {
    id: "proj-atrium",
    name: "Office Atrium",
    cat: "Decorative",
    location: "Rīga, LV",
    work: "Marble feature wall",
    photo: "uploads/atrium-1781250101891.png",
    rid: "photoAtrium",
  },
];

function ProjectCard({ p }) {
  return (
    <article className="project-card">
      <div className="project-media">
        <image-slot
          id={p.id}
          shape="rect"
          fit="cover"
          src={(typeof window !== "undefined" && window.__resources && window.__resources[p.rid]) || p.photo}
          placeholder={"Drop project photo · " + p.name}
        ></image-slot>
        <span className="project-sheet mono">SHEET · {p.cat}</span>
      </div>
      <div className="project-info">
        <div className="project-info-head">
          <h3 className="project-name">{p.name}</h3>
          <span className="project-arrow">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
          </span>
        </div>
        <div className="project-meta">
          <span className="project-meta-item">
            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M12 21c-5-5.5-8-9-8-12a8 8 0 0 1 16 0c0 3-3 6.5-8 12z"/><circle cx="12" cy="9" r="2.5"/></svg>
            {p.location}
          </span>
          <span className="project-meta-item">
            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><rect x="4" y="4" width="16" height="16" rx="1"/><path d="M4 12h16M12 4v16"/></svg>
            {p.work}
          </span>
        </div>
      </div>
    </article>
  );
}

function Projects() {
  return (
    <section className="section projects-section" id="projects">
      <div className="container">
        <div className="section-head">
          <div>
            <span className="kicker reveal">Projects</span>
            <h2 className="h2 reveal d1">Selected completed stonework</h2>
          </div>
          <p className="body section-head-sub reveal d2">
            A selection of finished installations across the Baltics, each presented as a project
            sheet — photograph and construction detail together. Drop your own photography onto any
            card to replace it.
          </p>
        </div>

        <div className="projects-grid">
          {PROJECTS.map((p) => (
            <ProjectCard key={p.id} p={p} />
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Projects });