// Shared UI components
const { useState, useEffect, useMemo, useRef } = React;

function Logo({ size = 22 }) {
  return (
    <span className="nav-logo">
      <span className="nav-logo-mark" style={{ width: size, height: size, fontSize: size * 0.5 }}>H</span>
      <span>humansrunit</span>
    </span>
  );
}

function Nav({ current, go }) {
  // SEO routes use real <a href> so navigation works on every static page (the prototype
  // doesn't have to be mounted to navigate). App-only routes still use the React go() router.
  const isDe = (typeof window !== 'undefined' && window.location.pathname.startsWith('/de/'))
    || current === 'home-de';
  const links = isDe ? [
    { href: '/de/', label: 'Home', match: ['home', 'home-de'] },
    { href: '/de/browse', label: 'Entdecken', match: ['browse'] },
    { href: '/de/for-operators', label: 'Für Anbieter', match: ['operators'] },
    { href: '/de/for-companies', label: 'Für Unternehmen', match: ['companies'] },
    { href: '/de/blog', label: 'Blog', match: ['blog'] },
  ] : [
    { href: '/', label: 'Home', match: ['home'] },
    { href: '/browse', label: 'Browse', match: ['browse'] },
    { href: '/for-operators', label: 'For operators', match: ['operators'] },
    { href: '/for-companies', label: 'For companies', match: ['companies'] },
    { href: '/blog', label: 'Blog', match: ['blog'] },
  ];
  const enHref = '/';
  const deHref = '/de/';
  return (
    <nav className="nav">
      <div className="container nav-inner">
        <a href={isDe ? '/de/' : '/'}><Logo /></a>
        <div className="nav-links">
          {links.map(l => (
            <a
              key={l.href}
              href={l.href}
              className={`nav-link ${l.match.includes(current) ? 'active' : ''}`}
            >
              {l.label}
            </a>
          ))}
        </div>
        <div className="nav-spacer" />
        <span className="mono" style={{ fontSize: 11, color: 'var(--ink-3)', letterSpacing: '0.06em', textTransform: 'uppercase' }}>
          <a href={enHref} style={{ color: isDe ? 'var(--ink-4)' : 'var(--ink-2)' }}>EN</a>
          <span style={{ color: 'var(--ink-4)', margin: '0 6px' }}>/</span>
          <a href={deHref} style={{ color: isDe ? 'var(--ink-2)' : 'var(--ink-4)' }}>DE</a>
        </span>
        <a className="btn btn-ghost btn-sm" href={isDe ? '/signin' : '/signin'}>{isDe ? 'Anmelden' : 'Sign in'}</a>
        <a className="btn btn-primary btn-sm" href={isDe ? '/waitlist?side=company' : '/waitlist?side=company'}>{isDe ? 'Warteliste' : 'Join waitlist'}</a>
      </div>
    </nav>
  );
}

function Footer({ go }) {
  const isDe = typeof window !== 'undefined' && window.location.pathname.startsWith('/de/');
  const p = isDe ? '/de' : '';
  return (
    <footer className="footer">
      <div className="container">
        <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr 1fr 1fr 1fr', gap: 32, marginBottom: 40 }}>
          <div>
            <Logo />
            <p style={{ marginTop: 12, maxWidth: 320, color: 'var(--ink-3)' }}>
              {isDe
                ? "Ein kostenloses Verzeichnis, das Menschen, die KI-Agenten einrichten, mit kleinen Unternehmen verbindet. Keine Gebühren, keine Vermittlung."
                : "A free directory connecting humans who set up AI agents to small businesses that need them. We don't take fees and we don't broker deals."}
            </p>
          </div>
          <FooterCol title={isDe ? 'Entdecken' : 'Discover'} links={isDe ? [
            ['Entdecken', `${p}/browse`],
            ['Workflows', `${p}/browse`],
            ['Blog', `${p}/blog`],
          ] : [
            ['Browse', `/browse`],
            ['Workflows', `/browse`],
            ['Blog', `/blog`],
          ]} />
          <FooterCol title={isDe ? 'Listen' : 'Get listed'} links={isDe ? [
            ['Für Anbieter', `${p}/for-operators`],
            ['Für Unternehmen', `${p}/for-companies`],
            ['Auf die Warteliste', '/waitlist?side=operator'],
          ] : [
            ['For operators', '/for-operators'],
            ['For companies', '/for-companies'],
            ['Join waitlist', '/waitlist?side=operator'],
          ]} />
          <FooterCol title={isDe ? 'Rechtliches' : 'Legal'} links={isDe ? [
            ['Impressum', `${p}/imprint`],
            ['Datenschutz', `${p}/privacy`],
            ['AGB', `${p}/terms`],
          ] : [
            ['Imprint', '/imprint'],
            ['Privacy', '/privacy'],
            ['Terms', '/terms'],
          ]} />
          <FooterCol title={isDe ? 'Sprache' : 'Language'} links={[
            ['English', '/'],
            ['Deutsch', '/de/'],
            ['RSS', `${p}/rss.xml`],
          ]} />
        </div>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', paddingTop: 24, borderTop: '1px solid var(--line)', fontSize: 12 }}>
          <span className="mono" style={{ color: 'var(--ink-4)', letterSpacing: '0.05em' }}>© 2026 HUMANSRUNIT · NO FEES · NO BROKERING · YOU OWN YOUR DEAL</span>
          <span className="mono" style={{ color: 'var(--ink-4)' }}>v0.1</span>
        </div>
      </div>
    </footer>
  );
}

