/* sections-bottom.jsx — Pricing, FAQ, FinalCTA, Footer — all translated */

/* ---- Pricing ---- */
function Pricing() {
  var lang = React.useContext(window.LangCtx);
  var t = window.T[lang].pricing;
  var cfg = window.CBR_CONFIG.pricing;
  var ref = React.useState('onetime'); var mode = ref[0]; var setMode = ref[1];

  var isMonthly = mode === 'monthly';

  var formatPrice = function(n) {
    return '€' + n.toFixed(2).replace('.', lang === 'nl' ? ',' : '.');
  };

  var carPrice = isMonthly ? cfg.monthly.car : cfg.oneTime.car;
  var motoPrice = isMonthly ? cfg.monthly.motorcycle : cfg.oneTime.motorcycle;

  return (
    <section className="section section--alt" id="pricing">
      <div className="container">
        <div className="section-header section-header--center">
          <span className="section-label">{t.label}</span>
          <h2 className="section-heading">{t.heading}</h2>
          <p className="section-desc">{t.desc}</p>
        </div>

        {/* Toggle */}
        <div className="pricing-toggle">
          <div className="pricing-toggle__track">
            <div className={"pricing-toggle__pill" + (isMonthly ? " pricing-toggle__pill--right" : "")}></div>
            <button className={"pricing-toggle__btn" + (!isMonthly ? " pricing-toggle__btn--active" : "")}
              onClick={function(){ setMode('onetime'); }}>{t.toggleOneTime}</button>
            <button className={"pricing-toggle__btn" + (isMonthly ? " pricing-toggle__btn--active" : "")}
              onClick={function(){ setMode('monthly'); }}>{t.toggleMonthly}</button>
          </div>
        </div>

        <div className="pricing-grid pricing-grid--3">
          {/* Free */}
          <div className="pricing-card">
            <div className="pricing-card__name">{t.freeName}</div>
            <div className="pricing-card__price">{t.freePrice}</div>
            <div className="pricing-card__desc">{t.freeDesc}</div>
            <ul className="pricing-card__features">
              {t.freeFeatures.map(function(f, i) { return <li key={i}>{f}</li>; })}
            </ul>
            <button className="btn btn--ghost" onClick={function(){ window.openSignup(); }}>{t.freeCta}</button>
          </div>

          {/* Car */}
          <div className="pricing-card pricing-card--featured">
            <div className="pricing-card__badge">{t.carBadge}</div>
            <div className="pricing-card__name">{isMonthly ? t.carNameMonthly : t.carName}</div>
            <div className="pricing-card__price">
              {formatPrice(carPrice)}
              {isMonthly && <span>{t.perMonth}</span>}
            </div>
            {!isMonthly && <div className="pricing-card__duration">{t.duration3mo}</div>}
            <div className="pricing-card__desc"></div>
            <ul className="pricing-card__features">
              {t.carFeatures.map(function(f, i) { return <li key={i}>{f}</li>; })}
            </ul>
            <button className="btn btn--primary" onClick={function(){
              window.openSignup({ category: 'car', plan: isMonthly ? 'car_monthly' : 'car_exam_pack' });
            }}>{isMonthly ? t.carCtaMonthly : t.carCta}</button>
          </div>

          {/* Motorcycle */}
          <div className="pricing-card">
            <div className="pricing-card__name">{isMonthly ? t.motoNameMonthly : t.motoName}</div>
            <div className="pricing-card__price">
              {formatPrice(motoPrice)}
              {isMonthly && <span>{t.perMonth}</span>}
            </div>
            {!isMonthly && <div className="pricing-card__duration">{t.duration3mo}</div>}
            <div className="pricing-card__desc"></div>
            <ul className="pricing-card__features">
              {t.motoFeatures.map(function(f, i) { return <li key={i}>{f}</li>; })}
            </ul>
            <button className="btn btn--primary" onClick={function(){
              window.openSignup({ category: 'motorcycle', plan: isMonthly ? 'moto_monthly' : 'moto_exam_pack' });
            }}>{isMonthly ? t.motoCtaMonthly : t.motoCta}</button>
          </div>
        </div>

        {/* Notes */}
        <div className="pricing-notes">
          {isMonthly ? (
            <p className="pricing-note">
              {t.comboMonthlyNote}{' '}
              <button className="pricing-note__link" onClick={function(){
                window.openSignup({ category: 'both', plan: 'combo_monthly' });
              }}>{t.comboMonthlyPrice}</button>{' '}
              {t.comboMonthlySuffix}
            </p>
          ) : (
            <React.Fragment>
              <p className="pricing-note">
                {t.comboNote}{' '}
                <button className="pricing-note__link" onClick={function(){
                  window.openSignup({ category: 'both', plan: 'combo_pack' });
                }}>{t.comboPrice}</button>
              </p>
              <p className="pricing-note">
                {t.extensionNote}{' '}
                <strong>{t.extensionPrice}</strong>{' '}
                {t.extensionSuffix}
              </p>
            </React.Fragment>
          )}
        </div>
      </div>
    </section>
  );
}

/* ---- FAQ ---- */
function FAQ() {
  var lang = React.useContext(window.LangCtx);
  var t = window.T[lang].faq;
  var ref = React.useState(null); var openIdx = ref[0]; var setOpenIdx = ref[1];

  return (
    <section className="section" id="faq">
      <div className="container">
        <div className="section-header section-header--center">
          <span className="section-label">{t.label}</span>
          <h2 className="section-heading">{t.heading}</h2>
        </div>
        <div className="faq-list">
          {t.items.map(function(item, i) {
            return (
              <div key={i} className={"faq-item" + (openIdx === i ? " faq-item--open" : "")}>
                <button className="faq-item__q"
                  onClick={function(){ setOpenIdx(openIdx === i ? null : i); }}
                  aria-expanded={openIdx === i}>
                  <span>{item.q}</span>
                  <span className="faq-item__icon">+</span>
                </button>
                <div className="faq-item__a" aria-hidden={openIdx !== i}>
                  <div className="faq-item__a-inner">{item.a}</div>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

/* ---- Final CTA ---- */
function FinalCTA() {
  var lang = React.useContext(window.LangCtx);
  var t = window.T[lang].cta;
  return (
    <section className="section section--dark">
      <div className="container">
        <div className="final-cta">
          <h2>{t.heading}</h2>
          <p>{t.desc}</p>
          <div style={{display:'flex',gap:'12px',justifyContent:'center',flexWrap:'wrap'}}>
            <button className="btn btn--dark btn--lg" onClick={function(){ window.openSignup(); }}>{t.button}</button>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---- Footer ---- */
function Footer() {
  var lang = React.useContext(window.LangCtx);
  var t = window.T[lang].footer;
  return (
    <div className="section--dark" style={{paddingBottom:0}}>
      <footer className="footer">
        <div className="container">
          <div className="footer__inner">
            <div className="footer__left">
              <div className="footer__logo">
                <span className="logo-cbr">CBR</span>
                <span style={{color:'#A8A29E'}}>Master</span>
              </div>
              <div className="footer__copy">{t.copy}</div>
            </div>
            <div className="footer__links">
              <a href="#">{t.privacy}</a>
              <a href="#">{t.terms}</a>
              <a href="#">{t.contact}</a>
            </div>
          </div>
        </div>
      </footer>
    </div>
  );
}

Object.assign(window, { Pricing, FAQ, FinalCTA, Footer });