// services.jsx - "Sound familiar?" problem framing + Services grid

function Problem() {
  const pains = [
    {
      label: "CI/CD",
      title: "Releases pile up until Friday",
      body: "Your team is context-switching every deploy. Releases pile up on Friday. Hotfixes feel scary.",
      tone: "red",
    },
    {
      label: "Legacy .NET",
      title: ".NET Framework 4.x - and stuck",
      body: "WCF endpoints, IIS quirks, NuGet conflicts. Hiring is harder every year. Cloud migration keeps getting deferred.",
      tone: "blue",
    },
    {
      label: "Azure",
      title: "Three subscriptions, zero IaC",
      body: "Resources spun up by hand. Nobody knows what's running. Costs creep up. Disaster recovery? An untested wiki page.",
      tone: "red",
    },
    {
      label: "Process",
      title: "QA waiting on dev to deploy",
      body: "Manual handoffs. Spreadsheets tracking releases. Test environments break weekly.",
      tone: "blue",
    },
  ];
  return (
    <section className="section section--alt" id="problem">
      <div className="wrap">
        <div className="sb-sec-head">
          <div>
            <span className="eyebrow">Sound familiar?</span>
            <h2 className="h1" style={{ marginTop: 18, maxWidth: 18 + 'ch' }}>
              The pain is <em>specific.</em>
              <br />So is the fix.
            </h2>
          </div>
          <p className="lede" style={{ marginTop: 6 }}>
            We're a small team because we have to be selective. If any of these
            sound like your last sprint, we should talk.
          </p>
        </div>

        <div className="sb-problem-grid">
          {pains.map((p, i) => (
            <article key={i} className={"sb-pain sb-pain--" + p.tone}>
              <span className="sb-pain-num mono">0{i + 1}</span>
              <span className={"chip " + (p.tone === "red" ? "chip--red" : "chip--blue")}>{p.label}</span>
              <h3 className="h2" style={{ fontSize: 'clamp(22px, 2vw, 28px)' }}>{p.title}</h3>
              <p className="body-muted" style={{ fontSize: 14.5 }}>{p.body}</p>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

function Services({ onCTA }) {
  const services = [
    {
      tag: "CI/CD",
      title: "Fix the pipeline",
      sub: "Or set it up from scratch",
      price: "€1,800 - €3,500",
      duration: "~2 weeks per repo",
      points: [
        "Three-stage release flow: test → staging → prod",
        "Secrets out of code, into a managed vault",
        "Self-serve QA releases (no devs on the critical path)",
        "Cache, parallelize, kill the 40-minute builds",
      ],
      stack: ["Azure DevOps", "GitHub Actions", "Bicep"],
      result: "Deploy time ↓ 85%",
    },
    {
      tag: "Migration",
      title: "Migrate CI/CD",
      sub: "Jenkins, TeamCity, GitLab → modern",
      price: "€2,400 - €4,200",
      duration: "~2 weeks per platform",
      points: [
        "Audit existing pipelines, surface implicit knowledge",
        "Port jobs to Azure DevOps or GitHub Actions",
        "Reproducible builds, signed artifacts",
        "Zero downtime cutover; old & new run in parallel",
      ],
      stack: ["GH Actions", "Azure DevOps", "Docker"],
      result: "Migration without freezes",
    },
    {
      tag: ".NET",
      title: "Modernize legacy .NET",
      sub: ".NET Framework 4.x → .NET 10",
      price: "€4,500 - €18,000",
      duration: "Phased, weekly drops",
      points: [
        "Framework → modern .NET, app by app",
        "WCF → REST / gRPC with backward-compat shims",
        "Replace IIS with Kestrel + reverse proxy",
        "NuGet untangling, package consolidation",
      ],
      stack: [".NET 10", "EF Core", "OpenAPI"],
      result: "Hire from a 10× larger pool",
    },
    {
      tag: "Azure",
      title: "Stand up Azure",
      sub: "Infra-as-code from day zero",
      price: "€3,200 - €9,000",
      duration: "1-3 weeks",
      points: [
        "Subscription topology, RBAC, naming, tagging",
        "Networks, App Service / AKS, SQL, Key Vault, Monitor",
        "Bicep or Terraform - your team's choice",
        "Cost guardrails: budgets, alerts, right-sizing",
      ],
      stack: ["Bicep", "Terraform", "Azure Monitor"],
      result: "Reproducible. Auditable. Owned.",
    },
  ];

  return (
    <section className="section" id="services">
      <div className="wrap">
        <div className="sb-sec-head">
          <div>
            <span className="eyebrow">What we ship</span>
            <h2 className="h1" style={{ marginTop: 18 }}>
              Four engagements.<br />
              <em>One outcome:</em> delivery you can rely on.
            </h2>
          </div>
          <p className="lede" style={{ marginTop: 6 }}>
            Each is a fixed-fee, fixed-timeline project with a single point of
            contact (me) and a vetted team behind, ready when scope demands it.
          </p>
        </div>

        <div className="sb-services-grid">
          {services.map((s, i) => (
            <ServiceCard key={i} index={i} {...s} onCTA={onCTA} />
          ))}
        </div>

        <div className="sb-services-foot">
          <span className="kicker">Need all four?</span>
          <span style={{ fontSize: 16 }}>
            <strong>Most clients start with a €1,200 audit</strong> - we map the
            stack, score the risks, and write the 90-day plan. No commitment.
          </span>
          <button className="btn btn--ink btn--sm" onClick={onCTA}>
            Start with an audit
            <svg className="arrow" viewBox="0 0 16 16" fill="none" aria-hidden><path d="M3 8h10M9 4l4 4-4 4" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/></svg>
          </button>
        </div>
      </div>
    </section>
  );
}

function ServiceCard({ tag, title, sub, price, duration, points, stack, result, index, onCTA }) {
  const [hover, setHover] = React.useState(false);
  return (
    <article
      className="sb-svc"
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
    >
      <div className="sb-svc-head">
        <span className="chip chip--red">{tag}</span>
        <span className="sb-svc-idx mono">- {String(index + 1).padStart(2, "0")} / 04</span>
      </div>
      <h3 className="h2 sb-svc-title">{title}</h3>
      <p className="sb-svc-sub mono">{sub}</p>

      <ul className="sb-svc-points">
        {points.map((p, i) => (
          <li key={i}>
            <span className="sb-svc-dash" />
            <span>{p}</span>
          </li>
        ))}
      </ul>

      <div className="sb-svc-meta">
        <div>
          <span className="kicker">Investment</span>
          <span className="sb-svc-val">{price}</span>
        </div>
        <div>
          <span className="kicker">Timeline</span>
          <span className="sb-svc-val">{duration}</span>
        </div>
      </div>

      <div className="sb-svc-stack">
        {stack.map((s) => <span key={s} className="chip">{s}</span>)}
      </div>

      <div className="sb-svc-foot">
        <span className="sb-svc-result mono">▸ {result}</span>
        <button className="sb-svc-cta" onClick={onCTA}>
          Discuss this
          <svg width="14" height="14" viewBox="0 0 16 16" fill="none" aria-hidden><path d="M3 8h10M9 4l4 4-4 4" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/></svg>
        </button>
      </div>
    </article>
  );
}

// styles
const servicesStyles = document.createElement("style");
servicesStyles.textContent = `
  /* Shared section heading layout */
  .sb-sec-head {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: clamp(24px, 4vw, 60px);
    align-items: end;
    margin-bottom: clamp(40px, 6vw, 72px);
  }
  @media (max-width: 820px) {
    .sb-sec-head { grid-template-columns: 1fr; align-items: start; }
  }

  /* Problem grid */
  .sb-problem-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    border-top: 1px solid var(--line);
    border-left: 1px solid var(--line);
  }
  .sb-pain {
    padding: 28px 24px 32px;
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background: var(--paper);
    display: flex; flex-direction: column; gap: 14px;
    position: relative;
    transition: background .2s var(--ease);
  }
  .sb-pain:hover { background: var(--paper-2); }
  .sb-pain-num {
    position: absolute; top: 18px; right: 20px;
    font-size: 11px; color: var(--muted-2); letter-spacing: 0.08em;
  }
  .sb-pain .chip { align-self: flex-start; }
  @media (max-width: 980px) {
    .sb-problem-grid { grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 560px) {
    .sb-problem-grid { grid-template-columns: 1fr; }
  }

  /* Services grid */
  .sb-services-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
  @media (max-width: 820px) {
    .sb-services-grid { grid-template-columns: 1fr; }
  }
  .sb-svc {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 28px 28px 24px;
    display: flex; flex-direction: column; gap: 14px;
    transition: border-color .2s var(--ease), transform .2s var(--ease);
    position: relative;
    overflow: hidden;
  }
  .sb-svc::before {
    content: "";
    position: absolute; left: 0; top: 0; bottom: 0;
    width: 3px;
    background: var(--bridge-red);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform .3s var(--ease);
  }
  .sb-svc:hover { border-color: var(--line-strong); }
  .sb-svc:hover::before { transform: scaleY(1); }
  .sb-svc-head { display: flex; justify-content: space-between; align-items: center; }
  .sb-svc-idx { font-size: 11px; color: var(--muted-2); letter-spacing: 0.06em; }
  .sb-svc-title { font-size: clamp(26px, 2.4vw, 34px); margin-top: 2px; }
  .sb-svc-sub { font-size: 12px; color: var(--muted); letter-spacing: 0.04em; margin-top: -4px; }
  .sb-svc-points { list-style: none; padding: 0; margin: 6px 0 8px; display: flex; flex-direction: column; gap: 10px; }
  .sb-svc-points li {
    display: flex; gap: 12px;
    font-size: 14.5px; color: var(--ink-2); line-height: 1.45;
  }
  .sb-svc-dash {
    flex-shrink: 0; width: 14px; height: 1.5px;
    background: var(--bridge-red); margin-top: 10px;
  }
  .sb-svc-meta {
    display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
    padding: 16px 0;
    border-top: 1px dashed var(--line);
    border-bottom: 1px dashed var(--line);
  }
  .sb-svc-meta > div { display: flex; flex-direction: column; gap: 4px; }
  .sb-svc-val { font-family: var(--f-serif); font-size: 22px; color: var(--ink); letter-spacing: -0.005em; line-height: 1.1; }
  .sb-svc-stack { display: flex; flex-wrap: wrap; gap: 6px; }
  .sb-svc-foot {
    display: flex; justify-content: space-between; align-items: center;
    margin-top: 4px;
  }
  .sb-svc-result { font-size: 12px; color: var(--bridge-red); letter-spacing: 0.04em; }
  .sb-svc-cta {
    appearance: none; background: none; border: 0;
    color: var(--ink); font-size: 14px; font-weight: 500;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 0;
    border-bottom: 1px solid var(--ink);
  }
  .sb-svc-cta:hover { color: var(--bridge-red); border-color: var(--bridge-red); }
  .sb-svc-cta svg { transition: transform .2s var(--ease); }
  .sb-svc-cta:hover svg { transform: translateX(3px); }

  .sb-services-foot {
    display: flex; align-items: center; gap: 18px;
    margin-top: 32px;
    padding: 22px 26px;
    background: var(--paper-2);
    border: 1px dashed var(--line-strong);
    border-radius: var(--radius);
    color: var(--ink-2);
  }
  .sb-services-foot strong { color: var(--ink); }
  .sb-services-foot .btn { margin-left: auto; flex-shrink: 0; }
  @media (max-width: 720px) {
    .sb-services-foot { flex-direction: column; align-items: flex-start; gap: 14px; }
    .sb-services-foot .btn { margin-left: 0; }
  }
`;
document.head.appendChild(servicesStyles);

Object.assign(window, { Problem, Services });