/* Shared chrome: Header, Footer, page sections — used by all pages */

/* ── Hash-Scroll-Fix ────────────────────────────────────────────────────
   Browser-Behavior beim Page-Load mit Hash (z. B. /funnel.html#preis):
   Browser sucht beim Initial-Load nach #preis, findet es nicht (React hat
   noch nicht gerendert), scrollt nicht — wenn React fertig ist, ist es
   zu spät. Wir wiederholen das Lookup nach jedem Tick bis die Section
   existiert (max 1 Sekunde), dann scrollen wir mit Header-Offset hin. */
(function installHashScrollFix() {
  if (typeof window === 'undefined') return;
  const HEADER_OFFSET = 96;
  const MAX_ATTEMPTS = 20; // 20 × 50ms = 1s

  function scrollToHash() {
    const raw = window.location.hash;
    if (!raw || raw === '#') return;
    const id = decodeURIComponent(raw.slice(1));
    let attempts = 0;
    function attempt() {
      const el = document.getElementById(id);
      if (el) {
        const top = el.getBoundingClientRect().top + window.pageYOffset - HEADER_OFFSET;
        // Auto (not smooth) on initial load — the page is fresh, jump straight there.
        window.scrollTo({ top, behavior: 'auto' });
      } else if (++attempts < MAX_ATTEMPTS) {
        setTimeout(attempt, 50);
      }
    }
    attempt();
  }

  // Run after initial paint
  if (document.readyState === 'complete' || document.readyState === 'interactive') {
    setTimeout(scrollToHash, 0);
  } else {
    document.addEventListener('DOMContentLoaded', () => setTimeout(scrollToHash, 0));
  }

  // Also handle in-page hash changes (e.g. clicking a nav link to the same page)
  window.addEventListener('hashchange', scrollToHash);
})();

function FernwartungModal({ open, onClose }) {
  React.useEffect(() => {
    if (open) {
      document.body.style.overflow = 'hidden';
    } else {
      document.body.style.overflow = '';
    }
    return () => {document.body.style.overflow = '';};
  }, [open]);

  if (!open) return null;

  const WindowsIcon = () =>
  <svg width="34" height="34" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
      <path d="M0 3.449L9.75 2.1v9.451H0m10.949-9.602L24 0v11.4H10.949M0 12.6h9.75v9.451L0 20.699M10.949 12.6H24V24l-12.9-1.801" />
    </svg>;

  const MacIcon = () =>
  <svg width="48" height="48" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
      <path d="M17.05 20.28c-.98.95-2.05.8-3.08.35-1.09-.46-2.09-.48-3.24 0-1.44.62-2.2.44-3.06-.35C2.79 15.25 3.51 7.59 9.05 7.31c1.35.07 2.29.74 3.08.8 1.18-.24 2.31-.93 3.57-.84 1.51.12 2.65.72 3.4 1.8-3.12 1.87-2.38 5.98.48 7.13-.57 1.5-1.31 2.99-2.54 4.09zM12.03 7.25c-.15-2.23 1.66-4.07 3.74-4.25.29 2.58-2.34 4.5-3.74 4.25z" />
    </svg>;


  return (
    <div className="modal-backdrop" onClick={onClose}>
      <div className="modal-card fw-modal" onClick={(e) => e.stopPropagation()}>
        <button className="modal-close" onClick={onClose} aria-label="Schließen">×</button>
        <div className="fw-modal-head">
          <span className="eyebrow"><span style={{ width: 8, height: 8, borderRadius: '50%', background: 'var(--color-gold)', display: 'inline-block', marginRight: 6 }} /> Fernwartung · Datto RMM</span>
          <h3>Fernwartung starten</h3>
          <p>Wählen Sie Ihr Betriebssystem. Der Datto-RMM-Agent wird heruntergeladen und stellt nach der Installation eine sichere Verbindung zu unserem Support her.</p>
        </div>
        <div className="fw-modal-grid">
          <a
            href="https://merlot.rmm.datto.com/download-agent/windows/afaa6a35-af3c-4980-8f4b-a958908221bf"
            className="fw-os-card"
            target="_blank"
            rel="noopener"
            onClick={onClose}>
            <div className="fw-os-icon"><WindowsIcon /></div>
            <div className="fw-os-name">Windows</div>
            <div className="fw-os-cta">Agent herunterladen →</div>
          </a>
          <a
            href="https://merlot.rmm.datto.com/download-agent/mac/afaa6a35-af3c-4980-8f4b-a958908221bf"
            className="fw-os-card"
            target="_blank"
            rel="noopener"
            onClick={onClose}>
            <div className="fw-os-icon"><MacIcon /></div>
            <div className="fw-os-name">macOS</div>
            <div className="fw-os-cta">Agent herunterladen →</div>
          </a>
        </div>
        <p className="fw-modal-foot">
          Sicher · DSGVO-konform · Verbindung erst nach Ihrer ausdrücklichen Freigabe.
        </p>
      </div>
    </div>);

}

