// 37 FORGE — Service pages: Managed IT (full + VoIP), Co-Managed IT, Automation
// Loaded as a separate text/babel script. Top-level identifiers are GLOBAL
// (babel scripts share scope here), so everything is uniquely prefixed.

const SH = (props) => React.createElement(window.SectionHead, props);

// ============================================================
// Reusable full-width service block (icon + all deliverables)
// ============================================================
function SvcFull({ num, tag, icon, title, body, items, metricLabel, metricVal, status }) {
  return (
    <div className="svc-full" id={`svc-${num}`}>
      <div className="svc-full-rail">
        <div className="svc-full-ic"><i className={`fa-solid ${icon}`}></i></div>
        <div className="svc-full-num">{num}</div>
      </div>
      <div className="svc-full-body">
        <span className="svc-full-tag">SVC · {tag}</span>
        <h3>{title}</h3>
        <p className="svc-full-lede">{body}</p>
        <ul className="svc-full-list">
          {items.map((it, i) => <li key={i}>{it}</li>)}
        </ul>
        <div className="svc-full-meta">
          <span className="svc-full-pill">● {status}</span>
          <span className="svc-full-metric">{metricLabel} · <b>{metricVal}</b></span>
        </div>
      </div>
    </div>
  );
}

const SVC_FULL_DATA = [
  {
    num: "01", tag: "PROACTIVE", icon: "fa-eye", title: "24/7 Network Monitoring",
    body: "Endpoints, servers, switches, firewalls, and SaaS apps — watched in real time by automated agents and a human on call. Most issues are caught and fixed before your team ever logs in.",
    items: ["RMM agent on every managed device", "Synthetic uptime checks every 60 seconds", "Automated remediation for known issues", "Real-time dashboards & threshold alerts", "Quarterly performance & capacity review", "Documented runbook per system"],
    metricLabel: "MEAN TIME TO DETECT", metricVal: "< 90 SEC", status: "ALWAYS-ON"
  },
  {
    num: "02", tag: "SECURITY", icon: "fa-shield-halved", title: "Cybersecurity",
    body: "Layered defense built for the SMB threat model — phishing, ransomware, account takeover, insider risk. We deploy, configure, and operate the stack, then write the documentation auditors ask for.",
    items: ["Managed EDR on every endpoint", "MFA + SSO rollout & enforcement", "Automated patching on a weekly cadence", "Phishing simulation + user training", "HIPAA / PCI / CMMC documentation", "Quarterly tabletop exercises"],
    metricLabel: "THREATS BLOCKED · 7D", metricVal: "14,302", status: "DEFENDING"
  },
  {
    num: "03", tag: "RECOVERY", icon: "fa-database", title: "Data Backups & Disaster Recovery",
    body: "Immutable, air-gapped, and tested. We run a real restore every month and send you the report. RPO measured in minutes, RTO measured in hours — both written into your runbook.",
    items: ["3-2-1-1 backup architecture", "Immutable, air-gapped copies", "RPO ≤ 15 min on critical workloads", "Monthly test restore + signed report", "Off-site replication to a secondary region", "Written, rehearsed DR runbook"],
    metricLabel: "LAST VERIFIED RESTORE", metricVal: "04:12 CT", status: "VERIFIED"
  },
  {
    num: "04", tag: "CLOUD", icon: "fa-cloud", title: "Cloud Services",
    body: "Microsoft 365 and Azure first; AWS where it makes sense. We migrate on-premises systems without weekend outages, then optimize cost monthly so your bill doesn't drift into surprise territory.",
    items: ["Zero-downtime migration playbook", "Microsoft 365 + Entra ID administration", "Azure / AWS provisioning & optimization", "Identity-first architecture", "Tenant hardening to CIS benchmark", "Monthly cost optimization review"],
    metricLabel: "AVG MIGRATION DOWNTIME", metricVal: "0 MIN", status: "ZERO-DOWNTIME"
  },
  {
    num: "05", tag: "SUPPORT", icon: "fa-headset", title: "Help Desk Support",
    body: "Real engineers, in Dallas, on real phones. No offshore tier-1, no chatbot triage. Median pickup is 12 minutes; first-call resolution holds at 87% across last year's 14,000+ tickets.",
    items: ["Phone, email, Teams & web portal", "Median pickup time · 12 minutes", "First-call resolution · 87%", "Dedicated account engineer", "On-site dispatch across the metroplex", "After-hours emergency line"],
    metricLabel: "FIRST-CALL RESOLUTION", metricVal: "87%", status: "STAFFED"
  },
  {
    num: "06", tag: "VOICE", icon: "fa-phone-volume", title: "VoIP & Business Phone Systems",
    body: "Retire the aging PBX and the per-line phone bill. We design, port, and operate a cloud phone system that follows your people to the desk, the browser, and the cell phone — on one number, with carrier-grade call quality.",
    items: ["Cloud PBX / hosted VoIP migration & number porting", "Desk phones, softphones & a mobile app on one number", "Auto-attendant, IVR, ring groups & voicemail-to-email", "Microsoft Teams Phone & calling integration", "Call recording, queues & analytics reporting", "SMS/MMS business texting + e-fax", "E911 registration & QoS network tuning", "SIP trunking with LTE/SD-WAN failover"],
    metricLabel: "PORT-OVER DOWNTIME", metricVal: "0 MIN", status: "DIAL-TONE LIVE"
  }
];

