const ITEMS = [
  { id: 'g1', cat: 'Ceramic', title: 'Ceramic Coating', sub: 'Audi RS3 · Cannock', span: 2 },
  { id: 'g2', cat: 'Enhancement', title: 'Paint Enhancement', sub: 'BMW M4 · Lichfield' },
  { id: 'g3', cat: 'Interior', title: 'Interior Restoration', sub: 'Range Rover · Stafford' },
  { id: 'g4', cat: 'Enhancement', title: 'Gloss Boost', sub: 'Mercedes C-Class · Rugeley' },
  { id: 'g5', cat: 'Ceramic', title: 'Wheel Face Coating', sub: 'VW Golf GTI · Hednesford', span: 2 },
  { id: 'g6', cat: 'Interior', title: 'Leather Care', sub: 'Audi A6 · Burntwood' },
  { id: 'g7', cat: 'Enhancement', title: 'Showroom Detail', sub: 'Mini Cooper S · Cannock' },
  { id: 'g8', cat: 'Ceramic', title: 'Glass Coating', sub: 'Ford Focus · Burton upon Trent' },
];
const CATS = ['All', 'Ceramic', 'Enhancement', 'Interior'];

function Tile({ it }) {
  return (
    <div className="card" style={{ position: 'relative', overflow: 'hidden', minHeight: 240, gridColumn: it.span ? 'span 2' : 'auto' }}>
      <image-slot id={'gal-' + it.id} placeholder={it.title + ' photo'} shape="rect" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }}></image-slot>
      <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(0,0,0,0.05), rgba(0,0,0,0.82))', pointerEvents: 'none' }}></div>
      <div style={{ position: 'absolute', left: 18, bottom: 16, zIndex: 2 }}>
        <span className="pill pill--gold" style={{ marginBottom: 10 }}>{it.cat}</span>
        <div style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 19, textTransform: 'uppercase', marginTop: 8 }}>{it.title}</div>
        <div style={{ fontSize: 13, color: 'var(--smoke)' }}>{it.sub}</div>
      </div>
    </div>
  );
}

function Portfolio() {
  const [cat, setCat] = React.useState('All');
  const shown = cat === 'All' ? ITEMS : ITEMS.filter(i => i.cat === cat);
  return (
    <section className="section" data-screen-label="Portfolio">
      <div className="shell">
        <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap', marginBottom: 34 }}>
          {CATS.map(c => (
            <button key={c} onClick={() => setCat(c)} className="btn" style={{
              padding: '11px 20px', fontSize: 12.5,
              background: cat === c ? 'var(--lambo-gold)' : 'transparent',
              color: cat === c ? '#0a0a0a' : '#fff',
              borderColor: cat === c ? 'var(--lambo-gold)' : 'rgba(255,255,255,0.28)',
            }}>{c}</button>
          ))}
        </div>
        <div className="grid" style={{ gridTemplateColumns: 'repeat(4, 1fr)' }} id="gal-grid">
          {shown.map(it => <Tile key={it.id} it={it} />)}
        </div>
      </div>
      <style>{`#gal-grid{grid-auto-rows:240px} @media (max-width:900px){ #gal-grid{grid-template-columns:repeat(2,1fr)!important} } @media (max-width:560px){ #gal-grid{grid-template-columns:1fr!important} #gal-grid .card{grid-column:auto!important} }`}</style>
    </section>
  );
}

function App() {
  return (
    <div>
      <Nav active="Gallery" />
      <section style={{ paddingTop: 130, paddingBottom: 20 }} data-screen-label="Gallery Hero">
        <div className="shell">
          <Eyebrow>Our Work</Eyebrow>
          <h1 className="display h-hero" style={{ marginTop: 16 }}>Gallery</h1>
          <p className="lede" style={{ marginTop: 16 }}>Real vehicles, real driveways, real results. Drag the sliders to reveal the transformation.</p>
        </div>
      </section>

      <section style={{ paddingBottom: 40 }} data-screen-label="Sliders">
        <div className="shell">
          <div className="grid" style={{ gridTemplateColumns: '1fr 1fr', gap: 28 }} id="ba-grid">
            <Reveal><BeforeAfter id="gal-ba1" caption="Gold Enhancement Detail · BMW M4" height={360} /></Reveal>
            <Reveal delay={100}><BeforeAfter id="gal-ba2" beforeLabel="Neglected" afterLabel="Restored" caption="Platinum Showroom Detail · Range Rover" height={360} /></Reveal>
          </div>
        </div>
        <style>{`@media (max-width:820px){ #ba-grid{grid-template-columns:1fr!important} }`}</style>
      </section>

      <Portfolio />
      <ReviewsSection />
      <CTABand title="Want your car to look like this?" />
      <Footer />
      <StickyActions />
    </div>
  );
}
ReactDOM.createRoot(document.getElementById('root')).render(<App />);