// Works gallery with filter tabs.
const { SectionLabel: WLabel, Badge: WBadge } = window.DesignSystem_82a491;

const WORKS = [
  { cat: "新築", t: "陽あたりの平屋", d: "木の質感を活かした住まい", area: "横須賀市", src: "../../assets/photos/hiraya.png?hq2" },
  { cat: "新築", t: "光を取り込むLDK", d: "大開口と現し梁の内観", area: "横須賀市", src: "../../assets/photos/naikan.png?hq2" },
  { cat: "新築", t: "上棟・木組み", d: "職人の手仕事が見える架け方", area: "横須賀市", src: "../../assets/photos/jouto.png?hq2" },
  { cat: "新築", t: "基礎工事", d: "一棟ごとていねいに、土台から", area: "横須賀市", src: "../../assets/photos/kiso.png?hq2" },
  { cat: "リフォーム", t: "浴室まるごと改修", d: "あたたかなユニットバスへ", area: "三浦市", src: "../../assets/photos/bath.png?hq2" },
  { cat: "建具・内装", t: "襖・障子の張替え", d: "畳の表替えとあわせて一新", area: "鎌倉市", src: "../../assets/photos/fusuma.png?hq2" },
  { cat: "屋根・外装", t: "屋根の重ね葺き（カバー工法）", d: "既存屋根の上から軽量金属屋根で", area: "横浜市", src: "../../assets/photos/roof.png?hq2" },
  { cat: "屋根・外装", t: "外壁・フェンスの塗装", d: "洗浄・下地調整から仕上げまで", area: "藤沢市", src: "../../assets/photos/fence.png?hq2" },
];
const FILTERS = ["すべて", "新築", "リフォーム", "建具・内装", "屋根・外装"];

function Works({ bare = false }) {
  const [f, setF] = React.useState("すべて");
  const list = f === "すべて" ? WORKS : WORKS.filter(w => w.cat === f);
  return (
    <section id="works" style={{ padding: "84px 40px", background: "var(--surface-sunken)" }}>
      <div style={{ maxWidth: "var(--container-lg)", margin: "0 auto" }}>
        <div style={{ display: "flex", alignItems: "flex-end", justifyContent: "space-between", flexWrap: "wrap", gap: 20 }}>
          <div>
            {!bare && <WLabel>Our work</WLabel>}
            {!bare && <h2 style={{ fontFamily: "var(--font-mincho)", fontWeight: 700, fontSize: "var(--text-4xl)", color: "var(--text-strong)", margin: "16px 0 0" }}>施工事例</h2>}
            {bare && <p style={{ fontSize: "var(--text-md)", color: "var(--text-muted)", margin: 0 }}>カテゴリーで絞り込めます。</p>}
          </div>
          <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
            {FILTERS.map(x => (
              <button key={x} onClick={() => setF(x)} style={{
                padding: "8px 16px", borderRadius: "var(--radius-full)", cursor: "pointer",
                fontFamily: "var(--font-gothic)", fontWeight: 700, fontSize: "var(--text-sm)",
                border: "1px solid " + (f === x ? "var(--ai-700)" : "var(--border-strong)"),
                background: f === x ? "var(--ai-700)" : "transparent",
                color: f === x ? "#fff" : "var(--text-muted)",
                transition: "all var(--duration-fast) var(--ease-out)",
              }}>{x}</button>
            ))}
          </div>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 22, marginTop: 36 }}>
          {list.map((w, i) => (
            <div key={i} style={{ background: "var(--surface-card)", borderRadius: "var(--radius-lg)", overflow: "hidden", boxShadow: "var(--shadow-sm)", cursor: "pointer", transition: "box-shadow var(--duration-base) var(--ease-out)" }}
              onMouseEnter={e => e.currentTarget.style.boxShadow = "var(--shadow-lg)"}
              onMouseLeave={e => e.currentTarget.style.boxShadow = "var(--shadow-sm)"}>
              <window.Photo src={w.src} cap={"施工写真 / " + w.cat} style={{ height: 180 }} />
              <div style={{ padding: "18px 20px 22px" }}>
                <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 10 }}>
                  <WBadge tone="accent" size="sm">{w.cat}</WBadge>
                  <span style={{ fontSize: "var(--text-xs)", color: "var(--text-subtle)" }}>{w.area}</span>
                </div>
                <h3 style={{ fontFamily: "var(--font-gothic)", fontWeight: 900, fontSize: "var(--text-lg)", color: "var(--text-strong)", margin: "0 0 4px" }}>{w.t}</h3>
                <p style={{ fontSize: "var(--text-sm)", color: "var(--text-muted)", margin: 0 }}>{w.d}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

window.Works = Works;