// VisiO Tech — Site header & footer
const { useState } = React;

function ThemeToggle() {
  const [theme, setTheme] = React.useState(() =>
    (typeof document !== 'undefined' && document.documentElement.getAttribute('data-theme')) || 'dark'
  );

  function toggle() {
    const next = theme === 'dark' ? 'light' : 'dark';
    document.documentElement.setAttribute('data-theme', next);
    try { localStorage.setItem('visiotech-theme', next); } catch (_) {}
    setTheme(next);
  }

  // Sun for light → click switches to dark; Moon for dark → click switches to light
  return (
    <button
      type="button"
      className="theme-toggle"
      onClick={toggle}
      aria-label={theme === 'dark' ? 'Přepnout na světlý režim' : 'Přepnout na tmavý režim'}
      title={theme === 'dark' ? 'Přepnout na světlý režim' : 'Přepnout na tmavý režim'}
    >
      {theme === 'dark' ? (
        // Sun icon (showing what you'd switch TO)
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
          <circle cx="12" cy="12" r="4"></circle>
          <path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41"></path>
        </svg>
      ) : (
        // Moon icon
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
          <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
        </svg>
      )}
    </button>
  );
}

function Header({ active = 'home', onNav }) {
  // Real routes (no leading #) navigate; in-page anchors are intercepted by onNav for smooth scroll.
  const links = [
    { id: 'home', label: 'Domů', href: '#home' },
    { id: 'services', label: 'Co umíme', href: '#services' },
    { id: 'calculator', label: 'Kalkulačka', href: '#calculator' },
    { id: 'reference', label: 'Reference', href: '#reference' },
    { id: 'faq', label: 'FAQ', href: '#faq' },
    { id: 'contact', label: 'Kontakt', href: '#contact' },
  ];
  const [menuOpen, setMenuOpen] = React.useState(false);
  function handleNavClick(e, link) {
    if (!link.href.startsWith('#')) return;
    e.preventDefault();
    setMenuOpen(false);
    onNav?.(link.id);
  }
  return (
    <header className="site-header">
      <nav className="site-nav" aria-label="Hlavní navigace">
        <a className="site-brand" href="#home" onClick={(e) => { e.preventDefault(); setMenuOpen(false); onNav?.('home'); }}>
          <div className="logo-tile">V</div>
          <div style={{ display: 'flex', flexDirection: 'column', lineHeight: 1.15 }}>
            <span>VisiO Tech</span>
            <span className="site-brand-meta">
              <span className="pulse"></span>
              AI · online
            </span>
          </div>
        </a>
        <button
          type="button"
          className="mobile-menu-toggle"
          aria-label={menuOpen ? 'Zavřít menu' : 'Otevřít menu'}
          aria-expanded={menuOpen}
          aria-controls="primary-nav-menu"
          onClick={() => setMenuOpen(!menuOpen)}
        >
          {menuOpen ? (
            <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
              <line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
            </svg>
          ) : (
            <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
              <line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="18" x2="21" y2="18"/>
            </svg>
          )}
        </button>
        <ul id="primary-nav-menu" className={`nav-menu ${menuOpen ? 'is-open' : ''}`}>
          {links.map((l) => (
            <li key={l.id}>
              <a
                href={l.href}
                className={`nav-link ${active === l.id ? 'active' : ''}`}
                onClick={(e) => handleNavClick(e, l)}
              >{l.label}</a>
            </li>
          ))}
          <li className="nav-phone">
            <a href="tel:+420725634153" className="nav-phone-link" aria-label="Zavolat +420 725 634 153">
              <Phone size={14} aria-hidden="true" /> 725 634 153
            </a>
          </li>
          <li className="nav-cta">
            <a href="#calculator" className="btn btn-primary btn-small" onClick={(e) => { e.preventDefault(); setMenuOpen(false); onNav?.('calculator'); }}>
              Vyzkoušet naši AI
            </a>
          </li>
          <li className="nav-theme">
            <ThemeToggle />
          </li>
        </ul>
      </nav>
    </header>
  );
}

function Footer() {
  return (
    <footer className="site-footer">
      <div className="footer-grid">
        <div className="footer-brand-col">
          <a href="#home" className="site-brand">
            <div className="logo-tile">V</div>
            <div style={{ display: 'flex', flexDirection: 'column', lineHeight: 1.15 }}>
              <span>VisiO Tech</span>
              <span className="site-brand-meta">
                <span className="pulse"></span>
                AI · online
              </span>
            </div>
          </a>
          <p>AI automatizace pro české firmy — CNN, LLM, <span style={{ whiteSpace: 'nowrap' }}>on-prem</span> řešení.</p>
        </div>
        <div className="footer-nav-col">
          <h4>Produkt</h4>
          <ul>
            <li><a href="#calculator">AI kalkulátor</a></li>
            <li><a href="#how">Jak to funguje</a></li>
            <li><a href="blog/">Blog</a></li>
          </ul>
        </div>
        <div className="footer-nav-col">
          <h4>Služby</h4>
          <ul>
            <li><a href="#services">Optimalizace materiálu</a></li>
            <li><a href="#services">Automatizace e-shopu</a></li>
            <li><a href="#services">Kontrola kvality kamerou</a></li>
            <li><a href="#services">Zpracování dokumentů</a></li>
          </ul>
        </div>
        <div className="footer-nav-col">
          <h4>Kontakt</h4>
          <ul>
            <li><a href="mailto:info@visiotech.cz">info@visiotech.cz</a></li>
            <li><a href="tel:+420725634153">+420 725 634 153</a></li>
            <li><a href="privacy.html">Ochrana osobních údajů</a></li>
            <li><a href="cookies.html">Cookies</a></li>
            <li><a href="podminky.html">Obchodní podmínky</a></li>
          </ul>
          <address className="footer-company">
            <strong>VisiO Tech s.r.o.</strong><br />
            Zrzavého 1705/2a<br />
            163 00 Praha 17 (Řepy)<br />
            <span className="footer-company-ids">
              <span style={{ whiteSpace: 'nowrap' }}>IČO:&nbsp;23230762</span>
              {' · '}
              <span style={{ whiteSpace: 'nowrap' }}>DIČ:&nbsp;CZ23230762</span>
            </span>
          </address>
        </div>
      </div>
      <div className="footer-bottom">
        <span>© 2026 VisiO Tech s.r.o. · Zrzavého 1705/2a, 163 00 Praha · IČO 23230762 · Všechna práva vyhrazena.</span>
        <div className="tech-badges-small">
          <span className="tech-badge-small">CNN</span>
          <span className="tech-badge-small">LLM</span>
          <span className="tech-badge-small">Local AI</span>
          <span className="tech-badge-small">AI agenti</span>
          <span className="tech-badge-small">Automatizace</span>
          <span className="tech-badge-small">Zpracování fotek</span>
          <span className="tech-badge-small">Zpracování dat</span>
          <span className="tech-badge-small">GDPR</span>
        </div>
      </div>
    </footer>
  );
}

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