/* global React */
const { useState, useEffect, useRef } = React;

/* ==========================================================
   ICONS
   ========================================================== */
const ArrowIcon = ({ size = 14 }) => (
  <svg className="cor-arrow" width={size} height={size} viewBox="0 0 14 14" fill="none">
    <path d="M2.5 7h9M8 3.5L11.5 7 8 10.5" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round"/>
  </svg>
);

const PlusIcon = () => (
  <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
    <path d="M7 2v10M2 7h10" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/>
  </svg>
);

/* ==========================================================
   MONOGRAM — sygnet "C" z paragrafem (oryginalna kompozycja)
   ========================================================== */
const Monogram = ({ stroke = "currentColor" }) => (
  <svg viewBox="0 0 32 32" fill="none" aria-label="Centrum Odwołań Prawniczych">
    {/* C — łukowo */}
    <path
      d="M26 9.5C24 7 21 5.5 17.5 5.5C11 5.5 6 10.5 6 17C6 23.5 11 28.5 17.5 28.5C21 28.5 24 27 26 24.5"
      stroke={stroke} strokeWidth="1.6" strokeLinecap="round" fill="none"
    />
    {/* paragraf w środku */}
    <path
      d="M19.5 12.5c-.6-.7-1.5-1.1-2.4-1c-1.5.2-2.4 1.5-2.1 2.8c.3 1.4 2 1.7 3 2.4c1 .7 1.6 2 .9 3.2c-.6 1-2 1.4-3.1.9c-.7-.3-1.2-1-1.4-1.7"
      stroke={stroke} strokeWidth="1.4" strokeLinecap="round" fill="none"
    />
  </svg>
);

/* ==========================================================
   BRAND
   ========================================================== */
const Brand = ({ name, tagline = "EST. 2024 · WARSZAWA", onClick, variant }) => {
  const isHeader = variant === "header";
  return (
    <div className={"cor-brand" + (isHeader ? " cor-brand--header" : "")} onClick={onClick}>
      {!isHeader && (
        <div className="cor-brand__monogram"><img src="assets/logo2.png" alt="" /></div>
      )}
      <div className="cor-brand__name">
        {isHeader ? (
          <>
            <img src="assets/logo2.png" alt={name} className="cor-brand__logo-img" />
            <span className="cor-brand__wordmark">CENTRUM ODWOŁAŃ PRAWNICZYCH</span>
          </>
        ) : (
          <>
            {name}
          </>
        )}
      </div>
    </div>
  );
};

/* ==========================================================
   HEADER + NAV
   ========================================================== */
const NAV_ITEMS = [
  { id: "home", label: "Strona główna" },
  { id: "procedura", label: "Procedura odwołania" },
  { id: "wyroznia", label: "Co nas wyróżnia" },
  { id: "kontakt", label: "Kontakt" },
];

const Header = ({ page, setPage, brandName }) => (
  <header className="cor-header">
    <div className="cor-container cor-header__inner">
      <Brand name={brandName} variant="header" onClick={() => setPage("home")} />
      <nav className="cor-nav">
        {NAV_ITEMS.map(it => (
          <a key={it.id}
             className={"cor-nav__link" + (page === it.id ? " is-active" : "")}
             onClick={() => setPage(it.id)}>
            {it.label}
          </a>
        ))}
        <a className="cor-btn cor-btn--primary cor-nav__cta" onClick={() => setPage("kontakt")}>
          Konsultacja <ArrowIcon />
        </a>
      </nav>
    </div>
  </header>
);

/* ==========================================================
   FOOTER
   ========================================================== */
const Footer = ({ setPage, brandName }) => (
  <footer className="cor-footer">
    <div className="cor-container">
      <div className="cor-footer__grid">
        <div className="cor-footer__brand">
          <Brand name={brandName} />
          <p style={{ marginTop: 20, fontSize: 14, color: "rgba(251,250,244,.7)", maxWidth: "32ch", lineHeight: 1.6 }}>
            Wsparcie aplikantów w odwołaniach od wyników egzaminów prawniczych — adwokackich, radcowskich i notarialnych.
          </p>
        </div>
        <div>
          <h4>Strona</h4>
          <ul>
            <li><a onClick={() => setPage("home")}>Strona główna</a></li>
            <li><a onClick={() => setPage("procedura")}>Procedura odwołania</a></li>
            <li><a onClick={() => setPage("wyroznia")}>Co nas wyróżnia</a></li>
            <li><a onClick={() => setPage("kontakt")}>Kontakt</a></li>
          </ul>
        </div>
        <div>
          <h4>Kontakt</h4>
          <ul>
            <li><a href="mailto:egzaminyprawniczeodwolaniapl@gmail.com">egzaminyprawniczeodwolaniapl@gmail.com</a></li>
            <li><a href="tel:+48668184024">+48 668 184 024</a></li>
            <li>Rachunek: 21 1050 1041 1000 0092 2842 1385 (ING Bank Śląski)</li>
            <li>pn–pt · 9:00–17:00</li>
          </ul>
        </div>
        <div>
          <h4>Dokumenty</h4>
          <ul>
            <li><a onClick={() => setPage("polityka")}>Polityka prywatności</a></li>
          </ul>
        </div>
      </div>
      <div className="cor-footer__bottom">
        <span>© 2026 {brandName}. Wszelkie prawa zastrzeżone.</span>
        <span>www.odwolaniaegzaminyprawnicze.pl</span>
      </div>
    </div>
  </footer>
);

