/* global React, ReactDOM */
const { useState, useEffect, useRef, Fragment } = React;

// ==============================
// ROUTER
// ==============================
const ROUTES = [
  { id: 'home', label: 'Start', path: '#/' },
  { id: 'about', label: 'Über uns', path: '#/ueber-uns',
    submenu: [
      { id: 'about', label: 'Die 4its GmbH', desc: 'Wer wir sind', path: '#/ueber-uns' },
      { id: 'history', label: 'Unsere Geschichte', desc: 'Seit 2003', path: '#/geschichte' },
    ] },
  { id: 'dienstleistung', label: 'Dienstleistung', path: '#/dienstleistung' },
  { id: 'produkte', label: 'Produkte', path: '#/produkte' },
  { id: 'beratung', label: 'Beratung', path: '#/beratung' },
  { id: 'rechenzentrum', label: 'Rechenzentrum', path: '#/rechenzentrum' },
  { id: 'loesungen', label: 'Lösungen', path: '#/loesungen',
    submenu: [
      { id: 'ungana-cloud', label: 'UNGANA Cloud', desc: 'Cloud Computing', path: '#/loesungen/ungana-cloud' },
      { id: 'ungana-exchange', label: 'UNGANA Exchange', desc: 'Mail & Kollaboration', path: '#/loesungen/ungana-exchange' },
    ] },
  { id: 'blog', label: 'Blog', path: '#/blog' },
  { id: 'jobs', label: 'Jobs', path: '#/jobs' },
  { id: 'contact', label: 'Kontakt', path: '#/kontakt',
    submenu: [
      { id: 'contact-form', label: 'Kontakt', desc: 'Nachricht senden', path: '#/kontakt' },
      { id: 'contact-route', label: 'Anfahrt', desc: 'Burchardstraße 22', path: '#/anfahrt' },
      { id: 'contact-tv', label: 'Fernwartung', desc: 'Teamviewer', path: '#/fernwartung' },
    ] },
];

function useHashRoute() {
  const [hash, setHash] = useState(window.location.hash || '#/');
  useEffect(() => {
    const onHash = () => { setHash(window.location.hash || '#/'); window.scrollTo({ top: 0, behavior: 'instant' }); };
    window.addEventListener('hashchange', onHash);
    return () => window.removeEventListener('hashchange', onHash);
  }, []);
  return hash;
}

