// pns-4.jsx — Pricing · Contact · Footer
const { useState, useRef } = React;
const wpS = window.pnsWP?.settings || {};
const T = window.PNST;
const { EyebrowBadge, SectionTitle, ImgPlaceholder } = window;

/* ── PRICING ─────────────────────────────────────────────────────── */
const PLANS_DEFAULT = [
  {
    name:'Essential', featured:false, monthlyPrice:99, annualPrice:79,
    unit:'per device/mo',
    desc:'Perfect for small businesses needing reliable IT foundations.',
    features:['24/7 System Monitoring','Helpdesk Support (Business Hours)','Patch Management','Antivirus & EDR Protection','Monthly Reporting'],
    cta:'Get Started', ctaLink:'#contact',
  },
  {
    name:'Professional', featured:true, monthlyPrice:149, annualPrice:119,
    unit:'per device/mo',
    desc:'Our most popular plan for growing businesses.',
    features:['Everything in Essential','24/7 Helpdesk Support','Advanced Cybersecurity Suite','Microsoft 365 Management','Network Monitoring & Management','Quarterly Business Reviews'],
    cta:'Get Started', ctaLink:'#contact',
  },
  {
    name:'Enterprise', featured:false, monthlyPrice:null, annualPrice:null,
    unit:'Custom pricing',
    desc:'Tailored solutions for complex or multi-location businesses.',
    features:['Everything in Professional','Dedicated Account Manager','On-Site Support Included','AI Automation Consulting','Custom SLA & Response Times','Priority 1-Hour Response'],
    cta:'Contact Us', ctaLink:'#contact',
  },
];
const P4_SITE = (window.pnsWP && window.pnsWP.siteUrl) || '';
const p4Url = (slug, file) => P4_SITE ? P4_SITE + slug + '/' : file;
const P4_CONTACT = p4Url('contact','Contact.html');

// Posts to the theme's REST endpoints (wp_mail server-side). Outside
// WordPress there is no endpoint, so the helper reports that honestly
// instead of showing a success screen that sent nothing.
async function pnsPost(route, body) {
  const base = window.pnsWP && window.pnsWP.restUrl;
  if (!base) return { ok:false, offline:true, message:'Preview mode — this form sends once the site is live on WordPress.' };
  try {
    const res = await fetch(base + route, {
      method:'POST',
      headers:{ 'Content-Type':'application/json', ...(window.pnsWP.nonce ? { 'X-WP-Nonce': window.pnsWP.nonce } : {}) },
      body: JSON.stringify(body),
    });
    let data = {};
    try { data = await res.json(); } catch (e) {}
    if (res.ok && data.ok !== false) return { ok:true };
    return { ok:false, message: data.message || 'Something went wrong. Please try again, or call us directly.' };
  } catch (err) {
    console.warn('[PNS] send failed:', err);
    return { ok:false, message:'Network error. Please try again, or email us directly.' };
  }
}
// Plan CTAs must go to the Contact page. A bare "#contact" anchor only resolves
// on the homepage, so it silently did nothing on /pricing/.
const _rawPlans = (window.pnsWP?.plans?.length>0) ? window.pnsWP.plans : PLANS_DEFAULT;
const PLANS = _rawPlans.map(p => ({
  ...p,
  ctaLink: (!p.ctaLink || p.ctaLink === '#contact' || p.ctaLink === '#') ? P4_CONTACT : p.ctaLink,
}));

function CheckMark({ featured }) {
  const c = featured ? T.teal : T.coral;
  return (
    <svg viewBox="0 0 16 16" style={{width:16,height:16,flexShrink:0}} fill="none">
      <circle cx="8" cy="8" r="7" fill={featured?'rgba(43,181,160,0.15)':'rgba(232,113,74,0.1)'} stroke={c} strokeWidth="1"/>
      <path d="M5 8l2 2 4-4" stroke={c} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  );
}

