// Page chrome: nav, footer, ticker, CTA line.

function Nav() {
  return (
    <div style={{
      display: 'flex', justifyContent: 'space-between', alignItems: 'baseline',
      padding: 'var(--space-5) var(--page-pad-x) var(--space-3)',
      borderBottom: '1px solid rgba(var(--fg-rgb), 0.08)',
      gap: 'var(--space-4)', flexWrap: 'wrap',
    }}>
      <div style={{
        display: 'flex', alignItems: 'baseline', gap: 14, flexWrap: 'wrap',
        minWidth: 0,
      }}>
        <div style={{
          fontFamily: 'var(--font-serif)', fontSize: 19,
          letterSpacing: '-0.01em', whiteSpace: 'nowrap',
        }}>
          Carlos Di Matteo
        </div>
        <span style={{ opacity: 0.25, fontFamily: 'var(--font-mono)', fontSize: 10 }}>—</span>
        {/* Each chunk is its own nowrap span so the line wraps between
            chunks but never inside one — keeps "FOUNDING-ENGINEER TYPE"
            from breaking at the hyphen on narrow viewports. */}
        <div style={{
          fontFamily: 'var(--font-mono)', fontSize: 9.5, letterSpacing: '0.18em',
          opacity: 0.55,
          display: 'flex', flexWrap: 'wrap', columnGap: 8, rowGap: 2,
          alignItems: 'baseline',
        }}>
          <span style={{ whiteSpace: 'nowrap' }}>FULLSTACK</span>
          <span style={{ opacity: 0.5 }}>·</span>
          <span style={{ whiteSpace: 'nowrap' }}>PROTOCOL ENGINEER</span>
          <span style={{ opacity: 0.5 }}>·</span>
          <span style={{ whiteSpace: 'nowrap' }}>FOUNDING-ENGINEER TYPE</span>
        </div>
      </div>
      <div style={{
        fontFamily: 'var(--font-mono)', fontSize: 9.5, letterSpacing: '0.18em',
        opacity: 0.55, whiteSpace: 'nowrap',
      }}>
        BOGOTÁ · REMOTE, ANYWHERE
      </div>
    </div>
  );
}

function CTALine() {
  return (
    <div style={{
      fontFamily: 'var(--font-mono)',
      display: 'flex', flexDirection: 'column', gap: 14,
    }}>
      {/* Eyebrow over the actual CTA: small, accent, all caps. The links
          beneath carry the visual weight as the conversion target. */}
      <div style={{
        fontSize: 11, letterSpacing: '0.22em',
        color: 'var(--accent)', fontWeight: 600,
        opacity: 0.9, lineHeight: 1.2,
      }}>
        THE MATH CHECKS OUT → REACH OUT
      </div>
      <div style={{
        display: 'flex', gap: 18, alignItems: 'baseline',
        fontSize: 18, letterSpacing: '0.02em', flexWrap: 'wrap',
      }}>
        <a href="https://calendly.com/carlosdimatteo/45min-meet" target="_blank" rel="noopener noreferrer"
           style={{ color: 'var(--fg)', textDecoration: 'none' }}>
          calendly <span style={{ color: 'var(--accent)' }}>↗</span>
        </a>
        <span style={{ opacity: 0.3 }}>·</span>
        <a href="https://t.me/carlosdimatteo" target="_blank" rel="noopener noreferrer"
           style={{ color: 'var(--fg)', textDecoration: 'none' }}>
          telegram <span style={{ color: 'var(--accent)' }}>↗</span>
        </a>
        <span style={{ opacity: 0.3 }}>·</span>
        <a href="https://github.com/carlosdimatteo" target="_blank" rel="noopener noreferrer"
           style={{ color: 'var(--fg)', textDecoration: 'none' }}>
          github <span style={{ color: 'var(--accent)' }}>↗</span>
        </a>
      </div>
    </div>
  );
}

