// pns-faq.jsx — per-page FAQ accordion
const { useState: useFaqState } = React;
const FT = window.PNST;
const faqEyebrow = window.EyebrowBadge;
const faqTitle = window.SectionTitle;

const PNS_FAQ = {
  services: [
    ['What services does Premier Network Solutions actually cover?','We cover the full stack: managed IT and helpdesk, cybersecurity, cloud and Microsoft 365, network infrastructure, backup and disaster recovery, website development, SEO, and strategic IT consulting. Most clients start with managed IT and add services as they grow.'],
    ['Do I have to buy every service, or can I pick just one?','You can start with a single service. Many clients begin with managed IT or cybersecurity and expand later. We will never bundle something you do not need in order to hit a bigger number.'],
    ['How fast do you respond when something breaks?','Standard helpdesk tickets are answered within one business hour. Critical outages that affect your whole team are escalated immediately, 24/7, to a senior engineer — not a first-line script reader.'],
    ['Do you support remote and hybrid teams?','Yes. Remote endpoint management, secure VPN and zero-trust access, cloud identity, and device provisioning for new hires anywhere in the country are all part of standard managed IT.'],
    ['Can you work alongside our existing internal IT person?','Absolutely. A large share of our clients have one internal IT generalist and use us as the specialist bench — security, cloud architecture, escalations, and after-hours coverage.'],
    ['What happens during onboarding?','We run a full audit of your network, devices, licensing, and security posture, document everything, deploy monitoring agents, and hand you a prioritized remediation plan. Typical onboarding takes two to three weeks.'],
    ['Do you handle hardware procurement?','Yes. We source workstations, servers, firewalls, switches, and access points at partner pricing, then stage and deploy them configured to your standards.'],
    ['Which industries do you work with most?','Professional services, healthcare, legal, finance, manufacturing, and nonprofits across Southern California. Regulated environments are a core strength — we build to HIPAA, PCI, and CMMC requirements.'],
    ['Can you take over from our current IT provider?','Yes, and it is a routine transition. We handle credential handover, documentation recovery, and license transfers, and we run parallel coverage so you are never left without support during the switch.'],
    ['How do I know which service I need?','Book a free assessment. We review your environment and tell you what actually needs attention first — including the things that can wait. No obligation and no pressure.'],
  ],
  about: [
    ['How long has Premier Network Solutions been operating?','We have supported Southern California businesses for over a decade, growing entirely through referrals and long-term client relationships rather than aggressive sales.'],
    ['Where are you located and who do you serve?','We are based in Southern California and serve Los Angeles, Orange County, Ventura, and the Inland Empire on site, with remote support available nationwide.'],
    ['What makes you different from a typical IT vendor?','Vendors close tickets. We manage outcomes. Every client has a named engineer who knows the environment, plus quarterly reviews where we discuss roadmap and risk, not just ticket counts.'],
    ['How large is your team?','We are a deliberately senior team. Rather than staffing a large tier-one call center, we keep certified engineers on the front line so problems are solved on the first contact.'],
    ['Are your engineers certified?','Yes. Our team holds Microsoft, Cisco, CompTIA, and cloud-platform certifications, and we fund ongoing training because the threat landscape does not stand still.'],
    ['Do you work with businesses outside Southern California?','Our on-site coverage is regional, but fully remote-managed clients elsewhere in the United States are supported through our remote operations center.'],
    ['What size company is the right fit?','Most of our clients run between 10 and 250 employees. Below that, our essential plan still works well; above that, we design a custom co-managed arrangement.'],
    ['How do you handle confidentiality and access to our data?','Every engineer signs an NDA, access is least-privilege and logged, and administrative credentials are stored in an audited vault. You own your data and your documentation at all times.'],
    ['What is your approach to long-term IT planning?','We build a rolling three-year roadmap covering hardware lifecycle, license renewals, security posture, and budget, and we revisit it with you every quarter.'],
    ['How do I start a conversation with your team?','Call (747) 335-2335 or send a message through our contact page. A senior engineer — not a salesperson — will handle the first conversation.'],
  ],
  'why-us': [
    ['Why should we switch from break-fix to managed IT?','Break-fix rewards downtime: the provider earns more when things break. Managed IT is a flat monthly fee, so preventing problems is in everyone\u2019s interest. Clients typically see far fewer incidents within the first quarter.'],
    ['What does 24/7 monitoring actually catch?','Failing drives, backup errors, unusual login patterns, expiring certificates, capacity limits, and unpatched vulnerabilities — usually before anyone on your team notices a symptom.'],
    ['Will our costs be predictable?','Yes. Pricing is per managed device on a flat monthly rate. Labor, monitoring, patching, and helpdesk are included, so there is no incentive to inflate hours and no surprise invoices.'],
    ['Do we get a dedicated engineer or a random technician?','You get a named primary engineer plus a documented backup, both of whom know your environment. Escalations stay inside that team rather than restarting from scratch.'],
    ['What is your average resolution time?','Most helpdesk tickets are resolved on first contact within the same business hour. Complex infrastructure work is scheduled with you in advance so it never surprises your staff.'],
    ['How do you prevent security incidents rather than just react?','Layered defense: endpoint detection and response, email filtering, patch automation, MFA enforcement, least-privilege access, immutable backups, and quarterly security reviews with your leadership.'],
    ['Are we locked into a long-term contract?','No. We work month to month once onboarding is complete. Clients stay because leaving is not worth it, not because a contract prevents them from going.'],
    ['What happens if we are not satisfied?','We hand back complete documentation, credentials, and configurations so any provider can pick up cleanly. We would rather part well than hold a client hostage.'],
    ['How do you measure whether IT is actually improving?','Quarterly business reviews with real numbers: ticket volume trend, mean time to resolution, uptime, patch compliance, backup success rate, and security score.'],
    ['What does the first 90 days look like?','Weeks 1–3 are audit, documentation, and monitoring deployment. Weeks 4–8 close the highest-risk gaps. By day 90 you have a stabilized environment and a costed roadmap for the year ahead.'],
  ],
  portfolio: [
    ['What kinds of projects do you take on?','Network and infrastructure rebuilds, security hardening and compliance projects, cloud and Microsoft 365 migrations, office relocations, and custom web and platform development.'],
    ['How long does a typical infrastructure project take?','A single-site network rebuild usually runs four to eight weeks from assessment to cutover. Multi-site and compliance-driven projects are scoped individually.'],
    ['Do you work on fixed price or hourly?','Defined-scope projects are quoted at a fixed price so you know the number before work starts. Open-ended discovery or research work is billed hourly and capped by agreement.'],
    ['Can you migrate us to the cloud without downtime?','Migrations are staged and rehearsed, with cutover scheduled outside business hours. Most clients experience no perceptible downtime during a Microsoft 365 or server migration.'],
    ['Do you provide references from past projects?','Yes. We can connect you with clients in a similar industry and size range who have completed comparable work.'],
    ['What happens after a project is finished?','You receive full documentation, network diagrams, and credentials. Most clients move onto a managed plan so the new environment stays maintained rather than drifting.'],
    ['Can you handle an office move or a new build-out?','Yes — cabling, network design, ISP coordination, phone systems, access control, and workstation deployment, coordinated with your contractor timeline.'],
    ['Do you build custom software or just websites?','Both. We build marketing sites, client portals, internal tools, and integrations between line-of-business systems.'],
    ['Will our project need to pause our operations?','Rarely. We plan around your business hours and use phased cutovers so departments move one at a time rather than everyone at once.'],
    ['How do we get a project scoped and quoted?','Book an assessment. We survey the environment, define scope in writing, and return a fixed quote — typically within one week for standard projects.'],
  ],
  team: [
    ['Will we work with the same people every time?','Yes. You are assigned a named primary engineer and a documented backup, both familiar with your environment, so you are not re-explaining your setup on every ticket.'],
    ['What certifications does your team hold?','Microsoft, Cisco, CompTIA, and major cloud platform certifications, backed by funded ongoing training and internal security drills.'],
    ['Are your engineers based locally?','Yes. Our engineering team is based in Southern California, which is why on-site response within the region is same day or next business day.'],
    ['Do you outsource support overseas?','No. Support is handled by our own engineers. Nothing is offshored to a third-party call center.'],
    ['How experienced are the people answering the phone?','Front-line support is staffed by experienced engineers, not script readers. Most issues are resolved without escalation because the first person you reach can actually fix them.'],
    ['Who do we contact for strategic questions rather than tickets?','Each client has an account lead who runs quarterly business reviews, roadmap planning, and budget discussions separate from day-to-day support.'],
    ['What happens if our engineer is on vacation?','Your documented backup engineer steps in with full context. Documentation is maintained continuously so coverage never depends on one person\u2019s memory.'],
    ['Can we meet the team before signing on?','Yes. We introduce the engineers who would actually run your account during the assessment phase, not after the paperwork.'],
    ['How do you handle after-hours emergencies?','Critical incidents route to an on-call senior engineer 24/7. Emergency response is included on managed plans rather than billed as an extra.'],
    ['Do you provide training for our staff?','Yes. Security awareness training, Microsoft 365 onboarding sessions, and new-hire IT orientation are available and included on higher-tier plans.'],
  ],
  pricing: [
    ['How is your pricing structured?','Managed plans are billed per managed device at a flat monthly rate. That covers monitoring, patching, helpdesk, and standard remote support with no hourly surprises.'],
    ['What counts as a managed device?','Workstations, laptops, servers, and critical network appliances. Phones, printers, and peripherals are supported but not counted as billable devices.'],
    ['Is there a setup or onboarding fee?','Onboarding is quoted separately based on environment size and condition. For a typical small business it is a one-time fee covering audit, documentation, and agent deployment.'],
    ['What is the difference between the plans?','Higher tiers add faster response commitments, deeper security tooling, backup and disaster recovery, strategic planning sessions, and after-hours coverage. Every plan includes core monitoring and helpdesk.'],
    ['Do you offer discounts for annual billing?','Yes. Annual billing saves 20% compared to month-to-month on every plan.'],
    ['Are we locked into a contract?','No long-term contract is required. Managed plans run month to month after onboarding is complete.'],
    ['What is not included in a managed plan?','Hardware purchases, third-party software licensing, major project work such as migrations or office build-outs, and on-site visits beyond your plan allowance are quoted separately.'],
    ['Do you offer volume pricing?','Yes. Environments above roughly 50 managed devices move to volume pricing. Contact us for a tailored quote.'],
    ['Can we change plans later?','You can move up or down at any monthly renewal. There is no penalty for adjusting as your team grows or contracts.'],
    ['How do we get an exact quote for our business?','Book a free assessment. We count devices, review your environment, and return a written quote — usually within two business days.'],
  ],
};

