function FeaturedWork() {
  const { useState } = React;
  const filters = ["All work", "Patios", "Driveways", "Walls", "Lawn care"];
  const [active, setActive] = useState("All work");

  const projects = [
    {tag: "Patios", town: "Bedford", title: "Richcliff rear terrace", sqft: "640 sq ft", tone: "linear-gradient(135deg, #B2593A 0%, #705C47 60%, #2A2F35 100%)"},
    {tag: "Driveways", town: "Chappaqua", title: "Blu 60 cobble driveway", sqft: "2,100 sq ft", tone: "linear-gradient(135deg, #4C5A66 0%, #17191D 100%)"},
    {tag: "Walls", town: "Mount Kisco", title: "Drystack retaining wall", sqft: "85 lf", tone: "linear-gradient(135deg, #6B7682 0%, #0B0E12 100%)"},
    {tag: "Patios", town: "Armonk", title: "Pool-deck and kitchen", sqft: "1,200 sq ft", tone: "linear-gradient(135deg, #CF7248 0%, #38434D 100%)"},
    {tag: "Lawn care", town: "Katonah", title: "Estate lawn program", sqft: "3.2 acres", tone: "linear-gradient(135deg, #478A62 0%, #0F2E1D 100%)"},
    {tag: "Driveways", town: "Pleasantville", title: "Courtyard motor court", sqft: "1,800 sq ft", tone: "linear-gradient(135deg, #8F9AA6 0%, #17191D 100%)"},
  ];

  const visible = active === "All work" ? projects : projects.filter(p => p.tag === active);

  return (
    <section id="work" style={{background: "var(--white)", padding: "96px 32px"}}>
      <div style={{maxWidth: 1200, margin: "0 auto"}}>
        <div style={{display: "flex", alignItems: "flex-end", justifyContent: "space-between", flexWrap: "wrap", gap: 24, marginBottom: 40}}>
          <div style={{maxWidth: 700}}>
            <span className="eyebrow">Recent work</span>
            <h2 style={{fontFamily: "var(--font-display)", fontSize: 44, fontWeight: 800, letterSpacing: "-0.02em", lineHeight: 1.02, marginTop: 12, textTransform: "uppercase"}}>
              Five hundred patios. A thousand driveways. Nineteen years on.
            </h2>
          </div>
          <a href="#" style={{display: "inline-flex", alignItems: "center", gap: 6, fontWeight: 700, fontSize: 13, letterSpacing: "0.04em", textTransform: "uppercase", textDecoration: "none", color: "var(--ink-900)"}}>
            See all projects <Icon name="arrowRight" size={14}/>
          </a>
        </div>

        <div style={{display: "flex", flexWrap: "wrap", gap: 8, marginBottom: 28}}>
          {filters.map(f => (
            <button key={f} onClick={() => setActive(f)} className="pill" style={{
              cursor: "pointer",
              background: active === f ? "var(--ink-900)" : "var(--white)",
              color: active === f ? "var(--white)" : "var(--ink-900)",
              border: active === f ? "1px solid var(--ink-900)" : "1px solid var(--n-200)",
            }}>{f}</button>
          ))}
        </div>

        <div style={{display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 20}}>
          {visible.map((p, i) => (
            <div key={i} className="card" style={{padding: 0, overflow: "hidden"}}>
              <div style={{height: 240, background: p.tone, position: "relative"}}>
                <div style={{position: "absolute", inset: 0, opacity: 0.07, backgroundImage: "url(../../assets/illustrations/paver-texture.svg)", backgroundSize: "120px"}}/>
                <span style={{position: "absolute", top: 14, left: 14, padding: "4px 10px", borderRadius: 2, background: "rgba(255, 255, 255, 0.95)", fontSize: 10, fontWeight: 700, letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--ink-900)"}}>Before ↔ After</span>
              </div>
              <div style={{padding: 20}}>
                <span className="eyebrow">{p.tag} · {p.town}</span>
                <h4 style={{fontFamily: "var(--font-display)", fontSize: 18, fontWeight: 800, marginTop: 8, letterSpacing: "-0.01em", textTransform: "uppercase"}}>{p.title}</h4>
                <div style={{marginTop: 14, display: "flex", justifyContent: "space-between", fontSize: 12, color: "var(--fg-muted)", fontFamily: "var(--font-mono)"}}>
                  <span>{p.sqft}</span><span>View case study →</span>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
window.FeaturedWork = FeaturedWork;