// pns-1.jsx — Design Tokens · Shared Components · Nav · Hero · Services
const { useState, useEffect, useRef } = React;
const wpS = window.pnsWP?.settings || {};
const P1_SITE = (window.pnsWP && window.pnsWP.siteUrl) || '';
const CONTACT_URL = P1_SITE ? P1_SITE + 'contact/' : 'Contact.html';
const SERVICES_URL = P1_SITE ? P1_SITE + 'services/' : 'Services.html';

/* ── DESIGN TOKENS ──────────────────────────────────────────────── */
const PNST = {
  n950: '#07090f', n900: '#0c1220', n800: '#0d1829', n700: '#152040',
  n600: '#1e2d52', n500: '#253368', n400: '#2e3d7a',
  coral: '#e8714a', coralL: '#f0896b', coralPale: 'rgba(232,113,74,0.12)',
  teal: '#2bb5a0', tealL: '#35c9b3', tealPale: 'rgba(43,181,160,0.12)',
  blue: '#3b82f6', bluePale: 'rgba(59,130,246,0.12)',
  white: '#ffffff',
  g50: '#f7f9fc', g100: '#edf0f7', g200: '#d8dce8',
  g400: '#8b96aa', g500: '#6b7689', g700: '#3a4455', g900: '#0f1624',
  hd: "'Sora', sans-serif",
  bd: "'DM Sans', sans-serif"
};
window.PNST = PNST;

/* ── SHARED: EyebrowBadge ──────────────────────────────────────── */
function EyebrowBadge({ children, variant = 'ghost' }) {
  const s = {
    ghost: { bg: 'rgba(255,255,255,0.07)', color: PNST.g400, border: '1px solid rgba(255,255,255,0.1)' },
    teal: { bg: PNST.tealPale, color: PNST.teal, border: `1px solid rgba(43,181,160,0.3)` },
    coral: { bg: PNST.coralPale, color: PNST.coral, border: `1px solid rgba(232,113,74,0.3)` },
    dark: { bg: 'rgba(0,0,0,0.06)', color: PNST.g500, border: '1px solid rgba(0,0,0,0.1)' }
  }[variant];
  return (
    <span style={{ display: 'inline-block', padding: '5px 13px', background: s.bg, color: s.color,
      border: s.border, borderRadius: 6, fontSize: 11, fontWeight: 600, letterSpacing: '0.1em',
      textTransform: 'uppercase', fontFamily: PNST.bd, marginBottom: 16 }}>
      {children}
    </span>);

}
window.EyebrowBadge = EyebrowBadge;

/* ── SHARED: SectionTitle ──────────────────────────────────────── */
function SectionTitle({ children, light = false, size = 'lg', style: sx = {} }) {
  const txt = typeof children === 'string' ? children : '';
  const hasDot = txt.endsWith('.');
  const main = hasDot ? txt.slice(0, -1) : txt;
  const fs = size === 'xl' ? 'clamp(44px,5.5vw,80px)' : size === 'lg' ? 'clamp(32px,3.8vw,52px)' : 'clamp(26px,2.8vw,38px)';
  return (
    <h2 style={{ fontFamily: PNST.hd, fontWeight: 800, lineHeight: 1.1, letterSpacing: '-0.03em',
      fontSize: fs, color: light ? PNST.white : PNST.g900, margin: '0 0 20px',
      textWrap: 'balance', ...sx }}>
      {main}{hasDot && <span style={{ color: PNST.coral }}>.</span>}
    </h2>);

}
window.SectionTitle = SectionTitle;

/* ── SHARED: ImgPlaceholder ────────────────────────────────────── */
function ImgPlaceholder({ height = 400, label = '', bg = '#152040', style: sx = {}, br = 20 }) {
  const uid = useRef('p' + Math.random().toString(36).slice(2)).current;
  return (
    <div style={{ width: '100%', height, borderRadius: br, overflow: 'hidden',
      background: `linear-gradient(135deg,${bg} 0%,${PNST.n800} 100%)`,
      position: 'relative', display: 'flex', alignItems: 'center', justifyContent: 'center',
      flexShrink: 0, ...sx }}>
      <svg style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', opacity: 0.055 }} xmlns="http://www.w3.org/2000/svg">
        <defs><pattern id={uid} width="40" height="40" patternUnits="userSpaceOnUse">
          <path d="M 40 0 L 0 0 0 40" fill="none" stroke="white" strokeWidth="0.5" />
        </pattern></defs>
        <rect width="100%" height="100%" fill={`url(#${uid})`} />
      </svg>
      {label && <span style={{ position: 'relative', fontFamily: "'Courier New',monospace",
        fontSize: 11, color: 'rgba(255,255,255,0.18)', letterSpacing: '0.08em', textTransform: 'uppercase' }}>
        ↕ {label}
      </span>}
    </div>);

}
window.ImgPlaceholder = ImgPlaceholder;

