const { useState, useEffect } = React;

/* =========================================================
   TOPBAR + MOBILE NAV DRAWER
   ========================================================= */
window.Topbar = function Topbar({ lang, setLang }) {
  const [menuOpen, setMenuOpen] = useState(false);

  useEffect(() => {
    document.body.style.overflow = menuOpen ? 'hidden' : '';
    return () => { document.body.style.overflow = ''; };
  }, [menuOpen]);

  const close = () => setMenuOpen(false);

  return (
    <>
      <header className="topbar topbar--dark">
        <div className="container topbar__row">
          <a href="#" className="logo" style={{color:'#fff'}}>
            <span className="logo__mark">F</span>
            <span>Folio<span style={{background:'linear-gradient(100deg, var(--grad-2), var(--grad-4))', WebkitBackgroundClip:'text', WebkitTextFillColor:'transparent'}}>.</span><span style={{opacity:0.55, fontWeight:500, marginLeft:6, fontSize:'0.78em', letterSpacing:'0.08em'}}>LTD</span></span>
          </a>
          <nav className="nav">
            <a href="#jobs" className="active">{t('nav_jobs')}</a>
            <a href="#countries">{t('nav_countries')}</a>
            <a href="#services">{t('nav_services')}</a>
            <a href="#testimonials">{t('nav_reviews')}</a>
            <a href="#faq">{t('nav_faq')}</a>
            <a href="#contacts">{t('nav_contacts')}</a>
          </nav>
          <div className="topbar__actions">
            <div className="lang-switch">
              {['UA','RU'].map(l => (
                <button key={l} className={lang===l?'on':''} onClick={()=>setLang(l)}>{l}</button>
              ))}
            </div>
            <a href="tel:+380000000000" className="phone-link">
              <Icon name="phone" size={14}/> +380 00 000 00 00
            </a>
            <div className="messengers">
              <a className="msg-btn" href="#" title="Telegram"><Icon name="chat" size={15}/></a>
              <a className="msg-btn" href="#" title="Viber"><Icon name="phone" size={15}/></a>
              <a className="msg-btn" href="#" title="Email"><Icon name="mail" size={15}/></a>
            </div>
            <a href="#apply" className="btn btn--grad btn--sm">{t('cta_pick')}</a>
          </div>
          <button className="hamburger" onClick={()=>setMenuOpen(true)} aria-label="Menu">
            <span></span><span></span><span></span>
          </button>
        </div>
      </header>

      <div className={`mobile-nav${menuOpen?' open':''}`}>
        <div className="mobile-nav__overlay" onClick={close}></div>
        <div className="mobile-nav__drawer">
          <div className="mobile-nav__top">
            <a href="#" className="logo" style={{color:'#fff'}}>
              <span className="logo__mark">F</span>
              <span>Folio<span style={{opacity:0.55, fontWeight:500, marginLeft:6, fontSize:'0.78em', letterSpacing:'0.08em'}}>LTD</span></span>
            </a>
            <button className="mobile-nav__close" onClick={close}>
              <Icon name="plus" size={18} style={{transform:'rotate(45deg)'}}/>
            </button>
          </div>
          <div className="mobile-nav__langs">
            {['UA','RU'].map(l => (
              <button key={l} className={lang===l?'on':''} onClick={()=>setLang(l)}>{l}</button>
            ))}
          </div>
          <div className="mobile-nav__divider"></div>
          {[
            ['#jobs',t('nav_jobs')],['#countries',t('nav_countries')],['#services',t('nav_services')],
            ['#testimonials',t('nav_reviews')],['#faq',t('nav_faq')],['#contacts',t('nav_contacts')],
          ].map(([href, label]) => (
            <a key={href} href={href} className="mobile-nav__link" onClick={close}>{label}</a>
          ))}
          <div className="mobile-nav__divider"></div>
          <div className="mobile-nav__cta">
            <a href="tel:+380000000000" className="mobile-nav__phone">
              <Icon name="phone" size={18}/> +380 00 000 00 00
            </a>
            <a href="#apply" className="btn btn--grad" style={{justifyContent:'center'}} onClick={close}>
              {t('cta_pick_vacancy')} <Icon name="arrowRight" size={16} className="arrow-icon"/>
            </a>
            <div style={{display:'flex', gap:8, paddingTop:4}}>
              <a className="msg-btn" style={{flex:1, width:'auto', height:44, borderRadius:10, background:'rgba(255,255,255,0.08)', color:'#fff', justifyContent:'center'}} href="#">
                <Icon name="chat" size={18}/><span style={{marginLeft:6, fontSize:13}}>Telegram</span>
              </a>
              <a className="msg-btn" style={{flex:1, width:'auto', height:44, borderRadius:10, background:'rgba(255,255,255,0.08)', color:'#fff', justifyContent:'center'}} href="#">
                <Icon name="phone" size={18}/><span style={{marginLeft:6, fontSize:13}}>Viber</span>
              </a>
            </div>
          </div>
        </div>
      </div>
    </>
  );
};

