/* Contact + Footer */

function getPublicContact() {
  return window.__PUBLIC_DATA__?.contact || {};
}

function externalTarget(url) {
  return /^https?:\/\//.test(url || '') ? { target: '_blank', rel: 'noopener noreferrer' } : {};
}

function Contact({ setRoute }) {
  const [tags, setTags] = React.useState(['SEO-аудит']);
  const allTags = ['SEO-аудит', 'Микроразметка', 'PHP/MySQL', 'VPS/Docker', 'API-интеграция', 'Готовый сайт', 'Другое'];
  const toggle = (t) => setTags((cur) => cur.includes(t) ? cur.filter(x => x !== t) : [...cur, t]);
  const contact = getPublicContact();
  const channels = [
    contact.email && { ico: '@', name: contact.email, sub: 'почта · приоритет для аудитов', href: contact.email_href },
    contact.telegram_url && { ico: 'T', name: contact.telegram_label || 'Telegram', sub: 'Telegram · быстрые задачи', href: contact.telegram_url },
    contact.phone && { ico: '+', name: contact.phone, sub: 'телефон · если удобнее голосом', href: contact.phone_href },
    contact.primary_platform_url && { ico: '$', name: 'Безопасная сделка', sub: 'через фриланс-площадку', href: '#', route: 'platforms' },
  ].filter(Boolean);

  const [submitted, setSubmitted] = React.useState(false);
  const [submitError, setSubmitError] = React.useState('');
  const onSubmit = async (e) => {
    e.preventDefault();
    const form = e.currentTarget;
    const consent = form.querySelector('input[name="pd_consent"]');
    if (!consent?.checked) {
      setSubmitted(false);
      setSubmitError('Нужно подтвердить согласие на обработку персональных данных.');
      return;
    }

    setSubmitError('');
    const payload = new FormData(form);
    payload.set('task_type', tags.join(', ').slice(0, 80) || 'Другое');
    payload.set('pd_consent', 'yes');
    payload.set('website', '');

    try {
      const res = await fetch(window.__CONTACT_ENDPOINT__ || '/contact/', {
        method: 'POST',
        body: payload,
        credentials: 'same-origin',
      });
      if (!res.ok) throw new Error('submit failed');
      setSubmitted(true);
      form.reset();
      setTimeout(() => setSubmitted(false), 4000);
    } catch (err) {
      setSubmitted(false);
      window.location.href = '/contact/';
    }
  };

  return (
    <section id="contact" className="contact">
      <div className="container contact-grid">
        <div className="contact-aside">
          <Reveal as="div" className="section-label">// форма заявки</Reveal>
          <Reveal as="h2" className="section-title" delay={60} style={{ marginBottom: 16 }}>
            Опишите задачу — <em>предложу формат</em>
          </Reveal>
          <Reveal as="p" className="section-lead" delay={120} style={{ marginBottom: 0 }}>
            Если задача нестандартная, пришлите ссылку, описание проблемы и ожидания. Отвечаю обычно в течение пары часов.
          </Reveal>

          <div className="channels">
            {channels.map((c, i) => (
              <a key={i} href={c.route ? routeHref(c.route) : c.href} className="channel" onClick={c.route ? routeClick(setRoute, c.route) : undefined} {...(!c.route ? externalTarget(c.href) : {})}>
                <span className="ico">{c.ico}</span>
                <div>
                  <div className="name">{c.name}</div>
                  <div className="sub">{c.sub}</div>
                </div>
                <span className="arrow">→</span>
              </a>
            ))}
          </div>
        </div>

        <Reveal as="form" className="form" delay={160} onSubmit={onSubmit}>
          <div className="form-head">
            <span className="prompt">$</span>
            <span>winetlab new-task</span>
            <span style={{ marginLeft: 'auto', color: 'var(--term-green)' }}>● ready</span>
          </div>

          <div className="form-row two">
            <div>
              <label>name</label>
              <input name="name" type="text" placeholder="Как к вам обращаться" />
            </div>
            <div>
              <label>contact</label>
              <input name="contact" type="text" placeholder="Email, Telegram, Max или телефон" />
            </div>
          </div>

          <div className="form-row">
            <label>task type · можно несколько</label>
            <div className="tag-row">
              {allTags.map(t => (
                <button
                  type="button"
                  key={t}
                  className={`tag-pill ${tags.includes(t) ? 'on' : ''}`}
                  onClick={() => toggle(t)}
                >
                  {t}
                </button>
              ))}
            </div>
          </div>

          <div className="form-row two">
            <div>
              <label>url (если есть)</label>
              <input name="source_url" type="text" placeholder="https://your-site.ru" />
            </div>
            <div>
              <label>budget</label>
              <select name="budget" defaultValue="">
                <option value="">не определился</option>
                <option>до 5 000 ₽</option>
                <option>5 000 — 20 000 ₽</option>
                <option>20 000 — 50 000 ₽</option>
                <option>больше — обсудим</option>
              </select>
            </div>
          </div>

          <div className="form-row">
            <label>message</label>
            <textarea name="message" placeholder="Опишите задачу: что нужно сделать или починить, какие симптомы, доступы (при необходимости)." />
          </div>

          <label className="form-consent">
            <input name="pd_consent" type="checkbox" defaultChecked />
            <span>
              Согласен на обработку персональных данных и принимаю{' '}
              <a href="/privacy/" target="_blank" rel="noopener noreferrer">политику обработки</a>
              {' '}и{' '}
              <a href="/personal-data-consent/" target="_blank" rel="noopener noreferrer">согласие</a>.
            </span>
          </label>
          {submitError && <div className="form-error">{submitError}</div>}
          <input type="hidden" name="task_type" value={tags.join(', ').slice(0, 80) || 'Другое'} />
          <input type="hidden" name="website" value="" />

          <button type="submit" className="btn btn-primary form-submit">
            {submitted ? '✓ отправлено · отвечу скоро' : <>Отправить заявку <span className="btn-arrow">→</span></>}
          </button>
        </Reveal>
      </div>
    </section>
  );
}

