const { LogoLockup, Badge, Button, StickerHeading, Tag, Card, StatBlock, SectionRule, MarqueeStrip, LinkOut, IconButton, Tabs, Input, Select, Checkbox, Switch, Toast, Dialog } = window.RonTinsleyDesignSystem_69d69c;


const NAV=[['home','Home'],['press','Press'],['booking','Booking'],['sets','Sets'],['gallery','Gallery']];

const SOCIALS=[
  {label:'Instagram — @dj_ron_tinsley_blkthor',icon:'instagram',href:'https://www.instagram.com/dj_ron_tinsley_blkthor/'},
  {label:'Twitch — House Nation Music',icon:'twitch',href:'https://www.twitch.tv/house_nation_music'},
  {label:'YouTube — The Red Lab',icon:'youtube',href:'https://www.youtube.com/@T.R.L.1'},
  {label:'Email Ron Tinsley',icon:'mail',href:'mailto:sgttinsley@gmail.com'},
];

const PROJECTS=[
  ['Dot Card — all my links','https://dot.cards/rtinsley'],
  ['Mixcloud','https://www.mixcloud.com/ron-tinsley/'],
  ['Twitch — House Nation Music','https://www.twitch.tv/house_nation_music'],
  ['TikTok — The Red Lab','https://www.tiktok.com/@djrontinsley_theredlab1'],
  ['YouTube — T.R.L.','https://www.youtube.com/@T.R.L.1'],
  ['YouTube — DaBooth312','https://www.youtube.com/@DaBooth312'],
  ['Magnifico Coffee','https://magnificocoffee.com/'],
];

function SiteHeader({route,go}){
  return (
    <header style={{position:'sticky',top:0,zIndex:20,background:'#000000e6',backdropFilter:'saturate(140%) blur(14px)',WebkitBackdropFilter:'saturate(140%) blur(14px)',borderBottom:'1px solid var(--line-1)'}}>
      <div style={{maxWidth:'var(--w-page)',margin:'0 auto',padding:'16px var(--gutter)',display:'flex',alignItems:'center',gap:'var(--s-5)',flexWrap:'wrap'}}>
        <a href="#home" aria-label="DJ Ron Tinsley — home" onClick={e=>{e.preventDefault();go('home');}} style={{borderBottom:0,display:'flex'}}><LogoLockup wordmark tagline height={46}/></a>
        <nav aria-label="Primary" style={{display:'flex',gap:4,marginLeft:'auto'}}>
          {NAV.map(([k,l])=>(
            <button key={k} type="button" onClick={()=>go(k)} aria-current={route===k?'page':undefined}
              style={{background:'none',border:0,cursor:'pointer',padding:'9px 13px',fontFamily:'var(--font-mono)',fontSize:12,letterSpacing:'var(--tr-label)',textTransform:'uppercase',color:route===k?'var(--white-hot)':'var(--text-muted)',borderBottom:route===k?'2px solid var(--red-signal)':'2px solid transparent'}}>{l}</button>
          ))}
        </nav>
        <Badge variant="live" dot>Live Fri</Badge>
        <Button size="sm" onClick={()=>go('booking')}>Book</Button>
      </div>
    </header>
  );
}

function SiteFooter(){
  return (
    <footer style={{borderTop:'1px solid var(--line-1)',marginTop:'var(--s-11)'}}>
      <div style={{maxWidth:'var(--w-page)',margin:'0 auto',padding:'var(--s-9) var(--gutter)',display:'grid',gridTemplateColumns:'repeat(auto-fit,minmax(230px,1fr))',gap:'var(--s-8)'}}>
        <div>
          <LogoLockup wordmark tagline height={44}/>
          <p style={{color:'var(--text-muted)',fontSize:14,lineHeight:1.7,maxWidth:'34ch',marginTop:16}}>Chicago house music. Marine Corps veteran. I travel for the right room &mdash; domestic or international.</p>
          <address style={{fontStyle:'normal',marginTop:16,display:'grid',gap:7,fontFamily:'var(--font-mono)',fontSize:12,letterSpacing:'.05em',color:'var(--white-quiet)'}}>
            <a href="tel:+13128832989" style={{borderBottom:0,color:'inherit'}}>(312) 883-2989</a>
            <a href="mailto:sgttinsley@gmail.com" style={{borderBottom:0,color:'var(--red-signal)'}}>sgttinsley@gmail.com</a>
            <span>Chicago, Illinois</span>
          </address>
        </div>
        <div>
          <h2 className="rt-label" style={{color:'var(--text-muted)'}}>Follow me</h2>
          <ul style={{display:'flex',gap:9,marginTop:16,padding:0,listStyle:'none'}}>
            {SOCIALS.map(s=>(
              <li key={s.icon}><a className="rt-iconbtn" href={s.href} rel="me noopener" aria-label={s.label} title={s.label} style={{borderBottom:0}}><i data-lucide={s.icon} aria-hidden="true"/></a></li>
            ))}
          </ul>
        </div>
        <div>
          <h2 className="rt-label" style={{color:'var(--text-muted)'}}>My other projects</h2>
          <ul style={{listStyle:'none',margin:'16px 0 0',padding:0,display:'grid',gap:11}}>
            {PROJECTS.map(([n,h])=>(
              <li key={n}><a href={h} rel="me noopener" style={{fontSize:14,color:'var(--white-quiet)',borderBottom:0,display:'inline-flex',gap:7,alignItems:'baseline'}}>{n}<span aria-hidden="true" style={{color:'var(--red-signal)',fontSize:11}}>&#8599;</span></a></li>
            ))}
          </ul>
        </div>
      </div>
      <p style={{borderTop:'1px solid var(--line-1)',padding:'16px var(--gutter)',textAlign:'center',font:'var(--type-label)',letterSpacing:'var(--tr-label)',textTransform:'uppercase',color:'var(--grey-dead)',margin:0}}>&copy; {new Date().getFullYear()} DJ Ron Tinsley &middot; BlkThor Music &middot; Chicago, Illinois</p>
    </footer>
  );
}
Object.assign(window,{SiteHeader,SiteFooter});

const SERVICES=[
  {h:'Nightclubs & underground',b:'Residency or one-off. I read the floor live and build the set off it — no pre-planned playlist.',icon:'disc-3'},
  {h:'Festivals & large events',b:'We Are House Music, Techno Harbor, Taco\u2019s & Tamale Festival. I work to a hard set time and hit it.',icon:'tent'},
  {h:'Private & corporate',b:'Rooftops, day parties, brand events. Quiet load-in, clean edits, and I dress for the room.',icon:'building-2'},
  {h:'Radio & streaming',b:'DaBooth312 on 88.9 FM WIIT, plus The Red Lab every Friday night on Mixcloud, Twitch and TikTok.',icon:'radio'},
];

