import React from 'react';
import { Head, Link } from '@inertiajs/react';
import AltivateLayout from '@/Layouts/AltivateLayout';
import { FileCheck, AlertCircle, Gavel, Scaling, ArrowLeft } from 'lucide-react';

export default function TermsOfService() {
    return (
        <AltivateLayout title="Terms of Service">
            <div className="min-h-screen bg-[#FAFAF8] pt-32 pb-20">
                <div className="container-x max-w-4xl">
                    <div className="text-center mb-16">
                        <h1 className="font-display text-[2.5rem] md:text-[3.5rem] leading-tight text-ink mb-4">
                            Terms of Service
                        </h1>
                        <p className="text-[#8C92AC] text-lg">
                            Effective Date: May 16, 2026
                        </p>
                    </div>

                    <div className="bg-white rounded-[2.5rem] border border-[#E8E6DF] overflow-hidden">
                        <div className="p-8 sm:p-12 space-y-12">
                            <section>
                                <div className="flex items-center mb-6">
                                    <div className="h-12 w-12 rounded-full bg-[#F5F3EF] flex items-center justify-center text-primary mr-4">
                                        <AlertCircle className="h-6 w-6" />
                                    </div>
                                    <h2 className="font-display text-2xl text-ink">1. Agreement to Terms</h2>
                                </div>
                                <p className="text-[#8C92AC] leading-relaxed text-lg">
                                    These Terms of Service constitute a legally binding agreement made between you, whether personally or on behalf of an entity ("you") and Altivate ("we," "us" or "our"), concerning your access to and use of our website as well as any other media form, media channel, mobile website or mobile application related, linked, or otherwise connected thereto.
                                </p>
                            </section>

                            <section>
                                <div className="flex items-center mb-6">
                                    <div className="h-12 w-12 rounded-full bg-[#F5F3EF] flex items-center justify-center text-primary mr-4">
                                        <Gavel className="h-6 w-6" />
                                    </div>
                                    <h2 className="font-display text-2xl text-ink">2. Intellectual Property Rights</h2>
                                </div>
                                <p className="text-[#8C92AC] leading-relaxed text-lg">
                                    Unless otherwise indicated, the Site is our proprietary property and all source code, databases, functionality, software, website designs, audio, video, text, photographs, and graphics on the Site and the trademarks, service marks, and logos contained therein are owned or controlled by us or licensed to us, and are protected by copyright and trademark laws.
                                </p>
                            </section>

                            <section>
                                <div className="flex items-center mb-6">
                                    <div className="h-12 w-12 rounded-full bg-[#F5F3EF] flex items-center justify-center text-primary mr-4">
                                        <Scaling className="h-6 w-6" />
                                    </div>
                                    <h2 className="font-display text-2xl text-ink">3. User Representations</h2>
                                </div>
                                <p className="text-[#8C92AC] leading-relaxed text-lg mb-4">
                                    By using the Site, you represent and warrant that:
                                </p>
                                <ul className="list-disc pl-6 space-y-3 text-[#8C92AC] text-lg">
                                    <li><strong className="text-ink">Accuracy:</strong> All registration information you submit will be true, accurate, current, and complete.</li>
                                    <li><strong className="text-ink">Maintenance:</strong> You will maintain the accuracy of such information and promptly update such registration information as necessary.</li>
                                    <li><strong className="text-ink">Capacity:</strong> You have the legal capacity and you agree to comply with these Terms of Service.</li>
                                    <li><strong className="text-ink">Eligibility:</strong> You are not a minor in the jurisdiction in which you reside.</li>
                                    <li><strong className="text-ink">Access:</strong> You will not access the Site through automated or non-human means, whether through a bot, script or otherwise.</li>
                                </ul>
                            </section>

                            <section>
                                <div className="flex items-center mb-6">
                                    <div className="h-12 w-12 rounded-full bg-[#F5F3EF] flex items-center justify-center text-primary mr-4">
                                        <FileCheck className="h-6 w-6" />
                                    </div>
                                    <h2 className="font-display text-2xl text-ink">4. Purchases and Payment</h2>
                                </div>
                                <p className="text-[#8C92AC] leading-relaxed text-lg">
                                    We accept the following forms of payment: Visa, Mastercard, and Bank Transfers. You agree to provide current, complete, and accurate purchase and account information for all purchases made via the Site. We may change prices at any time. All payments shall be in the currency specified at the time of purchase.
                                </p>
                            </section>
                        </div>
                    </div>

                    <div className="mt-12 text-center">
                        <Link href="/" className="inline-flex h-12 items-center justify-center gap-2 rounded-2xl bg-white px-8 text-[15px] font-bold text-ink border border-[#E8E6DF] hover:border-primary/50 transition-all group">
                            <ArrowLeft className="h-4 w-4 group-hover:-translate-x-1 transition-transform" />
                            Return to Home
                        </Link>
                    </div>
                </div>
            </div>
        </AltivateLayout>
    );
}