function FooterCta({ setRoute }) {
  return (
    <div className="footer-cta">
      <div className="footer-cta-text">
        <Reveal as="h3">
          Технические задачи для сайтов, серверов, <em style={{ fontStyle: 'italic', color: 'var(--wine)' }}>SEO и автоматизации</em>
        </Reveal>
        <Reveal as="p" delay={80}>
          Если задача нестандартная, можно просто коротко описать проблему. Я помогу понять, с чего лучше начать и какой формат работы подойдёт.
        </Reveal>
      </div>
      <div className="footer-cta-actions">
        <Magnetic>
          <a href="/contact/" onClick={routeClick(setRoute, 'contact')} className="btn btn-primary">
            Оставить заявку <span className="btn-arrow">→</span>
          </a>
        </Magnetic>
        <a href="/platforms/" onClick={routeClick(setRoute, 'platforms')} className="btn btn-ghost">Где заказать</a>
      </div>
    </div>
  );
}

function Footer({ setRoute }) {
  const go = (id) => routeClick(setRoute, id);
  const contact = getPublicContact();
  const brand = getBrandData();
  const siteLabel = brand.domain;
  const siteName = brand.name;
  const specialistName = contact.specialist_name || '';
  const legalMeta = contact.legal_status || contact.legal_name
    ? `${contact.legal_status || 'Исполнитель'}${contact.legal_name ? ` · ${contact.legal_name}` : ''}`
    : 'работаю напрямую и через фриланс-площадки';
  const contactLinks = [
    contact.email && { label: contact.email, href: contact.email_href },
    contact.telegram_url && { label: `Telegram · ${contact.telegram_label || 'написать'}`, href: contact.telegram_url },
    contact.phone && { label: contact.phone, href: contact.phone_href },
    contact.site_url && { label: siteLabel, href: contact.site_url },
  ].filter(Boolean);
  return (
    <footer className="footer">
      <div className="container">
        <FooterCta setRoute={setRoute} />

        <div className="footer-grid">
          <div className="footer-col">
            <FooterBrand style={{ marginBottom: 14 }} />
            <p>
              Технические задачи для сайтов, серверов, SEO и автоматизации.
              Работаю как независимый технический исполнитель — напрямую и через фриланс-площадки.
            </p>
          </div>
          <div className="footer-col">
            <h5>Навигация</h5>
            <ul>
              <li><a href="/about/" onClick={go('about')}>О специалисте</a></li>
              <li><a href="/services/" onClick={go('services')}>Услуги</a></li>
              <li><a href="/cases/" onClick={go('cases')}>Кейсы</a></li>
              <li><a href="/articles/" onClick={go('articles')}>Статьи</a></li>
              <li><a href="/prices/" onClick={go('prices')}>Цены</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <h5>Заказ</h5>
            <ul>
              <li><a href="/platforms/" onClick={go('platforms')}>Где заказать</a></li>
              <li><a href="/contact/" onClick={go('contact')}>Контакты</a></li>
              <li><a href="/privacy/">Персональные данные</a></li>
              <li><a href="/personal-data-consent/">Согласие на обработку</a></li>
              <li><a href="/cookies/">Cookie Policy</a></li>
              <li><a href="/legal/">Правовая информация</a></li>
              <li><a href="/sitemap/">Карта сайта</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <h5>Связь</h5>
            <ul>
              {contactLinks.map((link) => (
                <li key={link.href}><a href={link.href} {...externalTarget(link.href)}>{link.label}</a></li>
              ))}
            </ul>
          </div>
        </div>

        <div className="footer-bottom">
          <div>© 2026 {specialistName ? `${specialistName} / ${siteName}` : siteName} · {legalMeta}</div>
          <div className="ascii">{`// ~/winetlab $ goodnight`}</div>
        </div>
      </div>
    </footer>
  );
}