function Footer() {
  // Layout (driven by .footer + .footer-* classes in responsive.css):
  //   Desktop: copyright | links | verifiable — all on one line.
  //   Mobile:  links spanning the top row, copyright + verifiable split
  //            below as left + right on a single line.
  return (
    <div
      className="footer"
      style={{
        padding: 'var(--space-3) var(--page-pad-x)',
        borderTop: '1px solid rgba(var(--fg-rgb), 0.09)',
        fontFamily: 'var(--font-mono)', fontSize: 9, letterSpacing: '0.16em',
      }}
    >
      <span className="footer-copyright"
            style={{ whiteSpace: 'nowrap', opacity: 0.5 }}>
        © 2026 · CARLOS DI MATTEO
      </span>
      <div className="footer-links"
           style={{
             display: 'flex', gap: 12, alignItems: 'center',
             whiteSpace: 'nowrap', letterSpacing: '0.08em',
           }}>
        <a href="https://calendly.com/carlosdimatteo/45min-meet" target="_blank" rel="noopener noreferrer"
           style={{ color: 'var(--fg)', textDecoration: 'none', opacity: 0.7 }}>
          CALENDLY <span style={{ color: 'var(--accent)' }}>↗</span>
        </a>
        <span style={{ opacity: 0.3 }}>·</span>
        <a href="https://t.me/carlosdimatteo" target="_blank" rel="noopener noreferrer"
           style={{ color: 'var(--fg)', textDecoration: 'none', opacity: 0.7 }}>
          TELEGRAM <span style={{ color: 'var(--accent)' }}>↗</span>
        </a>
        <span style={{ opacity: 0.3 }}>·</span>
        <a href="https://github.com/carlosdimatteo" target="_blank" rel="noopener noreferrer"
           style={{ color: 'var(--fg)', textDecoration: 'none', opacity: 0.7 }}>
          GITHUB <span style={{ color: 'var(--accent)' }}>↗</span>
        </a>
      </div>
      <span className="footer-verifiable"
            style={{ whiteSpace: 'nowrap', opacity: 0.5 }}>
        ALL NUMBERS VERIFIABLE
      </span>
    </div>
  );
}

// Compact mode: rendered inside the calculator card. Truncates with ellipsis,
// left-aligned, smaller. Default mode: free-floating, centered. Either way,
// the rotation includes a static BASE attribution so the calculator's data
// source is always one rotation away.
function Ticker({ interval = 7000, compact = false }) {
  const stats = React.useMemo(() => {
    // Build the two pools, then interleave 2 industry → 1 personal so
    // visitors see a personal stat roughly once every 3 ticks instead of
    // having to watch every source go by before any personal lands.
    const industry = [{
      text: '36.5M professional developers worldwide',
      source: 'SlashData Q1 2025',
      kind: 'base',
    }];
    window.RARE_FILTERS.forEach((f) => {
      f.tooltip.sources.forEach((s) => industry.push({
        text: s.stat, source: s.name, kind: 'industry',
      }));
    });
    const personal = (window.PERSONAL_FACTS || []).map(p => ({
      text: p.text, source: 'Carlos · own records', kind: 'personal',
    }));

    const out = [];
    let pi = 0;
    industry.forEach((row, i) => {
      out.push(row);
      if ((i + 1) % 2 === 0 && pi < personal.length) {
        out.push(personal[pi++]);
      }
    });
    while (pi < personal.length) out.push(personal[pi++]);
    return out;
  }, []);
  const [idx, setIdx] = React.useState(0);
  const [fading, setFading] = React.useState(false);
  React.useEffect(() => {
    const id = setInterval(() => {
      setFading(true);
      setTimeout(() => {
        setIdx((i) => (i + 1) % stats.length);
        setFading(false);
      }, 700);
    }, interval);
    return () => clearInterval(id);
  }, [interval, stats.length]);
  const cur = stats[idx];
  const isPersonal = cur.kind === 'personal';
  const textSize = compact ? 9.5 : 12;
  const sourceSize = compact ? 8.5 : 10;
  return (
    <div style={{
      fontFamily: 'var(--font-mono)',
      padding: compact ? '0' : '8px 14px',
      display: 'flex', alignItems: 'center',
      justifyContent: compact ? 'flex-start' : 'center',
      gap: 14, minHeight: compact ? 16 : 24, overflow: 'hidden',
    }}>
      <div style={{
        display: 'inline-flex', alignItems: 'baseline', gap: 10,
        opacity: fading ? 0 : (compact ? 0.55 : 0.6),
        transition: 'opacity 0.7s ease',
        width: compact ? '100%' : 'auto',
        maxWidth: '100%',
      }}>
        <span style={{
          fontSize: textSize, letterSpacing: '0.02em',
          whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis',
          color: isPersonal ? 'var(--accent)' : 'inherit',
          opacity: isPersonal ? 0.95 : 1,
          flex: compact ? '0 1 auto' : '0 1 auto',
          minWidth: 0,
        }}>
          {cur.text}
        </span>
        <span style={{
          fontSize: sourceSize, letterSpacing: '0.18em', flexShrink: 0,
          color: isPersonal ? 'var(--accent)' : 'inherit',
          opacity: 0.7,
        }}>
          — {cur.source.toUpperCase()}
        </span>
      </div>
    </div>
  );
}

function GlobalKeyframes() {
  // Empty — keyframes live in styles/keyframes.css now.
  return null;
}

Object.assign(window, { Nav, Footer, CTALine, Ticker, GlobalKeyframes });