function navigate(path) {
  window.location.hash = path.replace(/^#/, '');
}

// ==============================
// ICONS
// ==============================
const Icon = ({ d, size = 18 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d={d} /></svg>
);
const ArrowRight = ({ size = 14 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12h14M13 5l7 7-7 7"/></svg>
);
const Sun = () => (<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4"/></svg>);
const Moon = () => (<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z"/></svg>);

const ICONS = {
  service: "M12 2l2 4 4 .6-3 2.8.7 4.1L12 11.6 8.3 13.5 9 9.4 6 6.6l4-.6L12 2z",
  beratung: "M8 10h8M8 14h5M21 12a9 9 0 0 1-14 7.6L3 21l1.4-4A9 9 0 1 1 21 12z",
  outsourcing: "M4 7h16M4 12h16M4 17h10",
  security: "M12 2l8 4v6c0 5-3.5 9-8 10-4.5-1-8-5-8-10V6l8-4z",
  cloud: "M7 18a5 5 0 1 1 .7-9.9 6 6 0 0 1 11.6 2A4 4 0 0 1 18 18H7z",
  hosting: "M3 5h18v5H3V5zM3 14h18v5H3v-5zM7 7.5h.01M7 16.5h.01",
};

// ==============================
// LOGO MARK (SVG rendition of 4its cube)
// ==============================
const LogoMark = ({ size = 28 }) => (
  <svg width={size} height={size} viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
    {/* 3x3 grid of split tiles */}
    {[
      [0,0,'#E89B3C','#F0F2F5'],[1,0,'#D1D6DE','#E7EAEF'],[2,0,'#E7EAEF','#D1D6DE'],
      [0,1,'#7FB9DC','#3FA4C9'],[1,1,'#3FA4C9','#5A6B89'],[2,1,'#14284B','#E7EAEF'],
      [0,2,'#D1D6DE','#8FCB7F'],[1,2,'#6FB85A','#E7EAEF'],[2,2,'#E7EAEF','#D1D6DE'],
    ].map(([x,y,c1,c2], i) => (
      <g key={i} transform={`translate(${x*20} ${y*20})`}>
        <polygon points="0,0 20,0 0,20" fill={c1} />
        <polygon points="20,0 20,20 0,20" fill={c2} />
      </g>
    ))}
  </svg>
);

// ==============================
// NAV
// ==============================
function Nav({ route, theme, setTheme, mobileOpen, setMobileOpen }) {
  const activeId = routeIdFromHash(route);
  return (
    <>
      <nav className="nav">
        <div className="container nav-inner">
          <a className="nav-logo" href="#/" onClick={() => setMobileOpen(false)}>
            <LogoMark size={28} />
            <span>4ITS</span>
            <span className="gmbh">GmbH</span>
          </a>
          <div className="nav-links">
            {ROUTES.map(r => (
              <div key={r.id} className="nav-link-wrap">
                <a
                  className={`nav-link ${r.submenu ? 'has-submenu' : ''} ${activeId === r.id ? 'active' : ''}`}
                  href={r.path}
                >{r.label}</a>
                {r.submenu && (
                  <div className="submenu">
                    {r.submenu.map(s => (
                      <a key={s.id} className="submenu-item" href={s.path}>
                        {s.label}
                        <span className="desc">{s.desc}</span>
                      </a>
                    ))}
                  </div>
                )}
              </div>
            ))}
          </div>
          <div className="nav-right">
            <a className="nav-phone mono" href="tel:+494056194700">+49 40 561947 0</a>
            <button className="theme-toggle" onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')} aria-label="Theme umschalten">
              {theme === 'dark' ? <Sun/> : <Moon/>}
            </button>
            <button className={`mobile-toggle ${mobileOpen ? 'open' : ''}`} onClick={() => setMobileOpen(!mobileOpen)} aria-label="Menü">
              <span></span>
            </button>
          </div>
        </div>
      </nav>
      <div className={`mobile-menu ${mobileOpen ? 'open' : ''}`}>
        {ROUTES.map((r, i) => (
          <a key={r.id} className="mobile-menu-link" href={r.path} onClick={() => setMobileOpen(false)}>
            <span className="num">0{i+1}</span>{r.label}
          </a>
        ))}
        <div className="mobile-cta">
          <a className="btn btn-primary" href="#/kontakt" onClick={() => setMobileOpen(false)}>Kontakt aufnehmen <ArrowRight/></a>
          <a className="btn btn-ghost mono" href="tel:+494056194700">+49 40 561947 0</a>
        </div>
      </div>
    </>
  );
}

function routeIdFromHash(hash) {
  const p = hash.replace('#', '');
  if (p === '/' || p === '') return 'home';
  if (p.startsWith('/ueber-uns') || p.startsWith('/geschichte')) return 'about';
  if (p.startsWith('/kontakt') || p.startsWith('/anfahrt') || p.startsWith('/fernwartung')) return 'contact';
  if (p.startsWith('/dienstleistung')) return 'dienstleistung';
  if (p.startsWith('/produkte')) return 'produkte';
  if (p.startsWith('/beratung')) return 'beratung';
  if (p.startsWith('/rechenzentrum')) return 'rechenzentrum';
  if (p.startsWith('/loesungen')) return 'loesungen';
  if (p.startsWith('/blog')) return 'blog';
  if (p.startsWith('/jobs')) return 'jobs';
  return 'home';
}

// ==============================
// FOOTER
// ==============================
function Footer() {
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-grid">
          <div className="footer-brand">
            <div style={{display:'flex',alignItems:'center',gap:10,marginBottom:20}}>
              <LogoMark size={28} />
              <span style={{fontWeight:600,fontSize:15}}>4ITS</span>
              <span className="mono" style={{fontSize:11,color:'var(--fg-dim)'}}>GmbH</span>
            </div>
            <p>Hamburger IT-Systemhaus.<br/>Persönlich. Verbindlich. Verständlich.</p>
          </div>
          <div>
            <h5>Leistungen</h5>
            <ul>
              <li><a href="#/produkte">Produkte & Leistungen</a></li>
              <li><a href="#/dienstleistung">IT-Service</a></li>
              <li><a href="#/beratung">Beratung</a></li>
              <li><a href="#/rechenzentrum">Rechenzentrum</a></li>
              <li><a href="#/loesungen/ungana-cloud">UNGANA Cloud</a></li>
              <li><a href="#/loesungen/ungana-exchange">UNGANA Exchange</a></li>
            </ul>
          </div>
          <div>
            <h5>Unternehmen</h5>
            <ul>
              <li><a href="#/ueber-uns">Über uns</a></li>
              <li><a href="#/geschichte">Geschichte</a></li>
              <li><a href="#/jobs">Jobs</a></li>
              <li><a href="#/blog">Blog</a></li>
              <li><a href="#/kontakt">Kontakt</a></li>
            </ul>
          </div>
          <div>
            <h5>Kontakt</h5>
            <ul>
              <li>Burchardstraße 22<br/>20095 Hamburg</li>
              <li><a href="tel:+494056194700" className="mono">+49 40 561947 0</a></li>
              <li><a href="mailto:info@4its.de">info@4its.de</a></li>
              <li className="mono" style={{color:'var(--fg-dim)',fontSize:12}}>Mo–Fr 09:00–18:00</li>
            </ul>
          </div>
          <div>
            <h5>Fernwartung</h5>
            <p style={{fontSize:12,color:'var(--fg-dim)',margin:'0 0 12px',lineHeight:1.5}}>Schnellhilfe per Teamviewer.<br/>Einfach klicken & ausführen.</p>
            <div style={{display:'flex',flexDirection:'column',gap:8}}>
              <a className="footer-tv" href="https://get.teamviewer.com/4itsgmbh" target="_blank" rel="noreferrer">
                <span className="footer-tv-dot"/>
                <span>Windows</span>
                <ArrowRight size={14}/>
              </a>
              <a className="footer-tv" href="https://get.teamviewer.com/4itsgmbhmac" target="_blank" rel="noreferrer">
                <span className="footer-tv-dot"/>
                <span>macOS</span>
                <ArrowRight size={14}/>
              </a>
            </div>
          </div>
        </div>
        <div className="footer-bottom">
          <div>© 2026 4ITS GMBH · ALL RIGHTS RESERVED</div>
          <div style={{display:'flex',gap:24}}>
            <a href="#/impressum">Impressum</a>
            <a href="#/datenschutz">Datenschutz</a>
          </div>
        </div>
      </div>
    </footer>
  );
}

// ==============================
// HERO TILE GRID (logo-inspired)
// ==============================
function HeroMark() {
  // mirrors the 4ITS block mark — 3x3 with diagonal-split tiles
  const layout = [
    ['a','g','g'],
    ['b','d','c'],
    ['g','f','g'],
  ];
  return (
    <div className="hero-mark" aria-hidden="true">
      <div className="tile-grid">
        {layout.flat().map((cls, i) => (
          <div key={i} className={`tile tile-${cls}`}></div>
        ))}
      </div>
    </div>
  );
}

// shared export
Object.assign(window, { useState, useEffect, useRef, Fragment, ROUTES, useHashRoute, navigate, Icon, ArrowRight, Sun, Moon, ICONS, LogoMark, Nav, routeIdFromHash, Footer, HeroMark });