/* ── PRICING CARD (stacked animation) ───────────────────────────── */
function PricingCard({ plan, annual }) {
  const [hov, setHov] = useState(false);
  const price = annual ? plan.annualPrice : plan.monthlyPrice;
  const layer1 = plan.featured ? T.coral  : T.teal;
  const layer2 = plan.featured ? T.tealL  : T.blue;
  return (
    <div style={{ position:'relative', padding:12, cursor:'default' }}
      onMouseEnter={()=>setHov(true)} onMouseLeave={()=>setHov(false)}>
      <div style={{ position:'absolute', top:12, left:12, right:12, bottom:12,
        background:layer1, borderRadius:20,
        transform: hov?'rotate(4deg)':'rotate(0)',
        opacity: hov?0.9:0,
        transition:'transform 0.4s cubic-bezier(0.34,1.56,0.64,1), opacity 0.3s ease', zIndex:1 }}/>
      <div style={{ position:'absolute', top:12, left:12, right:12, bottom:12,
        background:layer2, borderRadius:20,
        transform: hov?'rotate(-3deg)':'rotate(0)',
        opacity: hov?0.6:0,
        transition:'transform 0.4s cubic-bezier(0.34,1.56,0.64,1) 0.04s, opacity 0.3s ease', zIndex:0 }}/>
      <div style={{ position:'relative', zIndex:2, borderRadius:20, overflow:'hidden',
        background: plan.featured ? T.n800 : T.white,
        border: plan.featured ? `1px solid rgba(43,181,160,0.2)` : `1px solid ${T.g200}`,
        boxShadow: hov ? '0 24px 60px rgba(0,0,0,0.32)' : plan.featured ? '0 20px 60px rgba(0,0,0,0.3)' : '0 2px 20px rgba(0,0,0,0.06)',
        transform: hov ? (plan.featured?'translateY(-8px) scale(1.04)':'translateY(-8px)') : (plan.featured?'scale(1.04)':'translateY(0)'),
        transition:'all 0.35s ease' }}>
        {plan.featured && (
          <div style={{ position:'absolute', top:16, right:16,
            background:`linear-gradient(135deg, ${T.teal}, ${T.tealL})`,
            color:'#fff', fontSize:10, fontWeight:700, padding:'4px 10px',
            borderRadius:20, fontFamily:T.bd, letterSpacing:'0.05em', zIndex:1 }}>MOST POPULAR</div>
        )}
        <div style={{ padding:'28px 28px 0', background: plan.featured ? T.n700 : T.g50 }}>
          <div style={{ fontFamily:T.hd, fontWeight:700, fontSize:20,
            color: plan.featured ? T.white : T.g900, marginBottom:8 }}>{plan.name}</div>
          <p style={{ fontFamily:T.bd, fontSize:13, color: plan.featured ? 'rgba(255,255,255,0.5)' : T.g500,
            lineHeight:1.5, margin:'0 0 20px', textWrap:'pretty' }}>{plan.desc}</p>
          <div style={{ display:'inline-flex', alignItems:'baseline', gap:4,
            background: plan.featured ? `linear-gradient(135deg,${T.teal},${T.tealL})` : `linear-gradient(135deg,${T.coral},${T.coralL})`,
            borderRadius:12, padding:'14px 20px', marginBottom:24, width:'100%', justifyContent:'center' }}>
            {price ? (
              <>
                <span style={{ fontSize:14, fontWeight:600, color:'#fff', fontFamily:T.bd, alignSelf:'flex-start', marginTop:4 }}>$</span>
                <span style={{ fontSize:40, fontWeight:800, color:'#fff', fontFamily:T.hd, lineHeight:1 }}>{price}</span>
                <span style={{ fontSize:12, color:'rgba(255,255,255,0.75)', fontFamily:T.bd }}>{plan.unit}</span>
              </>
            ) : (
              <span style={{ fontSize:22, fontWeight:700, color:'#fff', fontFamily:T.hd }}>Custom Quote</span>
            )}
          </div>
        </div>
        <div style={{ padding:'20px 28px 28px' }}>
          <div style={{ display:'flex', flexDirection:'column', gap:10, marginBottom:24 }}>
            {plan.features.map((f,j) => (
              <div key={j} style={{ display:'flex', alignItems:'center', gap:10 }}>
                <CheckMark featured={plan.featured}/>
                <span style={{ fontFamily:T.bd, fontSize:13.5, color: plan.featured?'rgba(255,255,255,0.7)':T.g700 }}>{f}</span>
              </div>
            ))}
          </div>
          <a href={plan.ctaLink}
            style={{ display:'block', textAlign:'center', padding:'13px', borderRadius:10,
              fontSize:14, fontWeight:700, textDecoration:'none', fontFamily:T.bd,
              transition:'all 0.25s ease',
              background: plan.featured ? T.coral : 'transparent',
              color: plan.featured ? '#fff' : T.g700,
              border: plan.featured ? 'none' : `1.5px solid ${T.g200}` }}
            onMouseEnter={e=>{ e.currentTarget.style.background=plan.featured?T.coralL:T.n800; e.currentTarget.style.color='#fff'; e.currentTarget.style.borderColor=T.n800; e.currentTarget.style.transform='translateY(-2px)'; if(plan.featured) e.currentTarget.style.boxShadow=`0 8px 24px rgba(232,113,74,0.38)`; }}
            onMouseLeave={e=>{ e.currentTarget.style.background=plan.featured?T.coral:'transparent'; e.currentTarget.style.color=plan.featured?'#fff':T.g700; e.currentTarget.style.borderColor=plan.featured?'none':T.g200; e.currentTarget.style.transform='translateY(0)'; e.currentTarget.style.boxShadow='none'; }}>
            {plan.cta}
          </a>
        </div>
      </div>
    </div>
  );
}

