// sections.jsx — header, hero, footer + scroll helpers
const scrollToForm = (event) => {
  const el = document.getElementById("anketa-card") || document.getElementById("anketa");
  const header = document.querySelector(".header");
  const offset = (header?.offsetHeight || 0) + 16;
  if (el) {
    event?.preventDefault();
    window.scrollTo({
      top: el.getBoundingClientRect().top + window.scrollY - offset,
      behavior: "smooth",
    });
    window.history.replaceState(null, "", "#anketa-card");
  }
};
const scrollTo = (id) => {
  const el = document.getElementById(id);
  if (el) window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 80, behavior: "smooth" });
};

function Header() {
  return (
    <header className="header">
      <div className="wrap header-inner">
        <a href="#top" onClick={(e)=>{e.preventDefault();window.scrollTo({top:0,behavior:"smooth"});}}>
          <VovoMark height={28} color="var(--orange)" />
        </a>
        <nav className="nav">
          <a href="#how" onClick={(e)=>{e.preventDefault();scrollTo("how");}}>Как это работает</a>
          <a href="#orders" onClick={(e)=>{e.preventDefault();scrollTo("orders");}}>Какие заявки</a>
          <a href="#faq" onClick={(e)=>{e.preventDefault();scrollTo("faq");}}>Вопросы</a>
        </nav>
        <div className="h-right">
          <a href="#anketa-card" className="btn btn-primary" style={{height:46,padding:"0 22px",fontSize:16}}>Заполнить анкету</a>
        </div>
      </div>
    </header>
  );
}

function Hero() {
  return (
    <section className="hero2" id="top">
      <div className="hero2-bg" aria-hidden="true"></div>
      <div className="wrap hero2-inner">
        <div className="hero2-copy">
          <span className="pill pill-accent hero2-pill"><span className="dot dot-accent"></span>Старт в Краснодаре</span>
          <h1 className="hero2-title">Заказы на работы <span className="accent">рядом с вами</span></h1>
          <p className="hero2-sub">Клиенты находят товары и оставляют заявки на работы. Вы получаете заказы рядом и берёте только удобные.</p>
          <div className="hero2-badge"><Ic.free size={18} color="var(--accent-600)" />Бесплатно для мастеров</div>
          <div className="hero2-cta">
            <a href="#anketa-card" className="btn btn-orange btn-lg">Заполнить анкету</a>
            <button className="btn btn-ghost btn-lg" onClick={()=>scrollTo("how")}>Как это работает</button>
          </div>
        </div>

        <div className="hero2-visual" aria-hidden="true">
          <div className="mock-card mock-back">
            <div className="mc-head">
              <span className="mc-ico"><Ic.bolt size={20} /></span>
              <div className="mc-h"><div className="mc-cat">Электрика</div><div className="mc-task">Заменить розетки</div></div>
              <span className="mc-badge plan">Плановая</span>
            </div>
          </div>

          <div className="mock-card mock-front">
            <div className="mc-head">
              <span className="mc-ico"><Ic.drop size={20} /></span>
              <div className="mc-h"><div className="mc-cat">Сантехника</div><div className="mc-task">Установить смеситель</div></div>
              <span className="mc-badge now">Срочно</span>
            </div>
            <div className="mc-meta">
              <span className="mc-chip"><Ic.pin2 size={14} />Центр · 1,2 км</span>
              <span className="mc-chip"><Ic.clock size={14} />Сегодня</span>
            </div>
            <div className="mc-actions">
              <span className="mc-btn primary">Принять</span>
              <span className="mc-btn ghost">Подробнее</span>
            </div>
          </div>

          <div className="mock-float">
            <span className="mf-ico"><Ic.pin2 size={16} color="#fff" /></span>
            <div><div className="mf-t">Заявка рядом</div><div className="mf-s">в вашем районе</div></div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer className="footer">
      <div className="wrap">
        <div className="footer-inner">
          <div style={{maxWidth:320}}>
            <VovoLockup height={36} color="#fff" tagColor="rgba(255,255,255,.6)" />
            <p style={{marginTop:16,fontSize:14}}>Сервис, который соединяет клиентов, товары и мастеров. На старте подключаем мастеров в Краснодаре.</p>
          </div>
          <div className="fcol">
            <h5>Мастерам</h5>
            <a href="#anketa-card">Заполнить анкету</a>
            <a href="#how" onClick={(e)=>{e.preventDefault();scrollTo("how");}}>Как это работает</a>
            <a href="#orders" onClick={(e)=>{e.preventDefault();scrollTo("orders");}}>Какие заявки</a>
            <a href="#faq" onClick={(e)=>{e.preventDefault();scrollTo("faq");}}>Частые вопросы</a>
          </div>
          <div className="fcol">
            <h5>О сервисе</h5>
            <a href="#model" onClick={(e)=>{e.preventDefault();scrollTo("model");}}>Что такое VOVO</a>
            <a href="#free" onClick={(e)=>{e.preventDefault();scrollTo("free");}}>Бесплатно для мастеров</a>
            <a href="#">Контакты</a>
          </div>
        </div>
        <div className="footer-bottom">
          <span>© 2026 VOVO · Краснодар</span>
          <span>Бесплатно для мастеров · старт в Краснодаре</span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Header, Hero, Footer, scrollToForm, scrollTo });