import { motion } from 'framer-motion';
import { RevealText } from '../components/RevealText';
import { FileText, CreditCard, CheckCircle } from 'lucide-react';

const paymentTerms = [
  'A 50% upfront payment is required before any project begins.',
  'The remaining 50% balance is due upon project completion and before the final website, software, source code, or project files are delivered.',
  'Any additional features or revisions outside the agreed project scope will be quoted separately.',
  'Delayed payments may result in delayed project delivery.',
  'All payments made are non-refundable once work has commenced, except where otherwise agreed in writing.'
];

const onboardingSteps = [
  { title: 'Free Discovery Call', desc: 'We discuss your business goals and project requirements.' },
  { title: 'Proposal & Quotation', desc: 'You receive a detailed proposal, timeline, and pricing.' },
  { title: 'Project Approval', desc: 'Once approved, a service agreement is finalized.' },
  { title: '50% Advance Payment', desc: 'Project starts after the initial payment is received.' },
  { title: 'Design & Development', desc: 'We build your solution and provide regular progress updates.' },
  { title: 'Review & Revisions', desc: 'You review the work and request revisions included in the agreed scope.' },
  { title: 'Final Payment', desc: 'The remaining 50% is paid after project approval.' },
  { title: 'Delivery & Launch', desc: 'We deliver the final project, deploy it if required, and provide post-launch support as agreed.' }
];

const TermsOfService = () => {
  return (
    <div className="bg-[#0B1220] min-h-screen pt-32 pb-20" data-testid="terms-of-service-page">
      <div className="max-w-4xl mx-auto px-6 lg:px-8">
        <RevealText>
          <div className="mb-12">
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.6 }}
              className="inline-flex items-center gap-2 px-4 py-2 bg-[#4F7CFF]/10 border border-[#4F7CFF]/20 rounded-full mb-6"
            >
              <FileText size={16} className="text-[#4F7CFF]" />
              <span className="text-[#4F7CFF] text-sm font-medium">Legal</span>
            </motion.div>
            <h1 className="text-4xl md:text-5xl lg:text-6xl font-bold text-white mb-4">
              Terms of Service
            </h1>
            <p className="text-white/50 text-sm">Last updated: {new Date().getFullYear()}</p>
          </div>
        </RevealText>

        {/* Intro */}
        <RevealText delay={0.15}>
          <div className="p-8 md:p-12 bg-gradient-to-br from-white/5 to-transparent border border-white/10 rounded-3xl backdrop-blur-sm space-y-6 mb-8">
            <p className="text-lg text-white/70 leading-relaxed">
              Welcome to Vireun. By accessing or using our website and services, you agree to comply with these Terms of Service. Our software, designs, content, and intellectual property remain the property of Vireun unless otherwise agreed in writing.
            </p>
            <p className="text-lg text-white/70 leading-relaxed">
              Clients are responsible for providing accurate project information and making payments according to agreed terms. We strive to deliver high-quality software solutions but do not guarantee uninterrupted or error-free services. Vireun reserves the right to update these terms at any time without prior notice. Continued use of our website or services constitutes acceptance of these terms.
            </p>
          </div>
        </RevealText>

        {/* Payment Terms */}
        <RevealText delay={0.2}>
          <div className="p-8 md:p-12 bg-gradient-to-br from-white/5 to-transparent border border-white/10 rounded-3xl backdrop-blur-sm mb-8">
            <div className="flex items-center gap-3 mb-6">
              <div className="w-12 h-12 bg-[#4F7CFF]/10 rounded-xl flex items-center justify-center">
                <CreditCard size={24} className="text-[#4F7CFF]" />
              </div>
              <h2 className="text-2xl md:text-3xl font-bold text-white">Payment Terms</h2>
            </div>
            <ul className="space-y-4">
              {paymentTerms.map((term, i) => (
                <motion.li
                  key={i}
                  initial={{ opacity: 0, x: -20 }}
                  whileInView={{ opacity: 1, x: 0 }}
                  viewport={{ once: true }}
                  transition={{ delay: i * 0.08 }}
                  className="flex items-start gap-3"
                >
                  <CheckCircle size={20} className="text-[#4F7CFF] flex-shrink-0 mt-1" />
                  <span className="text-white/70 leading-relaxed">{term}</span>
                </motion.li>
              ))}
            </ul>
          </div>
        </RevealText>

        {/* Client Onboarding */}
        <RevealText delay={0.25}>
          <div className="p-8 md:p-12 bg-gradient-to-br from-white/5 to-transparent border border-white/10 rounded-3xl backdrop-blur-sm">
            <h2 className="text-2xl md:text-3xl font-bold text-white mb-8">Client Onboarding</h2>
            <div className="space-y-6">
              {onboardingSteps.map((step, i) => (
                <motion.div
                  key={i}
                  initial={{ opacity: 0, y: 20 }}
                  whileInView={{ opacity: 1, y: 0 }}
                  viewport={{ once: true }}
                  transition={{ delay: i * 0.06 }}
                  className="flex items-start gap-4"
                >
                  <div className="flex-shrink-0 w-10 h-10 bg-[#4F7CFF]/10 border border-[#4F7CFF]/20 rounded-full flex items-center justify-center">
                    <span className="text-[#4F7CFF] font-bold text-sm">{i + 1}</span>
                  </div>
                  <div className="pt-1">
                    <h3 className="text-white font-semibold text-lg mb-1">{step.title}</h3>
                    <p className="text-white/60 leading-relaxed">{step.desc}</p>
                  </div>
                </motion.div>
              ))}
            </div>

            <div className="pt-8 mt-8 border-t border-white/10">
              <p className="text-white/60">
                Have questions about our terms? Contact us at{' '}
                <a href="mailto:support@vireun.com" className="text-[#4F7CFF] hover:text-[#6B8FFF] transition-colors duration-300">
                  support@vireun.com
                </a>
              </p>
            </div>
          </div>
        </RevealText>
      </div>
    </div>
  );
};

export default TermsOfService;