/* ── SERVICE ICONS ─────────────────────────────────────────────── */
function ServiceIcon({ type, hov = false }) {
  const c1 = hov ? PNST.coralL : PNST.coral;
  const c2 = hov ? PNST.tealL : PNST.teal;
  const p = { fill: 'none', strokeWidth: '1.5', strokeLinecap: 'round', strokeLinejoin: 'round' };
  const icons = {
    managed: <><rect x="2" y="3" width="20" height="14" rx="2" stroke={c1} {...p} /><path d="M8 21h8M12 17v4" stroke={c2} {...p} /><path d="M7 9h2M7 12h10" stroke={c2} {...p} /></>,
    ai: <><circle cx="12" cy="12" r="3" stroke={c1} {...p} /><path d="M12 2v3M12 19v3M2 12h3M19 12h3" stroke={c2} {...p} /><path d="M5.6 5.6l2.1 2.1M16.3 16.3l2.1 2.1M5.6 18.4l2.1-2.1M16.3 7.7l2.1-2.1" stroke={c2} {...p} /></>,
    cyber: <><path d="M12 2L4 6v6c0 5.5 3.5 10.7 8 12 4.5-1.3 8-6.5 8-12V6z" stroke={c1} {...p} /><path d="M9 12l2 2 4-4" stroke={c2} {...p} /></>,
    m365: <><rect x="3" y="3" width="8" height="8" rx="1" stroke={c1} {...p} /><rect x="13" y="3" width="8" height="8" rx="1" stroke={c1} {...p} /><rect x="3" y="13" width="8" height="8" rx="1" stroke={c2} {...p} /><rect x="13" y="13" width="8" height="8" rx="1" stroke={c2} {...p} /></>,
    network: <><circle cx="12" cy="5" r="2" stroke={c1} {...p} /><circle cx="4.5" cy="18.5" r="2" stroke={c1} {...p} /><circle cx="19.5" cy="18.5" r="2" stroke={c1} {...p} /><path d="M12 7v5M9.8 16.8L12 12M14.2 16.8L12 12" stroke={c2} {...p} /></>,
    webdev: <><polyline points="8 3 2 12 8 21" stroke={c1} {...p} /><polyline points="16 3 22 12 16 21" stroke={c1} {...p} /><line x1="13" y1="6" x2="11" y2="18" stroke={c2} {...p} /></>,
    seo: <><circle cx="11" cy="11" r="8" stroke={c1} {...p} /><path d="M21 21l-4.35-4.35" stroke={c1} {...p} /><polyline points="8 11 11 8 14 11" stroke={c2} {...p} /><line x1="11" y1="8" x2="11" y2="15" stroke={c2} {...p} /></>,
    consulting: <><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" stroke={c1} {...p} /><circle cx="9" cy="7" r="4" stroke={c1} {...p} /><path d="M23 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75" stroke={c2} {...p} /></>,
    backup: <><polyline points="1 4 1 10 7 10" stroke={c1} {...p} /><path d="M3.51 15a9 9 0 1 0 .49-3.51" stroke={c2} {...p} /></>
  };
  return <svg viewBox="0 0 24 24" style={{ width: 32, height: 32, flexShrink: 0 }}>{icons[type]}</svg>;
}

/* ── SERVICES DATA ──────────────────────────────────────────────── */
const SERVICES = [
{ id: 1, icon: 'managed', pageId: 'managed-it', title: 'Managed IT Services', desc: 'Proactive monitoring, maintenance, and 24/7 helpdesk support to keep your business running without interruption.' },
{ id: 2, icon: 'ai', pageId: 'ai-solutions', title: 'AI Solutions', desc: 'Intelligent automation to streamline workflows, reduce manual tasks, and unlock new efficiencies across your organization.' },
{ id: 3, icon: 'cyber', pageId: 'cybersecurity', title: 'Cybersecurity', desc: 'Multi-layered protection with endpoint security, threat detection, compliance management, and rapid incident response.' },
{ id: 4, icon: 'm365', pageId: 'microsoft-365', title: 'Microsoft 365', desc: 'Full deployment and management of Microsoft 365—Teams, SharePoint, Exchange, OneDrive, and Azure Active Directory.' },
{ id: 5, icon: 'network', pageId: 'network-infrastructure', title: 'Network Infrastructure', desc: 'Design, installation, and management of wired/wireless networks, VoIP systems, and unified communications platforms.' },
{ id: 6, icon: 'webdev', pageId: 'web-development', title: 'Website Development', desc: 'Custom websites built for performance, security, and lead generation—engineered to scale with your business goals.' },
{ id: 7, icon: 'seo', pageId: 'seo-services', title: 'SEO Services', desc: 'Data-driven search engine optimization to increase organic visibility, drive qualified traffic, and generate business leads.' },
{ id: 8, icon: 'consulting', pageId: 'it-consulting', title: 'IT Consulting', desc: 'Strategic technology planning, roadmapping, and vCIO services to align your IT investments with your business objectives.' },
{ id: 9, icon: 'backup', pageId: 'backup-monitoring', title: 'Backup & Monitoring', desc: 'Automated cloud backup, disaster recovery planning, and 24/7 infrastructure monitoring to protect your critical data.' }];

window.SERVICES = SERVICES;

