// pns-contact-page.jsx — standalone /Contact page
const { useEffect } = React;
const T = window.PNST;
const { PNSNav, PNSContact, PNSFooter } = window;
const wpC = (window.pnsWP && window.pnsWP.settings) || {};

const CONTACT_CARDS = [
  { k:'Call Us', v:(wpC.phone||'+1 (747) 335-2335'), href:'tel:'+String(wpC.phone||'+17473352335').replace(/[^\d+]/g,''), sub:'Mon–Fri, 9am–6pm PT · 24/7 emergency support' },
  { k:'Email Us', v:(wpC.email||'info@premiernetworksolutions.com'), href:'mailto:'+(wpC.email||'info@premiernetworksolutions.com'), sub:'We reply within one business hour' },
  { k:'Service Area', v:'Southern California', href:null, sub:'Los Angeles · Orange County · Ventura' },
];

function ContactHero() {
  return (
    <section data-screen-label="Contact Hero"
      style={{ background:T.n900, padding:'150px 48px 90px', position:'relative', overflow:'hidden' }}>
      <div aria-hidden="true" style={{ position:'absolute', inset:0,
        backgroundImage:"url('https://images.unsplash.com/photo-1497366216548-37526070297c?w=1600&auto=format&fit=crop&q=60')",
        backgroundSize:'cover', backgroundPosition:'center', opacity:0.13 }}/>
      <div aria-hidden="true" style={{ position:'absolute', top:'-20%', right:'-8%', width:460, height:460,
        background:'radial-gradient(circle, rgba(43,181,160,0.22) 0%, transparent 65%)', pointerEvents:'none' }}/>
      <div style={{ maxWidth:1240, margin:'0 auto', position:'relative' }}>
        <div style={{ maxWidth:720 }}>
          <span style={{ display:'inline-flex', alignItems:'center', gap:8, fontFamily:T.bd, fontSize:11.5,
            fontWeight:700, letterSpacing:'0.12em', textTransform:'uppercase', color:T.teal,
            background:'rgba(43,181,160,0.12)', border:'1px solid rgba(43,181,160,0.32)',
            padding:'6px 14px', borderRadius:30, marginBottom:22 }}>Contact Us</span>
          <h1 style={{ fontFamily:T.hd, fontWeight:900, fontSize:'clamp(34px,5vw,60px)', color:'#fff',
            lineHeight:1.05, letterSpacing:'-0.035em', margin:'0 0 20px', textWrap:'balance' }}>
            Let's Discuss Your Technology Needs
          </h1>
          <p style={{ fontFamily:T.bd, fontSize:17, color:'rgba(255,255,255,0.66)', lineHeight:1.75,
            margin:0, maxWidth:580, textWrap:'pretty' }}>
            Tell us where your IT stands today and where you want it to be. A senior engineer — not a
            call-center rep — reviews every request and responds within one business hour.
          </p>
        </div>
        <div style={{ display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:20, marginTop:56 }} className="pns-grid-resp">
          {CONTACT_CARDS.map(c => {
            const inner = (
              <React.Fragment>
                <div style={{ fontFamily:T.bd, fontSize:11.5, fontWeight:700, letterSpacing:'0.1em',
                  textTransform:'uppercase', color:T.teal, marginBottom:10 }}>{c.k}</div>
                <div style={{ fontFamily:T.hd, fontWeight:700, fontSize:17, color:'#fff',
                  marginBottom:8, letterSpacing:'-0.01em', wordBreak:'break-word' }}>{c.v}</div>
                <div style={{ fontFamily:T.bd, fontSize:13, color:'rgba(255,255,255,0.5)', lineHeight:1.6 }}>{c.sub}</div>
              </React.Fragment>
            );
            const box = {
              background:'rgba(255,255,255,0.05)', border:'1px solid rgba(255,255,255,0.12)',
              borderRadius:16, padding:'26px 24px', textDecoration:'none', display:'block',
              transition:'all 0.28s ease',
            };
            const hov = e => { e.currentTarget.style.background='rgba(255,255,255,0.09)'; e.currentTarget.style.borderColor='rgba(43,181,160,0.45)'; e.currentTarget.style.transform='translateY(-4px)'; };
            const out = e => { e.currentTarget.style.background='rgba(255,255,255,0.05)'; e.currentTarget.style.borderColor='rgba(255,255,255,0.12)'; e.currentTarget.style.transform='translateY(0)'; };
            return c.href
              ? <a key={c.k} href={c.href} style={box} onMouseEnter={hov} onMouseLeave={out}>{inner}</a>
              : <div key={c.k} style={box}>{inner}</div>;
          })}
        </div>
      </div>
    </section>
  );
}

function PNSContactPage() {
  useEffect(() => {
    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);
  }, []);

  return (
    <div style={{ overflowX:'hidden' }}>
      <PNSNav />
      <ContactHero />
      <PNSContact standalone={true} />
      <PNSFooter />
    </div>
  );
}

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