// Shared V5-style background + minimal helpers for V6-V10

// The "V5 background" — dark base + dot grid + radial purple glow
const OrbitalBg = ({ glowPosition = '50% 0%', glowSize = 800, gridSize = 64, gridOpacity = 0.03, children, style = {} }) => (
  <div style={{
    position: 'relative',
    background: '#050505',
    overflow: 'hidden',
    ...style,
  }}>
    {/* Dot grid */}
    <div style={{
      position: 'absolute', inset: 0,
      backgroundImage: `radial-gradient(circle at 1px 1px, rgba(255,255,255,${gridOpacity}) 1px, transparent 0)`,
      backgroundSize: `${gridSize}px ${gridSize}px`,
      pointerEvents: 'none',
    }} />
    {/* Glow */}
    <div style={{
      position: 'absolute',
      top: `calc(${glowPosition.split(' ')[1]} - ${glowSize / 2}px)`,
      left: `calc(${glowPosition.split(' ')[0]} - ${glowSize / 2}px)`,
      width: glowSize, height: glowSize,
      background: 'radial-gradient(circle, rgba(124,92,255,0.35) 0%, rgba(124,92,255,0.06) 35%, transparent 65%)',
      pointerEvents: 'none',
      filter: 'blur(20px)',
    }} />
    <div style={{ position: 'relative', zIndex: 1 }}>{children}</div>
  </div>
);

// Minimal nav — just logo + small links + button.
// Pass links=[] to hide links, cta={null} to hide CTA button.
const MinimalNav = ({
  pill = false,
  logo,
  links = ['Serviços', 'Trabalhos', 'Contato'],
  cta = 'Iniciar projeto',
}) => {
  const hasLinks = Array.isArray(links) && links.length > 0;
  return (
    <nav className="wd-nav" style={{
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      padding: '24px 56px', position: 'relative', zIndex: 2,
    }}>
      {logo || <WithDevLogo size={26} />}
      {hasLinks ? (
        pill ? (
          <div style={{
            display: 'flex', gap: 2, fontSize: 13, color: 'rgba(255,255,255,0.7)',
            background: 'rgba(255,255,255,0.04)', backdropFilter: 'blur(20px)',
            padding: 5, borderRadius: 999, border: '1px solid rgba(255,255,255,0.08)',
          }}>
            {links.map((l, i) => (
              <span key={i} style={{ padding: '7px 14px', borderRadius: 999 }}>{l}</span>
            ))}
          </div>
        ) : (
          <div style={{ display: 'flex', gap: 28, fontSize: 13, color: 'rgba(255,255,255,0.65)' }}>
            {links.map((l, i) => (
              <span key={i}>{l}</span>
            ))}
          </div>
        )
      ) : <span />}
      {cta ? (
        <a style={{
          padding: '10px 16px', background: '#fff', color: '#0a0a0a',
          borderRadius: 999, fontSize: 13, fontWeight: 500,
        }}>
          {cta}
        </a>
      ) : <span />}
    </nav>
  );
};

// Minimal footer
const MinimalFooter = ({ logo }) => (
  <footer className="wd-footer" style={{
    padding: '32px 56px', borderTop: '1px solid rgba(255,255,255,0.06)',
    display: 'flex', justifyContent: 'space-between', alignItems: 'center',
    fontSize: 12, color: 'rgba(255,255,255,0.4)', position: 'relative', zIndex: 2,
  }}>
    {logo || <WithDevLogo size={20} />}
    <span>© 2026 WithDev</span>
  </footer>
);

