/* =========================================================
   SIGNET — Services overview + detail
   ========================================================= */

const ServicesOverview = ({ go }) => (
  <main className="page-fade">
    <section className="page-head">
      <div className="shell">
        <span className="eyebrow">What we do</span>
        <h1>The full IT picture, under one signature.</h1>
        <p>
          Nine practice areas, one accountable team, one monthly invoice.
          Pick a service to go deep, or talk to us and we'll scope a plan
          that fits your stage.
        </p>
      </div>
    </section>

    <div className="shell">
      <div className="services-list">
        {SERVICES.map((s) => (
          <div key={s.id} className="service-row" onClick={() => go("service-detail", s.id)}>
            <span className="num">{s.num}</span>
            <div>
              <h3>{s.name}</h3>
              <p>{s.long}</p>
              <div className="tags">
                {s.tags.map((t) => <span key={t} className="service-tag">{t}</span>)}
              </div>
            </div>
            <div style={{ alignSelf: "center", textAlign: "right" }}>
              <span className="btn btn-quiet" style={{ padding: 0 }}>
                Learn more <Arrow />
              </span>
            </div>
          </div>
        ))}
      </div>
    </div>

    <CtaStrip go={go} />
  </main>
);

const ServiceDetail = ({ serviceId, go }) => {
  const service = SERVICES.find((s) => s.id === serviceId) || SERVICES[2]; // default security
  const [activeAnchor, setActiveAnchor] = React.useState("overview");

  // Different content shape per service; we keep it generic but tailored.
  const features = {
    helpdesk: [
      { t: "Direct line, named team", d: "Email, Microsoft Teams, or phone — whichever lands fastest. Your entire team sees the full activity history for your account, every time." },
      { t: "Average 4-minute response", d: "Measured on the first human reply, not the autoresponder." },
      { t: "ITIL-certified agents", d: "Every engineer on the desk holds an ITIL 4 Foundation certification at minimum — incident, problem, and change management run to a published standard, not by feel." },
      { t: "Knowledge stays put", d: "Every resolution is documented in a ticket for quick reference and trend analysis." },
    ],
    devices: [
      { t: "Zero-touch deployment", d: "New laptop ships to the new hire, configures itself on first boot. No IT visit required." },
      { t: "Systems updated weekly", d: "Every managed device gets weekly OS and third-party app updates on a regular cadence, so nothing drifts out of date." },
      { t: "Patching that doesn't surprise", d: "Maintenance windows you set, rollouts staged across rings, failures rolled back." },
      { t: "Loss & theft response", d: "Same-day remote wipe with chain-of-custody log for HR and legal." },
      { t: "Asset inventory & lifecycle", d: "Every laptop, monitor, dock, and license tagged and tracked — with deprecation schedules so refresh-and-retire happens on a plan, not a panic. You always know what you own, where it lives, and when it ages out." },
      { t: "Standard imaging", d: "One image per role — engineering, sales, finance — kept current and documented." },
    ],
    security: [
      { t: "SentinelOne managed EDR", d: "Enterprise-grade endpoint detection and response — deployed, tuned, and monitored by our SOC. Autonomous rollback on ransomware, behavioral threat hunting, and signal that's actually actionable." },
      { t: "Hardened next-gen firewalls", d: "Fortinet, Palo Alto, or Meraki deployed with intrusion prevention, SSL inspection, geo-blocking, and segmented VLANs. Default-deny posture, not default-allow." },
      { t: "24/7 SOC monitoring", d: "Tier-2 analysts watching your EDR, firewall, and identity signals around the clock, with sub-15-minute triage on confirmed threats." },
      { t: "Compliance frameworks", d: "CMMC Level 1–2, SOC 2 Type II, HIPAA, PCI-DSS, ISO 27001, and NIST CSF — gap assessment, remediation, evidence collection, and auditor liaison from kickoff through report." },
      { t: "Phishing & awareness", d: "Quarterly simulations and just-in-time micro-training tailored to your industry's actual threat patterns. We measure the click rate down to under 3% within a year." },
      { t: "Quarterly tabletop exercises", d: "We rehearse a real incident with your leadership team. The first time you handle a breach shouldn't be a real breach." },
    ],
    cloud: [
      { t: "Multi-cloud comfortable", d: "Deep practice in AWS, Azure, and GCP. Honest about where each one fits your workload." },
      { t: "FinOps reviews", d: "Monthly cost walk-through. We've recovered an average of $4k per client per month in waste." },
      { t: "Migrations done right", d: "Lift-and-shift, replatform, or refactor — we'll tell you which one your application actually needs." },
      { t: "Resilience built in", d: "Multi-AZ by default, multi-region when your RTO demands it. Tested, not hoped." },
    ],
    ai: [
      { t: "Workflow automation", d: "We map the repetitive work draining your team — ticket triage, sales follow-up, document drafting, data entry — and replace it with reliable AI pipelines you actually trust." },
      { t: "Copilot rollouts done right", d: "Microsoft 365 Copilot and ChatGPT Enterprise — deployed with the data governance, prompt libraries, and training that make adoption land instead of fizzle." },
      { t: "Custom agents for your stack", d: "Internal assistants wired into your knowledge base, ticketing system, CRM, or data warehouse. Built on the model that fits the job — and swappable when a better one ships." },
      { t: "Governance from day one", d: "Data classification, retention, usage logging, and acceptable-use policy. AI without the legal and security afterthought." },
    ],
    workspace: [
      { t: "Tenant hardening", d: "Conditional access, MFA enforcement, legacy auth blocked, audit logging on. The boring work that stops breaches." },
      { t: "Teams as your collaboration hub", d: "Channels, meetings, calling, and shared files configured the way modern teams actually work — with governance policies that keep the sprawl in check." },
      { t: "License right-sizing", d: "Most clients save 15-30% on their M365 spend within 60 days of takeover. We model usage per role and trim the rest." },
      { t: "Tenant migrations & consolidation", d: "Bring scattered M365 tenants under one well-run roof — calendars, mail, shared drives, identity, all of it, with no lost mail." },
      { t: "Identity that scales", d: "Entra ID configured for SSO across every SaaS app your team uses, with conditional access and lifecycle automation." },
    ],
    network: [
      { t: "Built on Ubiquiti UniFi", d: "Switching, wireless, gateways, and cameras on one well-tuned platform — designed, deployed, and operated as a single cohesive system rather than a patchwork of vendors." },
      { t: "VPN, site-to-site and remote", d: "Encrypted tunnels between your offices and clouds, plus zero-trust remote access for your team wherever they're working. Built for speed and audited for safety." },
      { t: "5G failover at every site", d: "When fiber goes down, cellular picks up — automatically, transparently, and without anyone reaching for a phone. Monitored and drill-tested so you never wonder if it'll work." },
      { t: "L3 & L7 firewalls", d: "Traditional Layer 3 traffic control paired with Layer 7 deep packet inspection. Application-aware policies that catch threats and shadow IT a port-only firewall would wave through." },
      { t: "Continuous monitoring", d: "Synthetic probes run from every site, surfacing degradation before tickets do. Quarterly capacity reviews mean refreshes happen on plan — never in panic." },
    ],
    vcio: [
      { t: "Equipment & license procurement", d: "We source and order every laptop, switch, monitor, and license through our vendor relationships — at pass-through pricing, with no kickbacks or markups. You see the original invoice." },
      { t: "Asset tracking, end to end", d: "Every device and license tracked from purchase order through assignment, refresh, and disposal. A single source of truth for what you own, where it lives, and when it ages out." },
      { t: "ISP & telco management", d: "Internet circuits, business phone lines, and SD-WAN contracts negotiated, monitored, and renegotiated as the market moves. We handle the carrier so you don't have to." },
      { t: "AI subscription cost management", d: "Copilot, ChatGPT Enterprise, Claude, and the rest — tracked per seat, audited for unused licenses, and rebalanced quarterly so AI spend stays connected to actual value." },
      { t: "Renewal negotiation", d: "Every major contract renewal is on our calendar before it's on yours. Microsoft, Adobe, Zoom, and security vendors all get re-priced through us. Average 18% off list at renewal." },
      { t: "Vendor neutrality", d: "We don't take margins, rebates, or rewards from anyone we recommend. Our advice is yours — not theirs." },
    ],
    backup: [
      { t: "Monitored backups", d: "Every backup job is watched by our team. Failures are caught, retried, and resolved before they become a Monday-morning surprise." },
      { t: "Written DR plans", d: "A documented disaster recovery plan for your environment — RTOs, RPOs, runbooks, contact trees, and decision authority — written down and kept current." },
      { t: "Annual tabletop exercises", d: "Once a year we sit your leadership team down and run a realistic incident scenario. The first time you handle a real outage shouldn't be the first time anyone's read the plan." },
      { t: "3-2-1 architecture", d: "Three copies, two media, one off-site — for endpoints, servers, and SaaS data alike." },
      { t: "SaaS-aware", d: "Microsoft 365, Salesforce, GitHub, and the rest — the data you'd lose if your provider had a bad day." },
      { t: "Real RTOs", d: "Service-tier RTOs you can quote to your board, measured against real drills." },
    ],
    onboarding: [
      { t: "Day-1 ready hires", d: "Laptop, accounts, licenses, and access provisioned before the new hire's first standup." },
      { t: "Live new-hire orientation", d: "Every new hire gets a real onboarding session with one of our engineers — a walkthrough of their laptop, Microsoft 365, Teams, VPN, security expectations, and how to reach support. They start their first week confident, not confused." },
      { t: "Standardized hire packets", d: "By role — engineering, sales, finance — so every new hire gets a consistent setup matched to what they actually need." },
      { t: "Same-day offboarding", d: "Access revoked, mailbox archived, device retrieval kicked off — within hours of HR's signal." },
      { t: "Audit trail", d: "Every provisioning and deprovisioning action logged for compliance and legal review." },
    ],
  };

  const f = features[service.id] || features.security;

  React.useEffect(() => {
    const handler = () => {
      const sections = ["overview", "what", "how", "deliverables"];
      const y = window.scrollY + 200;
      let current = "overview";
      for (const id of sections) {
        const el = document.getElementById(id);
        if (el && el.offsetTop <= y) current = id;
      }
      setActiveAnchor(current);
    };
    window.addEventListener("scroll", handler, { passive: true });
    return () => window.removeEventListener("scroll", handler);
  }, []);

  const scrollTo = (id) => {
    const el = document.getElementById(id);
    if (el) window.scrollTo({ top: el.offsetTop - 80, behavior: "smooth" });
  };

  return (
    <main className="page-fade">
      <section className="page-head">
        <div className="shell">
          <div onClick={() => go("services")} style={{ cursor: "pointer", fontFamily: "var(--mono)", fontSize: 12, letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--ink-soft)", marginBottom: 24 }}>
            ← All services
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "1fr auto", gap: 40, alignItems: "end" }}>
            <div>
              <span className="eyebrow">{service.num} — Service</span>
              <h1 style={{ marginTop: 12 }}>{service.name}</h1>
              <p>{service.long}</p>
            </div>
            <span className="logo-mark lg"><QuillMark size={52} /></span>
          </div>
          <div className="tags" style={{ marginTop: 32, display: "flex", flexWrap: "wrap", gap: 8 }}>
            {service.tags.map((t) => <span key={t} className="service-tag">{t}</span>)}
          </div>
        </div>
      </section>

      <div className="shell">
        <div className="detail-body">
          <nav className="detail-toc">
            <span className="eyebrow" style={{ paddingLeft: 12, marginBottom: 8 }}>On this page</span>
            <a className={activeAnchor === "overview" ? "active" : ""} onClick={() => scrollTo("overview")}>Overview</a>
            <a className={activeAnchor === "what" ? "active" : ""} onClick={() => scrollTo("what")}>What's included</a>
            <a className={activeAnchor === "how" ? "active" : ""} onClick={() => scrollTo("how")}>How it works</a>
            <a className={activeAnchor === "deliverables" ? "active" : ""} onClick={() => scrollTo("deliverables")}>Deliverables</a>
          </nav>

          <div>
            <div id="overview" className="detail-section">
              <span className="eyebrow">Overview</span>
              <h2 style={{ marginTop: 12 }}>The story behind this practice.</h2>
              <p>
                {service.name} is one of nine practice areas at Signet, but it
                lives inside the same accountable team that handles your whole
                stack. That means context never gets lost when a problem
                crosses domains — the engineer fielding your endpoint alert
                already knows which app your sales team can't lose.
              </p>
              <p>
                Reach us via email at <a href="mailto:Tickets@signet.ms" style={{ color: "var(--gold-bright)" }}>Tickets@signet.ms</a>, in a Microsoft Teams chat, or over the phone. Our goal is for your team to think of us as co-workers — not a vendor on the other side of a portal.
              </p>
            </div>

            <div id="what" className="detail-section">
              <span className="eyebrow">What's included</span>
              <h2 style={{ marginTop: 12 }}>The work, plainly.</h2>
              <div className="feature-list">
                {f.map((feat) => (
                  <div key={feat.t} className="feature">
                    <div className="feature-icon">✓</div>
                    <h4>{feat.t}</h4>
                    <p>{feat.d}</p>
                  </div>
                ))}
              </div>
            </div>

            <div id="how" className="detail-section">
              <span className="eyebrow">How it works</span>
              <h2 style={{ marginTop: 12 }}>Four checkpoints, then steady state.</h2>
              <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 16, marginTop: 32 }}>
                {[
                  { n: "01", t: "Discovery", d: "We listen, audit, and document — no proposal yet." },
                  { n: "02", t: "Plan", d: "Right-sized scope, written down, signed by both sides." },
                  { n: "03", t: "Cutover", d: "We do the work. You stay focused on your business." },
                  { n: "04", t: "Operate", d: "Quarterly reviews and ongoing tuning." },
                ].map((step) => (
                  <div key={step.n} style={{ borderTop: "1px solid var(--paper-edge)", paddingTop: 20 }}>
                    <span style={{ fontFamily: "var(--mono)", fontSize: 11, letterSpacing: "0.14em", color: "var(--gold)" }}>{step.n}</span>
                    <h4 style={{ marginTop: 12, fontSize: 18 }}>{step.t}</h4>
                    <p style={{ marginTop: 8, fontSize: 14, color: "var(--ink-soft)" }}>{step.d}</p>
                  </div>
                ))}
              </div>
            </div>

            <div id="deliverables" className="detail-section">
              <span className="eyebrow">Deliverables</span>
              <h2 style={{ marginTop: 12 }}>What you walk away owning.</h2>
              <ul style={{ listStyle: "none", padding: 0, marginTop: 24 }}>
                {[
                  "Documented playbook covering escalation paths and decision authority.",
                  "Quarterly business review with your assigned principal.",
                  "Annual roadmap aligned to your budget and growth plan.",
                ].map((d, i) => (
                  <li key={i} style={{ display: "flex", gap: 16, padding: "16px 0", borderTop: "1px solid var(--paper-edge)" }}>
                    <span style={{ fontFamily: "var(--mono)", fontSize: 12, color: "var(--gold)", minWidth: 36 }}>{String(i + 1).padStart(2, "0")}</span>
                    <span style={{ fontSize: 16 }}>{d}</span>
                  </li>
                ))}
              </ul>
            </div>

            <div style={{ background: "var(--surface-warm)", border: "1px solid var(--paper-edge)", borderRadius: 14, padding: 40, marginTop: 32 }}>
              <span className="eyebrow">Talk to us</span>
              <h3 style={{ marginTop: 12, fontSize: 28 }}>Ready to put a signature on {service.name.toLowerCase()}?</h3>
              <p style={{ marginTop: 12, color: "var(--ink-soft)", maxWidth: 520 }}>
                We'll spend 30 minutes understanding where you are, then send
                you a scoped plan within 48 hours. No pressure.
              </p>
              <div style={{ marginTop: 24, display: "flex", gap: 12 }}>
                <button className="btn btn-primary" onClick={() => go("contact")}>
                  Book a consult <Arrow />
                </button>
                <button className="btn btn-ghost" onClick={() => go("services")}>
                  Other services
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </main>
  );
};

window.ServicesOverview = ServicesOverview;
window.ServiceDetail = ServiceDetail;