/* =========================================================
   SIGNET — shared components (Midnight + Gold)
   Custom quill logo, Nav, Footer, etc.
   ========================================================= */

// Custom logo — wax seal with gold "SI" monogram
const QuillMark = ({ size = 36 }) => (
  <img
    src="img/seal.png"
    alt="Signet"
    width={size}
    height={size}
    style={{ display: "block", width: size, height: size, objectFit: "contain" }}
  />
);

const Logo = ({ go, size = "md" }) => (
  <div className="logo" onClick={() => go("home")}>
    <span className={`logo-mark ${size === "lg" ? "lg" : size === "xl" ? "xl" : ""}`}>
      <QuillMark size={size === "lg" ? 52 : size === "xl" ? 88 : 36} />
    </span>
    <span className="logo-word">Signet</span>
  </div>
);

const Placeholder = ({ label, compact }) => (
  <div className={`placeholder-img ${compact ? "compact" : ""}`}>
    {label && <span className="placeholder-label">{label}</span>}
  </div>
);

const Arrow = ({ className = "" }) => (
  <span className={`arrow ${className}`} aria-hidden="true">→</span>
);

// Decorative gold flourish (echo of the ink stroke in the hero)
const Flourish = ({ width = 80 }) => (
  <svg viewBox="0 0 80 12" width={width} height={12} fill="none" xmlns="http://www.w3.org/2000/svg" style={{ display: "block" }}>
    <path
      d="M1 6 Q 12 1, 24 6 Q 32 10, 42 5 Q 54 0, 68 6 Q 74 9, 79 6"
      stroke="#d4a85a" strokeWidth="1.2" strokeLinecap="round" fill="none"
    />
  </svg>
);

const SignatureMark = ({ width = 200 }) => (
  <svg viewBox="0 0 200 40" width={width} height={40 * (width / 200)} fill="none" xmlns="http://www.w3.org/2000/svg" style={{ display: "block" }}>
    <path
      d="M6 32
         Q 14 26, 22 30
         Q 30 34, 40 28
         Q 50 22, 56 14
         Q 60 8, 66 12
         Q 72 18, 80 22
         Q 92 26, 104 22
         Q 116 18, 128 24
         Q 140 30, 154 24
         Q 168 18, 184 22
         Q 192 24, 196 26"
      stroke="#d4a85a" strokeWidth="1.3" strokeLinecap="round" fill="none"
    />
    {/* underline flourish */}
    <path
      d="M40 36 Q 80 38, 120 36"
      stroke="#d4a85a" strokeWidth="0.8" strokeLinecap="round" fill="none" opacity="0.6"
    />
  </svg>
);

const Nav = ({ page, go, transparent }) => {
  const links = [
    { id: "services", label: "Services" },
    { id: "solutions", label: "Solutions" },
    { id: "pricing", label: "Pricing" },
    { id: "cases", label: "Case studies" },
    { id: "blog", label: "Resources" },
  ];
  return (
    <header className={`nav ${transparent ? "transparent" : ""}`}>
      <div className="shell nav-inner">
        <Logo go={go} />
        <nav className="nav-links">
          {links.map((l) => (
            <a
              key={l.id}
              className={`nav-link ${page === l.id || (l.id === "services" && page === "service-detail") ? "active" : ""}`}
              onClick={() => go(l.id)}
            >
              {l.label}
            </a>
          ))}
        </nav>
        <div style={{ display: "flex", gap: 14, alignItems: "center" }}>
          {/* Client portal not live yet — re-enable this link when the portal launches.
          <a className="nav-link" href="Client Portal.html">
            Client login
          </a>
          */}
          <button className="nav-cta" onClick={() => go("contact")}>
            Talk to us <Arrow />
          </button>
        </div>
      </div>
    </header>
  );
};

