/* Category-filtered portfolio wall + full-screen showcase lightbox. */
const { Badge, Button } = window.ZaviFxDesignSystem_f15c31;

const PORTFOLIO = [
  { s: 'cloudblueit', n: 'CloudBlueIT Academy', c: 'IT & SaaS', img: 'portfolio/cloudblueit-home.png', tech: ['WordPress', 'Divi'], svc: ['WordPress development', 'UI/UX design', 'SEO'], feat: true },
  { s: 'codnets', n: 'Codnets', c: 'IT & SaaS', img: 'portfolio/codnets-home.webp', tech: ['WordPress', 'Elementor'], svc: ['WordPress development', 'Graphic design'] },
  { s: 'cloudblueit-24', n: 'CloudBlueIT — 2024 build', c: 'IT & SaaS', img: 'portfolio/cloudblueit-2024.jpg', tech: ['WordPress'], svc: ['WordPress development'] },
  { s: 'vpn-saas', n: 'VPN Platform', c: 'IT & SaaS', img: 'portfolio/vpn-saas.jpg', tech: ['WordPress'], svc: ['UI/UX design', 'Content marketing'] },

  { s: 'jewellery', n: 'Jewellery Store', c: 'E-commerce', img: 'portfolio/jewellery-shop.jpg', tech: ['WooCommerce'], svc: ['WooCommerce', 'Performance marketing'], feat: true },
  { s: 'eyewear', n: 'Eyewear Store', c: 'E-commerce', img: 'portfolio/eyewear-shop.jpg', tech: ['WooCommerce'], svc: ['WooCommerce', 'UI/UX design'] },
  { s: 'skincare', n: 'Skincare Brand', c: 'E-commerce', img: 'portfolio/skincare-store.jpg', tech: ['WooCommerce'], svc: ['WooCommerce', 'Social media'] },
  { s: 'fashion', n: 'Fashion E-shop', c: 'E-commerce', img: 'portfolio/fashion-eshop.jpg', tech: ['WooCommerce'], svc: ['WooCommerce', 'Branding'] },
  { s: 'general-shop', n: 'Multi-category Store', c: 'E-commerce', img: 'portfolio/general-eshop.jpg', tech: ['WooCommerce'], svc: ['WooCommerce', 'CRO'] },
  { s: 'organic', n: 'Organica Grocery', c: 'E-commerce', img: 'portfolio/organic-shop.jpg', tech: ['WooCommerce'], svc: ['WooCommerce', 'SEO'] },
  { s: 'gym-store', n: 'Gym & Supplements', c: 'E-commerce', img: 'portfolio/gym-store.jpg', tech: ['WooCommerce'], svc: ['WooCommerce', 'Performance marketing'] },
  { s: 'crystal', n: 'Crystal Brand', c: 'E-commerce', img: 'portfolio/crystal-brand.jpg', tech: ['WooCommerce'], svc: ['Branding', 'WooCommerce'] },

  { s: 'medical-center', n: 'Medical Center', c: 'Healthcare', img: 'portfolio/medical-center.jpg', tech: ['WordPress', 'Elementor'], svc: ['WordPress development', 'Content marketing'], feat: true },
  { s: 'dental', n: 'Dental Clinic', c: 'Healthcare', img: 'portfolio/dental-clinic.jpg', tech: ['WordPress'], svc: ['WordPress development', 'Local SEO'] },
  { s: 'clinic', n: 'Medical Clinic', c: 'Healthcare', img: 'portfolio/clinic-medical.jpg', tech: ['WordPress'], svc: ['WordPress development'] },
  { s: 'healthcare-group', n: 'Healthcare Group', c: 'Healthcare', img: 'portfolio/healthcare-group.jpg', tech: ['WordPress'], svc: ['UI/UX design', 'SEO'] },
  { s: 'diet-coach', n: 'Diet Coach', c: 'Healthcare', img: 'portfolio/diet-coach.jpg', tech: ['WordPress'], svc: ['UI/UX design', 'CRO'] },
  { s: 'health-coach', n: 'Health Coach', c: 'Healthcare', img: 'portfolio/health-coach.jpg', tech: ['WordPress'], svc: ['Branding', 'UI/UX design'] },

  { s: 'restaurant', n: 'Restaurant', c: 'Food & Hospitality', img: 'portfolio/restaurant.jpg', tech: ['WordPress'], svc: ['WordPress development', 'Graphic design'], feat: true },
  { s: 'pizza', n: 'Pizza Restaurant', c: 'Food & Hospitality', img: 'portfolio/pizza-restaurant.jpg', tech: ['WordPress'], svc: ['WordPress development', 'Graphic design'] },
  { s: 'burger', n: 'Burger Brand', c: 'Food & Hospitality', img: 'portfolio/burger-brand.jpg', tech: ['WordPress'], svc: ['Branding', 'Social media'] },
  { s: 'coffee', n: 'Coffee Brand', c: 'Food & Hospitality', img: 'portfolio/coffee-brand.jpg', tech: ['WooCommerce'], svc: ['Branding', 'WooCommerce'] },
  { s: 'blog-food', n: 'Food Blog', c: 'Food & Hospitality', img: 'portfolio/blog-food.jpg', tech: ['WordPress'], svc: ['Content marketing', 'SEO'] },

  { s: 'photography', n: 'Photography Studio', c: 'Creative & Lifestyle', img: 'portfolio/photography-studio.jpg', tech: ['WordPress'], svc: ['UI/UX design', 'WordPress development'], feat: true },
  { s: 'tattoo', n: 'Tattoo Studio', c: 'Creative & Lifestyle', img: 'portfolio/tattoo-studio.jpg', tech: ['WordPress'], svc: ['UI/UX design', 'WordPress development'] },
  { s: 'wedding', n: 'Wedding Site', c: 'Creative & Lifestyle', img: 'portfolio/wedding.jpg', tech: ['WordPress'], svc: ['UI/UX design'] },
  { s: 'yoga', n: 'Yoga Studio', c: 'Creative & Lifestyle', img: 'portfolio/yoga-studio.jpg', tech: ['WordPress'], svc: ['Branding', 'WordPress development'] },
  { s: 'beauty', n: 'Beauty Salon', c: 'Creative & Lifestyle', img: 'portfolio/beauty-salon.jpg', tech: ['WordPress', 'Elementor'], svc: ['UI/UX design', 'WordPress development'] },
  { s: 'fitness', n: 'Fitness Studio', c: 'Creative & Lifestyle', img: 'portfolio/fitness-studio.jpg', tech: ['WordPress'], svc: ['WordPress development', 'CRO'] },
  { s: 'gym-training', n: 'Gym & Training', c: 'Creative & Lifestyle', img: 'portfolio/gym-training.jpg', tech: ['WordPress'], svc: ['WordPress development'] },

  { s: 'construction', n: 'Construction Group', c: 'Local Services', img: 'portfolio/construction.jpg', tech: ['WordPress'], svc: ['WordPress development', 'Branding'], feat: true },
  { s: 'repair', n: 'Repair Service', c: 'Local Services', img: 'portfolio/repair-service.jpg', tech: ['WordPress'], svc: ['WordPress development', 'Local SEO'] },

  { s: 'blog-magazine', n: 'Editorial Magazine', c: 'Editorial & Blogs', img: 'portfolio/blog-magazine.jpg', tech: ['WordPress'], svc: ['Content marketing', 'UI/UX design'] },
  { s: 'blog-01', n: 'Editorial Concept 01', c: 'Editorial & Blogs', img: 'portfolio/blog-editorial-01.jpg', tech: ['WordPress'], svc: ['Content marketing'] },
  { s: 'blog-02', n: 'Editorial Concept 02', c: 'Editorial & Blogs', img: 'portfolio/blog-editorial-02.jpg', tech: ['WordPress'], svc: ['Content marketing'] },
  { s: 'blog-03', n: 'Editorial Concept 03', c: 'Editorial & Blogs', img: 'portfolio/blog-editorial-03.jpg', tech: ['WordPress'], svc: ['Content marketing'] },
  { s: 'blog-04', n: 'Editorial Concept 04', c: 'Editorial & Blogs', img: 'portfolio/blog-editorial-04.jpg', tech: ['WordPress'], svc: ['Content marketing'] },
];