const GENRES=['Afro House','Afro Latin','Bass House','Deep House','Garage House','Classic House','Minimal Deep Tech','Organic House','Progressive House','Tech House','Techno','Chicago Original'];

function Hero({go}){
  return (
    <section aria-labelledby="hero-h" style={{position:'relative',minHeight:'min(78vh,720px)',display:'grid',alignItems:'end',overflow:'hidden',borderBottom:'1px solid var(--line-1)'}}>
      <img src="portrait-booth-hires.jpg" alt="DJ Ron Tinsley seated in a booth at a Chicago venue" width="810" height="540" decoding="async" fetchpriority="high" style={{position:'absolute',inset:0,width:'100%',height:'100%',objectFit:'cover',objectPosition:'68% 32%'}}/>
      <span aria-hidden="true" style={{position:'absolute',inset:0,background:'linear-gradient(180deg,#00000080 0%,#00000024 42%,#000000d9 97%)'}}/>
      <span aria-hidden="true" style={{position:'absolute',inset:0,background:'linear-gradient(90deg,#000000cc 0%,#000000ad 34%,#00000040 62%,transparent 82%)'}}/>
      <span aria-hidden="true" style={{position:'absolute',inset:0,backgroundImage:'var(--grain-url)',opacity:'var(--grain-opacity)',mixBlendMode:'screen'}}/>
      <div style={{position:'relative',maxWidth:'var(--w-page)',margin:'0 auto',padding:'0 var(--gutter) var(--s-10)',width:'100%',boxSizing:'border-box'}}>
        <p className="rt-label" style={{letterSpacing:'var(--tr-label-wide)',color:'var(--red-signal)',margin:0}}>Chicago, IL &middot; House music since 2014</p>
        <StickerHeading as="h1" id="hero-h" size="var(--fs-h1)" style={{marginTop:16}}>DJ Ron Tinsley</StickerHeading>
        <p className="rt-lead" style={{color:'var(--white-quiet)',maxWidth:'46ch',marginTop:18}}>Played overseas in Asia. Local events and venues from the West Coast to the East Coast. Established in Chicago.</p>
        <div style={{display:'flex',flexWrap:'wrap',gap:13,marginTop:34}}>
          <Button size="lg" onClick={()=>go('booking')} iconRight={<i data-lucide="arrow-right" aria-hidden="true"/>}>Book me</Button>
          <Button size="lg" variant="sticker" onClick={()=>go('press')}>EPK</Button>
        </div>
      </div>
    </section>
  );
}

function HomeScreen({go}){
  return (
    <>
      <Hero go={go}/>
      <MarqueeStrip items={['The Red Lab — every Friday night','DaBooth312 — 88.9 FM WIIT','Available internationally','$100/hr — (312) 883-2989','Chicago, Illinois']}/>

      <section aria-labelledby="about-h" style={{maxWidth:'var(--w-page)',margin:'0 auto',padding:'var(--pad-section) var(--gutter)'}}>
        <SectionRule label="01 — Who I am"/>
        <h2 id="about-h" className="rt-sr-only">About Ron Tinsley</h2>
        <div style={{display:'grid',gridTemplateColumns:'repeat(auto-fit,minmax(280px,1fr))',gap:'var(--s-8)',marginTop:'var(--s-7)'}}>
          <p className="rt-lead" style={{margin:0}}>I was born and raised in Chicago, the city that invented house music. It found me in the early 80&rsquo;s and it has not let go since.</p>
          <div style={{fontSize:15,lineHeight:1.75,color:'var(--white-quiet)'}}>
            <p style={{margin:0}}>I work out of Chicago, Illinois &mdash; the birthplace of house music. Every Friday night I run <strong style={{color:'var(--white-paper)',fontWeight:600}}>The Red Lab</strong>, a live podcast I stream on Mixcloud, Twitch and TikTok. I&rsquo;m also Resident DJ and Co-Host on <strong style={{color:'var(--white-paper)',fontWeight:600}}>DaBooth312</strong>, 88.9 FM WIIT.</p>
            <p style={{margin:'16px 0 0'}}>I served in the Marine Corps from 1992 to 2017 and carried the music with me the whole way &mdash; my first big international booking was the Hard Rock Caf&eacute; in Hong Kong. The full story is in my press kit.</p>
          </div>
        </div>
        <h3 className="rt-label" style={{marginTop:'var(--s-7)',color:'var(--text-muted)'}}>What I play</h3>
        <ul style={{display:'flex',flexWrap:'wrap',gap:9,marginTop:13,padding:0,listStyle:'none'}}>
          {GENRES.map(t=><li key={t}><Tag>{t}</Tag></li>)}
        </ul>
        <div style={{display:'grid',gridTemplateColumns:'repeat(auto-fit,minmax(160px,1fr))',gap:'var(--s-7)',marginTop:'var(--s-9)',paddingTop:'var(--s-7)',borderTop:'1px solid var(--line-1)'}}>
          <StatBlock value="10+" label="Years professional"/>
          <StatBlock value="40+" label="Years in house music" accent/>
          <StatBlock value="11" label="Sub-genres I play"/>
          <StatBlock value="3" label="Continents I've played"/>
        </div>
      </section>

      <section aria-labelledby="services-h" style={{maxWidth:'var(--w-page)',margin:'0 auto',padding:'0 var(--gutter) var(--pad-section)'}}>
        <SectionRule label="02 — What I do"/>
        <h2 id="services-h" className="rt-sr-only">Services</h2>
        <ul style={{display:'grid',gridTemplateColumns:'repeat(auto-fit,minmax(260px,1fr))',gap:'var(--s-4)',marginTop:'var(--s-7)',padding:0,listStyle:'none'}}>
          {SERVICES.map(s=>(
            <li key={s.h}>
              <Card variant="lift" style={{height:'100%',boxSizing:'border-box'}}>
                <span style={{color:'var(--red-signal)',display:'block'}}><i data-lucide={s.icon} aria-hidden="true"/></span>
                <h3 style={{fontSize:'var(--fs-h3)',marginTop:16}}>{s.h}</h3>
                <p style={{color:'var(--white-quiet)',fontSize:15,lineHeight:1.6,marginTop:11,marginBottom:0}}>{s.b}</p>
              </Card>
            </li>
          ))}
        </ul>
      </section>

      <section aria-labelledby="redlab-h" style={{position:'relative',overflow:'hidden',borderTop:'1px solid var(--line-1)',borderBottom:'1px solid var(--line-1)',marginBottom:'var(--pad-section)'}}>
        <img src="redlab-door-texture.jpg" alt="" width="1080" height="574" loading="lazy" decoding="async" style={{position:'absolute',right:0,top:0,width:'54%',height:'100%',objectFit:'cover',objectPosition:'36% 40%'}}/>
        <span aria-hidden="true" style={{position:'absolute',inset:0,background:'linear-gradient(90deg,#000 0%,#000 38%,#000000cc 52%,transparent 78%)'}}/>
        <div style={{position:'relative',maxWidth:'var(--w-page)',margin:'0 auto',padding:'var(--pad-section) var(--gutter)'}}>
          <p className="rt-label" style={{letterSpacing:'var(--tr-label-wide)',color:'var(--red-signal)',margin:0}}>My weekly show</p>
          <h2 id="redlab-h" style={{fontSize:'var(--fs-h1)',marginTop:16}}>The Red Lab</h2>
          <p className="rt-lead" style={{color:'var(--white-quiet)',maxWidth:'36ch',marginTop:20}}>A live podcast, Friday nights, guest format. I started it in 2014 and I have not missed the slot since.</p>
          <div style={{display:'flex',gap:13,marginTop:27,flexWrap:'wrap'}}>
            <Button as="a" href="https://www.twitch.tv/house_nation_music" rel="me noopener" iconRight={<i data-lucide="arrow-right" aria-hidden="true"/>}>Watch live</Button>
            <Button as="a" href="https://www.mixcloud.com/ron-tinsley/" rel="me noopener" variant="outline">Past episodes</Button>
            <Button variant="ghost" onClick={()=>go('gallery')} iconRight={<i data-lucide="image" aria-hidden="true"/>}>Photo gallery</Button>
          </div>
        </div>
      </section>

      <section aria-labelledby="elsewhere-h" style={{maxWidth:'var(--w-page)',margin:'0 auto',padding:'0 var(--gutter) var(--pad-section)'}}>
        <SectionRule label="03 — Everywhere else I am"/>
        <h2 id="elsewhere-h" className="rt-sr-only">My other channels and projects</h2>
        <nav aria-label="My other channels and projects" style={{marginTop:'var(--s-6)'}}>
          <LinkOut name="Mixcloud" meta="My set archive &middot; mixcloud.com/ron-tinsley" href="https://www.mixcloud.com/ron-tinsley/" rel="me noopener"/>
          <LinkOut name="Twitch &mdash; House Nation Music" meta="I go live Friday nights" href="https://www.twitch.tv/house_nation_music" rel="me noopener"/>
          <LinkOut name="TikTok &mdash; The Red Lab" meta="@djrontinsley_theredlab1" href="https://www.tiktok.com/@djrontinsley_theredlab1" rel="me noopener"/>
          <LinkOut name="YouTube &mdash; T.R.L." meta="The Red Lab channel" href="https://www.youtube.com/@T.R.L.1" rel="me noopener"/>
          <LinkOut name="YouTube &mdash; DaBooth312" meta="The show I co-host" href="https://www.youtube.com/@DaBooth312" rel="me noopener"/>
          <LinkOut name="Magnifico Coffee" meta="A brand I work with &middot; magnificocoffee.com" href="https://magnificocoffee.com/" rel="noopener"/>
        </nav>
      </section>
    </>
  );
}
Object.assign(window,{HomeScreen});