function PNSPricing() {
  const [annual, setAnnual] = useState(false);
  return (
    <section id="pricing" data-screen-label="Pricing" style={{ background:T.g50, padding:'100px 48px', position:'relative', overflow:'hidden' }}>
      <div aria-hidden="true" style={{ position:'absolute', inset:0,
        backgroundImage:`url('${window.pnsWP?.images?.['1558618666-fcd25c85cd64']||'https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=1600&auto=format&fit=crop&q=50'}')`,
        backgroundSize:'cover', backgroundPosition:'center', opacity:0.04, zIndex:0 }}/>
      <div style={{ maxWidth:1240, margin:'0 auto', position:'relative', zIndex:1 }}>
        {/* Header */}
        <div style={{ textAlign:'center', marginBottom:52 }} className="pns-fade-up">
          <EyebrowBadge variant="dark">Pricing</EyebrowBadge>
          <SectionTitle>{wpS.pricingHeadline||'Flexible Plans for Every Business.'}</SectionTitle>
          <p style={{ fontFamily:T.bd, fontSize:16, color:T.g500, maxWidth:520, margin:'0 auto 28px', lineHeight:1.7, textWrap:'pretty' }}>
            {wpS.pricingBody||'Transparent pricing with no hidden fees. All plans include our core monitoring and helpdesk services.'}
          </p>
          {/* Toggle */}
          <div style={{ display:'inline-flex', alignItems:'center', gap:12,
            background:T.g100, border:`1px solid ${T.g200}`, borderRadius:40, padding:'6px 8px' }}>
            <button onClick={()=>setAnnual(false)}
              style={{ padding:'7px 18px', borderRadius:32, border:'none', cursor:'pointer', fontFamily:T.bd,
                fontSize:13, fontWeight:600, transition:'all 0.25s ease',
                background: !annual ? T.white : 'transparent',
                color: !annual ? T.g900 : T.g500,
                boxShadow: !annual ? '0 2px 8px rgba(0,0,0,0.08)' : 'none' }}>
              Monthly
            </button>
            <button onClick={()=>setAnnual(true)}
              style={{ padding:'7px 18px', borderRadius:32, border:'none', cursor:'pointer', fontFamily:T.bd,
                fontSize:13, fontWeight:600, transition:'all 0.25s ease', display:'flex', alignItems:'center', gap:8,
                background: annual ? T.white : 'transparent',
                color: annual ? T.g900 : T.g500,
                boxShadow: annual ? '0 2px 8px rgba(0,0,0,0.08)' : 'none' }}>
              Annual
              <span style={{ background:T.teal, color:'#fff', fontSize:10, fontWeight:700,
                padding:'2px 7px', borderRadius:10, letterSpacing:'0.03em' }}>-20%</span>
            </button>
          </div>
        </div>
        {/* Cards */}
        <div style={{ display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:0, alignItems:'start' }}
          className="pns-grid-3-pricing">
          {PLANS.map((plan,i) => (
            <div key={plan.name} className="pns-fade-up" style={{ animationDelay:`${i*0.1}s` }}>
              <PricingCard plan={plan} annual={annual}/>
            </div>
          ))}
        </div>
        <p className="pns-fade-up" style={{ textAlign:'center', fontFamily:T.bd, fontSize:13, color:T.g400, marginTop:28 }}>
          {wpS.pricingDisclaimer||'All plans billed per managed device. Contact us for volume discounts. No long-term contracts required.'}
        </p>
      </div>
    </section>
  );
}
window.PNSPricing = PNSPricing;

