// pns-3.jsx — Portfolio · Team · Testimonials
const { useState, useEffect, useRef } = React;
const wpS = window.pnsWP?.settings || {};
const T = window.PNST;
const { EyebrowBadge, SectionTitle, ImgPlaceholder } = window;

/* ── PORTFOLIO / CASE STUDIES ───────────────────────────────────── */
const CASES_DEFAULT = [
{ id: 1, cat: 'Cybersecurity', catColor: T.coral, photo: '1695668548342-c0c1ad479aee', title: 'Healthcare Network Security Overhaul', desc: 'HIPAA-compliant security infrastructure for a 4-location medical group.' },
{ id: 2, cat: 'Cloud Services', catColor: T.teal, photo: '1506399558188-acca6f8cbf41', title: 'Multi-Location Cloud Migration', desc: 'Seamless Azure migration for a 50-user professional services firm.' },
{ id: 3, cat: 'Microsoft 365', catColor: T.blue, photo: '1663596990274-3fc2f5a4ce27', title: 'Complete M365 Business Deployment', desc: 'Full M365 rollout including Teams, SharePoint, and Azure AD SSO.' },
{ id: 4, cat: 'Network', catColor: T.coral, photo: '1558618666-fcd25c85cd64', title: 'Enterprise Network Infrastructure', desc: 'Structured cabling, Wi-Fi 6, and SD-WAN for a 3-floor office complex.' },
{ id: 5, cat: 'AI Solutions', catColor: T.teal, photo: '1682562031269-58a59c81432c', title: 'AI-Powered Workflow Automation', desc: 'Custom AI automations reducing manual data-entry hours by 70%.' }];
const P3_SITE = (window.pnsWP && window.pnsWP.siteUrl) || '';
const p3Url = (slug, file) => P3_SITE ? P3_SITE + slug + '/' : file;
// Case study detail pages, in the same order as CASES_DEFAULT.
const CASE_SLUGS = window.PNS_CASE_ORDER || [
  'hipaa-network-security-medical-group','azure-cloud-migration-professional-services',
  'microsoft-365-deployment-teams-sharepoint','enterprise-network-infrastructure-wifi6-sdwan',
  'ai-workflow-automation-data-entry'];
const caseHref = (slug) => slug ? (P3_SITE ? P3_SITE+'case-studies/'+slug+'/' : 'case-study.html?id='+slug) : null;
const _rawCases = (window.pnsWP?.cases?.length>0)
  ? window.pnsWP.cases.map((c,i)=>({...c,catColor:c.catColor||[T.coral,T.teal,T.blue][i%3]}))
  : CASES_DEFAULT;
const CASES = _rawCases.map((c,i) => ({ ...c, slug: c.slug || CASE_SLUGS[i] || null }));


function CaseCard({ cs, i }) {
  const [hov, setHov] = useState(false);
  const href = caseHref(cs.slug);
  return (
    <a href={href || undefined} onMouseEnter={() => setHov(true)} onMouseLeave={() => setHov(false)}
    aria-label={`Read the case study: ${cs.title}`}
    style={{ display: 'block', textDecoration: 'none', minWidth: 300, maxWidth: 340, borderRadius: 18, overflow: 'hidden', cursor: href ? 'pointer' : 'default', flexShrink: 0,
      background: T.n700, transition: 'all 0.35s ease',
      transform: hov ? 'translateY(-8px)' : 'translateY(0)',
      boxShadow: hov ? '0 24px 60px rgba(0,0,0,0.45)' : '0 4px 24px rgba(0,0,0,0.15)' }}>
      {/* Image area */}
      <div style={{ height: 220, position: 'relative', overflow: 'hidden' }}>
        <img
          src={window.pnsWP?.images?.[cs.photo]||`https://images.unsplash.com/photo-${cs.photo}?w=600&auto=format&fit=crop&q=80`}
          alt={cs.title}
          style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
        {/* Overlay on hover */}
        <div style={{ position: 'absolute', inset: 0, background: `linear-gradient(to top, ${T.n800} 0%, transparent 60%)`,
          opacity: hov ? 1 : 0.5, transition: 'opacity 0.35s ease' }} />
        {/* Category badge */}
        <div style={{ position: 'absolute', top: 16, left: 16,
          background: cs.catColor, color: '#fff',
          padding: '5px 12px', borderRadius: 20, fontSize: 11, fontWeight: 700,
          fontFamily: T.bd, letterSpacing: '0.04em' }}>
          {cs.cat}
        </div>
        {/* Title on image bottom */}
        <div style={{ position: 'absolute', bottom: 0, left: 0, right: 0, padding: '0 20px 18px' }}>
          <h3 style={{ fontSize: 17, fontWeight: 700, color: '#fff', fontFamily: T.hd, lineHeight: 1.3, margin: 0, letterSpacing: '-0.015em' }}>
            {cs.title}
          </h3>
        </div>
      </div>
      {/* Body */}
      <div style={{ padding: '16px 20px 20px' }}>
        <p style={{ fontFamily: T.bd, fontSize: 13, color: 'rgba(255,255,255,0.5)', lineHeight: 1.6,
          margin: '0 0 14px', textWrap: 'pretty' }}>{cs.desc}</p>
        <span style={{ fontSize: 12, fontWeight: 600, color: cs.catColor, fontFamily: T.bd,
          display: 'flex', alignItems: 'center', gap: 4 }}>
          View Case Study →
        </span>
      </div>
    </a>);

}