/* ── NAV ────────────────────────────────────────────────────────── */
function PNSNav() {
  const [scrolled, setScrolled] = useState(false);
  const [menuOpen, setMenuOpen] = useState(false);
  useEffect(() => {
    const fn = () => setScrolled(window.scrollY > 60);
    window.addEventListener('scroll', fn, { passive: true });
    return () => window.removeEventListener('scroll', fn);
  }, []);
  const _p = window.location.pathname;
  const isService = (_p.includes('service.html') || _p.includes('/service'));
  const isContactPage = /contact/i.test(_p);
  const SITE = window.pnsWP?.siteUrl || '';
  const HOME = (isService || isContactPage) ? (SITE || 'Premier%20Network%20Solutions.html') : '';
  const CONTACT = SITE ? SITE + 'contact/' : 'Contact.html';
  const links = [
  { label: 'Home', href: SITE || 'Premier%20Network%20Solutions.html' },
  { label: 'About', href: SITE ? SITE+'about/' : 'About.html' },
  { label: 'Portfolio', href: SITE ? SITE+'portfolio/' : 'Portfolio.html' },
  { label: 'Services', href: SITE ? SITE+'services/' : 'Services.html' },
  { label: 'Pricing', href: SITE ? SITE+'pricing/' : 'Pricing.html' },
  { label: 'Team', href: SITE ? SITE+'team/' : 'Team.html' },
  { label: 'Why Us', href: SITE ? SITE+'why-us/' : 'Why%20Us.html' },
  { label: 'Contact', href: CONTACT }];

  return (
    <>
      <nav style={{ position: 'fixed', top: 0, left: 0, right: 0, zIndex: 1000,
        background: 'rgba(255,255,255,0.97)',
        backdropFilter: 'blur(24px) saturate(180%)',
        borderBottom: '1px solid rgba(12,30,50,0.07)',
        boxShadow: scrolled ? '0 2px 28px rgba(12,30,50,0.1)' : 'none',
        transition: 'all 0.35s ease', padding: '0 48px' }}>
        <div style={{ maxWidth: 1280, margin: '0 auto', display: 'flex', alignItems: 'center', height: 76, gap: 24 }}>
          <a href={HOME || (window.pnsWP?.siteUrl || '/')} style={{ textDecoration: 'none', flexShrink: 0 }}>
            <img
              src={window.pnsWP?.logoUrl || "uploads/logo-1781485796573.png"}
              alt="Premier Network Solutions"
              style={{ height: 40, width: 'auto', display: 'block',
                transition: 'opacity 0.3s ease' }} />
          </a>
          <div className="pns-nav-links" style={{ display: 'flex', alignItems: 'center', gap: 22, flex: 1, justifyContent: 'center' }}>
            {links.map((l) =>
            <a key={l.label} href={l.href} style={{ color: PNST.n600, textDecoration: 'none',
              fontSize: 14, fontWeight: 500, fontFamily: PNST.bd, letterSpacing: '0.01em',
              transition: 'color 0.2s ease', whiteSpace: 'nowrap' }}
            onMouseEnter={(e) => e.currentTarget.style.color = PNST.coral}
            onMouseLeave={(e) => e.currentTarget.style.color = PNST.n600}>
                {l.label}
              </a>
            )}
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12, flexShrink: 0 }}>
            <a href={'tel:'+(wpS.phone||'+1(747) 335-2335').replace(/\D/g,'')} className="pns-hide-md" style={{ color: PNST.g500,
              textDecoration: 'none', fontSize: 13, fontFamily: PNST.bd, display: 'flex', alignItems: 'center', gap: 6 }}>
              {wpS.phone||'+1(747) 335-2335'}
            </a>
            <a href={CONTACT} style={{ background: PNST.coral, color: '#fff', padding: '11px 20px',
              borderRadius: 8, fontSize: 13, fontWeight: 600, textDecoration: 'none', fontFamily: PNST.bd,
              transition: 'all 0.2s ease', whiteSpace: 'nowrap',
              minHeight: 40, display: 'inline-flex', alignItems: 'center' }}
            onMouseEnter={(e) => {e.currentTarget.style.background = PNST.coralL;e.currentTarget.style.transform = 'translateY(-1px)';}}
            onMouseLeave={(e) => {e.currentTarget.style.background = PNST.coral;e.currentTarget.style.transform = 'translateY(0)';}}>
              {wpS.navCTA||'Get Support'}
            </a>
            <button onClick={() => setMenuOpen(!menuOpen)} className="pns-ham-btn pns-tap"
            style={{ background: 'none', border: 'none', cursor: 'pointer', display: 'flex',
              flexDirection: 'column', gap: 5, padding: 4 }}>
              {[0, 1, 2].map((i) =>
              <span key={i} style={{ display: 'block', width: 22, height: 2, background: PNST.n700, borderRadius: 2,
                transition: 'all 0.3s ease',
                ...(menuOpen && i === 0 ? { transform: 'rotate(45deg) translate(5px,5px)' } : {}),
                ...(menuOpen && i === 1 ? { opacity: 0, transform: 'scaleX(0)' } : {}),
                ...(menuOpen && i === 2 ? { transform: 'rotate(-45deg) translate(5px,-5px)' } : {}) }} />
              )}
            </button>
          </div>
        </div>
      </nav>
      {menuOpen &&
      <div className="pns-mobile-menu" style={{ position: 'fixed', inset: 0, zIndex: 999, background: 'rgba(7,9,15,0.97)',
        backdropFilter: 'blur(20px)', display: 'flex', flexDirection: 'column',
        alignItems: 'center', justifyContent: 'center', gap: 24,
        paddingTop: 76, overflowY: 'auto' }}>
          {links.map((l, i) =>
        <a key={l.label} href={l.href} onClick={() => setMenuOpen(false)}
        style={{ color: '#fff', textDecoration: 'none', fontSize: 30, fontWeight: 800,
          fontFamily: PNST.hd, letterSpacing: '-0.03em',
          animation: `pnsFadeUp 0.4s ease ${i * 0.06}s both` }}>
              {l.label}
            </a>
        )}
          <div style={{ marginTop: 16, display: 'flex', gap: 20 }}>
            <a href={'tel:'+(wpS.phone||'+1(747) 335-2335').replace(/\D/g,'')} style={{ color: PNST.teal, textDecoration: 'none', fontSize: 15, fontFamily: PNST.bd }}>
              {wpS.phone||'+1(747) 335-2335'}
            </a>
            <span style={{ color: 'rgba(255,255,255,0.2)' }}>|</span>
            <a href={'mailto:'+(wpS.email||'info@premiernetworksolutions.com')} style={{ color: PNST.coral, textDecoration: 'none', fontSize: 15, fontFamily: PNST.bd }}>
              {wpS.email||'info@premiernetworksolutions.com'}
            </a>
          </div>
        </div>
      }
    </>);

}
window.PNSNav = PNSNav;

