// Service detail page template — used by all four service pages

function ServiceDetailPage({
  slug, label, title, lede, accent, icon,
  whatWeDo,           // array of {title, body}
  process,            // array of {title, body}
  packages,           // array of {tier, price, summary, included: []}
  techSpecs,          // array of {k, v}
  faqs,               // array of {q, a}
  caseTeaser,         // {title, desc} or null
  visual,             // JSX
  onContact,
}) {
  const handleQuote = () => {
    navigate('/contact', { service: slug });
  };

  return (
    <main data-screen-label={`Service: ${label}`}>
      <PageIntro
        crumbs={[{label:'Home', to:'/'}, {label:'Services', to:'/services'}, {label}]}
        eyebrow={label}
        title={title}
        body={lede}
        accent={accent}
        icon={icon}
      />

      <section className="section section--tight">
        <div className="container">
          <div className="cols-2" style={{'--cols':'1.1fr 1fr', '--col-gap':'48px', alignItems:'center'}}>
            <div>
              {visual}
            </div>
            <div>
              <div className="eyebrow" style={{color: accent}}>What's included</div>
              <h2 className="h2" style={{margin:'16px 0 24px'}}>The whole package, <span className="beat-aurora">soup to nuts.</span></h2>
              <div className="grid grid-2">
                {whatWeDo.map((w, i) => (
                  <div key={i}>
                    <div className="row gap-2" style={{marginBottom:8}}>
                      <Icon name="check-circle" size={18} style={{color: accent}} />
                      <h4 style={{margin:0, fontFamily:'var(--font-display)', fontWeight:600, fontSize:15, color:'var(--fg-1)'}}>{w.title}</h4>
                    </div>
                    <p className="body" style={{fontSize:14, marginLeft:26}}>{w.body}</p>
                  </div>
                ))}
              </div>
              <div className="row gap-3 mt-8">
                <button className="btn btn--primary" onClick={handleQuote}>
                  Get a {label.toLowerCase()} quote <Icon name="arrow-up-right" size={16} />
                </button>
                <button className="btn btn--secondary" onClick={onContact}>
                  Ask a question
                </button>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section className="section section--tight">
        <div className="container">
          <SectionHeader
            eyebrow="Process"
            title={<>How a {label.toLowerCase()} project actually <span className="beat-aurora">runs.</span></>}
            body="No surprises means writing it down. Here's the timeline you can expect from first call to the final handoff."
          />
          <ProcessGrid steps={process} />
        </div>
      </section>

      {packages && (
        <section className="section">
          <div className="container">
            <SectionHeader
              eyebrow="Packages"
              title={<>Where most projects land. <span className="beat-aurora">Every quote is bespoke.</span></>}
              body="These are reference ranges for typical jobs in the Triangle. The free consultation is when we figure out exactly which one you need — or design something custom."
            />
            <div className="grid grid-3">
              {packages.map((p, i) => (
                <div className="card card--edge" key={i} style={{display:'flex', flexDirection:'column', gap:16}}>
                  {p.featured && <span className="chip" style={{alignSelf:'flex-start', color: accent, borderColor:`color-mix(in srgb, ${accent} 32%, transparent)`}}><span className="dot" style={{background: accent, boxShadow: `0 0 8px ${accent}`}} />Most common</span>}
                  <div className="spaced-cap" style={{color: accent}}>{p.tier}</div>
                  <div style={{display:'flex', alignItems:'baseline', gap:4}}>
                    <span style={{fontFamily:'var(--font-display)', fontWeight:700, fontSize:32, letterSpacing:'-0.02em', color:'var(--fg-1)'}}>{p.price}</span>
                    <span className="dim" style={{fontSize:13}}>{p.priceSub}</span>
                  </div>
                  <p className="body" style={{fontSize:14, margin:0}}>{p.summary}</p>
                  <hr className="divider" />
                  <BulletList items={p.included} />
                  <button className="btn btn--secondary mt-4" onClick={handleQuote} style={{alignSelf:'flex-start'}}>
                    Scope this <Icon name="arrow-right" size={14} />
                  </button>
                </div>
              ))}
            </div>
          </div>
        </section>
      )}

      {techSpecs && (
        <section className="section section--tight">
          <div className="container container--narrow">
            <SectionHeader
              eyebrow="For the curious"
              title={<>The gear we use. <span className="beat-aurora">And why.</span></>}
            />
            <div className="kv-list">
              {techSpecs.map((kv, i) => (
                <div className="kv" key={i}><span className="k">{kv.k}</span><span className="v">{kv.v}</span></div>
              ))}
            </div>
          </div>
        </section>
      )}

      {faqs && (
        <section className="section">
          <div className="container container--narrow">
            <SectionHeader
              eyebrow="Common questions"
              title={<>{label} questions, <span className="beat-aurora">answered.</span></>}
            />
            <FAQ items={faqs} />
          </div>
        </section>
      )}

      <CTABand
        eyebrow={`${label} quote`}
        title={`Ready to scope a ${label.toLowerCase()} project?`}
        body="A 30-minute call. We'll tell you whether you need what you think you need — and what it'll actually cost."
        primary={`Get a ${label.toLowerCase()} quote`}
        onPrimary={handleQuote}
        secondary="See all services"
        onSecondary={() => navigate('/services')}
      />
    </main>
  );
}
window.ServiceDetailPage = ServiceDetailPage;