function PNSPortfolio() {
  const scrollRef = useRef(null);
  const scroll = (dir) => {
    if (scrollRef.current) scrollRef.current.scrollBy({ left: dir * 360, behavior: 'smooth' });
  };
  return (
    <section id="portfolio" data-screen-label="Portfolio" style={{ background: T.white, padding: '100px 0 100px' }}>
      <div style={{ maxWidth: 1240, margin: '0 auto', padding: '0 48px' }}>
        <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', marginBottom: 48, flexWrap: 'wrap', gap: 20 }}>
          <div className="pns-fade-up">
            <EyebrowBadge variant="dark">Case Studies</EyebrowBadge>
            <SectionTitle>{wpS.portfolioHeadline||"Results We've Delivered."}</SectionTitle>
            <p style={{ fontFamily: T.bd, fontSize: 15.5, color: T.g500, maxWidth: 500, lineHeight: 1.7, margin: 0, textWrap: 'pretty' }}>
              {wpS.portfolioBody||"Real solutions, real outcomes—here's how we've transformed technology for Southern California businesses."}
            </p>
          </div>
          <div className="pns-fade-up pns-d1" style={{ display: 'flex', gap: 12, flexShrink: 0 }}>
            <button onClick={() => scroll(-1)}
            style={{ width: 44, height: 44, borderRadius: '50%', border: `1.5px solid ${T.g200}`,
              background: 'transparent', cursor: 'pointer', fontSize: 18, display: 'flex',
              alignItems: 'center', justifyContent: 'center', transition: 'all 0.2s', color: T.g700 }}
            onMouseEnter={(e) => {e.currentTarget.style.background = T.n800;e.currentTarget.style.color = '#fff';e.currentTarget.style.borderColor = T.n800;}}
            onMouseLeave={(e) => {e.currentTarget.style.background = 'transparent';e.currentTarget.style.color = T.g700;e.currentTarget.style.borderColor = T.g200;}}>
              ←
            </button>
            <button onClick={() => scroll(1)}
            style={{ width: 44, height: 44, borderRadius: '50%', border: `1.5px solid ${T.g200}`,
              background: 'transparent', cursor: 'pointer', fontSize: 18, display: 'flex',
              alignItems: 'center', justifyContent: 'center', transition: 'all 0.2s', color: T.g700 }}
            onMouseEnter={(e) => {e.currentTarget.style.background = T.n800;e.currentTarget.style.color = '#fff';e.currentTarget.style.borderColor = T.n800;}}
            onMouseLeave={(e) => {e.currentTarget.style.background = 'transparent';e.currentTarget.style.color = T.g700;e.currentTarget.style.borderColor = T.g200;}}>
              →
            </button>
          </div>
        </div>
      </div>
      {/* Horizontal scroll */}
      <div ref={scrollRef} style={{ display: 'flex', gap: 20, overflowX: 'auto', paddingLeft: 48,
        paddingRight: 48, paddingBottom: 8, scrollbarWidth: 'none', msOverflowStyle: 'none' }}
      className="pns-hscroll">
        {CASES.map((cs, i) => <CaseCard key={cs.id} cs={cs} i={i} />)}
      </div>
      <div style={{ textAlign: 'center', marginTop: 40 }}>
        <a href={p3Url('portfolio','Portfolio.html')} style={{ display: 'inline-flex', alignItems: 'center', gap: 8,
          border: `1.5px solid ${T.n700}`, color: T.g700, padding: '12px 28px', borderRadius: 10,
          fontSize: 14, fontWeight: 600, textDecoration: 'none', fontFamily: T.bd, transition: 'all 0.25s ease' }}
        onMouseEnter={(e) => {e.currentTarget.style.background = T.n800;e.currentTarget.style.color = '#fff';e.currentTarget.style.borderColor = T.n800;}}
        onMouseLeave={(e) => {e.currentTarget.style.background = 'transparent';e.currentTarget.style.color = T.g700;e.currentTarget.style.borderColor = T.n700;}}>
          {wpS.portfolioCTA||'View All Case Studies'}
        </a>
      </div>
    </section>);

}
window.PNSPortfolio = PNSPortfolio;

