/* global React, ReactDOM, Header, Footer, Reveal, Icon, YT, WA, useChrome, ChromeTweaks, PageHero, TweaksPanel */
// contact.jsx — Контакты

function ContactForm() {
  return (
    <Reveal className="card contact-card">
      <span className="eyebrow">Написать мне</span>
      <h2 style={{ marginTop: 12 }}>Напишите мне в WhatsApp</h2>
      <p>Самый быстрый способ связаться. Нажмите кнопку — откроется чат с уже готовым сообщением, останется только отправить.</p>
      <div className="wa-preview">«Привет, посмотрел сайт о вас. Давайте созвонимся»</div>
      <a className="btn btn-gold" href={WA} target="_blank" rel="noopener" style={{ marginTop: 22, alignSelf: "flex-start" }}>
        {Icon.whatsapp({ style: { width: 18, height: 18 } })} Написать в WhatsApp
      </a>
    </Reveal>
  );
}

function ContactSide() {
  return (
    <div className="contact-side">
      <Reveal className="card contact-card" delay={80}>
        <span className="eyebrow">YouTube</span>
        <h2 style={{ marginTop: 12 }}>Подпишитесь на канал</h2>
        <p>Новые разборы об управлении бизнесом — спокойно и по делу, без продаж.</p>
        <a className="btn btn-gold" href={YT} target="_blank" rel="noopener" style={{ marginTop: 22 }}>
          {Icon.yt({ style: { width: 18, height: 18 } })} Смотреть на YouTube
        </a>
      </Reveal>
      <Reveal className="contact-line" delay={120}>
        <span className="ic">{Icon.whatsapp({})}</span>
        <div><div className="cl-k">WhatsApp</div><div className="cl-v">+972 55-923-5215</div></div>
      </Reveal>
      <Reveal className="contact-line" delay={160}>
        <span className="ic">{Icon.user({})}</span>
        <div><div className="cl-k">Кто отвечает</div><div className="cl-v">Олег Гурари, лично</div></div>
      </Reveal>
      <Reveal className="contact-line" delay={200}>
        <span className="ic">{Icon.compass({})}</span>
        <div><div className="cl-k">Где я</div><div className="cl-v">Израиль · GURARI Marketing</div></div>
      </Reveal>
    </div>
  );
}

function App() {
  const [t, setTweak] = useChrome();
  return (
    <React.Fragment>
      <Header />
      <main>
        <PageHero
          eyebrow="Контакты"
          title="Давайте на связи"
          lead="Два простых способа: подпишитесь на YouTube или напишите мне напрямую. Без воронок и автоответчиков." />
        <section className="page-section" style={{ paddingTop: 16 }}>
          <div className="container contact-grid">
            <ContactForm />
            <ContactSide />
          </div>
        </section>
      </main>
      <Footer />
      <TweaksPanel><ChromeTweaks t={t} setTweak={setTweak} /></TweaksPanel>
    </React.Fragment>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);