/* ── NOC DASHBOARD (Hero Visual) ───────────────────────────────── */
function NOCDashboard() {
  const [tick, setTick] = useState(0);
  useEffect(() => {
    const t = setInterval(() => setTick((n) => n + 1), 1000);
    return () => clearInterval(t);
  }, []);
  const now = new Date().toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit', second: '2-digit' });
  const bars = [
  { label: 'Security Score', val: 94, color: PNST.teal },
  { label: 'Network Health', val: 78, color: PNST.coral },
  { label: 'Backup Status', val: 100, color: PNST.blue }];

  const activity = [
  { dot: PNST.teal, text: 'Patch applied — 15 devices', ago: '2m ago' },
  { dot: PNST.teal, text: 'Backup completed successfully', ago: '14m ago' },
  { dot: PNST.coral, text: 'Phishing attempt blocked', ago: '1h ago' }];

  return (
    <div style={{ background: 'rgba(21,32,64,0.9)', backdropFilter: 'blur(24px)',
      border: '1px solid rgba(255,255,255,0.1)', borderRadius: 20, padding: '24px 24px 20px',
      position: 'relative', overflow: 'hidden' }}>
      <div style={{ position: 'absolute', top: -60, right: -40, width: 200, height: 200,
        background: `radial-gradient(circle, ${PNST.tealPale} 0%, transparent 70%)`, pointerEvents: 'none' }} />
      {/* Header */}
      <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', marginBottom: 20 }}>
        <div>
          <div style={{ fontSize: 10, color: PNST.g400, fontFamily: PNST.bd, letterSpacing: '0.08em', textTransform: 'uppercase', marginBottom: 4 }}>
            Network Operations
          </div>
          <div style={{ fontSize: 17, fontWeight: 700, color: PNST.white, fontFamily: PNST.hd }}>
            System Dashboard
          </div>
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 6, background: 'rgba(43,181,160,0.1)',
          border: '1px solid rgba(43,181,160,0.2)', borderRadius: 20, padding: '4px 10px' }}>
          <div style={{ width: 7, height: 7, borderRadius: '50%', background: PNST.teal,
            boxShadow: `0 0 8px ${PNST.teal}`, animation: 'pnsLivePulse 2s ease infinite' }} />
          <span style={{ fontSize: 10, color: PNST.teal, fontFamily: PNST.bd, fontWeight: 600, letterSpacing: '0.06em' }}>LIVE</span>
          <span style={{ fontSize: 10, color: PNST.g500, fontFamily: PNST.bd }}>{now}</span>
        </div>
      </div>
      {/* Stats */}
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 10, marginBottom: 18 }}>
        {[{ l: 'Uptime', v: '99.9%', c: PNST.teal }, { l: 'Devices', v: '47', c: PNST.coral }, { l: 'Blocked', v: '12', c: PNST.blue }].map((s) =>
        <div key={s.l} style={{ background: 'rgba(5,8,20,0.6)', borderRadius: 10, padding: '12px 10px',
          border: '1px solid rgba(255,255,255,0.05)' }}>
            <div style={{ fontSize: 22, fontWeight: 800, color: s.c, fontFamily: PNST.hd, lineHeight: 1 }}>{s.v}</div>
            <div style={{ fontSize: 10, color: PNST.g400, fontFamily: PNST.bd, marginTop: 4 }}>{s.l}</div>
          </div>
        )}
      </div>
      {/* Bars */}
      <div style={{ display: 'flex', flexDirection: 'column', gap: 9, marginBottom: 16 }}>
        {bars.map((b) =>
        <div key={b.label}>
            <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 5 }}>
              <span style={{ fontSize: 11, color: PNST.g400, fontFamily: PNST.bd }}>{b.label}</span>
              <span style={{ fontSize: 11, color: b.color, fontFamily: PNST.bd, fontWeight: 600 }}>{b.val}%</span>
            </div>
            <div style={{ background: 'rgba(255,255,255,0.06)', borderRadius: 3, height: 4 }}>
              <div style={{ width: `${b.val}%`, height: '100%', background: b.color, borderRadius: 3 }} />
            </div>
          </div>
        )}
      </div>
      {/* Activity */}
      <div style={{ borderTop: '1px solid rgba(255,255,255,0.06)', paddingTop: 12 }}>
        <div style={{ fontSize: 9, color: PNST.g500, fontFamily: PNST.bd, letterSpacing: '0.08em',
          textTransform: 'uppercase', marginBottom: 9 }}>Recent Activity</div>
        {activity.map((a, i) =>
        <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 7 }}>
            <div style={{ width: 5, height: 5, borderRadius: '50%', background: a.dot, flexShrink: 0 }} />
            <span style={{ fontSize: 11.5, color: PNST.g400, fontFamily: PNST.bd, flex: 1 }}>{a.text}</span>
            <span style={{ fontSize: 10, color: PNST.g500, fontFamily: PNST.bd, flexShrink: 0 }}>{a.ago}</span>
          </div>
        )}
      </div>
    </div>);

}