const CATEGORIES = ['All', 'IT & SaaS', 'E-commerce', 'Healthcare', 'Food & Hospitality', 'Creative & Lifestyle', 'Local Services', 'Editorial & Blogs'];

function WorkCard({ p, i, onOpen }) {
  return (
    <article className={'zx-work' + (p.feat ? ' zx-work--wide' : '')} data-reveal data-tilt>
      <button type="button" className="zx-work__hit" onClick={() => onOpen(p)} aria-label={'Open ' + p.n + ' showcase'}>
        <span className="zx-work__shot">
          <img src={window.ASSETS + p.img} alt={p.n + ' — website by ZaviFx'} loading="lazy" />
          <span className="zx-work__sheen" aria-hidden="true" />
          <span className="zx-work__view" aria-hidden="true">
            <svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M5.5 10.5 10.5 5.5M6.5 5.5h5v5" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/></svg>
            View
          </span>
        </span>
        <span className="zx-work__meta">
          <span className="zx-work__cat">{p.c}</span>
          <span className="zx-work__name">{p.n}</span>
          <span className="zx-work__tags">{p.tech.join(' · ')}</span>
        </span>
      </button>
    </article>
  );
}

function Lightbox({ item, list, onClose, onStep }) {
  React.useEffect(() => {
    if (!item) return;
    const onKey = (e) => {
      if (e.key === 'Escape') onClose();
      if (e.key === 'ArrowRight') onStep(1);
      if (e.key === 'ArrowLeft') onStep(-1);
    };
    document.addEventListener('keydown', onKey);
    document.body.style.overflow = 'hidden';
    return () => { document.removeEventListener('keydown', onKey); document.body.style.overflow = ''; };
  }, [item, onClose, onStep]);
  if (!item) return null;
  const idx = list.findIndex((x) => x.s === item.s);
  return (
    <div className="zx-lb" role="dialog" aria-modal="true" aria-label={item.n + ' showcase'}>
      <button type="button" className="zx-lb__scrim" onClick={onClose} aria-label="Close showcase" />
      <div className="zx-lb__panel">
        <header className="zx-lb__head">
          <div>
            <span className="zx-lb__cat">{item.c}</span>
            <h2 className="zx-lb__title">{item.n}</h2>
          </div>
          <div className="zx-lb__nav">
            <button type="button" onClick={() => onStep(-1)} aria-label="Previous project" data-magnetic>‹</button>
            <span className="zx-lb__count">{idx + 1} / {list.length}</span>
            <button type="button" onClick={() => onStep(1)} aria-label="Next project" data-magnetic>›</button>
            <button type="button" className="zx-lb__x" onClick={onClose} aria-label="Close showcase">×</button>
          </div>
        </header>
        <div className="zx-lb__frame">
          <div className="zx-lb__bar" aria-hidden="true"><i /><i /><i /><span>{item.s}.example</span></div>
          <div className="zx-lb__scroll"><img src={window.ASSETS + item.img} alt={item.n + ' full page'} /></div>
        </div>
        <footer className="zx-lb__foot">
          <div className="zx-lb__facts">
            <span><b>Services</b>{item.svc.join(', ')}</span>
            <span><b>Built with</b>{item.tech.join(', ')}</span>
            <span><b>Result</b>REPLACE: add the measured outcome</span>
          </div>
          <Button variant="onDark" size="sm" data-magnetic>Enquire about a build like this</Button>
        </footer>
      </div>
    </div>
  );
}

