/* pl-sections.jsx — wersja dramatyczna: liczby, historie, cytat-uderzenie, ostrzeżenie */
const { useState: useStateImg } = React;

function Ico({ name, size = 16 }) {
  const s = { width: size, height: size, fill: "none", stroke: "currentColor",
    strokeWidth: 1.6, strokeLinecap: "round", strokeLinejoin: "round" };
  const p = {
    arrow: <path d="M4 10h12M11 5l5 5-5 5" />,
    id: <><rect x="2.5" y="4.5" width="15" height="11" rx="1.5" /><circle cx="7" cy="9" r="1.7" /><path d="M4.8 13.4c.3-1.3 1.2-2.1 2.2-2.1s1.9.8 2.2 2.1" /><path d="M11.5 8h4M11.5 11h4" /></>,
    euro: <><circle cx="10" cy="10" r="7.2" /><path d="M13 7.4A3.7 3.7 0 0 0 7 10a3.7 3.7 0 0 0 6 2.6" /><path d="M5.6 9.2h5M5.6 11h4.2" /></>,
    elevator: <><rect x="4" y="2.5" width="12" height="15" rx="1" /><path d="M10 2.5v15" /><path d="M6.3 8.6 7.4 6.9 8.5 8.6M11.5 11.4 12.6 13.1 13.7 11.4" /></>,
    bolt: <path d="M11 2.5 4.5 11H9l-1 6.5L15.5 9H11z" />,
    pool: <><path d="M2.5 13c1.5 0 1.5 1.3 3 1.3S7 13 8.5 13s1.5 1.3 3 1.3S13 13 14.5 13s1.5 1.3 3 1.3" /><path d="M6 13V5.5A2 2 0 0 1 9.8 5M14 13V5.5A2 2 0 0 0 10.2 5" /></>,
    sea: <><path d="M2.5 14c1.5 0 1.5 1.2 3 1.2s1.5-1.2 3-1.2 1.5 1.2 3 1.2 1.5-1.2 3-1.2 1.5 1.2 3 1.2" /><path d="M5 11l5-6 5 6" /></>,
    tax: <><rect x="3.5" y="3.5" width="13" height="13" rx="1.5" /><path d="M7 13l6-6M7.5 7.6h.01M12.5 12.4h.01" /></>,
    med: <><circle cx="10" cy="10" r="7.4" /><path d="M10 6.3v7.4M6.3 10h7.4" /></>,
    person: <><circle cx="10" cy="6" r="2.7" /><path d="M4.8 16c0-3.1 2.2-4.8 5.2-4.8s5.2 1.7 5.2 4.8" /></>,
    alert: <><path d="M10 3.2 18 16.6H2z" /><path d="M10 8.4v3.6M10 14.4h.01" /></>,
    doc: <><path d="M5 2.5h7l3 3V17.5H5z" /><path d="M12 2.5v3h3" /><path d="M7.5 10h5M7.5 13h5" /></>,
    news: <><rect x="2.5" y="4" width="12" height="12" rx="1" /><path d="M14.5 7H17v7a1.5 1.5 0 0 1-3 0" /><path d="M5 7h6M5 10h6M5 13h3" /></>,
    play: <><circle cx="10" cy="10" r="7.5" /><path d="M8.2 7.2 13 10l-4.8 2.8z" fill="currentColor" stroke="none" /></>,
    check: <path d="M4 10.5l4 4 8-9" />,
    pen: <><path d="M13.5 3.5 16.5 6.5 7 16l-3.5.5L4 13z" /><path d="M12 5l3 3" /></>,
    flag: <><path d="M5 17V3" /><path d="M5 4h9l-2 3 2 3H5" /></>,
    petition: <><path d="M5 2.5h7l3 3V17.5H5z" /><path d="M12 2.5v3h3" /><path d="M7.5 9.5h5M7.5 12.3h3" /></>,
    creator: <><rect x="2.5" y="4.5" width="15" height="11" rx="2" /><path d="M8.2 7.8 12.5 10l-4.3 2.2z" fill="currentColor" stroke="none" /><path d="M6 18h8" /></>,
    scale: <><path d="M10 3v14M5 17h10" /><path d="M10 5 4.5 7l2 4a2.5 2.5 0 0 1-4 0l2-4M10 5l5.5 2-2 4a2.5 2.5 0 0 0 4 0l-2-4" /></>,
    users: <><circle cx="7.5" cy="7" r="2.4" /><path d="M3 16c0-2.6 1.9-4 4.5-4s4.5 1.4 4.5 4" /><path d="M13 5.4a2.4 2.4 0 0 1 0 4.6M13.8 16c0-2.2-1-3.6-2.6-4.2" /></>,
    close: <path d="M5 5l10 10M15 5 5 15" />,
    menu: <path d="M3.5 6h13M3.5 10h13M3.5 14h13" />,
    star: <path d="M10 2.5l2.2 4.6 5 .7-3.6 3.5.9 5L10 13.9 5.5 16.3l.9-5L2.8 7.8l5-.7z" />,
    compass: <><circle cx="10" cy="10" r="7.4" /><path d="M13.2 6.8 11 11l-4.2 2.2L9 9z" fill="currentColor" stroke="none" /></>,
    briefcase: <><rect x="2.8" y="6" width="14.4" height="10" rx="1.5" /><path d="M7 6V4.5A1.5 1.5 0 0 1 8.5 3h3A1.5 1.5 0 0 1 13 4.5V6" /><path d="M2.8 10.5h14.4" /></>,
    image: <><rect x="2.8" y="3.8" width="14.4" height="12.4" rx="1.5" /><circle cx="7" cy="8" r="1.4" /><path d="M3.5 14.5 8 10.5l2.5 2.2L13 10l3.5 3.5" /></>,
    facebook: <path d="M11.5 17v-5h1.7l.3-2h-2v-1.3c0-.6.2-1 1-1h1V5.1c-.3 0-1-.1-1.7-.1-1.7 0-2.8 1-2.8 2.9V10H7.3v2H9v5z" fill="currentColor" stroke="none" />,
    x: <path d="M3.8 3.5h3.1l3 4.2 3.5-4.2h1.7l-4.4 5.2L16 16.5h-3.1l-3.2-4.5-3.8 4.5H4.2l4.7-5.6z" fill="currentColor" stroke="none" />,
    whatsapp: <><path d="M3.5 16.5l1-3.4a6 6 0 1 1 2.4 2.3z" /><path d="M7.6 7.4c.2-.4.4-.4.6-.4h.4c.2 0 .4 0 .5.4l.5 1.2c0 .2 0 .3-.1.4l-.4.5c-.1.1-.2.3 0 .5a4 4 0 0 0 2 1.7c.2.1.4.1.5 0l.5-.6c.1-.2.3-.1.4-.1l1.2.6c.2.1.3.2.3.3 0 .5-.3 1.1-.8 1.2-.5.2-1.3.3-3-.5a6 6 0 0 1-2.6-2.7c-.3-.6-.5-1.4 0-2.2z" fill="currentColor" stroke="none" /></>,
    link: <><path d="M8.2 11.8a2.6 2.6 0 0 0 3.7 0l2.4-2.4a2.6 2.6 0 0 0-3.7-3.7l-1 1" /><path d="M11.8 8.2a2.6 2.6 0 0 0-3.7 0l-2.4 2.4a2.6 2.6 0 0 0 3.7 3.7l1-1" /></>,
  }[name];
  return <svg viewBox="0 0 20 20" style={s} aria-hidden="true">{p}</svg>;
}