const SETS=[
  {t:'The Red Lab — Friday night session',len:'2h 04m',tag:'Deep House',newest:true},
  {t:'DaBooth312 — 88.9 FM WIIT guest hour',len:'1h 00m',tag:'Classic House'},
  {t:'Cerise Rooftop — sunset set',len:'1h 30m',tag:'Organic House'},
  {t:'Techno Harbor — festival set',len:'58m',tag:'Techno'},
  {t:'Tulum, Mexico — late set',len:'1h 12m',tag:'Afro House'},
];

const VENUES=['Hard Rock Caf\u00e9 Hong Kong','Tulum & Cancun','The MID','EXIT Night Club','Esmeralda\u2019s','Masada Chicago','Cerise Rooftop','We Are House Music Festival','Techno Harbor','Taco\u2019s & Tamale Festival','Phillynites Radio'];

function Waveform(){
  return (
    <span aria-hidden="true" style={{height:26,display:'flex',alignItems:'flex-end',gap:2}}>
      {Array.from({length:34}).map((_,i)=><span key={i} style={{width:2,height:5+((i*37)%21),background:i%7===0?'var(--red-signal)':'var(--line-2)'}}/>)}
    </span>
  );
}

function SetsScreen(){
  const [filter,setFilter]=React.useState('All');
  const shown=filter==='All'?SETS:SETS.filter(s=>s.tag===filter);
  return (
    <div style={{maxWidth:'var(--w-page)',margin:'0 auto',padding:'var(--s-10) var(--gutter) 0'}}>
      <StickerHeading as="h1" size="var(--fs-h1)">My sets</StickerHeading>
      <p className="rt-lead" style={{color:'var(--white-quiet)',maxWidth:'50ch',marginTop:20}}>Recordings from The Red Lab, DaBooth312 and the festival circuit. Pick a sound and take what you want.</p>

      <div style={{marginTop:'var(--s-8)'}}>
        <Tabs tabs={['All','Deep House','Classic House','Organic House','Techno','Afro House']} value={filter} onChange={setFilter}/>
      </div>

      <ul aria-label="Recorded sets" style={{display:'grid',gap:'var(--s-3)',marginTop:'var(--s-6)',padding:0,listStyle:'none'}}>
        {shown.map(s=>(
          <li key={s.t}>
            <Card variant={s.newest?'cut':'default'} style={{display:'flex',alignItems:'center',gap:'var(--s-5)',flexWrap:'wrap'}}>
              <IconButton label={'Play '+s.t} variant="solid"><i data-lucide="play" aria-hidden="true"/></IconButton>
              <div style={{flex:'1 1 220px',minWidth:0}}>
                <div style={{display:'flex',alignItems:'center',gap:11,flexWrap:'wrap'}}>
                  <h2 style={{fontSize:'var(--fs-h4)'}}>{s.t}</h2>
                  {s.newest?<Badge variant="live" dot>Newest</Badge>:null}
                </div>
                <p className="rt-label" style={{display:'block',marginTop:7,margin:'7px 0 0'}}>{s.len} &middot; {s.tag}</p>
              </div>
              <Waveform/>
              <Button variant="ghost" iconRight={<i data-lucide="download" aria-hidden="true"/>}>Get</Button>
            </Card>
          </li>
        ))}
      </ul>

      <section aria-labelledby="venues-h" style={{marginTop:'var(--s-9)'}}>
        <SectionRule label="Where I've played"/>
        <h2 id="venues-h" className="rt-sr-only">Venues and festivals</h2>
        <ul style={{display:'flex',flexWrap:'wrap',gap:9,marginTop:'var(--s-5)',padding:0,listStyle:'none'}}>
          {VENUES.map(v=><li key={v}><Tag>{v}</Tag></li>)}
        </ul>
      </section>
    </div>
  );
}
Object.assign(window,{SetsScreen});

