/* global React */
const WyrozniaPage = ({ setPage }) => {
  const pillars = [
    {
      n: "I", title: "Praktyka",
      desc: "Od lat zajmujemy się przygotowywaniem odwołań od wyników egzaminów prawniczych — adwokackich, radcowskich i notarialnych. Znamy realia tego procesu oraz najczęstsze błędy ocen.",
      list: [
        "Trafna argumentacja oparta na realnych przypadkach",
        "Znajomość najczęstszych błędów komisji egzaminacyjnych",
        "Coroczne wsparcie kandydatów w skutecznym dochodzeniu swoich racji",
      ],
    },
    {
      n: "II", title: "Skuteczność",
      desc: "Nasze działania są ukierunkowane na rezultat. Tworzymy odwołania w oparciu o sprawdzone schematy argumentacyjne i analizę wcześniejszych rozstrzygnięć.",
      list: [
        "Odwołania spójne, przekonujące i dobrze uzasadnione",
        "Konkretne uchybienia precyzyjnie wskazane i opisane",
        "Skupienie na tym, co faktycznie może wpłynąć na zmianę oceny",
      ],
    },
    {
      n: "III", title: "Pełne wsparcie",
      desc: "Towarzyszymy Ci na każdym etapie — od analizy pracy i oceny zasadności odwołania, po przygotowanie jego projektu. W razie potrzeby sporządzamy również skargi do sądu administracyjnego.",
      list: [
        "Zespół specjalistów łączący wiedzę merytoryczną z doświadczeniem proceduralnym",
        "Skargi do sądu administracyjnego — jeśli sprawa tego wymaga",
        "Kompleksowe i przemyślane działanie na każdym etapie postępowania",
      ],
    },
  ];

  return (
    <main>
      <PageIntro
        setPage={setPage}
        crumb="Co nas wyróżnia"
        title="Co nas wyróżnia."
        lead="Łączymy doświadczenie procesowe z dokładną analizą każdej sprawy. Trzy filary, które czynią naszą pracę skuteczną."
      />

      <section className="cor-section">
        <div className="cor-container">
          <div style={{ display: "flex", flexDirection: "column", gap: 0 }}>
            {pillars.map((p, i) => (
              <div key={p.n} style={{
                display: "grid",
                gridTemplateColumns: "180px 1fr 1.2fr",
                gap: 56,
                padding: "56px 0",
                borderTop: "1px solid var(--ink-200)",
                borderBottom: i === pillars.length - 1 ? "1px solid var(--ink-200)" : "none",
                alignItems: "start",
              }}>
                <div>
                  <span style={{ fontFamily: "var(--serif)", color: "var(--accent)", fontSize: 88, fontWeight: 500, lineHeight: 1 }}>{p.n}</span>
                </div>
                <div>
                  <span className="cor-eyebrow">Filar {p.n}</span>
                  <h2 className="cor-h2" style={{ marginTop: 12, fontSize: 44 }}>{p.title}</h2>
                </div>
                <div>
                  <p className="cor-lead" style={{ fontSize: 18 }}>{p.desc}</p>
                  <ul style={{ listStyle: "none", padding: 0, margin: "24px 0 0", display: "flex", flexDirection: "column", gap: 12 }}>
                    {p.list.map(item => (
                      <li key={item} style={{ display: "flex", gap: 14, fontSize: 15.5, color: "var(--ink-700)", lineHeight: 1.55 }}>
                        <span style={{ marginTop: 9, width: 16, height: 1.5, background: "var(--accent)", flexShrink: 0 }}></span>
                        {item}
                      </li>
                    ))}
                  </ul>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Wartości / cytat */}
      <section className="cor-section cor-section--green">
        <div className="cor-narrow" style={{ textAlign: "center" }}>
          <span className="cor-eyebrow" style={{ color: "var(--green-500)" }}>Nasze podejście</span>
          <p className="cor-h1" style={{ marginTop: 24, fontSize: "clamp(32px, 3.6vw, 52px)", fontWeight: 500, color: "var(--paper-50)", textWrap: "balance" }}>
            „Nie ograniczamy się do napisania odwołania. Czytamy Twoją pracę, sprawdzamy tok rozumowania i porównujemy go z tym, jak podchodzą do tego egzaminatorzy."
          </p>
          <div style={{ marginTop: 32, height: 1, width: 48, background: "var(--green-500)", margin: "32px auto 0" }}></div>
          <p style={{ marginTop: 24, fontFamily: "var(--mono)", fontSize: 11, letterSpacing: ".22em", textTransform: "uppercase", color: "var(--green-500)" }}>
            Zespół Centrum Odwołań Prawniczych
          </p>
        </div>
      </section>

      <CtaBanner setPage={setPage} />
    </main>
  );
};

window.WyrozniaPage = WyrozniaPage;