// FAQ, Contact, Footer

const FAQ = ({ lang }) => {
  const d = window.SITE_DATA.faq[lang];
  const [open, setOpen] = useState(0);
  return (
    <section className="section section--alt" id="faq">
      <div className="container">
        <div className="section-head reveal">
          <div className="kicker">{d.kicker}</div>
          <h2>{d.title}</h2>
        </div>
        <div className="faq-list reveal" style={{ maxWidth: 960 }}>
          {d.items.map((it, i) => (
            <div key={i} className={`faq-item ${open === i ? 'open' : ''}`}>
              <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
                <span>{it.q}</span>
                <span className="faq-icon"><Icon name="plus" size={14}/></span>
              </button>
              <div className="faq-a">
                <div className="faq-a-inner">{it.a}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

const Contact = ({ lang }) => {
  const d = window.SITE_DATA.contact[lang];
  const f = d.form;
  const [form, setForm] = useState({ name: '', phone: '', rooms: '', comment: '' });
  const [errors, setErrors] = useState({});
  const [sent, setSent] = useState(false);

  const upd = (k, v) => setForm({ ...form, [k]: v });

  const submit = (e) => {
    e.preventDefault();
    const err = {};
    if (form.name.trim().length < 2) err.name = lang === 'ru' ? 'Введите имя' : 'Атыңызды енгізіңіз';
    const digits = form.phone.replace(/\D/g, '');
    if (digits.length < 10) err.phone = lang === 'ru' ? 'Введите номер телефона' : 'Телефонды енгізіңіз';
    setErrors(err);
    if (Object.keys(err).length === 0) {
      setSent(true);
      setForm({ name: '', phone: '', rooms: '', comment: '' });
    }
  };

  return (
    <section className="section" id="contact">
      <div className="container">
        <div className="section-head reveal">
          <div className="kicker">{d.kicker}</div>
          <h2>{d.title}</h2>
        </div>
        <div className="contact-grid reveal">
          <div>
            <div className="offices">
              {d.offices.map((o, i) => (
                <div key={i} className="office">
                  <div className="office-addr">
                    <Icon name="pin" size={18}/>
                    <span>{o.addr}</span>
                  </div>
                  <div className="office-phones">
                    {o.phones.map((p, j) => (
                      <a key={j} href={`tel:${p.replace(/\D/g, '')}`} className="office-phone">{p}</a>
                    ))}
                  </div>
                  <div className="office-hours">
                    <Icon name="calendar" size={14}/> &nbsp;{o.hours}
                  </div>
                  {o.instagram && (
                    <div className="office-socials">
                      <a href={`https://instagram.com/${o.instagram}`} target="_blank" rel="noopener">
                        <span className="ig-icon">
                          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                            <rect x="3" y="3" width="18" height="18" rx="5"/>
                            <circle cx="12" cy="12" r="4"/>
                            <circle cx="17.5" cy="6.5" r="1" fill="currentColor"/>
                          </svg>
                        </span>
                        @{o.instagram}
                      </a>
                      <a href={`https://wa.me/${(o.phones[0] || '').replace(/\D/g, '').replace(/^8/, '7')}`} target="_blank" rel="noopener">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="#25D366"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51l-.57-.01c-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.626.712.226 1.36.194 1.872.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/></svg>
                        WhatsApp
                      </a>
                    </div>
                  )}
                </div>
              ))}
            </div>
          </div>
          <form className="form-card" onSubmit={submit} noValidate>
            <h3>{f.title}</h3>
            <p className="form-sub">{f.sub}</p>
            {sent && <div className="form-success">✓ {f.success}</div>}
            <div className="form-field">
              <input
                className={`form-input ${errors.name ? 'error' : ''}`}
                placeholder={f.name}
                value={form.name}
                onChange={(e) => upd('name', e.target.value)}
              />
              {errors.name && <div className="form-error">{errors.name}</div>}
            </div>
            <div className="form-field">
              <input
                className={`form-input ${errors.phone ? 'error' : ''}`}
                placeholder="+7 (___) ___-__-__"
                value={form.phone}
                onChange={(e) => upd('phone', e.target.value)}
              />
              {errors.phone && <div className="form-error">{errors.phone}</div>}
            </div>
            <div className="form-field">
              <select className="form-select" value={form.rooms} onChange={(e) => upd('rooms', e.target.value)}>
                <option value="">{f.rooms}</option>
                <option>{lang === 'ru' ? '1-комнатная' : '1-бөлмелі'}</option>
                <option>{lang === 'ru' ? '2-комнатная' : '2-бөлмелі'}</option>
                <option>{lang === 'ru' ? '3-комнатная' : '3-бөлмелі'}</option>
                <option>{lang === 'ru' ? '4-комнатная' : '4-бөлмелі'}</option>
                <option>{lang === 'ru' ? 'Экскурсия по объекту' : 'Нысанға экскурсия'}</option>
              </select>
            </div>
            <div className="form-field">
              <textarea
                className="form-textarea"
                placeholder={f.comment}
                value={form.comment}
                onChange={(e) => upd('comment', e.target.value)}
                rows="3"
              />
            </div>
            <button type="submit" className="btn btn--accent btn--lg" style={{ width: '100%', justifyContent: 'center' }}>
              {f.submit} <Icon name="arrow" size={16}/>
            </button>
            <p className="form-agree">{f.agree}</p>
          </form>
        </div>
      </div>
    </section>
  );
};

const Footer = ({ lang }) => {
  const d = window.SITE_DATA.footer[lang];
  const nav = window.SITE_DATA.nav[lang];
  const onLink = (e, id) => {
    e.preventDefault();
    document.getElementById(id)?.scrollIntoView({ behavior: 'smooth' });
  };
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-top">
          <div>
            <img src="assets/qasiet-gold.svg" alt="QASIET CITY" style={{ height: 44, width: 'auto', display: 'block' }}/>
            <p className="footer-tagline" style={{ marginTop: 16 }}>{d.tagline}</p>
            <p className="footer-tagline" style={{ marginTop: 12 }}>{d.builder}</p>
          </div>
          <div>
            <h4>{lang === 'ru' ? 'Навигация' : 'Навигация'}</h4>
            <ul>
              {nav.slice(0, 6).map(n => (
                <li key={n.id}><a href={`#${n.id}`} onClick={(e) => onLink(e, n.id)}>{n.label}</a></li>
              ))}
            </ul>
          </div>
          <div>
            <h4>{lang === 'ru' ? 'Информация' : 'Ақпарат'}</h4>
            <ul>
              {nav.slice(6).map(n => (
                <li key={n.id}><a href={`#${n.id}`} onClick={(e) => onLink(e, n.id)}>{n.label}</a></li>
              ))}
            </ul>
          </div>
          <div>
            <h4>{lang === 'ru' ? 'Контакты' : 'Байланыс'}</h4>
            <ul>
              <li><a href="tel:87011049088">8 (701) 104-90-88</a></li>
              <li><a href="tel:87011048088">8 (701) 104-80-88</a></li>
              <li><a href="https://wa.me/77011049088" target="_blank" rel="noopener">WhatsApp</a></li>
              <li><a href="https://instagram.com/qasiet.city" target="_blank" rel="noopener">Instagram</a></li>
              <li style={{ color: 'rgba(255,255,255,0.5)', fontSize: 13, marginTop: 8 }}>
                {lang === 'ru' ? 'г. Астана, ул. Нажимеденова, 44А, НП3' : 'Астана қ., Нәжімеденов к-сі, 44А, НП3'}
              </li>
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          <span>© 2026 ТОО «Туран Курылыс». {d.legal}</span>
          <span>QASIET CITY · Astana</span>
        </div>
      </div>
    </footer>
  );
};

const WhatsAppFab = ({ lang }) => {
  const [open, setOpen] = useState(true);
  const wa = window.SITE_DATA.whatsapp;
  if (!wa) return null;
  const url = `https://wa.me/${wa.phone}?text=${encodeURIComponent(wa.text[lang] || wa.text.ru)}`;
  return (
    <div className="wa-fab">
      {open && (
        <div className="wa-fab-bubble">
          {wa.bubble[lang] || wa.bubble.ru}
          <span className="wa-close" onClick={(e) => { e.stopPropagation(); setOpen(false); }} aria-label="close">×</span>
        </div>
      )}
      <a className="wa-fab-btn" href={url} target="_blank" rel="noopener" aria-label="WhatsApp">
        <svg viewBox="0 0 24 24"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51l-.57-.01c-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.626.712.226 1.36.194 1.872.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/></svg>
      </a>
    </div>
  );
};

Object.assign(window, { FAQ, Contact, Footer, WhatsAppFab });
