import { Head } from '@inertiajs/react';
import Layout from '@/Components/Layout';
import { FileText } from 'lucide-react';

interface PageProps {
    page: {
        slug: string;
        title: string;
        body_html: string;
        meta_title?: string;
        meta_desc?: string;
    };
}

export default function TermsOfService({ page }: PageProps) {
    return (
        <Layout>
            <Head title={page.meta_title || page.title} />
            {page.meta_desc && <Head><meta name="description" content={page.meta_desc} /></Head>}

            {/* Hero Section - Light Modern Style (compact) */}
            <section className="relative overflow-hidden bg-gradient-to-br from-slate-50 via-white to-blue-50/40 py-20 border-b border-slate-100">
                {/* Subtle Mesh Gradient Background */}
                <div className="absolute inset-0 overflow-hidden">
                    <div className="absolute -top-40 -left-40 w-[500px] h-[500px] bg-primary/15 rounded-full filter blur-3xl animate-pulse" />
                    <div className="absolute -bottom-40 -right-40 w-[500px] h-[500px] bg-purple-500/15 rounded-full filter blur-3xl animate-pulse" style={{ animationDelay: '2s' }} />
                </div>

                {/* Grid Pattern - very subtle */}
                <div className="absolute inset-0 bg-[linear-gradient(to_right,#cbd5e10a_1px,transparent_1px),linear-gradient(to_bottom,#cbd5e10a_1px,transparent_1px)] bg-[size:48px_48px]" />

                <div className="container mx-auto px-4 relative z-10">
                    <div className="max-w-4xl mx-auto text-center">
                        <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-white border border-slate-200 shadow-sm text-slate-700 text-sm mb-6">
                            <FileText className="w-4 h-4 text-cyan-500" />
                            <span>Legal & Compliance</span>
                        </div>

                        <h1 className="text-4xl md:text-5xl lg:text-6xl font-bold mb-4 leading-tight text-slate-900">
                            {page.title}
                        </h1>
                        <p className="text-lg md:text-xl text-slate-600 leading-relaxed max-w-2xl mx-auto">
                            The ground rules for working with us — plain language, no fine print.
                        </p>
                    </div>
                </div>
            </section>

            {/* Content Section */}
            <section className="py-20 bg-white">
                <div className="container mx-auto px-4">
                    <div className="max-w-4xl mx-auto">
                        <div
                            className="prose prose-lg max-w-none prose-headings:text-slate-900 prose-headings:font-bold prose-p:text-slate-700 prose-p:leading-relaxed prose-a:text-primary hover:prose-a:text-primary/80 prose-strong:text-slate-900 prose-ul:text-slate-700 prose-ol:text-slate-700 prose-li:marker:text-primary"
                            dangerouslySetInnerHTML={{ __html: page.body_html }}
                        />
                    </div>
                </div>
            </section>
        </Layout>
    );
}
