/* global React, Container, Section, SectionIdx, Button, useLang, t */

function Pricing() {
  useLang();
  const tiers = t('pricing.tiers');
  const rows = t('pricing.rows');
  const yes = t('pricing.yes');
  const no = t('pricing.no');
  const cell = (val) => val === 'yes' ? <span className="yes">{yes}</span>
    : val === 'no' ? <span className="no">{no}</span>
    : <span className="yes">{val}</span>;

  return (
    <Section id="pricing">
      <Container>
        <SectionIdx n="04" name={t('pricing.idx')} meta={t('pricing.idxMeta')} />

        <div className="ea-section-head">
          <h2 className="ea-h2">{t('pricing.title')}</h2>
          <p className="ea-lead">{t('pricing.lead')}</p>
        </div>

        {/* Десктоп: спецификационная таблица */}
        <div className="ea-pricing-table" role="table">
          <div className="ea-pricing-cell head">
            <div className="ea-pricing-row-label">{t('pricing.param')}</div>
          </div>
          {tiers.map((tr, i) => (
            <div key={i} className={`ea-pricing-cell head${i === 1 ? ' featured' : ''}`}>
              <div className="ea-tier-name">{tr.name}</div>
              <div className="ea-tier-price">{tr.price}</div>
              <div className="ea-tier-unit">{tr.unit}</div>
              <div className="ea-tier-cta">
                <a href="#contact"><Button variant={i === 1 ? 'primary' : 'secondary'} size="sm" arrow>{t('pricing.cta')}</Button></a>
              </div>
            </div>
          ))}

          {rows.map((row, ri) => (
            <React.Fragment key={ri}>
              <div className="ea-pricing-cell">
                <div className="ea-pricing-row-label">{row[0]}</div>
              </div>
              {row[1].map((val, ci) => (
                <div key={ci} className="ea-pricing-cell">
                  <div className="ea-pricing-feat">{cell(val)}</div>
                </div>
              ))}
            </React.Fragment>
          ))}
        </div>

        {/* Мобильное: стек карточек */}
        <div className="ea-pricing-mobile">
          {tiers.map((tr, ti) => (
            <article key={ti} className={`ea-pricing-tier${ti === 1 ? ' featured' : ''}`}>
              <header className="ea-pricing-tier-head">
                <div className="ea-tier-name">{tr.name}</div>
                <div className="ea-tier-price">{tr.price}</div>
                <div className="ea-tier-unit">{tr.unit}</div>
                <div className="ea-tier-cta">
                  <a href="#contact"><Button variant={ti === 1 ? 'primary' : 'secondary'} size="md" arrow>{t('pricing.ctaMobile')}</Button></a>
                </div>
              </header>
              <div className="ea-pricing-tier-feats">
                {rows.map(([label, vals], ri) => {
                  const v = vals[ti];
                  return (
                    <div key={ri} className="ea-pricing-tier-feat">
                      <span className="k">{label}</span>
                      <span className={'v' + (v === 'no' ? ' no' : '')}>
                        {v === 'yes' ? yes : v === 'no' ? no : v}
                      </span>
                    </div>
                  );
                })}
              </div>
            </article>
          ))}
        </div>
      </Container>
    </Section>
  );
}

function FAQ() {
  useLang();
  const [open, setOpen] = React.useState(0);
  const items = t('faq.items');
  return (
    <Section id="faq">
      <Container>
        <SectionIdx n="05" name={t('faq.idx')} meta={`${items.length} ${t('faq.meta')}`} />

        <div className="ea-section-head">
          <h2 className="ea-h2">{t('faq.title')}</h2>
          <p className="ea-lead">{t('faq.lead')}</p>
        </div>

        <div className="ea-faq">
          {items.map((it, i) => {
            const isOpen = open === i;
            return (
              <div key={i} className={`ea-faq-item${isOpen ? ' open' : ''}`}>
                <button
                  type="button"
                  className="ea-faq-q"
                  aria-expanded={isOpen}
                  aria-controls={`faq-a-${i}`}
                  onClick={() => setOpen(isOpen ? -1 : i)}
                  style={{ width: '100%', border: 0, background: 'transparent', textAlign: 'left' }}
                >
                  <span className="n">{String(i + 1).padStart(2, '0')}</span>
                  <span className="t">{it.q}</span>
                  <span className="ico" aria-hidden="true">+</span>
                </button>
                <div id={`faq-a-${i}`} className="ea-faq-a" role="region">{it.a}</div>
              </div>
            );
          })}
        </div>
      </Container>
    </Section>
  );
}

window.Pricing = Pricing;
window.FAQ = FAQ;