const { useState: useState2 } = React;

/* =========================================================
   COUNTRIES
   ========================================================= */
window.Countries = function Countries() {
  const lang = window.getLang();
  const cn = window.COUNTRY_NAMES[lang] || window.COUNTRY_NAMES.UA;
  return (
    <section id="countries">
      <div className="container">
        <div className="section-head center">
          <span className="eyebrow">{t('co_eyebrow')}</span>
          <h2>{t('co_h2_a')} <span className="serif grad-text">{t('co_h2_em')}</span> {t('co_h2_b')}</h2>
          <p className="section-head__sub">{t('co_sub')}</p>
        </div>
        <div className="countries__grid">
          {window.COUNTRIES.map(c => (
            <a key={c.code} href="#" className="country-tile">
              <div className="country-tile__flag">{c.flag}</div>
              <div style={{flex:1, minWidth:0}}>
                <div className="country-tile__name">{cn[c.code] || c.name}</div>
                <div className="country-tile__count">{c.jobs} {t('co_jobs')}</div>
              </div>
              <div className="country-tile__arrow"><Icon name="chevron" size={16}/></div>
            </a>
          ))}
        </div>
        <div style={{textAlign:'center', marginTop:40}}>
          <a href="#" className="btn btn--grad">{t('co_all')} <Icon name="arrowRight" size={16} className="arrow-icon"/></a>
        </div>
      </div>
    </section>
  );
};

/* =========================================================
   CATEGORIES
   ========================================================= */
window.Categories = function Categories() {
  const lang = window.getLang();
  const cats = window.CATEGORY_NAMES[lang] || window.CATEGORY_NAMES.UA;
  const icons = ['tool','package','sparkle','leaf'];
  return (
    <section style={{background:'var(--bg-soft)'}}>
      <div className="container">
        <div className="section-head">
          <span className="eyebrow">{t('cat_eyebrow')}</span>
          <h2>{t('cat_h2_a')} <span className="serif grad-text">{t('cat_h2_em')}</span></h2>
        </div>
        <div className="cat__grid">
          {cats.map((c, i) => (
            <a key={i} href="#" className={`cat cat--${i+1}`}>
              <div className="cat__count">{c.count}</div>
              <div className="cat__ic"><Icon name={icons[i]} size={26}/></div>
              <div>
                <h3>{c.title}</h3>
                <p>{c.desc}</p>
              </div>
            </a>
          ))}
        </div>
        <div style={{textAlign:'center', marginTop:48}}>
          <a href="#apply" className="btn btn--dark btn--lg">{t('cat_pick')} <Icon name="arrowRight" size={16} className="arrow-icon"/></a>
        </div>
      </div>
    </section>
  );
};

/* =========================================================
   STEPS
   ========================================================= */
