const { useState: useState3 } = React;

/* =========================================================
   COMMUNITY — Telegram / Viber
   ========================================================= */
window.Community = function Community() {
  const groups = [
    { network:'Telegram', name:t('com_g1_n'), desc:t('com_g1_d'), link:'https://t.me/folioltd', color:'#229ED9', icon:'chat' },
    { network:'Viber',    name:t('com_g3_n'), desc:t('com_g3_d'), link:'https://invite.viber.com/?g2=folioltd', color:'#7360F2', icon:'phone' },
  ];
  return (
    <section id="community" style={{background:'var(--bg-soft)'}}>
      <div className="container">
        <div className="section-head">
          <span className="eyebrow">{t('com_eyebrow')}</span>
          <h2>{t('com_h2_a')} <em>{t('com_h2_em')}</em></h2>
          <p className="section-head__sub">{t('com_sub')}</p>
        </div>
        <div className="community__grid">
          {groups.map((g,i) => (
            <a key={i} href={g.link} target="_blank" rel="noopener" className="community-card">
              <div className="community-card__top">
                <div className="community-card__ic" style={{background:g.color}}>
                  <Icon name={g.icon} size={20}/>
                </div>
                <div className="community-card__net">
                  <span style={{color:g.color, fontWeight:700, fontSize:12, letterSpacing:'0.06em'}}>{g.network.toUpperCase()}</span>
                </div>
              </div>
              <h3 className="community-card__name">{g.name}</h3>
              <p className="community-card__desc">{g.desc}</p>
              <div className="community-card__cta">
                {t('com_join')} <Icon name="arrowRight" size={14} className="arrow-icon"/>
              </div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
};

/* =========================================================
   TESTIMONIALS
   ========================================================= */
window.Testimonials = function Testimonials() {
  return (
    <section id="testimonials">
      <div className="container">
        <div className="jobs__head">
          <div style={{maxWidth:640}}>
            <span className="eyebrow">{t('test_eyebrow')}</span>
            <h2 style={{marginTop:12}}>{t('test_h2_a')} <span className="serif grad-text">{t('test_h2_em')}</span>{t('test_h2_b')}</h2>
          </div>
          <a href="#" className="btn btn--outline">{t('test_all')} <Icon name="arrowRight" size={16} className="arrow-icon"/></a>
        </div>
        <div className="testi__grid">
          {window.TESTIMONIALS.slice(0, 6).map((tt, i) => (
            <div key={i} className="testi">
              <div style={{display:'flex', gap:2}}>
                {[...Array(tt.stars)].map((_,k)=>(
                  <span key={k} className="testi__star"><Icon name="star" size={14} fill="#F5A623" stroke={0}/></span>
                ))}
              </div>
              <div className="testi__quote">«{tt.quote}»</div>
              <div className="testi__author">
                <div className="testi__avatar"><img src={window.PHOTOS[tt.avatarKey]} alt={tt.name}/></div>
                <div>
                  <div className="testi__name">{tt.name}, {tt.age}</div>
                  <div className="testi__meta">{tt.city}</div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

/* =========================================================
   FAQ
   ========================================================= */
window.FaqSection = function FaqSection() {
  const items = [
    {q:t('faq_q1'), a:t('faq_a1')},
    {q:t('faq_q2'), a:t('faq_a2')},
    {q:t('faq_q3'), a:t('faq_a3')},
    {q:t('faq_q4'), a:t('faq_a4')},
    {q:t('faq_q5'), a:t('faq_a5')},
    {q:t('faq_q6'), a:t('faq_a6')},
  ];
  return (
    <section id="faq" style={{background:'var(--bg-soft)'}}>
      <div className="container">
        <div className="faq__grid">
          <div>
            <span className="eyebrow">{t('faq_eyebrow')}</span>
            <h2 style={{marginTop:12, marginBottom:32}}>{t('faq_h2_a')} <span className="serif grad-text">{t('faq_h2_em')}</span></h2>
            <div className="faq__list">
              {items.map((f,i) => (
                <details key={i} className="faq__item" open={i===0}>
                  <summary>
                    {f.q}
                    <span className="icn"><Icon name="plus" size={14} stroke={2.5}/></span>
                  </summary>
                  <div className="faq__answer">{f.a}</div>
                </details>
              ))}
            </div>
          </div>
          <aside className="faq__side">
            <div style={{width:52, height:52, borderRadius:16, background:'linear-gradient(135deg, var(--grad-2), var(--grad-3))', display:'grid', placeItems:'center'}}>
              <Icon name="chat" size={22}/>
            </div>
            <h3>{t('faq_no_answer')}</h3>
            <p>{t('faq_msg')}</p>
            <div style={{display:'flex', flexDirection:'column', gap:8, marginTop:8}}>
              <a href="#" className="btn btn--grad" style={{justifyContent:'center'}}>
                <Icon name="chat" size={16}/> {t('faq_tg')}
              </a>
              <a href="tel:+380000000000" className="btn btn--light" style={{justifyContent:'center'}}>
                <Icon name="phone" size={16}/> {t('faq_call')}
              </a>
            </div>
            <div style={{fontSize:13, color:'rgba(255,255,255,0.6)', paddingTop:16, borderTop:'1px solid rgba(255,255,255,0.1)', marginTop:8}}>
              {t('faq_hours')}
            </div>
          </aside>
        </div>
      </div>
    </section>
  );
};

/* =========================================================
   FINAL CTA
   ========================================================= */
window.FinalCTA = function FinalCTA() {
  const [submitted, setSubmitted] = useState3(false);
  const lang = window.getLang();
  const cn = window.COUNTRY_NAMES[lang] || window.COUNTRY_NAMES.UA;
  return (
    <section id="apply" style={{padding:'96px 0 0'}}>
      <div className="cta-final">
        <div>
          <span className="eyebrow" style={{color:'var(--grad-1)'}}>{t('cta_eyebrow')}</span>
          <h2 style={{marginTop:12}}>{t('cta_h2_a')}<br/>{t('cta_h2_b')} <em>{t('cta_h2_em')}</em></h2>
          <p className="cta-final__sub">{t('cta_sub')}</p>
          <div className="micro-trust" style={{marginTop:28}}>
            <span style={{color:'rgba(255,255,255,0.8)'}}>{t('cta_t1')}</span>
            <span style={{color:'rgba(255,255,255,0.8)'}}>{t('cta_t2')}</span>
            <span style={{color:'rgba(255,255,255,0.8)'}}>{t('cta_t3')}</span>
          </div>
          <div style={{display:'flex', alignItems:'center', gap:12, marginTop:32}}>
            <div className="avatar-stack">
              <img src={window.PHOTOS.a1} alt=""/>
              <img src={window.PHOTOS.a2} alt=""/>
              <img src={window.PHOTOS.a3} alt=""/>
            </div>
            <div style={{fontSize:13, color:'rgba(255,255,255,0.7)'}}>
              <b style={{color:'#fff'}}>342 {t('cta_apps')}</b> {t('cta_apps_meta')}
            </div>
          </div>
        </div>
        <form className="cta-final__form" onSubmit={e=>{e.preventDefault(); setSubmitted(true);}}>
          {submitted ? (
            <div style={{textAlign:'center', padding:'20px 0'}}>
              <div style={{width:60, height:60, margin:'0 auto 16px', borderRadius:999, background:'linear-gradient(135deg, var(--grad-1), var(--grad-2))', color:'#0B0E1A', display:'grid', placeItems:'center'}}>
                <Icon name="check" size={28} stroke={2.5}/>
              </div>
              <h3 style={{marginBottom:8}}>{t('cta_thanks')}</h3>
              <p style={{color:'var(--ink-3)', fontSize:14}}>{t('cta_thanks_msg')}</p>
            </div>
          ) : (
            <>
              <div className="field">
                <label className="field__label">{t('f_name')}</label>
                <input type="text" placeholder={t('f_name_ph')} required/>
              </div>
              <div className="field">
                <label className="field__label">{t('f_phone')}</label>
                <input type="tel" placeholder={t('f_phone_ph')} required/>
              </div>
              <div className="field">
                <label className="field__label">{t('f_country')}</label>
                <select defaultValue="">
                  <option value="">{t('f_country_ph')}</option>
                  {window.COUNTRIES.map(c => <option key={c.code} value={c.code}>{c.flag} {cn[c.code] || c.name}</option>)}
                </select>
              </div>
              <button type="submit" className="btn btn--grad" style={{justifyContent:'center', width:'100%', marginTop:4}}>
                {t('f_submit')} <Icon name="arrowRight" size={16} className="arrow-icon"/>
              </button>
              <p className="cta-final__note">{t('f_note')}</p>
            </>
          )}
        </form>
      </div>
    </section>
  );
};

/* =========================================================
   FOOTER
   ========================================================= */
window.Footer = function Footer() {
  const lang = window.getLang();
  const cn = window.COUNTRY_NAMES[lang] || window.COUNTRY_NAMES.UA;
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer__grid">
          <div className="footer__col">
            <div className="logo">
              <span className="logo__mark">F</span>
              <span style={{color:'#fff'}}>Folio<span style={{background:'linear-gradient(100deg, var(--grad-2), var(--grad-4))', WebkitBackgroundClip:'text', WebkitTextFillColor:'transparent'}}>.</span></span>
            </div>
            <p className="footer__desc">{t('f_desc')}</p>
            <div className="footer__social">
              <a className="msg-btn" style={{background:'rgba(255,255,255,0.08)', color:'#fff'}} href="#"><Icon name="chat" size={16}/></a>
              <a className="msg-btn" style={{background:'rgba(255,255,255,0.08)', color:'#fff'}} href="#"><Icon name="phone" size={16}/></a>
              <a className="msg-btn" style={{background:'rgba(255,255,255,0.08)', color:'#fff'}} href="#"><Icon name="mail" size={16}/></a>
            </div>
          </div>
          <div className="footer__col">
            <h4>{t('f_nav')}</h4>
            <a href="#jobs">{t('nav_jobs')}</a>
            <a href="#countries">{t('nav_countries')}</a>
            <a href="#services">{t('nav_services')}</a>
            <a href="#about">{t('f_about')}</a>
            <a href="#testimonials">{t('nav_reviews')}</a>
            <a href="#faq">{t('nav_faq')}</a>
          </div>
          <div className="footer__col">
            <h4>{t('f_co')}</h4>
            {window.COUNTRIES.slice(0,6).map(c => (
              <a key={c.code} href="#">{c.flag} {cn[c.code] || c.name}</a>
            ))}
          </div>
          <div className="footer__col" id="contacts">
            <h4>{t('f_contacts')}</h4>
            <div className="footer__contact">
              <b>+380 00 000 00 00</b>
              hello@folio-ltd.com<br/>
              {t('f_address')}<br/>
              {t('f_open')}
            </div>
          </div>
        </div>
        <div className="footer__bottom">
          <span>© 2026 Folio LTD. {t('f_rights')}</span>
          <span>
            <a href="privacy.html" style={{marginRight:16, color:'inherit'}}>{t('f_priv')}</a>
            <a href="terms.html" style={{color:'inherit'}}>{t('f_terms')}</a>
          </span>
        </div>
      </div>
    </footer>
  );
};