import Header from '@/components/ui/header';
import Footer from '@/components/ui/footer';
import { FileText, Clock, ArrowLeft } from 'lucide-react';
import Link from 'next/link';
import { BRAND } from '@/lib/white-label/constants';

export const metadata = {
  title: `Terms of Service | ${BRAND.companyName}`,
  description: `Terms of Service for ${BRAND.companyName} platform.`,
};

export default function TermsPage() {
  return (
    <main className="min-h-screen bg-brand-bg">
      <Header />
      <div className="pt-32 pb-20 px-4">
        <div className="max-w-4xl mx-auto">
          <Link 
            href="/"
            className="inline-flex items-center gap-2 text-gray-400 hover:text-brand transition-colors mb-8"
          >
            <ArrowLeft className="w-4 h-4" />
            Back to Home
          </Link>
          
          <div className="glass-card p-8 md:p-12 bg-black/50">
            <div className="flex items-center gap-4 mb-8">
              <div className="w-16 h-16 rounded-2xl bg-gradient-to-br from-brand-deep/20 to-brand-secondary/20 flex items-center justify-center">
                <FileText className="w-8 h-8 text-brand" />
              </div>
              <div>
                <h1 className="text-3xl font-bold text-white">Terms of Service</h1>
                <div className="flex items-center gap-2 text-gray-400 mt-1">
                  <Clock className="w-4 h-4" />
                  <span>Coming Soon</span>
                </div>
              </div>
            </div>
            
            <div className="border-l-4 border-brand-deep/50 pl-6 py-4 bg-brand-deep/5 rounded-r-lg mb-8">
              <p className="text-gray-300 text-lg">
                Our legal team is currently preparing comprehensive Terms of Service for {BRAND.companyName}. 
                This document will outline the rules, guidelines, and agreements for using our AI-powered operations platform.
              </p>
            </div>
            
            <div className="space-y-6 text-gray-400">
              <h2 className="text-xl font-semibold text-white">What to Expect</h2>
              <ul className="space-y-3">
                <li className="flex items-start gap-3">
                  <span className="text-brand mt-1">•</span>
                  <span>Platform usage guidelines and acceptable use policies</span>
                </li>
                <li className="flex items-start gap-3">
                  <span className="text-brand mt-1">•</span>
                  <span>Subscription terms and billing information</span>
                </li>
                <li className="flex items-start gap-3">
                  <span className="text-brand mt-1">•</span>
                  <span>Intellectual property rights and licensing</span>
                </li>
                <li className="flex items-start gap-3">
                  <span className="text-brand mt-1">•</span>
                  <span>Limitation of liability and disclaimers</span>
                </li>
                <li className="flex items-start gap-3">
                  <span className="text-brand mt-1">•</span>
                  <span>Termination and account policies</span>
                </li>
              </ul>
            </div>
            
            <div className="mt-12 p-6 bg-gradient-to-r from-brand-secondary/10 to-brand-deep/10 rounded-xl border border-brand-secondary/20">
              <p className="text-gray-300">
                <span className="text-white font-semibold">Questions?</span> Contact our team at{' '}
                <a href={`mailto:legal@${BRAND.domain}`} className="text-brand hover:underline">
                  legal@{BRAND.domain}
                </a>
              </p>
            </div>
          </div>
        </div>
      </div>
      <Footer />
    </main>
  );
}
