const { Button, Icon, Badge, ProjectCard } = window.RinseNRepeatDesignSystem_9f80bd;

function ProjectsScreen({ go }) {
  const D = window.RNR_DATA;
  const [filter, setFilter] = React.useState('All');
  const all = [
    ...D.projects,
    { image: 'assets/photos/after-walkway.jpeg', category: 'Residential', caption: 'Walkway paver cleaning in Plainfield, IL' },
    { image: 'assets/photos/after-brick.jpeg', category: 'Commercial', caption: 'Brick facade wash in Naperville, IL' },
    { image: 'assets/photos/window.jpeg', category: 'Residential', caption: 'Full window detail in Plainfield, IL' },
  ];
  const shown = filter === 'All' ? all : all.filter((p) => p.category === filter);
  return (
    <div>
      {window.RNRPageHead({ eyebrow: 'Our Work', title: 'Before &', highlight: 'after', sub: 'A look at recent residential and commercial jobs across the Plainfield & Naperville area.' })}
      <section style={{ background: 'var(--paper)', padding: 'clamp(36px,6vw,48px) 0 clamp(60px,9vw,88px)' }}>
        <div style={{ maxWidth: 'var(--container-max)', margin: '0 auto', padding: '0 var(--gutter-x)' }}>
          <div style={{ display: 'flex', gap: 10, marginBottom: 32, flexWrap: 'wrap' }}>
            {['All', 'Residential', 'Commercial'].map((f) => {
              const active = filter === f;
              return (
                <button key={f} onClick={() => setFilter(f)}
                  style={{ padding: '9px 20px', borderRadius: 'var(--radius-pill)', cursor: 'pointer', fontFamily: 'var(--font-body)', fontWeight: 600, fontSize: 14, transition: 'var(--t-all)', background: active ? 'var(--orange-500)' : '#fff', color: active ? '#fff' : 'var(--gray-700)', border: active ? '1.5px solid var(--orange-500)' : '1.5px solid var(--gray-200)' }}>
                  {f}
                </button>
              );
            })}
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit,minmax(min(300px,100%),1fr))', gap: 22 }}>
            {shown.map((p, i) => <ProjectCard key={i} image={p.image} category={p.category} caption={p.caption} height={250} />)}
          </div>
          <div style={{ textAlign: 'center', marginTop: 52 }}>
            <Button variant="primary" size="lg" iconRight={<Icon name="arrow-right" size={20} />} onClick={() => go('Book')}>Get your property on this list</Button>
          </div>
        </div>
      </section>
    </div>
  );
}
window.RNRProjects = ProjectsScreen;