/* Figura redakcyjna — zdjęcie z neutralnym podpisem. Pokazuje placeholder, gdy pliku jeszcze nie ma. */
function Figure({ src, alt, caption, ratio = "16 / 10" }) {
  const [err, setErr] = useStateImg(false);
  const file = src.split("/").pop();
  return (
    <figure className="ed-figure">
      <div className="ef-frame" style={{ aspectRatio: ratio }}>
        {err
          ? <div className="ef-ph">
              <Ico name="image" size={26} />
              <span className="ph-file">{file}</span>
              <span className="ph-hint">Dodaj plik do projektu (folder /images)</span>
            </div>
          : <img src={src} alt={alt} loading="lazy" onError={() => setErr(true)} />}
      </div>
      <figcaption>{caption}</figcaption>
    </figure>
  );
}

/* Separator aktu — dyskretny nagłówek bloku tematycznego */
function ActSep({ rom, kicker, title, id }) {
  return (
    <section className="act-sep" id={id}>
      <div className="wrap reveal">
        <div className="act-rom">{rom}</div>
        <span className="act-kicker">{kicker}</span>
        <h2 className="act-title">{title}</h2>
      </div>
    </section>
  );
}

/* ---------------- PAS UDERZENIOWYCH LICZB ---------------- */
const IMPACT = [
  { v: <>120<span className="unit">+</span></>, k: "właścicieli z krajów UE, USA i Izraela" },
  { v: <>3<span className="unit">lata</span></>, k: "tyle trwa spór" },
  { v: <>40<span className="unit">€/m²</span></>, k: "stawka za zarządzanie — podniesiona z 12 €" },
  { v: <>0</>, k: "podpisanych umów o zarządzanie" },
];
function Impact() {
  return (
    <section className="impact section--black" id="liczby">
      <div className="wrap">
        <div className="impact-grid">
          {IMPACT.map((it, i) => (
            <div className="impact-item reveal" key={i} style={{ transitionDelay: `${i * 70}ms` }}>
              <div className="iv">{it.v}</div>
              <div className="ik">{it.k}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------------- 01 · LUDZKIE HISTORIE ---------------- */
const STORIES = [
  { ico: "med", t: <>Starszej osobie potrzebującej urządzenia do oddychania recepcja odcięła prąd — wiedząc wcześniej o jej stanie zdrowia.</> },
  { ico: "person", t: <>Właściciela po operacji kolana, poruszającego się o kulach, nie chciano wpuścić — inni właściciele musieli zjechać po niego windą, by w ogóle dotarł do swojego apartamentu.</> },
  { ico: "euro", t: <>Właścicielowi kazano zapłacić około <span className="amt">4 000 €</span> przy wejściu. Zapłacił, dostał kartę do windy — ale nadal nie może korzystać z żadnej infrastruktury. Wezwał policję, która stwierdziła, że nic nie zrobi.</> },
];
function Stories() {
  return (
    <section className="section section--dark-2" id="historie">
      <div className="wrap">
        <div className="reveal">
          <p className="eyebrow eyebrow--dark">Ludzkie historie</p>
          <div className="section-head">
            <h2>Za każdą liczbą stoi konkretna osoba.</h2>
            <p className="lede">Zdarzenia relacjonowane przez właścicieli — przedstawione tak, jak ich doświadczyli.</p>
          </div>
        </div>
        <div className="stories">
          {STORIES.map((s, i) => (
            <div className="story reveal" key={i} style={{ transitionDelay: `${i * 80}ms` }}>
              <div className="st-num">{String(i + 1).padStart(2, "0")}</div>
              <div className="st-ico"><Ico name={s.ico} size={22} /></div>
              <p>{s.t}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------------- 02 · KIM JESTEŚMY ---------------- */
function Kim() {
  return (
    <section className="section section--paper" id="kim">
      <div className="wrap">
        <div className="reveal">
          <p className="eyebrow">Kim jesteśmy</p>
          <div className="section-head">
            <h2>Prywatni właściciele, którzy kupili legalnie.</h2>
          </div>
          <div className="prose" style={{ maxWidth: "62ch" }}>
            <p>
              Jesteśmy prywatnymi właścicielami apartamentów w kompleksie Grand Hotel w Sveti Vlas.
              Kupiliśmy je legalnie — u notariusza, przez licencjonowane biura, od prywatnych
              sprzedających. Płaciliśmy pełne ceny rynkowe, część z nas finansowała zakup kredytem,
              a wielu zainwestowało dodatkowo w remonty i wyposażenie.
            </p>
            <p>
              Jest nas ponad 120 — z krajów Unii Europejskiej, a także USA i Izraela. Pochodzimy
              między innymi z Polski i Niemiec. Działania koordynujemy we wspólnej grupie i prowadzimy
              sprawę przez jedną kancelarię. To wspólny głos właścicieli, a nie relacja jednej osoby.
            </p>
          </div>
        </div>
        <div className="stats reveal">
          <div className="stat"><div className="sv"><span className="accent">120+</span></div><div className="sk">właścicieli w grupie</div></div>
          <div className="stat"><div className="sv">UE · USA · Izrael</div><div className="sk">kraje pochodzenia</div></div>
          <div className="stat"><div className="sv">Jedna kancelaria</div><div className="sk">wspólna reprezentacja prawna</div></div>
        </div>
      </div>
    </section>
  );
}

/* ---------------- 03 · CO SIĘ DZIEJE ---------------- */
function CoSieDzieje() {
  return (
    <section className="section section--paper-2" id="co-sie-dzieje">
      <div className="wrap">
        <div className="reveal">
          <p className="eyebrow">Co się dzieje</p>
          <div className="section-head">
            <h2>Nasze wspólne doświadczenie.</h2>
            <p className="lede">Poniższe sytuacje powtarzają się w relacjach wielu właścicieli.</p>
          </div>
        </div>
        <div className="hap-grid">
          <div className="hap-card reveal">
            <div className="hap-ico"><Ico name="id" size={22} /></div>
            <h3>Przy zakupie</h3>
            <p>Rejestrowano nas w recepcji w „księdze prywatnych użytkowników lokali", fotografowano dowody osobiste, a od części z nas pobierano opłaty bez wyjaśnienia podstawy i bez pokwitowania.</p>
          </div>
          <div className="hap-card reveal" style={{ transitionDelay: "70ms" }}>
            <div className="hap-ico"><Ico name="euro" size={22} /></div>
            <h3>Opłaty za zarządzanie</h3>
            <div className="fee-steps">
              <span className="fee-pill">12 €/m²</span>
              <span className="fee-arrow"><Ico name="arrow" size={14} /></span>
              <span className="fee-pill">22 €/m²</span>
              <span className="fee-arrow"><Ico name="arrow" size={14} /></span>
              <span className="fee-pill is-now">40 €/m²</span>
            </div>
            <p>Gdy prosimy o dokumenty uzasadniające te stawki, odmawia się nam.</p>
          </div>
          <div className="hap-card reveal" style={{ transitionDelay: "140ms" }}>
            <div className="hap-ico"><Ico name="elevator" size={22} /></div>
            <h3>Windy</h3>
            <p>Odmawia się nam kart dostępu do wind i każe korzystać ze schodów, mimo że nasze apartamenty znajdują się na wyższych piętrach.</p>
          </div>
          <div className="hap-card reveal" style={{ transitionDelay: "210ms" }}>
            <div className="hap-ico"><Ico name="bolt" size={22} /></div>
            <h3>Prąd</h3>
            <p>Odcina się nam prąd, mimo że mamy indywidualne umowy z odrębnym dostawcą (EWN) i płacimy osobno. Hotel ma dostęp do skrzynek dedykowanych piętrom i — <span className="attrib">według właścicieli</span> — to wykorzystuje. Bez prądu pozostaje tylko zimna woda.</p>
          </div>
        </div>

        <div className="power-feature reveal">
          <div className="pf-text">
            <div className="pf-k"><Ico name="bolt" size={14} /> Prąd</div>
            <h3>Skrzynki zasilające na piętrach.</h3>
            <p>
              Mamy indywidualne umowy z odrębnym dostawcą (EWN) i płacimy za energię osobno.
              Mimo to skrzynki zasilające poszczególne lokale znajdują się na piętrach budynku,
              a — <span className="attrib">według właścicieli</span> — dostęp do nich ma personel
              hotelu. Bez prądu w apartamencie pozostaje tylko zimna woda.
            </p>
          </div>
          <Figure src="images/skrzynka-prad.jpg"
            alt="Otwarta skrzynka elektryczna z bezpiecznikami na piętrze hotelu"
            caption="Skrzynka elektryczna na piętrze, do której dostęp ma personel hotelu."
            ratio="3 / 4" />
        </div>
      </div>
    </section>
  );
}

/* ---------------- 04 · CZĘŚCI WSPÓLNE ---------------- */
const COMMONS = [
  { ico: "pool", k: "Baseny", d: "Zabrania się nam korzystania z basenów na terenie kompleksu." },
  { ico: "sea", k: "Dostęp do morza", d: "Zamknięto nam przejście przez teren hotelu nad morze." },
  { ico: "elevator", k: "Winda panoramiczna", d: "Jesteśmy współwłaścicielami, lecz nie mamy do niej dostępu." },
  { ico: "tax", k: "Podatek gminny", d: "Płacimy podatek od części wspólnych, które operator zagospodarował na własny użytek." },
];
function CzesciWspolne() {
  return (
    <section className="section section--dark" id="czesci-wspolne">
      <div className="wrap">
        <div className="reveal">
          <p className="eyebrow eyebrow--dark">Części wspólne</p>
          <p className="statement-lead">Płacimy za części wspólne, z których <em>nie wolno nam korzystać.</em></p>
          <div className="statement-body">
            <p>Jesteśmy współwłaścicielami części wspólnych — pięter oraz wind, w tym windy panoramicznej. Mimo to odmawia się nam dostępu do nich oraz do infrastruktury kompleksu, za którą ponosimy współodpowiedzialność.</p>
          </div>
        </div>
        <div className="commons-list">
          {COMMONS.map((c, i) => (
            <div className="commons-item reveal" key={i} style={{ transitionDelay: `${(i % 2) * 70}ms` }}>
              <div className="ci-k"><Ico name={c.ico} size={15} /> {c.k}</div>
              <p>{c.d}</p>
            </div>
          ))}
        </div>
        <div className="statement-body reveal" style={{ marginTop: 28 }}>
          <p>
            Umieściliśmy własne tabliczki przy prywatnych apartamentach, aby odróżnić je od pokoi
            hotelowych. Tabliczki ponad 100 właścicieli zostały zdjęte i wyrzucone — sprawę zgłoszono
            prokuraturze w Burgas-Nesebyrze.
          </p>
          <span className="relacja-tag" style={{ borderColor: "var(--line-dark)", color: "var(--on-dark-mute)" }}>Zgłoszone prokuraturze</span>
        </div>
        <div className="reveal" style={{ marginTop: 40 }}>
          <Figure src="images/fasada-noc.jpg"
            alt="Podświetlona nocą fasada kompleksu Grand Hotel Sveti Vlas"
            caption="Grand Hotel Sveti Vlas — m.in. infrastruktura współfinansowana przez prywatnych właścicieli."
            ratio="21 / 9" />
        </div>
      </div>
    </section>
  );
}

/* ---------------- CYTAT-UDERZENIE ---------------- */
function BigQuote() {
  return (
    <section className="section section--black" id="cytat">
      <div className="wrap">
        <div className="reveal" style={{ maxWidth: 1000 }}>
          <p className="bq-intro">Według relacji właścicieli, menedżerka hotelu miała powiedzieć jednemu z nich:</p>
          <span className="bq-mark">„</span>
          <blockquote className="bq-text">Za nią stoi mafia, rząd bułgarski, prokuratura i sądy.</blockquote>
          <span className="bq-tag"><Ico name="alert" size={14} /> Relacjonowana wypowiedź personelu hotelu — nie stanowisko właścicieli</span>
        </div>
      </div>
    </section>
  );
}

/* ---------------- 05 · SYTUACJA PRAWNA ---------------- */
const LEGAL = [
  { k: "Wyrok sądu w Nesebyrze", d: <>Sąd uchylił uchwały z <b>2022 i 2024 r.</b> wprowadzające podwyżki opłat za zarządzanie.</> },
  { k: "Ustawa o zarządzaniu nieruchomościami", d: <>Właściciele przebywający krócej niż <b>trzy tygodnie w roku</b> są zwolnieni z opłat — podczas gdy hotel wynajmuje pokoje przez około <b>150 dni w roku</b>.</> },
  { k: "Kto finansuje inwestycje", d: <>W praktyce finansujemy inwestycje hotelu — place zabaw, basen, elewację — z których sami nie możemy korzystać.</> },
  { k: "Egzekucja wyroku", d: <>Mimo wyroku operator go nie respektuje, a egzekucja ciągnie się latami. Miejscowe kancelarie odmawiały prowadzenia sprawy.</> },
];
function SytuacjaPrawna() {
  return (
    <section className="section section--paper" id="prawo">
      <div className="wrap">
        <div className="reveal">
          <p className="eyebrow">Sytuacja prawna</p>
          <div className="section-head">
            <h2>Sąd już przyznał nam rację.</h2>
            <p className="lede">Sprawa toczy się drogą prawną i opiera na orzeczeniach oraz przepisach prawa bułgarskiego.</p>
          </div>
        </div>
        <div className="legal-grid">
          {LEGAL.map((l, i) => (
            <div className="legal-card reveal" key={i} style={{ transitionDelay: `${(i % 2) * 70}ms` }}>
              <div className="lc-k">{l.k}</div>
              <p>{l.d}</p>
            </div>
          ))}
        </div>
        <div className="reveal" style={{ marginTop: 32, maxWidth: 760 }}>
          <Figure src="images/policja-hotel.jpg"
            alt="Radiowóz policji zaparkowany pod podjazdem hotelu"
            caption="Interwencja policji pod hotelem."
            ratio="16 / 10" />
        </div>
      </div>
    </section>
  );
}

/* ---------------- 06 · O CO NAPRAWDĘ CHODZI ---------------- */
function OcoChodzi() {
  return (
    <section className="section section--dark" id="o-co-chodzi">
      <div className="wrap">
        <div className="reveal">
          <p className="eyebrow eyebrow--dark">O co naprawdę chodzi</p>
          <p className="statement-lead">Z naszych obserwacji wynika jeden cel: <em>skłonić nas do sprzedaży.</em></p>
          <div className="statement-body">
            <p>
              <span style={{ color: "var(--accent-soft)", fontWeight: 500 }}>Według właścicieli</span> celem
              operatora jest wywarcie presji — przez drastyczne podwyżki opłat i odbieranie dostępu — tak,
              abyśmy odsprzedali apartamenty za ułamek ich wartości; mówi się o około jednej trzeciej ceny zakupu.
            </p>
            <p style={{ color: "var(--on-dark)", fontFamily: "var(--font-serif)", fontSize: "1.3rem" }}>Nie zgadzamy się na to.</p>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------------- MOGŁO SPOTKAĆ I CIEBIE ---------------- */
function Warning() {
  return (
    <section className="section section--paper-2" id="ostrzezenie">
      <div className="wrap">
        <div className="warning reveal">
          <div className="warn-ico"><Ico name="alert" size={40} /></div>
          <div>
            <h2>Mogło spotkać i Ciebie.</h2>
            <p>
              Kupowaliśmy w kraju Unii Europejskiej, przekonani, że prawo działa tak jak u nas.
              Zanim kupisz apartament w podobnym kompleksie — <b>sprawdź, czy operator nie kontroluje
              wszystkich mediów, parkingu i dostępu</b>. Jeśli tak, możesz znaleźć się w naszej sytuacji.
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------------- 07 · W MEDIACH ---------------- */
function Media() {
  return (
    <section className="section section--paper" id="media">
      <div className="wrap">
        <div className="reveal">
          <p className="eyebrow">W mediach</p>
          <div className="section-head">
            <h2>Sprawą zainteresowały się media.</h2>
            <p className="lede">W grudniu 2024 r. portal Euro Asia News opisał sytuację w Grand Hotelu Sveti Vlas, podając, że ponad 120 właścicieli z krajów europejskich, USA i Izraela zwróciło się z apelem do Parlamentu Europejskiego i ministerstw spraw zagranicznych.</p>
          </div>
        </div>
        <div className="media-grid reveal">
          <div className="media-main">
            <div className="media-embed">
              <iframe src="https://www.youtube.com/embed/2dl8zHDqk2U" title="Relacja wideo o sytuacji w Sveti Vlas"
                loading="lazy" allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen></iframe>
            </div>
            <p className="media-credit">
              Sprawą zainteresował się red. Tomasz Sańpruch z Biura Ekspansji Zagranicznej, który poświęcił
              jej materiał wideo. Dziękujemy za nagłośnienie tematu.
            </p>
          </div>
          <div className="media-side">
            <a className="media-card" href="https://euasia.news/2024/12/05/71281/" target="_blank" rel="noopener noreferrer">
              <div className="mc-type"><Ico name="news" /> Artykuł</div>
              <h3>Euro Asia News — grudzień 2024</h3>
              <p>Opis sytuacji w Grand Hotelu Sveti Vlas i apelu właścicieli do instytucji UE.</p>
              <span className="mc-link">euasia.news →</span>
            </a>
            <a className="media-card" href="https://www.youtube.com/watch?v=2dl8zHDqk2U" target="_blank" rel="noopener noreferrer">
              <div className="mc-type"><Ico name="play" /> Wideo</div>
              <h3>Relacja wideo o sytuacji</h3>
              <p>Nagranie przedstawiające okoliczności sporu (odtwarzacz obok).</p>
              <span className="mc-link">youtube.com →</span>
            </a>
          </div>
        </div>
        <p className="media-note reveal">
          Linkujemy do tych publikacji jako dowód zainteresowania mediów. Poglądy i sformułowania zawarte
          w materiałach są stanowiskiem ich autorów, nie naszym; nasza relacja opiera się wyłącznie na
          własnym doświadczeniu i orzeczeniach sądu.
        </p>

        <div className="press-kit reveal" id="materialy-prasowe">
          <div className="pk-main">
            <div className="pk-k"><Ico name="doc" size={15} /> Materiały dla prasy</div>
            <p>
              Dla dziennikarzy przygotowujemy zestaw materiałów prasowych — fakty, liczby, oś czasu,
              kontakt oraz dokumentację do weryfikacji.
            </p>
          </div>
          <div className="pk-action">
            <a className="btn btn--primary" href="press/press-kit.pdf" target="_blank" rel="noopener noreferrer">
              Pobierz materiały dla prasy (PDF) <span className="arr"><Ico name="arrow" size={14} /></span>
            </a>
            <span className="pk-status">Materiały w przygotowaniu — wersja robocza.</span>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------------- 08 · PRECEDENS ---------------- */
function Precedens() {
  return (
    <section className="section section--paper" id="precedens" style={{ paddingTop: 0 }}>
      <div className="wrap">
        <div className="precedent reveal">
          <div className="pq">&bdquo;</div>
          <div>
            <p className="eyebrow">Precedens — jest nadzieja</p>
            <h3>Droga prawna bywa skuteczna.</h3>
            <p>
              Współwłaściciele w innym bułgarskim kompleksie — Hotel Tarsis — prowadzili wieloletni
              proces sądowy i odzyskali dostęp oraz kontrolę nad swoją własnością. Pokazuje to, że droga
              prawna, choć długa, może przynieść skutek. Tę samą, uporządkowaną drogę wybieramy i my.
            </p>
          </div>
          <a className="btn btn--ghost" href="https://hoteltarsis.com" target="_blank" rel="noopener noreferrer"
             style={{ alignSelf: "center", whiteSpace: "nowrap" }}>
            Poznaj sprawę <span className="arr"><Ico name="arrow" size={14} /></span>
          </a>
        </div>
      </div>
    </section>
  );
}

/* ---------------- BYŁEŚ GOŚCIEM? ---------------- */
const REVIEW_PLATFORMS = [
  { name: "Booking.com", href: "https://www.booking.com/Share-LsaUgvg" },
  { name: "Google", href: "https://www.google.com/travel/hotels/s/tqTYX8PACfVtiYfz7" },
  { name: "TripAdvisor", href: "https://www.tripadvisor.com/Hotel_Review-g1088372-d12257494-Reviews-Grand_Hotel_Sveti_Vlas-Sveti_Vlas_Burgas_Province.html" },
];
function Goscie() {
  return (
    <section className="section section--paper-2" id="goscie">
      <div className="wrap">
        <div className="reveal">
          <p className="eyebrow">Byłeś gościem?</p>
          <div className="section-head">
            <h2>Twój głos się liczy.</h2>
            <p className="lede">Jeśli byłeś w tym obiekcie albo dopiero planujesz pobyt — poniżej znajdziesz to,
              co może Cię dotyczyć.</p>
          </div>
        </div>
        <div className="guest-grid">
          <div className="guest-block reveal">
            <div className="gb-head">
              <div className="gb-ico"><Ico name="star" size={20} /></div>
              <h3>Byłeś gościem hotelu?</h3>
            </div>
            <p>
              Jeśli sam widziałeś, jak traktuje się prywatnych właścicieli — odmowy dostępu, odcinanie
              prądu, blokowanie wejścia — Twoja szczera opinia, oparta na własnym doświadczeniu, ma
              znaczenie. Opisz to, co naprawdę widziałeś, na platformie, z której korzystałeś:
            </p>
            <div className="review-links">
              {REVIEW_PLATFORMS.map((p) => (
                <a className="review-link" key={p.name} href={p.href} target="_blank" rel="noopener noreferrer">
                  <span className="rl-ico"><Ico name="star" size={16} /></span>
                  {p.name}
                  <span className="rl-ext"><Ico name="arrow" size={14} /></span>
                </a>
              ))}
            </div>
            <p className="guest-note">
              Prosimy: opisuj wyłącznie to, czego sam doświadczyłeś lub byłeś świadkiem. Szczere,
              prawdziwe relacje są najcenniejsze i najbardziej wiarygodne.
            </p>
          </div>

          <aside className="guest-block guest-aside reveal" style={{ transitionDelay: "90ms" }}>
            <div className="gb-head">
              <div className="gb-ico"><Ico name="compass" size={20} /></div>
              <h3>Planujesz pobyt?</h3>
            </div>
            <p>
              Planujesz rezerwację w tym obiekcie? Zanim zdecydujesz, poznaj sytuację prywatnych
              właścicieli i wyrób sobie własne zdanie.
            </p>
            <a className="btn btn--primary" href="#top">
              Poznaj fakty <span className="arr"><Ico name="arrow" size={14} /></span>
            </a>
          </aside>
        </div>
      </div>
    </section>
  );
}

/* ---------------- MOŻESZ POMÓC (kafelki CTA) ---------------- */
function HelpCard({ ico, title, text, actions, wide }) {
  const head = (
    <div className="hc-role">
      <div className="hc-ico"><Ico name={ico} size={20} /></div>
      <h3>{title}</h3>
    </div>
  );
  const acts = (
    <div className="hc-actions">
      {actions.map((a, i) => (
        <a key={i} href={a.href} target={a.ext ? "_blank" : undefined}
           rel={a.ext ? "noopener noreferrer" : undefined}
           className={"btn btn--sm " + (a.primary ? "btn--primary" : "btn--line")}>
          {a.label}{a.primary && <span className="arr"><Ico name="arrow" size={13} /></span>}
        </a>
      ))}
    </div>
  );
  if (wide) {
    return (
      <div className="help-card is-wide reveal">
        <div className="hc-inner">
          <div>
            {head}
            <p>{text}</p>
          </div>
          {acts}
        </div>
      </div>
    );
  }
  return (
    <div className="help-card reveal">
      {head}
      <p>{text}</p>
      {acts}
    </div>
  );
}

function MozeszPomoc() {
  return (
    <section className="section section--black" id="pomoc">
      <div className="wrap">
        <div className="reveal">
          <p className="eyebrow eyebrow--dark">Możesz pomóc</p>
          <div className="section-head">
            <h2>Każdy może coś zrobić — wybierz swoją rolę.</h2>
            <p className="lede">Im więcej osób się zaangażuje, tym większa siła tej sprawy w mediach,
              w sądzie i przed instytucjami Unii Europejskiej.</p>
          </div>
        </div>
        <div className="help-subhead reveal"><span>Dołącz i wesprzyj sprawę</span></div>
        <div className="help-grid">
          <HelpCard ico="users" title="Jesteś właścicielem apartamentu w tym kompleksie?"
            text="Im więcej nas, tym większa siła — w mediach, w sądzie i przed instytucjami UE. Dołącz do wspólnoty."
            actions={[{ label: "Dołącz do nas", href: "#kontakt", primary: true }]} />
          <HelpCard ico="petition" title="Instytucje UE i Komisja Petycji"
            text="Jako wspólnota właścicieli przygotowujemy petycję do Komisji Petycji Parlamentu Europejskiego (PETI), na podstawie prawa do petycji z art. 227 Traktatu o funkcjonowaniu UE. Jeśli jesteś właścicielem — możesz się pod nią podpisać."
            actions={[
              { label: "Dołącz do petycji", href: "#kontakt", primary: true },
              { label: "Dowiedz się więcej", href: "#prawo" },
            ]} />
          <HelpCard ico="scale" title="Jesteś prawnikiem lub działasz w organizacji broniącej praw obywateli?"
            text="Szukamy wsparcia prawnego i sojuszników. Jeśli możesz pomóc — odezwij się."
            actions={[{ label: "Skontaktuj się", href: "#kontakt", primary: true }]} />
        </div>

        <div className="help-subhead reveal"><span>Pomóż nagłośnić sprawę</span></div>
        <div className="help-grid">
          <HelpCard ico="pen" title="Jesteś dziennikarzem?"
            text="Ta sprawa dotyczy ponad 120 obywateli UE i trwa od lat. Mamy dokumenty, świadków, wyroki sądu i osoby gotowe rozmawiać. Napisz do nas — udostępnimy materiały i kontakty."
            actions={[
              { label: "Skontaktuj się z nami", href: "#kontakt", primary: true },
              { label: "Materiały dla prasy", href: "#materialy-prasowe" },
            ]} />
          <HelpCard ico="creator" title="Tworzysz treści o nieruchomościach, inwestycjach lub prawach konsumenta?"
            text="Ta historia to realne ostrzeżenie dla Twojej publiczności — z dokumentami, świadkami i osobami gotowymi opowiedzieć, co je spotkało. Udostępnimy Ci rzetelne materiały do weryfikacji. Pomóż nagłośnić sprawę obywateli UE."
            actions={[
              { label: "Skontaktuj się z nami", href: "#kontakt", primary: true },
              { label: "Materiały dla prasy", href: "#materialy-prasowe" },
            ]} />
          <HelpCard ico="flag" title="Jesteś posłem do Parlamentu Europejskiego?"
            text="To dzieje się w kraju Unii Europejskiej — obywatelom UE odmawia się dostępu do legalnie nabytej własności. Prosimy o zainteresowanie się sprawą i pomoc w nagłośnieniu jej na forum europejskim."
            actions={[
              { label: "Napisz do nas", href: "#kontakt", primary: true },
              { label: "Poznaj fakty", href: "#historie" },
            ]} />
        </div>

        <div className="share-story reveal">
          <div className="ss-main">
            <div className="ss-k"><Ico name="pen" size={15} /> Podziel się swoją historią</div>
            <h3>Jesteś właścicielem? Podziel się swoją historią.</h3>
            <p>
              Każda relacja wzmacnia naszą wspólną sprawę. Jeśli i Ciebie spotkały podobne sytuacje —
              odmowa dostępu, odcięcie prądu, opłaty bez podstawy — opisz to i prześlij nam.
              Przyjmujemy relacje, zdjęcia i nagrania.
            </p>
            <p className="ss-rally">Twoja relacja zachęca kolejnych — tak rośnie nasza sprawa.</p>
            <p className="ss-note">
              Zaznacz, czy materiał przesyłasz wyłącznie jako dowód do sprawy, czy zgadzasz się również
              na jego publikację — anonimowo lub z podaniem imienia. Prosimy nie przesyłać materiałów
              ujawniających dane osób postronnych; przed publikacją anonimizujemy twarze, tablice
              rejestracyjne i dane osobowe. Zgłoszenia traktujemy poufnie i koordynujemy z kancelarią.
            </p>
          </div>
          <div className="ss-action">
            <a className="ss-email" href="mailto:[adres kampanii]">[adres kampanii]</a>
            <a className="btn btn--primary" href="#kontakt">
              Napisz do nas <span className="arr"><Ico name="arrow" size={14} /></span>
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------------- DLA BRANŻY TURYSTYCZNEJ ---------------- */
function Branza() {
  return (
    <section className="section section--dark-2" id="branza">
      <div className="wrap">
        <div className="industry reveal">
          <div className="in-ico"><Ico name="briefcase" size={24} /></div>
          <p className="eyebrow eyebrow--dark" style={{ justifyContent: "center" }}>Dla branży turystycznej</p>
          <h2>Decyzja o współpracy powinna być świadoma.</h2>
          <p>
            Współpracujesz z tym obiektem, oferujesz w nim pobyty lub rozważasz wprowadzenie go do
            oferty? Wokół tego kompleksu toczy się spór dotyczący praw własności ponad 120 obywateli UE —
            w tym odmowy dostępu do legalnie nabytych apartamentów. Zachęcamy biura podróży, touroperatorów
            i pośredników do zapoznania się z udokumentowaną sytuacją przed podjęciem decyzji o współpracy.
            Zależy nam, by była ona świadoma.
          </p>
          <div className="in-actions">
            <a className="btn btn--primary" href="#historie">
              Poznaj fakty <span className="arr"><Ico name="arrow" size={14} /></span>
            </a>
            <a className="btn btn--ghost btn--on-dark" href="#kontakt">Skontaktuj się z nami</a>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------------- UDOSTĘPNIJ + WSKAŹNIK ---------------- */
const SITE_URL = "https://ghsvrt.pages.dev/";
const SHARE_TEXT = "Ponad 120 prywatnych właścicieli apartamentów w Grand Hotelu Sveti Vlas w Bułgarii relacjonuje odmowy dostępu do legalnie nabytej własności. Rzeczowy zapis sprawy obywateli UE:";
/* Warianty do przyszłego użycia:
   EN: "Over 120 private apartment owners at Grand Hotel Sveti Vlas, Bulgaria, report being denied access to property they legally own. A factual record of this EU citizens' case:"
   DE: "Über 120 private Wohnungseigentümer im Grand Hotel Sveti Vlas, Bulgarien, berichten, dass ihnen der Zugang zu rechtmäßig erworbenem Eigentum verweigert wird. Eine sachliche Dokumentation dieses Falls von EU-Bürgern:" */

const PROGRESS = [
  { v: "[—]", k: "zebranych relacji" },
  { v: "120+", k: "właścicieli w grupie" },
  { v: "[—]", k: "publikacji w mediach" },
];

function Udostepnij() {
  const [copied, setCopied] = useStateImg(""); // "" | "link" | "post"
  const postText = `${SHARE_TEXT} ${SITE_URL}`;
  const enc = encodeURIComponent;
  const shares = [
    { key: "facebook", label: "Facebook", href: `https://www.facebook.com/sharer/sharer.php?u=${enc(SITE_URL)}` },
    { key: "x", label: "X", href: `https://twitter.com/intent/tweet?text=${enc(SHARE_TEXT)}&url=${enc(SITE_URL)}` },
    { key: "whatsapp", label: "WhatsApp", href: `https://wa.me/?text=${enc(postText)}` },
  ];
  const copy = (text, which) => {
    const done = () => { setCopied(which); setTimeout(() => setCopied(""), 2000); };
    if (navigator.clipboard && navigator.clipboard.writeText) {
      navigator.clipboard.writeText(text).then(done).catch(done);
    } else {
      const ta = document.createElement("textarea");
      ta.value = text; document.body.appendChild(ta); ta.select();
      try { document.execCommand("copy"); } catch (e) {}
      document.body.removeChild(ta); done();
    }
  };

  return (
    <section className="section section--dark-2" id="udostepnij">
      <div className="wrap">
        <div className="reveal">
          <p className="eyebrow eyebrow--dark">Udostępnij</p>
          <div className="section-head">
            <h2>Nagłośnij sprawę w minutę.</h2>
            <p className="lede">Im więcej osób pozna fakty, tym większa siła naszej wspólnej sprawy.
              Gotowy tekst i przyciski poniżej — bez wymyślania treści.</p>
          </div>
        </div>

        <div className="share-grid">
          <div className="share-actions reveal">
            <div className="share-row">
              {shares.map((s) => (
                <a key={s.key} className="share-btn" href={s.href} target="_blank" rel="noopener noreferrer"
                   aria-label={`Udostępnij na ${s.label}`}>
                  <Ico name={s.key} size={17} /> {s.label}
                </a>
              ))}
              <button className="share-btn" onClick={() => copy(SITE_URL, "link")}
                aria-label="Kopiuj link do strony">
                <Ico name={copied === "link" ? "check" : "link"} size={17} />
                {copied === "link" ? "Skopiowano" : "Kopiuj link"}
              </button>
            </div>

            <div className="share-post">
              <div className="sp-head">
                <span className="sp-k">Gotowy tekst posta (PL)</span>
                <button className="sp-copy" onClick={() => copy(postText, "post")}>
                  <Ico name={copied === "post" ? "check" : "doc"} size={14} />
                  {copied === "post" ? "Skopiowano" : "Kopiuj tekst"}
                </button>
              </div>
              <p className="sp-text">{postText}</p>
              <p className="sp-note">Warianty EN / DE — w przygotowaniu.</p>
            </div>
          </div>

          <aside className="progress-card reveal" style={{ transitionDelay: "90ms" }}>
            <div className="pc-k">Nasza sprawa w liczbach</div>
            {PROGRESS.map((p, i) => (
              <div className="pc-row" key={i}>
                <span className="pc-v">{p.v}</span>
                <span className="pc-l">{p.k}</span>
              </div>
            ))}
            <p className="pc-note">Pola aktualizowane ręcznie.</p>
          </aside>
        </div>
      </div>
    </section>
  );
}

/* ---------------- CYTATY ---------------- */
const QUOTES = [
  "Za prąd płacimy sami — mamy indywidualne umowy — a mimo to hotel może nam go odciąć.",
  "Jesteśmy współwłaścicielami części wspólnych, ale nie wolno nam z nich korzystać.",
  "Z nikim z nas nie podpisano żadnej umowy o zarządzanie.",
];
function Cytaty() {
  return (
    <section className="section section--paper-2" id="cytaty">
      <div className="wrap">
        <div className="reveal">
          <p className="eyebrow">Głosy właścicieli</p>
          <div className="section-head">
            <h2>Słowa, które powtarzają się w naszych relacjach.</h2>
          </div>
        </div>
        <div className="quotes-grid">
          {QUOTES.map((q, i) => (
            <div className="quote reveal" key={i} style={{ transitionDelay: `${i * 90}ms` }}>
              <blockquote>„{q}"</blockquote>
              <div className="q-attr">— Głos właściciela apartamentu</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Ico, Figure, ActSep, Impact, Stories, Kim, CoSieDzieje, CzesciWspolne, BigQuote, SytuacjaPrawna, OcoChodzi, Warning, Media, Precedens, Goscie, MozeszPomoc, Branza, Udostepnij, Cytaty });
