/* global React */
const ProceduraPage = ({ setPage }) => {
  const steps = [
    {
      n: "01", title: "Analiza wyniku egzaminu",
      lead: "Pierwszym krokiem jest dokładna analiza Twojej pracy egzaminacyjnej oraz uzasadnienia oceny.",
      desc: "Sprawdzamy, czy ocena została dokonana zgodnie z obowiązującymi kryteriami oraz czy nie doszło do błędów merytorycznych lub proceduralnych.",
      bullets: [
        "Zgodność oceny z obowiązującym stanem prawnym",
        "Prawidłowość zastosowania przepisów prawa rodzinnego",
        "Spójność uzasadnienia egzaminatora",
        "Ewentualne pominięcia istotnych elementów pracy",
      ],
    },
    {
      n: "02", title: "Ocena zasadności odwołania",
      lead: "Nie każde odwołanie ma realne szanse powodzenia. Dlatego przed jego przygotowaniem dokonujemy rzetelnej oceny Twojej sytuacji.",
      desc: "Otrzymasz od nas jasną informację:",
      bullets: [
        "Czy warto wnosić odwołanie?",
        "Jakie są potencjalne argumenty?",
        "Jakie ryzyko wiąże się z postępowaniem?",
      ],
    },
    {
      n: "03", title: "Przygotowanie odwołania",
      lead: "W przypadku pozytywnej oceny zasadności sprawy przystępujemy do przygotowania odwołania.",
      desc: "Dokument obejmuje:",
      bullets: [
        "Szczegółową analizę Twojej pracy",
        "Wskazanie konkretnych błędów w ocenie",
        "Argumentację prawną opartą na aktualnych przepisach i orzecznictwie",
        "Logiczne i przejrzyste uzasadnienie stanowiska",
      ],
      footer: "Każde odwołanie przygotowywane jest indywidualnie, bez schematów i gotowych wzorów.",
    },
    {
      n: "04", title: "Złożenie odwołania",
      lead: "Po przygotowaniu dokumentu przekazujemy Ci gotowe odwołanie wraz z instrukcją jego złożenia.",
      desc: "Wskazujemy m.in.:",
      bullets: [
        "Właściwy organ do rozpoznania odwołania",
        "Wymagane terminy",
        "Formalne wymogi, których należy dochować",
      ],
      footer: "Na tym etapie masz pewność, że wszystko zostało przygotowane zgodnie z procedurą.",
    },
    {
      n: "05", title: "Postępowanie odwoławcze",
      lead: "Po wniesieniu odwołania sprawa trafia do organu drugiej instancji, który dokonuje ponownej oceny pracy.",
      desc: "W zależności od sytuacji wynik może zostać:",
      bullets: [
        "Utrzymany w dotychczasowym brzmieniu",
        "Zmieniony — ocena może zostać podwyższona",
        "Sprawa może zostać przekazana do ponownego rozpoznania",
      ],
      footer: "W razie potrzeby pozostajemy do Twojej dyspozycji na każdym etapie postępowania.",
    },
  ];

  return (
    <main>
      <PageIntro
        setPage={setPage}
        crumb="Procedura odwołania"
        title="Procedura wniesienia odwołania."
        lead="Proces odwołania od wyniku egzaminu prawniczego wymaga nie tylko znajomości przepisów, ale również umiejętności ich właściwego zastosowania w praktyce. Kluczowe znaczenie ma precyzyjna argumentacja oraz wskazanie konkretnych uchybień w ocenie pracy egzaminacyjnej."
      />

      <section className="cor-section">
        <div className="cor-container">
          <div style={{ display: "grid", gridTemplateColumns: "1fr 2fr", gap: 80, alignItems: "start" }}>
            <div style={{ position: "sticky", top: 110 }}>
              <span className="cor-eyebrow">§ Etapy procesu</span>
              <h2 className="cor-h2" style={{ marginTop: 14 }}>Pięć kroków, które prowadzą do skutecznego odwołania.</h2>
              <p className="cor-body" style={{ marginTop: 20 }}>
                Poniżej przedstawiamy, jak wygląda cały proces oraz w jaki sposób możemy Cię w nim wesprzeć.
              </p>
              <div style={{ marginTop: 32, display: "flex", flexDirection: "column", gap: 6, paddingLeft: 16, borderLeft: "1.5px solid var(--ink-200)" }}>
                {steps.map(s => (
                  <a key={s.n} href={"#step-" + s.n} style={{ fontFamily: "var(--mono)", fontSize: 12, letterSpacing: ".1em", color: "var(--ink-700)", padding: "6px 0" }}>
                    {s.n} &nbsp;·&nbsp; {s.title}
                  </a>
                ))}
              </div>
            </div>
            <div style={{ display: "flex", flexDirection: "column", gap: 0 }}>
              {steps.map((s, i) => (
                <div key={s.n} id={"step-" + s.n} style={{ paddingTop: i === 0 ? 0 : 56, paddingBottom: 56, borderTop: i === 0 ? 0 : "1px solid var(--ink-200)" }}>
                  <div style={{ display: "flex", alignItems: "baseline", gap: 18, marginBottom: 18 }}>
                    <span style={{ fontFamily: "var(--serif)", color: "var(--accent)", fontSize: 56, fontWeight: 500, lineHeight: 1 }}>{s.n}</span>
                    <h3 className="cor-h2" style={{ fontSize: 36 }}>{s.title}</h3>
                  </div>
                  <p className="cor-lead" style={{ fontSize: 18 }}>{s.lead}</p>
                  <p className="cor-body" style={{ marginTop: 16 }}>{s.desc}</p>
                  <ul style={{ listStyle: "none", padding: 0, margin: "16px 0 0", display: "flex", flexDirection: "column", gap: 10 }}>
                    {s.bullets.map(b => (
                      <li key={b} 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>
                        {b}
                      </li>
                    ))}
                  </ul>
                  {s.footer && (
                    <p className="cor-body" style={{ marginTop: 20, color: "var(--green-800)" }}>{s.footer}</p>
                  )}
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

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

window.ProceduraPage = ProceduraPage;