function SiteHeader({ active }) {
  const [auto, setAuto] = React.useState(active);
  React.useEffect(() => {
    // Funnel: scroll between Risiko & Preis-Konfigurator
    if (active === 'funnel-risiko' || active === 'funnel-preis') {
      const sections = ['risiko', 'preis'].
      map((id) => document.getElementById(id)).
      filter(Boolean);
      if (sections.length === 0) return;
      const onScroll = () => {
        const probe = window.scrollY + window.innerHeight * 0.35;
        let current = 'funnel-risiko';
        for (const s of sections) {
          if (s.offsetTop <= probe) current = `funnel-${s.id}`;
        }
        setAuto(current);
      };
      onScroll();
      window.addEventListener('scroll', onScroll, { passive: true });
      return () => window.removeEventListener('scroll', onScroll);
    }
    // Home: highlight "Lösungen" when scrolled past the Solutions section
    if (active === 'home') {
      const loesung = document.getElementById('loesung');
      if (!loesung) return;
      const onScroll = () => {
        const probe = window.scrollY + window.innerHeight * 0.35;
        if (probe >= loesung.offsetTop) {
          setAuto('loesung');
        } else {
          setAuto('home');
        }
      };
      onScroll();
      window.addEventListener('scroll', onScroll, { passive: true });
      return () => window.removeEventListener('scroll', onScroll);
    }
  }, [active]);
  const current = auto || active;
  const link = (href, label, key) =>
  <a href={href} className={current === key ? 'nav-active' : ''}>{label}</a>;

  return (
    <header className="site-header">
      <div className="container">
        <a href="index.html" className="brand">
          <img src={typeof window !== 'undefined' && window.__resources && window.__resources.logoWhite || "assets/malitech-logo-white.png"} alt="MaliTech Solutions" />
        </a>
        <nav className="nav">
          {link('index.html', 'Startseite', 'home')}
          {link('index.html#loesung', 'Lösungen', 'loesung')}
          {link('funnel.html#risiko', 'Risiko-Analyse', 'funnel-risiko')}
          {link('funnel.html#preis', 'Angebots-Konfigurator', 'funnel-preis')}
          {link('kontakt.html', 'Kontakt', 'kontakt')}
        </nav>
        <a href="kontakt.html" className="btn btn-brand header-cta">
          <Icon.Calendar size={16} /> Termin buchen
        </a>
      </div>
    </header>);

}