// ============================================================
// MANAGED IT — full service catalog page
// ============================================================
function OurServicesPage({ go }) {
  return (
    <div className="page active" data-screen-label="Services">
      <div className="page-head">
        <div className="container">
          <div className="crumb">
            <a onClick={() => go("services")}>HOME</a>
            <span className="sep">/</span>
            <span className="cur">SERVICES</span>
          </div>
          <div className="page-hero-grid">
            <div className="page-hero-text">
          <div className="ph-eyebrow">FULL-SERVICE MANAGED IT · DALLAS–FORT WORTH</div>
          <h1>Everything that keeps your business <span className="accent">running, in one bill.</span></h1>
          <p className="lede">Six disciplines, one flat monthly price. No à la carte tiers, no surprise upsells — every 37 Forge engagement covers the same operational pillars, staffed by local W-2 engineers.</p>
          <div className="ph-cta">
            <button className="btn-primary" onClick={() => go("contact")}><i className="fa-solid fa-calendar-check"></i>Book an assessment</button>
            <button className="btn-outline" onClick={() => go("co-managed")}><i className="fa-solid fa-people-arrows"></i>Already have IT? See Co-Managed</button>
          </div>
            </div>
            <div className="page-hero-viz">{React.createElement(window.ServiceConsole)}</div>
          </div>
        </div>
      </div>

      <section className="canvas-deep" style={{ borderTop: "1px solid #1f3358" }}>
        <div className="container">
          <SH eyebrow="WHAT'S INCLUDED · 6 DISCIPLINES" title="Six disciplines." accent="One monthly bill."
              desc="Each one is operated, documented, and reported on — not just sold. Scroll for the deliverables behind every line item." />
          <div className="svc-full-list-wrap" style={{ marginTop: "8px" }}>
            {SVC_FULL_DATA.map((s) => <SvcFull key={s.num} {...s} />)}
          </div>
        </div>
      </section>

      <section className="canvas" style={{ borderTop: "1px solid #1f3358" }}>
        <div className="container">
          <SH eyebrow="BY THE NUMBERS" title="Operational discipline," accent="in numbers."
              desc="Real metrics from the last twelve months, published to clients quarterly." />
          <div className="stats-grid" style={{ gridTemplateColumns: "repeat(3, 1fr)" }}>
            {React.createElement(window.StatCell, { eyebrow: "MEDIAN PICKUP", value: 12, unit: " min", label: "Help Desk Response", desc: "Phones answered by an engineer, not a triage script.", barWidth: "85%", animateNum: true })}
            {React.createElement(window.StatCell, { eyebrow: "FIRST-CALL FIX", value: 87, unit: "%", label: "Resolution Rate", desc: "Across 14,000+ tickets in the last rolling 12 months.", barWidth: "87%", animateNum: true })}
            {React.createElement(window.StatCell, { eyebrow: "UPTIME · 30D", value: "99.997", unit: "%", label: "Composite SLA", desc: "Weighted across every monitored client this quarter.", barWidth: "99%", animateNum: false })}
          </div>
        </div>
      </section>

      <ServiceCTA go={go}
        eyebrow="NEXT STEP · 30-MIN ASSESSMENT"
        title="Let's pressure-test" accent="your current stack."
        desc="We'll walk your environment, flag the gaps, and show you exactly what a fixed monthly bill would cover. No obligation, no sales theater." />
    </div>
  );
}