window.Steps = function Steps() {
  const lang = window.getLang();
  const steps = window.STEP_NAMES[lang] || window.STEP_NAMES.UA;
  const icons = ['chat','search','file','truck'];
  return (
    <div className="container" id="services">
      <div className="steps">
        <div className="steps__head">
          <div>
            <span className="eyebrow" style={{color:'var(--grad-1)'}}>{t('st_eyebrow')}</span>
            <h2 style={{marginTop:12}}>{t('st_h2_a')} <em>{t('st_h2_em')}</em><br/>{t('st_h2_b')}</h2>
          </div>
          <a href="#apply" className="btn btn--grad btn--lg">{t('st_start')} <Icon name="arrowRight" size={16} className="arrow-icon"/></a>
        </div>
        <div className="steps__grid">
          {steps.map((s,i) => (
            <div key={i} className="step">
              <div className="step__icon"><Icon name={icons[i]} size={18}/></div>
              <div className="step__num">{t('st_step')} {String(i+1).padStart(2,'0')}</div>
              <h4>{s.title}</h4>
              <p>{s.desc}</p>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

/* =========================================================
   CALCULATOR
   ========================================================= */
window.Calculator = function Calculator() {
  const [country, setCountry] = useState2('PL');
  const [hours, setHours] = useState2(220);
  const [cat, setCat] = useState2('warehouse');
  const lang = window.getLang();
  const cn = window.COUNTRY_NAMES[lang] || window.COUNTRY_NAMES.UA;

  const rates = {
    PL: { min: 18, max: 24, currency: 'зл', eurRate: 0.23 },
    CZ: { min: 140, max: 190, currency: 'крон', eurRate: 0.041 },
    DE: { min: 12.5, max: 15, currency: '€', eurRate: 1 },
    NL: { min: 12, max: 15, currency: '€', eurRate: 1 },
    ES: { min: 10, max: 12, currency: '€', eurRate: 1 },
  };
  const r = rates[country];
  const avg = (r.min + r.max) / 2;
  const gross = Math.round(avg * hours);
  const housingCost = country === 'PL' ? 800 : country === 'CZ' ? 4500 : 280;
  const food = country === 'CZ' ? 3000 : country === 'PL' ? 600 : 200;
  const net = gross - (cat === 'with-housing' ? 0 : housingCost) - food;
  const netEUR = Math.round(net * r.eurRate);

  return (
    <section>
      <div className="container">
        <div className="section-head center">
          <span className="eyebrow">{t('cl_eyebrow')}</span>
          <h2>{t('cl_h2_a')} <span className="serif grad-text">{t('cl_h2_em')}</span> {t('cl_h2_b')}</h2>
          <p className="section-head__sub">{t('cl_sub')}</p>
        </div>
        <div className="calc">
          <div className="calc__form">
            <div className="field">
              <label className="field__label">{t('cl_country')}</label>
              <select value={country} onChange={e=>setCountry(e.target.value)}>
                <option value="PL">🇵🇱 {cn.PL}</option>
                <option value="CZ">🇨🇿 {cn.CZ}</option>
                <option value="DE">🇩🇪 {cn.DE}</option>
                <option value="NL">🇳🇱 {cn.NL}</option>
                <option value="ES">🇪🇸 {cn.ES}</option>
              </select>
            </div>
            <div className="field">
              <label className="field__label">{t('cl_cat')}</label>
              <select value={cat} onChange={e=>setCat(e.target.value)}>
                <option value="warehouse">{t('cl_cat_warehouse')}</option>
                <option value="production">{t('cl_cat_production')}</option>
                <option value="service">{t('cl_cat_service')}</option>
                <option value="with-housing">{t('cl_cat_housing')}</option>
              </select>
            </div>
            <div className="field">
              <div className="slider-row">
                <label className="field__label" style={{flex:1}}>{t('cl_hours')}</label>
                <b>{hours}</b><span style={{color:'var(--ink-3)', fontSize:13}}>год</span>
              </div>
              <input type="range" min="160" max="280" step="4" value={hours} onChange={e=>setHours(+e.target.value)}/>
              <div className="field__hint">{t('cl_hint')}</div>
            </div>
            <div className="field">
              <label className="field__label">{t('cl_rate')}</label>
              <div style={{display:'flex', alignItems:'baseline', gap:8, padding:'10px 0'}}>
                <b className="grad-text" style={{fontFamily:'var(--font-display)', fontStyle:'italic', fontSize:32, fontWeight:400}}>{r.min}–{r.max}</b>
                <span style={{color:'var(--ink-3)', fontSize:14}}>{r.currency}/год</span>
              </div>
            </div>
          </div>

          <div className="calc__result">
            <div className="calc__result-label">{t('cl_net')}</div>
            <div className="calc__result-big">
              ≈ {netEUR.toLocaleString('uk-UA')} <small>€</small>
            </div>
            <div style={{fontSize:13, color:'rgba(255,255,255,0.55)'}}>
              ({net.toLocaleString('uk-UA')} {r.currency})
            </div>
            <div className="calc__breakdown">
              <div className="calc__brow"><span>{t('cl_breakdown_gross')}</span><span>{gross.toLocaleString('uk-UA')} {r.currency}</span></div>
              <div className="calc__brow"><span>{t('cl_breakdown_housing')} {cat==='with-housing' ? t('cl_breakdown_employer') : ''}</span><span>{cat==='with-housing'? '0' : '− '+housingCost.toLocaleString('uk-UA')} {r.currency}</span></div>
              <div className="calc__brow"><span>{t('cl_breakdown_food')}</span><span>− {food.toLocaleString('uk-UA')} {r.currency}</span></div>
            </div>
            <a href="#apply" className="btn btn--grad" style={{justifyContent:'center'}}>
              {t('cl_btn')} <Icon name="arrowRight" size={16} className="arrow-icon"/>
            </a>
            <p style={{fontSize:11, color:'rgba(255,255,255,0.5)', textAlign:'center'}}>{t('cl_note')}</p>
          </div>
        </div>
      </div>
    </section>
  );
};

/* =========================================================
   STATS
   ========================================================= */
window.Stats = function Stats() {
  return (
    <section style={{background:'var(--bg-soft)'}}>
      <div className="container">
        <div className="section-head">
          <span className="eyebrow">{t('stat_eyebrow')}</span>
          <h2>{t('stat_h2_a')} <span className="serif grad-text">{t('stat_h2_em')}</span></h2>
        </div>
        <div className="stats">
          <div className="stat stat--1">
            <div className="stat__num">6<span>+</span></div>
            <div className="stat__label">{t('stat1')}</div>
          </div>
          <div className="stat stat--2">
            <div className="stat__num">10K<span>+</span></div>
            <div className="stat__label">{t('stat2')}</div>
          </div>
          <div className="stat stat--3">
            <div className="stat__num">20<span>+</span></div>
            <div className="stat__label">{t('stat3')}</div>
          </div>
          <div className="stat stat--4">
            <div className="stat__num">15<span>хв</span></div>
            <div className="stat__label">{t('stat4')}</div>
          </div>
        </div>
      </div>
    </section>
  );
};