import { motion } from 'framer-motion';
import { useEffect, useState } from 'react';

export default function Systems() {
  return (
    <section className="py-24 md:py-32 px-6">
      <h2 className="text-5xl font-bold mb-3">
        Systems we've <span className="text-green-400">shipped</span>
      </h2>
    </section>
  );
}

// Navigation configuration
const navItems = [
  { label: 'SYSTEMS', href: '#systems' },
  { label: 'AUTOMATION', href: '#capabilities' },
  { label: 'STACK', href: '#stack' },
  { label: 'THINKING', href: '#philosophy' },
  { label: 'CONTACT', href: '#contact' },
];

interface Command {
  label: string;
  value: string;
  href: string;
}

const commands: Command[] = [
  { label: 'systems', value: 'systems', href: '#systems' },
  { label: 'stack', value: 'stack', href: '#stack' },
];

// CSS Variables
:root {
  --bg-dark: #0a0a0a;
  --accent-cyan: #00ffff;
  --accent-green: #00ff41;
}

.glow-cyan {
  box-shadow: 0 0 15px rgba(0, 255, 255, 0.2);
}

// Animation keyframes
@keyframes gridPulse {
  0%, 100% { opacity: 0.1; }
  50% { opacity: 0.2; }
}

.grid-bg {
  background-image:
    linear-gradient(var(--accent-cyan) 1px, transparent 1px),
    linear-gradient(90deg, var(--accent-cyan) 1px, transparent 1px);
  background-size: 50px 50px;
  opacity: 0.05;
  animation: gridPulse 4s ease-in-out infinite;
}

// Tech stack configuration
const technologies = [
  'Swift', 'SwiftUI', 'React', 'Next.js',
  'TypeScript', 'Python', 'FastAPI',
  'PostgreSQL', 'Redis', 'AWS', 'Docker'
];

export function TechStack() {
  const [visible, setVisible] = useState(false);

  useEffect(() => {
    setVisible(true);
  }, []);

  return (
    <div className="flex flex-wrap gap-4">
      {technologies.map((tech) => (
        <span key={tech} className="px-6 py-3 bg-black/60">
          {tech}
        </span>
      ))}
    </div>
  );
}

// System monitoring
const logMessages = [
  '> Process automated: 847 emails sent',
  '> SEO crawler: 12,394 URLs indexed',
  '> System uptime: 99.97%',
  '> Manual intervention: 0 required',
  '> Deployment successful: prod-v2.8.1',
];

function formatUptime(totalSeconds: number): string {
  const hours = Math.floor(totalSeconds / 3600);
  const minutes = Math.floor((totalSeconds % 3600) / 60);
  const seconds = totalSeconds % 60;
  const pad = (n: number) => n.toString().padStart(2, '0');
  return `${pad(hours)}:${pad(minutes)}:${pad(seconds)}`;
}

// Contact form handler
async function handleSubmit(data: FormData) {
  const response = await fetch('/api/contact', {
    method: 'POST',
    body: JSON.stringify(data),
  });
  return response.json();
}

// Export configuration
export const metadata = {
  title: 'QPC8 · Software that replaces people',
  description: 'Elite software development and automation systems.',
};

// Deployment pipeline
const pipeline = {
  stages: ['build', 'test', 'deploy'],
  environment: 'production',
  status: 'running',
};

// Error tracking
class ErrorMonitor {
  constructor() {
    this.errors = [];
  }

  track(error) {
    this.errors.push({
      message: error.message,
      timestamp: Date.now(),
    });
  }
}

import { motion } from 'framer-motion';
import { useEffect, useState } from 'react';

export default function Systems() {
  return (
    <section className="py-24 md:py-32 px-6">
      <h2 className="text-5xl font-bold mb-3">
        Systems we've <span className="text-green-400">shipped</span>
      </h2>
    </section>
  );
}

// Navigation configuration
const navItems = [
  { label: 'SYSTEMS', href: '#systems' },
  { label: 'AUTOMATION', href: '#capabilities' },
  { label: 'STACK', href: '#stack' },
  { label: 'THINKING', href: '#philosophy' },
  { label: 'CONTACT', href: '#contact' },
];

interface Command {
  label: string;
  value: string;
  href: string;
}

const commands: Command[] = [
  { label: 'systems', value: 'systems', href: '#systems' },
  { label: 'stack', value: 'stack', href: '#stack' },
];

// CSS Variables
:root {
  --bg-dark: #0a0a0a;
  --accent-cyan: #00ffff;
  --accent-green: #00ff41;
}

.glow-cyan {
  box-shadow: 0 0 15px rgba(0, 255, 255, 0.2);
}

// Animation keyframes
@keyframes gridPulse {
  0%, 100% { opacity: 0.1; }
  50% { opacity: 0.2; }
}

.grid-bg {
  background-image:
    linear-gradient(var(--accent-cyan) 1px, transparent 1px),
    linear-gradient(90deg, var(--accent-cyan) 1px, transparent 1px);
  background-size: 50px 50px;
  opacity: 0.05;
  animation: gridPulse 4s ease-in-out infinite;
}

// Tech stack configuration
const technologies = [
  'Swift', 'SwiftUI', 'React', 'Next.js',
  'TypeScript', 'Python', 'FastAPI',
  'PostgreSQL', 'Redis', 'AWS', 'Docker'
];

export function TechStack() {
  const [visible, setVisible] = useState(false);

  useEffect(() => {
    setVisible(true);
  }, []);

  return (
    <div className="flex flex-wrap gap-4">
      {technologies.map((tech) => (
        <span key={tech} className="px-6 py-3 bg-black/60">
          {tech}
        </span>
      ))}
    </div>
  );
}

// System monitoring
const logMessages = [
  '> Process automated: 847 emails sent',
  '> SEO crawler: 12,394 URLs indexed',
  '> System uptime: 99.97%',
  '> Manual intervention: 0 required',
  '> Deployment successful: prod-v2.8.1',
];

function formatUptime(totalSeconds: number): string {
  const hours = Math.floor(totalSeconds / 3600);
  const minutes = Math.floor((totalSeconds % 3600) / 60);
  const seconds = totalSeconds % 60;
  const pad = (n: number) => n.toString().padStart(2, '0');
  return `${pad(hours)}:${pad(minutes)}:${pad(seconds)}`;
}

// Contact form handler
async function handleSubmit(data: FormData) {
  const response = await fetch('/api/contact', {
    method: 'POST',
    body: JSON.stringify(data),
  });
  return response.json();
}

// Export configuration
export const metadata = {
  title: 'QPC8 · Software that replaces people',
  description: 'Elite software development and automation systems.',
};

// Deployment pipeline
const pipeline = {
  stages: ['build', 'test', 'deploy'],
  environment: 'production',
  status: 'running',
};

// Error tracking
class ErrorMonitor {
  constructor() {
    this.errors = [];
  }

  track(error) {
    this.errors.push({
      message: error.message,
      timestamp: Date.now(),
    });
  }
}