/* =========================================================
   SIGNET — Case studies
   ========================================================= */

const CASES = [
  {
    id: "seattle-arch",
    industry: "Engineering & Architecture",
    size: "48 employees",
    title: "Seattle architecture firm cuts Priority 1 incidents by 85% in first year.",
    summary: "A 48-person Seattle studio specializing in the renovation of historical buildings replaced two MSPs, an internal sysadmin, and a security vendor with one Signet pod — and the daily friction quietly went away.",
    results: [
      { n: "85%", l: "fewer Priority 1 incidents" },
      { n: "55%", l: "performance boost to Revit" },
      { n: "$0", l: "billable hours lost" },
    ],
  },
  {
    id: "bellegrove",
    industry: "Warehouse",
    size: "16 employees",
    title: "Bellegrove Medical Supplies cut IT operating costs by 40%.",
    summary: "A 16-person medical supplies distributor was paying for peak cloud capacity around the clock. We rightsized their footprint, replaced static workloads with auto-scaling tiers, and built off-hours schedules that quietly throttle services when no one's signed in.",
    results: [
      { n: "40%", l: "lower IT operating costs" },
      { n: "65%", l: "off-hours infra savings" },
      { n: "0", l: "performance complaints" },
    ],
  },
  {
    id: "northbrook",
    industry: "Healthcare",
    size: "14 employees",
    title: "Archer Orthodontics Group consolidated three clinics into one tech stack.",
    summary: "A 14-person orthodontics practice running parallel systems across multiple sites. We consolidated their multisite operation into a single tech stack to streamline operations and reduce operating costs \u2014 saving $45,000 in the first year while ensuring HIPAA compliance.",
    results: [
      { n: "$45k", l: "saved in year one" },
      { n: "3\u21921", l: "sites on one stack" },
      { n: "0", l: "HIPAA findings" },
    ],
  },
  {
    id: "vesper",
    industry: "Legal",
    size: "12 employees",
    title: "Cook & Bartlett unified voice, fax, email, and CRM on one stack.",
    summary: "A 12-attorney firm juggling separate systems for phone, fax, email, and client records. We delivered a unified communications platform — voice, fax, email, and CRM integrated on a single stack — so a single inbound call lands in the right matter, with the right history, on the right desk.",
    results: [
      { n: "1", l: "unified comms stack" },
      { n: "4\u21921", l: "systems consolidated" },
      { n: "0 hrs", l: "billable downtime" },
    ],
  },
  {
    id: "marin",
    industry: "Wealth Management",
    size: "5 employees",
    title: "Helm Capital Management standardized their tech stack and lifted uptime to 99.99%.",
    summary: "A wealth-management firm running mismatched tools across advisors, ops, and compliance. We standardized their tech stack on a single, supported foundation — retiring one-off apps, unifying identity, and hardening the network — which sharply improved system uptime and gave leadership one place to look when something needed attention.",
    results: [
      { n: "99.99%", l: "system uptime" },
      { n: "1", l: "standardized stack" },
      { n: "1 day", l: "to onboard hires" },
    ],
  },
  {
    id: "calder",
    industry: "Property Management",
    size: "15 employees",
    title: "Prospector Properties cut CCTV and access control costs by 70%.",
    summary: "A growing property management firm needed CCTV and access control they could actually rely on across their portfolio. We designed and installed a modern, IP-based system end to end — cameras, readers, controllers, and cloud management — for 70% less than the traditional CCTV and access control bids they had on the table.",
    results: [
      { n: "70%", l: "savings vs. traditional" },
      { n: "1", l: "unified CCTV + access" },
      { n: "24/7", l: "monitored coverage" },
    ],
  },
];