/* ==========================================================
   SHARED CTA
   ========================================================== */
const CtaBanner = ({ setPage }) => (
  <section className="cor-cta">
    <div className="cor-cta__bg" />
    <div className="cor-container cor-cta__inner">
      <div>
        <span className="cor-eyebrow" style={{ color: "var(--green-500)" }}>Skontaktuj się</span>
        <h2 className="cor-h1" style={{ marginTop: 18 }}>
          Nie czekaj na kolejny <em style={{ color: "var(--green-500)", fontStyle: "normal", fontWeight: 500 }}>termin egzaminu.</em>
        </h2>
        <p className="cor-lead" style={{ marginTop: 20, color: "rgba(251,250,244,.78)" }}>
          Zgłoś się do nas, a pomożemy Ci zawalczyć o Twój wynik już teraz. Napisz do nas, by omówić Twoją sytuację — analiza pracy jest pierwszym krokiem.
        </p>
        <div style={{ marginTop: 32, display: "flex", gap: 12, flexWrap: "wrap" }}>
          <a className="cor-btn cor-btn--accent" onClick={() => setPage("kontakt")}>Umów konsultację <ArrowIcon /></a>
          <a className="cor-btn cor-btn--ghost" style={{ color: "var(--paper-50)", borderColor: "rgba(251,250,244,.25)" }} onClick={() => setPage("procedura")}>
            Zobacz procedurę
          </a>
        </div>
      </div>
      <div className="cor-cta__form">
        <h3 className="cor-h3">Szybkie zgłoszenie</h3>
        <p className="cor-small">Odpowiadamy w ciągu 24 godzin roboczych.</p>
        <CtaForm />

      </div>
    </div>
  </section>
);

/* ==========================================================
   QUICK CTA FORM (in CtaBanner) — sends via send.php
   ========================================================== */
const CtaForm = () => {
  const [sent, setSent] = useState(false);
  const [busy, setBusy] = useState(false);

  if (sent) {
    return (
      <div style={{ textAlign: "center", padding: "20px 0" }}>
        <div style={{ width: 56, height: 56, borderRadius: "50%", border: "1.5px solid var(--accent)", display: "inline-flex", alignItems: "center", justifyContent: "center", margin: "0 auto 16px" }}>
          <svg width="24" height="24" viewBox="0 0 28 28" fill="none">
            <path d="M6 14l5 5 11-11" stroke="var(--accent-deep)" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/>
          </svg>
        </div>
        <h3 className="cor-h3">Dziękujemy.</h3>
        <p className="cor-body" style={{ marginTop: 8 }}>Odezwiemy się w ciągu 24 godzin roboczych.</p>
      </div>
    );
  }

  return (
    <form className="cor-form" onSubmit={async e => {
      e.preventDefault();
      if (busy) return;
      setBusy(true);
      const f = e.target;
      const data = new FormData(f);
      data.append("source", "cta-banner");
      try {
        const res = await fetch("send.php", { method: "POST", body: data });
        const json = await res.json();
        if (json.ok) { setSent(true); }
        else { alert(json.error || "Wystąpił błąd. Napisz na egzaminyprawniczeodwolaniapl@gmail.com"); }
      } catch (err) {
        alert("Brak połączenia. Napisz na egzaminyprawniczeodwolaniapl@gmail.com");
      }
      setBusy(false);
    }}>
      <input type="text" name="website" tabIndex="-1" autoComplete="off" style={{ position: "absolute", left: "-9999px", width: 1, height: 1 }} aria-hidden="true" />
      <div className="cor-field">
        <label>Imię i nazwisko</label>
        <input name="firstname" type="text" placeholder="Jan Kowalski" required />
      </div>
      <div className="cor-field">
        <label>Adres e-mail</label>
        <input name="email" type="email" placeholder="jan.kowalski@email.pl" required />
      </div>
      <div className="cor-field">
        <label>Krótko o sprawie</label>
        <textarea name="message" placeholder="Egzamin adwokacki / radcowski / notarialny — opisz, jakiej części dotyczy odwołanie." required></textarea>
      </div>
      <button className="cor-btn cor-btn--primary" type="submit" disabled={busy}>
        {busy ? "Wysyłanie..." : "Wyślij zgłoszenie"} <ArrowIcon />
      </button>
    </form>
  );
};

/* ==========================================================
   PAGE INTRO (used by sub-pages)
   ========================================================== */
const PageIntro = ({ crumb, title, lead, setPage }) => (
  <section className="cor-pageintro">
    <div className="cor-container">
      <div className="cor-breadcrumb">
        <a onClick={() => setPage("home")}>Strona główna</a> &nbsp;/&nbsp; {crumb}
      </div>
      <h1 className="cor-h1" style={{ maxWidth: "18ch" }}>{title}</h1>
      {lead && <p className="cor-lead" style={{ marginTop: 24 }}>{lead}</p>}
    </div>
  </section>
);

Object.assign(window, {
  ArrowIcon, PlusIcon, Monogram, Brand,
  Header, Footer, CtaBanner, CtaForm, PageIntro,
  NAV_ITEMS,
});