/* ── CONTACT ──────────────────────────────────────────────────────── */
// Email delivery: wp_mail() via WordPress REST API — no EmailJS needed

// ─── reCAPTCHA v3 ────────────────────────────────────────────────────
// To activate: replace with your site key from console.cloud.google.com,
// then add <script src="https://www.google.com/recaptcha/api.js?render=SITE_KEY">
// to Premier Network Solutions.html. The token is sent inside the payload.
const RECAPTCHA_KEY = 'YOUR_RECAPTCHA_V3_SITE_KEY';

const CONTACT_SERVICES = [
  'Managed IT Services','AI Solutions','Cybersecurity','Microsoft 365',
  'Network Infrastructure','Website Development','SEO Services',
  'IT Consulting','Backup & Monitoring','Other / Not sure yet',
];
const CONTACT_EMP = ['1–10','11–25','26–50','51–100','101–250','250+'];

function PNSContact({ standalone = false }) {
  const [form, setForm] = useState({
    firstName:'', lastName:'', company:'', email:'', phone:'',
    service:'', employees:'', message:'',
    _hp: '',   // honeypot — never shown to humans
  });
  const [errors, setErrors]  = useState({});
  const [status, setStatus]  = useState('idle'); // idle | submitting | success
  const [sendError, setSendError] = useState('');

  const upd = (k) => (ev) => {
    setForm(f  => ({...f,  [k]: ev.target.value}));
    setErrors(e => ({...e, [k]: ''}));
  };

  const validate = () => {
    const e = {};
    if (!form.firstName.trim()) e.firstName = 'First name required';
    if (!form.lastName.trim())  e.lastName  = 'Last name required';
    if (!form.email.trim())     e.email     = 'Email required';
    else if (!/^[^@]+@[^@]+\.[^@]+$/.test(form.email)) e.email = 'Enter a valid email';
    if (!form.message.trim())   e.message   = 'Please include a message';
    return e;
  };

  const submit = async (ev) => {
    ev.preventDefault();
    if (form._hp) return;                  // honeypot triggered — discard silently
    const e = validate();
    if (Object.keys(e).length) { setErrors(e); return; }
    setSendError('');
    setStatus('submitting');

    // CRM-ready field names (map directly to HubSpot / Zoho / Salesforce / Mailchimp)
    const payload = {
      firstname:    form.firstName,
      lastname:     form.lastName,
      // camelCase aliases — the pns-core plugin's endpoint requires these names
      firstName:    form.firstName,
      lastName:     form.lastName,
      full_name:    `${form.firstName} ${form.lastName}`,
      company:      form.company   || '—',
      email:        form.email,
      phone:        form.phone     || '—',
      service:      form.service   || '—',
      employees:    form.employees || '—',
      message:      form.message,
      submitted_at: new Date().toLocaleString('en-US', {
        timeZone:'America/Los_Angeles', dateStyle:'full', timeStyle:'short',
      }),
      to_email:  'info@premiernetworksolutions.com',
      reply_to:  form.email,
    };

    payload._hp = form._hp;
    payload.page_url = window.location.href;

    const res = await pnsPost('contact', payload);
    if (res.ok) { setStatus('success'); return; }
    setSendError(res.message);
    setStatus('idle');
  };

  // Shared base style for inputs / textareas / selects
  const base = (hasErr) => ({
    width:'100%', fontFamily:T.bd, fontSize:14, color:'#fff', outline:'none',
    boxSizing:'border-box', background:'rgba(255,255,255,0.11)', display:'block',
    border:`1.5px solid ${hasErr ? 'rgba(255,205,185,0.9)' : 'rgba(255,255,255,0.2)'}`,
    borderRadius:9, padding:'11px 14px', transition:'border-color 0.2s',
  });
  const onFoc = (e) => { e.target.style.borderColor = 'rgba(255,255,255,0.65)'; };
  const onBlr = (e, hasErr) => { e.target.style.borderColor = hasErr ? 'rgba(255,205,185,0.9)' : 'rgba(255,255,255,0.2)'; };

  // Plain-function field helpers (not React components — avoids remount/focus loss)
  const F = (k, ph, type='text') => (
    <div>
      <input id={k === 'firstName' ? 'pns-firstName' : undefined}
        type={type} value={form[k]} onChange={upd(k)} placeholder={ph}
        style={base(!!errors[k])}
        onFocus={onFoc} onBlur={e => onBlr(e, !!errors[k])} />
      {errors[k] && <span style={{fontSize:11, color:'rgba(255,225,210,1)', fontFamily:T.bd, marginTop:3, display:'block'}}>{errors[k]}</span>}
    </div>
  );
  const S = (k, ph, opts) => (
    <select value={form[k]} onChange={upd(k)}
      style={{...base(false), appearance:'none', cursor:'pointer',
        color: form[k] ? '#fff' : 'rgba(255,255,255,0.48)',
        backgroundImage:`url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7'%3E%3Cpath d='M1 1l4 4 4-4' stroke='rgba(255,255,255,0.55)' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E")`,
        backgroundRepeat:'no-repeat', backgroundPosition:'right 13px center'}}>
      <option value="" disabled>{ph}</option>
      {opts.map(o => <option key={o} value={o} style={{background:T.n800, color:'#fff'}}>{o}</option>)}
    </select>
  );

  return (
    <section id="contact" data-screen-label="Contact"
      style={{background:T.white, padding:'100px 48px 0', position:'relative', overflow:'hidden'}}>
      <div style={{position:'absolute', bottom:0, left:0, right:0, height:'50%', background:T.n900, zIndex:0}}/>
      <div style={{maxWidth:1200, margin:'0 auto', position:'relative', zIndex:1}}>
        <div style={{borderRadius:24, overflow:'hidden', boxShadow:'0 24px 80px rgba(0,0,0,0.18)',
          display:'grid', gridTemplateColumns:'1fr 1fr'}} className="pns-contact-grid">

          {/* Image side */}
          <div style={{position:'relative', minHeight:580, overflow:'hidden', flexShrink:0}}>
            <img src={window.pnsWP?.images?.['1573496359142-b8d87734a5a2']||"https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?w=900&auto=format&fit=crop&q=80"}
              alt="Premier Network Solutions enterprise data center infrastructure"
              loading="lazy"
              style={{position:'absolute', inset:0, width:'100%', height:'100%', objectFit:'cover', display:'block'}}/>
          </div>

          {/* Form side */}
          <div style={{background:`linear-gradient(160deg, ${T.coral} 0%, #c75d35 100%)`, padding:'40px 36px 44px'}}>
            <div className="pns-fade-up">
              <EyebrowBadge variant="teal">Get in Touch</EyebrowBadge>
              <h2 style={{fontFamily:T.hd, fontWeight:800, fontSize:'clamp(20px,2.3vw,30px)',
                color:'#fff', margin:'0 0 6px', lineHeight:1.15, letterSpacing:'-0.02em'}}>
                {(() => {
                  const _t = wpS.contactHeadline||"Let's Discuss Your Technology Needs";
                  const _u = (window.pnsWP?.siteUrl ? window.pnsWP.siteUrl + 'contact/' : 'Contact.html');
                  return standalone ? _t : (
                    <a href={_u} style={{color:'#fff', textDecoration:'none', transition:'opacity 0.2s'}}
                      onMouseEnter={e=>{e.currentTarget.style.opacity='0.78'; e.currentTarget.style.textDecoration='underline'; e.currentTarget.style.textUnderlineOffset='4px';}}
                      onMouseLeave={e=>{e.currentTarget.style.opacity='1'; e.currentTarget.style.textDecoration='none';}}>{_t}</a>
                  );
                })()}
              </h2>
              <p style={{fontFamily:T.bd, fontSize:13, color:'rgba(255,255,255,0.7)', margin:'0 0 20px', lineHeight:1.55}}>
                {wpS.contactBody||"Reach out and we'll respond within one business hour."}
              </p>
            </div>

            {status === 'success' ? (
              <div style={{background:'rgba(255,255,255,0.12)', borderRadius:16, padding:'36px 24px',
                textAlign:'center', border:'1px solid rgba(255,255,255,0.22)'}}>
                <div style={{width:60, height:60, borderRadius:'50%',
                  background:'rgba(43,181,160,0.25)', border:'2px solid rgba(43,181,160,0.6)',
                  display:'flex', alignItems:'center', justifyContent:'center', margin:'0 auto 18px'}}>
                  <svg viewBox="0 0 24 24" fill="none" style={{width:28, height:28}}>
                    <path d="M5 12l5 5L20 7" stroke="#fff" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"/>
                  </svg>
                </div>
                <div style={{fontFamily:T.hd, fontWeight:700, fontSize:20, color:'#fff', marginBottom:10}}>
                  Request Submitted!
                </div>
                <p style={{fontFamily:T.bd, fontSize:14, color:'rgba(255,255,255,0.82)', lineHeight:1.7, margin:0}}>
                  Thank you! Your request has been submitted successfully. A member of our team will contact you shortly.
                </p>
              </div>
            ) : (
              <form onSubmit={submit} noValidate style={{display:'flex', flexDirection:'column', gap:10}}>

                {/* Honeypot — invisible to humans, catches bots */}
                <input type="text" name="_hp" value={form._hp} onChange={upd('_hp')}
                  style={{position:'absolute', left:'-9999px', opacity:0, pointerEvents:'none'}}
                  tabIndex={-1} autoComplete="off" aria-hidden="true" />

                <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:9}} className="pns-contact-2col">
                  {F('firstName', 'First Name *')}
                  {F('lastName',  'Last Name *')}
                </div>
                <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:9}} className="pns-contact-2col">
                  {F('email', 'Email Address *', 'email')}
                  {F('phone', 'Phone Number',    'tel')}
                </div>
                <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:9}} className="pns-contact-2col">
                  {F('company', 'Company Name')}
                  {S('service', 'Service Needed ▾', CONTACT_SERVICES)}
                </div>
                {S('employees', 'Number of Employees ▾', CONTACT_EMP)}
                <div>
                  <textarea value={form.message} onChange={upd('message')}
                    placeholder="How can we help you? *" rows={4}
                    style={{...base(!!errors.message), resize:'vertical'}}
                    onFocus={onFoc} onBlur={e => onBlr(e, !!errors.message)}/>
                  {errors.message && <span style={{fontSize:11, color:'rgba(255,225,210,1)', fontFamily:T.bd, marginTop:3, display:'block'}}>{errors.message}</span>}
                </div>

                {sendError && (
                  <p role="alert" style={{fontFamily:T.bd, fontSize:13, lineHeight:1.55, color:'#fff',
                    background:'rgba(0,0,0,0.22)', border:'1px solid rgba(255,255,255,0.25)',
                    borderRadius:9, padding:'11px 14px', margin:0}}>{sendError}</p>
                )}
                <button type="submit" disabled={status === 'submitting'}
                  style={{background:T.n800, color:'#fff', border:'none', padding:'13px 28px',
                    borderRadius:10, fontSize:15, fontWeight:700, fontFamily:T.bd,
                    cursor: status === 'submitting' ? 'wait' : 'pointer',
                    transition:'all 0.25s ease', marginTop:2, opacity: status === 'submitting' ? 0.72 : 1}}
                  onMouseEnter={e => { if (status !== 'submitting') { e.currentTarget.style.background=T.n700; e.currentTarget.style.transform='translateY(-2px)'; e.currentTarget.style.boxShadow='0 8px 24px rgba(0,0,0,0.3)'; }}}
                  onMouseLeave={e => { e.currentTarget.style.background=T.n800; e.currentTarget.style.transform='translateY(0)'; e.currentTarget.style.boxShadow='none'; }}>
                  {status === 'submitting' ? 'Sending…' : 'Send Message →'}
                </button>
                <p style={{fontFamily:T.bd, fontSize:11, color:'rgba(255,255,255,0.4)', margin:0}}>
                  Honeypot &amp; reCAPTCHA protected · Your data is never sold or shared.
                </p>
              </form>
            )}
          </div>
        </div>
      </div>
    </section>
  );
}
window.PNSContact = PNSContact;

