import { Link } from "react-router-dom";
import Navbar from "@/components/Navbar";
import Footer from "@/components/Footer";

const SECTIONS = [
  { id: "information", title: "Information We Collect" },
  { id: "how-we-use", title: "How We Use Your Information" },
  { id: "storage", title: "Data Storage and Security" },
  { id: "third-parties", title: "Third-Party Services and Sharing" },
  { id: "cookies", title: "Cookie Usage" },
  { id: "your-rights", title: "Your Rights" },
  { id: "gdpr", title: "GDPR Compliance" },
  { id: "contact", title: "Contact Us" },
];

const Privacy = () => (
  <div className="min-h-screen bg-background">
    <Navbar />
    <main className="pt-24 pb-0">
      {/* Header */}
      <section className="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 py-10 border-b border-border">
        <div className="text-xs font-semibold text-primary uppercase tracking-widest mb-3">Legal</div>
        <h1 className="font-display font-bold text-4xl text-foreground mb-3">Privacy Policy</h1>
        <p className="text-muted-foreground">Last updated: February 20, 2026</p>
        <p className="text-muted-foreground mt-3 leading-relaxed">
          ChatSKU is committed to protecting your privacy. This policy explains what data we collect, how we use it, and your rights as a user of our platform.
        </p>
      </section>

      <div className="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 py-10 flex gap-12">
        {/* TOC */}
        <aside className="hidden lg:block w-52 flex-shrink-0">
          <div className="sticky top-24">
            <div className="text-xs font-semibold text-muted-foreground uppercase tracking-widest mb-3">Contents</div>
            <nav className="space-y-1">
              {SECTIONS.map((s) => (
                <a
                  key={s.id}
                  href={`#${s.id}`}
                  className="block text-sm text-muted-foreground hover:text-primary transition-colors py-1"
                >
                  {s.title}
                </a>
              ))}
            </nav>
          </div>
        </aside>

        {/* Content */}
        <article className="flex-1 prose-style space-y-10 text-sm leading-relaxed text-muted-foreground">
          <section id="information">
            <h2 className="font-display font-bold text-xl text-foreground mb-3">Information We Collect</h2>
            <p className="mb-3">We collect information to provide and improve our services. The categories of data we may collect include:</p>
            <ul className="space-y-2 list-none pl-0">
              {[
                { label: "Account Information", desc: "Company name, full name, email address, and password hash when you register." },
                { label: "Product Data", desc: "Catalog content, SKUs, pricing, images, and descriptions you upload to our platform." },
                { label: "Widget Usage Data", desc: "Interactions with your ChatSKU chat widget, including search queries, product views, and quote activity." },
                { label: "Chat Interaction Data", desc: "Conversation logs between your customers and the AI widget, used to improve response quality." },
                { label: "Technical Data", desc: "IP address, browser type, device type, operating system, and access logs." },
                { label: "Billing Information", desc: "Payment method details are processed and stored by our payment provider (Stripe). We do not store raw card numbers." },
              ].map(({ label, desc }) => (
                <li key={label} className="flex gap-3">
                  <div className="w-1.5 h-1.5 rounded-full bg-primary mt-2 flex-shrink-0" />
                  <span><strong className="text-foreground">{label}:</strong> {desc}</span>
                </li>
              ))}
            </ul>
          </section>

          <section id="how-we-use">
            <h2 className="font-display font-bold text-xl text-foreground mb-3">How We Use Your Information</h2>
            <p className="mb-3">We use collected data to:</p>
            <ul className="space-y-2 list-none pl-0">
              {[
                "Provide, operate, and improve the ChatSKU platform and your AI chat widget",
                "Process quotes and enable B2B commerce workflows",
                "Send transactional emails (account confirmations, quote notifications, billing receipts)",
                "Analyze platform usage to improve features and performance",
                "Respond to support inquiries and troubleshoot issues",
                "Send occasional product updates and feature announcements (you may opt out at any time)",
                "Comply with legal obligations and enforce our Terms of Service",
              ].map((item) => (
                <li key={item} className="flex gap-3">
                  <div className="w-1.5 h-1.5 rounded-full bg-primary mt-2 flex-shrink-0" />
                  <span>{item}</span>
                </li>
              ))}
            </ul>
          </section>

          <section id="storage">
            <h2 className="font-display font-bold text-xl text-foreground mb-3">Data Storage and Security</h2>
            <p className="mb-3">Your data is stored on secure cloud infrastructure hosted in the United States, with regional options available for Enterprise customers. We implement industry-standard safeguards including:</p>
            <ul className="space-y-2 list-none pl-0">
              {[
                "AES-256 encryption at rest for all stored data",
                "TLS 1.3 encryption in transit for all API and widget communications",
                "Access controls limiting data access to authorised personnel only",
                "Regular security audits and penetration testing",
                "Automated backups with point-in-time recovery",
              ].map((item) => (
                <li key={item} className="flex gap-3">
                  <div className="w-1.5 h-1.5 rounded-full bg-primary mt-2 flex-shrink-0" />
                  <span>{item}</span>
                </li>
              ))}
            </ul>
          </section>

          <section id="third-parties">
            <h2 className="font-display font-bold text-xl text-foreground mb-3">Third-Party Services and Sharing</h2>
            <p className="mb-3">We do not sell your personal data. We may share data with third-party service providers that help us operate the platform, under strict data processing agreements:</p>
            <ul className="space-y-2 list-none pl-0">
              {[
                { name: "Stripe", purpose: "Payment processing" },
                { name: "OpenAI / AI providers", purpose: "Powering the AI chat widget responses" },
                { name: "Cloud infrastructure providers", purpose: "Secure data hosting and storage" },
                { name: "Analytics tools", purpose: "Aggregate usage analytics (no personally identifiable data shared)" },
              ].map(({ name, purpose }) => (
                <li key={name} className="flex gap-3">
                  <div className="w-1.5 h-1.5 rounded-full bg-primary mt-2 flex-shrink-0" />
                  <span><strong className="text-foreground">{name}:</strong> {purpose}</span>
                </li>
              ))}
            </ul>
            <p className="mt-3">We may disclose data when required by law or to protect the rights and safety of ChatSKU and its users.</p>
          </section>

          <section id="cookies">
            <h2 className="font-display font-bold text-xl text-foreground mb-3">Cookie Usage</h2>
            <p className="mb-3">ChatSKU uses cookies and similar tracking technologies to:</p>
            <ul className="space-y-2 list-none pl-0">
              {[
                "Maintain your authenticated session",
                "Remember your dashboard preferences",
                "Analyse aggregate usage patterns to improve the product",
                "Power the embedded chat widget on your customers' browsers",
              ].map((item) => (
                <li key={item} className="flex gap-3">
                  <div className="w-1.5 h-1.5 rounded-full bg-primary mt-2 flex-shrink-0" />
                  <span>{item}</span>
                </li>
              ))}
            </ul>
            <p className="mt-3">You may control cookie preferences through your browser settings. Disabling cookies may limit certain platform functionality.</p>
          </section>

          <section id="your-rights">
            <h2 className="font-display font-bold text-xl text-foreground mb-3">Your Rights</h2>
            <p className="mb-3">You have the following rights regarding your personal data:</p>
            <ul className="space-y-2 list-none pl-0">
              {[
                { right: "Access", desc: "Request a copy of the personal data we hold about you." },
                { right: "Correction", desc: "Request correction of inaccurate or incomplete data." },
                { right: "Deletion", desc: "Request deletion of your account and associated personal data." },
                { right: "Portability", desc: "Export your product catalog and account data in machine-readable format." },
                { right: "Objection", desc: "Object to processing of your data for marketing purposes." },
                { right: "Restriction", desc: "Request that we restrict processing of your data in certain circumstances." },
              ].map(({ right, desc }) => (
                <li key={right} className="flex gap-3">
                  <div className="w-1.5 h-1.5 rounded-full bg-primary mt-2 flex-shrink-0" />
                  <span><strong className="text-foreground">{right}:</strong> {desc}</span>
                </li>
              ))}
            </ul>
            <p className="mt-3">To exercise any of these rights, email <a href="mailto:privacy@chatsku.com" className="text-primary hover:underline">privacy@chatsku.com</a>.</p>
          </section>

          <section id="gdpr">
            <h2 className="font-display font-bold text-xl text-foreground mb-3">GDPR Compliance</h2>
            <p className="mb-3">If you are located in the European Economic Area (EEA), you are protected by the General Data Protection Regulation (GDPR). Our legal bases for processing your data include:</p>
            <ul className="space-y-2 list-none pl-0">
              {[
                "Performance of a contract (to provide the ChatSKU service you signed up for)",
                "Legitimate interests (improving our platform, fraud prevention)",
                "Consent (marketing communications, optional cookies)",
                "Legal obligation (compliance with applicable laws)",
              ].map((item) => (
                <li key={item} className="flex gap-3">
                  <div className="w-1.5 h-1.5 rounded-full bg-primary mt-2 flex-shrink-0" />
                  <span>{item}</span>
                </li>
              ))}
            </ul>
            <p className="mt-3">Data transfers outside the EEA are protected by Standard Contractual Clauses (SCCs) as approved by the European Commission.</p>
          </section>

          <section id="contact">
            <h2 className="font-display font-bold text-xl text-foreground mb-3">Contact Us</h2>
            <p>If you have questions about this Privacy Policy or wish to exercise your data rights, please contact our privacy team:</p>
            <div className="mt-4 p-4 rounded-xl bg-card border border-border">
              <p><strong className="text-foreground">Email:</strong> <a href="mailto:privacy@chatsku.com" className="text-primary hover:underline">privacy@chatsku.com</a></p>
              <p className="mt-1"><strong className="text-foreground">Response time:</strong> We aim to respond to all requests within 30 days.</p>
            </div>
          </section>
        </article>
      </div>
    </main>
    <Footer />
  </div>
);

export default Privacy;
