/* Shared bits — Nav, Logo, footer, etc. */

const { useState, useEffect, useRef } = React;

/* ---------- Logo mark ---------- */
function Mark({ size = 22 }) {
  // Original geometric mark: stacked offset rectangles forming an "R" silhouette in negative space
  const s = size;
  return (
    <svg width={s} height={s} viewBox="0 0 24 24" fill="none" aria-hidden="true">
      <rect x="2"  y="2"  width="8"  height="20" fill="#FFFFFF" />
      <rect x="12" y="2"  width="10" height="8"  fill="#FFFFFF" />
      <rect x="12" y="12" width="6"  height="4"  fill="#FFFFFF" />
      <rect x="14" y="18" width="8"  height="4"  fill="#FFFFFF" />
    </svg>
  );
}

function Wordmark() {
  const home = window.location.pathname.includes('dashboard') || window.location.pathname.includes('impressum') || window.location.pathname.includes('datenschutz') ? 'index.html' : '#top';
  return (
    <a href={home} style={{ display: 'inline-flex', alignItems: 'center', gap: 12 }}>
      <Mark size={18} />
      <span style={{ fontSize: 14, fontWeight: 500, letterSpacing: '-0.01em', color: 'var(--on-surface)' }}>
        RICS<span style={{ color: 'var(--on-surface-dim)', fontWeight: 400 }}>&nbsp;Analytics</span>
      </span>
    </a>
  );
}

/* ---------- Nav ---------- */
function Nav() {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 8);
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  return (
    <header
      style={{
        position: 'fixed', top: 0, left: 0, right: 0, zIndex: 50,
        background: scrolled ? 'rgba(14, 14, 14, 0.72)' : 'transparent',
        backdropFilter: scrolled ? 'blur(20px)' : 'none',
        WebkitBackdropFilter: scrolled ? 'blur(20px)' : 'none',
        borderBottom: scrolled ? '1px solid var(--ghost)' : '1px solid transparent',
        transition: 'background 220ms ease, border-color 220ms ease',
      }}
    >
      <div className="container" style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', height: 72 }}>
        <Wordmark />
        <nav style={{ display: 'flex', alignItems: 'center', gap: 36 }}>
          {(window.location.pathname.includes('dashboard') ? [
            ['Lagekarte',         '#lagekarte'],
            ['Reports',           '#reports'],
            ['Portfolio',         '#portfolio'],
            ['Bericht anfordern', '#request-report'],
          ] : window.location.pathname.includes('impressum') || window.location.pathname.includes('datenschutz') ? [
            ['Methodik',     'index.html#methodology'],
            ['Reports',      'index.html#reports'],
            ['Track Record', 'index.html#track-record'],
            ['Plattform',    'index.html#founder'],
          ] : [
            ['Methodik',     '#methodology'],
            ['Reports',      '#reports'],
            ['Track Record', '#track-record'],
            ['Plattform',    '#founder'],
          ]).map(([label, href]) => (
            <a key={href} href={href} style={{ fontSize: 13, color: 'var(--on-surface-variant)', letterSpacing: '-0.005em' }}
               onMouseEnter={(e) => e.currentTarget.style.color = 'var(--on-surface)'}
               onMouseLeave={(e) => e.currentTarget.style.color = 'var(--on-surface-variant)'}>
              {label}
            </a>
          ))}
          {window.location.pathname.includes('intelligence') || window.location.pathname.includes('simulation') ? (
            <a href="dashboard.html" className="btn btn-secondary" style={{ padding: '10px 18px', fontSize: 13 }}>
              ← Dashboard
            </a>
          ) : window.location.pathname.includes('dashboard') ? (
            <React.Fragment>
              <a href="intelligence.html" style={{ fontSize: 13, color: 'var(--on-surface-variant)', letterSpacing: '-0.005em' }}
                 onMouseEnter={(e) => e.currentTarget.style.color = 'var(--on-surface)'}
                 onMouseLeave={(e) => e.currentTarget.style.color = 'var(--on-surface-variant)'}>
                Intelligence
              </a>
              <a href="index.html" className="btn btn-secondary" style={{ padding: '10px 18px', fontSize: 13 }}>
                ← Startseite
              </a>
            </React.Fragment>
          ) : (
            <a href="dashboard.html" className="btn btn-secondary" style={{ padding: '10px 18px', fontSize: 13 }}>
              Dashboard
            </a>
          )}
        </nav>
      </div>
    </header>
  );
}