const EVENT_TYPES=['Nightclub / underground venue','Music festival / large event','Private or corporate event','Rooftop or day party','Radio guest appearance','Residency opportunity','International booking'];
const LENGTHS=[['60','1 hour (my minimum)'],['120','2 hours'],['180','3 hours'],['otc','Open to close']];
const GEAR=['CDJ-2000s or CDJ-3000s','DJM-450 mixer or above','DJM-A9 preferred','Booth monitor','Table at working height'];

function BookingScreen(){
  const [venueGear,setVenueGear]=React.useState(true);
  const [rider,setRider]=React.useState(true);
  const [len,setLen]=React.useState('60');
  const [confirm,setConfirm]=React.useState(false);
  const [sent,setSent]=React.useState(false);
  return (
    <div style={{maxWidth:'var(--w-page)',margin:'0 auto',padding:'var(--s-10) var(--gutter) 0'}}>
      <StickerHeading as="h1" size="var(--fs-h1)">Book me</StickerHeading>
      <p className="rt-lead" style={{color:'var(--white-quiet)',maxWidth:'50ch',marginTop:20}}>Tell me about the room and the date. I&rsquo;ll come back to you with availability and a number.</p>

      <div style={{display:'grid',gridTemplateColumns:'repeat(auto-fit,minmax(300px,1fr))',gap:'var(--s-9)',marginTop:'var(--s-8)',alignItems:'start'}}>
        <Card grain={false} style={{gridColumn:'span 1'}}>
          <form onSubmit={e=>{e.preventDefault();setConfirm(true);}} noValidate>
            <SectionRule label="Booking request"/>
            <div style={{display:'grid',gridTemplateColumns:'repeat(auto-fit,minmax(200px,1fr))',gap:'var(--s-4)',marginTop:'var(--s-6)'}}>
              <Input label="Your name" name="name" autoComplete="name" required placeholder="Who am I talking to?"/>
              <Input label="Email" name="email" type="email" autoComplete="email" required placeholder="you@venue.com"/>
              <Input label="Date of event" name="date" type="date" required/>
              <Select label="What kind of event?" name="eventType" options={EVENT_TYPES}/>
            </div>
            <div style={{marginTop:'var(--s-4)'}}>
              <Input label="Tell me about the room" name="room" multiline rows={4} placeholder="Capacity, sound system, curfew, load-in"/>
            </div>

            <fieldset style={{border:0,padding:0,margin:'var(--s-6) 0 0'}}>
              <legend className="rt-field__label" style={{padding:0}}>How long do you need me?</legend>
              <div style={{display:'flex',flexWrap:'wrap',gap:'var(--s-6)',marginTop:13}}>
                {LENGTHS.map(([v,l])=><Checkbox key={v} radio name="len" label={l} checked={len===v} onChange={()=>setLen(v)}/>)}
              </div>
            </fieldset>

            <div style={{display:'flex',flexWrap:'wrap',gap:'var(--s-6)',marginTop:'var(--s-6)',alignItems:'center'}}>
              <Checkbox label="The venue is providing DJ equipment" checked={venueGear} onChange={()=>setVenueGear(!venueGear)}/>
              <Switch checked={rider} onChange={setRider} label="Send me the gear list"/>
            </div>
            <p style={{fontSize:13,lineHeight:1.7,color:venueGear?'var(--grey-mute)':'var(--red-flare)',margin:'16px 0 0'}}>
              {venueGear
                ? 'If you\u2019re supplying the gear, I need CDJ-2000s or 3000s and a DJM-450 mixer or above \u2014 a DJM-A9 if you have one.'
                : 'If I bring the equipment, a 50% deposit is due when we lock the date.'}
            </p>

            <div style={{display:'flex',gap:13,marginTop:'var(--s-7)',alignItems:'center',flexWrap:'wrap'}}>
              <Button size="lg" type="submit">Send it</Button>
              <span className="rt-label">I read every one of these myself</span>
            </div>
          </form>
        </Card>

        <div style={{display:'grid',gap:'var(--s-4)'}}>
          <Card variant="cut">
            <h2 className="rt-label" style={{color:'var(--text-muted)'}}>My rate</h2>
            <div style={{display:'flex',gap:'var(--s-8)',flexWrap:'wrap',marginTop:16}}>
              <StatBlock value="$100" label="Per hour"/>
              <StatBlock value="1 hr" label="Minimum set" accent/>
            </div>
            <p style={{color:'var(--white-quiet)',fontSize:14,lineHeight:1.7,margin:'20px 0 0'}}>I take cash, CashApp or Zelle. If I&rsquo;m bringing the equipment, 50% up front when we book.</p>
            <p style={{color:'var(--grey-mute)',fontSize:13,lineHeight:1.6,margin:'13px 0 0'}}>Travel outside Chicagoland is billed separately. Call me on <a href="tel:+13128832989">(312) 883-2989</a> or email <a href="mailto:sgttinsley@gmail.com">sgttinsley@gmail.com</a>.</p>
          </Card>

          <Card>
            <h2 className="rt-label" style={{color:'var(--text-muted)'}}>What you get from me</h2>
            <ul style={{margin:'16px 0 0',padding:0,listStyle:'none',display:'grid',gap:11,color:'var(--white-quiet)',fontSize:15}}>
              {['A signed one-page agreement','My full press kit and photos','A call two weeks before the date','Backup USB drives at every gig'].map(x=>(
                <li key={x} style={{display:'flex',gap:11}}><span aria-hidden="true" style={{color:'var(--red-signal)'}}><i data-lucide="check"/></span>{x}</li>
              ))}
            </ul>
          </Card>

          <Card>
            <h2 className="rt-label" style={{color:'var(--text-muted)'}}>What I need in the booth</h2>
            <ul style={{display:'flex',flexWrap:'wrap',gap:9,marginTop:16,padding:0,listStyle:'none'}}>
              {GEAR.map(g=><li key={g}><Tag>{g}</Tag></li>)}
            </ul>
          </Card>

          <div aria-live="polite">{sent?<Toast icon={<i data-lucide="check" aria-hidden="true"/>}>Got it &mdash; I&rsquo;ll be in touch</Toast>:null}</div>
        </div>
      </div>

      <Dialog open={confirm} title="Send this to me?" onClose={()=>setConfirm(false)}
        footer={<><Button variant="ghost" onClick={()=>setConfirm(false)}>Cancel</Button><Button onClick={()=>{setConfirm(false);setSent(true);}}>Send it</Button></>}>
        It goes straight to sgttinsley@gmail.com. I&rsquo;ll come back to you with availability and a number.
      </Dialog>
    </div>
  );
}
Object.assign(window,{BookingScreen});

