// Winkz Designs 2026, SERVICES
(function () {
  const { Icon, Reveal, Eyebrow, SectionHead, Panel, Section, Grad } = window;
  const GRAD = 'linear-gradient(120deg,#F23BFE,#79BAFF,#2DE3EA)';

  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>
    );
  }

  const CORE = [
    ['Globe', 'Website creation', 'Custom, fast, conversion-focused websites, from a sharp one-pager to a full web app. Designed and coded from scratch, never a template.', ['Custom design & build', 'Mobile-first & fast', 'CMS so you can edit it', 'Analytics wired in'], 'seo-website-design'],
    ['RefreshCw', 'Website redesign + AI SEO', "Rebuild a dated site into something that earns trust and ranks, then tune it for AI search so you're the answer customers get.", ['Modern rebuild', 'Technical + content SEO', 'Optimised for AI answers', 'Speed & Core Web Vitals'], 'seo-ai-seo'],
    ['Palette', 'Brand development', 'The look, voice and rules that make you unmistakable, logo, identity system and guidelines your whole team can use.', ['Logo & identity', 'Color & type system', 'Brand guidelines', 'Social & asset kit'], 'seo-brand-identity'],
    ['Boxes', 'Immersive build-outs', 'Scroll-driven stories, 3D and interactive experiences for launches and campaigns that people actually remember.', ['Scroll & motion design', '3D / WebGL scenes', 'Interactive product demos', 'Launch microsites'], null],
    ['Database', 'Custom CRM software', 'A CRM you own, built around how your team really works, pipelines, dashboards and automations, no per-seat tax.', ['Built to your workflow', 'Pipelines & dashboards', 'Integrations & imports', 'You own the data'], 'seo-custom-crm'],
  ];

  const MORE = [
    ['Bot', 'AI support chats', 'Always-on assistants that answer questions, qualify leads and book jobs, grounded in your real content, in your voice.', 'seo-ai-agents'],
    ['PhoneCall', 'AI voice agents', 'A voice agent that picks up every call, answers the real questions and books the appointment, day or night.', 'seo-ai-agents'],
    ['Workflow', 'Automation audits', 'We map the busywork and wire up the automations that quietly claw back hours every week.'],
    ['Boxes', 'Google Workspace setup', 'Email, drive, calendars and permissions set up properly, professional, secure and out of your way.'],
    ['BadgeCheck', 'Business verification', 'Get verified and trusted across Google, Meta and the platforms that gate growth, done right the first time.'],
    ['LineChart', 'Analytics & dashboards', 'One clear view of what matters, traffic, revenue, pipeline, so decisions run on numbers, not vibes.'],
  ];

  function ServicesPage({ onNavigate }) {
    return (
      <React.Fragment>
        <Section pad={90} style={{ paddingBottom: 30 }}>
          <div style={{ maxWidth: 760 }}>
            <Reveal><Eyebrow>Services</Eyebrow></Reveal>
            <Reveal delay={60}><h1 style={{ fontSize: 'clamp(38px,5.5vw,68px)', lineHeight: 1.0, letterSpacing: '-0.04em', margin: '20px 0 0' }}>Everything you need to <Grad>build, launch and grow.</Grad></h1></Reveal>
            <Reveal delay={130}><p style={{ fontSize: 19, color: 'var(--text-secondary)', lineHeight: 1.6, margin: '22px 0 0', maxWidth: 560 }}>Design, software and AI in one studio. Take one service or the whole stack, it all connects because one team builds it.</p></Reveal>
          </div>
        </Section>

        {/* Core services, split cards */}
        <Section pad={30}>
          <SectionHead eyebrow="Core offerings" title={<>Where most projects <Grad>start.</Grad></>} max={620} />
          <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
            {CORE.map((s, i) => (
              <Reveal key={i} delay={i * 40}>
                <Panel hover pad={0}>
                  <div style={{ display: 'grid', gridTemplateColumns: '1.3fr 1fr', gap: 0, alignItems: 'stretch' }} className="svc-split">
                    <div style={{ padding: 34 }}>
                      <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: 16 }}>
                        <span style={{ width: 48, height: 48, borderRadius: 13, background: 'rgba(45,227,234,0.12)', border: '1px solid rgba(45,227,234,0.25)', display: 'grid', placeItems: 'center' }}><Icon n={s[0]} s={23} color="#2DE3EA" /></span>
                        <span style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--text-muted)' }}>0{i + 1}</span>
                      </div>
                      <h3 style={{ fontSize: 26, margin: '0 0 10px' }}>{s[1]}</h3>
                      <p style={{ fontSize: 15.5, color: 'var(--text-secondary)', lineHeight: 1.65, margin: 0, maxWidth: 440 }}>{s[2]}</p>
                      {s[4] && <button onClick={() => onNavigate(s[4])} style={{ display: 'inline-flex', alignItems: 'center', gap: 6, marginTop: 16, background: 'none', border: 'none', cursor: 'pointer', padding: 0, fontFamily: 'var(--font-body)', fontWeight: 600, fontSize: 14, color: '#2DE3EA' }}>Learn more <Icon n="ArrowUpRight" s={14} color="#2DE3EA" /></button>}
                    </div>
                    <div style={{ padding: 34, borderLeft: '1px solid rgba(255,255,255,0.07)', background: 'rgba(255,255,255,0.015)', display: 'flex', flexDirection: 'column', justifyContent: 'center', gap: 13 }}>
                      {s[3].map((b, k) => (
                        <div key={k} style={{ display: 'flex', alignItems: 'center', gap: 11 }}>
                          <span style={{ width: 20, height: 20, borderRadius: 999, background: 'rgba(45,227,160,0.14)', display: 'grid', placeItems: 'center', flexShrink: 0 }}><Icon n="Check" s={12} color="#2DE3A0" /></span>
                          <span style={{ fontSize: 14.5, color: 'var(--text-primary)' }}>{b}</span>
                        </div>
                      ))}
                    </div>
                  </div>
                </Panel>
              </Reveal>
            ))}
          </div>
        </Section>

        {/* More, AI & growth grid */}
        <Section pad={40}>
          <SectionHead eyebrow="AI, growth & ops" title={<>The systems that keep <Grad>compounding.</Grad></>} max={640} />
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 16 }} className="more-grid">
            {MORE.map((s, i) => (
              <Reveal key={i} delay={i * 40}>
                <Panel hover={!!s[3]} pad={24} onClick={s[3] ? () => onNavigate(s[3]) : undefined} style={{ height: '100%', cursor: s[3] ? 'pointer' : 'default' }}>
                  <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: 16 }}><Icon n={s[0]} s={20} color="#FF5BFF" /></span>
                  <h4 style={{ fontSize: 18, margin: '0 0 8px' }}>{s[1]}</h4>
                  <p style={{ fontSize: 14, color: 'var(--text-secondary)', lineHeight: 1.6, margin: 0 }}>{s[2]}</p>
                </Panel>
              </Reveal>
            ))}
          </div>
        </Section>

        <Section pad={40}>
          <Reveal>
            <div style={{ borderRadius: 22, border: '1px solid rgba(255,255,255,0.1)', background: 'linear-gradient(160deg, rgba(255,255,255,0.03), transparent)', padding: 'clamp(32px,5vw,56px)', display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 24, flexWrap: 'wrap' }}>
              <div>
                <h2 style={{ fontSize: 'clamp(26px,3.4vw,40px)', margin: 0, lineHeight: 1.05 }}>Not sure where to start?</h2>
                <p style={{ fontSize: 17, color: 'var(--text-secondary)', margin: '12px 0 0', maxWidth: 460, lineHeight: 1.6 }}>Book a free call and we'll map the shortest path from where you are to launched.</p>
              </div>
              <CTAButton onClick={() => onNavigate('contact')}>Book a call</CTAButton>
            </div>
          </Reveal>
        </Section>

        <style>{`@media (max-width:900px){.svc-split{grid-template-columns:1fr!important}.svc-split>div:last-child{border-left:none!important;border-top:1px solid rgba(255,255,255,0.07)}.more-grid{grid-template-columns:1fr 1fr!important}}@media(max-width:620px){.more-grid{grid-template-columns:1fr!important}}`}</style>
      </React.Fragment>
    );
  }

  window.ServicesPage = ServicesPage;
})();