function FooterCol({ title, links }) {
  return (
    <div>
      <div className="kicker" style={{ marginBottom: 14 }}>{title}</div>
      <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'grid', gap: 8 }}>
        {links.map(([label, href], i) => (
          <li key={i}>
            <a
              href={href}
              style={{ color: 'var(--ink-2)', fontSize: 13, textDecoration: 'none' }}
              onMouseEnter={e => e.currentTarget.style.color = 'var(--ink)'}
              onMouseLeave={e => e.currentTarget.style.color = 'var(--ink-2)'}
            >{label}</a>
          </li>
        ))}
      </ul>
    </div>
  );
}

function Tag({ children, accent, solid, mono }) {
  const cls = ['tag'];
  if (accent) cls.push('tag-accent');
  if (solid) cls.push('tag-solid');
  return <span className={cls.join(' ')} style={mono ? { fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.04em' } : null}>{children}</span>;
}

function Avatar({ initials, size = 40 }) {
  return <div className="avatar" style={{ width: size, height: size, fontSize: size * 0.36 }}>{initials}</div>;
}

function StatusDot({ status }) {
  return <span className={`status-dot ${status}`} />;
}

function Kicker({ children, num }) {
  return (
    <div className="kicker" style={{ display: 'inline-flex', alignItems: 'center', gap: 10 }}>
      {num && <span style={{ color: 'var(--accent)' }}>{num}</span>}
      <span>{children}</span>
    </div>
  );
}

// Simple inline SVG icons (geometric)
const Icon = {
  arrow: (props) => <svg viewBox="0 0 16 16" width="14" height="14" fill="none" {...props}><path d="M3 8h10m-4-4 4 4-4 4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="square"/></svg>,
  search: (props) => <svg viewBox="0 0 16 16" width="14" height="14" fill="none" {...props}><circle cx="7" cy="7" r="4.5" stroke="currentColor" strokeWidth="1.5"/><path d="m11 11 3 3" stroke="currentColor" strokeWidth="1.5" strokeLinecap="square"/></svg>,
  filter: (props) => <svg viewBox="0 0 16 16" width="14" height="14" fill="none" {...props}><path d="M2 4h12M4 8h8M6 12h4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="square"/></svg>,
  check: (props) => <svg viewBox="0 0 16 16" width="14" height="14" fill="none" {...props}><path d="m3 8 3 3 7-7" stroke="currentColor" strokeWidth="1.5" strokeLinecap="square" strokeLinejoin="miter"/></svg>,
  pin: (props) => <svg viewBox="0 0 16 16" width="12" height="12" fill="none" {...props}><circle cx="8" cy="6.5" r="2.5" stroke="currentColor" strokeWidth="1.4"/><path d="M8 9v5" stroke="currentColor" strokeWidth="1.4" strokeLinecap="square"/></svg>,
  clock: (props) => <svg viewBox="0 0 16 16" width="12" height="12" fill="none" {...props}><circle cx="8" cy="8" r="6" stroke="currentColor" strokeWidth="1.4"/><path d="M8 4.5V8l2.5 1.5" stroke="currentColor" strokeWidth="1.4" strokeLinecap="square"/></svg>,
  star: (props) => <svg viewBox="0 0 16 16" width="12" height="12" fill="currentColor" {...props}><path d="m8 1.5 1.9 4 4.4.6-3.2 3.1.8 4.4L8 11.5 4.1 13.6l.8-4.4L1.7 6.1l4.4-.6z"/></svg>,
};

Object.assign(window, { Logo, Nav, Footer, FooterCol, Tag, Avatar, StatusDot, Kicker, Icon });