import React from 'react';

const GITHUB_URL = 'https://github.com/Gaurav711cgu';

export default function Footer() {
  return (
    <footer style={{ borderTop: '1px solid var(--border)', padding: '48px 0 32px', background: 'var(--surface)' }}>
      <div className="nv-container" style={{ textAlign: 'center' }}>
        <div style={{ fontFamily: 'var(--font-heading)', fontWeight: 700, fontSize: 18, color: 'var(--text)', marginBottom: 8 }}>
          NeuralVault — AI-Native Database Intelligence
        </div>
        <p style={{ fontSize: 13, color: 'var(--text3)', marginBottom: 16 }}>
          Built with PostgreSQL 17 + Google Gemini 2.0 Flash
        </p>
        <p style={{ fontSize: 11, color: 'var(--text3)', marginBottom: 20, maxWidth: 600, margin: '0 auto 20px' }}>
          All benchmark data sourced from: Timescale Research (2024), AWS Blog (2025), pgvector GitHub ANN-Benchmarks, Spider SQL Benchmark
        </p>

        <div style={{ display: 'flex', justifyContent: 'center', gap: 16, marginBottom: 24, flexWrap: 'wrap' }}>
          <a href={GITHUB_URL} target="_blank" rel="noopener noreferrer" style={{ color: 'var(--text2)', fontSize: 13, textDecoration: 'none', transition: 'color 0.2s' }} onMouseEnter={(e) => e.target.style.color = 'var(--text)'} onMouseLeave={(e) => e.target.style.color = 'var(--text2)'}>
            GitHub
          </a>
          <span style={{ color: 'var(--border)' }}>|</span>
          <a href="#features" style={{ color: 'var(--text2)', fontSize: 13, textDecoration: 'none', transition: 'color 0.2s' }} onMouseEnter={(e) => e.target.style.color = 'var(--text)'} onMouseLeave={(e) => e.target.style.color = 'var(--text2)'}>
            Architecture Docs
          </a>
          <span style={{ color: 'var(--border)' }}>|</span>
          <a href="#benchmarks" style={{ color: 'var(--text2)', fontSize: 13, textDecoration: 'none', transition: 'color 0.2s' }} onMouseEnter={(e) => e.target.style.color = 'var(--text)'} onMouseLeave={(e) => e.target.style.color = 'var(--text2)'}>
            Benchmark Sources
          </a>
        </div>

        <p style={{ fontSize: 12, color: 'var(--text3)', fontStyle: 'italic', maxWidth: 500, margin: '0 auto' }}>
          "The What Breaks section was written AFTER building, not before. That's the difference between a portfolio project and a system."
        </p>
      </div>
    </footer>
  );
}