/* global React, Ico, Ph, useState, PROJECTS, CATS, PROCESS, TESTIMONIALS */

function Gallery() {
  const [cat, setCat] = useState("All Work");
  const shown = PROJECTS.filter((p) => cat === "All Work" || p.cat === cat);
  return (
    <section className="section gallery" id="work">
      <div className="wrap">
        <div className="sec-head reveal">
          <div>
            <span className="eyebrow">Selected work</span>
            <h2 className="h2" style={{ marginTop: 18 }}>Rooms we've finished.</h2>
          </div>
          <p className="lead">A few recent projects across the area. Filter by room — every one was built and installed by our own crew.</p>
        </div>
        <div className="filters reveal">
          {CATS.map((c) => (
            <button key={c} className={`filter ${c === cat ? "active" : ""}`} onClick={() => setCat(c)}>{c}</button>
          ))}
        </div>
        <div className="grid-gallery">
          {shown.map((p) => (
            <article key={p.t} className={`gitem ${p.size}`}>
              <Ph dark src={p.src} label={p.t} />
              <span className="gitem-tag">{p.tag}</span>
              <div className="gitem-meta">
                <div className="t">{p.t}</div>
                <div className="s">{p.cat}</div>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

function Process() {
  return (
    <section className="section" id="process">
      <div className="wrap">
        <div className="sec-head reveal">
          <div>
            <span className="eyebrow">How it works</span>
            <h2 className="h2" style={{ marginTop: 18 }}>Four steps, no surprises.</h2>
          </div>
          <p className="lead">A clear path from first measurement to final walk-through — you always know what's happening and what's next.</p>
        </div>
        <div className="proc-grid">
          {PROCESS.map((s, i) => (
            <div key={s.n} className="proc-step reveal" style={{ transitionDelay: `${i * 0.08}s` }}>
              <span className="dot" />
              <span className="pn">{s.n}</span>
              <h3>{s.t}</h3>
              <p>{s.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function About() {
  return (
    <section className="section about" id="about">
      <div className="wrap about-grid">
        <div className="reveal">
          <span className="eyebrow">Our story</span>
          <h2 className="h2" style={{ marginTop: 18, marginBottom: 26 }}>A family shop that<br />never outsourced the craft.</h2>
          <p>Kevin Foley started building cabinets in a two-car garage in 2009, with a table saw, a borrowed truck, and a stubborn belief that the people who design a kitchen should be the same ones who install it.</p>
          <p>Fifteen years later we've grown into a full workshop — but nothing left the building. We still template, cut, and finish every cabinet and slab ourselves. No subcontractors, no hand-offs, no one to blame but us if a seam isn't perfect. It rarely isn't.</p>
          <div className="about-sig">Kevin Foley
            <small>Founder &amp; lead craftsman</small>
          </div>
        </div>
        <div className="about-figure reveal" style={{ transitionDelay: ".1s" }}>
          <Ph dark src="images/projects/builtin-fireplace.jpg" label="Custom millwork — live-edge stone fireplace" />
        </div>
      </div>
    </section>
  );
}

function Testimonials() {
  return (
    <section className="section" id="reviews">
      <div className="wrap">
        <div className="sec-head reveal">
          <div>
            <span className="eyebrow">Kind words</span>
            <h2 className="h2" style={{ marginTop: 18 }}>Homeowners, after move-in.</h2>
          </div>
          <p className="lead">We'd rather let the work — and the people who live with it — do the talking.</p>
        </div>
        <div className="test-grid">
          {TESTIMONIALS.map((t, i) => (
            <figure key={t.n} className="test-card reveal" style={{ transitionDelay: `${i * 0.08}s` }}>
              <div className="stars">{Array.from({ length: 5 }).map((_, k) => <Ico.star key={k} />)}</div>
              <blockquote>"{t.q}"</blockquote>
              <figcaption className="test-who">
                <span className="test-av">{t.i}</span>
                <span>
                  <span className="n" style={{ display: "block" }}>{t.n}</span>
                  <span className="l">{t.l}</span>
                </span>
              </figcaption>
            </figure>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Gallery, Process, About, Testimonials });