// Stylized SVG of a historic Pacific Northwest commercial building —
// the kind of brick-and-arched-window structure the Seattle architecture
// case study would actually be renovating.
const HistoricBuilding = () => (
  <svg
    viewBox="0 0 320 200"
    preserveAspectRatio="xMidYMid slice"
    style={{ position: "absolute", inset: 0, width: "100%", height: "100%", display: "block" }}
    xmlns="http://www.w3.org/2000/svg"
  >
    <defs>
      <linearGradient id="bldgGrad" x1="0%" y1="0%" x2="0%" y2="100%">
        <stop offset="0%" stopColor="#1a2754" />
        <stop offset="100%" stopColor="#08112a" />
      </linearGradient>
      <pattern id="brick" width="6" height="3" patternUnits="userSpaceOnUse">
        <rect width="6" height="3" fill="none" />
        <line x1="0" y1="3" x2="6" y2="3" stroke="#d4a85a" strokeWidth="0.3" opacity="0.25" />
        <line x1="3" y1="0" x2="3" y2="3" stroke="#d4a85a" strokeWidth="0.3" opacity="0.25" />
      </pattern>
    </defs>

    {/* night sky / atmosphere */}
    <rect width="320" height="200" fill="url(#bldgGrad)" />

    {/* faint moon */}
    <circle cx="270" cy="36" r="22" fill="#d4a85a" opacity="0.08" />
    <circle cx="270" cy="36" r="12" fill="#e9c578" opacity="0.18" />

    {/* skyline behind — distant ridge */}
    <path d="M0 130 L 30 124 L 55 130 L 80 122 L 110 128 L 140 120 L 170 126 L 200 122 L 230 128 L 260 124 L 290 128 L 320 122 L 320 200 L 0 200 Z"
          fill="#06102a" opacity="0.85" />

    {/* main building — 4-story brick commercial structure */}
    <g>
      {/* main facade */}
      <rect x="60" y="40" width="200" height="160" fill="#1f2848" stroke="#d4a85a" strokeWidth="0.8" />
      <rect x="60" y="40" width="200" height="160" fill="url(#brick)" />

      {/* cornice / ornamental top */}
      <rect x="55" y="36" width="210" height="6" fill="#2a3258" stroke="#d4a85a" strokeWidth="0.8" />
      <rect x="50" y="30" width="220" height="4" fill="#2a3258" stroke="#d4a85a" strokeWidth="0.6" />

      {/* parapet detail — small repeating bumps */}
      {[60, 90, 120, 150, 180, 210, 240].map((x) => (
        <rect key={x} x={x} y="24" width="14" height="6" fill="#2a3258" stroke="#d4a85a" strokeWidth="0.4" />
      ))}

      {/* upper-floor arched windows — rows 3 and 4 */}
      {[60, 110, 160, 210].map((y, rowIdx) => {
        if (rowIdx === 3) return null; // last row is the storefront, handled separately
        return [80, 115, 150, 185, 220].map((x) => (
          <g key={`${x}-${y}`}>
            {/* arch */}
            <path
              d={`M ${x} ${y + 20} L ${x} ${y + 8} Q ${x + 9} ${y - 2} ${x + 18} ${y + 8} L ${x + 18} ${y + 20} Z`}
              fill="#e9c578"
              opacity="0.18"
              stroke="#d4a85a"
              strokeWidth="0.7"
            />
            {/* center mullion */}
            <line x1={x + 9} y1={y + 8} x2={x + 9} y2={y + 20} stroke="#d4a85a" strokeWidth="0.4" opacity="0.5" />
            {/* horizontal divider */}
            <line x1={x} y1={y + 14} x2={x + 18} y2={y + 14} stroke="#d4a85a" strokeWidth="0.4" opacity="0.5" />
            {/* warm interior light, randomized */}
            <rect
              x={x + 1} y={y + 8} width="16" height="11"
              fill="#e9c578"
              opacity={((x + y) % 3 === 0) ? 0.4 : 0.1}
            />
          </g>
        ));
      })}

      {/* second-floor band — slightly thicker windows */}
      {[80, 115, 150, 185, 220].map((x) => (
        <g key={`f2-${x}`}>
          <rect x={x} y="158" width="18" height="22" fill="#e9c578" opacity="0.16" stroke="#d4a85a" strokeWidth="0.6" />
          <line x1={x + 9} y1="158" x2={x + 9} y2="180" stroke="#d4a85a" strokeWidth="0.4" opacity="0.5" />
          <line x1={x} y1="169" x2={x + 18} y2="169" stroke="#d4a85a" strokeWidth="0.4" opacity="0.5" />
          <rect x={x + 1} y="159" width="16" height="20" fill="#e9c578" opacity={x === 150 ? 0.5 : 0.12} />
        </g>
      ))}

      {/* ground-floor storefront */}
      <rect x="65" y="184" width="190" height="16" fill="#0a1430" stroke="#d4a85a" strokeWidth="0.7" />
      {/* awning suggestion */}
      <path d="M 65 184 L 75 188 L 245 188 L 255 184" fill="none" stroke="#d4a85a" strokeWidth="0.7" opacity="0.6" />

      {/* doorway centered */}
      <rect x="148" y="186" width="20" height="14" fill="#e9c578" opacity="0.35" />
      <line x1="158" y1="186" x2="158" y2="200" stroke="#d4a85a" strokeWidth="0.5" />

      {/* small signage line above doorway */}
      <line x1="100" y1="183" x2="220" y2="183" stroke="#d4a85a" strokeWidth="0.4" opacity="0.4" />
    </g>

    {/* lamppost on the left */}
    <line x1="40" y1="200" x2="40" y2="150" stroke="#d4a85a" strokeWidth="1" opacity="0.55" />
    <circle cx="40" cy="148" r="3" fill="#e9c578" opacity="0.55" />
    <circle cx="40" cy="148" r="6" fill="#e9c578" opacity="0.12" />

    {/* subtle ground line */}
    <line x1="0" y1="200" x2="320" y2="200" stroke="#d4a85a" strokeWidth="0.6" opacity="0.3" />
  </svg>
);

