// Winkz Designs 2026, portfolio website mockups.
// Each renders a real desktop page at a shorter above-the-fold canvas, scaled to
// fully fit the browser frame, a complete, crisp site thumbnail (no half-cut rows).
(function () {
  const { useState, useEffect, useRef } = React;
  const Icon = window.Icon;
  const GRAD = 'linear-gradient(120deg,#F23BFE,#79BAFF,#2DE3EA)';

  const Btn = (bg, color, text, extra = {}) => (
    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 10, background: bg, color, fontWeight: 700, fontSize: 20, padding: '15px 28px', borderRadius: 12, whiteSpace: 'nowrap', ...extra }}>{text}</span>
  );

  function Frame({ url, secure = true, children }) {
    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>
          <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={secure ? 'Lock' : 'Globe'} s={9} color="#6b7180" />
            <span style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: '#aeb6c4', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{url}</span>
          </div>
        </div>
        <div style={{ flex: 1, position: 'relative', overflow: 'hidden' }}>{children}</div>
      </div>
    );
  }

  /* Scales a real desktop page to fully fit the frame width, complete site thumbnail. */
  function Screen({ w = 1240, h = 560, children }) {
    const ref = useRef(null);
    const [s, setS] = useState(0.3);
    useEffect(() => {
      const el = ref.current; if (!el) return;
      const upd = () => setS(el.clientWidth / w);
      upd();
      const ro = new ResizeObserver(upd); ro.observe(el);
      return () => ro.disconnect();
    }, [w]);
    return (
      <div ref={ref} style={{ position: 'absolute', inset: 0, overflow: 'hidden' }}>
        <div style={{ width: w, height: h, transform: `scale(${s})`, transformOrigin: 'top left' }}>{children}</div>
      </div>
    );
  }
  const nav = (bg, border) => ({ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '22px 44px', borderBottom: '1px solid ' + border, background: bg });
  const links = (color) => ({ display: 'flex', gap: 30, fontSize: 18, color, alignItems: 'center' });
  const pageStyle = (bg, color, font) => ({ width: '100%', height: '100%', background: bg, color, fontFamily: font });

  /* 1, EVERMART · e-commerce */
  function Evermart() {
    return (
      <Frame url="evermart.com"><Screen>
        <div style={pageStyle('#ffffff', '#0a2540', 'var(--font-body)')}>
          <div style={nav('#fff', '#eef1f6')}>
            <span style={{ display: 'flex', alignItems: 'center', gap: 12, fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 28 }}><span style={{ width: 32, height: 32, borderRadius: 9, background: '#ff8a3c' }} />evermart</span>
            <span style={{ ...links('#5b6a7d') }}><span>Deals</span><span>Categories</span><span>Sell</span><span style={{ display: 'inline-flex', alignItems: 'center', gap: 8, background: '#f4f6fb', border: '1px solid #e6e9f0', borderRadius: 999, padding: '10px 20px' }}><Icon n="Search" s={17} color="#8a97a8" />Search…</span><Icon n="ShoppingCart" s={23} color="#1a73e8" /></span>
          </div>
          <div style={{ padding: '44px', display: 'grid', gridTemplateColumns: '1.1fr 0.9fr', gap: 34, alignItems: 'center' }}>
            <div>
              <div style={{ fontFamily: 'var(--font-display)', fontSize: 60, fontWeight: 800, letterSpacing: '-0.03em', lineHeight: 1.02 }}>Everything,<br />delivered <span style={{ color: '#ff8a3c' }}>tomorrow.</span></div>
              <div style={{ fontSize: 22, color: '#5b6a7d', margin: '22px 0 30px' }}>Millions of products. Free next-day over $35.</div>
              <div style={{ display: 'flex', gap: 16 }}>{Btn('#1a73e8', '#fff', 'Shop now')}{Btn('#fff', '#1a73e8', 'Today\u2019s deals', { border: '2px solid #d5e0f2' })}</div>
            </div>
            <div style={{ borderRadius: 22, background: 'linear-gradient(140deg,#1a73e8,#4f9bff)', padding: '36px', color: '#fff', position: 'relative', overflow: 'hidden' }}>
              <span style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 88, lineHeight: 1 }}>-40%</span>
              <div style={{ fontSize: 22, marginTop: 6, opacity: 0.9 }}>Summer sale, ends soon</div>
              <div style={{ display: 'flex', gap: 14, marginTop: 26 }}>{['#ffd8b0', '#bcd6ff', '#b6f0d6'].map((c, i) => <div key={i} style={{ flex: 1, height: 74, borderRadius: 12, background: c, opacity: 0.9 }} />)}</div>
            </div>
          </div>
        </div>
      </Screen></Frame>
    );
  }

  /* 2, CLARITY HCM · payroll/HR platform (real client, mirrors clarity-hcm.com) */
  function ClaritySite() {
    const emblem = (size) => (
      <svg width={size} height={size * 1.06} viewBox="0 0 120 128" fill="none"><defs><linearGradient id="cl-crest" x1="14" y1="20" x2="106" y2="108" gradientUnits="userSpaceOnUse"><stop stopColor="#35C0ED" /><stop offset="1" stopColor="#9AEBA6" /></linearGradient></defs><g stroke="url(#cl-crest)" strokeWidth="7" strokeLinejoin="round"><path d="M60 60 106 84 60 108 14 84Z" /><path d="M28 84 60 67 92 84 60 101Z" opacity=".5" /><path d="M60 20 106 44 60 68 14 44Z" /><path d="M28 44 60 27 92 44 60 61Z" opacity=".5" /></g></svg>
    );
    return (
      <Frame url="clarity-hcm.com"><Screen>
        <div style={pageStyle('radial-gradient(85% 80% at 50% -6%, #e9f8ff, #ffffff 60%)', '#0f2233', 'var(--font-body)')}>
          <div style={nav('transparent', '#e7eef3')}>
            <span style={{ display: 'flex', alignItems: 'center', gap: 12, fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 26 }}>{emblem(29)}Clarity <span style={{ color: '#6a8aa0', fontWeight: 500 }}>HCM</span></span>
            <span style={{ ...links('#4a637a') }}><span>Platform</span><span>Process</span><span>About</span><span style={{ fontSize: 17, fontWeight: 600, color: '#2a6b85', border: '1px solid #cfe6ef', padding: '10px 20px', borderRadius: 10 }}>Client login</span></span>
          </div>
          <div style={{ textAlign: 'center', padding: '50px 60px 0' }}>
            <div style={{ display: 'flex', justifyContent: 'center', marginBottom: 22 }}>{emblem(64)}</div>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 16, letterSpacing: '0.18em', textTransform: 'uppercase', color: '#2a94b8', marginBottom: 20 }}>Every model · One source of truth</div>
            <div style={{ fontFamily: 'var(--font-display)', fontSize: 54, fontWeight: 700, letterSpacing: '-0.03em', lineHeight: 1.08 }}>Clarity in every <span style={{ fontStyle: 'italic', background: 'linear-gradient(120deg,#35C0ED,#3aa96f)', WebkitBackgroundClip: 'text', backgroundClip: 'text', color: 'transparent' }}>paycheck,</span><br />person, and decision.</div>
            <div style={{ fontSize: 21, color: '#5a7286', margin: '22px auto 0', maxWidth: 720, lineHeight: 1.5 }}>Payroll, HR, benefits, time and talent on one platform, backed by a team that knows your business.</div>
            <div style={{ display: 'flex', flexWrap: 'wrap', justifyContent: 'center', gap: 12, marginTop: 30 }}>
              {['Payroll', 'Human resources', 'Time & attendance', 'Benefits', 'Talent'].map((m, i) => <span key={i} style={{ fontFamily: 'var(--font-mono)', fontSize: 16, color: '#37627d', background: '#fff', border: '1px solid #d3e6ef', borderRadius: 999, padding: '10px 20px' }}>{m}</span>)}
            </div>
          </div>
        </div>
      </Screen></Frame>
    );
  }

  /* 3, OSTERIA NOVE · restaurant */
  function Osteria() {
    return (
      <Frame url="osterianove.com"><Screen>
        <div style={pageStyle('radial-gradient(110% 100% at 64% 10%, #462c18, #140d08 68%)', '#f6ecd9', 'Georgia, serif')}>
          <div style={nav('transparent', 'rgba(217,164,65,0.2)')}>
            <span style={{ fontSize: 27, letterSpacing: '0.18em', color: '#d9a441' }}>OSTERIA NOVE</span>
            <span style={{ fontFamily: 'var(--font-body)', ...links('#c9b489') }}><span>MENU</span><span>WINE</span><span>VISIT</span></span>
          </div>
          <div style={{ padding: '66px 56px 0', maxWidth: 780 }}>
            <div style={{ fontFamily: 'var(--font-body)', fontSize: 17, letterSpacing: '0.28em', color: '#d9a441', marginBottom: 22 }}>WOOD-FIRED · SINCE 1998</div>
            <div style={{ fontSize: 78, lineHeight: 1.02 }}>An evening worth staying for.</div>
            <div style={{ fontFamily: 'var(--font-body)', fontSize: 21, color: '#cdb590', margin: '24px 0 34px', maxWidth: 560, lineHeight: 1.55 }}>Seasonal Italian plates, an all-Italian cellar, and a room made for lingering.</div>
            <div style={{ display: 'flex', gap: 26, alignItems: 'center' }}>{Btn('#d9a441', '#1c1206', 'Reserve a table', { fontFamily: 'var(--font-body)' })}<span style={{ fontFamily: 'var(--font-body)', fontSize: 20, color: '#c9b489' }}>View the menu →</span></div>
          </div>
        </div>
      </Screen></Frame>
    );
  }

  /* 4, VANTAGE REALTY · real estate */
  function Vantage() {
    return (
      <Frame url="vantagerealty.com"><Screen>
        <div style={pageStyle('#0e1b2e', '#eaf2fb', 'var(--font-body)')}>
          <div style={nav('transparent', 'rgba(255,255,255,0.08)')}>
            <span style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 27 }}>Vantage<span style={{ color: '#5aa9e6' }}>.</span></span>
            <span style={{ ...links('#9fb4cc') }}><span>Buy</span><span>Sell</span><span>Agents</span><span style={{ color: '#08161f', background: '#5aa9e6', fontWeight: 700, padding: '11px 22px', borderRadius: 10, fontSize: 17 }}>List with us</span></span>
          </div>
          <div style={{ padding: '44px 44px 0' }}>
            <div style={{ fontFamily: 'var(--font-display)', fontSize: 58, fontWeight: 700, letterSpacing: '-0.03em', lineHeight: 1.0 }}>Find <span style={{ color: '#5aa9e6' }}>the one.</span></div>
            <div style={{ fontSize: 21, color: '#9fb4cc', margin: '16px 0 24px' }}>1,200+ homes across the metro.</div>
            <div style={{ display: 'flex', gap: 16, background: '#12233b', border: '1px solid rgba(255,255,255,0.1)', borderRadius: 14, padding: 15, alignItems: 'center', marginBottom: 30 }}>
              <Icon n="MapPin" s={22} color="#5aa9e6" /><span style={{ fontSize: 19, color: '#c3d5e8' }}>Kirkwood, Atlanta</span>
              <span style={{ marginLeft: 'auto', fontSize: 17, color: '#9fb4cc' }}>Beds ▾</span><span style={{ fontSize: 17, color: '#9fb4cc' }}>Price ▾</span>
              <span style={{ background: '#5aa9e6', color: '#08161f', fontWeight: 700, fontSize: 18, padding: '12px 24px', borderRadius: 10 }}>Search</span>
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 20 }}>
              {[['$740k', '4 bd · Kirkwood', '#274b6e'], ['$525k', '3 bd · Decatur', '#3a5a7a'], ['$960k', '5 bd · Buckhead', '#2c6a8f']].map((p, i) => (
                <div key={i} style={{ borderRadius: 16, overflow: 'hidden', border: '1px solid rgba(255,255,255,0.1)', background: '#12233b' }}>
                  <div style={{ height: 96, background: `linear-gradient(135deg,${p[2]},#5aa9e6)`, position: 'relative' }}>{i === 0 && <span style={{ position: 'absolute', top: 12, left: 12, fontSize: 13, fontFamily: 'var(--font-mono)', color: '#fff', background: 'rgba(0,0,0,0.4)', padding: '5px 11px', borderRadius: 7 }}>NEW</span>}</div>
                  <div style={{ padding: '14px 18px' }}><div style={{ fontWeight: 700, fontSize: 23 }}>{p[0]}</div><div style={{ fontSize: 15, color: '#9fb4cc' }}>{p[1]}</div></div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </Screen></Frame>
    );
  }

  /* 5, FORGE FITNESS · gym */
  function Forge() {
    return (
      <Frame url="forgefitness.com"><Screen>
        <div style={pageStyle('radial-gradient(85% 80% at 84% 100%, rgba(198,255,46,0.14), #0a0a0a 60%)', '#fff', 'var(--font-display)')}>
          <div style={nav('transparent', 'rgba(255,255,255,0.08)')}>
            <span style={{ display: 'flex', alignItems: 'center', gap: 22 }}><span style={{ fontWeight: 800, fontSize: 27 }}>FORGE</span><span style={{ fontFamily: 'var(--font-body)', ...links('#8b8b8b') }}><span>Classes</span><span>Coaches</span><span>Plans</span></span></span>
            <span style={{ fontFamily: 'var(--font-body)', fontSize: 17, fontWeight: 700, color: '#0a0a0a', background: '#c6ff2e', padding: '12px 26px', borderRadius: 10 }}>Join now</span>
          </div>
          <div style={{ padding: '54px 56px 0', display: 'grid', gridTemplateColumns: '1.2fr 0.8fr', gap: 40, alignItems: 'center' }}>
            <div>
              <div style={{ fontSize: 92, fontWeight: 800, lineHeight: 0.92, letterSpacing: '-0.02em' }}>TRAIN LIKE<br /><span style={{ color: '#c6ff2e' }}>IT MATTERS.</span></div>
              <div style={{ display: 'flex', gap: 22, alignItems: 'center', marginTop: 34 }}>{Btn('#c6ff2e', '#0a0a0a', 'Start free', { fontFamily: 'var(--font-body)', textTransform: 'uppercase', letterSpacing: '0.04em' })}<span style={{ fontFamily: 'var(--font-body)', fontSize: 19, color: '#9a9a9a' }}>7-day pass · no card</span></div>
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
              {[['06:00', 'Strength & Power'], ['12:30', 'HIIT Burn'], ['18:00', 'Olympic Lifting']].map((c, i) => (
                <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 18, background: '#141414', border: '1px solid rgba(255,255,255,0.08)', borderRadius: 14, padding: '16px 22px' }}>
                  <span style={{ fontFamily: 'var(--font-body)', fontWeight: 800, fontSize: 24, color: '#c6ff2e' }}>{c[0]}</span>
                  <span style={{ fontFamily: 'var(--font-body)', fontSize: 19, fontWeight: 600 }}>{c[1]}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </Screen></Frame>
    );
  }

  /* 6, LUMEN LAW · legal */
  function LumenLaw() {
    return (
      <Frame url="lumenlaw.com"><Screen>
        <div style={pageStyle('#f7f8fa', '#12233b', 'Georgia, serif')}>
          <div style={nav('#fff', '#e6e9f0')}>
            <span style={{ fontSize: 27, letterSpacing: '0.12em' }}>LUMEN <span style={{ color: '#b08d57' }}>LAW</span></span>
            <span style={{ fontFamily: 'var(--font-body)', ...links('#6b7688') }}><span>Practice</span><span>Team</span><span>Results</span><span style={{ color: '#fff', background: '#12233b', padding: '11px 22px', borderRadius: 9, fontSize: 17 }}>Consult</span></span>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1.12fr 0.88fr', gap: 40, padding: '56px 56px 0', alignItems: 'center' }}>
            <div>
              <div style={{ fontSize: 62, lineHeight: 1.08 }}>Counsel you can <span style={{ color: '#b08d57', fontStyle: 'italic' }}>trust.</span></div>
              <div style={{ fontFamily: 'var(--font-body)', fontSize: 21, color: '#6b7688', margin: '22px 0 32px', lineHeight: 1.55 }}>Three decades protecting businesses &amp; families across the state.</div>
              {Btn('#12233b', '#fff', 'Book a consult', { fontFamily: 'var(--font-body)' })}
              <div style={{ display: 'flex', gap: 40, marginTop: 44, fontFamily: 'var(--font-body)', color: '#6b7688' }}>
                {[['500+', 'Cases won'], ['30 yr', 'Experience'], ['4.9★', 'Rating']].map((s, i) => <div key={i}><div style={{ fontFamily: 'Georgia, serif', fontSize: 32, color: '#12233b' }}>{s[0]}</div><div style={{ fontSize: 15 }}>{s[1]}</div></div>)}
              </div>
            </div>
            <div style={{ borderRadius: 18, background: 'linear-gradient(160deg,#12233b,#24405f)', height: 300, display: 'grid', placeItems: 'center' }}><Icon n="Scale" s={88} color="#b08d57" /></div>
          </div>
        </div>
      </Screen></Frame>
    );
  }

  /* dark, on-brand website hero (home collage) */
  function DarkSite() {
    return (
      <Frame url="nova.app"><Screen>
        <div style={pageStyle('radial-gradient(120% 90% at 70% 0%, #16121f, #08080A)', '#eef', 'var(--font-body)')}>
          <div style={nav('transparent', 'rgba(255,255,255,0.06)')}>
            <span style={{ display: 'flex', alignItems: 'center', gap: 14, fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 25 }}><span style={{ width: 28, height: 28, borderRadius: 8, background: GRAD }} />Nova</span>
            <span style={links('#9aa')}><span>Product</span><span>Pricing</span><span>Docs</span></span>
          </div>
          <div style={{ padding: '64px 56px 0', maxWidth: 800 }}>
            <div style={{ fontFamily: 'var(--font-display)', fontSize: 66, fontWeight: 700, letterSpacing: '-0.03em', lineHeight: 1.02 }}>Launch faster,<br /><span style={{ background: GRAD, WebkitBackgroundClip: 'text', backgroundClip: 'text', color: 'transparent' }}>scale smarter.</span></div>
            <div style={{ fontSize: 21, color: '#9aa', margin: '22px 0 32px' }}>The platform built for teams that ship.</div>
            <div style={{ display: 'flex', gap: 16 }}>{Btn(GRAD, '#08080A', 'Get started')}{Btn('rgba(255,255,255,0.05)', '#dde', 'Live demo', { border: '1px solid rgba(255,255,255,0.18)' })}</div>
          </div>
        </div>
      </Screen></Frame>
    );
  }

  /* SPCR GROUP, real client, actual site screenshot */
  function SPCR() {
    return (
      <Frame url="spcrgroup.com">
        <div style={{ position: 'absolute', inset: 0, overflow: 'hidden', background: '#0a1512' }}>
          <img src="assets/portfolio/spcr-home.png" alt="SPCR Group, live site" style={{ display: 'block', width: '100%', height: 'auto' }} />
        </div>
      </Frame>
    );
  }

  Object.assign(window, { Evermart, ClaritySite, Osteria, Vantage, Forge, LumenLaw, DarkSite, SPCR });
})();