// Winkz Designs 2026, PORTFOLIO (filterable animated mockup gallery)
(function () {
  const { useState, useEffect } = React;
  const { Icon, Reveal, Eyebrow, Section, Grad, Marquee } = window;
  const { EcommerceMock, PlumbingMock, CFOMock, CRMDashboard, CRMMock, ChatMock, DashboardMock, VoiceAgentMock, CommandCenter } = window;
  const { Evermart, ClaritySite, Osteria, Vantage, Forge, LumenLaw, SPCR } = window;
  const GRAD = 'linear-gradient(120deg,#F23BFE,#79BAFF,#2DE3EA)';

  /* One uniform browser frame for every screenshot thumbnail: traffic lights always,
     domain pill only when the site is actually visitable. */
  const Shot = (id, src, label, domain) => function ShotMock() {
    return (
      <div style={{ position: 'absolute', inset: 0, display: 'flex', flexDirection: 'column', background: '#0b0c10' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, height: 30, flexShrink: 0, padding: '0 12px', background: '#1c1e26', borderBottom: '1px solid rgba(0,0,0,0.4)' }}>
          <div style={{ display: 'flex', gap: 6 }}>
            <span style={{ width: 9, height: 9, borderRadius: 999, background: '#ff5f57' }} />
            <span style={{ width: 9, height: 9, borderRadius: 999, background: '#febc2e' }} />
            <span style={{ width: 9, height: 9, borderRadius: 999, background: '#28c840' }} />
          </div>
          {domain ? (
            <div style={{ flex: 1, display: 'flex', alignItems: 'center', gap: 6, height: 18, borderRadius: 999, background: '#0e0f14', border: '1px solid rgba(255,255,255,0.08)', padding: '0 10px', maxWidth: 240 }}>
              <Icon n="Lock" s={9} color="#6b7180" />
              <span style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: '#aeb6c4', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{domain}</span>
            </div>
          ) : (
            <div style={{ flex: 1, height: 18, borderRadius: 999, background: '#14161d', border: '1px solid rgba(255,255,255,0.06)', maxWidth: 240 }} />
          )}
        </div>
        <div style={{ flex: 1, position: 'relative', overflow: 'hidden' }}>
          {src
            ? <img src={src} alt="" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'top center', display: 'block', imageRendering: 'auto' }} />
            : <image-slot id={id} shape="rect" fit="cover" placeholder={label} style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }}></image-slot>}
        </div>
      </div>
    );
  };
  const PineappleShot = Shot('shot-valuablepineapple', 'assets/portfolio/valuablepineapple.png', 'Drop a screenshot', 'valuablepineapple.com');
  const IcarianShot = Shot('shot-icarian', 'assets/portfolio/icarian.png', 'Drop a screenshot', 'icarianventures.com');
  const SummitShot = Shot('shot-summitslate', 'assets/portfolio/c-summit-slate.png', 'Drop a screenshot');
  const NorthbendShot = Shot('shot-northbend', 'assets/portfolio/c-northbend-dental.png', 'Drop a screenshot');
  const HarlanShot = Shot('shot-harlanvoss', 'assets/portfolio/c-harlan-voss.png', 'Drop a screenshot');
  const FiveHourShot = Shot('shot-5hourseller', 'assets/portfolio/c-5hourseller.png', 'Drop a screenshot', '5hourseller.com');
  const OsteriaShot = Shot('shot-osteria', 'assets/portfolio/c-osteria-nove.png', 'Drop a screenshot');
  const EvermartShot = Shot('shot-evermart', 'assets/portfolio/c-evermart.png', 'Drop a screenshot');
  const SitelineShot = Shot('shot-siteline', 'assets/portfolio/t-siteline.png', 'Drop a screenshot');
  const ChairtimeShot = Shot('shot-chairtime', 'assets/portfolio/t-chairtime.png', 'Drop a screenshot');
  const LoadpointShot = Shot('shot-loadpoint', 'assets/portfolio/t-loadpoint.png', 'Drop a screenshot');
  const CasefileShot = Shot('shot-casefile', 'assets/portfolio/t-casefile.png', 'Drop a screenshot');

  const PROJECTS = [
    ['The Valuable Pineapple', 'E-commerce brand partnerships', 'Websites', PineappleShot, ['Website', 'Brand', 'E-commerce'], 'https://valuablepineapple.com/', 'assets/portfolio/valuablepineapple.png'],
    ['Icarian Ventures', 'Brand growth partner', 'Websites', IcarianShot, ['Website', 'Brand', 'AI SEO'], 'https://icarianventures.com/', 'assets/portfolio/icarian.png'],
    ['SPCR Group', 'Amazon growth partner', 'Websites', SPCR, ['Website', 'Brand', 'Ecommerce'], 'https://www.spcrgroup.co.uk/'],
    ['Clarity HCM', 'Payroll, HR & benefits platform', 'Websites', ClaritySite, ['Website', 'Brand', 'AI'], 'https://clarity-hcm.com/'],
    ['5 Hour Seller', 'High-converting VSL', 'Websites', FiveHourShot, ['Website', 'VSL', 'Conversion'], 'https://5hourseller.com/'],
    ['Summit & Slate', 'Design-build home remodeling', 'Websites', SummitShot, ['Website', 'Brand', 'Lead gen'], null, 'assets/portfolio/summit-slate.png'],
    ['Northbend Dental', 'Family & cosmetic dentistry', 'Websites', NorthbendShot, ['Website', 'Booking', 'AI SEO'], null, 'assets/portfolio/northbend-dental.png'],
    ['Harlan & Voss', 'Boutique litigation firm', 'Websites', HarlanShot, ['Website', 'Brand', 'AI SEO'], null, 'assets/portfolio/harlan-voss.png'],
    ['Osteria Nove', 'Restaurant & wine bar', 'Websites', OsteriaShot, ['Website', 'Booking', 'Brand'], null, 'assets/portfolio/osteria-nove.png'],
    ['Evermart', 'E-commerce marketplace', 'Websites', EvermartShot, ['Website', 'E-commerce', 'Brand'], null, 'assets/portfolio/evermart.png'],
    ['Siteline', 'Runs a builder’s jobs, schedule and change orders in one place.', 'Software', SitelineShot, ['Custom software', 'Scheduling', 'Dashboards'], null, 'assets/portfolio/siteline.png'],
    ['Chairtime', 'Books the chair, fills the gaps and flags no-shows before they happen.', 'Software', ChairtimeShot, ['Booking', 'AI', 'Payments'], null, 'assets/portfolio/chairtime.png'],
    ['Loadpoint', 'Dispatches every load and tracks the fleet from pickup to invoice.', 'Software', LoadpointShot, ['Custom software', 'Logistics', 'Dashboards'], null, 'assets/portfolio/loadpoint.png'],
    ['Casefile', 'Keeps matters, deadlines and unbilled hours straight for a small firm.', 'Software', CasefileShot, ['Custom software', 'Billing', 'Internal tool'], null, 'assets/portfolio/casefile.png'],
    ['Northstar Finance', 'Finance dashboard', 'Software', CFOMock, ['Custom software', 'Dashboards']],
    ['Relay', 'Custom CRM dashboard', 'Software', CRMDashboard, ['Custom CRM', 'Dashboards']],
    ['Command Center', 'Distribution CRM & sourcing', 'Software', CommandCenter, ['Custom CRM', 'Dashboards', 'Internal tool']],
    ['Pipeline', 'Sales CRM', 'Software', CRMMock, ['Custom CRM', 'Integrations']],
    ['Groundwork', 'Growth analytics', 'Software', DashboardMock, ['Dashboards', 'AI SEO']],
    ['Ansa', 'AI support assistant', 'AI', ChatMock, ['AI chat', 'Support']],
    ['Atlas Voice', 'AI voice agent', 'AI', VoiceAgentMock, ['AI voice', 'Booking']],
  ];
  const FILTERS = ['All', 'Websites', 'Software', 'AI'];

  function ProjectCard({ p, delay }) {
    const [name, tag, cat, M, chips, url, img] = p;
    const [h, setH] = useState(false);
    const [zoom, setZoom] = useState(false);
    useEffect(() => {
      if (!zoom) return;
      const esc = (e) => e.key === 'Escape' && setZoom(false);
      window.addEventListener('keydown', esc);
      return () => window.removeEventListener('keydown', esc);
    }, [zoom]);
    return (
      <Reveal delay={delay}>
        <div onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)} onClick={() => url && window.open(url, '_blank', 'noopener')} style={{ borderRadius: 16, overflow: 'hidden', border: '1px solid ' + (h ? 'rgba(45,227,234,0.4)' : 'rgba(255,255,255,0.1)'), background: '#0A0A0D', boxShadow: h ? '0 30px 70px -34px rgba(45,227,234,0.4)' : '0 20px 50px -34px rgba(0,0,0,0.8)', transform: h ? 'translateY(-6px)' : 'none', transition: 'all .4s cubic-bezier(.16,1,.3,1)', cursor: url ? 'pointer' : 'default' }}>
          <div style={{ height: 210, position: 'relative', overflow: 'hidden' }}>
            <M />
            <div style={{ position: 'absolute', bottom: 12, left: 12, fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.1em', color: '#08080A', background: GRAD, padding: '4px 9px', borderRadius: 999, fontWeight: 700, boxShadow: '0 6px 16px -6px rgba(0,0,0,0.6)' }}>{cat.toUpperCase()}</div>
            {img && (
              <button onClick={(e) => { e.stopPropagation(); setZoom(true); }} title="Enlarge" style={{ position: 'absolute', top: 40, left: 12, display: 'inline-flex', alignItems: 'center', gap: 6, padding: '6px 11px', borderRadius: 999, cursor: 'pointer', fontFamily: 'var(--font-mono)', fontSize: 9.5, fontWeight: 700, letterSpacing: '0.06em', color: '#fff', background: 'rgba(8,8,10,0.72)', backdropFilter: 'blur(6px)', border: '1px solid rgba(255,255,255,0.2)', opacity: h ? 1 : 0, transform: h ? 'none' : 'translateY(-4px)', transition: 'all .3s' }}><Icon n="Maximize2" s={12} color="#fff" />ENLARGE</button>
            )}
            {url && <div style={{ position: 'absolute', top: 40, right: 12, display: 'inline-flex', alignItems: 'center', gap: 5, fontFamily: 'var(--font-mono)', fontSize: 9.5, fontWeight: 700, color: '#2DE3A0', background: 'rgba(8,8,10,0.72)', backdropFilter: 'blur(6px)', border: '1px solid rgba(45,227,160,0.4)', padding: '4px 9px', borderRadius: 999 }}><span style={{ width: 6, height: 6, borderRadius: 999, background: '#2DE3A0' }} />VIEW SITE</div>}
          </div>
          <div style={{ padding: '16px 18px' }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
              <h3 style={{ fontSize: 19, margin: 0 }}>{name}</h3>
            </div>
            <p style={{ fontSize: 13.5, color: 'var(--text-secondary)', margin: '4px 0 12px' }}>{tag}</p>
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
              {chips.map((c, i) => <span key={i} style={{ fontSize: 11, fontFamily: 'var(--font-mono)', color: 'var(--text-muted)', border: '1px solid rgba(255,255,255,0.1)', padding: '3px 9px', borderRadius: 999 }}>{c}</span>)}
            </div>
            <div style={{ marginTop: 14 }}>
              {url ? (
                <a href={url} target="_blank" rel="noopener" onClick={(e) => e.stopPropagation()} style={{ display: 'inline-flex', alignItems: 'center', gap: 8, padding: '10px 18px', borderRadius: 10, background: GRAD, color: '#08080A', fontFamily: 'var(--font-body)', fontWeight: 700, fontSize: 13.5, boxShadow: h ? '0 14px 30px -14px rgba(242,59,254,0.7)' : 'none', transition: 'box-shadow .3s' }}>Check it out <Icon n="ArrowUpRight" s={14} color="#08080A" /></a>
              ) : (
                <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8, padding: '10px 18px', borderRadius: 10, border: '1px solid rgba(255,255,255,0.14)', background: 'rgba(255,255,255,0.03)', color: 'var(--text-secondary)', fontFamily: 'var(--font-body)', fontWeight: 600, fontSize: 13.5, whiteSpace: 'nowrap' }}>Case study on request</span>
              )}
            </div>
          </div>
        </div>
        {zoom && img ? ReactDOM.createPortal(
              <div onClick={(e) => { e.stopPropagation(); setZoom(false); }} style={{ position: 'fixed', inset: 0, zIndex: 200, background: 'rgba(6,6,8,0.88)', backdropFilter: 'blur(10px)', display: 'grid', placeItems: 'center', padding: 32, cursor: 'zoom-out' }}>
                <div onClick={(e) => e.stopPropagation()} style={{ maxWidth: 'min(1400px, 94vw)', width: '100%', cursor: 'default' }}>
                  <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 16, marginBottom: 12 }}>
                    <div>
                      <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 20, letterSpacing: '-0.02em' }}>{name}</div>
                      <div style={{ fontSize: 13, color: 'var(--text-secondary)', marginTop: 2 }}>{tag}</div>
                    </div>
                    <button onClick={() => setZoom(false)} style={{ width: 36, height: 36, borderRadius: 999, border: '1px solid rgba(255,255,255,0.16)', background: 'rgba(255,255,255,0.05)', color: '#fff', cursor: 'pointer', display: 'grid', placeItems: 'center' }}><Icon n="X" s={17} color="#fff" /></button>
                  </div>
                  <img src={img} alt={name} style={{ display: 'block', width: '100%', maxHeight: '80vh', objectFit: 'contain', borderRadius: 14, border: '1px solid rgba(255,255,255,0.12)', boxShadow: '0 50px 120px -40px rgba(0,0,0,0.9)' }} />
                </div>
              </div>
        , document.body) : null}
      </Reveal>
    );
  }

  function PortfolioPage({ onNavigate }) {
    const [filter, setFilter] = useState('All');
    const list = filter === 'All' ? PROJECTS : PROJECTS.filter(p => p[2] === filter);

    const marqueeItems = PROJECTS.map((p, i) => {
      const M = p[3];
      return (
        <div style={{ width: 260, borderRadius: 12, overflow: 'hidden', border: '1px solid rgba(255,255,255,0.1)', background: '#0A0A0D', marginRight: 18 }}>
          <div style={{ height: 155, position: 'relative' }}><M /></div>
        </div>
      );
    });

    return (
      <React.Fragment>
        <Section pad={90} style={{ paddingBottom: 24 }}>
          <div style={{ maxWidth: 780 }}>
            <Reveal><Eyebrow>Selected work</Eyebrow></Reveal>
            <Reveal delay={60}><h1 style={{ fontSize: 'clamp(38px,5.5vw,68px)', lineHeight: 1.0, letterSpacing: '-0.04em', margin: '20px 0 0' }}>Real systems, <Grad>live in the wild.</Grad></h1></Reveal>
            <Reveal delay={130}><p style={{ fontSize: 19, color: 'var(--text-secondary)', lineHeight: 1.6, margin: '22px 0 0', maxWidth: 560 }}>Sites, software and AI we've shipped across industries. Concepts shown here, swap in live client work anytime.</p></Reveal>
          </div>
        </Section>

        <div style={{ padding: '10px 0 30px' }}>
          <Marquee items={marqueeItems} speed={40} sep={false} />
        </div>

        <Section pad={30}>
          <div style={{ display: 'flex', gap: 8, marginBottom: 32, flexWrap: 'wrap' }}>
            {FILTERS.map(f => {
              const on = filter === f;
              return (
                <button key={f} onClick={() => setFilter(f)} style={{ cursor: 'pointer', fontFamily: 'var(--font-body)', fontWeight: 600, fontSize: 14, padding: '9px 18px', borderRadius: 999, border: '1px solid ' + (on ? 'transparent' : 'rgba(255,255,255,0.14)'), color: on ? '#08080A' : 'var(--text-secondary)', background: on ? GRAD : 'transparent', transition: 'all .2s' }}>{f}</button>
              );
            })}
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 20 }} className="pf-grid">
            {list.map((p, i) => <ProjectCard key={p[0] + filter} p={p} delay={i * 40} />)}
          </div>
        </Section>

        <Section pad={40}>
          <Reveal>
            <div style={{ textAlign: 'center', borderRadius: 22, border: '1px solid rgba(255,255,255,0.1)', background: 'linear-gradient(160deg, rgba(255,255,255,0.03), transparent)', padding: 'clamp(36px,5vw,60px)' }}>
              <h2 style={{ fontSize: 'clamp(26px,3.6vw,44px)', margin: 0, lineHeight: 1.05 }}>Yours could be next.</h2>
              <p style={{ fontSize: 17, color: 'var(--text-secondary)', margin: '14px auto 26px', maxWidth: 480, lineHeight: 1.6 }}>Tell us what you need and we'll show you exactly how it comes together.</p>
              <button onClick={() => onNavigate('contact')} className="wk-cta">Start your project <Icon n="ArrowUpRight" s={16} color="#08080A" /></button>
            </div>
          </Reveal>
        </Section>

        <style>{`@media (max-width:900px){.pf-grid{grid-template-columns:1fr 1fr!important}}@media(max-width:620px){.pf-grid{grid-template-columns:1fr!important}}`}</style>
      </React.Fragment>
    );
  }

  window.PortfolioPage = PortfolioPage;
})();