// ============================================================
// Shared CTA band
// ============================================================
function ServiceCTA({ go, eyebrow, title, accent, desc, primary = "Book an assessment" }) {
  return (
    <section className="canvas-deep" style={{ borderTop: "1px solid #1f3358" }}>
      <div className="container">
        <div className="svc-cta-grid">
          <div>
            <div className="svc-cta-eye">{eyebrow}</div>
            <h2 className="svc-cta-h">{title} <span className="accent">{accent}</span></h2>
            <p className="svc-cta-p">{desc}</p>
          </div>
          <div className="svc-cta-actions">
            <button className="btn-primary" onClick={() => go("contact")} style={{ fontSize: "15px", padding: "16px 24px", justifyContent: "center" }}>
              <i className="fa-solid fa-calendar-check"></i>{primary}
            </button>
            <a href="tel:2144320333" className="svc-cta-call">OR CALL 214-432-0333 · 24/7</a>
          </div>
        </div>
      </div>
    </section>
  );
}

// ============================================================
// CO-MANAGED IT
// ============================================================
const COMANAGED_FIT = [
  { n: "01", t: "Your IT person is stretched thin", d: "One or two internal admins can't cover security, projects, and the ticket queue all at once. We take the load they can't." },
  { n: "02", t: "You need 24/7 — they need to sleep", d: "Your team owns business hours. We own nights, weekends, holidays, and the on-call pager so nobody burns out." },
  { n: "03", t: "Enterprise tools, SMB headcount", d: "RMM, EDR, SIEM, backup, and documentation platforms — already licensed and operated by us, shared with your team at no extra build cost." },
  { n: "04", t: "Projects outrun the day job", d: "Migrations, rollouts, and refreshes need a bench. We surge engineers for the project, then step back to support mode." }
];

const COMANAGED_SPLIT = [
  {
    head: "YOUR TEAM OWNS", tone: "you", icon: "fa-user-gear",
    items: ["Day-to-day user support & walk-ups", "Institutional & application knowledge", "Vendor & line-of-business relationships", "On-the-ground decisions and priorities"]
  },
  {
    head: "WE SHARE", tone: "shared", icon: "fa-arrows-left-right",
    items: ["One PSA / ticketing system & queue", "A single source of documentation", "Weekly syncs and a roadmap", "Escalation tiers with clear handoffs"]
  },
  {
    head: "37 FORGE BRINGS", tone: "forge", icon: "fa-tower-broadcast",
    items: ["24/7 NOC monitoring & remediation", "Security stack: EDR, MFA, patching, SOC", "Backup, DR testing & compliance evidence", "Project surge capacity & after-hours on-call"]
  }
];

