function FAQPage({ onContact }) {
  const groups = [
    {
      title: 'Working with Aurora',
      icon: 'compass',
      items: [
        { q:'Do you charge for the consultation?', a:<>No. The first call and a site visit within 25 miles of downtown Raleigh are free. You only pay once we agree on a written quote.</> },
        { q:'How big is your team?', a:<>One technical consultant doing every project, with a small bench of trusted electricians and specialists we coordinate with. We stay small on purpose — it's how we keep the quality up and the calls answered.</> },
        { q:'What does a typical timeline look like?', a:<>Websites are 4–8 weeks depending on scope. Email migrations are usually scoped in days, executed overnight. Network tune-ups and camera support visits are typically a single visit, scheduled within a week or two.</> },
        { q:'Do you take on emergency work?', a:<>Sometimes — depends on what's broken and our current bookings. Existing clients on a support plan get same-day-when-possible. New emergencies, we'll honestly tell you whether we're a fit.</> },
        { q:'Where do you work?', a:<>Headquartered in Raleigh. Primary service area: Wake, Durham, and Orange counties. We'll travel further for the right project — just ask.</> },
      ],
    },
    {
      title: 'Networks & UniFi®',
      icon: 'wifi',
      items: [
        { q:'Do you still install whole-home or whole-office networks?', a:<>No — we've focused the business on websites, email, and IT consulting. We still gladly do network work at the right size: tune-ups, dead-zone fixes, and small upgrades like adding an access point or replacing a router. For a full new install, we'll consult on the design and refer you to installers we trust.</> },
        { q:'Are you affiliated with Ubiquiti?', a:<>No. We're an independent consultant. UniFi® and UniFi Protect® are registered trademarks of Ubiquiti Inc. We work with their gear because it's the best at what it does, but we don't speak for them and they don't speak for us.</> },
        { q:'Can you fix dead zones without replacing everything?', a:<>Usually — a well-placed extra AP solves most of them. We'll tell you honestly whether you need one access point or bigger changes.</> },
        { q:'Someone else installed my UniFi system. Will you work on it?', a:<>Yes — that's most of what we do now. We'll assess what's there, clean it up, and either hand it back documented or keep an eye on it for you.</> },
        { q:'Will I have to manage the network myself?', a:<>Only if you want to. Everything is configured and documented at handoff — you don't have to touch the app. Optional monitoring plans let us watch it for you.</> },
      ],
    },
    {
      title: 'Cameras',
      icon: 'camera',
      items: [
        { q:'Do you install new camera systems?', a:<>Not anymore. If you're starting from scratch, we'll consult on the design — camera count, placement, storage — and refer you to installers we trust. Once it's in, we're happy to be the ones who keep it healthy.</> },
        { q:'Someone else installed my Protect system. Will you support it?', a:<>Yes — that's exactly what our camera service is now. Health checks, alert tuning, storage upgrades, refocusing, firmware, and remote-access setup for existing systems.</> },
        { q:'Will footage be stored in a cloud I don\'t control?', a:<>No. UniFi Protect records locally on hardware you own. You can opt into encrypted off-site backup if you want, but the default is fully local.</> },
        { q:'Can I view from my phone?', a:<>Yes. UniFi Protect is free on iOS and Android. Live, playback, clip download — no subscription.</> },
      ],
    },
    {
      title: 'Websites',
      icon: 'browser',
      items: [
        { q:'Why not WordPress?', a:<>It's overkill for most small-business sites and the maintenance tax is real. We build on modern static/headless stacks — faster, more secure, easier to keep healthy. If you're already on WordPress, we'll convert you.</> },
        { q:'Who owns the website?', a:<>You do. Your domain, your content, your code in a git repo. If we part ways, you walk away with everything.</> },
        { q:'Can you redo my existing site?', a:<>Yes. We rebuild while keeping URLs and SEO intact, or do a top-to-bottom refresh with proper 301 redirects.</> },
        { q:'Do you handle e-commerce?', a:<>Light e-commerce, yes (Shopify integration, small product catalogs). For complex stores we partner with a specialist — we'll make the warm intro.</> },
      ],
    },
    {
      title: 'Email & Business IT',
      icon: 'mail',
      items: [
        { q:'Google Workspace or Microsoft 365?', a:<>Depends on how your team already works. Word/Excel-heavy team: M365. Gmail/Docs-heavy team: Workspace. We'll ask 5 questions and recommend.</> },
        { q:'Will email be down during migration?', a:<>No. We cut MX over only after mailboxes are mirrored. Most migrations are seamless overnight cutovers with no missed email.</> },
        { q:'Can you help with the rest of our IT?', a:<>Yes — small business IT is part of the offering. New employee setup, password resets, MFA, lost-phone recovery, on-call help.</> },
        { q:'Do you do VoIP / phone systems?', a:<>Not directly. We partner with a VoIP specialist for businesses that need it and make the warm intro.</> },
      ],
    },
    {
      title: 'Pricing & billing',
      icon: 'bar-chart',
      items: [
        { q:'How do you quote?', a:<>Itemized, written, and bespoke. Any equipment at pass-through cost, labor priced separately, and any third-party costs (hosting, licenses) clearly broken out.</> },
        { q:'Do you accept credit card?', a:<>Yes, plus ACH and check. We invoice through QuickBooks. 50% deposit for projects over $3,000, balance on completion.</> },
        { q:'Are estimates binding?', a:<>The written quote is — barring scope changes you approve. If we discover something mid-project that changes the cost, we stop and re-quote before we keep going.</> },
        { q:'Do you do payment plans?', a:<>For larger projects, yes. Up to 4 equal monthly payments with no interest. We're happy to discuss.</> },
      ],
    },
  ];

  const [tab, setTab] = React.useState(groups[0].title);

  return (
    <main data-screen-label="FAQ">
      <PageIntro
        crumbs={[{label:'Home', to:'/'}, {label:'FAQ'}]}
        eyebrow="FAQ"
        title={<>Got questions? <span className="beat-aurora">We've got answers.</span></>}
        body="Browse by category, or just scroll. If you don't see your question, the contact form takes one minute."
      />

      <section className="section section--tight">
        <div className="container">
          <div className="cols-2" style={{'--cols':'260px 1fr', '--col-gap':'64px', alignItems:'flex-start'}}>
            <aside style={{position:'sticky', top: 'calc(var(--nav-h-desktop) + 24px)'}}>
              <div className="spaced-cap" style={{marginBottom:12}}>Categories</div>
              <nav style={{display:'flex', flexDirection:'column', gap:4}}>
                {groups.map(g => (
                  <button
                    key={g.title}
                    onClick={() => {
                      setTab(g.title);
                      const el = document.getElementById('faq-g-' + g.title.replace(/[^\w]/g,'-'));
                      if (el) {
                        const y = el.getBoundingClientRect().top + window.scrollY - 100;
                        window.scrollTo({ top: y, behavior: 'smooth' });
                      }
                    }}
                    className={`nav-link ${tab === g.title ? 'is-active' : ''}`}
                    style={{justifyContent:'flex-start', textAlign:'left'}}
                  >
                    <Icon name={g.icon} size={16} /> {g.title}
                  </button>
                ))}
              </nav>
              <div className="card mt-8" style={{padding:24}}>
                <div className="spaced-cap" style={{marginBottom:10, color:'var(--aurora-blue)'}}>Still stuck?</div>
                <p className="body" style={{fontSize:14, margin:'0 0 16px'}}>One question, one form field. We answer personally.</p>
                <button className="btn btn--primary btn--sm" onClick={onContact}>Ask Aurora <Icon name="arrow-up-right" size={14} /></button>
              </div>
            </aside>
            <div style={{display:'flex', flexDirection:'column', gap: 56}}>
              {groups.map(g => (
                <div key={g.title} id={'faq-g-' + g.title.replace(/[^\w]/g,'-')}>
                  <div className="row gap-3" style={{marginBottom:8}}>
                    <div className="icon-tile" style={{width:36, height:36, borderRadius:10}}>
                      <Icon name={g.icon} size={18} />
                    </div>
                    <h2 className="h2" style={{margin:0, fontSize:'clamp(24px, 2.6vw, 32px)'}}>{g.title}</h2>
                  </div>
                  <div className="mt-6">
                    <FAQ items={g.items} />
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      <CTABand
        eyebrow="Didn't answer it?"
        title="Ask us anything."
        primary="Schedule a Free Consultation"
        onPrimary={onContact}
        secondary="See services first"
        onSecondary={() => navigate('/services')}
      />
    </main>
  );
}
window.FAQPage = FAQPage;


function ContactPage({ defaultService }) {
  return (
    <main data-screen-label="Contact">
      <PageIntro
        crumbs={[{label:'Home', to:'/'}, {label:'Contact'}]}
        eyebrow="Get a quote"
        title={<>Tell us what you're picturing. <span className="beat-aurora">We'll quote it.</span></>}
        body="Three short steps. You'll hear back within one business day, Mon–Fri. No call center, no auto-replies, no spam list."
      />

      <section className="section section--tight">
        <div className="container">
          <div className="cols-2" style={{'--cols':'1.4fr 1fr', '--col-gap':'56px', alignItems:'flex-start'}}>
            <div className="card" style={{padding:'40px clamp(24px, 4vw, 56px)'}}>
              <QuoteForm defaultService={defaultService} />
            </div>
            <div style={{display:'flex', flexDirection:'column', gap: 24}}>
              <div className="card">
                <div className="spaced-cap" style={{color:'var(--aurora-blue)', marginBottom:12}}>Direct line</div>
                <div className="stack gap-3">
                  <a href="tel:+19192101601" className="row gap-3 row--center" style={{color:'var(--fg-1)'}}>
                    <div className="icon-tile" style={{width:40, height:40}}><Icon name="phone" size={18} /></div>
                    <div>
                      <div style={{fontFamily:'var(--font-display)', fontWeight:600, fontSize:18}}>(919) 210-1601</div>
                      <div className="dim" style={{fontSize:12}}>Mon–Fri · 8am–6pm ET</div>
                    </div>
                  </a>
                  <a href="mailto:nick@auroranetworksolutions.com" className="row gap-3 row--center" style={{color:'var(--fg-1)'}}>
                    <div className="icon-tile" style={{width:40, height:40}}><Icon name="mail" size={18} /></div>
                    <div>
                      <div style={{fontFamily:'var(--font-display)', fontWeight:600, fontSize:16}}>nick@auroranetworksolutions.com</div>
                      <div className="dim" style={{fontSize:12}}>Replies within 1 business day</div>
                    </div>
                  </a>
                  <div className="row gap-3 row--center">
                    <div className="icon-tile" style={{width:40, height:40}}><Icon name="map-pin" size={18} /></div>
                    <div>
                      <div style={{fontFamily:'var(--font-display)', fontWeight:600, fontSize:16}}>Raleigh, NC 27601</div>
                      <div className="dim" style={{fontSize:12}}>Free site visits within 25 mi</div>
                    </div>
                  </div>
                </div>
              </div>
              <div className="card card--edge">
                <div className="spaced-cap" style={{marginBottom:12}}>What happens next</div>
                <ol style={{paddingLeft:0, margin:0, listStyle:'none', display:'flex', flexDirection:'column', gap:16}}>
                  {[
                    'You send us a few details — about a minute.',
                    'We email you back within one business day with a few questions.',
                    'We schedule a 30-minute call. On-site walkthrough if needed.',
                    'You get a written, itemized quote within 5 business days.',
                  ].map((t, i) => (
                    <li key={i} className="row gap-3" style={{alignItems:'flex-start'}}>
                      <span style={{
                        flex:'0 0 28px', height:28, borderRadius:'50%',
                        background:'var(--bg-elev-3)', color:'var(--aurora-blue)',
                        fontFamily:'var(--font-mono)', fontSize:11, fontWeight:600,
                        display:'grid', placeItems:'center', marginTop:1,
                      }}>0{i+1}</span>
                      <span className="body" style={{fontSize:14}}>{t}</span>
                    </li>
                  ))}
                </ol>
              </div>
              <div style={{
                padding:'18px 22px', borderRadius:'var(--radius-md)',
                background:'rgba(61,220,140,0.08)',
                border:'1px solid rgba(61,220,140,0.24)',
              }}>
                <div className="row gap-3 row--center">
                  <Icon name="shield-check" size={18} style={{color:'var(--aurora-green)'}} />
                  <span style={{fontSize:13, color:'var(--fg-1)'}}>No sales follow-ups. No newsletters. Your details are used only to quote your project.</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <style>{`
        @media (max-width: 900px) {
          main[data-screen-label="Contact"] .section > .container > div[style*="grid-template-columns"] {
            grid-template-columns: 1fr !important;
          }
        }
      `}</style>
    </main>
  );
}
window.ContactPage = ContactPage;


function NotFoundPage() {
  return (
    <main data-screen-label="Not Found">
      <PageIntro
        crumbs={[{label:'Home', to:'/'}, {label:'404'}]}
        eyebrow="404"
        title={<>Page not found. <span className="beat-aurora">But the network is up.</span></>}
        body="This URL doesn't lead anywhere. Try the services menu, or the home page."
      />
      <section className="section">
        <div className="container">
          <Link to="/" className="btn btn--primary">Go home <Icon name="arrow-right" size={16} /></Link>
        </div>
      </section>
    </main>
  );
}
window.NotFoundPage = NotFoundPage;
