import { Head, usePage } from '@inertiajs/react';

import { MarketingFooter } from '@/Components/marketing/MarketingFooter';
import { MarketingNav } from '@/Components/marketing/MarketingNav';
import { type PageProps } from '@/types';

interface PrivacyProps {
  canLogin: boolean;
  canRegister: boolean;
}

type PrivacyComponent = ((props: PrivacyProps) => JSX.Element) & {
  disableGlobalUi?: boolean;
};

const Privacy: PrivacyComponent = ({ canLogin, canRegister }) => {
  const appName = import.meta.env.VITE_APP_NAME || 'RankWiz';
  const { app_url } = usePage<PageProps>().props;
  const lastUpdated = 'March 11, 2026';

  return (
    <>
      <Head title="Privacy Policy">
        <link rel="canonical" href={`${app_url}/privacy`} />
        <meta
          name="description"
          content={`Privacy Policy for ${appName}. Learn how we collect, use, and protect your data on our SEO diagnostic platform.`}
        />
        <meta property="og:title" content={`Privacy Policy — ${appName}`} />
        <meta
          property="og:description"
          content={`How ${appName} handles your data, Google Search Console information, and AI-generated content.`}
        />
        <meta property="og:type" content="website" />
        <meta property="og:url" content={`${app_url}/privacy`} />
        <meta property="og:image" content={`${app_url}/og-image.png`} />
        <meta property="og:image:alt" content={`${appName} — Privacy Policy`} />
        <meta name="twitter:card" content="summary_large_image" />
        <meta name="twitter:title" content={`Privacy Policy — ${appName}`} />
        <meta
          name="twitter:description"
          content={`How ${appName} handles your data and privacy.`}
        />
      </Head>

      <div className="min-h-screen bg-gradient-to-b from-background to-muted/30">
        <MarketingNav canLogin={canLogin} canRegister={canRegister} />

        <main id="main-content">
          <section className="container max-w-3xl py-16">
            <h1 className="text-4xl font-bold tracking-tight">Privacy Policy</h1>
            <p className="mt-2 text-sm text-muted-foreground">Last updated: {lastUpdated}</p>

            <div className="mt-10 space-y-8 text-muted-foreground leading-relaxed">
              <div>
                <h2 className="text-xl font-semibold text-foreground">1. Information We Collect</h2>
                <p className="mt-3">
                  We collect information you provide directly when creating an account:
                </p>
                <ul className="mt-2 list-disc space-y-1 pl-6">
                  <li>
                    <strong>Account information:</strong> name, email address, and password
                  </li>
                  <li>
                    <strong>Google Search Console data:</strong> search performance metrics (clicks,
                    impressions, CTR, position) accessed via OAuth
                  </li>
                  <li>
                    <strong>WordPress site data:</strong> post content, titles, and URLs synced
                    through our plugin
                  </li>
                  <li>
                    <strong>API keys:</strong> your OpenAI API key, encrypted at rest
                  </li>
                  <li>
                    <strong>Payment information:</strong> processed securely by Stripe; we do not
                    store card numbers
                  </li>
                </ul>
              </div>

              <div>
                <h2 className="text-xl font-semibold text-foreground">
                  2. How We Use Your Information
                </h2>
                <p className="mt-3">Your data is used to:</p>
                <ul className="mt-2 list-disc space-y-1 pl-6">
                  <li>Provide SEO analysis and generate recommendations for your sites</li>
                  <li>Generate AI content drafts using your OpenAI API key</li>
                  <li>Track the ROI of applied recommendations over time</li>
                  <li>Send you notifications about analysis results and traffic anomalies</li>
                  <li>Process payments and manage your subscription</li>
                </ul>
              </div>

              <div>
                <h2 className="text-xl font-semibold text-foreground">
                  3. Data Storage and Security
                </h2>
                <p className="mt-3">We take data security seriously:</p>
                <ul className="mt-2 list-disc space-y-1 pl-6">
                  <li>
                    All sensitive data (API keys, OAuth tokens, HMAC secrets) is encrypted at rest
                    using AES-256
                  </li>
                  <li>All connections use HTTPS with HSTS enforcement</li>
                  <li>
                    Session data is encrypted in production with secure, HTTP-only, SameSite cookies
                  </li>
                  <li>Content Security Policy headers protect against XSS attacks</li>
                  <li>Rate limiting is applied to all authentication and API endpoints</li>
                </ul>
              </div>

              <div>
                <h2 className="text-xl font-semibold text-foreground">4. Sub-Processors</h2>
                <p className="mt-3">
                  We use the following sub-processors to deliver the Service. Each has been assessed
                  for GDPR adequacy or operates under Standard Contractual Clauses.
                </p>
                <div className="mt-4 overflow-x-auto">
                  <table className="w-full text-sm border-collapse">
                    <thead>
                      <tr className="border-b">
                        <th className="py-2 pr-4 text-left font-semibold text-foreground">
                          Sub-Processor
                        </th>
                        <th className="py-2 pr-4 text-left font-semibold text-foreground">
                          Purpose
                        </th>
                        <th className="py-2 pr-4 text-left font-semibold text-foreground">
                          Location
                        </th>
                        <th className="py-2 text-left font-semibold text-foreground">DPA</th>
                      </tr>
                    </thead>
                    <tbody className="divide-y">
                      <tr>
                        <td className="py-2 pr-4 font-medium text-foreground">OpenAI</td>
                        <td className="py-2 pr-4">AI content generation (BYOK)</td>
                        <td className="py-2 pr-4">US</td>
                        <td className="py-2">
                          <a
                            href="https://openai.com/policies/data-processing-addendum"
                            className="underline hover:text-foreground"
                            target="_blank"
                            rel="noopener noreferrer"
                          >
                            DPA
                          </a>
                        </td>
                      </tr>
                      <tr>
                        <td className="py-2 pr-4 font-medium text-foreground">DataForSEO</td>
                        <td className="py-2 pr-4">SERP data (BYOK)</td>
                        <td className="py-2 pr-4">EU</td>
                        <td className="py-2">
                          <a
                            href="https://dataforseo.com/privacy-policy"
                            className="underline hover:text-foreground"
                            target="_blank"
                            rel="noopener noreferrer"
                          >
                            DPA
                          </a>
                        </td>
                      </tr>
                      <tr>
                        <td className="py-2 pr-4 font-medium text-foreground">Stripe</td>
                        <td className="py-2 pr-4">Payment processing</td>
                        <td className="py-2 pr-4">US / EU</td>
                        <td className="py-2">
                          <a
                            href="https://stripe.com/legal/dpa"
                            className="underline hover:text-foreground"
                            target="_blank"
                            rel="noopener noreferrer"
                          >
                            DPA
                          </a>
                        </td>
                      </tr>
                      <tr>
                        <td className="py-2 pr-4 font-medium text-foreground">Google GSC</td>
                        <td className="py-2 pr-4">Search Console data (OAuth)</td>
                        <td className="py-2 pr-4">US / EU</td>
                        <td className="py-2">
                          <a
                            href="https://cloud.google.com/terms/data-processing-addendum"
                            className="underline hover:text-foreground"
                            target="_blank"
                            rel="noopener noreferrer"
                          >
                            DPA
                          </a>
                        </td>
                      </tr>
                      <tr>
                        <td className="py-2 pr-4 font-medium text-foreground">Sentry</td>
                        <td className="py-2 pr-4">Error monitoring</td>
                        <td className="py-2 pr-4">US</td>
                        <td className="py-2">
                          <a
                            href="https://sentry.io/legal/dpa/"
                            className="underline hover:text-foreground"
                            target="_blank"
                            rel="noopener noreferrer"
                          >
                            DPA
                          </a>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </div>
                <p className="mt-3">
                  For the full sub-processor list see our{' '}
                  <a href="/legal/sub-processors" className="underline hover:text-foreground">
                    Sub-Processors page
                  </a>
                  .
                </p>
              </div>

              <div>
                <h2 className="text-xl font-semibold text-foreground">5. Data Retention</h2>
                <p className="mt-3">
                  We retain personal data only as long as necessary (GDPR Art. 5(1)(e)):
                </p>
                <div className="mt-4 overflow-x-auto">
                  <table className="w-full text-sm border-collapse">
                    <thead>
                      <tr className="border-b">
                        <th className="py-2 pr-4 text-left font-semibold text-foreground">
                          Data Type
                        </th>
                        <th className="py-2 pr-4 text-left font-semibold text-foreground">
                          Retention Period
                        </th>
                        <th className="py-2 text-left font-semibold text-foreground">Basis</th>
                      </tr>
                    </thead>
                    <tbody className="divide-y">
                      <tr>
                        <td className="py-2 pr-4">Account &amp; profile data</td>
                        <td className="py-2 pr-4">Until account deletion</td>
                        <td className="py-2">Contract</td>
                      </tr>
                      <tr>
                        <td className="py-2 pr-4">Google Search Console metrics</td>
                        <td className="py-2 pr-4">90 days (configurable)</td>
                        <td className="py-2">Legitimate interest</td>
                      </tr>
                      <tr>
                        <td className="py-2 pr-4">Content snapshots</td>
                        <td className="py-2 pr-4">90 days</td>
                        <td className="py-2">Contract</td>
                      </tr>
                      <tr>
                        <td className="py-2 pr-4">Audit logs</td>
                        <td className="py-2 pr-4">365 days</td>
                        <td className="py-2">Legal obligation</td>
                      </tr>
                      <tr>
                        <td className="py-2 pr-4">ROI snapshots</td>
                        <td className="py-2 pr-4">365 days</td>
                        <td className="py-2">Legitimate interest</td>
                      </tr>
                      <tr>
                        <td className="py-2 pr-4">Cookie consent records</td>
                        <td className="py-2 pr-4">3 years</td>
                        <td className="py-2">Legal obligation (GDPR Art. 7)</td>
                      </tr>
                      <tr>
                        <td className="py-2 pr-4">Payment &amp; billing records</td>
                        <td className="py-2 pr-4">7 years</td>
                        <td className="py-2">Legal obligation (tax law)</td>
                      </tr>
                    </tbody>
                  </table>
                </div>
                <p className="mt-3">
                  You may request deletion of your account and all associated data at any time from
                  your profile settings.
                </p>
              </div>

              <div>
                <h2 className="text-xl font-semibold text-foreground">6. Your Rights</h2>
                <p className="mt-3">
                  Under GDPR you have the following rights. To exercise any right, use the in-app
                  settings or contact us.
                </p>
                <ul className="mt-2 list-disc space-y-1 pl-6">
                  <li>
                    <strong>Right of access (Art. 15):</strong> export all data stored about you via
                    your profile settings
                  </li>
                  <li>
                    <strong>Right to rectification (Art. 16):</strong> correct inaccurate
                    information in your account
                  </li>
                  <li>
                    <strong>Right to erasure (Art. 17):</strong> delete your account and all
                    associated data from your profile settings
                  </li>
                  <li>
                    <strong>Right to data portability (Art. 20):</strong> download your data as JSON
                    or CSV
                  </li>
                  <li>
                    <strong>Right to withdraw consent (Art. 7):</strong> revoke cookie consent or
                    third-party access (Google, WordPress) at any time
                  </li>
                  <li>
                    <strong>Right to object (Art. 21):</strong> object to processing based on
                    legitimate interest by contacting us
                  </li>
                </ul>
              </div>

              <div>
                <h2 className="text-xl font-semibold text-foreground">
                  7. California Privacy Rights (CCPA / CPRA)
                </h2>
                <p className="mt-3">
                  If you are a California resident, the California Consumer Privacy Act (CCPA) and
                  California Privacy Rights Act (CPRA) grant you additional rights:
                </p>
                <ul className="mt-2 list-disc space-y-1 pl-6">
                  <li>
                    <strong>Right to know:</strong> request disclosure of the categories and
                    specific pieces of personal information we collect, use, and share
                  </li>
                  <li>
                    <strong>Right to delete:</strong> request deletion of personal information we
                    hold (subject to legal exceptions)
                  </li>
                  <li>
                    <strong>Right to opt-out of sale/sharing:</strong> we do not sell or share
                    personal information for cross-context behavioral advertising
                  </li>
                  <li>
                    <strong>Right to correct:</strong> request correction of inaccurate personal
                    information
                  </li>
                  <li>
                    <strong>Right to limit sensitive data use:</strong> we do not process sensitive
                    personal information beyond what is necessary to provide the Service
                  </li>
                  <li>
                    <strong>Non-discrimination:</strong> we will not discriminate against you for
                    exercising your CCPA rights
                  </li>
                </ul>
                <p className="mt-3">
                  To submit a CCPA request, use the data export or account deletion features in your
                  profile settings or contact us directly.
                </p>
              </div>

              <div>
                <h2 className="text-xl font-semibold text-foreground">8. Cookie Policy</h2>
                <p className="mt-3">
                  We use cookies in the following categories. You can manage your preferences using
                  the cookie consent banner at the bottom of the screen.
                </p>
                <div className="mt-4 overflow-x-auto">
                  <table className="w-full text-sm border-collapse">
                    <thead>
                      <tr className="border-b">
                        <th className="py-2 pr-4 text-left font-semibold text-foreground">
                          Category
                        </th>
                        <th className="py-2 pr-4 text-left font-semibold text-foreground">
                          Purpose
                        </th>
                        <th className="py-2 text-left font-semibold text-foreground">Required</th>
                      </tr>
                    </thead>
                    <tbody className="divide-y">
                      <tr>
                        <td className="py-2 pr-4 font-medium text-foreground">Necessary</td>
                        <td className="py-2 pr-4">
                          Session management, authentication, CSRF protection, and core Service
                          functionality
                        </td>
                        <td className="py-2">Yes — cannot be disabled</td>
                      </tr>
                      <tr>
                        <td className="py-2 pr-4 font-medium text-foreground">Functional</td>
                        <td className="py-2 pr-4">
                          Remember your preferences (theme, language, timezone)
                        </td>
                        <td className="py-2">Optional</td>
                      </tr>
                      <tr>
                        <td className="py-2 pr-4 font-medium text-foreground">Analytics</td>
                        <td className="py-2 pr-4">
                          Understand how the Service is used to improve features (PostHog,
                          first-party only)
                        </td>
                        <td className="py-2">Optional</td>
                      </tr>
                      <tr>
                        <td className="py-2 pr-4 font-medium text-foreground">Marketing</td>
                        <td className="py-2 pr-4">
                          Personalise content and measure campaign effectiveness
                        </td>
                        <td className="py-2">Optional</td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </div>

              <div>
                <h2 className="text-xl font-semibold text-foreground">9. Server-Side Analytics</h2>
                <p className="mt-3">
                  We use PostHog for product analytics to improve our Service. For critical product
                  functionality events (account creation, first analysis completion, subscription
                  changes), we process these events server-side as part of our legitimate interest
                  in product improvement and service delivery (GDPR Art. 6(1)(f)). These events are
                  limited to product usage milestones and do not track browsing behaviour.
                </p>
                <p className="mt-3">
                  Client-side analytics (page views, feature usage tracking) are subject to your
                  cookie consent preferences and can be managed via the cookie consent banner.
                </p>
              </div>

              <div>
                <h2 className="text-xl font-semibold text-foreground">10. AI-Generated Content</h2>
                <p className="mt-3">
                  Content generated through the Service uses your OpenAI API key. Your site content
                  and search data are sent to OpenAI for processing. We do not use your content to
                  train our own models. OpenAI&apos;s data retention and usage policies apply to
                  data processed through their API.
                </p>
              </div>

              <div>
                <h2 className="text-xl font-semibold text-foreground">
                  11. Changes to This Policy
                </h2>
                <p className="mt-3">
                  We may update this privacy policy from time to time. We will notify you of
                  material changes via email or in-app notification. Continued use of the Service
                  after changes constitutes acceptance of the updated policy.
                </p>
              </div>

              <div>
                <h2 className="text-xl font-semibold text-foreground">12. Your Data Rights</h2>
                <p className="mt-3">
                  Under GDPR, you have the following rights regarding your personal data:
                </p>
                <ul className="mt-3 list-disc pl-6 space-y-1 text-muted-foreground">
                  <li>
                    <strong className="text-foreground">Access &amp; Export:</strong> Download a
                    full copy of your data from{' '}
                    <span className="font-medium text-foreground">
                      Settings → Privacy → Export Data
                    </span>
                    . We will respond within 30 days.
                  </li>
                  <li>
                    <strong className="text-foreground">Rectification:</strong> Correct inaccurate
                    personal data at any time through your account settings.
                  </li>
                  <li>
                    <strong className="text-foreground">Erasure:</strong> Request deletion of your
                    account and all associated data. Submit a request through{' '}
                    <span className="font-medium text-foreground">
                      Settings → Privacy → Delete Account
                    </span>
                    .
                  </li>
                  <li>
                    <strong className="text-foreground">Portability:</strong> Receive your data in a
                    structured, machine-readable format (JSON) via the Data Export feature.
                  </li>
                  <li>
                    <strong className="text-foreground">Restriction of Processing:</strong> Request
                    that we limit how we use your data while a dispute is resolved.
                  </li>
                  <li>
                    <strong className="text-foreground">Objection:</strong> Object to processing
                    based on legitimate interests. We will cease unless we have compelling
                    legitimate grounds.
                  </li>
                </ul>
                <p className="mt-3 text-muted-foreground">
                  We will respond to all data rights requests within 30 days. For complex requests,
                  we may extend this by up to 2 months with notice.
                </p>
                <p className="mt-3 text-muted-foreground">
                  To exercise your data rights, log in and visit{' '}
                  <span className="font-medium text-foreground">Settings &gt; Privacy</span> to
                  request a data export or delete your account. You may also contact us at{' '}
                  <span className="font-medium text-foreground">
                    privacy@{new URL(app_url).hostname}
                  </span>
                  .
                </p>
              </div>

              <div>
                <h2 className="text-xl font-semibold text-foreground">
                  13. Legal Basis for Processing
                </h2>
                <p className="mt-3">
                  We process personal data under the following legal bases (GDPR Art. 6):
                </p>
                <div className="mt-4 overflow-x-auto">
                  <table className="w-full text-sm text-muted-foreground">
                    <thead>
                      <tr className="border-b border-border">
                        <th className="pb-2 pr-4 text-left font-semibold text-foreground">
                          Legal Basis
                        </th>
                        <th className="pb-2 pr-4 text-left font-semibold text-foreground">
                          Processing Activities
                        </th>
                      </tr>
                    </thead>
                    <tbody className="divide-y divide-border">
                      <tr>
                        <td className="py-2 pr-4 font-medium text-foreground align-top">
                          Performance of Contract (Art. 6(1)(b))
                        </td>
                        <td className="py-2">
                          Account management, Google Search Console data sync, WordPress
                          integration, content recommendation generation
                        </td>
                      </tr>
                      <tr>
                        <td className="py-2 pr-4 font-medium text-foreground align-top">
                          Legitimate Interest (Art. 6(1)(f))
                        </td>
                        <td className="py-2">
                          Product analytics (PostHog), SEO recommendations, site health scoring,
                          fraud prevention, service improvement
                        </td>
                      </tr>
                      <tr>
                        <td className="py-2 pr-4 font-medium text-foreground align-top">
                          Consent (Art. 6(1)(a))
                        </td>
                        <td className="py-2">
                          Optional cookies, marketing communications, optional feature notifications
                        </td>
                      </tr>
                      <tr>
                        <td className="py-2 pr-4 font-medium text-foreground align-top">
                          Legal Obligation (Art. 6(1)(c))
                        </td>
                        <td className="py-2">
                          Audit logs (GDPR Art. 30 records), billing records (tax compliance), data
                          breach notifications (GDPR Art. 33)
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </div>

              <div>
                <h2 className="text-xl font-semibold text-foreground">
                  14. International Data Transfers
                </h2>
                <p className="mt-3">
                  Some of our sub-processors are located outside the EEA. We ensure appropriate
                  safeguards are in place for all international transfers:
                </p>
                <div className="mt-4 overflow-x-auto">
                  <table className="w-full text-sm text-muted-foreground">
                    <thead>
                      <tr className="border-b border-border">
                        <th className="pb-2 pr-4 text-left font-semibold text-foreground">
                          Sub-Processor
                        </th>
                        <th className="pb-2 pr-4 text-left font-semibold text-foreground">
                          Location
                        </th>
                        <th className="pb-2 pr-4 text-left font-semibold text-foreground">
                          Purpose
                        </th>
                        <th className="pb-2 text-left font-semibold text-foreground">
                          Transfer Mechanism
                        </th>
                      </tr>
                    </thead>
                    <tbody className="divide-y divide-border">
                      <tr>
                        <td className="py-2 pr-4 font-medium text-foreground">OpenAI</td>
                        <td className="py-2 pr-4">United States</td>
                        <td className="py-2 pr-4">AI content generation (BYOK)</td>
                        <td className="py-2">Standard Contractual Clauses (SCCs)</td>
                      </tr>
                      <tr>
                        <td className="py-2 pr-4 font-medium text-foreground">Stripe</td>
                        <td className="py-2 pr-4">US / EU</td>
                        <td className="py-2 pr-4">Payment processing</td>
                        <td className="py-2">SCCs + EU-US Data Privacy Framework</td>
                      </tr>
                      <tr>
                        <td className="py-2 pr-4 font-medium text-foreground">
                          Google (Search Console)
                        </td>
                        <td className="py-2 pr-4">US / EU</td>
                        <td className="py-2 pr-4">SEO data integration</td>
                        <td className="py-2">SCCs + EU-US Data Privacy Framework</td>
                      </tr>
                      <tr>
                        <td className="py-2 pr-4 font-medium text-foreground">DataForSEO</td>
                        <td className="py-2 pr-4">European Union</td>
                        <td className="py-2 pr-4">SERP data (BYOK)</td>
                        <td className="py-2">No transfer — EU-based</td>
                      </tr>
                    </tbody>
                  </table>
                </div>
                <p className="mt-3 text-muted-foreground">
                  For BYOK integrations (OpenAI, DataForSEO), your API key and associated data are
                  processed under your own agreement with the sub-processor. We act as a data
                  processor on your behalf.
                </p>
              </div>

              <div>
                <h2 className="text-xl font-semibold text-foreground">
                  15. Data Protection Officer
                </h2>
                <p className="mt-3">
                  For questions about how your personal data is processed, to exercise your data
                  rights, or to raise a concern about our data practices, please contact our Data
                  Protection Officer:
                </p>
                <ul className="mt-2 list-disc space-y-1 pl-6">
                  <li>
                    <strong>Email:</strong>{' '}
                    <a
                      href={`mailto:dpo@${new URL(app_url).hostname}`}
                      className="underline hover:text-foreground"
                    >
                      dpo@{new URL(app_url).hostname}
                    </a>
                  </li>
                  <li>
                    <strong>Response time:</strong> We aim to respond to all enquiries within 5
                    business days
                  </li>
                </ul>
                <p className="mt-3">
                  You also have the right to lodge a complaint with your local data protection
                  supervisory authority if you believe your data has been processed unlawfully.
                </p>
              </div>

              <div>
                <h2 className="text-xl font-semibold text-foreground">16. Contact</h2>
                <p className="mt-3">
                  If you have general questions about this privacy policy, please contact us through
                  the Service or email{' '}
                  <a
                    href={`mailto:privacy@${new URL(app_url).hostname}`}
                    className="underline hover:text-foreground"
                  >
                    privacy@{new URL(app_url).hostname}
                  </a>
                  .
                </p>
              </div>
            </div>
          </section>
        </main>

        <MarketingFooter />
      </div>
    </>
  );
};

Privacy.disableGlobalUi = true;

export default Privacy;