/* =========================================================
   HERO
   ========================================================= */
window.Hero = function Hero() {
  return (
    <div className="hero-wrap">
    <section className="hero">
      <div className="container">
        <div className="hero__grid">
          <div>
            <div className="hero__pill">
              <span className="hero__pill-tag">{t('hero_pill_new')}</span>
              <span>{t('hero_pill_text')}<strong>{t('hero_pill_rate')}</strong></span>
            </div>
            <h1>
              {t('hero_h1_a')} <em>{t('hero_h1_em')}</em><br/>
              {t('hero_h1_b')}
            </h1>
            <p className="hero__sub">{t('hero_sub')}</p>
            <ul className="hero__perks" style={{listStyle:'none', padding:0, margin:'32px 0 0'}}>
              <li className="hero__perk"><span className="check"><Icon name="check" size={14} stroke={2.5}/></span>{t('hero_perk1')}</li>
              <li className="hero__perk"><span className="check"><Icon name="check" size={14} stroke={2.5}/></span>{t('hero_perk2')}</li>
              <li className="hero__perk"><span className="check"><Icon name="check" size={14} stroke={2.5}/></span>{t('hero_perk3')}</li>
            </ul>
            <div className="hero__ctas">
              <a href="#apply" className="btn btn--grad btn--lg">
                {t('cta_pick_vacancy')} <Icon name="arrowRight" size={16} className="arrow-icon"/>
              </a>
              <a href="#" className="btn btn--light btn--lg">
                <Icon name="chat" size={16}/> {t('cta_write_messenger')}
              </a>
            </div>
            <div className="micro-trust hero__trust">
              <span>{t('trust_free')}</span>
              <span>{t('trust_speed')}</span>
              <span>{t('trust_employers')}</span>
            </div>
          </div>

          <div className="hero__visual">
            <div className="hero__photo-main">
              <img src={window.PHOTOS.heroMain} alt={t('hero_alt')}/>
            </div>

            <div className="hero__float hero__float--tl">
              <div className="flag">🇵🇱</div>
              <div>
                <b>{t('hero_new_vacancy')}</b>
                <small>{t('hero_new_meta')}</small>
              </div>
            </div>

            <div className="hero__float hero__float--br">
              <div className="flag" style={{background:'linear-gradient(135deg, var(--grad-1), var(--grad-2))', color:'#0B0E1A'}}>
                <Icon name="check" size={16} stroke={3}/>
              </div>
              <div>
                <b>Andrew {t('hero_left')}</b>
                <small>{t('hero_left_meta')}</small>
              </div>
            </div>

            <div className="hero__stat-card">
              <div className="hero__stat-row">
                <div className="hero__stat-num">10K+</div>
                <div className="hero__stat-label" style={{whiteSpace:'pre-line'}}>{t('hero_stat_label')}</div>
              </div>
              <div className="hero__mini-avatars">
                <div className="avatar-stack">
                  <img src={window.PHOTOS.a1} alt=""/>
                  <img src={window.PHOTOS.a2} alt=""/>
                  <img src={window.PHOTOS.a3} alt=""/>
                  <img src={window.PHOTOS.a4} alt=""/>
                </div>
                <div style={{fontSize:13, color:'rgba(255,255,255,0.75)'}}>
                  <b style={{color:'#fff'}}>+342</b> {t('hero_this_month')}
                </div>
              </div>
            </div>
          </div>
        </div>

        <div className="hero__metrics">
          <div className="hero__metric">
            <div className="hero__metric-num">6<span style={{fontSize:28, opacity:0.7}}>+</span></div>
            <div className="hero__metric-label">{t('metric1')}</div>
          </div>
          <div className="hero__metric">
            <div className="hero__metric-num">10K<span style={{fontSize:28, opacity:0.7}}>+</span></div>
            <div className="hero__metric-label">{t('metric2')}</div>
          </div>
          <div className="hero__metric">
            <div className="hero__metric-num">20<span style={{fontSize:28, opacity:0.7}}>+</span></div>
            <div className="hero__metric-label">{t('metric3')}</div>
          </div>
          <div className="hero__metric">
            <div className="hero__metric-num">15<span style={{fontSize:28, opacity:0.7}}>хв</span></div>
            <div className="hero__metric-label">{t('metric4')}</div>
          </div>
        </div>
      </div>
    </section>
    </div>
  );
};

/* =========================================================
   LOGOS
   ========================================================= */
