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


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

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

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

const Terms: TermsComponent = ({ canLogin, canRegister }) => {
  const appName = import.meta.env.VITE_APP_NAME || 'RankWiz';
  const { app_url } = usePage<PageProps>().props;
  const lastUpdated = 'February 28, 2026';

  return (
    <>
      <Head title="Terms of Service">
        <link rel="canonical" href={`${app_url}/terms`} />
        <meta
          name="description"
          content={`Terms of Service for ${appName}. Read our terms and conditions for using our SEO diagnostic and content optimization platform.`}
        />
        <meta property="og:title" content={`Terms of Service — ${appName}`} />
        <meta
          property="og:description"
          content={`Terms and conditions for using ${appName}, the AI-powered SEO platform for WordPress.`}
        />
        <meta property="og:type" content="website" />
        <meta property="og:url" content={`${app_url}/terms`} />
        <meta property="og:image" content={`${app_url}/og-image.png`} />
        <meta
          property="og:image:alt"
          content={`${appName} — Terms of Service`}
        />
        <meta name="twitter:card" content="summary_large_image" />
        <meta name="twitter:title" content={`Terms of Service — ${appName}`} />
        <meta name="twitter:description" content={`Terms and conditions for using ${appName}.`} />
      </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">Terms of Service</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. Acceptance of Terms</h2>
                <p className="mt-3">
                  By accessing or using {appName} (&quot;the Service&quot;), you agree to be bound
                  by these Terms of Service. If you do not agree to these terms, do not use the
                  Service.
                </p>
              </div>

              <div>
                <h2 className="text-xl font-semibold text-foreground">2. Description of Service</h2>
                <p className="mt-3">
                  {appName} is an SEO diagnostic and content optimization platform. The Service
                  connects to Google Search Console and WordPress sites to analyze traffic patterns,
                  generate recommendations, and produce AI-assisted content drafts.
                </p>
              </div>

              <div>
                <h2 className="text-xl font-semibold text-foreground">3. Eligibility</h2>
                <p className="mt-3">
                  You must be at least 16 years of age (or 18 in jurisdictions where 16 is below
                  the age of digital consent) to use the Service. By creating an account, you
                  represent and warrant that you meet this minimum age requirement. If we learn that
                  a user is under the applicable minimum age, we will promptly delete their account
                  and all associated data.
                </p>
              </div>

              <div>
                <h2 className="text-xl font-semibold text-foreground">4. Account Registration</h2>
                <p className="mt-3">
                  You must provide accurate and complete information when creating an account. You
                  are responsible for maintaining the security of your account credentials and for
                  all activities that occur under your account.
                </p>
              </div>

              <div>
                <h2 className="text-xl font-semibold text-foreground">5. Third-Party API Keys</h2>
                <p className="mt-3">
                  AI features are available in two modes: (1) <strong>Bundled AI</strong> — included
                  on paid plans with a monthly draft quota; the Service uses its own API credentials
                  and there is no additional cost to you, and (2) <strong>Bring Your Own Key
                  (BYOK)</strong> — you may optionally connect your own OpenAI API key for unlimited
                  drafts beyond the bundled quota. When using BYOK, your API key is encrypted at rest
                  and used solely for generating content on your behalf; usage costs are billed
                  directly to your OpenAI account.
                </p>
              </div>

              <div>
                <h2 className="text-xl font-semibold text-foreground">
                  6. Google Search Console Data
                </h2>
                <p className="mt-3">
                  By connecting your Google Search Console account, you authorize the Service to
                  access your search performance data. This data is used exclusively for analysis
                  and recommendation generation within the Service. You may revoke access at any
                  time through your Google account settings.
                </p>
              </div>

              <div>
                <h2 className="text-xl font-semibold text-foreground">7. WordPress Integration</h2>
                <p className="mt-3">
                  The Service can connect to your WordPress site via our plugin for content
                  publishing. You are responsible for reviewing all content before publishing. The
                  Service is not responsible for any changes made to your WordPress site through the
                  integration.
                </p>
              </div>

              <div>
                <h2 className="text-xl font-semibold text-foreground">8. Acceptable Use</h2>
                <p className="mt-3">You agree not to:</p>
                <ul className="mt-2 list-disc space-y-1 pl-4 sm:pl-6">
                  <li>Use the Service for any unlawful purpose</li>
                  <li>Attempt to access accounts or data belonging to other users</li>
                  <li>Interfere with or disrupt the Service or its infrastructure</li>
                  <li>
                    Use the Service to generate spam, misleading content, or content that violates
                    third-party rights
                  </li>
                  <li>Reverse engineer, decompile, or disassemble any part of the Service</li>
                </ul>
              </div>

              <div>
                <h2 className="text-xl font-semibold text-foreground">9. Intellectual Property</h2>
                <p className="mt-3">
                  You retain ownership of all content you create or upload to the Service, including
                  AI-generated drafts produced using your API key. The Service and its underlying
                  technology remain the property of {appName}.
                </p>
              </div>

              <div>
                <h2 className="text-xl font-semibold text-foreground">
                  10. Subscription and Billing
                </h2>
                <p className="mt-3">
                  Paid subscriptions are billed through Stripe. You may cancel your subscription at
                  any time. Refunds are handled on a case-by-case basis. Usage limits are determined
                  by your subscription tier and are enforced by the Service.
                </p>
              </div>

              <div>
                <h2 className="text-xl font-semibold text-foreground">
                  11. Limitation of Liability
                </h2>
                <p className="mt-3">
                  The Service is provided &quot;as is&quot; without warranties of any kind.{' '}
                  {appName} is not liable for any indirect, incidental, or consequential damages
                  arising from your use of the Service, including but not limited to changes in
                  search rankings, traffic loss, or content published to your WordPress site.
                </p>
              </div>

              <div>
                <h2 className="text-xl font-semibold text-foreground">12. Termination</h2>
                <p className="mt-3">
                  We may suspend or terminate your access to the Service at any time for violation
                  of these terms. Upon termination, your right to use the Service ceases
                  immediately. You may export your data before account deletion.
                </p>
              </div>

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

              <div>
                <h2 className="text-xl font-semibold text-foreground">14. Contact</h2>
                <p className="mt-3">
                  If you have questions about these terms, please contact us through the Service.
                </p>
              </div>
            </div>
          </section>
        </main>

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

Terms.disableGlobalUi = true;

export default Terms;
