const Solutions = () => {
  const items = [
    {
      n: "01",
      t: "Dedykowany portal klienta",
      d: "W jednym miejscu widzisz projekty, raporty, faktury i umowy. Bez maili, bez Excela.",
      glyph: "portal",
    },
    {
      n: "02",
      t: "Help Desk 24/7",
      d: "Zgłoszenie trafia od razu do dyżurnego inżyniera. Jasny SLA i priorytet.",
      glyph: "headset",
    },
    {
      n: "03",
      t: "Prewencyjny monitoring",
      d: "Uptime, wydajność, certyfikaty, backup. Reagujemy zanim klient zauważy.",
      glyph: "pulse",
    },
    {
      n: "04",
      t: "Transparentne raporty",
      d: "Co miesiąc PDF z podsumowaniem zadań, czasu i rekomendacjami na kolejny sprint.",
      glyph: "doc",
    },
    {
      n: "05",
      t: "Elastyczne pakiety SLA",
      d: "Od podstawowego utrzymania po pełną opiekę z dedykowanym Project Managerem.",
      glyph: "stack",
    },
  ];

  return (
    <section className="sol" data-screen-label="03 Solutions">
      <header className="section-head section-head--row">
        <div>
          <div className="section-head__num mono">§03 — Rozwiązanie</div>
          <h2 className="section-head__title">Co dostajesz z&nbsp;Gorilla Software</h2>
        </div>
        <p className="section-head__sub section-head__sub--max">
          Pakiet usług, który zamienia gaszenie pożarów w przewidywalny, mierzalny proces.
          Mniej stresu, więcej sprzedaży.
        </p>
      </header>

      <div className="sol__grid">
        {items.map((it, i) => (
          <article className={`solCard ${i === 0 ? "solCard--lg" : ""}`} key={it.n}>
            <div className="solCard__glyph">
              <SolGlyph kind={it.glyph} />
            </div>
            <div className="solCard__body">
              <div className="solCard__num mono">{it.n}</div>
              <h3 className="solCard__title">{it.t}</h3>
              <p className="solCard__desc">{it.d}</p>
            </div>
          </article>
        ))}
      </div>
    </section>
  );
};

const SolGlyph = ({ kind }) => {
  // simple abstract SVG glyphs — no fake illustrations
  const common = { width: 64, height: 64, viewBox: "0 0 64 64", fill: "none", stroke: "currentColor", strokeWidth: 1.4 };
  switch (kind) {
    case "portal":
      return (
        <svg {...common}>
          <rect x="6" y="10" width="52" height="38" rx="2" />
          <path d="M6 20h52" />
          <circle cx="11" cy="15" r="1" fill="currentColor" />
          <circle cx="15" cy="15" r="1" fill="currentColor" />
          <rect x="12" y="26" width="14" height="3" />
          <rect x="12" y="32" width="22" height="3" />
          <rect x="12" y="38" width="18" height="3" />
          <rect x="40" y="26" width="12" height="15" rx="1" />
        </svg>
      );
    case "headset":
      return (
        <svg {...common}>
          <path d="M12 34v-4a20 20 0 0 1 40 0v4" />
          <rect x="8" y="34" width="10" height="14" rx="2" />
          <rect x="46" y="34" width="10" height="14" rx="2" />
          <path d="M51 48v2a6 6 0 0 1-6 6h-6" />
          <circle cx="36" cy="56" r="2" />
        </svg>
      );
    case "pulse":
      return (
        <svg {...common}>
          <circle cx="32" cy="32" r="22" />
          <path d="M10 32h8l4-10 6 20 5-14 4 4h17" />
        </svg>
      );
    case "doc":
      return (
        <svg {...common}>
          <path d="M14 6h26l10 10v42H14z" />
          <path d="M40 6v10h10" />
          <path d="M20 28h24M20 36h24M20 44h16" />
        </svg>
      );
    case "stack":
      return (
        <svg {...common}>
          <path d="M32 6 6 18l26 12 26-12z" />
          <path d="M6 32l26 12 26-12" />
          <path d="M6 46l26 12 26-12" />
        </svg>
      );
    default:
      return null;
  }
};

window.Solutions = Solutions;