import Link from "next/link";
import { Background } from "../../components/background";
import { PageSchema } from "../../components/page-schema";
import { SiteFooter } from "../../components/site-footer";
import { SiteHeader } from "../../components/site-header";
import { siteInfo } from "../../data/site";

export const metadata = {
  title: "Terms of Service",
  description: "Terms and conditions for using Aarthalabs.",
  keywords: siteInfo.keywords
};

const sections = [
  { id: "acceptance", title: "1. Acceptance of Terms" },
  { id: "service", title: "2. Service Description" },
  { id: "accounts", title: "3. User Accounts" },
  { id: "privacy", title: "4. Data Privacy" },
  { id: "governing", title: "5. Governing Law" },
  { id: "disputes", title: "6. Dispute Resolution" }
];

export default function TermsPage() {
  const schema = [
    {
      "@context": "https://schema.org",
      "@type": "WebPage",
      name: "Terms of Service",
      description: "Terms and conditions for using Aarthalabs.",
      url: `${siteInfo.url}/terms`
    }
  ];

  return (
    <div className="page-soft-bg min-h-screen font-sans text-foreground flex flex-col relative overflow-hidden">
      <Background />
      <SiteHeader />

      <main className="relative z-10 flex-1 pt-24 pb-16">
        <div className="max-w-3xl mx-auto px-6 lg:px-8">
          <div className="rounded-3xl border border-border/60 bg-gradient-to-b from-background/95 via-background to-background/90 p-6 shadow-glass backdrop-blur-sm sm:p-10">
            <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-8 pb-6 border-b border-border/60">
              <h1 className="text-3xl font-bold tracking-tight text-foreground sm:text-4xl">
                Terms of Service
              </h1>
              <p className="text-sm text-muted-foreground">
                Last updated: October 24, 2023
              </p>
            </div>

            <nav className="mb-10 rounded-xl bg-secondary/20 border border-border/50 p-4" aria-label="On this page">
              <p className="text-xs font-semibold uppercase tracking-wider text-muted-foreground mb-3">On this page</p>
              <ul className="flex flex-wrap gap-x-6 gap-y-2 text-sm">
                {sections.map(({ id, title }) => (
                  <li key={id}>
                    <a href={`#${id}`} className="text-primary hover:underline">
                      {title.replace(/^\d+\.\s/, "")}
                    </a>
                  </li>
                ))}
              </ul>
            </nav>

            <div className="space-y-10 text-muted-foreground leading-relaxed">
              <section id="acceptance">
                <h2 className="text-foreground font-bold text-xl mb-3">1. Acceptance of Terms</h2>
                <p>
                  By accessing and using Aarthalabs, you accept and agree to be bound by the terms and provisions of this agreement.
                </p>
              </section>

              <section id="service">
                <h2 className="text-foreground font-bold text-xl mb-3">2. Service Description</h2>
                <p>
                  Aarthalabs provides financial data aggregation, ledger management, and reporting tools. We are not a bank or financial advisor.
                </p>
              </section>

              <section id="accounts">
                <h2 className="text-foreground font-bold text-xl mb-3">3. User Accounts</h2>
                <p>
                  You are responsible for maintaining the security of your account and password. Aarthalabs cannot and will not be liable for any loss or damage from your failure to comply with this security obligation.
                </p>
              </section>

              <section id="privacy">
                <h2 className="text-foreground font-bold text-xl mb-3">4. Data Privacy</h2>
                <p>
                  Your data is yours. We do not sell your financial data to third parties. See our{" "}
                  <Link href="/privacy-policy" className="text-primary hover:underline font-medium">
                    Privacy Policy
                  </Link>{" "}
                  for details on how we protect your information.
                </p>
              </section>

              <section id="governing">
                <h2 className="text-foreground font-bold text-xl mb-3">5. Governing Law</h2>
                <p>
                  These Terms shall be governed by and construed in accordance with the laws of the United States and Canada. Aarthalabs Inc. and you irrevocably consent that the courts of the United States and Canada shall have exclusive jurisdiction to resolve any dispute which may arise in connection with these terms.
                </p>
              </section>

              <section id="disputes">
                <h2 className="text-foreground font-bold text-xl mb-3">6. Dispute Resolution</h2>
                <p>
                  Any dispute arising out of or in connection with this contract, including any question regarding its existence, validity, or termination, shall be referred to and finally resolved by arbitration under the rules of the American Arbitration Association (AAA) for US residents, or the ADR Institute of Canada for Canadian residents.
                </p>
              </section>
            </div>

            <div className="mt-12 pt-6 border-t border-border/60 flex flex-wrap gap-6 text-sm">
              <Link href="/privacy-policy" className="text-primary hover:underline font-medium">
                Privacy Policy
              </Link>
              <Link href="/contact" className="text-primary hover:underline font-medium">
                Contact us
              </Link>
            </div>
          </div>
        </div>
      </main>

      <div className="relative z-10">
        <SiteFooter />
      </div>
      <PageSchema schema={schema} />
    </div>
  );
}