// Shared chrome — Header, Footer, StatusStrip
// Used across every page. Keeps them in sync.

// Firmhound wordmark — inline SVG dog icon + Instrument Serif text
// Dog icon adapts fill to theme; text inherits page font.
const HoundIcon = ({ size = 32, fill }) => (
  <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="88 168 55 42" style={{ display: 'block' }}>
    <path fill={fill} d="M 113.253906 170.726562 C 116.585938 170.574219 121.824219 171.125 124.089844 173.890625 C 124.371094 174.234375 124.6875 174.738281 124.914062 175.125 C 125.632812 176.402344 126.511719 177.183594 127.894531 177.699219 C 130.210938 178.5625 132.679688 179.003906 135.117188 179.367188 C 136.109375 179.515625 137.304688 179.589844 137.363281 180.847656 C 137.414062 182.011719 136.929688 182.671875 136.445312 183.660156 C 136.320312 183.910156 136.300781 184.441406 136.222656 184.71875 C 135.976562 185.832031 135.59375 186.929688 134.789062 187.769531 C 132.207031 190.523438 127.683594 189.589844 124.316406 189.746094 C 121.699219 189.863281 119.472656 190.726562 117.679688 192.707031 C 115.429688 195.191406 114.457031 199.007812 114.152344 202.273438 C 114.054688 203.308594 114.074219 204.316406 114.125 205.347656 C 108.371094 204.238281 102.882812 202.015625 97.976562 198.804688 C 96.589844 197.90625 95.585938 197.132812 94.273438 196.183594 C 95.5 194.441406 96.304688 193.171875 97.253906 191.238281 C 97.863281 190.023438 98.664062 187.914062 98.9375 186.578125 C 99.839844 187.578125 100.800781 188.457031 101.835938 189.332031 C 103.566406 190.800781 105.585938 192.453125 107.929688 192.6875 C 110.070312 192.902344 111.671875 191.367188 112.261719 189.40625 C 113.445312 185.476562 111.257812 181.816406 110.492188 178.054688 C 110.195312 176.453125 110.273438 174.832031 110.453125 173.222656 C 110.472656 172.816406 110.492188 172.476562 110.117188 172.234375 C 109.644531 171.925781 109.105469 172.324219 109.023438 172.835938 C 108.65625 175.210938 108.761719 177.765625 109.441406 180.074219 C 110.296875 182.976562 112.320312 187.578125 109.957031 190.265625 C 109.535156 190.734375 108.945312 191.015625 108.316406 191.046875 C 106.042969 191.160156 103.027344 188.417969 101.425781 186.988281 C 100.535156 186.191406 98.511719 184.328125 98.582031 183.128906 C 98.726562 180.566406 101.273438 177.398438 102.894531 175.5625 C 105.753906 172.320312 108.988281 170.902344 113.253906 170.726562 Z M 120.726562 175.859375 C 121.425781 175.78125 122.058594 176.285156 122.140625 176.984375 C 122.21875 177.683594 121.71875 178.316406 121.019531 178.398438 C 120.320312 178.480469 119.683594 177.976562 119.601562 177.277344 C 119.519531 176.574219 120.023438 175.9375 120.726562 175.859375 Z M 120.726562 175.859375" fillOpacity="1" fillRule="evenodd"/>
  </svg>
);

const HoundLockup = ({ size = 32 }) => {
  const theme = document.documentElement.getAttribute('data-theme') || 'dark';
  const [currentTheme, setTheme] = React.useState(theme);

  React.useEffect(() => {
    const obs = new MutationObserver(() => {
      const t = document.documentElement.getAttribute('data-theme') || 'dark';
      setTheme(t);
    });
    obs.observe(document.documentElement, { attributes: true, attributeFilter: ['data-theme'] });
    return () => obs.disconnect();
  }, []);

  const iconFill = currentTheme === 'light' ? '#1b1b1b' : '#E2E8F0';
  const textColor = currentTheme === 'light' ? '#1c1917' : '#FFFFFF';

  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: size * 0.15 }}>
      <HoundIcon size={size} fill={iconFill} />
      <span style={{
        fontFamily: '"Instrument Serif", Georgia, serif',
        fontSize: size * 0.74,
        color: textColor,
        letterSpacing: '0.01em',
        lineHeight: 1,
      }}>Firmhound</span>
    </div>
  );
};

