"use client";

import { useState, useEffect } from "react";
import { FileText, Shield, Scale, Clock, AlertCircle, HelpCircle } from "lucide-react";
import PageSkeleton from "./PageSkeleton";

const sections = [
  {
    id: "acceptance",
    title: "1. Acceptance of terms",
    icon: Scale,
    content: "By using Vela (vela.app), you agree to these terms. If you're using it on behalf of a business, you represent that you have the authority to bind that business to these terms.",
  },
  {
    id: "service",
    title: "2. The service",
    icon: FileText,
    content: "Vela provides accounting and HR tools. We aim for 99.9% uptime, but we don't guarantee that the service will always be available or error-free. We may update features from time to time.",
  },
  {
    id: "accounts",
    title: "3. Your account",
    icon: Shield,
    content: "You're responsible for keeping your account secure. If you're an employer, you're responsible for the data you enter about your employees and ensuring you have the right to process that data.",
  },
  {
    id: "pricing",
    title: "4. Pricing and payments",
    icon: Clock,
    content: "Our pricing is transparent and displayed based on your IP location. Subscription fees are billed in advance. You can cancel at any time, and you'll have access until the end of your current billing cycle.",
  },
  {
    id: "liability",
    title: "5. Limitation of liability",
    icon: AlertCircle,
    content: "We provide tools to help you manage your business, but we aren't your accountant or HR consultant. You're responsible for ensuring your business complies with local laws and tax regulations.",
  },
  {
    id: "termination",
    title: "6. Termination",
    icon: Clock,
    content: "You can close your account at any time. We may suspend or terminate your account if you violate these terms or fail to pay subscription fees.",
  },
  {
    id: "governing-law",
    title: "7. Governing law",
    icon: Scale,
    content: "These terms are governed by the laws of the jurisdiction where Vela is registered, without regard to conflict of law principles.",
  },
  {
    id: "questions",
    title: "8. Questions",
    icon: HelpCircle,
    content: "Got questions about these terms? Reach out to us at hello@vela.app.",
  },
];

export default function TermsPage() {
  const [loaded, setLoaded] = useState(false);
  useEffect(() => { setLoaded(true); }, []);

  if (!loaded) return <PageSkeleton name="Terms of Service" />;

  return (
    <div className="p-6 lg:p-8">
      <div className="max-w-3xl mx-auto">
        <div className="mb-12">
          <h1 className="text-3xl font-serif text-gray-900 mb-4">Terms of Service</h1>
          <p className="text-sm text-gray-500">Last updated: April 2026</p>
          <p className="text-gray-600 mt-4 leading-relaxed">
            We've kept our terms of service as simple as possible. By using Vela, you're agreeing to these terms.
          </p>
        </div>

        <div className="space-y-12">
          {sections.map((section) => (
            <section key={section.id} id={section.id} className="scroll-mt-20">
              <div className="flex items-center gap-3 mb-4">
                <div className="w-10 h-10 bg-teal-50 rounded-lg flex items-center justify-center">
                  <section.icon className="w-5 h-5 text-[#1D9E75]" />
                </div>
                <h2 className="text-xl font-semibold text-gray-900">{section.title}</h2>
              </div>
              <p className="text-gray-600 leading-relaxed pl-1">{section.content}</p>
            </section>
          ))}
        </div>
      </div>
    </div>
  );
}