/* ---------- Footer ---------- */
function Footer() {
  const cols = [
    {
      label: 'Reports',
      links: ['Makro-Regime', 'Geo-Reports', 'Konflikt-Reports', 'Infrastruktur & Lieferketten', 'Asset-Reports'],
    },
    {
      label: 'Plattform',
      links: ['Methodik (GeoStrat)', 'Track Record', 'Technologie', 'Gründer', 'Kontakt'],
    },
    {
      label: 'Folgen',
      links: ['TradingView · @Phillipklh', 'LinkedIn', 'X (Twitter)', 'Substack'],
    },
  ];
  return (
    <footer style={{ background: 'var(--surface-lowest)', paddingTop: 96, paddingBottom: 40, marginTop: 40 }}>
      <div className="container">
        <div style={{ display: 'grid', gridTemplateColumns: '1.6fr repeat(3, 1fr)', gap: 48, marginBottom: 96 }}>
          <div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 28 }}>
              <Mark size={22} />
              <div style={{ fontSize: 15, fontWeight: 500 }}>
                RICS<span style={{ color: 'var(--on-surface-dim)', fontWeight: 400 }}>&nbsp;Analytics</span>
              </div>
            </div>
            <p className="body" style={{ maxWidth: 320, fontSize: 13, color: 'var(--on-surface-dim)' }}>
              KI-gestützte Geopolitik-Intelligence für Investoren und Vermögensverwalter im DACH-Raum.
            </p>
          </div>
          {cols.map(col => (
            <div key={col.label}>
              <div className="label" style={{ marginBottom: 20 }}>{col.label}</div>
              <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 14 }}>
                {col.links.map(l => (
                  <li key={l}>
                    <a href="#" style={{ fontSize: 13, color: 'var(--on-surface-variant)' }}
                       onMouseEnter={(e) => e.currentTarget.style.color = 'var(--on-surface)'}
                       onMouseLeave={(e) => e.currentTarget.style.color = 'var(--on-surface-variant)'}>
                      {l}
                    </a>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', paddingTop: 36, borderTop: '1px solid var(--ghost)' }}>
          <div className="mono" style={{ fontSize: 11, color: 'var(--on-surface-quiet)', letterSpacing: '0.04em' }}>
            © 2026 RICS Analytics · Inh. Phillip Kölsche · ricsanalytics.de
          </div>
          <div style={{ display: 'flex', gap: 28 }}>
            {[['Impressum', 'impressum.html'], ['Datenschutz', 'datenschutz.html'], ['AGB', '#'], ['LinkedIn', '#']].map(([l, href]) => (
              <a key={l} href={href} style={{ fontSize: 11, letterSpacing: '0.04em', textTransform: 'uppercase', color: 'var(--on-surface-quiet)', fontFamily: 'var(--font-mono)' }}
                 onMouseEnter={(e) => e.currentTarget.style.color = 'var(--on-surface-variant)'}
                 onMouseLeave={(e) => e.currentTarget.style.color = 'var(--on-surface-quiet)'}>
                {l}
              </a>
            ))}
          </div>
        </div>
      </div>
    </footer>
  );
}

/* ---------- Reveal helper (intersection-observer fade) ---------- */
function Reveal({ children, delay = 0, as = 'div', style = {} }) {
  const ref = useRef(null);
  const [shown, setShown] = useState(false);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting) {
          setTimeout(() => setShown(true), delay);
          io.unobserve(el);
        }
      });
    }, { threshold: 0.12 });
    io.observe(el);
    return () => io.disconnect();
  }, [delay]);
  const Tag = as;
  return <Tag ref={ref} className={'reveal' + (shown ? ' in' : '')} style={style}>{children}</Tag>;
}

Object.assign(window, { Mark, Wordmark, Nav, Footer, Reveal });