/* ── HERO BACKGROUND SLIDER ────────────────────────────────────── */
const HERO_BG_IMGS = [
  '1558494949-ef010cbdcc31',
  '1639066648921-82d4500abf1a',
  '1702478475268-aa8ef54c084e',
  '1584169417032-d34e8d805e8b',
];
function HeroBgSlider() {
  const [cur, setCur] = useState(0);
  useEffect(() => {
    const t = setInterval(() => setCur(c => (c + 1) % HERO_BG_IMGS.length), 6000);
    return () => clearInterval(t);
  }, []);
  return (
    <div style={{ position: 'absolute', inset: 0, zIndex: 0, overflow: 'hidden' }}>
      {HERO_BG_IMGS.map((id, i) => (
        <div key={id} style={{
          position: 'absolute', inset: 0,
          backgroundImage:`url(${window.pnsWP?.images?.[id]||('https://images.unsplash.com/photo-'+id+'?w=1920&auto=format&fit=crop&q=50')})`,
          backgroundSize: 'cover', backgroundPosition: 'center',
          opacity: i === cur ? 0.12 : 0,
          transition: 'opacity 2s ease',
          pointerEvents: 'none',
        }} />
      ))}
    </div>
  );
}

/* ── HERO ────────────────────────────────────────────────────────── */
function PNSHero() {
  return (
    <section data-screen-label="Hero" style={{ position: 'relative', minHeight: '100vh', background: PNST.n900,
      display: 'flex', flexDirection: 'column', justifyContent: 'center', overflow: 'hidden' }}>
      <HeroBgSlider />
      {/* BG blobs */}
      <div style={{ position: 'absolute', top: '-15%', right: '-8%', width: 700, height: 700,
        background: `radial-gradient(circle, rgba(232,113,74,0.12) 0%, transparent 65%)`, pointerEvents: 'none' }} />
      <div style={{ position: 'absolute', bottom: '-10%', left: '-5%', width: 500, height: 500,
        background: `radial-gradient(circle, rgba(43,181,160,0.09) 0%, transparent 65%)`, pointerEvents: 'none' }} />
      <div style={{ position: 'absolute', top: '20%', right: '28%', width: 340, height: 340,
        background: PNST.n800, borderRadius: '60% 40% 70% 30% / 50% 60% 40% 50%',
        opacity: 0.5, pointerEvents: 'none' }} />

      <div style={{ maxWidth: 1280, margin: '0 auto', width: '100%', padding: '120px 48px 80px',
        display: 'grid', gridTemplateColumns: '55% 45%', gap: 60, alignItems: 'center' }}
      className="pns-hero-grid">
        {/* TEXT COLUMN */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 0,
          animation: 'pnsHeroLeft 1.25s cubic-bezier(0.25,0.46,0.45,0.94) both' }}>
          <div>
            <EyebrowBadge variant="teal">{wpS.heroEyebrow||'Your Trusted Technology Partner'}</EyebrowBadge>
          </div>
          <h1 style={{ fontFamily: PNST.hd, fontWeight: 800, lineHeight: 1.08,
            letterSpacing: '-0.04em', fontSize: 'clamp(44px,5.5vw,78px)', color: PNST.white,
            margin: '0 0 24px', textWrap: 'balance' }}>
            {wpS.heroHeadline
              ?<>{wpS.heroHeadline.replace(/\.+$/,'')}<span style={{color:PNST.coral}}>.</span></>
              :<>Technology That Works<span style={{color:PNST.coral}}>.</span>{' '}Support That Never Sleeps<span style={{color:PNST.coral}}>.</span></>}
          </h1>
          <p style={{ fontFamily: PNST.bd, fontSize: 16, color: 'rgba(255,255,255,0.58)',
            lineHeight: 1.75, margin: '0 0 28px', maxWidth: 520, textWrap: 'pretty' }}>
            {wpS.heroSub||'Empowering Southern California businesses with Managed IT, Cybersecurity, Cloud Solutions, Microsoft 365, AI Automation, Network Infrastructure, Web Development, and SEO—delivered by experts who keep your business secure, connected, and productive 24/7.'}
          </p>
          <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8,
            background: 'rgba(255,255,255,0.04)', border: '1px solid rgba(255,255,255,0.08)',
            borderRadius: 8, padding: '8px 14px', marginBottom: 32, width: 'fit-content' }}>
            <span style={{ fontSize: 16 }}>🔒</span>
            <span style={{ fontFamily: PNST.bd, fontSize: 12.5, color: 'rgba(255,255,255,0.5)', letterSpacing: '0.02em' }}>
              {wpS.heroBadge||'Trusted Technology Partner for SMBs Across Southern California'}
            </span>
          </div>
          <div style={{ display: 'flex', gap: 14, flexWrap: 'wrap', marginBottom: 36 }}>
            <a href={CONTACT_URL} style={{ background: PNST.coral, color: '#fff', padding: '14px 28px',
              borderRadius: 10, fontSize: 14, fontWeight: 700, textDecoration: 'none', fontFamily: PNST.bd,
              transition: 'all 0.25s ease', letterSpacing: '0.01em', whiteSpace: 'nowrap' }}
            onMouseEnter={(e) => {e.currentTarget.style.background = PNST.coralL;e.currentTarget.style.transform = 'translateY(-2px)';e.currentTarget.style.boxShadow = `0 8px 30px rgba(232,113,74,0.4)`;}}
            onMouseLeave={(e) => {e.currentTarget.style.background = PNST.coral;e.currentTarget.style.transform = 'translateY(0)';e.currentTarget.style.boxShadow = 'none';}}>
              {wpS.heroCTA1||'Schedule a Consultation'}
            </a>
            <a href={SERVICES_URL} style={{ background: 'transparent', color: '#fff', padding: '13px 26px',
              borderRadius: 10, fontSize: 14, fontWeight: 600, textDecoration: 'none', fontFamily: PNST.bd,
              border: '1.5px solid rgba(255,255,255,0.2)', transition: 'all 0.25s ease', whiteSpace: 'nowrap' }}
            onMouseEnter={(e) => {e.currentTarget.style.borderColor = 'rgba(255,255,255,0.5)';e.currentTarget.style.background = 'rgba(255,255,255,0.05)';}}
            onMouseLeave={(e) => {e.currentTarget.style.borderColor = 'rgba(255,255,255,0.2)';e.currentTarget.style.background = 'transparent';}}>
              {wpS.heroCTA2||'Get a Free IT Audit →'}
            </a>
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
            <span style={{ fontSize: 12, color: 'rgba(255,255,255,0.35)', fontFamily: PNST.bd, letterSpacing: '0.06em', textTransform: 'uppercase' }}>
              Follow Us
            </span>
            {[
            { label: 'LI', url: wpS.socialLI||'#' },
            { label: 'TW', url: wpS.socialTW||'#' },
            { label: 'FB', url: wpS.socialFB||'#' }].
            map((s) =>
            <a key={s.label} href={s.url} style={{ color: 'rgba(255,255,255,0.35)', textDecoration: 'none',
              fontSize: 12, fontFamily: PNST.bd, fontWeight: 600, letterSpacing: '0.04em', transition: 'color 0.2s' }}
            onMouseEnter={(e) => e.currentTarget.style.color = PNST.teal}
            onMouseLeave={(e) => e.currentTarget.style.color = 'rgba(255,255,255,0.35)'}>
                {s.label}
              </a>
            )}
          </div>
        </div>

        {/* VISUAL COLUMN */}
        <div style={{ position: 'relative', animation: 'pnsHeroRight 1.25s cubic-bezier(0.25,0.46,0.45,0.94) both' }}>
          <div style={{ position: 'absolute', top: -20, left: -24, zIndex: 10,
            background: PNST.n700, border: `1px solid rgba(43,181,160,0.25)`,
            borderRadius: 12, padding: '10px 14px', display: 'flex', alignItems: 'center', gap: 8,
            boxShadow: '0 8px 30px rgba(0,0,0,0.4)', animation: 'pnsFloat 3.5s ease-in-out infinite' }}>
            <div style={{ width: 8, height: 8, borderRadius: '50%', background: PNST.teal, boxShadow: `0 0 8px ${PNST.teal}` }} />
            <span style={{ fontSize: 12, fontFamily: PNST.bd, color: '#fff', fontWeight: 600 }}>24/7 Monitoring Active</span>
          </div>
          <div style={{ position: 'absolute', bottom: -16, right: -20, zIndex: 10,
            background: `linear-gradient(135deg, ${PNST.coral} 0%, ${PNST.coralL} 100%)`,
            borderRadius: 12, padding: '12px 16px',
            boxShadow: '0 8px 30px rgba(232,113,74,0.4)', animation: 'pnsFloat 4s ease-in-out 0.8s infinite' }}>
            <div style={{ fontSize: 24, fontWeight: 800, color: '#fff', fontFamily: PNST.hd, lineHeight: 1 }}>99.9%</div>
            <div style={{ fontSize: 11, color: 'rgba(255,255,255,0.8)', fontFamily: PNST.bd, marginTop: 2 }}>Uptime Guarantee</div>
          </div>
          <div style={{ animation: 'pnsFloat 6s ease-in-out 1.5s infinite' }}>
            <NOCDashboard />
          </div>
        </div>
      </div>

      {/* Wave divider */}
      <div style={{ position: 'absolute', bottom: 0, left: 0, right: 0, lineHeight: 0 }}>
        <svg viewBox="0 0 1440 90" preserveAspectRatio="none" style={{ display: 'block', width: '100%', height: 90 }}>
          <path d="M0,45 C360,90 720,0 1080,45 C1260,67 1380,22 1440,45 L1440,90 L0,90 Z" fill="#f7f9fc" />
        </svg>
      </div>
    </section>);

}
window.PNSHero = PNSHero;

