// Winkz Designs 2026, HOME
(function () {
  const { useState, useEffect } = React;
  const { Icon, Reveal, Counter, Eyebrow, SectionHead, Panel, Marquee, Section, Grad, BuildReveal } = window;
  const { EcommerceMock, CFOMock, ChatMock, CRMMock, DashboardMock, PlumbingMock, CRMDashboard } = window;
  const { Evermart, DarkSite } = window;
  const { CostCalculator, Testimonials, Security, FAQ, ValueStats } = window;
  const GRAD = 'linear-gradient(120deg,#F23BFE,#79BAFF,#2DE3EA)';

  const KEYWORDS = ['Website Design', 'Brand Identity', 'Custom CRM', 'Immersive 3D', 'AI SEO', 'Automation', 'AI Support Chat', 'Voice Agents', 'Google Workspace', 'E-commerce', 'Web Apps', 'Business Verification'];

  function CTAButton({ children, onClick, primary = true, icon = 'ArrowUpRight' }) {
    return (
      <button onClick={onClick} className={primary ? 'wk-cta' : 'wk-ghost'}>
        {children}
        {primary
          ? <span className="wk-chip"><Icon n={icon} s={14} color="#fff" strokeWidth={2.4} /></span>
          : <Icon n={icon} s={16} color="#2DE3EA" />}
      </button>
    );
  }

  function Hero({ onNavigate }) {
    return (
      <section style={{ position: 'relative', paddingTop: 'clamp(70px,10vh,120px)', paddingBottom: 30, overflow: 'hidden' }}>
        {window.WinkzStreams && <window.WinkzStreams style={{ top: '-8%', height: '78%' }} opacity={0.38} />}
        <div className="wrap" style={{ position: 'relative', zIndex: 1 }}>
          <div style={{ display: 'grid', gridTemplateColumns: '1.05fr 0.95fr', gap: 48, alignItems: 'center' }} className="hero-grid">
            <div>
              <Reveal><Eyebrow>Website &amp; AI design agency</Eyebrow></Reveal>
              <Reveal delay={60}>
                <h1 style={{ fontSize: 'clamp(40px,6vw,74px)', lineHeight: 0.98, letterSpacing: '-0.04em', margin: '22px 0 0' }}>
                  Your vision,<br /><Grad>our creation.</Grad>
                </h1>
              </Reveal>
              <Reveal delay={130}>
                <p style={{ fontSize: 'clamp(16px,1.5vw,19px)', color: 'var(--text-secondary)', lineHeight: 1.6, maxWidth: 520, margin: '24px 0 0' }}>
                  An integrated website and AI design agency. We design the sites, custom tools and AI systems that fill the gaps and inefficiencies in your business, from your storefront to the software running behind it.
                </p>
              </Reveal>
              <Reveal delay={200}>
                <div style={{ display: 'flex', gap: 12, marginTop: 32, flexWrap: 'wrap' }}>
                  <CTAButton onClick={() => onNavigate('contact')}>Start your project</CTAButton>
                  <CTAButton onClick={() => onNavigate('portfolio')} primary={false} icon="ArrowRight">See our work</CTAButton>
                </div>
              </Reveal>
              <Reveal delay={280}>
                <div style={{ display: 'flex', gap: 28, marginTop: 40, flexWrap: 'wrap' }}>
                  {[['150+', 'Projects shipped'], ['98%', 'Client retention'], ['5+ yrs', 'In business']].map((s, i) => (
                    <div key={i}>
                      <div style={{ fontFamily: 'var(--font-display)', fontSize: 24, fontWeight: 700 }}>{s[0]}</div>
                      <div style={{ fontSize: 12.5, color: 'var(--text-muted)', fontFamily: 'var(--font-mono)' }}>{s[1]}</div>
                    </div>
                  ))}
                </div>
              </Reveal>
            </div>

            {/* live mockup collage, examples of what we've built */}
            <Reveal delay={160}>
              <div style={{ position: 'relative', height: 440 }} className="hero-collage">
                {window.WinkzPortalRing && <window.WinkzPortalRing size={420} style={{ top: '50%', left: '50%', transform: 'translate(-50%,-50%)', opacity: 0.5 }} />}
                <div style={{ position: 'absolute', top: 0, right: 0, width: 260, height: 190, borderRadius: 16, overflow: 'hidden', border: '1px solid rgba(255,255,255,0.12)', boxShadow: '0 30px 70px -30px rgba(0,0,0,0.8)', transform: 'rotate(2.5deg)' }}><CRMDashboard /></div>
                <div style={{ position: 'absolute', top: 130, left: 0, width: 250, height: 210, borderRadius: 16, overflow: 'hidden', border: '1px solid rgba(255,255,255,0.12)', boxShadow: '0 30px 70px -30px rgba(0,0,0,0.8)', transform: 'rotate(-3deg)', zIndex: 2 }}><ChatMock /></div>
                <div style={{ position: 'absolute', bottom: 0, right: 20, width: 240, height: 175, borderRadius: 16, overflow: 'hidden', border: '1px solid rgba(255,255,255,0.12)', boxShadow: '0 30px 70px -30px rgba(0,0,0,0.8)', transform: 'rotate(3deg)' }}><DarkSite /></div>
              </div>
            </Reveal>
          </div>
        </div>
        {/* prominent brand wavelength across the front page */}
        {window.WinkzStreams && (
          <div style={{ position: 'relative', marginTop: 8, height: 130, pointerEvents: 'none' }}>
            <window.WinkzStreams style={{ position: 'absolute', inset: 0 }} opacity={0.85} blur={16} />
          </div>
        )}
      </section>
    );
  }

  function KeywordBand() {
    const item = (t) => <span style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 22, color: 'rgba(255,255,255,0.5)', letterSpacing: '-0.02em' }}>{t}</span>;
    const item2 = (t) => <span style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 18, color: 'rgba(255,255,255,0.3)', letterSpacing: '-0.02em' }}>{t}</span>;
    return (
      <div style={{ padding: '18px 0', borderTop: '1px solid rgba(255,255,255,0.06)', borderBottom: '1px solid rgba(255,255,255,0.06)', background: 'rgba(255,255,255,0.015)', display: 'flex', flexDirection: 'column', gap: 12 }}>
        <Marquee items={KEYWORDS.map(item)} speed={55} />
        <Marquee items={KEYWORDS.slice().reverse().map(item2)} speed={40} reverse />
      </div>
    );
  }

  const REVIEWS = [
    ['Our old site never showed up on Google. The new one books jobs on its own.', 'Dana W.', 'Beacon Plumbing'],
    ['Winkz replaced four monthly subscriptions with one tool we actually own.', 'Marcus L.', 'Maple & Co.'],
    ['The CRM was built around how we sell, not the other way around.', 'Priya N.', 'Relay'],
    ['Their AI assistant answers after hours and books the job while we sleep.', 'Owen B.', 'Copperline Electric'],
    ['Launched in three weeks and the phone started ringing the same month.', 'Sofia R.', 'Northbend Dental'],
    ['They handed over everything. No lock-in, no monthly surprises.', 'Ari T.', 'Summit & Slate'],
  ];

  function ReviewTicker() {
    const gLogo = (s) => (
      <svg width={s} height={s} viewBox="0 0 48 48" aria-hidden="true" style={{ display: 'block', flexShrink: 0 }}>
        <path fill="#4285F4" d="M45.1 24.5c0-1.6-.14-3.16-.42-4.66H24v8.82h11.83c-.51 2.75-2.06 5.08-4.39 6.64v5.52h7.1c4.16-3.83 6.56-9.47 6.56-16.32z" />
        <path fill="#34A853" d="M24 46c5.94 0 10.92-1.97 14.56-5.32l-7.1-5.52c-1.97 1.32-4.49 2.1-7.46 2.1-5.73 0-10.58-3.87-12.31-9.07H4.34v5.7C7.96 41.07 15.4 46 24 46z" />
        <path fill="#FBBC04" d="M11.69 28.19A13.2 13.2 0 0 1 11 24c0-1.46.25-2.87.69-4.19v-5.7H4.34A22 22 0 0 0 2 24c0 3.55.85 6.91 2.34 9.89l7.35-5.7z" />
        <path fill="#EA4335" d="M24 10.74c3.23 0 6.13 1.11 8.41 3.29l6.3-6.3C34.91 4.18 29.93 2 24 2 15.4 2 7.96 6.93 4.34 14.11l7.35 5.7C13.42 14.61 18.27 10.74 24 10.74z" />
      </svg>
    );
    const stars = (s) => (
      <span style={{ display: 'flex', gap: 2 }}>
        {[0, 1, 2, 3, 4].map(i => (
          <svg key={i} width={s} height={s} viewBox="0 0 24 24" fill="#FBBC04" aria-hidden="true" style={{ display: 'block' }}>
            <path d="M12 2.4l2.95 5.98 6.6.96-4.77 4.65 1.13 6.57L12 17.46l-5.91 3.1 1.13-6.57L2.45 9.34l6.6-.96L12 2.4z" />
          </svg>
        ))}
      </span>
    );
    const item = ([quote, who, where], i) => (
      <div key={i} style={{ width: 380, marginRight: 16, padding: '20px 24px', borderRadius: 16, border: '1px solid rgba(255,255,255,0.09)', background: 'linear-gradient(165deg, rgba(255,255,255,0.045), rgba(255,255,255,0.015))', whiteSpace: 'normal' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 9, marginBottom: 12 }}>
          {gLogo(15)}
          {stars(12)}
          <span style={{ fontFamily: 'var(--font-body)', fontWeight: 700, fontSize: 13, color: 'var(--text-primary)' }}>5.0</span>
        </div>
        <p style={{ fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: 15.5, lineHeight: 1.45, letterSpacing: '-0.01em', color: 'rgba(255,255,255,0.9)', margin: 0 }}>&ldquo;{quote}&rdquo;</p>
        <div style={{ marginTop: 12, fontSize: 12.5, color: 'var(--text-muted)' }}>
          <span style={{ color: 'var(--text-secondary)', fontWeight: 600 }}>{who}</span> · {where}
        </div>
      </div>
    );
    return (
      <div style={{ padding: '46px 0 10px', overflow: 'hidden' }}>
        <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', gap: 12, marginBottom: 22 }}>
          {gLogo(18)}
          <span style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 19, letterSpacing: '-0.02em' }}>4.9</span>
          {stars(14)}
        </div>
        <Marquee items={REVIEWS.map(item)} speed={30} sep={false} />
      </div>
    );
  }

  const SERVICES = [
    ['Globe', 'Website creation', 'Fast, custom sites engineered to convert, one-pagers to full web apps.'],
    ['Palette', 'Brand development', 'Logos, identity and guidelines that make you unmistakable.'],
    ['Boxes', 'Immersive build-outs', '3D and scroll-driven experiences that stop the scroll.'],
    ['Database', 'Custom CRM & tools', 'Software you own, built around how your team really works.'],
    ['Bot', 'AI systems & chat', 'Assistants and automations that answer, qualify and book 24/7.'],
    ['Search', 'AI SEO', 'Be the answer when customers ask Google, and AI.'],
  ];

  function ServicesBento({ onNavigate }) {
    return (
      <Section id="services" style={{ position: 'relative', overflow: 'hidden' }}>
        {window.WinkzWPattern && <window.WinkzWPattern opacity={0.04} size={92} style={{ maskImage: 'radial-gradient(90% 80% at 80% 20%, #000 20%, transparent 80%)', WebkitMaskImage: 'radial-gradient(90% 80% at 80% 20%, #000 20%, transparent 80%)' }} />}
        <SectionHead eyebrow="What we build" title={<>A website, <Grad>and everything after it.</Grad></>} sub="A great site is just the front door. We build the brand, tools and AI behind it too, so every piece works together to bring you more business, not just a prettier page." max={680} />
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }} className="bento">
          {SERVICES.map((s, i) => (
            <Reveal key={i} delay={i * 50}>
              <Panel hover pad={24} style={{ height: '100%' }}>
                <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
                  <span style={{ width: 44, height: 44, borderRadius: 12, background: 'rgba(45,227,234,0.12)', border: '1px solid rgba(45,227,234,0.25)', display: 'grid', placeItems: 'center', marginBottom: 18 }}><Icon n={s[0]} s={21} color="#2DE3EA" /></span>
                  <h3 style={{ fontSize: 19, margin: '0 0 8px' }}>{s[1]}</h3>
                  <p style={{ fontSize: 14.5, color: 'var(--text-secondary)', lineHeight: 1.6, margin: 0 }}>{s[2]}</p>
                </div>
              </Panel>
            </Reveal>
          ))}
        </div>
        <Reveal delay={100}>
          <div style={{ display: 'flex', justifyContent: 'center', marginTop: 32 }}>
            <CTAButton onClick={() => onNavigate('services')} primary={false} icon="ArrowRight">All ten services</CTAButton>
          </div>
        </Reveal>
      </Section>
    );
  }

  const GAPS = [
    ['Leads slip through the cracks', 'A custom CRM that captures and books every one', 'MessageSquareWarning', CRMMock],
    ['Customer data lives in ten places', 'One CRM dashboard, your single source of truth', 'LayoutDashboard', CRMDashboard],
    ['No clear view of the numbers', 'A live dashboard built around your KPIs', 'LineChart', CFOMock],
    ["Support can't keep up", 'An AI assistant that answers 24/7, in your voice', 'Headset', ChatMock],
  ];

  function GapSystems({ onNavigate }) {
    return (
      <Section style={{ background: 'linear-gradient(180deg, transparent, rgba(242,59,254,0.04), transparent)' }}>
        <SectionHead eyebrow="Custom tools &amp; AI systems" title={<>We design to <Grad>fill the gaps.</Grad></>} sub="Wherever your business leaks time or loses customers, we build the custom software and AI to close it, CRMs, dashboards, automations and assistants, all your own." max={680} />
        <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
          {GAPS.map((g, i) => {
            const M = g[3];
            const flip = i % 2 === 1;
            return (
              <Reveal key={i} delay={i * 40}>
                <Panel pad={0} hover>
                  <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 0, alignItems: 'stretch', direction: flip ? 'rtl' : 'ltr' }} className="gap-row">
                    <div style={{ direction: 'ltr', padding: '30px 32px', display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
                      <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, alignSelf: 'flex-start', fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--winkz-magenta-bright)', border: '1px solid rgba(242,59,254,0.28)', background: 'rgba(242,59,254,0.07)', borderRadius: 999, padding: '5px 11px', marginBottom: 16 }}><Icon n={g[2]} s={13} color="#FF5BFF" />The gap</div>
                      <h3 style={{ fontSize: 'clamp(20px,2.2vw,27px)', margin: '0 0 14px', lineHeight: 1.12, color: 'var(--text-muted)', textDecoration: 'line-through', textDecorationColor: 'rgba(255,90,110,0.5)', textDecorationThickness: 2 }}>{g[0]}</h3>
                      <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                        <span style={{ width: 30, height: 30, borderRadius: 999, background: 'rgba(45,227,234,0.14)', border: '1px solid rgba(45,227,234,0.3)', display: 'grid', placeItems: 'center', flexShrink: 0 }}><Icon n="ArrowRight" s={15} color="#2DE3EA" /></span>
                        <p style={{ fontSize: 16, color: 'var(--text-primary)', lineHeight: 1.5, margin: 0, fontWeight: 500 }}>{g[1]}</p>
                      </div>
                    </div>
                    <div style={{ direction: 'ltr', position: 'relative', minHeight: 220, borderLeft: flip ? 'none' : '1px solid rgba(255,255,255,0.07)', borderRight: flip ? '1px solid rgba(255,255,255,0.07)' : 'none', overflow: 'hidden' }}>
                      <M />
                    </div>
                  </div>
                </Panel>
              </Reveal>
            );
          })}
        </div>
        <Reveal delay={100}>
          <div style={{ display: 'flex', justifyContent: 'center', marginTop: 32 }}>
            <CTAButton onClick={() => onNavigate('contact')}>Find the gaps in my business</CTAButton>
          </div>
        </Reveal>
      </Section>
    );
  }

  const BUILDS = [
    ['Database', 'Custom CRM', 'Your pipeline, your fields, your way.'],
    ['LayoutDashboard', 'Client portals', 'A branded home your clients log into.'],
    ['Workflow', 'AI automations', 'The repetitive work runs itself.'],
    ['Cable', 'Workflow integrations', 'Every tool you use, talking day one.'],
    ['Wrench', 'Internal tools', 'Purpose-built for how your team works.'],
    ['LineChart', 'Dashboards', 'One clear view of what matters.'],
  ];
  const SAAS_CONS = ['$X per seat, every month, forever', "Overwhelming, features you'll never touch", 'Generic: built for everyone, fits no one', 'Your data lives on their servers', 'Integrations cost extra, if they exist'];
  const WINKZ_PROS = ["Built once, and it's yours to keep", 'Only the features your business needs', 'Custom-built to your workflow, no templates', 'Your data, your accounts, fully secure', 'Connected to your tools from day one'];
  const OWN_HIGHLIGHTS = [
    ['Compass', 'We learn your whole business', 'Deep onboarding first, we map every workflow before we build, so the software fits like it grew there.'],
    ['Palette', 'Built for your whole team', 'Genuinely great, on-brand UI your whole staff will actually enjoy using, not just you.'],
    ['ShieldCheck', 'Yours, and secure', 'You own it outright. Safe, secure data on your accounts, no lock-in, no monthly surprises.'],
  ];

  function OwnSoftware({ onNavigate }) {
    return (
      <Section style={{ background: 'linear-gradient(180deg, rgba(255,255,255,0.015), transparent)' }}>
        <SectionHead eyebrow="Custom software you own" title={<>Enterprise software, <Grad>without the bloat.</Grad></>} sub="The big-name platforms are expensive, overwhelming, and full of features you'll never use. We build the opposite: simple, custom software shaped to your business, integrated with everything from day one, and it's yours." max={700} />

        {/* comparison */}
        <div style={{ display: 'grid', gridTemplateColumns: '0.8fr 1.2fr', gap: 18, marginBottom: 20, alignItems: 'center' }} className="own-vs">
          <Reveal>
            <div style={{ borderRadius: 18, border: '1px solid rgba(255,255,255,0.06)', background: 'rgba(255,255,255,0.012)', padding: 24, opacity: 0.62, filter: 'grayscale(0.4)', transform: 'scale(0.96)' }}>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--text-muted)', marginBottom: 16 }}>The usual subscription</div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 11 }}>
                {SAAS_CONS.map((c, i) => (
                  <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 11 }}>
                    <span style={{ width: 20, height: 20, borderRadius: 999, background: 'rgba(255,90,110,0.1)', display: 'grid', placeItems: 'center', flexShrink: 0 }}><Icon n="X" s={12} color="#FF5A6E" /></span>
                    <span style={{ fontSize: 13.5, color: 'var(--text-muted)' }}>{c}</span>
                  </div>
                ))}
              </div>
            </div>
          </Reveal>
          <Reveal delay={80}>
            <div style={{ position: 'relative', borderRadius: 22, padding: 1.5, background: GRAD, boxShadow: '0 0 0 1px rgba(45,227,234,0.2), 0 40px 90px -40px rgba(242,59,254,0.6), 0 0 60px -10px rgba(45,227,234,0.35)' }}>
              <span style={{ position: 'absolute', top: -13, left: 28, zIndex: 2, display: 'inline-flex', alignItems: 'center', gap: 6, background: GRAD, color: '#08080A', fontFamily: 'var(--font-mono)', fontSize: 11, fontWeight: 700, letterSpacing: '0.08em', padding: '5px 12px', borderRadius: 999, boxShadow: '0 8px 20px -6px rgba(242,59,254,0.6)' }}><Icon n="Sparkles" s={12} color="#08080A" />BEST VALUE</span>
              <div style={{ borderRadius: 21, background: 'linear-gradient(165deg, rgba(26,26,34,0.96), rgba(10,10,13,0.98))', padding: '34px 34px 30px' }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 20 }}>
                  <img src="assets/logo-mark.svg" alt="" style={{ height: 22 }} />
                  <span style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 20, letterSpacing: '-0.02em' }}>A Winkz system</span>
                </div>
                <div style={{ display: 'flex', flexDirection: 'column', gap: 15 }}>
                  {WINKZ_PROS.map((c, i) => (
                    <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 13 }}>
                      <span style={{ width: 26, height: 26, borderRadius: 999, background: GRAD, display: 'grid', placeItems: 'center', flexShrink: 0, boxShadow: '0 0 14px rgba(45,227,160,0.4)' }}><Icon n="Check" s={15} color="#08080A" strokeWidth={2.5} /></span>
                      <span style={{ fontSize: 16.5, fontWeight: 500, color: 'var(--text-primary)' }}>{c}</span>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          </Reveal>
        </div>

        {/* what we build */}
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 14, marginBottom: 20 }} className="own-builds">
          {BUILDS.map((b, i) => (
            <Reveal key={i} delay={i * 40}>
              <div style={{ display: 'flex', alignItems: 'flex-start', gap: 13, padding: '18px 20px', borderRadius: 14, border: '1px solid rgba(255,255,255,0.08)', background: 'rgba(255,255,255,0.02)', height: '100%' }}>
                <span style={{ width: 40, height: 40, borderRadius: 11, background: 'rgba(45,227,234,0.12)', border: '1px solid rgba(45,227,234,0.24)', display: 'grid', placeItems: 'center', flexShrink: 0 }}><Icon n={b[0]} s={19} color="#2DE3EA" /></span>
                <div><div style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 16 }}>{b[1]}</div><div style={{ fontSize: 13, color: 'var(--text-secondary)', lineHeight: 1.5, marginTop: 3 }}>{b[2]}</div></div>
              </div>
            </Reveal>
          ))}
        </div>

        {/* highlights */}
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 14 }} className="own-hi">
          {OWN_HIGHLIGHTS.map((h, i) => (
            <Reveal key={i} delay={i * 50}>
              <div style={{ padding: '24px 22px', borderRadius: 16, border: '1px solid rgba(255,255,255,0.08)', background: 'linear-gradient(160deg, rgba(242,59,254,0.05), transparent)', height: '100%' }}>
                <span style={{ width: 42, height: 42, borderRadius: 11, background: 'rgba(242,59,254,0.1)', border: '1px solid rgba(242,59,254,0.22)', display: 'grid', placeItems: 'center', marginBottom: 15 }}><Icon n={h[0]} s={20} color="#FF5BFF" /></span>
                <h4 style={{ fontSize: 17, margin: '0 0 8px' }}>{h[1]}</h4>
                <p style={{ fontSize: 13.5, color: 'var(--text-secondary)', lineHeight: 1.6, margin: 0 }}>{h[2]}</p>
              </div>
            </Reveal>
          ))}
        </div>

        <Reveal delay={100}>
          <div style={{ display: 'flex', justifyContent: 'center', marginTop: 32 }}>
            <CTAButton onClick={() => onNavigate('contact')}>Build my own system</CTAButton>
          </div>
        </Reveal>

        <style>{`@media (max-width:900px){.own-vs{grid-template-columns:1fr!important}.own-builds,.own-hi{grid-template-columns:1fr!important}}`}</style>
      </Section>
    );
  }

  function HowWeBuild() {
    const steps = [
      ['01', 'Align', 'A focused kickoff. We dig into the goal, the audience and the numbers, then commit to a clear scope.'],
      ['02', 'Design', 'Direction, then hi-fi. You see real screens early and often, never a surprise at the end.'],
      ['03', 'Build', 'Short iterations in the real thing. Every week ends with something you can click.'],
      ['04', 'Launch', 'We ship it, wire the analytics and hand you the keys, plus plain-English docs.'],
    ];
    return (
      <Section style={{ background: 'linear-gradient(180deg, rgba(255,255,255,0.015), transparent)' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '0.9fr 1.1fr', gap: 56, alignItems: 'start' }} className="hwb-grid">
          <div>
            <Reveal><Eyebrow>How we build</Eyebrow></Reveal>
            <Reveal delay={60}><h2 style={{ fontSize: 'clamp(32px,4vw,52px)', lineHeight: 1.02, margin: '18px 0 0' }}>We ship systems,<br />not <Grad>slide decks.</Grad></h2></Reveal>
            <Reveal delay={120}><p style={{ fontSize: 17, color: 'var(--text-secondary)', lineHeight: 1.65, margin: '20px 0 0', maxWidth: 380 }}>A senior team, short feedback loops, and work that goes live. No black boxes, no juniors learning on your project.</p></Reveal>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
            {steps.map((s, i) => (
              <Reveal key={i} delay={i * 70}>
                <div style={{ display: 'flex', gap: 20, padding: '20px 22px', borderRadius: 14, border: '1px solid rgba(255,255,255,0.08)', background: 'rgba(255,255,255,0.02)' }}>
                  <span style={{ fontFamily: 'var(--font-mono)', fontSize: 15, fontWeight: 700, color: 'var(--winkz-magenta-bright)' }}>{s[0]}</span>
                  <div><h4 style={{ fontSize: 19, margin: '0 0 6px' }}>{s[1]}</h4><p style={{ fontSize: 14.5, color: 'var(--text-secondary)', lineHeight: 1.6, margin: 0 }}>{s[2]}</p></div>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </Section>
    );
  }

  function WorkStrip({ onNavigate }) {
    const cards = [
      ['Maple & Co.', 'Online store', EcommerceMock], ['Beacon Plumbing', 'Service website', PlumbingMock],
      ['Northstar Finance', 'Finance dashboard', CFOMock], ['Relay', 'Custom CRM', CRMDashboard],
      ['Pipeline', 'Sales CRM', CRMMock], ['Ansa', 'AI support chat', ChatMock], ['Groundwork', 'Analytics', DashboardMock],
    ];
    const card = ([name, tag, M]) => (
      <div style={{ width: 300, borderRadius: 14, overflow: 'hidden', border: '1px solid rgba(255,255,255,0.1)', background: '#0A0A0D', boxShadow: '0 20px 50px -30px rgba(0,0,0,0.8)' }}>
        <div style={{ height: 180, position: 'relative' }}><M /></div>
        <div style={{ padding: '13px 16px', display: 'flex', justifyContent: 'space-between', alignItems: 'center', borderTop: '1px solid rgba(255,255,255,0.06)' }}>
          <span style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 15 }}>{name}</span>
          <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--winkz-cyan)' }}>{tag}</span>
        </div>
      </div>
    );
    return (
      <Section style={{ paddingBottom: 60 }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 36, flexWrap: 'wrap', gap: 16 }}>
          <div>
            <Reveal><Eyebrow>Featured work</Eyebrow></Reveal>
            <Reveal delay={60}><h2 style={{ fontSize: 'clamp(28px,3.4vw,44px)', margin: '16px 0 0', lineHeight: 1.05 }}>Real brands. <Grad>Real impact.</Grad></h2></Reveal>
          </div>
          <Reveal delay={100}><CTAButton onClick={() => onNavigate('portfolio')} primary={false} icon="ArrowRight">View all projects</CTAButton></Reveal>
        </div>
      </Section>
    );
  }

  function WorkMarquee() {
    const shot = (src, domain) => function ShotCard() {
      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: 200, fontFamily: 'var(--font-mono)', fontSize: 10, color: '#aeb6c4', whiteSpace: 'nowrap', overflow: 'hidden' }}>{domain}</div>
            ) : (
              <div style={{ flex: 1, height: 18, borderRadius: 999, background: '#14161d', border: '1px solid rgba(255,255,255,0.06)', maxWidth: 200 }} />
            )}
          </div>
          <div style={{ flex: 1, position: 'relative', overflow: 'hidden' }}>
            <img src={src} alt="" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'top center', display: 'block' }} />
          </div>
        </div>
      );
    };
    const cards = [
      ['The Valuable Pineapple', 'Brand partnerships', shot('assets/portfolio/valuablepineapple.png', 'valuablepineapple.com')],
      ['Icarian Ventures', 'Brand growth partner', shot('assets/portfolio/icarian.png', 'icarianventures.com')],
      ['SPCR Group', 'Ecommerce growth', window.SPCR],
      ['Clarity HCM', 'HR & payroll', window.ClaritySite],
      ['Summit & Slate', 'Home remodeling', shot('assets/portfolio/c-summit-slate.png')],
      ['Northbend Dental', 'Dental practice', shot('assets/portfolio/c-northbend-dental.png')],
      ['Harlan & Voss', 'Litigation firm', shot('assets/portfolio/c-harlan-voss.png')],
      ['Osteria Nove', 'Restaurant', shot('assets/portfolio/c-osteria-nove.png')],
      ['Evermart', 'E-commerce', shot('assets/portfolio/c-evermart.png')],
      ['Ansa', 'AI support chat', window.ChatMock],
    ];
    const card = ([name, tag, M], i) => (
      <div style={{ width: 300, borderRadius: 14, overflow: 'hidden', border: '1px solid rgba(255,255,255,0.1)', background: '#0A0A0D', boxShadow: '0 20px 50px -30px rgba(0,0,0,0.8)', marginRight: 20 }}>
        <div style={{ height: 180, position: 'relative' }}>{M ? <M /> : null}</div>
        <div style={{ padding: '14px 16px', borderTop: '1px solid rgba(255,255,255,0.06)' }}>
          <div style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 15 }}>{name}</div>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--text-muted)', marginTop: 3 }}>{tag}</div>
        </div>
      </div>
    );
    return <div style={{ paddingBottom: 90 }}><Marquee items={cards.map(card)} speed={45} sep={false} /></div>;
  }

  function CTA({ onNavigate }) {
    return (
      <Section>
        <Reveal>
          <div style={{ position: 'relative', borderRadius: 26, overflow: 'hidden', padding: '1px', background: GRAD, boxShadow: '0 40px 100px -40px rgba(242,59,254,0.5)' }}>
            <div style={{ borderRadius: 25, background: 'linear-gradient(160deg,#0D0D12,#08080A)', padding: 'clamp(40px,6vw,72px)', textAlign: 'center', position: 'relative', overflow: 'hidden' }}>
              <div style={{ position: 'absolute', top: -60, left: '50%', transform: 'translateX(-50%)', width: 600, height: 300, background: 'radial-gradient(50% 50% at 50% 50%, rgba(242,59,254,0.2), transparent 70%)' }} />
              {window.WinkzWPattern && <window.WinkzWPattern opacity={0.055} size={64} />}
              <img src="assets/logo-mark.svg" alt="" aria-hidden="true" style={{ position: 'absolute', right: -46, bottom: -54, width: 300, opacity: 0.07, transform: 'rotate(-10deg)', pointerEvents: 'none' }} />
              <div style={{ position: 'relative' }}>
                <h2 style={{ fontSize: 'clamp(30px,4.5vw,56px)', lineHeight: 1.02, margin: 0 }}>Let's build <Grad>the next one.</Grad></h2>
                <p style={{ fontSize: 18, color: 'var(--text-secondary)', maxWidth: 520, margin: '20px auto 0', lineHeight: 1.6 }}>Free 30-minute intro call. Bring the problem, we'll tell you honestly if we're the right team.</p>
                <div style={{ display: 'flex', gap: 12, justifyContent: 'center', marginTop: 34, flexWrap: 'wrap' }}>
                  <CTAButton onClick={() => onNavigate('contact')}>Book a call</CTAButton>
                  <CTAButton onClick={() => onNavigate('services')} primary={false} icon="ArrowRight">View services</CTAButton>
                </div>
                <div style={{ display: 'flex', justifyContent: 'center', gap: 26, marginTop: 26, flexWrap: 'wrap', fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--text-muted)' }}>
                  <span style={{ display: 'inline-flex', alignItems: 'center', gap: 7 }}><Icon n="Check" s={13} color="#2DE3EA" />Fixed price, quoted up front</span>
                  <span style={{ display: 'inline-flex', alignItems: 'center', gap: 7 }}><Icon n="Check" s={13} color="#2DE3EA" />Reply within 24 hours</span>
                  <span style={{ display: 'inline-flex', alignItems: 'center', gap: 7 }}><Icon n="Check" s={13} color="#2DE3EA" />You own everything we build</span>
                </div>
              </div>
            </div>
          </div>
        </Reveal>
      </Section>
    );
  }

  function HomePage({ onNavigate }) {
    return (
      <React.Fragment>
        <Hero onNavigate={onNavigate} />
        <KeywordBand />
        <ReviewTicker />
        <BuildReveal />
        <ServicesBento onNavigate={onNavigate} />
        <GapSystems onNavigate={onNavigate} />
        <ValueStats onNavigate={onNavigate} />
        <OwnSoftware onNavigate={onNavigate} />
        <CostCalculator onNavigate={onNavigate} />
        <WorkStrip onNavigate={onNavigate} />
        <WorkMarquee />
        <div style={{ display: 'flex', alignItems: 'center', gap: 22, maxWidth: 1120, margin: '0 auto 70px', padding: '0 32px' }}>
          <span style={{ flex: 1, height: 1, background: 'linear-gradient(90deg,transparent,rgba(255,255,255,0.16))' }} />
          <img src="assets/logo-mark.svg" alt="" aria-hidden="true" style={{ height: 26, filter: 'drop-shadow(0 0 12px rgba(242,59,254,0.55)) drop-shadow(0 0 10px rgba(45,227,234,0.4))' }} />
          <span style={{ flex: 1, height: 1, background: 'linear-gradient(90deg,rgba(255,255,255,0.16),transparent)' }} />
        </div>
        <CTA onNavigate={onNavigate} />
        <style>{`
          @media (max-width:900px){
            .hero-grid{grid-template-columns:1fr!important}
            .hero-collage{display:none!important}
            .bento{grid-template-columns:1fr 1fr!important}
            .bento>*{grid-column:span 1!important}
            .hwb-grid{grid-template-columns:1fr!important;gap:32px!important}
            .gap-row{grid-template-columns:1fr!important;direction:ltr!important}
            .gap-row>div:last-child{border-left:none!important;border-right:none!important;border-top:1px solid rgba(255,255,255,0.07)}
          }
          @media (max-width:620px){ .bento{grid-template-columns:1fr!important} }
        `}</style>
      </React.Fragment>
    );
  }

  window.HomePage = HomePage;
})();