function FaqItem({ q, a, open, onToggle, idx }) {
  const [hov, setHov] = useFaqState(false);
  return (
    <div style={{ borderBottom:`1px solid ${FT.g200}`, background: open ? FT.white : 'transparent',
      transition:'background 0.25s ease' }}>
      <button onClick={onToggle} aria-expanded={open}
        onMouseEnter={()=>setHov(true)} onMouseLeave={()=>setHov(false)}
        style={{ width:'100%', display:'flex', alignItems:'flex-start', gap:16, textAlign:'left',
          background:'none', border:'none', cursor:'pointer', padding:'22px 20px', minHeight:56,
          fontFamily:FT.hd, fontWeight:700, fontSize:'clamp(15px,1.5vw,17.5px)', lineHeight:1.45,
          letterSpacing:'-0.01em', color: open || hov ? FT.n900 : FT.g700, transition:'color 0.2s ease' }}>
        <span style={{ fontFamily:FT.bd, fontSize:12.5, fontWeight:700, color:FT.teal,
          flexShrink:0, paddingTop:4, minWidth:26, letterSpacing:'0.04em' }}>
          {String(idx+1).padStart(2,'0')}
        </span>
        <span style={{ flex:1, textWrap:'pretty' }}>{q}</span>
        <span aria-hidden="true" style={{ flexShrink:0, width:26, height:26, borderRadius:'50%',
          border:`1.5px solid ${open ? FT.coral : FT.g200}`, background: open ? FT.coral : 'transparent',
          display:'flex', alignItems:'center', justifyContent:'center', marginTop:1,
          transition:'all 0.28s ease', transform: open ? 'rotate(180deg)' : 'none' }}>
          <svg viewBox="0 0 12 8" fill="none" style={{ width:11, height:8 }}>
            <path d="M1 1.5L6 6.5L11 1.5" stroke={open ? '#fff' : FT.g500} strokeWidth="1.8"
              strokeLinecap="round" strokeLinejoin="round"/>
          </svg>
        </span>
      </button>
      {open && (
        <p className="pns-faq-answer" style={{ fontFamily:FT.bd, fontSize:15, lineHeight:1.75, color:FT.g500,
          margin:0, padding:'0 60px 24px 62px', textWrap:'pretty' }}>{a}</p>
      )}
    </div>
  );
}