const RANGE=['Afro House','Afro Latin','Bass House','Deep House','Garage House','Classic House','Minimal Deep Tech','Organic House','Progressive House','Tech House','Techno','Chicago Original'];

function PressScreen(){
  return (
    <div style={{maxWidth:'var(--w-page)',margin:'0 auto',padding:'var(--s-10) var(--gutter) 0'}}>
      <StickerHeading as="h1" size="var(--fs-h1)">EPK</StickerHeading>
      <p className="rt-lead" style={{color:'var(--white-quiet)',maxWidth:'52ch',marginTop:20}}>My biography, career timeline, venue history and photos. Everything you need to put me on a bill, in one download.</p>
      <div style={{display:'flex',gap:13,marginTop:'var(--s-7)',flexWrap:'wrap'}}>
        <Button size="lg" iconRight={<i data-lucide="download" aria-hidden="true"/>}>Download my EPK</Button>
        <Button size="lg" variant="outline" iconRight={<i data-lucide="image" aria-hidden="true"/>}>Photo pack</Button>
      </div>

      <div style={{display:'grid',gridTemplateColumns:'repeat(auto-fit,minmax(300px,1fr))',gap:'var(--s-4)',marginTop:'var(--s-9)'}}>
        <Card grain={false} style={{padding:0,overflow:'hidden'}}>
          <figure style={{margin:0}}>
            <img src="portrait-booth-hires.jpg" alt="DJ Ron Tinsley seated at a table in a Chicago venue, warm tungsten light" width="810" height="540" loading="lazy" decoding="async" style={{display:'block',width:'100%',height:260,objectFit:'cover'}}/>
            <figcaption className="rt-label" style={{display:'block',padding:'var(--pad-card)'}}>Press photo 01 &middot; email me for the full-resolution file</figcaption>
          </figure>
        </Card>

        <Card>
          <SectionRule label="My story"/>
          <p className="rt-lead" style={{fontSize:17,marginTop:20}}>I was born and raised in Chicago, the city that invented house music.</p>
          <p style={{color:'var(--white-quiet)',fontSize:14,lineHeight:1.75,marginTop:16}}>My cousin Ted Bailey put me onto it, and the Chicago stations did the rest &mdash; a whole generation of us buying blank tapes for the Friday and Saturday night mixes. I joined the Marine Corps in 1992 and took the music with me: the Hard Rock Caf&eacute; in Hong Kong on my fourth deployment, then Guam, the California coast, and a last tour spent playing Baltimore, D.C., Philadelphia, New Jersey and New York. I came home to Chicago in 2017.</p>
        </Card>

        <Card>
          <SectionRule label="What I play"/>
          <ul style={{display:'flex',flexWrap:'wrap',gap:9,marginTop:20,padding:0,listStyle:'none'}}>
            {RANGE.map(g=><li key={g}><Tag>{g}</Tag></li>)}
          </ul>
          <div style={{display:'flex',gap:'var(--s-8)',flexWrap:'wrap',marginTop:'var(--s-7)'}}>
            <StatBlock value="11" label="Sub-genres"/>
            <StatBlock value="3" label="Continents" accent/>
          </div>
        </Card>
      </div>

      <section aria-labelledby="partners-h" style={{marginTop:'var(--s-9)'}}>
        <SectionRule label="My residency & partners"/>
        <h2 id="partners-h" className="rt-sr-only">Residency and partners</h2>
        <div style={{display:'flex',gap:'var(--s-4)',marginTop:'var(--s-6)',flexWrap:'wrap',alignItems:'stretch'}}>
          <div style={{flex:'1 1 240px',background:'var(--white-paper)',padding:20,display:'grid',placeItems:'center',minHeight:130}}>
            <img src="dabooth312-logo-256.png" alt="DaBooth312 — 88.9 FM WIIT" width="256" height="256" loading="lazy" decoding="async" style={{maxHeight:110,maxWidth:'100%',width:'auto',height:'auto',display:'block'}}/>
          </div>
          <div style={{flex:'1 1 240px',background:'#000',border:'1px solid var(--line-1)',display:'grid',placeItems:'center',minHeight:130,overflow:'hidden'}}>
            <img src="magnifico-logo.jpg" alt="Magnifico Coffee" width="700" height="263" loading="lazy" decoding="async" style={{width:'100%',height:'auto',display:'block'}}/>
          </div>
        </div>
        <p className="rt-label" style={{display:'block',marginTop:13}}>Resident DJ &amp; Co-Host, DaBooth312 &middot; Partner, Magnifico Coffee</p>
      </section>

      <section aria-labelledby="press-links-h" style={{marginTop:'var(--s-9)'}}>
        <SectionRule label="Listen & watch"/>
        <h2 id="press-links-h" className="rt-sr-only">Where to hear me</h2>
        <nav aria-label="Where to hear me" style={{marginTop:'var(--s-6)'}}>
          <LinkOut name="Mixcloud" meta="My mixes and live sets" href="https://www.mixcloud.com/ron-tinsley/" rel="me noopener"/>
          <LinkOut name="T.R.L. &mdash; The Red Lab" meta="My YouTube channel" href="https://www.youtube.com/@T.R.L.1" rel="me noopener"/>
          <LinkOut name="DaBooth312 &mdash; 88.9 FM WIIT" meta="Resident DJ &amp; Co-Host" href="https://www.youtube.com/@DaBooth312" rel="me noopener"/>
          <LinkOut name="Twitch &mdash; House Nation Music" meta="I go live Friday nights" href="https://www.twitch.tv/house_nation_music" rel="me noopener"/>
          <LinkOut name="TikTok &mdash; The Red Lab" meta="@djrontinsley_theredlab1" href="https://www.tiktok.com/@djrontinsley_theredlab1" rel="me noopener"/>
          <LinkOut name="Dot Card" meta="My digital business card &mdash; dot.cards/rtinsley" href="https://dot.cards/rtinsley" rel="me noopener"/>
        </nav>
      </section>
    </div>
  );
}
Object.assign(window,{PressScreen});