function SiteFooter() {
  const [fwOpen, setFwOpen] = React.useState(false);
  return (
    <footer className="site-footer">
      <div className="container">
        <div className="footer-grid">
          {/* Brand column */}
          <div className="footer-brand-col">
            <img src={typeof window !== 'undefined' && window.__resources && window.__resources.logoWhite || "assets/malitech-logo-white.png"} alt="MaliTech" className="footer-logo" />
            <p className="footer-brand-text">Ihr Partner für IT-Exzellenz und Cyber-Versicherbarkeit. Weniger Compliance-Risiko,<br/>mehr Effizienz durch intelligente Systeme.</p>
            <p className="footer-tagline">MIT UNS WIRD IT EINFACH.</p>
          </div>

          {/* Menu */}
          <div className="footer-col">
            <h5>Menü</h5>
            <ul>
              <li><a href="index.html">Startseite</a></li>
              <li><a href="index.html#loesung">Lösungen</a></li>
              <li><a href="funnel.html#risiko">Risiko-Analyse</a></li>
              <li><a href="funnel.html#preis">Angebots-Rechner</a></li>
              <li><a href="kontakt.html">Kontakt</a></li>
              <li><a href="blog.html">Blog</a></li>
            </ul>
          </div>

          {/* Legal */}
          <div className="footer-col">
            <h5>Rechtliches</h5>
            <ul>
              <li><a href="impressum.html">Impressum</a></li>
              <li><a href="datenschutz.html">Datenschutzerklärung</a></li>
              <li><a href="agb.html">AGB</a></li>
              <li><a href="newsletter-abmelden.html">Newsletter abmelden</a></li>
              <li><a href="#" onClick={(e) => {e.preventDefault();window.cookieConsent && window.cookieConsent.openSettings();}}>Cookie-Einstellungen</a></li>
            </ul>
          </div>

          {/* Contact */}
          <div className="footer-col">
            <h5>Kontakt</h5>
            <div className="footer-contact-block">
              <div className="footer-address">
                <strong>MaliTech Solutions</strong>
                <span>Uthmannstraße 10</span>
                <span>33647 Bielefeld</span>
              </div>
              <div className="footer-phone">+49 521 163913-10</div>
              <div className="footer-socials" aria-label="Social Media">
                <a href="https://www.linkedin.com/company/malitech-solutions" target="_blank" rel="noopener" aria-label="LinkedIn"><svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M20.45 20.45h-3.55v-5.57c0-1.33-.03-3.04-1.85-3.04-1.85 0-2.13 1.45-2.13 2.94v5.67H9.36V9h3.41v1.56h.05c.48-.9 1.64-1.85 3.37-1.85 3.6 0 4.27 2.37 4.27 5.46v6.28zM5.34 7.43a2.06 2.06 0 110-4.12 2.06 2.06 0 010 4.12zM7.12 20.45H3.56V9h3.56v11.45zM22.22 0H1.77C.79 0 0 .77 0 1.72v20.56C0 23.23.79 24 1.77 24h20.45c.98 0 1.78-.77 1.78-1.72V1.72C24 .77 23.2 0 22.22 0z" /></svg></a>
                <a href="https://www.instagram.com/malitechsolutions/" target="_blank" rel="noopener" aria-label="Instagram"><svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2.16c3.2 0 3.58.01 4.85.07 1.17.05 1.8.25 2.23.41.56.22.96.48 1.38.9.42.42.68.82.9 1.38.16.42.36 1.06.41 2.23.06 1.27.07 1.65.07 4.85s-.01 3.58-.07 4.85c-.05 1.17-.25 1.8-.41 2.23-.22.56-.48.96-.9 1.38-.42.42-.82.68-1.38.9-.42.16-1.06.36-2.23.41-1.27.06-1.65.07-4.85.07s-3.58-.01-4.85-.07c-1.17-.05-1.8-.25-2.23-.41a3.71 3.71 0 01-1.38-.9 3.71 3.71 0 01-.9-1.38c-.16-.42-.36-1.06-.41-2.23-.06-1.27-.07-1.65-.07-4.85s.01-3.58.07-4.85c.05-1.17.25-1.8.41-2.23.22-.56.48-.96.9-1.38.42-.42.82-.68 1.38-.9.42-.16 1.06-.36 2.23-.41 1.27-.06 1.65-.07 4.85-.07M12 0C8.74 0 8.33.01 7.05.07 5.78.13 4.9.33 4.14.63a5.86 5.86 0 00-2.13 1.38A5.86 5.86 0 00.63 4.14c-.3.76-.5 1.64-.56 2.91C0 8.33 0 8.74 0 12s.01 3.67.07 4.95c.06 1.27.26 2.15.56 2.91.31.8.73 1.48 1.38 2.13.65.65 1.33 1.07 2.13 1.38.76.3 1.64.5 2.91.56C8.33 24 8.74 24 12 24s3.67-.01 4.95-.07c1.27-.06 2.15-.26 2.91-.56a5.86 5.86 0 002.13-1.38 5.86 5.86 0 001.38-2.13c.3-.76.5-1.64.56-2.91.06-1.28.07-1.69.07-4.95s-.01-3.67-.07-4.95c-.06-1.27-.26-2.15-.56-2.91a5.86 5.86 0 00-1.38-2.13A5.86 5.86 0 0019.86.63c-.76-.3-1.64-.5-2.91-.56C15.67.01 15.26 0 12 0zm0 5.84a6.16 6.16 0 100 12.32 6.16 6.16 0 000-12.32zm0 10.16a4 4 0 110-8 4 4 0 010 8zm6.4-11.85a1.44 1.44 0 100 2.88 1.44 1.44 0 000-2.88z" /></svg></a>
                <a href="https://www.facebook.com/people/MaliTech-Solutions/61586803024140/" target="_blank" rel="noopener" aria-label="Facebook"><svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M22.68 0H1.32C.59 0 0 .59 0 1.32v21.36C0 23.4.59 24 1.32 24h11.5v-9.29H9.69V11.1h3.13V8.41c0-3.1 1.9-4.79 4.66-4.79 1.32 0 2.46.1 2.79.14v3.24h-1.92c-1.5 0-1.79.71-1.79 1.76v2.31h3.59l-.47 3.62h-3.12V24h6.12c.73 0 1.32-.59 1.32-1.32V1.32C24 .59 23.4 0 22.68 0z" /></svg></a>
              </div>
              <a href="mailto:kontakt@malitech-solutions.de" className="footer-email">
                kontakt@malitech-solutions.de
              </a>
            </div>
          </div>
        </div>

        <div className="footer-bottom">
          <div className="footer-bottom-left">
            <span>© 2026 MaliTech Solutions UG (haftungsbeschränkt). Alle Rechte vorbehalten.</span>
            <span className="footer-b2b-hint">Unsere Leistungen richten sich ausschließlich an Unternehmer im Sinne von § 14 BGB.</span>
          </div>
          <button type="button" className="footer-fw-btn" onClick={() => setFwOpen(true)}>
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><rect x="2" y="4" width="20" height="14" rx="2" /><path d="M8 20h8M12 18v2" /></svg>
            Fernwartung
          </button>
          <span className="systems-online"><span className="dot-online" /> SYSTEME ONLINE</span>
        </div>
      </div>
      <FernwartungModal open={fwOpen} onClose={() => setFwOpen(false)} />
    </footer>);

}

window.SiteHeader = SiteHeader;
window.SiteFooter = SiteFooter;