// --- Networking ---
function NetworkingPage({ onContact }) {
  return <ServiceDetailPage
    slug="networking" label="Network Consulting" accent="var(--aurora-blue)" icon="wifi"
    title={<>Network consulting & tune-ups. <span className="beat-aurora">For the network you already have.</span></>}
    lede="Dead zones, mystery slowdowns, or a UniFi® system nobody's maintained since it went in? We diagnose, tune, and right-size existing home and small-office networks — and handle small upgrades in a single visit. We no longer take on whole-home or whole-office installs."
    visual={<PlanningVisual />}
    whatWeDo={[
      {title:'Network assessment', body:'A structured look at what you have: coverage, speeds, configuration, security, and what\'s actually causing the complaints.'},
      {title:'Dead-zone diagnosis', body:'Often solved with one well-placed access point — not a redesign. We\'ll tell you which, honestly.'},
      {title:'Small upgrades', body:'Add an AP, replace an aging router, swap in a PoE switch. Jobs that fit in a visit, not a project plan.'},
      {title:'UniFi cleanup', body:'Firmware updates, VLAN segmentation for guest and IoT, firewall sanity, and removing years of accumulated cruft.'},
      {title:'Remote support', body:'Optional monitoring and remote fixes for networks we\'ve tuned — most issues never need a truck roll.'},
      {title:'Documentation', body:'A clear map of your network, admin credentials, and what we changed. Yours to keep.'},
    ]}
    process={[
      {title:'Free consult', body:'Phone or video first. Tell us the symptoms; we\'ll tell you if it\'s worth a visit.'},
      {title:'Assessment', body:'On-site or remote review of coverage, config, and equipment, with a written summary of findings.'},
      {title:'Tune + fix', body:'Most tune-ups and small upgrades are done in a single visit, quoted in writing beforehand.'},
      {title:'Follow-up', body:'A check-in after you\'ve lived with it. Optional remote monitoring if you want us to keep watching.'},
    ]}
    techSpecs={[
      {k:'Systems we support', v:'UniFi® — all current gateways, APs, switches'},
      {k:'Also seen regularly', v:'eero, Orbi, ISP gateways (advice + replacement)'},
      {k:'Common fixes', v:'AP placement, channel plan, VLANs, firmware'},
      {k:'Typical visit', v:'2–4 hours for a tune-up or small upgrade'},
      {k:'Remote help', v:'Available for systems we\'ve assessed'},
    ]}
    faqs={[
      {q:'Do you still install whole-home or whole-office networks?', a:'No — we\'ve focused the business on websites, email, and IT consulting. For a full new install we\'ll consult on the design and refer you to installers we trust. Small jobs — adding an AP, replacing a router, fixing a dead zone — we still do gladly.'},
      {q:'Can you fix dead spots without replacing everything?', a:'Usually — a single added AP in the right place solves most of them. We\'ll tell you honestly whether you need one access point or bigger changes.'},
      {q:'My UniFi system was installed by someone else. 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:'Do I have to manage it myself afterward?', a:'Only if you want to. Everything is configured and documented at handoff, and optional remote monitoring means most issues get fixed before you notice them.'},
    ]}
    onContact={onContact}
  />;
}
window.NetworkingPage = NetworkingPage;


// --- Cameras ---
function CamerasPage({ onContact }) {
  return <ServiceDetailPage
    slug="cameras" label="Camera Support" accent="var(--aurora-purple)" icon="camera"
    title={<>UniFi Protect® support. <span className="beat-aurora">For the system you already own.</span></>}
    lede="Alerts that fire every time a leaf moves, a camera that's drifted out of frame, storage that fills too fast — we keep existing UniFi Protect® systems healthy, tuned, and actually useful. Support and consulting only: we no longer install new camera systems."
    visual={<CamerasVisual />}
    whatWeDo={[
      {title:'System health check', body:'Every camera, the NVR, storage, firmware, and remote access reviewed — with a written punch list of what needs attention.'},
      {title:'Alert tuning', body:'Person/vehicle/package detection dialed in per camera so notifications mean something again.'},
      {title:'Storage & retention', body:'Bigger drives, smarter recording settings, and retention that matches what you actually need to keep.'},
      {title:'Realignment & refocus', body:'Cameras drift, seasons change the view. We reframe and refocus so the footage is worth having.'},
      {title:'Firmware & security', body:'Updates applied, default credentials gone, remote access locked down properly.'},
      {title:'App & access setup', body:'View from any phone or laptop, family or staff accounts with the right permissions, no subscription.'},
    ]}
    process={[
      {title:'Tell us the symptoms', body:'A quick call about what\'s bugging you — false alerts, blind spots, dead cameras, mystery gaps in footage.'},
      {title:'Health check', body:'Remote where possible, on-site when needed. You get a written summary of what we found.'},
      {title:'Fix + tune', body:'Most support visits wrap in a few hours, quoted in writing beforehand.'},
      {title:'Stay healthy', body:'Optional periodic check-ins so firmware, storage, and alerts stay dialed in.'},
    ]}
    techSpecs={[
      {k:'Systems we support', v:'UniFi Protect® — all current cameras and NVRs'},
      {k:'Common fixes', v:'Alert tuning · retention · refocus · firmware'},
      {k:'Storage upgrades', v:'Pass-through drive cost, no markup'},
      {k:'Remote support', v:'Available for systems we\'ve health-checked'},
      {k:'New installs', v:'Design consulting + referral to trusted installers'},
    ]}
    faqs={[
      {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 sizing — 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 system. Will you support it?', a:'Yes — that\'s exactly what this service is. We\'ll health-check what\'s there and take it from whatever state it\'s in.'},
      {q:'Will my footage go to a cloud I don\'t control?', a:'No. UniFi Protect records locally on hardware you own. We can optionally set up encrypted off-site backup for critical zones, but the default stays fully local.'},
      {q:'Are there monthly fees?', a:'Not from us, and not from UniFi Protect. Support visits are quoted per job; optional periodic check-ins are their own line item, not a per-camera subscription.'},
    ]}
    onContact={onContact}
  />;
}
window.CamerasPage = CamerasPage;


// --- Websites ---
function WebsitesPage({ onContact }) {
  return <ServiceDetailPage
    slug="websites" label="Websites" accent="var(--aurora-green)" icon="browser"
    title={<>Websites that <span className="beat-aurora">earn their keep.</span></>}
    lede="Hand-built sites for small businesses in the Triangle. Fast, accessible, and designed to convert. No drag-and-drop bloat, no theme that breaks when the plugin updates."
    visual={<WebsiteVisual />}
    whatWeDo={[
      {title:'Strategy', body:'One conversation about who you serve, what you want them to do, and what success looks like in 90 days.'},
      {title:'Visual design', body:'A look that matches your business — not a template that 10,000 other businesses also use.'},
      {title:'Hand-built front-end', body:'Modern static or headless stack. Faster, more secure, and easier to maintain than WordPress.'},
      {title:'Lead capture', body:'Forms wired to your email or CRM, with spam protection that actually works.'},
      {title:'SEO foundations', body:'Schema, meta, sitemap, page speed, accessibility — the boring stuff that helps you rank.'},
      {title:'Handoff or hosting', body:'We host on Cloudflare or hand off cleanly to your team. Your domain. Your content. No lock-in.'},
    ]}
    process={[
      {title:'Discovery', body:'60-minute call. We figure out audience, goals, content, and whether it\'s a refresh or a from-scratch build.'},
      {title:'Design', body:'1–2 design directions in a clickable prototype. You give feedback, we iterate.'},
      {title:'Build', body:'2–4 weeks of build. Weekly progress link, plain-English updates, no agency theatre.'},
      {title:'Launch + support', body:'Migration, DNS, SEO redirects, and on-call edits for a month included.'},
    ]}
    packages={[
      {tier:'One-page essential', price:'$2.5k', priceSub:'flat', summary:'A polished one-pager with contact form. Perfect for new businesses, contractors, and pop-ups.', included:['Custom design','Up to 1 page','Contact form','SEO basics + analytics','30 days post-launch edits']},
      {tier:'Small business site', price:'$4k–$8k', priceSub:'flat', featured:true, summary:'4–8 pages covering services, about, testimonials, contact, and a blog if you want one.', included:['Custom design (2 directions)','Up to 8 pages','Contact + booking forms','SEO + schema','Mobile/accessibility audit','90 days post-launch edits']},
      {tier:'Site + monthly care', price:'$200/mo', priceSub:'retainer', summary:'For sites we built or ones we adopt. Includes hosting, monitoring, and 2 hours/month of edits.', included:['Cloudflare hosting','Uptime monitoring','2 hrs/mo edits','Quarterly audit','Same-day urgent fixes (M–F)']},
    ]}
    techSpecs={[
      {k:'Front-end', v:'Astro · Next.js · plain HTML/CSS'},
      {k:'CMS (optional)', v:'Sanity · Decap · Markdown files'},
      {k:'Hosting', v:'Cloudflare Pages · Netlify · Vercel'},
      {k:'Forms', v:'Postmark · Resend · Formspree'},
      {k:'Analytics', v:'Plausible · Fathom · GA4 if required'},
      {k:'Target scores', v:'95+ Lighthouse · WCAG AA · LCP < 1.5s'},
    ]}
    faqs={[
      {q:'Will you build it on WordPress?', a:'Generally no — WordPress is overkill for most small-business sites and the maintenance tax adds up. We build on modern stacks that are easier and cheaper to keep healthy. We\'ll convert from WordPress for you.'},
      {q:'Who owns the website when we\'re done?', 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 can rebuild it modernly while keeping URLs and SEO intact, or do a top-to-bottom refresh with proper 301 redirects.'},
      {q:'Do you do e-commerce?', a:'Light e-commerce, yes (Shopify integration, small product catalogs). For complex stores we partner with a specialist — we\'ll tell you who is good rather than overpromise.'},
    ]}
    onContact={onContact}
  />;
}
window.WebsitesPage = WebsitesPage;


// --- Business Email & IT ---
function EmailPage({ onContact }) {
  return <ServiceDetailPage
    slug="email" label="Business Email & IT" accent="var(--aurora-magenta)" icon="mail"
    title={<>Business email. <span className="beat-aurora">Done properly the first time.</span></>}
    lede="Stop sending invoices from a free Gmail address. We set up Google Workspace or Microsoft 365 on your domain — properly authenticated so your email lands in inboxes, not spam folders."
    visual={<EmailVisual />}
    whatWeDo={[
      {title:'Workspace or M365', body:'We help you choose between Google Workspace and Microsoft 365 based on how you actually work.'},
      {title:'Domain + DNS', body:'MX, SPF, DKIM, DMARC configured properly. Your sender reputation starts clean.'},
      {title:'Mailbox migration', body:'Zero-downtime cutover from Gmail, GoDaddy email, Outlook, or any IMAP provider.'},
      {title:'Aliases + groups', body:'hello@, billing@, support@ — distributed to the right people automatically.'},
      {title:'MFA + security', body:'Multi-factor enforced. Phishing-resistant where the team can handle it.'},
      {title:'Ongoing IT', body:'New employee setup, password resets, lost-phone recovery, and one phone number to call.'},
    ]}
    process={[
      {title:'Audit', body:'Quick review of current setup. What email lives where, what domain you own, what\'s breaking.'},
      {title:'Plan + quote', body:'Recommended platform, license count, migration approach, and one-time + monthly cost.'},
      {title:'Migration', body:'Provision the new tenant, set DNS, migrate mailboxes, cut over MX — usually overnight.'},
      {title:'Ongoing care', body:'Optional monthly retainer for IT support. Or pay hourly when something comes up.'},
    ]}
    packages={[
      {tier:'Solo / new business', price:'$450', priceSub:'one-time setup', summary:'You + a few aliases. One domain, one mailbox, full deliverability stack configured.', included:['Workspace or M365 license setup','Domain + DNS + MX','SPF, DKIM, DMARC','Migration from one provider','60 min training']},
      {tier:'Small team (3–15)', price:'$900–$2.5k', priceSub:'one-time setup', featured:true, summary:'Multi-user setup with aliases, shared mailboxes, and migration from your current platform.', included:['3–15 mailbox migration','Groups + shared inboxes','MFA enforced','Calendar + drive setup','Onboarding doc for your team','30 days post-cutover support']},
      {tier:'IT retainer', price:'$300/mo+', priceSub:'monthly', summary:'For businesses that need a part-time IT person. Cap of 4 hours/month plus same-day urgent.', included:['User add/remove','Password + MFA resets','Mailbox + drive cleanup','Quarterly security audit','Same-day urgent fixes (M–F)']},
    ]}
    techSpecs={[
      {k:'Platforms', v:'Google Workspace · Microsoft 365 Business'},
      {k:'Authentication', v:'SPF, DKIM, DMARC, BIMI optional'},
      {k:'MFA', v:'TOTP, push, passkey, hardware key'},
      {k:'Migration tools', v:'GWMME · BitTitan · ShuttleCloud'},
      {k:'Backup (optional)', v:'Afi.ai or SkyKick · per-mailbox'},
      {k:'Identity', v:'Domain-based SSO where applicable'},
    ]}
    faqs={[
      {q:'Workspace or Microsoft 365 — which one?', a:'Depends on what your team already uses. If you live in Word and Excel, M365. If you live in Gmail and Docs, Workspace. We\'ll ask 5 questions and make the call.'},
      {q:'Will my email be down during the migration?', a:'No. We cut MX over only after mailboxes are mirrored. The vast majority of migrations are seamless overnight cutovers with no missed email.'},
      {q:'Can you help with the rest of our IT too?', a:'Yes — small business IT support is part of the offering. New employee onboarding, password resets, laptop setup, MFA, lost-phone recovery, and on-call help.'},
      {q:'Do you handle phone systems / VoIP?', a:'Not directly, but we partner with a VoIP specialist for businesses that need it. We\'ll make the warm intro.'},
    ]}
    onContact={onContact}
  />;
}
window.EmailPage = EmailPage;