/* global React, Ico, BigHex */
// Shared UI: Brand, Header, Footer, Section helpers

const { useState, useEffect } = React;

// ---------- Brand ----------
function Brand({ inFooter = false }) {
  return (
    <div className={inFooter ? "brand footer__brand" : "brand"}>
      <img
        src="assets/logo.svg"
        alt="СтройТехноУниверсал — метизы оптом в Красноярске"
        className="brand__logo"
        style={{
          height: 'auto',
          width: inFooter ? '440px' : '350px',
          maxWidth: '100%',
          display: 'block',
        }}
      />
    </div>
  );
}

// ---------- Header ----------
function Header({ page, navigate }) {
  const [menuOpen, setMenuOpen] = useState(false);
  const items = [
    { id: 'home', label: 'Главная' },
    { id: 'catalog', label: 'Каталог' },
    { id: 'delivery', label: 'Доставка и оплата' },
    { id: 'contacts', label: 'Контакты' },
  ];
  const go = (id) => { navigate(id); setMenuOpen(false); };
  const isMobile = typeof window !== 'undefined' && window.innerWidth <= 768;
  return (
    <header className="header" style={{ height: 'auto' }}>
      {/* ДЕСКТОП: логотип слева, навигация и телефон справа */}
      <div className="header-desktop" style={{
        display: 'grid',
        gridTemplateColumns: '1fr 1fr',
        alignItems: 'center',
        padding: '10px 32px',
        maxWidth: 1320,
        margin: '0 auto',
        boxSizing: 'border-box',
      }}>
        {/* Логотип — левая колонка, прижат к левому краю сетки */}
        <a href="#home" onClick={(e) => { e.preventDefault(); go('home'); }}
           style={{ display: 'flex', alignItems: 'center' }}>
          <img
            src="assets/logo.svg"
            alt="СтройТехноУниверсал — метизы оптом"
            style={{ height: 'auto', width: '100%', maxWidth: 728, display: 'block' }}
          />
        </a>
        {/* Телефон + навигация — правая колонка, прижаты к правому краю */}
        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-end', gap: 8 }}>
          <a href="tel:+73912153002" style={{
            color: 'var(--amber)', fontFamily: 'var(--font-head)',
            fontSize: 20, fontWeight: 700, letterSpacing: '0.01em',
          }}>+7 (391) 215-30-02</a>
          <nav style={{ display: 'flex', gap: 4 }}>
            {items.map(it => (
              <a key={it.id} href={`#${it.id}`}
                 className={`nav__item ${page === it.id ? 'is-active' : ''}`}
                 onClick={(e) => { e.preventDefault(); go(it.id); }}>
                {it.label}
              </a>
            ))}
          </nav>
        </div>
      </div>

      {/* МОБИЛЬНЫЙ: логотип на всю ширину, телефон и бургер под ним */}
      <div className="header-mobile" style={{ display: 'none' }}>
        <div style={{ padding: '10px 16px 6px' }}>
          <a href="#home" onClick={(e) => { e.preventDefault(); go('home'); }}>
            <img
              src="assets/logo.svg"
              alt="СтройТехноУниверсал"
              style={{ width: '100%', maxWidth: '100%', height: 'auto', display: 'block', boxSizing: 'border-box' }}
            />
          </a>
        </div>
        <div style={{
          display: 'flex', alignItems: 'center', justifyContent: 'space-between',
          padding: '6px 12px 10px', borderTop: '1px solid rgba(255,255,255,0.08)',
        }}>
          <a href="tel:+73912153002" style={{
            color: 'var(--amber)', fontFamily: 'var(--font-head)',
            fontSize: 17, fontWeight: 700,
          }}>+7 (391) 215-30-02</a>
          <button
            onClick={() => setMenuOpen(!menuOpen)}
            aria-label="Меню"
            style={{
              display: 'flex', flexDirection: 'column', gap: 5,
              background: 'transparent',
              border: '1px solid rgba(255,255,255,0.3)',
              borderRadius: 4, padding: '8px 10px', cursor: 'pointer',
            }}
          >
            <span style={{ display:'block', width:20, height:2, background:'white', borderRadius:2 }}/>
            <span style={{ display:'block', width:20, height:2, background:'white', borderRadius:2 }}/>
            <span style={{ display:'block', width:20, height:2, background:'white', borderRadius:2 }}/>
          </button>
        </div>
      </div>

      {/* Мобильное выпадающее меню */}
      {menuOpen && (
        <div style={{
          position:'absolute', top:'100%', left:0, right:0,
          background:'var(--deep)',
          borderTop:'1px solid rgba(255,255,255,0.08)',
          borderBottom:'1px solid rgba(255,255,255,0.12)',
          zIndex:200,
        }}>
          {items.map(it => (
            <a key={it.id} href={`#${it.id}`}
               style={{
                 display:'block', padding:'16px 20px', fontSize:16,
                 fontWeight: page === it.id ? 700 : 500,
                 color: page === it.id ? 'var(--amber)' : 'rgba(255,255,255,0.85)',
                 borderBottom:'1px solid rgba(255,255,255,0.06)',
                 textDecoration:'none',
               }}
               onClick={(e) => { e.preventDefault(); go(it.id); }}>
              {it.label}
            </a>
          ))}
          <div style={{ padding:'16px 20px', borderTop:'1px solid rgba(255,255,255,0.1)' }}>
            <a href="tel:+73912153002" style={{ display:'block', color:'var(--amber)', fontWeight:700, fontSize:17, marginBottom:10 }}>
              +7 (391) 215-30-02
            </a>
            <a href="tel:+73912143002" style={{ display:'block', color:'rgba(255,255,255,0.7)', fontSize:15 }}>
              +7 (391) 214-30-02
            </a>
          </div>
        </div>
      )}
    </header>
  );
}

