website-monitor/frontend/app/privacy/page.tsx

import type { Metadata } from 'next'
import Link from 'next/link'
import { ArrowLeft, Shield, Lock, Eye, Server, CreditCard, Mail } from 'lucide-react'
import { Footer } from '@/components/layout/Footer'

export const metadata: Metadata = {
    title: 'Privacy Policy',
    description:
        'Learn how SiteChangeMonitor collects, uses, and protects your personal data. Detailed information on GDPR compliance, data retention, and third-party services.',
    alternates: { canonical: '/privacy' },
    openGraph: {
        title: 'Privacy Policy — SiteChangeMonitor',
        description: 'Transparency is our policy. Learn how we handle your data.',
        url: '/privacy',
    },
}

export default function PrivacyPage() {
    return (
        <div className="min-h-screen bg-background flex flex-col">
            <div className="flex-1 py-16 md:py-24 px-6">
                <div className="mx-auto max-w-4xl space-y-12">
                    {/* Header */}
                    <div className="space-y-6 text-center md:text-left">
                        <Link href="/" className="inline-flex items-center text-sm text-muted-foreground hover:text-primary transition-colors mb-4">
                            <ArrowLeft className="mr-2 h-4 w-4" />
                            Back to Home
                        </Link>
                        <h1 className="text-4xl md:text-5xl font-bold font-display text-foreground tracking-tight">Privacy Policy</h1>
                        <p className="text-xl text-muted-foreground max-w-2xl">
                            We believe in transparency. Here's exactly how we handle your data, where it lives, and your rights under GDPR.
                        </p>
                        <div className="flex items-center gap-2 text-sm text-muted-foreground bg-secondary/30 w-fit px-3 py-1 rounded-full border border-border/50">
                            <span className="w-2 h-2 rounded-full bg-green-500 animate-pulse"></span>
                            Last updated: {new Date().toLocaleDateString('en-US', { month: 'long', day: 'numeric', year: 'numeric' })}
                        </div>
                    </div>

                    {/* Main Content */}
                    <div className="grid md:grid-cols-[1fr_300px] gap-12">
                        <section className="space-y-12 prose prose-neutral dark:prose-invert max-w-none">

                            {/* 1. Introduction */}
                            <div className="space-y-4">
                                <div className="flex items-center gap-3 text-primary">
                                    <Shield className="h-6 w-6" />
                                    <h2 className="text-2xl font-semibold m-0">1. Introduction</h2>
                                </div>
                                <p className="text-muted-foreground leading-relaxed">
                                    Welcome to SiteChangeMonitor ("we," "us," or "our"). We are committed to protecting your personal information and your right to privacy. This policy explains how we process your data when you use our website-monitoring services. By using our service, you agree to the collection and use of information in accordance with this policy.
                                </p>
                            </div>

                            {/* 2. Data We Collect */}
                            <div className="space-y-4">
                                <h3 className="text-xl font-semibold text-foreground">2. Data We Collect</h3>
                                <p className="text-muted-foreground">We collect the minimum amount of data necessary to provide our services:</p>
                                <ul className="grid gap-4 sm:grid-cols-2 list-none pl-0 my-4">
                                    <li className="bg-secondary/10 p-4 rounded-lg border border-border/50">
                                        <strong className="block text-foreground mb-1">Account Data</strong>
                                        <span className="text-sm text-muted-foreground">Email address, encrypted password, and billing details (handled by our payment processor).</span>
                                    </li>
                                    <li className="bg-secondary/10 p-4 rounded-lg border border-border/50">
                                        <strong className="block text-foreground mb-1">Monitoring Data</strong>
                                        <span className="text-sm text-muted-foreground">URLs you track, snapshots of those pages, and change history.</span>
                                    </li>
                                    <li className="bg-secondary/10 p-4 rounded-lg border border-border/50">
                                        <strong className="block text-foreground mb-1">Usage Data</strong>
                                        <span className="text-sm text-muted-foreground">IP address, browser type, device info, and interaction logs via PostHog.</span>
                                    </li>
                                </ul>
                            </div>

                            {/* 3. Infrastructure & Hosting */}
                            <div className="space-y-4">
                                <div className="flex items-center gap-3 text-primary">
                                    <Server className="h-6 w-6" />
                                    <h2 className="text-2xl font-semibold m-0">3. Infrastructure & Hosting</h2>
                                </div>
                                <p className="text-muted-foreground leading-relaxed">
                                    We prioritize data sovereignty and security. Our core infrastructure is hosted on dedicated servers in <strong>Texas, USA</strong>. We maintain strict security protocols to protected your data, regardless of where you are located.
                                </p>
                                <ul className="list-disc pl-6 space-y-2 text-muted-foreground">
                                    <li><strong>Core Data:</strong> Stored on our secure, private servers in the United States. We do not rely on public cloud buckets for sensitive monitoring data.</li>
                                    <li><strong>Snapshots:</strong> Website screenshots are stored locally on our infrastructure.</li>
                                    <li><strong>Backups:</strong> Encrypted backups are maintained to prevent data loss.</li>
                                </ul>
                            </div>

                            {/* 4. Third-Party Services */}
                            <div className="space-y-4">
                                <h3 className="text-xl font-semibold text-foreground">4. Third-Party Subprocessors</h3>
                                <p className="text-muted-foreground">We use trusted third-party services for specific functions. These partners adhering to strict data protection standards (GDPR/SCCs):</p>
                                <div className="grid gap-4">
                                    <div className="flex gap-4 items-start p-4 rounded-lg border border-border/50 bg-background/50">
                                        <CreditCard className="h-5 w-5 text-muted-foreground mt-1" />
                                        <div>
                                            <strong className="text-foreground">Stripe / LemonSqueezy</strong>
                                            <p className="text-sm text-muted-foreground">Payment processing. We never see or store your full credit card number.</p>
                                        </div>
                                    </div>
                                    <div className="flex gap-4 items-start p-4 rounded-lg border border-border/50 bg-background/50">
                                        <Eye className="h-5 w-5 text-muted-foreground mt-1" />
                                        <div>
                                            <strong className="text-foreground">PostHog</strong>
                                            <p className="text-sm text-muted-foreground">Product analytics to help us improve the user experience. IP addresses are anonymized.</p>
                                        </div>
                                    </div>
                                    <div className="flex gap-4 items-start p-4 rounded-lg border border-border/50 bg-background/50">
                                        <Mail className="h-5 w-5 text-muted-foreground mt-1" />
                                        <div>
                                            <strong className="text-foreground">Transactional Email Provider</strong>
                                            <p className="text-sm text-muted-foreground">To send you change alerts and password resets.</p>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            {/* 5. Your Global Privacy Rights */}
                            <div className="space-y-4">
                                <div className="flex items-center gap-3 text-primary">
                                    <Lock className="h-6 w-6" />
                                    <h2 className="text-2xl font-semibold m-0">5. Your Global Privacy Rights</h2>
                                </div>
                                <p className="text-muted-foreground">
                                    We believe privacy is a fundamental right. Regardless of where you live, we extend high-standard privacy protections to all our users.
                                </p>

                                <div className="mt-4 space-y-4">
                                    <h4 className="font-semibold text-foreground">For Users in the EEA & UK (GDPR)</h4>
                                    <ul className="space-y-2 text-muted-foreground pl-4 border-l-2 border-primary/20">
                                        <li><strong>Right to Access:</strong> Request a copy of your personal data.</li>
                                        <li><strong>Right to Rectification:</strong> Request correction of inaccurate data.</li>
                                        <li><strong>Right to Erasure ("Right to be Forgotten"):</strong> Request deletion of all your data.</li>
                                        <li><strong>Right to Portability:</strong> Receive your data in a structured format.</li>
                                    </ul>
                                </div>

                                <div className="mt-6 space-y-4">
                                    <h4 className="font-semibold text-foreground">For Users in the US (CCPA/CPRA & State Laws)</h4>
                                    <ul className="space-y-2 text-muted-foreground pl-4 border-l-2 border-primary/20">
                                        <li><strong>No Sale of Data:</strong> We do not sell your personal information to third parties.</li>
                                        <li><strong>Right to Know:</strong> You may request details on the categories of personal data we collect.</li>
                                        <li><strong>Right to Delete:</strong> You may request the deletion of your personal information, subject to certain legal exceptions.</li>
                                        <li><strong>Non-Discrimination:</strong> We will not treat you differently for exercising your privacy rights.</li>
                                    </ul>
                                </div>

                                <div className="mt-6 p-4 bg-secondary/10 border border-border rounded-lg text-sm text-muted-foreground">
                                    To exercise any of these rights, contact us at <a href="mailto:privacy@sitechangemonitor.com" className="text-primary hover:underline font-medium">privacy@sitechangemonitor.com</a>. We respond to all valid requests within 30 days.
                                </div>
                            </div>

                            {/* 6. Cookies */}
                            <div className="space-y-4">
                                <h3 className="text-xl font-semibold text-foreground">6. Cookies & Local Storage</h3>
                                <p className="text-muted-foreground">
                                    We use cookies strictly for essential functions (authentication, security) and analytical purposes (to understand general usage patterns via PostHog). You can control cookies through your browser settings, though disabling them may affect your ability to log in.
                                </p>
                            </div>

                            {/* 7. Contact */}
                            <div className="space-y-4">
                                <h3 className="text-xl font-semibold text-foreground">7. Contact Us</h3>
                                <p className="text-muted-foreground">
                                    Have questions about privacy? Reach out to our Data Protection Officer (DPO) directly.
                                </p>
                                <div className="p-6 bg-primary/5 rounded-xl border border-primary/20 flex flex-col sm:flex-row items-center gap-6">
                                    <div className="p-3 bg-background rounded-full border border-border shadow-sm">
                                        <Mail className="h-6 w-6 text-primary" />
                                    </div>
                                    <div className="text-center sm:text-left">
                                        <p className="font-semibold text-foreground">SiteChangeMonitor Privacy Team</p>
                                        <a href="mailto:privacy@sitechangemonitor.com" className="text-primary hover:underline text-lg font-medium">privacy@sitechangemonitor.com</a>
                                    </div>
                                </div>
                            </div>

                        </section>

                        {/* Sidebar / TOC */}
                        <aside className="hidden md:block">
                            <div className="sticky top-24 space-y-8">
                                <div className="p-6 rounded-xl border border-border bg-card/50 backdrop-blur-sm">
                                    <h4 className="font-semibold mb-4 text-foreground">Table of Contents</h4>
                                    <nav className="space-y-2 text-sm">
                                        <a href="#" className="block text-muted-foreground hover:text-primary transition-colors">1. Introduction</a>
                                        <a href="#" className="block text-muted-foreground hover:text-primary transition-colors">2. Data Collection</a>
                                        <a href="#" className="block text-muted-foreground hover:text-primary transition-colors">3. Infrastructure</a>
                                        <a href="#" className="block text-muted-foreground hover:text-primary transition-colors">4. Subprocessors</a>
                                        <a href="#" className="block text-muted-foreground hover:text-primary transition-colors">5. Global Privacy Rights</a>
                                        <a href="#" className="block text-muted-foreground hover:text-primary transition-colors">6. Cookies</a>
                                        <a href="#" className="block text-muted-foreground hover:text-primary transition-colors">7. Contact</a>
                                    </nav>
                                </div>
                                <div className="p-6 rounded-xl border border-border bg-gradient-to-br from-primary/5 to-transparent">
                                    <h4 className="font-semibold mb-2 text-foreground">Need help?</h4>
                                    <p className="text-sm text-muted-foreground mb-4">
                                        Our support team is available to answer specific questions about your data.
                                    </p>
                                    <Link href="mailto:support@sitechangemonitor.com" className="text-sm font-medium text-primary hover:underline">
                                        Contact Support &rarr;
                                    </Link>
                                </div>
                            </div>
                        </aside>
                    </div>
                </div>
            </div>
            <Footer />
        </div>
    )
}