function CoManagedPage({ go }) {
  return (
    <div className="page active" data-screen-label="Co-Managed IT">
      <div className="page-head">
        <div className="container">
          <div className="crumb">
            <a onClick={() => go("services")}>HOME</a>
            <span className="sep">/</span>
            <a onClick={() => go("our-services")}>SERVICES</a>
            <span className="sep">/</span>
            <span className="cur">CO-MANAGED IT</span>
          </div>
          <div className="page-hero-grid">
            <div className="page-hero-text">
          <div className="ph-eyebrow">CO-MANAGED IT · A COLLABORATIVE MODEL</div>
          <h1>Your IT team, <span className="accent">amplified — not replaced.</span></h1>
          <p className="lede">You already have IT people you trust. Co-Managed keeps them in the driver's seat and hands them our tools, our after-hours coverage, and our bench — so they stop drowning and start getting ahead.</p>
          <div className="ph-cta">
            <button className="btn-primary" onClick={() => go("contact")}><i className="fa-solid fa-people-group"></i>Talk through a split</button>
            <button className="btn-outline" onClick={() => go("our-services")}><i className="fa-solid fa-list-check"></i>See full Managed IT</button>
          </div>
            </div>
            <div className="page-hero-viz">{React.createElement(window.CollabDiagram)}</div>
          </div>
        </div>
      </div>

      {/* Collaboration thesis */}
      <section className="canvas-deep" style={{ borderTop: "1px solid #1f3358" }}>
        <div className="container">
          <div className="comgr-intro">
            <div>
              <div className="svc-cta-eye">THE IDEA</div>
              <h2 className="comgr-h">It's a partnership, not a takeover.</h2>
            </div>
            <p className="comgr-p">Fully-outsourced IT replaces your team. Break-fix leaves them alone until something's on fire. <strong>Co-Managed is the middle:</strong> a clear division of labor where your staff keep the relationships and context they're great at, and we cover the depth, tooling, and round-the-clock coverage that's hard to hire for. One shared queue, one set of documentation, one weekly sync.</p>
          </div>
        </div>
      </section>

      {/* Division of labor */}
      <section className="canvas" style={{ borderTop: "1px solid #1f3358" }}>
        <div className="container">
          <SH eyebrow="HOW THE WORK SPLITS" title="Clear lines," accent="zero finger-pointing."
              desc="We agree on who owns what before day one, then write it down. No ambiguity about where your team ends and ours begins." />
          <div className="collab-grid">
            {COMANAGED_SPLIT.map((c, i) => (
              <div className={`collab-col collab-${c.tone}`} key={i}>
                <div className="collab-ic"><i className={`fa-solid ${c.icon}`}></i></div>
                <div className="collab-head">{c.head}</div>
                <ul className="collab-list">
                  {c.items.map((it, j) => <li key={j}>{it}</li>)}
                </ul>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Who it's for */}
      <section className="canvas-deep" style={{ borderTop: "1px solid #1f3358" }}>
        <div className="container">
          <SH eyebrow="WHO IT'S FOR" title="Built for teams" accent="that are almost there."
              desc="Co-Managed fits best when you have internal IT but the workload has outgrown the headcount." />
          <div className="principles" style={{ gridTemplateColumns: "repeat(2, 1fr)", marginTop: "8px" }}>
            {COMANAGED_FIT.map((p) => (
              <div className="principle" key={p.n}>
                <div className="pnum">FIT · {p.n}</div>
                <h3>{p.t}</h3>
                <p>{p.d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* How we plug in */}
      <section className="canvas" style={{ borderTop: "1px solid #1f3358" }}>
        <div className="container">
          <SH eyebrow="HOW WE PLUG IN" title="Wired into your team" accent="in four moves."
              desc="Onboarding a co-managed partnership is light — we adopt your context, not the other way around." />
          <div className="timeline" style={{ marginTop: "48px" }}>
            {[
              { n: "STEP · 01", h: "Map the split", p: "We document what your team owns today and where the gaps and after-hours holes are." },
              { n: "STEP · 02", h: "Share the tools", p: "Our RMM, EDR, backup, and documentation platforms get pointed at your environment — no new licenses for you." },
              { n: "STEP · 03", h: "Connect the queue", p: "Tickets flow into one shared PSA with escalation tiers, so handoffs between teams are clean." },
              { n: "STEP · 04", h: "Sync weekly", p: "A standing call keeps priorities aligned and turns your IT lead into the person with a 30-engineer bench." }
            ].map((s, i) => (
              <div className="step" key={i}>
                <div className="num">{s.n}</div>
                <h4>{s.h}</h4>
                <p>{s.p}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <ServiceCTA go={go}
        eyebrow="NEXT STEP · 30-MIN WORKING SESSION"
        title="Bring your IT lead." accent="We'll sketch the split live."
        desc="In half an hour we'll map what your team keeps, what we'd cover, and what a co-managed month looks like in practice — with your internal person in the room."
        primary="Book a working session" />
    </div>
  );
}

// ============================================================
// AUTOMATION
// ============================================================
const AUTO_TYPES = [
  {
    n: "01", icon: "fa-envelope", t: "Email & Inbox Automation",
    d: "Replies, routing, and follow-ups that never fall through the cracks.",
    ex: ["Route incoming email to the right person or team", "Auto-acknowledge requests and send templated replies", "Scheduled follow-up sequences so nothing goes cold", "Turn inbox requests into tracked to-dos"]
  },
  {
    n: "02", icon: "fa-user-check", t: "Customer & Lead Follow-up",
    d: "Every inquiry answered, every lead nurtured \u2014 automatically.",
    ex: ["Instant reply the moment a web form comes in", "Drip follow-ups until someone responds", "Hot leads routed to a rep with a Teams or Slack ping", "Every touch logged in your CRM for you"]
  },
  {
    n: "03", icon: "fa-file-invoice-dollar", t: "Quotes, Invoices & Payments",
    d: "From \u201Cyes\u201D to paid without the manual chase.",
    ex: ["Generate quotes and invoices from a form or CRM", "Send payment reminders on a schedule", "Sync paid / unpaid status to your accounting tool", "Email receipts and confirmations automatically"]
  },
  {
    n: "04", icon: "fa-calendar-check", t: "Scheduling & Reminders",
    d: "Bookings, confirmations, and no-show prevention on autopilot.",
    ex: ["Self-booking links that sync to your calendar", "Automatic confirmations and reminders by email or text", "Reschedules and cancellations handled for you", "Post-visit thank-you and review requests"]
  },
  {
    n: "05", icon: "fa-file-signature", t: "Documents & Approvals",
    d: "Paperwork that routes, signs, and files itself.",
    ex: ["Send contracts for e-signature automatically", "Route POs, time-off and expense approvals to the right manager", "File signed documents in the right folder", "Build documents from templates and your data"]
  },
  {
    n: "06", icon: "fa-user-plus", t: "Customer & Employee Onboarding",
    d: "First impressions handled the same polished way every time.",
    ex: ["Welcome emails and document packets sent on signup or hire", "New-client or new-hire checklists kicked off automatically", "Collect forms and info without the back-and-forth", "Notify the team when someone new is starting"]
  },
  {
    n: "07", icon: "fa-arrows-rotate", t: "Data Entry & App Sync",
    d: "Stop retyping the same information into five different systems.",
    ex: ["Keep contacts and orders in sync across your apps", "Form submissions flow straight into your tools", "Copy-paste between spreadsheets eliminated", "Records stay consistent everywhere, automatically"]
  },
  {
    n: "08", icon: "fa-chart-line", t: "Reports & Notifications",
    d: "The numbers and alerts that matter, delivered to you.",
    ex: ["Weekly sales and operations reports emailed automatically", "Text, Teams or Slack alerts for the events you care about", "Daily summaries instead of hunting through dashboards", "Spreadsheet and CRM rollups built for you"]
  }
];

function AutomationPage({ go }) {
  return (
    <div className="page active" data-screen-label="Automation">
      <div className="page-head">
        <div className="container">
          <div className="crumb">
            <a onClick={() => go("services")}>HOME</a>
            <span className="sep">/</span>
            <a onClick={() => go("our-services")}>SERVICES</a>
            <span className="sep">/</span>
            <span className="cur">AUTOMATION</span>
          </div>
          <div className="page-hero-grid">
            <div className="page-hero-text">
          <div className="ph-eyebrow">BUSINESS AUTOMATION · EVERYDAY WORKFLOWS</div>
          <h1>Kill the busywork. <span className="accent">Keep the people.</span></h1>
          <p className="lede">The repetitive work that eats your week — chasing emails, sending invoices, following up with leads, copying data between apps — can run itself. We map those everyday workflows and automate them, so your team spends its hours on customers, not busywork.</p>
          <div className="ph-cta">
            <button className="btn-primary" onClick={() => go("contact")}><i className="fa-solid fa-gauge-high"></i>Find your time sinks</button>
            <button className="btn-outline" onClick={() => go("our-services")}><i className="fa-solid fa-list-check"></i>See full Managed IT</button>
          </div>
            </div>
            <div className="page-hero-viz">{React.createElement(window.AutoFlowDiagram)}</div>
          </div>
        </div>
      </div>

      {/* Thesis stats */}
      <section className="canvas-deep" style={{ borderTop: "1px solid #1f3358" }}>
        <div className="container">
          <SH eyebrow="WHY AUTOMATE" title="Hours back," accent="errors gone."
              desc="The repetitive tasks aren't just slow — they're where leads slip, invoices age, and small mistakes hide. Automation pays for itself in reclaimed time and consistency." />
          <div className="stats-grid" style={{ gridTemplateColumns: "repeat(3, 1fr)" }}>
            {React.createElement(window.StatCell, { eyebrow: "TYPICAL TIME BACK", value: 11, unit: " hrs/wk", label: "Per Team", desc: "Reclaimed from email, follow-ups, invoicing and data entry.", barWidth: "78%", animateNum: true })}
            {React.createElement(window.StatCell, { eyebrow: "FASTER FOLLOW-UP", value: 90, unit: "%", label: "Quicker Replies", desc: "Inbound leads answered in seconds instead of hours.", barWidth: "90%", animateNum: true })}
            {React.createElement(window.StatCell, { eyebrow: "MANUAL ERRORS", value: "near-0", unit: "", label: "On Automated Steps", desc: "Consistent, logged, and the same every single time.", barWidth: "95%", animateNum: false })}
          </div>
        </div>
      </section>

      {/* Types of automation */}
      <section className="canvas" style={{ borderTop: "1px solid #1f3358" }}>
        <div className="container">
          <SH eyebrow="WHAT WE AUTOMATE · 8 WORKFLOWS" title="Eight kinds of busywork" accent="we make disappear."
              desc="A starting menu, not a limit. If your team does it the same way every week, it's a candidate." />
          <div className="auto-grid">
            {AUTO_TYPES.map((a) => (
              <div className="auto-card" key={a.n}>
                <div className="auto-card-top">
                  <div className="auto-ic"><i className={`fa-solid ${a.icon}`}></i></div>
                  <div className="auto-num">{a.n}</div>
                </div>
                <h3>{a.t}</h3>
                <p className="auto-d">{a.d}</p>
                <ul className="auto-ex">
                  {a.ex.map((e, i) => <li key={i}>{e}</li>)}
                </ul>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* How we build it */}
      <section className="canvas-deep" style={{ borderTop: "1px solid #1f3358" }}>
        <div className="container">
          <SH eyebrow="HOW WE BUILD IT" title="Automation done" accent="the careful way."
              desc="We don't bolt on brittle hacks. Every automation is mapped, tested, monitored, and documented — so it keeps working long after we build it." />
          <div className="timeline" style={{ marginTop: "48px" }}>
            {[
              { n: "PHASE · 01", h: "Map the workflow", p: "We watch how the task actually happens today — every step, exception, and handoff — before we change a thing." },
              { n: "PHASE · 02", h: "Pick the win", p: "We prioritize by hours saved and headaches removed, then agree on what success looks like." },
              { n: "PHASE · 03", h: "Build & test", p: "Built and tested against the messy real-world cases, with safeguards so it fails safely — never silently." },
              { n: "PHASE · 04", h: "Watch & improve", p: "Every automation is monitored, with an alert if reality drifts from what we set up." }
            ].map((s, i) => (
              <div className="step" key={i}>
                <div className="num">{s.n}</div>
                <h4>{s.h}</h4>
                <p>{s.p}</p>
              </div>
            ))}
          </div>
          <div className="auto-tools">
            <span className="auto-tools-lab">BUILT WITH TOOLS YOU KNOW</span>
            <div className="auto-tools-row">
              {["Microsoft Power Automate", "Zapier", "Make", "Microsoft 365 & Outlook", "QuickBooks", "HubSpot & CRMs", "Calendly", "DocuSign", "Slack & Teams"].map((t, i) => (
                <span className="auto-tool" key={i}>{t}</span>
              ))}
            </div>
          </div>
        </div>
      </section>

      <ServiceCTA go={go}
        eyebrow="NEXT STEP · 30-MIN AUTOMATION AUDIT"
        title="Tell us what eats" accent="your team's week."
        desc="Walk us through the task everyone dreads doing by hand. We'll tell you on the spot whether it's a clean automation win — and roughly what it would give back."
        primary="Book an automation audit" />
    </div>
  );
}

// Expose to other babel scripts (app.jsx renders by route)
Object.assign(window, {
  OurServicesPage,
  CoManagedPage,
  AutomationPage
});