// ---------- Footer ----------
function Footer({ navigate }) {
  return (
    <footer className="footer">
      <div className="wrap">
        <div className="footer__grid">
          <div className="footer__col">
            <Brand inFooter />
            <p>Оптовые поставки метизов и крепёжных изделий по Красноярскому краю. Работаем с юрлицами и ИП, отгрузка в день заказа.</p>
            <p style={{ marginTop: 16, fontFamily: 'var(--font-mono)', fontSize: 12, color: 'rgba(255,255,255,0.45)' }}>
              ИНН 2466123456 · ОГРН 1152468000000<br />
              г. Красноярск, ул. Сопочная, д. 25
            </p>
          </div>
          <div className="footer__col">
            <h5>Навигация</h5>
            <ul>
              <li><a href="#home" onClick={(e) => { e.preventDefault(); navigate('home'); }}>Главная</a></li>
              <li><a href="#catalog" onClick={(e) => { e.preventDefault(); navigate('catalog'); }}>Каталог</a></li>
              <li><a href="#delivery" onClick={(e) => { e.preventDefault(); navigate('delivery'); }}>Доставка и оплата</a></li>
              <li><a href="#contacts" onClick={(e) => { e.preventDefault(); navigate('contacts'); }}>Контакты</a></li>
            </ul>
          </div>
          <div className="footer__col">
            <h5>Контакты</h5>
            <ul>
              <li><a href="tel:+73912153002" style={{ color: 'var(--amber)', fontWeight: 600 }}>+7 (391) 215-30-02</a></li>
              <li><a href="tel:+73912143002" style={{ color: 'var(--amber)', fontWeight: 600 }}>+7 (391) 214-30-02</a></li>
              <li><a href="mailto:2153002@mail.ru" style={{ color: 'var(--amber)', fontWeight: 600 }}>2153002@mail.ru</a></li>
              <li style={{ marginTop: 10 }}>Пн–Пт 8:00–18:00</li>
              <li>Сб 9:00–14:00</li>
            </ul>
          </div>
        </div>
        <div className="footer__legal">
          <span>© 2026 ООО «ПСК СТУ». Все права защищены.</span>
          <span>Метизы оптом в Красноярске</span>
        </div>
      </div>
    </footer>
  );
}

// ---------- Section header (reusable) ----------
function SectionHead({ eyebrow, title, sub, dark = false }) {
  return (
    <div className="section-head">
      <div>
        {eyebrow && <div className="h-eyebrow" style={{ marginBottom: 10, color: dark ? 'rgba(255,255,255,0.55)' : undefined }}>{eyebrow}</div>}
        <h2 className="h2">{title}</h2>
      </div>
      {sub && <div className="section-head__sub">{sub}</div>}
    </div>
  );
}

// ---------- Breadcrumbs ----------
function Crumbs({ items, navigate }) {
  return (
    <div className="crumbs">
      {items.map((it, i) => (
        <React.Fragment key={i}>
          {i > 0 && <span className="sep">/</span>}
          {it.to ? (
            <a href={`#${it.to}`} onClick={(e) => { e.preventDefault(); navigate(it.to); }}>{it.label}</a>
          ) : (
            <span className="cur">{it.label}</span>
          )}
        </React.Fragment>
      ))}
    </div>
  );
}

// ---------- Page Head (compact title block) ----------
function PageHead({ crumbs, navigate, title, sub }) {
  return (
    <section className="page-head">
      <div className="page-head__hex"><BigHex stroke="rgba(31, 75, 142, 0.18)" /></div>
      <div className="wrap">
        <Crumbs items={crumbs} navigate={navigate} />
        <h1 className="page-head__title">{title}</h1>
        <p className="page-head__sub">{sub}</p>
      </div>
    </section>
  );
}

// ---------- CTA bottom strip ----------
function BottomCTA({ title, text }) {
  return (
    <section className="section section--tight section--deep" style={{ textAlign: 'center' }}>
      <div className="wrap">
        <h3 className="h2" style={{ marginBottom: 14, fontSize: 32 }}>{title}</h3>
        <p className="text-muted" style={{ maxWidth: 600, margin: '0 auto 28px', fontSize: 15 }}>{text}</p>
        <div style={{ display: 'flex', gap: 12, justifyContent: 'center', flexWrap: 'wrap' }}>
          <a href="tel:+73912153002" className="btn btn--amber btn--lg">+7 (391) 215-30-02</a>
          <a href="mailto:2153002@mail.ru" className="btn btn--outline btn--lg" style={{ color: 'white', borderColor: 'rgba(255,255,255,0.4)' }}>2153002@mail.ru</a>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Brand, Header, Footer, SectionHead, Crumbs, PageHead, BottomCTA });