// The core orbital visual — reused, scalable
const OrbitalCore = ({ size = 620 }) => {
  const cx = size / 2;
  const rings = [size * 0.42, size * 0.58, size * 0.74, size * 0.9];
  const coreSize = size * 0.26;
  const dots = [
    { ring: 0, a: 30, color: '#7c5cff', size: 12 },
    { ring: 0, a: 200, color: '#c4b5ff', size: 7 },
    { ring: 1, a: 100, color: '#fff', size: 9 },
    { ring: 1, a: 280, color: '#7c5cff', size: 11 },
    { ring: 2, a: 60, color: '#fff', size: 7 },
    { ring: 2, a: 170, color: '#7c5cff', size: 6 },
    { ring: 2, a: 320, color: '#c4b5ff', size: 9 },
    { ring: 3, a: 20, color: '#7c5cff', size: 7 },
    { ring: 3, a: 150, color: '#fff', size: 10 },
    { ring: 3, a: 240, color: '#c4b5ff', size: 6 },
  ];

  return (
    <div style={{ position: 'relative', width: size, height: size }}>
      {/* glow */}
      <div style={{
        position: 'absolute', inset: 0,
        background: 'radial-gradient(circle at 50% 50%, rgba(124,92,255,0.4) 0%, rgba(124,92,255,0.05) 35%, transparent 60%)',
        filter: 'blur(20px)',
      }} />
      {/* rings */}
      {rings.map((d, i) => (
        <div key={i} style={{
          position: 'absolute', top: '50%', left: '50%',
          width: d, height: d, marginLeft: -d / 2, marginTop: -d / 2,
          borderRadius: '50%', border: '1px dashed rgba(255,255,255,0.08)',
        }} />
      ))}
      {/* core */}
      <div style={{
        position: 'absolute', top: '50%', left: '50%',
        width: coreSize, height: coreSize, marginLeft: -coreSize / 2, marginTop: -coreSize / 2,
        borderRadius: '50%',
        background: 'radial-gradient(circle at 30% 30%, #fff 0%, #c4b5ff 25%, #7c5cff 60%, #3d1da8 100%)',
        boxShadow: '0 0 80px rgba(124,92,255,0.6), inset 0 -20px 40px rgba(0,0,0,0.3)',
      }}>
        <div style={{
          position: 'absolute', inset: '15%', borderRadius: '50%',
          background: 'radial-gradient(circle at 35% 30%, rgba(255,255,255,0.4), transparent 50%)',
        }} />
      </div>
      {/* dots */}
      {dots.map((p, i) => {
        const d = rings[p.ring];
        const rad = (p.a * Math.PI) / 180;
        const x = Math.cos(rad) * (d / 2) + cx - p.size / 2;
        const y = Math.sin(rad) * (d / 2) + cx - p.size / 2;
        return (
          <div key={i} style={{
            position: 'absolute', left: x, top: y,
            width: p.size, height: p.size, borderRadius: '50%',
            background: p.color, boxShadow: `0 0 12px ${p.color}`,
          }} />
        );
      })}
    </div>
  );
};

const SERVICES_SHORT = [
  'Sites', 'E-commerce', 'Apps', 'Sistemas', 'Integrações', 'IA & Automações'
];

// Checkered grid background — the "xadrez" pattern. Subtle purple glow optional.
const GridBg = ({
  gridSize = 64,
  lineOpacity = 0.06,
  grid = true,
  glow = true,
  glowPosition = '50% 0%',
  glowSize = 900,
  children,
  style = {},
}) => (
  <div style={{
    position: 'relative',
    background: '#050505',
    overflow: 'hidden',
    ...style,
  }}>
    {/* Grid lines (xadrez) */}
    {grid && (
      <div style={{
        position: 'absolute', inset: 0,
        backgroundImage: `linear-gradient(rgba(255,255,255,${lineOpacity}) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,${lineOpacity}) 1px, transparent 1px)`,
        backgroundSize: `${gridSize}px ${gridSize}px`,
        pointerEvents: 'none',
        maskImage: 'radial-gradient(ellipse 90% 70% at 50% 30%, black 40%, transparent 95%)',
        WebkitMaskImage: 'radial-gradient(ellipse 90% 70% at 50% 30%, black 40%, transparent 95%)',
      }} />
    )}
    {/* Optional purple glow */}
    {glow && (
      <div style={{
        position: 'absolute',
        top: `calc(${glowPosition.split(' ')[1]} - ${glowSize / 2}px)`,
        left: `calc(${glowPosition.split(' ')[0]} - ${glowSize / 2}px)`,
        width: glowSize, height: glowSize,
        background: 'radial-gradient(circle, rgba(124,92,255,0.22) 0%, rgba(124,92,255,0.04) 35%, transparent 65%)',
        pointerEvents: 'none',
        filter: 'blur(20px)',
      }} />
    )}
    <div style={{ position: 'relative', zIndex: 1 }}>{children}</div>
  </div>
);

// Terminal panel chrome — for client-friendly variations.
// `title` shows in the title bar, children is the content.
const TerminalChrome = ({ title = '~/withdev', children, style = {} }) => (
  <div style={{
    background: 'rgba(8,8,10,0.9)', backdropFilter: 'blur(10px)',
    border: '1px solid rgba(255,255,255,0.1)', borderRadius: 12,
    overflow: 'hidden',
    fontFamily: "'JetBrains Mono', monospace",
    ...style,
  }}>
    <div style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '11px 14px', borderBottom: '1px solid rgba(255,255,255,0.06)', background: '#0a0a0d' }}>
      <span style={{ width: 11, height: 11, borderRadius: '50%', background: '#ff5f56' }} />
      <span style={{ width: 11, height: 11, borderRadius: '50%', background: '#ffbd2e' }} />
      <span style={{ width: 11, height: 11, borderRadius: '50%', background: '#27c93f' }} />
      <span style={{ marginLeft: 14, fontSize: 12, color: 'rgba(255,255,255,0.4)' }}>{title}</span>
    </div>
    <div>{children}</div>
  </div>
);

Object.assign(window, { OrbitalBg, GridBg, MinimalNav, MinimalFooter, OrbitalCore, SERVICES_SHORT, TerminalChrome });