window.LogosStrip = function LogosStrip() {
  return (
    <div className="container">
      <div className="logos-strip">
        <p className="logos-strip__label">{t('logos_label')}</p>
        <div className="logos-strip__row">
          {['EUROLOGIC','WARTEX CZ','NORDFARM','ROTTAPACK','MEGAWERK','KLINDORF'].map(n => (
            <div key={n} className="logo-ph">{n}</div>
          ))}
        </div>
      </div>
    </div>
  );
};

/* =========================================================
   BENEFITS
   ========================================================= */
window.Benefits = function Benefits() {
  const items = [
    { num:'01', icon:'shield', title:t('ben1_t'), desc:t('ben1_d') },
    { num:'02', icon:'check',  title:t('ben2_t'), desc:t('ben2_d') },
    { num:'03', icon:'file',   title:t('ben3_t'), desc:t('ben3_d') },
    { num:'04', icon:'home',   title:t('ben4_t'), desc:t('ben4_d') },
    { num:'05', icon:'chat',   title:t('ben5_t'), desc:t('ben5_d') },
    { num:'06', icon:'zap',    title:t('ben6_t'), desc:t('ben6_d') },
  ];
  return (
    <section id="about">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow">{t('ben_eyebrow')}</span>
          <h2>{t('ben_h2_a')} <span className="serif grad-text">{t('ben_h2_em')}</span> {t('ben_h2_b')}</h2>
          <p className="section-head__sub">{t('ben_sub')}</p>
        </div>
        <div className="benefits__grid">
          {items.map((b, i) => (
            <div key={b.num} className={`benefit benefit--v${i+1}`}>
              <div className="benefit__num">— {b.num}</div>
              <div className="benefit__ic"><Icon name={b.icon} size={24}/></div>
              <h3>{b.title}</h3>
              <p>{b.desc}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

/* =========================================================
   URGENT JOBS
   ========================================================= */
window.UrgentJobs = function UrgentJobs() {
  const lang = window.getLang();
  const cn = window.COUNTRY_NAMES[lang] || window.COUNTRY_NAMES.UA;
  return (
    <section id="jobs" className="jobs-urgent">
      <div className="container">
        <div className="jobs__head">
          <div style={{maxWidth: 640}}>
            <span className="eyebrow">{t('jobs_eyebrow')}</span>
            <h2 style={{marginTop: 12}}>{t('jobs_h2_a')} <span className="serif grad-text">{t('jobs_h2_em')}</span></h2>
            <p className="section-head__sub" style={{marginTop: 12}}>{t('jobs_sub')}</p>
          </div>
          <a href="#" className="btn btn--dark">
            {t('jobs_all')} <Icon name="arrowRight" size={16} className="arrow-icon"/>
          </a>
        </div>

        <div className="jobs__grid">
          {window.JOBS.map((j, i) => {
            const code = {'Польща':'PL','Чехія':'CZ','Німеччина':'DE','Нідерланди':'NL','Бельгія':'BE','Іспанія':'ES'}[j.country] || 'PL';
            const cName = cn[code] || j.country;
            return (
              <article key={i} className="job">
                <div className="job__photo">
                  <img src={window.PHOTOS[j.photoKey]} alt={j.title} loading="lazy"/>
                  <div className="job__photo-badges">
                    {j.badges.slice(0,2).map(([t2,l]) => (
                      <span key={l} className={`badge badge--${t2}`} style={{background:'rgba(255,255,255,0.95)', backdropFilter:'blur(8px)'}}>{l}</span>
                    ))}
                  </div>
                  <div className="job__photo-flag">{j.flag}</div>
                </div>
                <div>
                  <div className="job__title">{j.title}</div>
                  <div className="job__loc">
                    <Icon name="pin" size={12}/> {cName} · {j.city}
                  </div>
                </div>
                <div className="job__rate">
                  <span className="job__rate-num">{j.rate}</span>
                  <span className="job__rate-unit">{j.unit}</span>
                </div>
                <div className="job__meta">
                  <div className="job__meta-row"><span>{t('job_schedule')}</span><span>{j.schedule.split(' · ')[0]}</span></div>
                  <div className="job__meta-row"><span>{t('job_days')}</span><span>{j.schedule.split(' · ')[1] || '5'}</span></div>
                  <div className="job__meta-row"><span>{t('job_housing')}</span><span>{j.housing.includes('Житло') || j.housing.includes('Жильё') ? t('job_yes') : t('job_help')}</span></div>
                  <div className="job__meta-row"><span>{t('job_docs')}</span><span>{j.docs.split(' ')[0]}</span></div>
                </div>
                <div className="job__cta">
                  <a href="#" className="btn btn--outline btn--sm">{t('job_more')}</a>
                  <a href="#apply" className="btn btn--grad btn--sm">{t('job_apply')}</a>
                </div>
              </article>
            );
          })}
        </div>
      </div>
    </section>
  );
};