// Shared components for WithDev landing variations

const WithDevLogo = ({ size = 28, color = '#fff', accent = '#7c5cff' }) => (
  <div style={{ display: 'flex', alignItems: 'center', gap: 10, fontFamily: "'Geist', 'Inter', sans-serif", fontSize: size * 0.62, fontWeight: 700, color, letterSpacing: '-0.02em' }}>
    <svg width={size} height={size} viewBox="0 0 32 32" fill="none">
      <rect width="32" height="32" rx="8" fill={color === '#fff' ? '#fff' : '#0a0a0a'} />
      <path d="M7 11 L11 21 L13.5 14.5 L16 21 L18.5 14.5 L21 21 L25 11" stroke={accent} strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" fill="none" />
    </svg>
    <span>WithDev<span style={{ color: accent }}>.</span></span>
  </div>
);

// Striped placeholder for imagery
const Placeholder = ({ label = 'image', w = '100%', h = 200, dark = true, radius = 12, style = {} }) => {
  const fg = dark ? 'rgba(255,255,255,0.08)' : 'rgba(0,0,0,0.08)';
  const bg = dark ? '#141414' : '#f0f0ec';
  const text = dark ? 'rgba(255,255,255,0.45)' : 'rgba(0,0,0,0.45)';
  return (
    <div style={{
      width: w, height: h, borderRadius: radius,
      background: `repeating-linear-gradient(135deg, ${bg} 0 12px, ${fg} 12px 13px)`,
      border: dark ? '1px solid rgba(255,255,255,0.08)' : '1px solid rgba(0,0,0,0.08)',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      fontFamily: "'JetBrains Mono', monospace", fontSize: 11, color: text,
      letterSpacing: '0.08em', textTransform: 'uppercase',
      ...style
    }}>
      {label}
    </div>
  );
};

// Tiny dot indicator
const Dot = ({ color = '#7c5cff', size = 6 }) => (
  <span style={{ display: 'inline-block', width: size, height: size, borderRadius: '50%', background: color }} />
);

// Arrow icon
const ArrowIcon = ({ size = 14, color = 'currentColor' }) => (
  <svg width={size} height={size} viewBox="0 0 16 16" fill="none">
    <path d="M3 8h10M9 4l4 4-4 4" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
  </svg>
);

// Shared cases data
const CASES = [
  { client: 'Norven Logística', sector: 'Logística', work: 'Plataforma SaaS de rastreio', year: '2025', metric: '+340% throughput' },
  { client: 'Casa Botânica', sector: 'E-commerce', work: 'Loja headless + integrações', year: '2025', metric: '2.1x conversão' },
  { client: 'Mercato Pro', sector: 'Fintech', work: 'App mobile de pagamentos', year: '2024', metric: '180k MAU' },
  { client: 'Atelier Verde', sector: 'Sustentabilidade', work: 'Site institucional + CMS', year: '2024', metric: '0.4s LCP' },
];

const SERVICES = [
  { n: '01', title: 'Sites institucionais', desc: 'Presença digital que converte. Performance, SEO e identidade visual sólidos.' },
  { n: '02', title: 'E-commerce', desc: 'Lojas headless com checkout otimizado e integrações ERP/marketplace.' },
  { n: '03', title: 'Apps mobile', desc: 'iOS e Android nativos ou cross-platform. Do MVP ao app de escala.' },
  { n: '04', title: 'Sistemas web', desc: 'Painéis, ERPs e SaaS sob medida. Arquitetura escalável e bem desenhada.' },
  { n: '05', title: 'Integrações', desc: 'APIs, webhooks, gateways e middleware. Sistemas que conversam de verdade.' },
  { n: '06', title: 'IA & Automações', desc: 'Agentes, RAG, workflows e automações que tiram o trabalho repetitivo do caminho.' },
];

Object.assign(window, { WithDevLogo, Placeholder, Dot, ArrowIcon, CASES, SERVICES });