/* ── TEAM ────────────────────────────────────────────────────────── */
const TEAM_DEFAULT = [
{ name: 'Hossein Salehi', role: 'CEO & Founder', color: '#d97559', initials: 'HS' },
{ name: 'Paria H. Babaei', role: 'Director of IT Operations', color: '#2bb5a0', initials: 'PB' },
{ name: 'Marcus Williams', role: 'Cybersecurity Lead', color: '#3b82f6', initials: 'MW' },
{ name: 'Jennifer Park', role: 'Cloud & M365 Architect', color: '#a855f7', initials: 'JP' }];
const TEAM=(window.pnsWP?.team?.length>0)?window.pnsWP.team:TEAM_DEFAULT;


function SocialIcon({ type }) {
  const paths = {
    li: <><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-4 0v7h-4v-7a6 6 0 0 1 6-6z" /><rect x="2" y="9" width="4" height="12" /><circle cx="4" cy="4" r="2" /></>,
    tw: <path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z" />,
    fb: <path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z" />,
    ig: <><rect x="2" y="2" width="20" height="20" rx="5" ry="5" /><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z" /><line x1="17.5" y1="6.5" x2="17.51" y2="6.5" /></>
  };
  return (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8"
    strokeLinecap="round" strokeLinejoin="round" style={{ width: 14, height: 14 }}>
      {paths[type]}
    </svg>);

}

