/* Projects · Sustainability */
const { useState: useStateC } = React;

function Projects() {
  const { projects, projectFilters } = window.TRILOK;
  const [filter, setFilter] = useStateC("All");
  const shown = filter === "All" ? projects : projects.filter((p) => p.cat === filter);
  return (
    <section className="section" id="projects" style={{ background: "var(--surface-2)", borderBlock: "1px solid var(--line)" }}>
      <div className="wrap">
        <div className="sec-head reveal">
          <div>
            <span className="kicker"><span className="num">03</span> — Projects</span>
            <h2 className="sec-head__title">Cast into the ground across India.</h2>
          </div>
          <p className="sec-head__aside">From the Surat Diamond Bourse to national highways and freight corridors, our precast carries water, holds ground and marks boundaries on landmark sites.</p>
        </div>

        <div className="proj-filters reveal">
          {projectFilters.map((f) => (
            <button key={f} className={"chip" + (filter === f ? " active" : "")} onClick={() => setFilter(f)}>{f}</button>
          ))}
        </div>

        <div className="proj-grid reveal">
          {shown.map((p) => (
            <a className={"proj" + (p.feat && filter === "All" ? " feat" : "")} href="#projects" key={p.id}>
              <div className="proj__media">
                <span className="proj__cat">{p.cat}</span>
                <image-slot id={p.id} shape="rect" placeholder={"Drop a photo · " + p.title}></image-slot>
              </div>
              <div className="proj__meta">
                <div>
                  <div className="proj__title">{p.title}</div>
                  <div className="proj__loc">{p.loc}</div>
                </div>
                <div className="proj__prod">{p.prod}</div>
              </div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

function Sustainability() {
  const items = window.TRILOK.sustain;
  return (
    <section className="section sustain on-dark" id="sustainability">
      <div className="wrap">
        <div className="sustain__grid">
          <div className="reveal">
            <span className="kicker on-dark"><span className="num">04</span> — Sustainability</span>
            <h2 style={{ marginTop: 18 }}>Precast is the quieter way to build.</h2>
            <p className="sustain__lead">Casting in a controlled yard — not on an open site — means less waste, less disruption, and concrete that lasts long enough to stay out of a landfill.</p>
            <div className="sustain__list">
              {items.map((it) => (
                <div className="sustain__item" key={it.title}>
                  <span className="sustain__ic"><i data-lucide={it.icon}></i></span>
                  <div>
                    <h4>{it.title}</h4>
                    <p>{it.desc}</p>
                  </div>
                </div>
              ))}
            </div>
          </div>
          <div className="sustain__viz reveal">
            <image-slot id="sustain-viz" shape="rect" placeholder="Drop yard / sustainability photo · 1200 × 1200px (square)"></image-slot>
            <div className="sustain__badge">
              <div className="b-num">M75</div>
              <div className="b-txt">peak concrete grade — engineered for a maintenance-free service life.</div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Projects, Sustainability });