const Footer = ({ go }) => (
  <footer className="footer">
    <div className="shell">
      <div className="footer-grid">
        <div>
          <Logo go={go} />
          <p style={{ color: "var(--ivory-soft)", fontSize: 14, maxWidth: 300, lineHeight: 1.65, marginTop: 24 }}>
            Managed IT, security, and strategy for growing teams across the
            United States. Every engagement carries our signature.
          </p>
          <div style={{ marginTop: 28 }}>
            <SignatureMark width={160} />
          </div>
        </div>
        <div>
          <h5>Services</h5>
          <a className="footer-link" onClick={() => go("services")}>Helpdesk</a>
          <a className="footer-link" onClick={() => go("services")}>Device management</a>
          <a className="footer-link" onClick={() => go("services")}>Cybersecurity</a>
          <a className="footer-link" onClick={() => go("services")}>AI integration</a>
          <a className="footer-link" onClick={() => go("services")}>Microsoft 365 + Teams</a>
          <a className="footer-link" onClick={() => go("services")}>Vendor management</a>
        </div>
        <div>
          <h5>Company</h5>
          <a className="footer-link" onClick={() => go("solutions")}>Solutions</a>
          <a className="footer-link" onClick={() => go("cases")}>Case studies</a>
          <a className="footer-link" onClick={() => go("blog")}>Resources</a>
          <a className="footer-link" onClick={() => go("pricing")}>Pricing</a>
          <a className="footer-link">Careers</a>
        </div>
        <div>
          <h5>Contact</h5>
          <a className="footer-link" onClick={() => go("contact")}>Talk to an expert</a>
          <a className="footer-link">Client support</a>
          <a className="footer-link">hello@signet.ms</a>
          <a className="footer-link" href="tel:+12069707848">206.970.7848</a>
        </div>
        <div>
          <h5>Trust</h5>
          <a className="footer-link">SOC 2 Type II</a>
          <a className="footer-link">HIPAA</a>
          <a className="footer-link">Status page</a>
          <a className="footer-link">Privacy</a>
          <a className="footer-link">Security</a>
        </div>
      </div>
      <div className="footer-bottom">
        <span>© 2026 Signet Managed IT Services</span>
        <span style={{ fontStyle: "italic", fontFamily: "var(--serif)", letterSpacing: 0, fontSize: 14, color: "var(--gold)" }}>
          Sealed. Signed. Delivered.
        </span>
        <span>Made in Seattle</span>
      </div>
    </div>
  </footer>
);

const CtaStrip = ({ go }) => (
  <div className="shell">
    <div className="cta-strip">
      <div>
        <span className="eyebrow">A signature commitment</span>
        <h2 style={{ marginTop: 20 }}>
          Let's see if we're <em>a fit</em>.
        </h2>
        <p>30-minute intro call with a principal engineer — not a sales rep. No pressure, real answers.</p>
        <div style={{ marginTop: 28 }}>
          <SignatureMark width={180} />
        </div>
      </div>
      <div className="cta-actions">
        <button className="btn btn-primary" onClick={() => go("contact")}>
          Book intro call <Arrow />
        </button>
        <button className="btn btn-ghost" onClick={() => go("pricing")}>See pricing</button>
      </div>
    </div>
  </div>
);