const GALLERY=[
  {src:'portrait-booth-hires.jpg',alt:'DJ Ron Tinsley seated at a table in a Chicago venue, warm tungsten light',caption:'Between sets — Chicago'},
  {src:'gallery-01.jpg',alt:'DJ Ron Tinsley behind the decks wearing a Da Booth 312 t-shirt, red stage lighting',caption:'Behind the decks — Da Booth 312'},
  {src:'gallery-02.jpg',alt:'DJ Ron Tinsley mixing on Pioneer decks, motion blur, red-lit booth',caption:'Mid-mix — Da Booth 312'},
  {src:'gallery-03.jpg',alt:'DJ Ron Tinsley behind the decks wearing a Da Booth 312 t-shirt, red and green stage lighting',caption:'Da Booth 312 set'},
  {src:'gallery-04.jpg',alt:'DJ Ron Tinsley behind the decks wearing a Da Booth 312 t-shirt, green stage lighting',caption:'Da Booth 312 — green room'},
  {src:'gallery-05.jpg',alt:'DJ Ron Tinsley mixing with motion blur, blue stage lighting',caption:'Da Booth 312 — blue light set'},
  {src:'gallery-06.jpg',alt:'DJ Ron Tinsley smiling in a tan turtleneck sweater, office setting',caption:'Off the clock'},
  {src:'gallery-07.jpg',alt:'DJ Ron Tinsley wearing a headset, looking off to the side, office setting',caption:'Between takes'},
  {src:'gallery-08.jpg',alt:'DJ Ron Tinsley adjusting his headphones in front of the WIIT 88.9FM logo',caption:'On air — WIIT 88.9FM'},
  {src:'gallery-09.jpg',alt:'Portrait of DJ Ron Tinsley wearing a DJ Ron Tinsley branded t-shirt',caption:'DJ Ron Tinsley'},
  {src:'gallery-10.jpg',alt:'Portrait of DJ Ron Tinsley wearing a Tripl3 Thr3at t-shirt',caption:'Tripl3 Thr3at'},
  {src:'gallery-11.jpg',alt:'DJ Ron Tinsley making a peace sign with both hands, wearing a Da Booth 312 t-shirt',caption:'Da Booth 312'},
  {src:'gallery-12.jpg',alt:'DJ Ron Tinsley DJing in front of floor-to-ceiling windows overlooking Lake Michigan, wearing an I Love Chicago House t-shirt',caption:'Lakeside — Chicago skyline'},
  {src:'gallery-13.jpg',alt:'DJ Ron Tinsley DJing in front of floor-to-ceiling windows overlooking Lake Michigan, alternate angle',caption:'Lakeside — Chicago skyline'},
  {src:'gallery-14.jpg',alt:'DJ Ron Tinsley DJing on a high-rise balcony at night for the Lakeside Sessions livestream',caption:'Lakeside Sessions 19'},
  {src:'gallery-15.jpg',alt:'DJ Ron Tinsley DJing in a red-lit room, wearing a graphic skull t-shirt',caption:'Red room set'},
  {src:'gallery-16.jpg',alt:'DJ Ron Tinsley DJing in a red-lit room, alternate angle, wearing a graphic skull t-shirt',caption:'Red room set'},
  {src:'gallery-17.jpg',alt:'DJ Ron Tinsley smiling at a bar or restaurant',caption:'Out and about'},
  {src:'gallery-18.jpg',alt:'Instagram story repost of DJ Ron Tinsley DJing, tagged at Local 83',caption:'Local 83'},
  {src:'gallery-19.jpg',alt:'DJ Ron Tinsley DJing under a tent at a street festival, wearing a House Music sugar-skull t-shirt and festival credential',caption:'Festival set'},
  {src:'gallery-20.jpg',alt:'DJ Ron Tinsley DJing under a tent at a street festival, House Music sugar-skull t-shirt, crowd and vendor tents visible',caption:'Tacos y Tamales Festival'},
  {src:'gallery-21.jpg',alt:'DJ Ron Tinsley DJing on Pioneer decks under a tent, close-up, House Music sugar-skull t-shirt',caption:'Festival set'},
  {src:'gallery-22.jpg',alt:'DJ Ron Tinsley posing with another DJ behind a Sunday Afternoon Grooves branded DJ table',caption:'Sunday Afternoon Grooves'},
  {src:'gallery-23.jpg',alt:'DJ Ron Tinsley smiling and making a peace sign outdoors at a daytime event',caption:'Out at an event'},
  {src:'gallery-24.jpg',alt:'DJ Ron Tinsley with arms outstretched in a neon-lit lounge, wearing a graphic skull long-sleeve shirt',caption:'Night out'},
  {src:'gallery-25.jpg',alt:'DJ Ron Tinsley standing in a neon-lit lounge, low angle, wearing a graphic skull long-sleeve shirt',caption:'Night out'},
  {src:'gallery-26.jpg',alt:'DJ Ron Tinsley with three friends posing at a bar',caption:'With friends'},
  {src:'gallery-27.jpg',alt:'Studio portrait of DJ Ron Tinsley wearing a white textured blazer',caption:'DJ Ron Tinsley'},
  {src:'gallery-28.jpg',alt:'DJ Ron Tinsley pointing at a Marine Corps birthday cake at a celebration',caption:'Semper Fi'},
  {src:'gallery-29.jpg',alt:'View from the DJ booth overlooking a crowded street festival',caption:'View from the booth'},
  {src:'gallery-30.jpg',alt:'DJ Ron Tinsley posing with another man backstage, wearing a Chicago Created House Music t-shirt',caption:'Backstage'},
  {src:'gallery-31.jpg',alt:'DJ Ron Tinsley taking a selfie with another man on a city street',caption:'Out and about'},
  {src:'gallery-32.jpg',alt:'DJ Ron Tinsley with a group at Magnifico Coffee Roasters, September 2026',caption:'Magnifico Coffee Roasters'},
  {src:'event-28.jpg',alt:'DaBooth312 On Air individual promo for Ron Tinsley, August 23 2026',caption:'DaBooth312 — Resident DJ Promo'},
];

