const { Button, Card, Badge, Tabs, Modal, EmptyState } = window.ZaviFxDesignSystem_f15c31;

function WorkPage({ go }) {
  const groups = ['All', 'E-commerce', 'Healthcare', 'Creative', 'Services'];
  const bucket = (p) => /shop|store|commerce|Jewellery|eyewear/i.test(p.industry + p.slug) ? 'E-commerce'
    : /health|clinic|dental|medical|diet/i.test(p.industry + p.slug) ? 'Healthcare'
    : /creative|studio|photograph|tattoo|wedding|coffee|food|pizza|restaurant/i.test(p.industry + p.slug) ? 'Creative' : 'Services';
  const [tab, setTab] = React.useState('All');
  const [open, setOpen] = React.useState(null);
  const list = PROJECTS.filter((p) => tab === 'All' || bucket(p) === tab);
  return (
    <>
      <PageHero eyebrow="Work" title="Selected websites and digital projects"
        intro="Every screenshot here is real ZaviFx work. Client names, URLs and results are published only where they have been supplied.">
        <Button onClick={() => go('contact')}>Request a Proposal</Button>
      </PageHero>

      <WorkStage />
      <ShowcaseHost />
      {false && (
      <Section pad="var(--space-section)">
        {list.length === 0
          ? <EmptyState title="No projects in this category yet" action={<Button size="sm" onClick={() => setTab('All')}>Show all</Button>}>Add projects to this category in the data file.</EmptyState>
          : (
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit,minmax(320px,1fr))', gap: 'var(--space-xl)' }}>
              {list.map((p, i) => (
                <article key={p.slug} style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-md)', gridColumn: i % 5 === 0 ? 'span 2' : undefined }}>
                  <BrowserFrame src={ASSETS + p.img} alt={p.name + ' — website by ZaviFx'} tall={i % 5 === 0} />
                  <div>
                    <div className="zx-card__eyebrow">{p.industry}</div>
                    <h2 className="t-h3" style={{ marginTop: 'var(--space-xxs)' }}>{p.name}</h2>
                    <p className="zx-card__body" style={{ marginTop: 'var(--space-xs)' }}>{p.solution}</p>
                  </div>
                  <div style={{ display: 'flex', gap: 'var(--space-xs)', flexWrap: 'wrap' }}>
                    {p.services.map((s) => <Badge key={s}>{s}</Badge>)}
                    {p.tech.map((t) => <Badge key={t} variant="code">{t}</Badge>)}
                  </div>
                  <div style={{ display: 'flex', gap: 'var(--space-xs)', flexWrap: 'wrap' }}>
                    <Button size="sm" variant="secondary" onClick={() => setOpen(p)}>View Case Study</Button>
                    {p.url ? <Button size="sm" variant="text" href={p.url}>Visit Website</Button> : null}
                  </div>
                </article>
              ))}
            </div>
          )}
      </Section>
      )}

      <Modal open={!!open} onClose={() => setOpen(null)} title={open ? open.name : ''} description={open ? open.industry : ''}
        actions={<><Button variant="secondary" onClick={() => setOpen(null)}>Close</Button><Button onClick={() => { setOpen(null); go('contact'); }}>Enquire about a project like this</Button></>}>
        {open && (
          <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-md)' }}>
            <BrowserFrame src={ASSETS + open.img} alt={open.name + ' full page'} tall />
            <div><h3 className="t-card-title">Challenge</h3><p className="zx-card__body">{open.challenge}</p></div>
            <div><h3 className="t-card-title">Solution</h3><p className="zx-card__body">{open.solution}</p></div>
            <div><h3 className="t-card-title">Services delivered</h3><p className="zx-card__body">{open.services.join(' · ')}</p></div>
            <div><h3 className="t-card-title">Technologies</h3><p className="zx-card__body">{open.tech.join(' · ')}</p></div>
            <div><h3 className="t-card-title">Result</h3><p className="zx-card__body">{open.result}</p></div>
          </div>
        )}
      </Modal>

      <CTAFinale go={go} title="Want work like this for your brand?" body="Book a 30-minute consultation. You get a written summary of what we would fix first, in priority order, with effort and expected impact." />
    </>
  );
}
Object.assign(window, { WorkPage });