// pns-section-page.jsx — shared shell for standalone section pages
const { useEffect } = React;
const ST = window.PNST;
const wpSP = (window.pnsWP && window.pnsWP.settings) || {};
const SP_SITE = (window.pnsWP && window.pnsWP.siteUrl) || '';
const spUrl = (slug) => SP_SITE ? SP_SITE + slug + '/' : SP_PAGES_FILE[slug];
const SP_PAGES_FILE = {
  services:'Services.html', about:'About.html', 'why-us':'Why Us.html',
  portfolio:'Portfolio.html', team:'Team.html', pricing:'Pricing.html', contact:'Contact.html',
};

const SP_CONFIG = {
  services: {
    eyebrow:'Services', title:'Technology Services That Keep You Running',
    lede:'From fully managed IT to cybersecurity, cloud, and custom development — one partner for every layer of your technology stack.',
    img:'https://images.unsplash.com/photo-1451187580459-43490279c0fa?w=1600&auto=format&fit=crop&q=60',
    render:['PNSServices'],
  },
  about: {
    eyebrow:'About Us', title:'A Technology Partner, Not a Vendor',
    lede:'Premier Network Solutions has supported Southern California businesses for over a decade with proactive, senior-level IT management.',
    img:'https://images.unsplash.com/photo-1522071820081-009f0129c71c?w=1600&auto=format&fit=crop&q=60',
    render:['PNSAbout','PNSStats'],
  },
  'why-us': {
    eyebrow:'Why Choose Us', title:'Why Businesses Stay With Us',
    lede:'Predictable costs, senior engineers on every ticket, and monitoring that catches problems before your team ever notices them.',
    img:'https://images.unsplash.com/photo-1552664730-d307ca884978?w=1600&auto=format&fit=crop&q=60',
    render:['PNSWhyChooseUs','PNSStats'],
  },
  portfolio: {
    eyebrow:'Portfolio', title:'Work We Have Delivered',
    lede:'Infrastructure rebuilds, security hardening, cloud migrations, and custom platforms for businesses across Southern California.',
    img:'https://images.unsplash.com/photo-1497215728101-856f4ea42174?w=1600&auto=format&fit=crop&q=60',
    render:['PNSPortfolio','PNSTestimonials'],
  },
  team: {
    eyebrow:'Our Team', title:'The People Behind Your Systems',
    lede:'Certified engineers and strategists who know your environment by name — not a rotating queue of call-center technicians.',
    img:'https://images.unsplash.com/photo-1600880292203-757bb62b4baf?w=1600&auto=format&fit=crop&q=60',
    render:['PNSTeam'],
  },
  pricing: {
    eyebrow:'Pricing', title:'Flexible Plans for Every Business',
    lede:'Transparent per-device pricing with no hidden fees and no long-term contracts. Every plan includes monitoring and helpdesk.',
    img:'https://images.unsplash.com/photo-1554224155-6726b3ff858f?w=1600&auto=format&fit=crop&q=60',
    render:['PNSPricing'],
  },
};

function SectionHero({ cfg }) {
  return (
    <section data-screen-label="Page Hero" className="pns-page-hero"
      style={{ background:ST.n900, padding:'150px 48px 84px', position:'relative', overflow:'hidden' }}>
      <div aria-hidden="true" style={{ position:'absolute', inset:0, backgroundImage:`url('${cfg.img}')`,
        backgroundSize:'cover', backgroundPosition:'center', opacity:0.13 }}/>
      <div aria-hidden="true" style={{ position:'absolute', top:'-22%', right:'-8%', width:460, height:460,
        background:'radial-gradient(circle, rgba(43,181,160,0.2) 0%, transparent 65%)', pointerEvents:'none' }}/>
      <div style={{ maxWidth:1240, margin:'0 auto', position:'relative' }}>
        <div style={{ maxWidth:760 }}>
          <span style={{ display:'inline-flex', alignItems:'center', gap:8, fontFamily:ST.bd, fontSize:11.5,
            fontWeight:700, letterSpacing:'0.12em', textTransform:'uppercase', color:ST.teal,
            background:'rgba(43,181,160,0.12)', border:'1px solid rgba(43,181,160,0.32)',
            padding:'6px 14px', borderRadius:30, marginBottom:22 }}>{cfg.eyebrow}</span>
          <h1 style={{ fontFamily:ST.hd, fontWeight:900, fontSize:'clamp(30px,5vw,58px)', color:'#fff',
            lineHeight:1.06, letterSpacing:'-0.035em', margin:'0 0 20px', textWrap:'balance' }}>{cfg.title}</h1>
          <p style={{ fontFamily:ST.bd, fontSize:16.5, color:'rgba(255,255,255,0.64)', lineHeight:1.75,
            margin:'0 0 30px', maxWidth:600, textWrap:'pretty' }}>{cfg.lede}</p>
          <div style={{ display:'flex', gap:12, flexWrap:'wrap' }}>
            <a href={spUrl('contact')} style={{ background:ST.coral, color:'#fff', padding:'14px 26px', borderRadius:10,
              fontSize:14.5, fontWeight:700, textDecoration:'none', fontFamily:ST.bd, display:'inline-flex',
              alignItems:'center', minHeight:48, transition:'all 0.25s ease' }}
              onMouseEnter={e=>{e.currentTarget.style.background=ST.coralL; e.currentTarget.style.transform='translateY(-2px)';}}
              onMouseLeave={e=>{e.currentTarget.style.background=ST.coral; e.currentTarget.style.transform='translateY(0)';}}>
              Get Support →
            </a>
            <a href={`tel:${String(wpSP.phone||'+17473352335').replace(/[^\d+]/g,'')}`}
              style={{ background:'transparent', color:'#fff', padding:'13px 24px', borderRadius:10,
                fontSize:14.5, fontWeight:600, textDecoration:'none', fontFamily:ST.bd, display:'inline-flex',
                alignItems:'center', minHeight:48, border:'1.5px solid rgba(255,255,255,0.22)', transition:'all 0.25s ease' }}
              onMouseEnter={e=>{e.currentTarget.style.borderColor='rgba(255,255,255,0.5)';}}
              onMouseLeave={e=>{e.currentTarget.style.borderColor='rgba(255,255,255,0.22)';}}>
              {wpSP.phone||'+1 (747) 335-2335'}
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}

function PNSSectionPage() {
  const key = window.PNS_SECTION || 'services';
  const cfg = SP_CONFIG[key] || SP_CONFIG.services;

  useEffect(() => {
    document.title = `${cfg.title} — Premier Network Solutions`;
    const timer = setTimeout(() => {
      const observer = new IntersectionObserver(
        entries => entries.forEach(e => { if (e.isIntersecting) { e.target.classList.add('visible'); observer.unobserve(e.target); } }),
        { threshold: 0.12, rootMargin: '0px 0px -50px 0px' }
      );
      document.querySelectorAll('.pns-fade-up, .pns-slide-left, .pns-slide-right, .pns-zoom-in').forEach(el => observer.observe(el));
    }, 250);
    return () => clearTimeout(timer);
  }, [cfg]);

  const Nav = window.PNSNav, Footer = window.PNSFooter, Faq = window.PNSFaq;
  return (
    <div style={{ overflowX:'hidden' }}>
      <Nav />
      <SectionHero cfg={cfg} />
      {cfg.render.map(name => {
        const C = window[name];
        return C ? <C key={name} /> : null;
      })}
      <Faq section={key} />
      <Footer />
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('app')).render(<PNSSectionPage />);