// Shared service data — used across pages
const SERVICES = [
  {
    id: "helpdesk",
    num: "01",
    name: "Helpdesk & end-user support",
    short: "A real human, on the first ring, who already knows you and your environment.",
    long: "Tier 1 through Tier 3 in one place. Average first response under 4 minutes. No scripted prompts, no offshore queues — your team gets the same three engineers who built your environment.",
    tags: ["US-based", "<4 min response"],
  },
  {
    id: "devices",
    num: "02",
    name: "Device & endpoint management",
    short: "Laptops, phones, and conference rooms — provisioned, managed, and updated weekly.",
    long: "Zero-touch deployment for Mac and Windows. Systems are updated weekly — OS patches, security baselines, and third-party app updates applied on a regular cadence so nothing drifts out of date. MDM enrollment and full-disk encryption enforced from day one. Lose a laptop? We wipe it before lunch.",
    tags: ["Updated weekly", "Zero-touch deploy", "MDM"],
  },
  {
    id: "security",
    num: "03",
    name: "Cybersecurity & compliance",
    short: "SentinelOne EDR, hardened firewalls, and a SOC that doesn't sleep. Audit-ready for CMMC, SOC 2, HIPAA, and PCI.",
    long: "SentinelOne-managed EDR, hardened next-generation firewalls, 24/7 SOC, and phishing simulation — backed by audit-ready frameworks for CMMC, SOC 2, HIPAA, PCI-DSS, ISO 27001, and NIST CSF. We don't sell fear. We sell quiet nights.",
    tags: ["SentinelOne EDR", "Hardened firewalls", "SOC 2 · HIPAA · CMMC · PCI"],
  },
  {
    id: "ai",
    num: "04",
    name: "AI integration & automation",
    short: "Automate the workflows draining your team's time. Ignite the productivity already on your payroll.",
    long: "We embed AI into the work you're already doing — drafting, triage, summarization, knowledge retrieval, ticket routing. The result is a team that ships more, faster, without adding headcount. We handle model selection, data governance, integration, and the change management that makes adoption actually stick.",
    tags: ["Workflow automation", "Copilot rollouts", "Custom agents"],
  },
  {
    id: "workspace",
    num: "05",
    name: "Microsoft 365 with Teams",
    short: "Email, identity, and Teams collaboration tuned to how your team actually works.",
    long: "Tenant hardening, SSO rollout, license right-sizing, and the migrations and consolidations that bring scattered M365 environments under one well-run roof. Teams configured as the hub for chat, meetings, calling, and shared files — with conditional access set up right.",
    tags: ["M365", "Teams", "Conditional access"],
  },
  {
    id: "network",
    num: "06",
    name: "Network management",
    short: "Ubiquiti UniFi networks with VPN, 5G failover, and Layer 3 & 7 firewalls — quietly running in the background.",
    long: "We design and run wired, wireless, and SD-WAN networks on the Ubiquiti UniFi platform — a single, well-tuned stack rather than a vendor zoo. Site-to-site and remote-access VPN connect your offices, cloud, and people. Cellular 5G failover keeps you online when fiber doesn't. And combined Layer 3 and Layer 7 firewalls give you application-aware protection that catches what port-level filtering misses. Continuous monitoring surfaces trouble before tickets do.",
    tags: ["Ubiquiti UniFi", "5G failover", "L3 & L7 firewalls"],
  },
  {
    id: "vcio",
    num: "07",
    name: "Vendor management",
    short: "Equipment, licenses, ISPs, telco, and AI spend — procured, tracked, and renegotiated on your behalf.",
    long: "We sit on your side of the table with every vendor your business depends on. Equipment and license procurement happens through us at pass-through pricing. Every asset is tracked from purchase to disposal. ISP, telco, and AI subscription costs are reviewed and renegotiated continuously — saving most clients more in renewals than they pay us for the service.",
    tags: ["Procurement", "Asset tracking", "Renewal negotiation"],
  },
  {
    id: "backup",
    num: "08",
    name: "Backup & business continuity",
    short: "Monitored backups, written DR plans, and annual tabletops — so recovery is rehearsed, not improvised.",
    long: "3-2-1 backup architecture for endpoints, servers, and SaaS data — actively monitored by our team, with failed jobs caught and re-run before you'd ever notice. Every client gets a written disaster recovery plan with documented RTOs and RPOs, and we run a tabletop exercise with your leadership once a year so the playbook is muscle memory, not paperwork.",
    tags: ["Monitored backups", "Written DR plans", "Annual tabletops"],
  },
  {
    id: "onboarding",
    num: "09",
    name: "Onboarding & offboarding",
    short: "New hires productive on day one — with a real orientation, not a shrink-wrapped laptop. Departing accounts revoked in minutes.",
    long: "Standardized hire packets, automated provisioning, and a live IT orientation so every new hire actually knows how to use what they've been given. Same-day offboarding with a full audit trail. The unglamorous work that keeps your security posture honest.",
    tags: ["Day-1 ready", "New-hire orientation", "Same-day offboard"],
  },
];

Object.assign(window, {
  QuillMark, Logo, Placeholder, Arrow, Flourish, SignatureMark,
  Nav, Footer, CtaStrip, SERVICES,
});