// pns-2.jsx — About · Why Choose Us · Stats
const SP2_SITE = (window.pnsWP && window.pnsWP.siteUrl) || '';
const p2Url = (slug, file) => SP2_SITE ? SP2_SITE + slug + '/' : file;
const { useState, useEffect, useRef } = React;
const T = window.PNST;
const { EyebrowBadge, SectionTitle, ImgPlaceholder } = window;

/* ── CHECK ICON ─────────────────────────────────────────────────── */
function CheckIcon() {
  return (
    <svg viewBox="0 0 20 20" style={{ width: 18, height: 18, flexShrink: 0 }} fill="none">
      <circle cx="10" cy="10" r="9" fill={T.tealPale} stroke={T.teal} strokeWidth="1.2" />
      <path d="M6.5 10.5l2.5 2.5 4.5-5" stroke={T.teal} strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
    </svg>);

}

/* ── ABOUT ──────────────────────────────────────────────────────── */
function PNSAbout() {
  const points = [
  'Proactive IT management, not reactive break-fix support',
  'Locally based team with 24/7 remote support capability',
  'Certified Microsoft, Cisco, and CompTIA engineers',
  'Dedicated account management for every client'];

  return (
    <section id="about" data-screen-label="About" style={{ background: T.white, padding: '100px 48px' }}>
      <div style={{ maxWidth: 1240, margin: '0 auto', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80, alignItems: 'center' }}
      className="pns-split">
        {/* Text */}
        <div>
          <div className="pns-fade-up"><EyebrowBadge variant="dark">About Us</EyebrowBadge></div>
          <div className="pns-fade-up pns-d1">
            <SectionTitle>Your Technology Partner Since 2017.</SectionTitle>
          </div>
          <p className="pns-fade-up pns-d2" style={{ fontFamily: T.bd, fontSize: 15.5, color: T.g500, lineHeight: 1.78,
            margin: '0 0 28px', textWrap: 'pretty' }}>
            Premier Network Solutions was founded in Southern California with a singular mission: to give small and
            medium-sized businesses access to the same caliber of IT expertise that large enterprises rely on.
            We believe every business deserves proactive, reliable, and expert technology management.
          </p>
          <div className="pns-fade-up pns-d2" style={{ display: 'flex', flexDirection: 'column', gap: 12, marginBottom: 36 }}>
            {points.map((pt, i) =>
            <div key={i} style={{ display: 'flex', alignItems: 'flex-start', gap: 10 }}>
                <div style={{ paddingTop: 1 }}><CheckIcon /></div>
                <span style={{ fontFamily: T.bd, fontSize: 14.5, color: T.g700, lineHeight: 1.55 }}>{pt}</span>
              </div>
            )}
          </div>
          <div className="pns-fade-up pns-d3">
            <a href={p2Url('services','Services.html')} style={{ display: 'inline-flex', alignItems: 'center', gap: 8,
              background: T.coral, color: '#fff', padding: '13px 26px', borderRadius: 10,
              fontSize: 14, fontWeight: 600, textDecoration: 'none', fontFamily: T.bd,
              transition: 'all 0.25s ease' }}
            onMouseEnter={(e) => {e.currentTarget.style.background = T.coralL;e.currentTarget.style.transform = 'translateY(-2px)';e.currentTarget.style.boxShadow = `0 8px 28px rgba(232,113,74,0.38)`;}}
            onMouseLeave={(e) => {e.currentTarget.style.background = T.coral;e.currentTarget.style.transform = 'translateY(0)';e.currentTarget.style.boxShadow = 'none';}}>
              Learn More About Us →
            </a>
          </div>
        </div>
        {/* Image + floating card */}
        <div className="pns-slide-right" style={{ position: 'relative' }}>
          <div style={{ width: '100%', height: 480, borderRadius: 20, overflow: 'hidden', flexShrink: 0 }}>
            <img src="https://images.unsplash.com/photo-1580106815433-a5b1d1d53d85?w=900&auto=format&fit=crop&q=80"
            alt="Premier Network Solutions server room hallway"
            loading="lazy"
            style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
          </div>
          {/* Floating detail card */}
          <div style={{ position: 'absolute', bottom: -24, left: -28,
            background: T.white, borderRadius: 14, padding: '16px 20px',
            boxShadow: '0 16px 48px rgba(0,0,0,0.14)', border: `1px solid ${T.g100}`,
            display: 'flex', flexDirection: 'column', gap: 4, minWidth: 200 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
              <div style={{ width: 36, height: 36, borderRadius: 10, background: T.tealPale,
                display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                <span style={{ fontSize: 16 }}>📅</span>
              </div>
              <div>
                <div style={{ fontSize: 13, fontWeight: 700, color: T.g900, fontFamily: T.hd }}>Founded 2017</div>
                <div style={{ fontSize: 11, color: T.g500, fontFamily: T.bd }}>Southern California</div>
              </div>
            </div>
            <div style={{ height: 1, background: T.g100, margin: '8px 0' }} />
            <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
              <div style={{ width: 36, height: 36, borderRadius: 10, background: T.coralPale,
                display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                <span style={{ fontSize: 16 }}>🤝</span>
              </div>
              <div>
                <div style={{ fontSize: 13, fontWeight: 700, color: T.g900, fontFamily: T.hd }}>100+ Clients Served</div>
                <div style={{ fontSize: 11, color: T.g500, fontFamily: T.bd }}>Across SMB & Enterprise</div>
              </div>
            </div>
          </div>
          {/* Coral accent block behind image */}
          <div style={{ position: 'absolute', top: -16, right: -16, width: 100, height: 100,
            background: T.coral, borderRadius: 16, zIndex: -1, opacity: 0.15 }} />
        </div>
      </div>
    </section>);

}
window.PNSAbout = PNSAbout;

/* ── FEATURE ICON ────────────────────────────────────────────────── */
function FeatureIcon({ icon }) {
  const icons = {
    monitor: <path d="M3 4h18v13H3zM8 20h8M12 17v3" stroke={T.coral} fill="none" strokeWidth="1.6" strokeLinecap="round" />,
    badge: <><circle cx="12" cy="8" r="5" stroke={T.coral} fill="none" strokeWidth="1.6" /><path d="M8 14l4 7 4-7" stroke={T.teal} fill="none" strokeWidth="1.6" strokeLinecap="round" /></>,
    shield: <><path d="M12 2L4 6v6c0 5.5 3.5 10.7 8 12 4.5-1.3 8-6.5 8-12V6z" stroke={T.coral} fill="none" strokeWidth="1.6" /><path d="M9 12l2 2 4-4" stroke={T.teal} fill="none" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" /></>,
    partner: <><rect x="2" y="3" width="9" height="9" rx="1" stroke={T.coral} fill="none" strokeWidth="1.6" /><rect x="13" y="3" width="9" height="9" rx="1" stroke={T.coral} fill="none" strokeWidth="1.6" /><rect x="2" y="15" width="9" height="6" rx="1" stroke={T.teal} fill="none" strokeWidth="1.6" /><rect x="13" y="15" width="9" height="6" rx="1" stroke={T.teal} fill="none" strokeWidth="1.6" /></>,
    bolt: <><path d="M13 2L4.5 13H12L11 22l8.5-11H13L14 2z" stroke={T.coral} fill="none" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" /></>,
    expand: <><path d="M5 9V5h4M15 5h4v4M19 15v4h-4M9 19H5v-4" stroke={T.coral} fill="none" strokeWidth="1.6" strokeLinecap="round" /><path d="M12 12m-2 0a2 2 0 1 0 4 0a2 2 0 1 0-4 0" stroke={T.teal} fill="none" strokeWidth="1.4" /></>
  };
  return (
    <svg viewBox="0 0 24 24" style={{ width: 26, height: 26 }} strokeLinejoin="round">{icons[icon]}</svg>);

}

/* ── WHY CHOOSE US ──────────────────────────────────────────────── */
function PNSWhyChooseUs() {
  const features = [
  { icon: 'monitor', title: '24/7 Monitoring & Support', desc: 'Round-the-clock system monitoring with rapid helpdesk response.' },
  { icon: 'badge', title: 'Certified IT Engineers', desc: 'Microsoft, Cisco, and CompTIA certified professionals.' },
  { icon: 'shield', title: 'Cybersecurity-First Approach', desc: 'Security built into every solution from day one.' },
  { icon: 'partner', title: 'Microsoft Partner', desc: 'Authorized Microsoft solutions partner with direct escalation.' },
  { icon: 'bolt', title: 'Rapid Response Times', desc: 'Guaranteed response times backed by our service SLA.' },
  { icon: 'expand', title: 'Scalable Solutions', desc: 'IT infrastructure that grows with your business goals.' }];

  return (
    <section id="why" data-screen-label="Why Choose Us" style={{ background: T.g50, padding: '100px 48px' }}>
      <div style={{ maxWidth: 1240, margin: '0 auto', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80, alignItems: 'center' }}
      className="pns-split">
        {/* Image side */}
        <div className="pns-slide-left" style={{ position: 'relative', order: 0 }} data-order="img">
          <div style={{ width: '100%', height: 500, borderRadius: 20, overflow: 'hidden', flexShrink: 0 }}>
            <img src="https://images.unsplash.com/photo-1563013544-824ae1b704d3?w=900&auto=format&fit=crop&q=80"
            alt="Cybersecurity-first IT approach — Premier Network Solutions"
            loading="lazy"
            style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
          </div>
          {/* Floating quote card */}
          <div style={{ position: 'absolute', bottom: -20, right: -24,
            background: T.n700, borderRadius: 16, padding: '18px 20px', maxWidth: 260,
            boxShadow: '0 16px 48px rgba(0,0,0,0.5)', border: '1px solid rgba(255,255,255,0.08)' }}>
            <p style={{ fontFamily: T.bd, fontSize: 13, color: 'rgba(255,255,255,0.8)', fontStyle: 'italic',
              lineHeight: 1.6, margin: '0 0 12px', textWrap: 'pretty' }}>
              "Successfully supporting businesses since 2017 with zero-compromise IT service."
            </p>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
              <div style={{ width: 30, height: 30, borderRadius: '50%', background: `linear-gradient(135deg,${T.coral},${T.coralL})`,
                display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                <span style={{ fontSize: 12, fontWeight: 700, color: '#fff', fontFamily: T.hd }}>PNS</span>
              </div>
              <div>
                <div style={{ fontSize: 12, fontWeight: 600, color: T.white, fontFamily: T.hd }}>Premier Network Solutions</div>
                <div style={{ fontSize: 10, color: T.g400, fontFamily: T.bd }}>Southern California</div>
              </div>
            </div>
          </div>
          {/* Teal accent */}
          <div style={{ position: 'absolute', top: -16, left: -16, width: 80, height: 80,
            background: T.teal, borderRadius: 12, zIndex: -1, opacity: 0.2 }} />
        </div>
        {/* Text side */}
        <div>
          <div className="pns-fade-up"><EyebrowBadge variant="dark">Why Choose Us</EyebrowBadge></div>
          <div className="pns-fade-up pns-d1">
            <SectionTitle>Why Southern California Businesses Choose Premier?</SectionTitle>
          </div>
          <p className="pns-fade-up pns-d2" style={{ fontFamily: T.bd, fontSize: 15.5, color: T.g500, lineHeight: 1.78,
            margin: '0 0 32px', textWrap: 'pretty' }}>
            We understand that technology should empower your team, not slow it down. Our tailored approach
            ensures every solution is built around your specific needs, goals, and budget.
          </p>
          <div className="pns-fade-up pns-d2 pns-feature-2col" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16, marginBottom: 36 }}>
            {features.map((f, i) =>
            <div key={i} style={{ display: 'flex', alignItems: 'flex-start', gap: 12 }}>
                <div style={{ width: 44, height: 44, borderRadius: 10, background: T.g100,
                display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                  <FeatureIcon icon={f.icon} />
                </div>
                <div>
                  <div style={{ fontSize: 13.5, fontWeight: 700, color: T.g900, fontFamily: T.hd, marginBottom: 3, lineHeight: 1.3 }}>
                    {f.title}
                  </div>
                  <div style={{ fontSize: 12.5, color: T.g500, fontFamily: T.bd, lineHeight: 1.5 }}>
                    {f.desc}
                  </div>
                </div>
              </div>
            )}
          </div>
          <div className="pns-fade-up pns-d3">
            <a href={p2Url('services','Services.html')} style={{ display: 'inline-flex', alignItems: 'center', gap: 8,
              background: T.coral, color: '#fff', padding: '13px 26px', borderRadius: 10,
              fontSize: 14, fontWeight: 600, textDecoration: 'none', fontFamily: T.bd, transition: 'all 0.25s ease' }}
            onMouseEnter={(e) => {e.currentTarget.style.background = T.coralL;e.currentTarget.style.transform = 'translateY(-2px)';e.currentTarget.style.boxShadow = `0 8px 28px rgba(232,113,74,0.38)`;}}
            onMouseLeave={(e) => {e.currentTarget.style.background = T.coral;e.currentTarget.style.transform = 'translateY(0)';e.currentTarget.style.boxShadow = 'none';}}>
              See How We Help →
            </a>
          </div>
        </div>
      </div>
    </section>);

}
window.PNSWhyChooseUs = PNSWhyChooseUs;

/* ── STATS COUNTER HOOK ─────────────────────────────────────────── */
function useCountUp(target, suffix = '', duration = 2000) {
  const [count, setCount] = useState(0);
  const ref = useRef(null);
  const started = useRef(false);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const observer = new IntersectionObserver(([entry]) => {
      if (entry.isIntersecting && !started.current) {
        started.current = true;
        const start = Date.now();
        const isFloat = String(target).includes('.');
        const step = () => {
          const elapsed = Date.now() - start;
          const progress = Math.min(elapsed / duration, 1);
          const ease = 1 - Math.pow(1 - progress, 3);
          const value = isFloat ?
          (target * ease).toFixed(1) :
          Math.floor(target * ease);
          setCount(value);
          if (progress < 1) requestAnimationFrame(step);
        };
        requestAnimationFrame(step);
        observer.disconnect();
      }
    }, { threshold: 0.6 });
    observer.observe(el);
    return () => observer.disconnect();
  }, [target, duration]);
  return [count, ref];
}

/* ── STATS ──────────────────────────────────────────────────────── */
function PNSStats() {
  const [c1, r1] = useCountUp(100);
  const [c2, r2] = useCountUp(99.9, '%');
  const stats = [
  { val: c1, ref: r1, suffix: '+', label: 'Clients Served', sub: 'SMBs trust Premier Network Solutions' },
  { val: c2, ref: r2, suffix: '%', label: 'Uptime Guarantee', sub: 'Average across all managed clients' },
  { val: '2017', ref: useRef(null), suffix: '', label: 'Year Founded', sub: 'Serving Southern California' }];

  return (
    <section data-screen-label="Stats" style={{ background: T.n900, padding: '100px 48px', position: 'relative', overflow: 'hidden' }}>
      {/* BG blobs */}
      <div style={{ position: 'absolute', top: '-20%', right: '-5%', width: 500, height: 500,
        background: `radial-gradient(circle, rgba(232,113,74,0.08) 0%, transparent 65%)`, pointerEvents: 'none' }} />
      <div style={{ position: 'absolute', bottom: '-20%', left: '-5%', width: 400, height: 400,
        background: `radial-gradient(circle, rgba(43,181,160,0.06) 0%, transparent 65%)`, pointerEvents: 'none' }} />
      {/* Dark blob shape */}
      <div style={{ position: 'absolute', top: '10%', right: '20%', width: 280, height: 280,
        background: T.n800, borderRadius: '70% 30% 50% 50% / 40% 60% 40% 60%', opacity: 0.6, pointerEvents: 'none' }} />

      <div style={{ maxWidth: 1240, margin: '0 auto', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80, alignItems: 'center' }}
      className="pns-split">
        {/* Collage */}
        <div className="pns-slide-left" style={{ position: 'relative', height: 500 }}>
          <div style={{ position: 'absolute', top: 0, left: 0, width: '60%', height: 300, borderRadius: 20, overflow: 'hidden' }}>
            <img src="https://images.unsplash.com/photo-1639066648921-82d4500abf1a?w=700&auto=format&fit=crop&q=80"
            alt="Enterprise server equipment array" loading="lazy" style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
          </div>
          <div style={{ position: 'absolute', top: 0, left: '55%', right: 0,
            background: T.coral, borderRadius: 20, height: 140, opacity: 0.9 }} />
          <div style={{ position: 'absolute', top: 100, left: '42%', width: '58%', height: 260, borderRadius: 20, overflow: 'hidden' }}>
            <img src="https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=700&auto=format&fit=crop&q=80"
            alt="Network fiber optic cables" loading="lazy" style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
          </div>
          <div style={{ position: 'absolute', bottom: 0, left: 0, width: '55%', height: 200, borderRadius: 20, overflow: 'hidden' }}>
            <img src="https://images.unsplash.com/photo-1691435828932-911a7801adfb?w=700&auto=format&fit=crop&q=80"
            alt="Network wiring infrastructure close-up" style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
          </div>
        </div>
        {/* Text + counters */}
        <div>
          <div className="pns-fade-up"><EyebrowBadge variant="teal">By the Numbers</EyebrowBadge></div>
          <div className="pns-fade-up pns-d1">
            <SectionTitle light size="lg">Proven Results for Southern California Businesses.</SectionTitle>
          </div>
          <p className="pns-fade-up pns-d2" style={{ fontFamily: T.bd, fontSize: 15.5, color: 'rgba(255,255,255,0.5)',
            lineHeight: 1.78, margin: '0 0 48px', textWrap: 'pretty' }}>
            Since 2017, we've built a track record of delivering reliable IT solutions that help businesses thrive
            in an increasingly digital and security-critical landscape.
          </p>
          <div className="pns-fade-up pns-d2 pns-stats-3col" style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 24 }}>
            {stats.map((s, i) =>
            <div key={i} ref={s.ref}>
                <div style={{ fontFamily: T.hd, fontWeight: 800, color: T.coral,
                fontSize: 'clamp(36px,3.5vw,52px)', lineHeight: 1, letterSpacing: '-0.04em', marginBottom: 6 }}>
                  {s.val}{s.suffix}
                </div>
                <div style={{ fontFamily: T.hd, fontSize: 13, fontWeight: 600, color: T.white, marginBottom: 4 }}>
                  {s.label}
                </div>
                <div style={{ fontFamily: T.bd, fontSize: 12, color: 'rgba(255,255,255,0.35)', lineHeight: 1.5 }}>
                  {s.sub}
                </div>
              </div>
            )}
          </div>
        </div>
      </div>
    </section>);

}
window.PNSStats = PNSStats;