/* global React */
/* Hi-fi section: Stacjonarnie vs online (comparison) */
const { B: CmpB, Icon: CmpIcon } = window;

const CmpCheck = () => (
  <svg className="compare__ic compare__ic--yes" width="20" height="20" viewBox="0 0 24 24" fill="none"
    stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
    <path d="M20 6 9 17l-5-5"></path>
  </svg>);

const CmpNo = () => (
  <svg className="compare__ic compare__ic--no" width="20" height="20" viewBox="0 0 24 24" fill="none"
    stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
    <path d="M18 6 6 18"></path><path d="m6 6 12 12"></path>
  </svg>);

const COMPARE_ROWS = [
  {
    feat: "Forma wizyt",        shortFeat: "Forma wizyt",
    stat: "Dojazd na każdą wizytę lekarską",                     shortStat: "Dojazd do gabinetu",
    holi: "100% online, bez wychodzenia z domu",                  shortHoli: "100% online z domu"
  },
  {
    feat: "Czas oczekiwania",   shortFeat: "Oczekiwanie na termin",
    stat: "Czekasz od 2 do 6 tygodni na wolny termin",            shortStat: "2–6 tygodni",
    holi: "Wizyta i pełen plan w mniej niż 14 dni",               shortHoli: "Do 14 dni"
  },
  {
    feat: "Zespół specjalistów", shortFeat: "Psycho-dietetyk",
    stat: "Lekarz, dietetyk i psycholog w różnych gabinetach",    shortStat: "Płatny osobno za wizytę",
    holi: "Cały zespół w jednym programie",                        shortHoli: "Nielimitowany w cenie"
  },
  {
    feat: "Kontakt między wizytami", shortFeat: "Kontakt",
    stat: "Kontakt z lekarzem urwany po wyjściu z gabinetu",      shortStat: "Brak – urwany po wyjściu",
    holi: "E-wizyty co 3 miesiące i czat 24/7",                   shortHoli: "Czat z zespołem 24/7"
  },
  {
    feat: "Badania krwi",       shortFeat: "Badania krwi",
    stat: "Szukasz laboratorium i płacisz osobno",                 shortStat: "Szukasz i płacisz sam",
    holi: "0 zł - w dowolnym punkcie Diagnostyka",                 shortHoli: "0 zł, w punkcie Diagnostyka"
  },

  {
    feat: "Koszt opieki",       shortFeat: "Koszt",
    stat: "Nawet 700–950 zł (lekarz + dietetyk + badania krwi)",  shortStat: "do 950 zł / mies.",
    holi: "od 289 zł / mies. (wszystko wliczone w jedną cenę)",       shortHoli: "od 289 zł / mies."
  }
];

window.CompareSection = function CompareSection() {
  return (
    <section className="compare section-pad" id="porownanie">
      <div className="container">
        <div className="compare__head">
          <h2>
            Szukasz poradni w <em>Twoim mieście</em>? Holi to lepszy wybór
          </h2>

        </div>

        <div className="compare__panel">
          <div className="compare__row compare__row--head">
            <div className="compare__feat"></div>
            <div className="compare__col-head">
              <span className="compare__full">Tradycyjna poradnia stacjonarna</span>
              <span className="compare__short">Stacjonarnie</span>
            </div>
            <div className="compare__col-head compare__col-head--holi">
              <span className="compare__full">Klinika Holi online</span>
              <span className="compare__short">Holi online</span>
            </div>
          </div>

          {COMPARE_ROWS.map((r, i) =>
            <div className={"compare__row" + (r.hideMobile ? " compare__row--hide-mobile" : "")} key={i}>
              <div className="compare__feat">
                <span className="compare__full">{r.feat}</span>
                <span className="compare__short">{r.shortFeat}</span>
              </div>
              <div className="compare__cell">
                <CmpNo />
                <span className="compare__cell-text">
                  <span className="compare__full">{r.stat}</span>
                  <span className="compare__short">{r.shortStat}</span>
                </span>
              </div>
              <div className="compare__cell compare__cell--holi">
                <CmpCheck />
                <span className="compare__cell-text">
                  <span className="compare__full">{r.holi}</span>
                  <span className="compare__short">{r.shortHoli}</span>
                </span>
              </div>
            </div>)}
        </div>

        <div className="compare__cta">
          <a className="btn btn--primary btn--lg" href="https://www.klinikaholi.pl/wywiad" target="_self">
            Sprawdź, czy się kwalifikujesz <CmpIcon name="arrow_right" size={18} />
          </a>
        </div>
      </div>
    </section>);
};