const FH_NAV = [
  { label: 'Portfolio',  href: 'index.html#portfolio' },
  { label: 'Use cases',  href: 'use-cases.html' },
  { label: 'API',        href: 'api.html' },
  { label: 'MCP',        href: 'mcp.html' },
  { label: 'Pricing',    href: 'pricing.html' },
  { label: 'Docs',       href: 'docs.html' },
  { label: 'About',      href: 'about.html' },
];

const ThemeToggle = () => {
  const [theme, setTheme] = React.useState(() => {
    if (typeof document === 'undefined') return 'dark';
    return document.documentElement.getAttribute('data-theme') || 'dark';
  });
  const flip = () => {
    const next = theme === 'dark' ? 'light' : 'dark';
    document.documentElement.setAttribute('data-theme', next);
    try { localStorage.setItem('fh-theme', next); } catch (e) {}
    setTheme(next);
  };
  return (
    <button onClick={flip} aria-label="Toggle theme" style={{
      background: 'transparent', border: `1px solid ${FH.border}`,
      color: FH.ink2, fontFamily: 'inherit', fontSize: 10, letterSpacing: '0.12em',
      padding: '2px 8px', cursor: 'pointer', display: 'inline-flex',
      alignItems: 'center', gap: 6,
    }}>
      <span style={{
        width: 8, height: 8, borderRadius: 4,
        background: theme === 'dark' ? FH.ink2 : FH.accent,
        border: `1px solid ${FH.borderHi}`,
      }} />
      {theme === 'dark' ? 'DARK' : 'LIGHT'}
    </button>
  );
};

const FHHeader = ({ active, statusLeft, statusRight }) => (
  <>
    <div style={{
      display: 'flex', justifyContent: 'space-between', alignItems: 'center',
      padding: '8px 32px', borderBottom: `1px solid ${FH.border}`,
      fontSize: 10, color: FH.ink3, letterSpacing: '0.12em',
    }}>
      <div style={{ display: 'flex', gap: 22, alignItems: 'center' }}>
        {(statusLeft || [
          <span key="api" style={{ color: FH.accent }}>● API ONLINE</span>,
          <span key="up">UPTIME 99.97%</span>,
          <span key="scrape">SCRAPE 07:17 · 19:17 UTC</span>,
          <span key="v">v 4.2.0</span>,
        ])}
      </div>
      <div style={{ display: 'flex', gap: 22, alignItems: 'center' }}>
        {(statusRight || [
          <a key="status" href="status.html" style={{textDecoration:'none', color:'inherit'}}>STATUS</a>,
          <a key="cl" href="changelog.html" style={{textDecoration:'none', color:'inherit'}}>CHANGELOG</a>,
          <a key="sec" href="security.html" style={{textDecoration:'none', color:'inherit'}}>SECURITY</a>,
          <a key="blog" href="blog.html" style={{textDecoration:'none', color:'inherit'}}>BLOG</a>,
          <span key="api">api.firmhound.com</span>,
        ])}
        <ThemeToggle />
      </div>
    </div>
    <div style={{
      display: 'flex', justifyContent: 'space-between', alignItems: 'center',
      padding: '20px 32px', borderBottom: `1px solid ${FH.border}`,
    }}>
      <a href="index.html" style={{ textDecoration: 'none' }}>
        <HoundLockup size={32} />
      </a>
      <div style={{ display: 'flex', gap: 32, fontSize: 12, color: FH.ink2, letterSpacing: '0.06em' }}>
        {FH_NAV.map(n => (
          <a key={n.label} href={n.href} style={{
            color: active === n.label ? FH.ink : 'inherit',
            textDecoration: 'none',
            borderBottom: active === n.label ? `1px solid ${FH.accent}` : 'none',
            paddingBottom: 2,
          }}>{n.label}</a>
        ))}
      </div>
      <div style={{ display: 'flex', gap: 12, alignItems: 'center' }}>
        <a href="dashboard.html" style={{ fontSize: 12, color: FH.ink2, cursor: 'pointer', textDecoration: 'none' }}>Sign in</a>
        <a href="pricing.html" style={{
          fontSize: 12, padding: '8px 14px',
          border: `1px solid ${FH.accent}`, color: FH.accent,
          letterSpacing: '0.08em', cursor: 'pointer', textDecoration: 'none',
        }}>
          GET A KEY ↗
        </a>
      </div>
    </div>
  </>
);

