import React from 'react'
import { Link } from 'react-router-dom'
import StarField from './StarField'

export default function LegalLayout({ title, updated, children }) {
  return (
    <div className="min-h-screen relative">
      <StarField count={40} />
      {/* Header */}
      <nav className="fixed top-0 left-0 right-0 z-50 bg-nova-bg/80 backdrop-blur-xl border-b border-nova-border">
        <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center">
          <Link to="/" className="flex items-center gap-2 text-nova-textSecondary hover:text-white transition-colors">
            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
            </svg>
            <span className="text-sm">Back to Home</span>
          </Link>
        </div>
      </nav>

      {/* Content */}
      <main className="pt-24 pb-16 max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
        <h1 className="text-3xl sm:text-4xl font-bold text-white mb-2">{title}</h1>
        <p className="text-nova-textMuted text-sm mb-10">Last updated: {updated}</p>
        <div className="space-y-8">
          {children}
        </div>
      </main>

      {/* Footer */}
      <footer className="border-t border-nova-border py-8">
        <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 flex flex-col sm:flex-row items-center justify-between gap-4">
          <p className="text-nova-textMuted text-sm">&copy; {new Date().getFullYear()} Nova40</p>
          <div className="flex gap-4">
            <Link to="/privacy-policy" className="text-nova-textMuted hover:text-nova-textSecondary text-sm transition-colors">Privacy Policy</Link>
            <Link to="/terms-conditions" className="text-nova-textMuted hover:text-nova-textSecondary text-sm transition-colors">Terms & Conditions</Link>
          </div>
        </div>
      </footer>
    </div>
  )
}

export function Section({ title, children }) {
  return (
    <section>
      <h2 className="text-white font-semibold text-lg mb-3">{title}</h2>
      <div className="space-y-3">{children}</div>
    </section>
  )
}

export function Para({ children }) {
  return <p className="text-nova-textSecondary text-sm leading-relaxed">{children}</p>
}

export function BulletList({ items }) {
  return (
    <ul className="space-y-2 pl-1">
      {items.map((item, i) => (
        <li key={i} className="flex gap-2 text-sm">
          <span className="text-nova-primary mt-0.5">•</span>
          <span className="text-nova-textSecondary">{item}</span>
        </li>
      ))}
    </ul>
  )
}