function CookieConsent() {
  const consentKey = 'winetlab_cookie_consent_v2';
  const [visible, setVisible] = React.useState(false);

  const loadAnalytics = React.useCallback(() => {
    const id = String(window.__YANDEX_METRIKA_ID__ || '').trim();
    if (!id || window.__WINETLAB_METRIKA_LOADED__) return;
    window.__WINETLAB_METRIKA_LOADED__ = true;

    (function(m,e,t,r,i,k,a){
      m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)};
      m[i].l=1*new Date();
      for (let j = 0; j < document.scripts.length; j += 1) {
        if (document.scripts[j].src === r) return;
      }
      k=e.createElement(t); a=e.getElementsByTagName(t)[0]; k.async=1; k.src=r; a.parentNode.insertBefore(k,a);
    })(window, document, 'script', 'https://mc.yandex.ru/metrika/tag.js', 'ym');
    window.ym(Number(id), 'init', { clickmap:true, trackLinks:true, accurateTrackBounce:true, webvisor:false });
  }, []);

  React.useEffect(() => {
    try {
      const stored = window.localStorage.getItem(consentKey);
      if (!stored) {
        setVisible(true);
        return;
      }
      const parsed = JSON.parse(stored);
      if (parsed?.level === 'all') loadAnalytics();
    } catch (err) {
      setVisible(true);
    }
  }, [loadAnalytics]);

  const save = (level) => {
    const payload = { level, accepted_at: new Date().toISOString(), version: 2 };
    window.localStorage.setItem(consentKey, JSON.stringify(payload));
    window.dispatchEvent(new CustomEvent('winetlab:cookie-consent', { detail: payload }));
    if (level === 'all') loadAnalytics();
    setVisible(false);
  };

  if (!visible) return null;

  return (
    <div className="cookie-consent" role="dialog" aria-live="polite" aria-label="Настройки cookie">
      <div className="cookie-consent-inner">
        <div className="cookie-consent-copy">
          <span className="cookie-kicker">privacy.confirm</span>
          <h2>Cookie и технические данные</h2>
          <p>
            Сайт использует необходимые cookie/localStorage для работы интерфейса. Аналитика подключается
            только после согласия. Подробности — в <a href="/cookies/">Cookie Policy</a> и <a href="/privacy/">политике обработки данных</a>.
          </p>
        </div>
        <div className="cookie-consent-actions">
          <button type="button" className="btn btn-ghost" onClick={() => save('necessary')}>Только необходимые</button>
          <button type="button" className="btn btn-primary" onClick={() => save('all')}>Принять все <span className="btn-arrow">→</span></button>
        </div>
      </div>
    </div>
  );
}

window.Contact = Contact;
window.Footer = Footer;
window.CookieConsent = CookieConsent;