/* ── FOOTER ──────────────────────────────────────────────────────── */
function PNSFooter() {
  const [email, setEmail] = useState('');
  const [subbed, setSubbed] = useState(false);
  const [subBusy, setSubBusy] = useState(false);
  const [subErr, setSubErr] = useState('');
  const qLinks = ['Home','About','Portfolio','Services','Pricing','Team','Why Us','Contact'];
  const services = ['Managed IT Services','Cybersecurity','Cloud Services','Microsoft 365','Network Infrastructure','Website Development','SEO Services'];
  return (
    <footer data-screen-label="Footer" style={{ background:'linear-gradient(160deg, #ecf1f9 0%, #e7edf7 55%, #ecf0f8 100%)', padding:'72px 48px 0', position:'relative', overflow:'hidden', borderTop:'2px solid rgba(43,181,160,0.22)' }}>
      <div style={{ position:'absolute', bottom:0, left:'-5%', width:340, height:340,
        background:`radial-gradient(circle, rgba(43,181,160,0.13) 0%, transparent 65%)`, pointerEvents:'none' }}/>
      <div style={{ position:'absolute', top:0, right:'-5%', width:280, height:280,
        background:`radial-gradient(circle, rgba(232,113,74,0.09) 0%, transparent 65%)`, pointerEvents:'none' }}/>
      <div style={{ maxWidth:1240, margin:'0 auto' }}>
        <div style={{ display:'grid', gridTemplateColumns:'1.4fr 1fr 1fr 1.2fr', gap:48, paddingBottom:60,
          borderBottom:`1px solid rgba(12,30,50,0.09)` }} className="pns-footer-grid">
          {/* Brand */}
          <div>
            <img
              src={window.pnsWP?.logoUrl||"uploads/logo-1781485796573.png"}
              alt="Premier Network Solutions"
              style={{ height:42, width:'auto', display:'block', marginBottom:20 }}/>
            <p style={{ fontFamily:T.bd, fontSize:13.5, color:T.g500, lineHeight:1.7,
              margin:'0 0 24px', maxWidth:260, textWrap:'pretty' }}>
              {wpS.footerTagline||'Managed IT Services & Technology Solutions for Southern California Businesses.'}
            </p>
            <div style={{ display:'flex', gap:10 }}>
              {[{k:'li',u:wpS.socialLI||'#'},{k:'tw',u:wpS.socialTW||'#'},{k:'fb',u:wpS.socialFB||'#'},{k:'ig',u:wpS.socialIG||'#'}].map(({k:icon,u:href}) => (
                <a key={icon} href={href}
                  style={{ width:36, height:36, borderRadius:8,
                    background:'rgba(12,30,50,0.06)',
                    border:'1px solid rgba(12,30,50,0.14)',
                    display:'flex', alignItems:'center', justifyContent:'center',
                    color:T.g500, textDecoration:'none', transition:'all 0.25s ease',
                    fontSize:12, fontWeight:700, fontFamily:T.hd }}
                  onMouseEnter={e=>{
                    e.currentTarget.style.background=T.coral;
                    e.currentTarget.style.borderColor=T.coral;
                    e.currentTarget.style.color='#fff';
                    e.currentTarget.style.transform='translateY(-3px)';
                    e.currentTarget.style.boxShadow=`0 6px 20px rgba(232,113,74,0.35)`;
                  }}
                  onMouseLeave={e=>{
                    e.currentTarget.style.background='rgba(12,30,50,0.06)';
                    e.currentTarget.style.borderColor='rgba(12,30,50,0.14)';
                    e.currentTarget.style.color=T.g500;
                    e.currentTarget.style.transform='translateY(0)';
                    e.currentTarget.style.boxShadow='none';
                  }}>
                  {icon.toUpperCase()}
                </a>
              ))}
            </div>
          </div>
          {/* Quick Links */}
          <div>
            <h4 style={{ fontFamily:T.hd, fontWeight:700, fontSize:14, color:T.coral, marginBottom:20,
              letterSpacing:'0.04em', textTransform:'uppercase' }}>Quick Links</h4>
            <div style={{ display:'flex', flexDirection:'column', gap:10 }}>
              {qLinks.map(l=>(
                <a key={l} href={(() => { const m={Services:'services',About:'about',Portfolio:'portfolio',Team:'team',Pricing:'pricing',Contact:'contact','Why Us':'why-us'}; const fb={Services:'Services.html',About:'About.html',Portfolio:'Portfolio.html',Team:'Team.html',Pricing:'Pricing.html',Contact:'Contact.html','Why Us':'Why%20Us.html'}; return l==='Home' ? (P4_SITE||'Premier%20Network%20Solutions.html') : p4Url(m[l], fb[l]); })()}
                  style={{ fontFamily:T.bd, fontSize:13.5, color:T.g500,
                    textDecoration:'none', transition:'color 0.2s ease', lineHeight:1 }}
                  onMouseEnter={e=>e.currentTarget.style.color=T.coral}
                  onMouseLeave={e=>e.currentTarget.style.color=T.g500}>
                  {l}
                </a>
              ))}
            </div>
          </div>
          {/* Contact */}
          <div>
            <h4 style={{ fontFamily:T.hd, fontWeight:700, fontSize:14, color:T.coral, marginBottom:20,
              letterSpacing:'0.04em', textTransform:'uppercase' }}>Contact</h4>
            <div style={{ display:'flex', flexDirection:'column', gap:14 }}>
              {[
                { icon:'📍', text:wpS.address||'Southern California' },
                { icon:'📞', text:wpS.phone||'+1(747) 335-2335' },
                { icon:'✉️', text:wpS.email||'info@premiernetworksolutions.com' },
              ].map((c,i)=>(
                <div key={i} style={{ display:'flex', alignItems:'flex-start', gap:10 }}>
                  <span style={{fontSize:14,flexShrink:0,marginTop:1}}>{c.icon}</span>
                  <span style={{ fontFamily:T.bd, fontSize:13, color:T.g500, lineHeight:1.5 }}>{c.text}</span>
                </div>
              ))}
            </div>
          </div>
          {/* Newsletter */}
          <div>
            <h4 style={{ fontFamily:T.hd, fontWeight:700, fontSize:14, color:T.coral, marginBottom:20,
              letterSpacing:'0.04em', textTransform:'uppercase' }}>Newsletter</h4>
            <p style={{ fontFamily:T.bd, fontSize:13.5, color:T.g500, lineHeight:1.65,
              margin:'0 0 18px', textWrap:'pretty' }}>
              {wpS.footerNewsletter||'Stay updated with the latest in IT security, cloud technology, and business solutions.'}
            </p>
            {subbed ? (
              <div style={{ fontFamily:T.bd, fontSize:13, color:T.teal, fontWeight:600 }}>✓ You're subscribed!</div>
            ) : (<>
              <div style={{ display:'flex', gap:0, background:'rgba(255,255,255,0.85)',
                border:`1px solid rgba(12,30,50,0.14)`, borderRadius:10, overflow:'hidden',
                boxShadow:'0 2px 8px rgba(12,30,50,0.06)' }}>
                <input type="email" value={email} onChange={e=>setEmail(e.target.value)}
                  placeholder="Your email address"
                  style={{ flex:1, background:'transparent', border:'none', padding:'11px 14px',
                    fontFamily:T.bd, fontSize:13, color:T.n700, outline:'none' }}/>
                <button onClick={async ()=>{
                    if(!/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(email)){ setSubErr('Please enter a valid email address.'); return; }
                    setSubErr(''); setSubBusy(true);
                    const r = await pnsPost('subscribe', { email });
                    setSubBusy(false);
                    if (r.ok) { setSubbed(true); setEmail(''); } else { setSubErr(r.message); }
                  }}
                  disabled={subBusy}
                  style={{ background:T.coral, border:'none', color:'#fff', padding:'11px 16px',
                    fontFamily:T.bd, fontSize:12, fontWeight:700, cursor:'pointer',
                    letterSpacing:'0.04em', transition:'background 0.2s' }}
                  onMouseEnter={e=>e.currentTarget.style.background=T.coralL}
                  onMouseLeave={e=>e.currentTarget.style.background=T.coral}>
                  {subBusy ? '…' : 'SUBMIT'}
                </button>
              </div>
              {subErr && <p style={{ fontFamily:T.bd, fontSize:12, color:T.coral, margin:'8px 0 0' }}>{subErr}</p>}
            </>)}
          </div>
        </div>
        {/* Bottom bar */}
        <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between',
          padding:'20px 0', flexWrap:'wrap', gap:12 }}>
          <span style={{ fontFamily:T.bd, fontSize:12, color:T.g400 }}>
            {wpS.copyrightText||('© '+new Date().getFullYear()+' Premier Network Solutions. All Rights Reserved.')}
          </span>
          <div style={{ display:'flex', gap:20 }}>
            {[
              {l:'Privacy Policy',   href:p4Url('privacy-policy',   'Privacy%20Policy.html')},
              {l:'Terms of Service', href:p4Url('terms-of-service', 'Terms%20of%20Service.html')},
              {l:'SMS Consent',      href:p4Url('sms-consent',      'SMS%20Consent.html')},
            ].map(({l,href})=>(
              <a key={l} href={href} style={{ fontFamily:T.bd, fontSize:12, color:T.g400,
                textDecoration:'none', transition:'color 0.2s' }}
                onMouseEnter={e=>e.currentTarget.style.color=T.g700}
                onMouseLeave={e=>e.currentTarget.style.color=T.g400}>
                {l}
              </a>
            ))}
          </div>
        </div>
      </div>
    </footer>
  );
}
window.PNSFooter = PNSFooter;