const EVENTS=[
  {src:'event-01.jpg',alt:'Dragon Room Friday Night flyer, Hazmat Productions, lineup Rafa, Vincent R, Ron Tinsley, Angello Soto',caption:'Dragon Room Friday Night — Hazmat Productions'},
  {src:'event-02.jpg',alt:'The House of Phan2c flyer with special guest DJ Ron Tinsley, December 30 2020',caption:'The House of Phan2c — Dec 30, 2020'},
  {src:'event-03.jpg',alt:'Unity of House flyer at Tish\u2019s Garden, Chicago, Groove Foundation',caption:'Unity of House — Tish\u2019s Garden, Chicago'},
  {src:'event-04.jpg',alt:'Sunday Funday Labor Day Jam flyer at The Pavilion Summerfest, Bridgeview IL, September 5 2021',caption:'Labor Day Jam — The Pavilion, Bridgeview'},
  {src:'event-05.jpg',alt:'Sunday Afternoon Grooves flyer at Local 83, October 17 2021, featuring Ron "BlkThor" Tinsley',caption:'Sunday Afternoon Grooves — Local 83'},
  {src:'event-06.jpg',alt:'DJ Livia Halloween party flyer at The Pavilion, October 30, costume contest, Ron Tinsley in the lineup',caption:'Halloween Bash — The Pavilion'},
  {src:'event-07.jpg',alt:'Sunday Afternoon Grooves flyer at Local 83, January 16, group photo of the resident DJs including Ron Tinsley',caption:'Sunday Afternoon Grooves — Local 83'},
  {src:'event-08.jpg',alt:'Body Movement for Self Improvement flyer at Handlebar, February 25, featuring Black Thor / The Red Lab',caption:'Body Movement for Self Improvement — Handlebar'},
  {src:'event-09.jpg',alt:'House Music on World Stage flyer for the African Festival of the Arts Chicago, September 2 2022',caption:'African Festival of the Arts — House Music on World Stage'},
  {src:'event-10.jpg',alt:'Arrow Fest flyer, Internal Affairs presents, Sagittarius edition, featuring Ron Tinsley',caption:'Arrow Fest — Sagittarius Edition'},
  {src:'event-11.jpg',alt:'DaBooth312 flyer on WIIT 88.9FM, February 6 2022, Rob Waite and Ron Tinsley',caption:'DaBooth312 on WIIT 88.9FM'},
  {src:'event-12.jpg',alt:'DaBooth312 flyer, August 23 2026, RTW, DJ Ron Tinsley and Stevie B',caption:'DaBooth312 — Aug 2026'},
  {src:'event-13.jpg',alt:'Coffee and Beats Pop-up flyer at Magnifico Coffee Roasters, featuring Ron Tinsley B2B Vincent R',caption:'Coffee & Beats Pop-up — Magnifico Coffee Roasters'},
  {src:'event-14.jpg',alt:'Pour Over Progressions flyer at Magnifico Coffee Roasters, featuring Ron Tinsley',caption:'Pour Over Progressions — Magnifico Coffee Roasters'},
  {src:'event-15.jpg',alt:'Techno Harbor Twitch livestream flyer, Chicago IL, August 16, featuring Ron Tinsley',caption:'Techno Harbor — Twitch Livestream'},
  {src:'event-16.jpg',alt:'Tacos y Tamales Festival flyer, 5th annual, House Music Stage lineup including Ron Tinsley',caption:'Tacos y Tamales Festival — House Stage'},
  {src:'event-17.jpg',alt:'Tacos y Tamales Festival flyer, 6th annual, July 2022, House Music Stage lineup including Ron Tinsley',caption:'Tacos y Tamales Festival — 6th Annual, July 2022'},
  {src:'event-18.jpg',alt:'Tacos y Tamales Festival flyer, Pilsen Chicago, July 2023, featuring Ron Tinsley',caption:'Tacos y Tamales Festival — Pilsen, July 2023'},
  {src:'event-19.jpg',alt:'Block Party artist schedule flyer, Avondale, August 15, listing DJ set times including Ron Tinsley — organizer contact info and a share restriction stamp blurred out with permission',caption:'Block Party — Avondale (set-time sheet)'},
  {src:'event-28.jpg',alt:'DaBooth312 On Air promo flyer for Ron Tinsley, August 23 2026, RTW Entertainment presents, WIIT 88.9FM',caption:'DaBooth312 — On Air, Aug 23 2026'},
  {src:'event-20.jpg',alt:'Tacos y Tamales Festival flyer, July 15-17 2022, featuring a portrait of Ron Tinsley, located at 16th and Morgan',caption:'Tacos y Tamales Festival — 16th & Morgan, July 2022'},
  {src:'event-21.jpg',alt:'Tacos y Tamales Festival flyer, July 21-23 2023, Pilsen Chicago, featuring a portrait of Ron Tinsley',caption:'Tacos y Tamales Festival — Pilsen, July 2023'},
  {src:'event-22.jpg',alt:'Ellie in Wonderland birthday party flyer at Q Studios, Saturday February 8, featuring Ron Tinsley in the DJ lineup',caption:'Ellie in Wonderland — Q Studios'},
  {src:'event-23.jpg',alt:'Elevated Eclectica number 47 Twitch livestream flyer, Thursday January 16, compil3r b2b Ron Tinsley',caption:'Elevated Eclectica #47 — Twitch Livestream'},
  {src:'event-24.jpg',alt:'Summer House Series flyer at Pier 31, Thursday June 20, featuring Nick Nonstop, Swannque, Rose Red and Ron Tinsley',caption:'Summer House Series — Pier 31'},
  {src:'event-25.jpg',alt:'Waves Saturday day party and brunch flyer at South End Beach House, July 27, featuring DJs Rose Red, Ron Tinsley and DJ Mon',caption:'Day Party & Brunch — Waves, South End Beach House'},
  {src:'event-26.jpg',alt:'Lakeside Boogie Chicago Volume Six flyer, August 13 2022, featuring Ron Tinsley in a large DJ lineup',caption:'Lakeside Boogie Chicago — Vol. Six'},
  {src:'event-27.jpg',alt:'Larry Lust Presents Music and Dancing flyer, January 8 2022, guest DJs Ron Tinsley and Ronnie Mac',caption:'Music & Dancing — Larry Lust Presents'},
];