function WorkGallery({ limit, showFilter = true, onSeeAll }) {
  const [cat, setCat] = React.useState('All');
  const [open, setOpen] = React.useState(null);
  const all = cat === 'All' ? PORTFOLIO : PORTFOLIO.filter((p) => p.c === cat);
  const list = limit ? all.slice(0, limit) : all;
  const step = (d) => {
    const i = list.findIndex((x) => x.s === open.s);
    setOpen(list[(i + d + list.length) % list.length]);
  };
  return (
    <>
      {showFilter && (
        <div className="zx-filter" role="tablist" aria-label="Project category">
          {CATEGORIES.map((c) => (
            <button key={c} type="button" role="tab" aria-selected={c === cat} className="zx-filter__pill" onClick={() => setCat(c)} data-magnetic>
              {c}
              <i>{c === 'All' ? PORTFOLIO.length : PORTFOLIO.filter((p) => p.c === c).length}</i>
            </button>
          ))}
        </div>
      )}
      <div className="zx-wall">
        {list.map((p, i) => <WorkCard key={p.s} p={p} i={i} onOpen={setOpen} />)}
      </div>
      {limit && all.length > limit && (
        <div className="zx-wall__more" data-reveal>
          <Button variant="secondary" onClick={onSeeAll} data-magnetic>See all {PORTFOLIO.length} projects</Button>
        </div>
      )}
      <Lightbox item={open} list={list} onClose={() => setOpen(null)} onStep={step} />
    </>
  );
}
function ShowcaseHost() {
  const [open, setOpen] = React.useState(null);
  React.useEffect(() => { window.openShowcase = (p) => setOpen(p); return () => { delete window.openShowcase; }; }, []);
  const step = (d) => setOpen((cur) => {
    const i = PORTFOLIO.findIndex((x) => x.s === cur.s);
    return PORTFOLIO[(i + d + PORTFOLIO.length) % PORTFOLIO.length];
  });
  return open ? <Lightbox item={open} onClose={() => setOpen(null)} onStep={step} /> : null;
}
Object.assign(window, { WorkGallery, PORTFOLIO, CATEGORIES, ShowcaseHost });