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

  const IND_COLORS = ['#2DE3EA', '#F23BFE', '#79BAFF'];
  const INDUSTRIES = [
    ['ShoppingBag', 'E-commerce & retail', 'Storefronts that load fast, convert and stay easy to run.', 'niche-ecommerce'],
    ['Wrench', 'Home & local services', 'Trades, contractors and clinics, sites that book jobs and answer calls.', 'niche-home-services'],
    ['Scale', 'Professional services', 'Legal, accounting and finance teams that need to look sharp and move fast.', 'niche-professional-services'],
    ['Rocket', 'Startups & SaaS', 'From landing page to product UI to the systems that scale behind it.', 'niche-startups'],
    ['User', 'Personal & creator brands', 'Founders and creators who need a brand that carries their name.', 'niche-personal-brands'],
    ['HeartPulse', 'Health & wellness', 'Practices and wellness brands that need trust built into every pixel.', 'niche-health-wellness'],
    ['Building2', 'Real estate & property', 'Listings, agents and developments presented like the asset they are.', 'niche-real-estate'],
    ['UtensilsCrossed', 'Hospitality & food', 'Restaurants and venues with sites that fill tables and rooms.', 'niche-restaurants'],
    ['Plus', 'And more', "Nonprofits, education, manufacturing, entertainment. If you run a business, we've likely built for one like it, or we'll be the first.", null],
  ];

  const WHY = [
    ['Layers', 'One team, whole stack', 'Design, code and AI under one roof, nothing lost in a handoff.'],
    ['Gauge', 'Built to ship', 'We measure success by what goes live, not what gets presented.'],
    ['Lock', 'You own it', 'Your site, your data, your CRM, plain-English docs, no lock-in.'],
    ['Users', 'Senior, always', 'The people you meet are the people who build it.'],
  ];

  function IndustriesPage({ onNavigate }) {
    return (
      <React.Fragment>
        <Section pad={90} style={{ paddingBottom: 30 }}>
          <div style={{ maxWidth: 780 }}>
            <Reveal><Eyebrow>Who we serve</Eyebrow></Reveal>
            <Reveal delay={60}><h1 style={{ fontSize: 'clamp(38px,5.5vw,68px)', lineHeight: 1.0, letterSpacing: '-0.04em', margin: '20px 0 0' }}>Any business. <Grad>Any ambition.</Grad></h1></Reveal>
            <Reveal delay={130}><p style={{ fontSize: 19, color: 'var(--text-secondary)', lineHeight: 1.6, margin: '22px 0 0', maxWidth: 580 }}>We're not locked to one niche. If you sell something, serve someone or want to grow, we've built for a business like yours.</p></Reveal>
          </div>
        </Section>

        <Section pad={30}>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 16 }} className="ind-grid">
            {INDUSTRIES.map((s, i) => {
              const c = IND_COLORS[i % IND_COLORS.length];
              const last = i === INDUSTRIES.length - 1;
              return (
                <Reveal key={i} delay={i * 40}>
                  <Panel hover={!!s[3]} pad={26} onClick={s[3] ? () => onNavigate(s[3]) : undefined} style={{ height: '100%', cursor: s[3] ? 'pointer' : 'default', ...(last ? { borderStyle: 'dashed', background: 'transparent' } : {}) }}>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: 14 }}>
                      <span style={{ width: 46, height: 46, borderRadius: 12, background: `${c}1F`, border: `1px solid ${c}3D`, display: 'grid', placeItems: 'center' }}><Icon n={s[0]} s={22} color={c} /></span>
                      <h3 style={{ fontSize: 20, margin: 0 }}>{s[1]}</h3>
                    </div>
                    <p style={{ fontSize: 14.5, color: 'var(--text-secondary)', lineHeight: 1.6, margin: 0 }}>{s[2]}</p>
                    {s[3] && <span style={{ display: 'inline-flex', alignItems: 'center', gap: 5, marginTop: 14, fontSize: 13, fontWeight: 600, color: c }}>Learn more <Icon n="ArrowUpRight" s={13} color={c} /></span>}
                  </Panel>
                </Reveal>
              );
            })}
          </div>
        </Section>

        <Section pad={40}>
          <SectionHead eyebrow="Why Winkz" title={<>The same reasons, <Grad>whatever you do.</Grad></>} center max={620} />
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 16 }} className="why-grid">
            {WHY.map((w, i) => (
              <Reveal key={i} delay={i * 50}>
                <div style={{ padding: '26px 22px', borderRadius: 16, border: '1px solid rgba(255,255,255,0.08)', background: 'rgba(255,255,255,0.02)', 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: 16 }}><Icon n={w[0]} s={20} color="#FF5BFF" /></span>
                  <h4 style={{ fontSize: 17, margin: '0 0 8px' }}>{w[1]}</h4>
                  <p style={{ fontSize: 13.5, color: 'var(--text-secondary)', lineHeight: 1.55, margin: 0 }}>{w[2]}</p>
                </div>
              </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 }}>Don't see your industry?</h2>
                <p style={{ fontSize: 17, color: 'var(--text-secondary)', margin: '12px 0 0', maxWidth: 460, lineHeight: 1.6 }}>Good, that means room to stand out. Let's talk about what you're building.</p>
              </div>
              <button onClick={() => onNavigate('contact')} className="wk-cta">Book a call <Icon n="ArrowUpRight" s={16} color="#08080A" /></button>
            </div>
          </Reveal>
        </Section>

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

  window.IndustriesPage = IndustriesPage;
})();