/* global React */
const { useState } = React;

const HomePage = ({ setPage, brandName }) => {
  const [openFaq, setOpenFaq] = useState(0);

  const faqs = [
    { q: "Czy warto się odwołać?", a: "Tak, jeśli uważasz, że wynik jest niesprawiedliwy. Każdą sprawę analizujemy indywidualnie — sprawdzamy tok rozumowania, porównujemy go z kryteriami komisji i wskazujemy konkretne uchybienia w ocenie." },
    { q: "Kto rozpatruje odwołanie?", a: "Odwołanie rozpatruje komisja drugiego stopnia. To organ, który dokonuje ponownej oceny pracy egzaminacyjnej w oparciu o argumentację zawartą w odwołaniu." },
    { q: "Czy to zwiększa szanse na zmianę wyniku?", a: "Tak, dobrze przygotowane odwołanie może zmienić wynik. Kluczowa jest precyzyjna argumentacja oraz wskazanie konkretnych uchybień merytorycznych lub proceduralnych w ocenie pracy egzaminacyjnej." },
    { q: "W jakim terminie należy złożyć odwołanie?", a: "Termin wniesienia odwołania wynika z przepisów regulujących dany egzamin. Po analizie Twojej sytuacji wskazujemy właściwy organ oraz wymagane terminy formalne, których należy dochować." },
    { q: "Co dzieje się po wniesieniu odwołania?", a: "Sprawa trafia do organu drugiej instancji. W zależności od sytuacji wynik może zostać utrzymany, ocena może zostać zmieniona, lub sprawa może zostać przekazana do ponownego rozpoznania." },
  ];

  const services = [
    { num: "01", title: "Prawo cywilne", desc: "Egzaminy adwokackie i radcowskie — analiza pracy z części cywilnej, w tym prawa rodzinnego." },
    { num: "02", title: "Prawo karne", desc: "Odwołania od ocen z prawa karnego materialnego i procesowego — adwokackie i radcowskie." },
    { num: "03", title: "Prawo gospodarcze i handlowe", desc: "Część gospodarcza egzaminów prawniczych — analiza zadania, argumentacja, formalne wymogi." },
    { num: "04", title: "Prawo administracyjne", desc: "Odwołania od ocen z prawa administracyjnego — egzaminy adwokackie, radcowskie." },
    { num: "05", title: "Etyka i wykonywanie zawodu", desc: "Część dotycząca zasad etyki zawodowej i organizacji wykonywania zawodu prawniczego." },
    { num: "06", title: "Egzamin notarialny", desc: "Pełna obsługa odwołań od wyników egzaminu notarialnego — wszystkie części." },
  ];

  const steps = [
    { n: "I", title: "Analiza", sub: "Krok pierwszy", desc: "Dokładnie czytamy Twoją pracę i uzasadnienie oceny. Wychwytujemy możliwe błędy komisji — merytoryczne i proceduralne." },
    { n: "II", title: "Ocena zasadności", sub: "Krok drugi", desc: "Doradzamy, czy odwołanie ma realne szanse. Otrzymujesz jasną informację o argumentach, ryzyku i przebiegu sprawy." },
    { n: "III", title: "Przygotowanie", sub: "Krok trzeci", desc: "Tworzymy merytoryczny i formalnie poprawny dokument — bez schematów, w odniesieniu do realiów Twojej pracy." },
    { n: "IV", title: "Wsparcie", sub: "Krok czwarty", desc: "Pracujemy zespołowo — nad Twoim odwołaniem czuwa ekspert z dziedziny prawa oraz specjalista od procedur egzaminacyjnych." },
  ];

  return (
    <main>
      {/* HERO — dramatic dark green, two-column with visual scene */}
      <section className="cor-hero">

        {/* decorative leaves */}
        <svg className="cor-hero__leaves" viewBox="0 0 200 300" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
          <g fill="none" stroke="#c9a961" strokeWidth="1">
            <path d="M100 0 Q100 150 100 300" />
            <ellipse cx="80" cy="40" rx="20" ry="8" transform="rotate(-30 80 40)"/>
            <ellipse cx="120" cy="60" rx="20" ry="8" transform="rotate(30 120 60)"/>
            <ellipse cx="75" cy="90" rx="22" ry="9" transform="rotate(-25 75 90)"/>
            <ellipse cx="125" cy="110" rx="22" ry="9" transform="rotate(25 125 110)"/>
            <ellipse cx="70" cy="140" rx="24" ry="10" transform="rotate(-20 70 140)"/>
            <ellipse cx="130" cy="160" rx="24" ry="10" transform="rotate(20 130 160)"/>
            <ellipse cx="75" cy="190" rx="22" ry="9" transform="rotate(-25 75 190)"/>
            <ellipse cx="125" cy="210" rx="22" ry="9" transform="rotate(25 125 210)"/>
            <ellipse cx="80" cy="240" rx="20" ry="8" transform="rotate(-30 80 240)"/>
            <ellipse cx="120" cy="260" rx="20" ry="8" transform="rotate(30 120 260)"/>
          </g>
        </svg>

        <div className="cor-container cor-hero__inner">
          <div className="cor-hero__grid">

            {/* LEFT — copy (right side of grid is occupied visually by background image) */}
            <div className="cor-hero__content">
              <h1 className="cor-hero__claim">
                <span className="anim h-l1">ODWOŁANIA</span>
                <span className="accent anim h-l2 h-l2--small">od egzaminów</span>
                <span className="anim h-l3">PRAWNICZYCH</span>
              </h1>

              <p className="cor-hero__sub anim">
                Dla aplikantów adwokackich<br/>
                i&nbsp;radcowskich
              </p>

              <ul className="cor-hero__features">
                <li className="cor-hero__feature anim">
                  <span className="cor-hero__feat-icon">
                    <svg viewBox="0 0 24 24"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="9" y1="13" x2="15" y2="13"/><line x1="9" y1="17" x2="13" y2="17"/></svg>
                  </span>
                  <span className="cor-hero__feat-text">Skuteczne<br/>odwołania</span>
                </li>
                <li className="cor-hero__feature anim">
                  <span className="cor-hero__feat-icon">
                    <svg viewBox="0 0 24 24"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
                  </span>
                  <span className="cor-hero__feat-text">Profesjonalizm<br/>i&nbsp;doświadczenie</span>
                </li>
                <li className="cor-hero__feature anim">
                  <span className="cor-hero__feat-icon">
                    <svg viewBox="0 0 24 24"><path d="M3 21h18"/><path d="M5 21V10l7-5 7 5v11"/><path d="M9 21v-6h6v6"/></svg>
                  </span>
                  <span className="cor-hero__feat-text">Specjalizacja w&nbsp;prawie<br/>i&nbsp;procedurach egzaminacyjnych</span>
                </li>
                <li className="cor-hero__feature anim">
                  <span className="cor-hero__feat-icon">
                    <svg viewBox="0 0 24 24"><path d="M22 10L12 5 2 10l10 5 10-5z"/><path d="M6 12v5c0 1.7 2.7 3 6 3s6-1.3 6-3v-5"/></svg>
                  </span>
                  <span className="cor-hero__feat-text">Wsparcie dla aplikantów<br/>adwokackich i&nbsp;radcowskich</span>
                </li>
              </ul>

              <div className="cor-hero__ctas anim">
                <a className="cor-btn cor-btn--primary" onClick={() => setPage("kontakt")}>
                  Umów konsultację <ArrowIcon />
                </a>
                <a className="cor-btn cor-btn--ghost" onClick={() => setPage("procedura")}>
                  Jak pomagamy
                </a>
              </div>
            </div>

            {/* RIGHT column reserved — background image already shows the books + § scene */}
            <div className="cor-hero__visual" aria-hidden="true"></div>

          </div>
        </div>

        {/* TRUST BAR */}
        <div className="cor-hero__trust">
          <div className="cor-container">
            <div className="cor-hero__trust-grid">
              <div className="cor-hero__trust-item">
                <div className="cor-hero__trust-icon">
                  <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="6"/><circle cx="12" cy="12" r="2" fill="#c9a961" stroke="#c9a961"/></svg>
                </div>
                <div className="cor-hero__trust-text">Indywidualne<br/>podejście</div>
              </div>
              <div className="cor-hero__trust-item">
                <div className="cor-hero__trust-icon">
                  <svg viewBox="0 0 24 24"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/><polyline points="9 12 11 14 15 10"/></svg>
                </div>
                <div className="cor-hero__trust-text">Wysoka skuteczność<br/>działań</div>
              </div>
              <div className="cor-hero__trust-item">
                <div className="cor-hero__trust-icon">
                  <svg viewBox="0 0 24 24"><path d="M6 9 Q3 6 6 4 Q9 6 6 9"/><path d="M18 9 Q21 6 18 4 Q15 6 18 9"/><path d="M6 9 Q12 18 18 9"/><circle cx="12" cy="14" r="2.5"/><line x1="12" y1="17" x2="12" y2="21"/></svg>
                </div>
                <div className="cor-hero__trust-text">Wiedza<br/>i&nbsp;praktyka</div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* O NAS */}
      <section className="cor-section cor-section--paper">
        <div className="cor-container">
          <div className="cor-twocol">
            <div className="cor-twocol__aside">
              <span className="cor-eyebrow">§ 01 — O nas</span>
              <h2 className="cor-h2" style={{ marginTop: 14 }}>Doświadczeni specjaliści od procedur odwoławczych.</h2>
            </div>
            <div>
              <p className="cor-lead">
                Nasz zespół to doświadczeni specjaliści od prawa rodzinnego i procedur odwoławczych. Pomagamy aplikantom, którzy nie zgadzają się z wynikiem egzaminu prawniczego.
              </p>
              <p className="cor-body" style={{ marginTop: 20 }}>
                Każdą sprawę traktujemy indywidualnie, wiedząc, jak istotna jest dla Ciebie przyszłość zawodowa. Dzięki wieloletniemu doświadczeniu, wiemy, co decyduje o skuteczności odwołania — od precyzyjnej argumentacji po wskazanie konkretnych uchybień w ocenie pracy egzaminacyjnej.
              </p>
              <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 24, marginTop: 40, paddingTop: 32, borderTop: "1px solid var(--ink-200)" }}>
                <div>
                  <div style={{ fontFamily: "var(--serif)", fontSize: 40, color: "var(--green-900)", lineHeight: 1, fontWeight: 500 }}>+10</div>
                  <div className="cor-small" style={{ marginTop: 6 }}>lat praktyki w odwołaniach od egzaminów</div>
                </div>
                <div>
                  <div style={{ fontFamily: "var(--serif)", fontSize: 40, color: "var(--green-900)", lineHeight: 1, fontWeight: 500 }}>5</div>
                  <div className="cor-small" style={{ marginTop: 6 }}>obszarów prawa, w których pracujemy</div>
                </div>
                <div>
                  <div style={{ fontFamily: "var(--serif)", fontSize: 40, color: "var(--green-900)", lineHeight: 1, fontWeight: 500 }}>1:1</div>
                  <div className="cor-small" style={{ marginTop: 6 }}>indywidualne podejście do każdej sprawy</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* OFERTA */}
      <section className="cor-section">
        <div className="cor-container">
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "end", gap: 32, marginBottom: 48, flexWrap: "wrap" }}>
            <div style={{ maxWidth: 620 }}>
              <span className="cor-eyebrow">§ 02 — Nasza oferta</span>
              <h2 className="cor-h2" style={{ marginTop: 14 }}>Zajmujemy się odwołaniami od wyników egzaminów prawniczych.</h2>
            </div>
            <p className="cor-body" style={{ maxWidth: 360 }}>
              Pracujemy na zadaniach z różnych dziedzin prawa, które pojawiają się na egzaminach adwokackich, radcowskich i notarialnych.
            </p>
          </div>
          <div className="cor-services">
            {services.map(s => (
              <div key={s.num} className="cor-services__item">
                <span className="cor-card__num">§ {s.num}</span>
                <h4>{s.title}</h4>
                <p className="cor-body" style={{ fontSize: 15, marginTop: 8 }}>{s.desc}</p>
              </div>
            ))}
          </div>
          <p className="cor-body" style={{ marginTop: 40, maxWidth: "62ch" }}>
            Nie ograniczamy się tylko do „napisania odwołania". Najpierw dokładnie czytamy Twoją pracę, sprawdzamy tok rozumowania i porównujemy go z tym, jak podchodzą do tego egzaminatorzy. Na tej podstawie przygotowujemy odwołanie, które ma sens — nie jest ogólne, tylko odnosi się konkretnie do Twojej pracy i realiów egzaminu.
          </p>
        </div>
      </section>

      {/* JAK DZIAŁAMY */}
      <section className="cor-section cor-section--cream">
        <div className="cor-container">
          <div style={{ maxWidth: 620, marginBottom: 24 }}>
            <span className="cor-eyebrow">§ 03 — Jak działamy</span>
            <h2 className="cor-h2" style={{ marginTop: 14 }}>Cztery kroki od analizy egzaminu do gotowego odwołania.</h2>
          </div>
          <div className="cor-steps">
            {steps.map(s => (
              <div key={s.n} className="cor-step">
                <div className="cor-step__num">{s.n}</div>
                <div>
                  <div className="cor-step__sub">{s.sub}</div>
                  <h3 className="cor-h3" style={{ marginTop: 6 }}>{s.title}</h3>
                </div>
                <div className="cor-body" style={{ fontSize: 15.5 }}>{s.desc}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* FAQ */}
      <section className="cor-section">
        <div className="cor-container">
          <div className="cor-twocol">
            <div className="cor-twocol__aside">
              <span className="cor-eyebrow">§ 04 — FAQ</span>
              <h2 className="cor-h2" style={{ marginTop: 14 }}>Najczęściej zadawane pytania.</h2>
              <p className="cor-body" style={{ marginTop: 20 }}>
                Masz inne pytanie? Napisz do nas — odpowiadamy w ciągu 24 godzin roboczych.
              </p>
              <a className="cor-btn cor-btn--ghost" onClick={() => setPage("kontakt")} style={{ marginTop: 24 }}>
                Zadaj pytanie <ArrowIcon />
              </a>
            </div>
            <div className="cor-faq">
              {faqs.map((f, i) => (
                <div key={i} className={"cor-faq__item" + (openFaq === i ? " is-open" : "")}>
                  <button className="cor-faq__q" onClick={() => setOpenFaq(openFaq === i ? -1 : i)}>
                    <span>{f.q}</span>
                    <span className="icon"><PlusIcon /></span>
                  </button>
                  <div className="cor-faq__a">{f.a}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

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

window.HomePage = HomePage;