/* global React */
const { useState } = React;
const { TESTIMONIALS, FAQ_ITEMS } = window;

function Stars({ size = 14 }) {
  return (
    <span className="stars-inline" style={{display: "inline-flex", gap: 3}}>
      {[0,1,2,3,4].map(i => (
        <svg key={i} width={size} height={size} viewBox="0 0 20 20" fill="#F5B125" aria-hidden="true">
          <path d="M10 1.5l2.472 5.508 5.999.612-4.495 4.041 1.244 5.889L10 14.6l-5.22 2.95L6.024 11.66 1.529 7.62l5.999-.612L10 1.5z"/>
        </svg>
      ))}
    </span>
  );
}

function Testimonials() {
  return (
    <section id="reviews">
      <div className="container">
        <div className="section-head reveal">
          <div>
            <span className="eyebrow">Отзывы</span>
            <h2 className="h-1">Что говорят<br/>наши <em>пациенты</em></h2>
          </div>
          <p className="lead">
            Более 600 отзывов в Яндекс, 2ГИС и ПроДокторов со средней оценкой 4.9. Здесь — несколько свежих, без редактуры.
          </p>
        </div>
        <div className="testimonials-grid reveal-stagger">
          {TESTIMONIALS.map((t, i) => (
            <div key={i} className="testimonial">
              <Stars size={14} />
              <blockquote>{t.text}</blockquote>
              <div className="author">
                <div className="name">{t.name}</div>
                <div className="when">{t.when}</div>
              </div>
            </div>
          ))}
        </div>

        <div className="rating-widgets reveal">
          <div className="rating-widgets-title">Мы есть в этих сервисах:</div>
          <div className="rating-widgets-row">
            <a href="https://prodoctorov.ru/moskva/lpu/84031-e-clinic/" target="_blank" rel="noreferrer" className="rating-widget">
              <div className="rw-logo">ПроДокторов</div>
              <div className="rw-score">
                <span className="rw-num">4.9</span>
                <Stars size={13} />
              </div>
              <div className="rw-foot">Смотреть на ПроДокторов →</div>
            </a>
            <a href="https://yandex.ru/maps/org/e_slinic/212474134904/reviews/" target="_blank" rel="noreferrer" className="rating-widget yandex">
              <div className="rw-logo"><span className="ya-logo">Я</span> Яндекс Бизнес</div>
              <div className="rw-score">
                <span className="rw-num">4.8</span>
                <Stars size={13} />
              </div>
              <div className="rw-foot">Смотреть на Яндекс.Картах →</div>
            </a>
            <a href="https://2gis.ru" target="_blank" rel="noreferrer" className="rating-widget twogis">
              <div className="rw-logo"><span className="tg-logo">2</span>ГИС</div>
              <div className="rw-score">
                <span className="rw-num">4.9</span>
                <Stars size={13} />
              </div>
              <div className="rw-foot">Смотреть на 2ГИС →</div>
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}

function Faq() {
  const [open, setOpen] = useState(0);
  return (
    <section id="faq" className="about">
      <div className="container">
        <div className="section-head reveal">
          <div>
            <span className="eyebrow">Вопросы</span>
            <h2 className="h-1">Частые<br/><em>вопросы</em></h2>
          </div>
          <p className="lead">
            Если не нашли ответ — позвоните по +7 (999) 141-01-01 или оставьте заявку. Администратор перезвонит в течение 9 минут.
          </p>
        </div>
        <div className="faq-list reveal">
          {FAQ_ITEMS.map((f, i) => (
            <div key={i} className={"faq-item " + (open === i ? "open" : "")}>
              <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
                <span>{f.q}</span>
                <span className="toggle">+</span>
              </button>
              <div className="faq-a">
                <div className="inner">{f.a}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Stars, Testimonials, Faq });