/* ── SERVICE CARD PHOTOS ────────────────────────────────────────── */
const SVC_CARD_PHOTOS = {
  'managed-it':             '1558494949-ef010cbdcc31',    // server rack / cable network
  'ai-solutions':           '1680992046615-065f58bcb4d8', // computer rack close-up
  'cybersecurity':          '1680992046626-418f7e910589', // equipment rack in dark room
  'microsoft-365':          '1460925895917-afdab827c52f', // analytics screen
  'network-infrastructure': '1558618666-fcd25c85cd64',    // fiber / ethernet cables
  'web-development':        '1695668548342-c0c1ad479aee', // server rack in server room
  'seo-services':           '1506399558188-acca6f8cbf41', // server / rig room
  'it-consulting':          '1663596990274-3fc2f5a4ce27', // datacenter hallway glass
  'backup-monitoring':      '1580368393720-393aeacbc2a4', // white USB / connectivity
};

/* ── SERVICE CARD ───────────────────────────────────────────────── */
function ServiceCard({ svc }) {
  const [hov, setHov] = useState(false);
  return (
    <div onMouseEnter={() => setHov(true)} onMouseLeave={() => setHov(false)}
    onClick={() => {if (svc.pageId) window.location.href = (window.pnsWP?.serviceUrls?.[svc.pageId]) || ((window.pnsWP?.serviceUrl||'service.html')+'?id='+svc.pageId);}}
    style={{ position: 'relative', padding: '16px 12px 10px', cursor: 'pointer' }}>
      {/* Teal layer */}
      <div style={{ position: 'absolute', top: 16, left: 12, right: 12, bottom: 10,
        background: PNST.teal, borderRadius: 18,
        transform: hov ? 'rotate(5deg)' : 'rotate(0)',
        opacity: hov ? 1 : 0,
        transition: 'transform 0.4s cubic-bezier(0.34,1.56,0.64,1), opacity 0.3s ease',
        zIndex: 1 }} />
      {/* Blue layer */}
      <div style={{ position: 'absolute', top: 16, left: 12, right: 12, bottom: 10,
        background: PNST.blue, borderRadius: 18,
        transform: hov ? 'rotate(-4deg)' : 'rotate(0)',
        opacity: hov ? 0.65 : 0,
        transition: 'transform 0.4s cubic-bezier(0.34,1.56,0.64,1) 0.04s, opacity 0.3s ease',
        zIndex: 0 }} />
      {/* Card */}
      <div style={{ position: 'relative', zIndex: 2,
        background: hov ? PNST.n700 : PNST.white,
        borderRadius: 18, overflow: 'hidden',
        transition: 'all 0.35s ease',
        transform: hov ? 'translateY(-6px)' : 'translateY(0)',
        boxShadow: hov ? '0 20px 60px rgba(0,0,0,0.4)' : '0 2px 20px rgba(0,0,0,0.055)' }}>
        {/* Photo strip */}
        <div style={{ height: 150, position: 'relative', overflow: 'hidden' }}>
          <img
            src={window.pnsWP?.images?.[SVC_CARD_PHOTOS[svc.pageId]]||`https://images.unsplash.com/photo-${SVC_CARD_PHOTOS[svc.pageId]}?w=600&auto=format&fit=crop&q=80`}
            alt={`${svc.title} — Premier Network Solutions`}
            loading="lazy"
            style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block',
              transition: 'transform 0.6s ease',
              transform: hov ? 'scale(1.08)' : 'scale(1)' }}/>
          <div style={{ position: 'absolute', inset: 0,
            background: 'linear-gradient(to bottom, rgba(7,9,15,0.08) 0%, rgba(7,9,15,0.68) 100%)' }}/>
          <div style={{ position: 'absolute', bottom: 12, left: 16, width: 40, height: 40, borderRadius: 10,
            background: 'rgba(12,18,40,0.85)', backdropFilter: 'blur(8px)',
            display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <ServiceIcon type={svc.icon} hov={true} />
          </div>
        </div>
        {/* Text area */}
        <div style={{ padding: '22px 26px 28px' }}>
          <h3 style={{ fontFamily: PNST.hd, fontSize: 17, fontWeight: 700, margin: '0 0 10px',
            color: hov ? PNST.white : PNST.g900, transition: 'color 0.35s ease', lineHeight: 1.3 }}>
            {svc.title}
          </h3>
          <p style={{ fontFamily: PNST.bd, fontSize: 13.5, margin: 0, lineHeight: 1.65, textWrap: 'pretty',
            color: hov ? 'rgba(255,255,255,0.58)' : PNST.g500, transition: 'color 0.35s ease' }}>
            {svc.desc}
          </p>
        </div>
      </div>
    </div>);

}