const Cases = ({ go }) => {
  const [filter, setFilter] = React.useState("All");
  const industries = ["All", ...new Set(CASES.map((c) => c.industry))];
  const filtered = filter === "All" ? CASES : CASES.filter((c) => c.industry === filter);

  return (
    <main className="page-fade">
      <section className="page-head">
        <div className="shell">
          <span className="eyebrow">Case studies</span>
          <h1>What our <em style={{ fontStyle: "italic", color: "var(--gold-bright)" }}>signature</em> looks like in practice.</h1>
          <div className="topics" style={{ marginTop: 32 }}>
            {industries.map((i) => (
              <span
                key={i}
                className={`topic ${filter === i ? "active" : ""}`}
                onClick={() => setFilter(i)}
              >
                {i}
              </span>
            ))}
          </div>
        </div>
      </section>

      <section className="tight">
        <div className="shell">
          <div className="case-grid">
            {filtered.map((c) => (
              <div key={c.id} className="case-card" style={{ cursor: "default" }}>
                <div className="case-img">
                  {c.id === "seattle-arch" ? (
                    <img
                      src="assets/seattle-smith-tower.png"
                      alt="Seattle architecture studio"
                      style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", display: "block" }}
                    />
                  ) : c.id === "bellegrove" ? (
                    <img
                      src="assets/bellegrove-ship.png"
                      alt="Bellegrove Medical Supplies"
                      style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", display: "block" }}
                    />
                  ) : c.id === "northbrook" ? (
                    <img
                      src="assets/archer-ortho.png"
                      alt="Archer Orthodontics Group"
                      style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", display: "block" }}
                    />
                  ) : c.id === "marin" ? (
                    <img
                      src="assets/helm-capital.png"
                      alt="Helm Capital Management"
                      style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "contain", background: "#f6f3ec", display: "block" }}
                    />
                  ) : c.id === "vesper" ? (
                    <img
                      src="assets/cook-bartlett.png"
                      alt="Cook & Bartlett, PLLC"
                      style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "contain", background: "#f6f3ec", display: "block" }}
                    />
                  ) : c.id === "calder" ? (
                    <img
                      src="assets/prospector-kitsap.png"
                      alt="Prospector Properties"
                      style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", display: "block" }}
                    />
                  ) : (
                    <Placeholder label={`${c.industry.toUpperCase()} — client environment`} />
                  )}
                </div>
                <div className="case-body">
                  <div className="case-meta">
                    <span>{c.industry}</span>
                    <span>·</span>
                    <span>{c.size}</span>
                  </div>
                  <h3>{c.title}</h3>
                  <p>{c.summary}</p>
                  <div className="results">
                    {c.results.map((r, i) => (
                      <div key={i} className="result">
                        <div className="n">{r.n}</div>
                        <div className="l">{r.l}</div>
                      </div>
                    ))}
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

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

window.Cases = Cases;