const FHFooter = () => (
  <>
    <div style={{
      padding: '40px 32px 22px',
      borderTop: `1px solid ${FH.border}`,
      display: 'grid', gridTemplateColumns: '1.5fr 1fr 1fr 1fr', gap: 32,
    }}>
      <div>
        <HoundLockup size={28} />
        <div style={{ fontSize: 11, color: FH.ink3, marginTop: 14, lineHeight: 1.6, maxWidth: 280 }}>
          MCP data intelligence for agent builders.<br/>
          Government & SEC sources, structured.
        </div>
      </div>
      {[
        ['PRODUCT', [
          ['Edgar Watch', 'product-edgarwatch.html'],
          ['SEC Numbers', 'product-secnumbers.html'],
          ['Federal Register', 'product-fedregwatch.html'],
          ['Senator Trades', 'product-senatortrades.html'],
          ['+ 9 more', 'index.html#portfolio'],
        ]],
        ['DEVELOPERS', [
          ['Quickstart', 'docs.html#quickstart'],
          ['MCP servers', 'mcp.html'],
          ['API reference', 'api.html'],
          ['Status', 'status.html'],
          ['Changelog', 'changelog.html'],
        ]],
        ['COMPANY', [
          ['About', 'about.html'],
          ['Use cases', 'use-cases.html'],
          ['Security', 'security.html'],
          ['Pricing', 'pricing.html'],
          ['Blog', 'blog.html'],
        ]],
      ].map(([h, items]) => (
        <div key={h}>
          <div style={{ fontSize: 10, color: FH.ink3, letterSpacing: '0.16em', marginBottom: 12 }}>{h}</div>
          {items.map(([label, href]) => (
            <a key={label} href={href} style={{
              display: 'block', fontSize: 12, color: FH.ink2,
              marginBottom: 6, textDecoration: 'none',
            }}>{label}</a>
          ))}
        </div>
      ))}
    </div>
    <div style={{
      padding: '14px 32px', borderTop: `1px solid ${FH.border}`,
      display: 'flex', justifyContent: 'space-between',
      fontSize: 10, color: FH.ink3, letterSpacing: '0.1em',
    }}>
      <span>© 2026 FIRMHOUND · MCP DATA INTELLIGENCE</span>
      <span>SET IN INSTRUMENT SERIF & JETBRAINS MONO</span>
    </div>
  </>
);

const PageShell = ({ active, children }) => (
  <div style={{
    minHeight: '100vh', background: FH.bg, color: FH.ink,
    fontFamily: '"JetBrains Mono", monospace',
  }}>
    <FHHeader active={active} />
    {children}
    <FHFooter />
  </div>
);

// Reusable section header
const SectionHead = ({ kicker, title, em, sub, right }) => (
  <div style={{
    padding: '52px 32px 32px',
    display: 'grid', gridTemplateColumns: right ? '1.5fr 1fr' : '1fr',
    gap: 40, alignItems: 'end',
    borderBottom: `1px solid ${FH.border}`,
  }}>
    <div>
      {kicker && <div style={{ fontSize: 11, color: FH.ink3, letterSpacing: '0.18em', marginBottom: 18 }}>◆ {kicker}</div>}
      <div style={{
        fontFamily: '"Instrument Serif", Georgia, serif',
        fontSize: 88, lineHeight: 0.96, letterSpacing: '-0.025em', color: FH.ink,
      }}>
        {title}{em && <> <em style={{ color: FH.accent }}>{em}</em></>}
      </div>
      {sub && <div style={{ fontSize: 15, color: FH.ink2, lineHeight: 1.55, maxWidth: 620, marginTop: 22 }}>{sub}</div>}
    </div>
    {right && <div style={{ fontSize: 13, color: FH.ink2, lineHeight: 1.55, paddingBottom: 14 }}>{right}</div>}
  </div>
);

Object.assign(window, { FHHeader, FHFooter, PageShell, SectionHead, FH_NAV });