function PhotoGrid({items,label,onOpen}){
  return (
    <ul aria-label={label} style={{display:'grid',gridTemplateColumns:'repeat(auto-fill,minmax(200px,1fr))',gap:'var(--s-5)',marginTop:'var(--s-6)',padding:0,listStyle:'none'}}>
      {items.map((g,i)=>(
        <li key={g.src+i}>
          <button type="button" onClick={()=>onOpen(i)} aria-label={'View: '+g.alt}
            style={{display:'block',width:'100%',padding:0,border:'var(--bw-hair) solid var(--border-hair)',borderRadius:'var(--r-card)',overflow:'hidden',cursor:'pointer',background:'var(--surface-card)',boxShadow:'var(--shadow-lift)'}}>
            <img src={g.src} alt={g.alt} loading={i<3?undefined:'lazy'} decoding="async"
              style={{display:'block',width:'100%',aspectRatio:'4/5',objectFit:'cover'}}/>
          </button>
        </li>
      ))}
    </ul>
  );
}

function GalleryScreen(){
  const [open,setOpen]=React.useState(null); // {items, index} | null
  const isOpen=!!open;

  React.useEffect(()=>{
    if(!isOpen) return;
    const onKey=e=>{
      if(e.key==='Escape') setOpen(null);
      if(e.key==='ArrowRight') setOpen(o=>o&&({...o,index:(o.index+1)%o.items.length}));
      if(e.key==='ArrowLeft') setOpen(o=>o&&({...o,index:(o.index-1+o.items.length)%o.items.length}));
    };
    window.addEventListener('keydown',onKey);
    return ()=>window.removeEventListener('keydown',onKey);
  },[isOpen]);

  const current=isOpen?open.items[open.index]:null;

  return (
    <div style={{maxWidth:'var(--w-page)',margin:'0 auto',padding:'var(--s-10) var(--gutter) 0'}}>
      <StickerHeading as="h1" size="var(--fs-h1)">Gallery</StickerHeading>
      <p className="rt-lead" style={{color:'var(--white-quiet)',maxWidth:'50ch',marginTop:20}}>A few shots from past nights in the booth, plus flyers from gigs over the years.</p>

      <div style={{marginTop:'var(--s-8)'}}>
        <SectionRule label="Shades Of DJ Ron Tinsley"/>
      </div>
      <PhotoGrid items={GALLERY} label="Shades Of DJ Ron Tinsley" onOpen={i=>setOpen({items:GALLERY,index:i})}/>

      <div style={{marginTop:'var(--s-11)'}}>
        <SectionRule label="Previous events"/>
      </div>
      <p className="rt-lead" style={{color:'var(--white-quiet)',maxWidth:'56ch',marginTop:18}}>Flyers from gigs, pop-ups and streams I've played over the years — click any one to see it full size.</p>
      <PhotoGrid items={EVENTS} label="Previous events" onOpen={i=>setOpen({items:EVENTS,index:i})}/>

      {isOpen?(
        <div role="dialog" aria-modal="true" aria-label={current.alt}
          onClick={()=>setOpen(null)}
          style={{position:'fixed',inset:0,zIndex:60,background:'#000000ee',display:'flex',alignItems:'center',justifyContent:'center',padding:'var(--gutter)'}}>
          <button type="button" aria-label="Close" onClick={()=>setOpen(null)}
            style={{position:'absolute',top:'var(--s-5)',right:'var(--gutter)',width:44,height:44,display:'grid',placeItems:'center',background:'transparent',border:'var(--bw-hair) solid var(--line-2)',borderRadius:'var(--r-1)',color:'var(--white-paper)',cursor:'pointer'}}>
            <i data-lucide="x" aria-hidden="true"/>
          </button>

          {open.items.length>1?(
            <button type="button" aria-label="Previous" onClick={e=>{e.stopPropagation();setOpen(o=>({...o,index:(o.index-1+o.items.length)%o.items.length}));}}
              style={{position:'absolute',left:'var(--gutter)',top:'50%',transform:'translateY(-50%)',width:44,height:44,display:'grid',placeItems:'center',background:'transparent',border:'var(--bw-hair) solid var(--line-2)',borderRadius:'var(--r-1)',color:'var(--white-paper)',cursor:'pointer'}}>
              <i data-lucide="chevron-left" aria-hidden="true"/>
            </button>
          ):null}

          <figure onClick={e=>e.stopPropagation()} style={{margin:0,display:'grid',gap:13,justifyItems:'center',maxWidth:'92vw'}}>
            <img src={current.src} alt={current.alt}
              style={{maxWidth:'92vw',maxHeight:'78vh',objectFit:'contain',borderRadius:'var(--r-card)'}}/>
            <figcaption className="rt-label" style={{color:'var(--white-quiet)'}}>{current.caption}</figcaption>
          </figure>

          {open.items.length>1?(
            <button type="button" aria-label="Next" onClick={e=>{e.stopPropagation();setOpen(o=>({...o,index:(o.index+1)%o.items.length}));}}
              style={{position:'absolute',right:'var(--gutter)',top:'50%',transform:'translateY(-50%)',width:44,height:44,display:'grid',placeItems:'center',background:'transparent',border:'var(--bw-hair) solid var(--line-2)',borderRadius:'var(--r-1)',color:'var(--white-paper)',cursor:'pointer'}}>
              <i data-lucide="chevron-right" aria-hidden="true"/>
            </button>
          ):null}
        </div>
      ):null}
    </div>
  );
}
Object.assign(window,{GalleryScreen});

function SiteApp(){
  const [route,setRoute]=React.useState('home');
  React.useEffect(()=>{const t=setTimeout(()=>window.lucide&&window.lucide.createIcons(),40);return ()=>clearTimeout(t);});
  React.useEffect(()=>{
    const titles={home:'DJ Ron Tinsley — Chicago House DJ | Booking & The Red Lab',sets:'Sets & Mixes — DJ Ron Tinsley',gallery:'Photo Gallery — DJ Ron Tinsley',booking:'Book DJ Ron Tinsley — Chicago House DJ',press:'Press Kit — DJ Ron Tinsley'};
    document.title=titles[route]||titles.home;
  },[route]);
  const go=r=>{setRoute(r);window.scrollTo({top:0});};
  return (
    <>
      <a className="rt-skip" href="#main">Skip to content</a>
      <SiteHeader route={route} go={go}/>
      <main id="main">
        {route==='home'?<HomeScreen go={go}/>:null}
        {route==='sets'?<SetsScreen/>:null}
        {route==='gallery'?<GalleryScreen/>:null}
        {route==='booking'?<BookingScreen/>:null}
        {route==='press'?<PressScreen/>:null}
      </main>
      <SiteFooter/>
    </>
  );
}