/* ── SERVICES SECTION ───────────────────────────────────────────── */
function PNSServices() {
  const _wpSvc = window.pnsWP?.services;
  const EFF_SERVICES = (Array.isArray(_wpSvc) && _wpSvc.length > 0) ? _wpSvc : SERVICES;
  const [rawPage, setPage] = useState(0);
  const timerRef = useRef(null);
  const perPage = 3;
  const total = Math.max(1, Math.ceil(EFF_SERVICES.length / perPage));
  const page = Math.min(Math.max(0, rawPage), total - 1);
  const visible = EFF_SERVICES.slice(page * perPage, (page + 1) * perPage);
  const goPage = (p) => {
    setPage(p);
    clearInterval(timerRef.current);
    timerRef.current = setInterval(() => setPage(n => (n + 1) % total), 5500);
  };
  useEffect(() => {
    timerRef.current = setInterval(() => setPage(p => (p + 1) % total), 5500);
    return () => clearInterval(timerRef.current);
  }, [total]);
  return (
    <section id="services" data-screen-label="Services" style={{ background: PNST.g50, padding: '100px 48px' }}>
      <div style={{ maxWidth: 1240, margin: '0 auto' }}>
        {/* Header */}
        <div style={{ textAlign: 'center', marginBottom: 60 }} className="pns-fade-up">
          <EyebrowBadge variant="dark">Our Services</EyebrowBadge>
          <SectionTitle style={{ fontSize: 'clamp(32px,3.8vw,52px)' }}>Complete Technology Solutions.</SectionTitle>
          <p style={{ fontFamily: PNST.bd, fontSize: 16, color: PNST.g500, maxWidth: 560, margin: '0 auto', lineHeight: 1.7, textWrap: 'pretty' }}>
            From daily IT management to strategic technology consulting—everything your business needs under one roof.
          </p>
        </div>
        {/* Slider */}
        <div style={{ position: 'relative' }}>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 8 }} className="pns-grid-resp">
            {visible.map((s, i) => <ServiceCard key={s.id ?? s.pageId ?? i} svc={s} />)}
          </div>
          {/* Nav */}
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 16, marginTop: 40 }}>
            <button onClick={() => goPage(Math.max(0, page - 1))} disabled={page === 0}
            style={{ width: 44, height: 44, borderRadius: '50%', border: `1.5px solid ${page === 0 ? PNST.g200 : PNST.n700}`,
              background: 'transparent', cursor: page === 0 ? 'default' : 'pointer', color: page === 0 ? PNST.g400 : PNST.g700,
              fontSize: 18, display: 'flex', alignItems: 'center', justifyContent: 'center',
              transition: 'all 0.2s ease' }}
            onMouseEnter={(e) => {if (page > 0) {e.currentTarget.style.background = PNST.n700;e.currentTarget.style.color = '#fff';}}}
            onMouseLeave={(e) => {e.currentTarget.style.background = 'transparent';e.currentTarget.style.color = page === 0 ? PNST.g400 : PNST.g700;}}>
              ←
            </button>
            <div style={{ display: 'flex', gap: 8 }}>
              {Array.from({ length: total }).map((_, i) =>
              <button key={i} onClick={() => goPage(i)}
              style={{ width: i === page ? 24 : 8, height: 8, borderRadius: 4, border: 'none', cursor: 'pointer',
                background: i === page ? PNST.coral : PNST.g200, transition: 'all 0.3s ease', padding: 0 }} />
              )}
            </div>
            <button onClick={() => goPage(Math.min(total - 1, page + 1))} disabled={page === total - 1}
            style={{ width: 44, height: 44, borderRadius: '50%', border: `1.5px solid ${page === total - 1 ? PNST.g200 : PNST.n700}`,
              background: 'transparent', cursor: page === total - 1 ? 'default' : 'pointer',
              color: page === total - 1 ? PNST.g400 : PNST.g700, fontSize: 18,
              display: 'flex', alignItems: 'center', justifyContent: 'center', transition: 'all 0.2s ease' }}
            onMouseEnter={(e) => {if (page < total - 1) {e.currentTarget.style.background = PNST.n700;e.currentTarget.style.color = '#fff';}}}
            onMouseLeave={(e) => {e.currentTarget.style.background = 'transparent';e.currentTarget.style.color = page === total - 1 ? PNST.g400 : PNST.g700;}}>
              →
            </button>
          </div>
        </div>
      </div>
    </section>);

}
window.PNSServices = PNSServices;