function PNSFaq({ section = 'services', heading = 'Frequently Asked Questions' }) {
  const [open, setOpen] = useFaqState(null);
  const items = PNS_FAQ[section] || PNS_FAQ.services;
  const CONTACT_URL = (window.pnsWP && window.pnsWP.siteUrl) ? window.pnsWP.siteUrl + 'contact/' : 'Contact.html';
  const Eyebrow = faqEyebrow || window.EyebrowBadge;
  const Title = faqTitle || window.SectionTitle;
  return (
    <section id="faq" data-screen-label="FAQ" style={{ background:FT.g50, padding:'100px 48px' }}>
      <div style={{ maxWidth:900, margin:'0 auto' }}>
        <div style={{ textAlign:'center', marginBottom:44 }} className="pns-fade-up">
          <Eyebrow variant="dark">FAQ</Eyebrow>
          <Title>{heading}</Title>
          <p style={{ fontFamily:FT.bd, fontSize:16, color:FT.g500, maxWidth:520,
            margin:'0 auto', lineHeight:1.7, textWrap:'pretty' }}>
            Answers to the questions we hear most. Still unsure? A senior engineer will walk you through it.
          </p>
        </div>
        <div className="pns-fade-up pns-d1" style={{ border:`1px solid ${FT.g200}`, borderRadius:16,
          overflow:'hidden', background:FT.white, boxShadow:'0 12px 40px rgba(12,30,50,0.06)' }}>
          {items.map(([q,a],i) => (
            <FaqItem key={i} idx={i} q={q} a={a} open={open===i} onToggle={()=>setOpen(open===i?null:i)} />
          ))}
        </div>
        <div className="pns-fade-up pns-d2" style={{ display:'flex', flexWrap:'wrap', alignItems:'center',
          justifyContent:'center', gap:16, marginTop:36 }}>
          <p style={{ fontFamily:FT.bd, fontSize:15, color:FT.g500, margin:0 }}>
            Have a question that is not answered here?
          </p>
          <a href={CONTACT_URL} style={{ background:FT.coral, color:'#fff', padding:'13px 26px',
            borderRadius:10, fontSize:14, fontWeight:700, textDecoration:'none', fontFamily:FT.bd,
            display:'inline-flex', alignItems:'center', minHeight:48, transition:'all 0.25s ease' }}
            onMouseEnter={e=>{e.currentTarget.style.background=FT.coralL; e.currentTarget.style.transform='translateY(-2px)';}}
            onMouseLeave={e=>{e.currentTarget.style.background=FT.coral; e.currentTarget.style.transform='translateY(0)';}}>
            Ask Our Team →
          </a>
        </div>
      </div>
    </section>
  );
}
window.PNSFaq = PNSFaq;