function PNSTeam() {
  const [active, setActive] = useState(0);
  const m = TEAM[active];
  return (
    <section id="team" data-screen-label="Team"
    style={{ background: T.n900, padding: '100px 48px', position: 'relative', overflow: 'hidden' }}>
      <div style={{ position: 'absolute', top: 0, left: 0, width: 80, height: 80,
        background: `linear-gradient(135deg, ${T.teal}, ${T.tealL})`, borderRadius: '0 0 20px 0', opacity: 0.8 }} />
      <div style={{ position: 'absolute', top: '15%', right: '10%', width: 300, height: 300,
        background: T.n800, borderRadius: '50%', opacity: 0.5 }} />

      <div style={{ maxWidth: 1240, margin: '0 auto', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, alignItems: 'center' }}
      className="pns-split">
        {/* Left: Title + thumbnails */}
        <div>
          <div className="pns-fade-up">
            <h2 style={{ fontFamily: T.hd, fontWeight: 900, fontSize: 'clamp(52px,7vw,100px)',
              color: T.white, lineHeight: 0.95, letterSpacing: '-0.04em', margin: '0 0 20px', textTransform: 'uppercase' }}>
              {(wpS.teamHeadline||'OUR TEAM').replace(' ','\n').split('\n').map((w,i)=><span key={i}>{w}{i===0&&<br/>}</span>)}
            </h2>
          </div>
          <p className="pns-fade-up pns-d1" style={{ fontFamily: T.bd, fontSize: 15, color: 'rgba(255,255,255,0.45)',
            lineHeight: 1.7, margin: '0 0 36px', maxWidth: 420, textWrap: 'pretty' }}>
            {wpS.teamBody||'Expert technologists dedicated to your business success. Our team brings decades of combined experience in enterprise IT, cybersecurity, and cloud architecture.'}
          </p>
          {/* Prev / Next */}
          <div className="pns-fade-up pns-d1" style={{ display: 'flex', alignItems: 'center', gap: 20, marginBottom: 36 }}>
            <button onClick={() => setActive((a) => Math.max(0, a - 1))} disabled={active === 0} className="pns-tap"
            style={{ background: 'none', border: 'none', cursor: active === 0 ? 'default' : 'pointer',
              color: active === 0 ? 'rgba(255,255,255,0.2)' : 'rgba(255,255,255,0.7)',
              fontSize: 13, fontFamily: T.bd, display: 'flex', alignItems: 'center', gap: 6, transition: 'color 0.2s' }}
            onMouseEnter={(e) => {if (active > 0) e.currentTarget.style.color = '#fff';}}
            onMouseLeave={(e) => {e.currentTarget.style.color = active === 0 ? 'rgba(255,255,255,0.2)' : 'rgba(255,255,255,0.7)';}}>
              ← Prv
            </button>
            <button onClick={() => setActive((a) => Math.min(TEAM.length - 1, a + 1))} disabled={active === TEAM.length - 1} className="pns-tap"
            style={{ background: 'none', border: 'none', cursor: active === TEAM.length - 1 ? 'default' : 'pointer',
              color: active === TEAM.length - 1 ? 'rgba(255,255,255,0.2)' : 'rgba(255,255,255,0.7)',
              fontSize: 13, fontFamily: T.bd, display: 'flex', alignItems: 'center', gap: 6, transition: 'color 0.2s' }}
            onMouseEnter={(e) => {if (active < TEAM.length - 1) e.currentTarget.style.color = '#fff';}}
            onMouseLeave={(e) => {e.currentTarget.style.color = active === TEAM.length - 1 ? 'rgba(255,255,255,0.2)' : 'rgba(255,255,255,0.7)';}}>
              Nxt →
            </button>
          </div>
          {/* Thumbnails */}
          <div className="pns-fade-up pns-d2" style={{ display: 'flex', gap: 16, flexWrap: 'wrap' }}>
            {TEAM.map((mb, i) =>
            <div key={i} onClick={() => setActive(i)}
            style={{ cursor: 'pointer', borderRadius: 14, overflow: 'hidden', border: `2px solid ${i === active ? mb.color : 'transparent'}`,
              transition: 'all 0.3s ease', transform: i === active ? 'scale(1.02)' : 'scale(1)' }}>
                <div style={{ width: 90, height: 110,
                background: `linear-gradient(160deg, ${mb.color}55 0%, ${T.n600} 100%)`,
                display: 'flex', alignItems: 'center', justifyContent: 'center', position: 'relative' }}>
                  <div style={{ width: 54, height: 54, borderRadius: '50%',
                  background: `linear-gradient(135deg, ${mb.color}, ${mb.color}88)`,
                  display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                    <span style={{ fontFamily: T.hd, fontWeight: 700, fontSize: 18, color: '#fff' }}>{mb.initials}</span>
                  </div>
                </div>
                <div style={{ padding: '8px 10px', background: T.n700 }}>
                  <div style={{ fontSize: 11, fontWeight: 700, color: T.white, fontFamily: T.hd, whiteSpace: 'nowrap' }}>{mb.name.split(' ')[0]}</div>
                  <div style={{ fontSize: 10, color: T.g400, fontFamily: T.bd, whiteSpace: 'nowrap' }}>{mb.role.split(' ')[0]}</div>
                </div>
              </div>
            )}
          </div>
        </div>

        {/* Right: Featured card */}
        <div className="pns-fade-up pns-d1" style={{ position: 'relative' }}>
          <div style={{ borderRadius: 20, overflow: 'hidden', boxShadow: '0 20px 60px rgba(0,0,0,0.5)' }}>
            {/* Photo area */}
            <div style={{ height: 320, position: 'relative',
              background: `linear-gradient(160deg, ${m.color}44 0%, ${T.n600} 100%)`,
              display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
              <div style={{ width: 140, height: 140, borderRadius: '50%',
                background: `linear-gradient(135deg, ${m.color}, ${m.color}99)`,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                boxShadow: `0 0 60px ${m.color}44` }}>
                <span style={{ fontFamily: T.hd, fontWeight: 800, fontSize: 48, color: '#fff' }}>{m.initials}</span>
              </div>
            </div>
            {/* Info */}
            <div style={{ background: T.n700, padding: '20px 24px',
              display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
              <div>
                <div style={{ fontFamily: T.hd, fontWeight: 700, fontSize: 18, color: T.white, marginBottom: 4 }}>{m.name}</div>
                <div style={{ fontFamily: T.bd, fontSize: 13, color: T.g400 }}>{m.role}</div>
              </div>
              <div style={{ display: 'flex', gap: 8 }}>
                {['li', 'tw', 'fb', 'ig'].map((icon) =>
                <a key={icon} href="#"
                style={{ width: 32, height: 32, borderRadius: 8, background: T.coral,
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  color: '#fff', textDecoration: 'none', transition: 'all 0.2s ease' }}
                onMouseEnter={(e) => {e.currentTarget.style.background = T.coralL;e.currentTarget.style.transform = 'translateY(-2px)';}}
                onMouseLeave={(e) => {e.currentTarget.style.background = T.coral;e.currentTarget.style.transform = 'translateY(0)';}}>
                    <SocialIcon type={icon} />
                  </a>
                )}
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>);

}
window.PNSTeam = PNSTeam;

/* ── TESTIMONIALS ────────────────────────────────────────────────── */
const TESTIMONIALS_DEFAULT = [
{ quote: 'Premier Network Solutions has been a game-changer for our practice. Their proactive IT management keeps our systems running, and their cybersecurity setup gives us complete peace of mind for HIPAA compliance.',
  name: 'Dr. Michael Torres', title: 'Managing Partner', co: 'Pacific Coast Medical Group', color: '#d97559' },
{ quote: 'The Microsoft 365 migration was flawless—zero downtime, zero data loss. Their team handled everything from setup to user training. Our entire firm is more productive than we\'ve ever been.',
  name: 'Lisa Chen', title: 'Director of Operations', co: 'Westside Legal Partners', color: '#2bb5a0' },
{ quote: 'We were hit with a ransomware attempt last year. Premier\'s 24/7 monitoring caught it in real time and neutralized it before any damage occurred. Their team is exceptionally skilled and always responsive.',
  name: 'Robert Martinez', title: 'CEO', co: 'SoCal Manufacturing Co.', color: '#3b82f6' }];
const TESTIMONIALS=(window.pnsWP?.testimonials?.length>0)?window.pnsWP.testimonials:TESTIMONIALS_DEFAULT;


function PNSTestimonials() {
  const [idx, setIdx] = useState(0);
  const tst = TESTIMONIALS[idx];
  const go = (dir) => setIdx((i) => (i + dir + TESTIMONIALS.length) % TESTIMONIALS.length);
  useEffect(() => {
    const t = setInterval(() => setIdx(i => (i + 1) % TESTIMONIALS.length), 5000);
    return () => clearInterval(t);
  }, []);
  return (
    <section data-screen-label="Testimonials" style={{ background: T.n900, padding: '100px 48px', position: 'relative', overflow: 'hidden' }}>
      <div style={{ position: 'absolute', top: '-10%', right: '-5%', width: 400, height: 400,
        background: `radial-gradient(circle, rgba(232,113,74,0.07) 0%, transparent 65%)`, pointerEvents: 'none' }} />
      {/* Big decorative quote */}
      <div style={{ position: 'absolute', bottom: '5%', right: '5%', fontSize: 240, fontFamily: T.hd, fontWeight: 900,
        color: 'rgba(255,255,255,0.02)', lineHeight: 1, pointerEvents: 'none', userSelect: 'none' }}>"</div>

      <div style={{ maxWidth: 1240, margin: '0 auto', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 72, alignItems: 'center' }}
      className="pns-split">
        {/* Photo + quote card */}
        <div className="pns-slide-left" style={{ position: 'relative' }}>
          <div style={{ height: 440, borderRadius: 20, overflow: 'hidden' }}>
            <img
              src={window.pnsWP?.images?.['1518770660439-4636190af475']||"https://images.unsplash.com/photo-1518770660439-4636190af475?w=800&auto=format&fit=crop&q=80"}
              alt="Circuit board technology — Premier Network Solutions IT infrastructure"
              loading="lazy"
              style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
          </div>
          {/* Floating quote card */}
          <div style={{ position: 'absolute', bottom: -20, right: -20, left: 20,
            background: T.white, borderRadius: 16, padding: '24px 24px 20px',
            boxShadow: '0 16px 50px rgba(0,0,0,0.5)' }}>
            {/* Quote icon */}
            <div style={{ width: 40, height: 40, borderRadius: 10,
              background: `linear-gradient(135deg, ${tst.color}, ${T.coralL})`,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              marginBottom: 14, flexShrink: 0,
              position: 'absolute', top: -20, left: 20 }}>
              <span style={{ color: '#fff', fontSize: 20, fontWeight: 900, lineHeight: 1, marginTop: -2 }}>"</span>
            </div>
            <p style={{ fontFamily: T.bd, fontSize: 14, fontStyle: 'italic', color: T.g700,
              lineHeight: 1.7, margin: '20px 0 14px', textWrap: 'pretty' }}>
              {tst.quote}
            </p>
            <div style={{ fontFamily: T.hd, fontSize: 13.5, fontWeight: 700, color: tst.color }}>
              {tst.name}
            </div>
            <div style={{ fontFamily: T.bd, fontSize: 12, color: T.g500 }}>
              {tst.title} · {tst.co}
            </div>
          </div>
        </div>

        {/* Text side */}
        <div>
          <div className="pns-fade-up"><EyebrowBadge variant="teal">{wpS.testimonialsEyebrow||'Testimonials'}</EyebrowBadge></div>
          <div className="pns-fade-up pns-d1">
            <SectionTitle light>{wpS.testimonialsHeadline||'What Our Clients Say.'}</SectionTitle>
          </div>
          <p className="pns-fade-up pns-d2" style={{ fontFamily: T.bd, fontSize: 15.5, color: 'rgba(255,255,255,0.45)',
            lineHeight: 1.78, margin: '0 0 40px', textWrap: 'pretty' }}>
            {wpS.testimonialsBody||"Don't just take our word for it—hear directly from the Southern California businesses that rely on Premier Network Solutions every day."}
          </p>
          {/* Nav */}
          <div className="pns-fade-up pns-d2" style={{ display: 'flex', alignItems: 'center', gap: 20, marginBottom: 36 }}>
            <button onClick={() => go(-1)}
            style={{ background: 'none', border: 'none', cursor: 'pointer',
              color: 'rgba(255,255,255,0.55)', fontSize: 13, fontFamily: T.bd,
              display: 'flex', alignItems: 'center', gap: 6, transition: 'color 0.2s' }}
            onMouseEnter={(e) => e.currentTarget.style.color = '#fff'}
            onMouseLeave={(e) => e.currentTarget.style.color = 'rgba(255,255,255,0.55)'}>
              ← Prv
            </button>
            <div style={{ display: 'flex', gap: 8 }}>
              {TESTIMONIALS.map((_, i) =>
              <button key={i} onClick={() => setIdx(i)}
              style={{ width: i === idx ? 24 : 8, height: 8, borderRadius: 4, border: 'none', cursor: 'pointer', padding: 0,
                background: i === idx ? T.coral : 'rgba(255,255,255,0.15)', transition: 'all 0.3s ease' }} />
              )}
            </div>
            <button onClick={() => go(1)}
            style={{ background: 'none', border: 'none', cursor: 'pointer',
              color: 'rgba(255,255,255,0.55)', fontSize: 13, fontFamily: T.bd,
              display: 'flex', alignItems: 'center', gap: 6, transition: 'color 0.2s' }}
            onMouseEnter={(e) => e.currentTarget.style.color = '#fff'}
            onMouseLeave={(e) => e.currentTarget.style.color = 'rgba(255,255,255,0.55)'}>
              Nxt →
            </button>
          </div>
          {/* Dots client indicators */}
          <div className="pns-fade-up pns-d3" style={{ display: 'flex', gap: 16 }}>
            {TESTIMONIALS.map((t, i) =>
            <div key={i} onClick={() => setIdx(i)}
            style={{ cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 10, opacity: i === idx ? 1 : 0.4, transition: 'opacity 0.3s' }}>
                <div style={{ width: 40, height: 40, borderRadius: '50%',
                background: `linear-gradient(135deg, ${t.color}, ${t.color}88)`,
                display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                  <span style={{ fontFamily: T.hd, fontWeight: 700, fontSize: 12, color: '#fff' }}>
                    {t.name.split(' ').map((n) => n[0]).join('')}
                  </span>
                </div>
                {i === idx &&
              <div>
                    <div style={{ fontSize: 12.5, fontWeight: 600, color: T.white, fontFamily: T.hd }}>{t.name}</div>
                    <div style={{ fontSize: 11, color: T.g400, fontFamily: T.bd }}>{t.co}</div>
                  </div>
              }
              </div>
            )}
          </div>
        </div>
      </div>
    </section>);

}
window.PNSTestimonials = PNSTestimonials;