import type { MetaFunction } from "react-router";

export const meta: MetaFunction = () => [
  { title: "Privacy Policy – ConverseCart AI Chat Assistant" },
  { name: "description", content: "Privacy Policy for ConverseCart AI Chat Assistant Shopify App by Digi Horizon Technologies." },
];

export default function PrivacyPage() {
  return (
    <div style={{ fontFamily: "Inter, system-ui, sans-serif", maxWidth: 800, margin: "0 auto", padding: "48px 24px", color: "#1f2937", lineHeight: 1.7 }}>
      {/* Header */}
      <div style={{ display: "flex", alignItems: "center", gap: 16, marginBottom: 40 }}>
        <div style={{ width: 48, height: 48, background: "#4F46E5", borderRadius: 12, display: "flex", alignItems: "center", justifyContent: "center" }}>
          <span style={{ color: "#fff", fontSize: 24 }}>💬</span>
        </div>
        <div>
          <h1 style={{ margin: 0, fontSize: 28, fontWeight: 700, color: "#111827" }}>Privacy Policy</h1>
          <p style={{ margin: 0, color: "#6b7280", fontSize: 14 }}>ConverseCart AI Chat Assistant</p>
        </div>
      </div>

      <p style={{ color: "#6b7280", fontSize: 14, marginBottom: 32 }}>
        <strong>Last updated:</strong> September 2026 &nbsp;|&nbsp;
        <strong>Developer:</strong> Digi Horizon Technologies &nbsp;|&nbsp;
        <a href="mailto:ashvin@digihorizon.in" style={{ color: "#4F46E5" }}>ashvin@digihorizon.in</a>
      </p>

      <hr style={{ border: "none", borderTop: "1px solid #e5e7eb", marginBottom: 32 }} />

      <Section title="1. Overview">
        <p>
          ConverseCart AI Chat Assistant ("the App") is developed and maintained by Digi Horizon Technologies. This Privacy
          Policy explains how we collect, use, store, and protect information when merchants install the App on their
          Shopify store and when customers interact with the chat widget on those stores.
        </p>
      </Section>

      <Section title="2. Information We Collect">
        <SubHeading>From Merchants (Store Owners)</SubHeading>
        <ul>
          <li>Shopify store domain and access token (required to operate the App)</li>
          <li>Product catalog data (titles, descriptions, prices, images) — synced from your store</li>
          <li>Blog articles and custom knowledge base content you upload</li>
          <li>App configuration settings (bot name, colors, AI model selection)</li>
          <li>Billing and subscription status (managed entirely by Shopify Billing API)</li>
        </ul>

        <SubHeading>From Store Customers (End Users)</SubHeading>
        <ul>
          <li>Anonymous chat session messages (temporary, not linked to customer identity)</li>
          <li>Customer-provided text in chat (questions, order numbers typed in conversation)</li>
          <li>Browser session data (session ID, referrer URL) — not persisted after session ends</li>
        </ul>

        <p>
          <strong>We do NOT collect:</strong> passwords, payment card information, full customer names, email addresses,
          or any biometric data.
        </p>
      </Section>

      <Section title="3. How We Use Your Information">
        <ul>
          <li>To provide AI-powered product recommendations and answer customer questions</li>
          <li>To sync your store catalog so the chatbot can reference real products</li>
          <li>To display order status information when customers ask (read-only)</li>
          <li>To improve chatbot response accuracy over time (anonymised, aggregate only)</li>
          <li>To send in-app notifications about usage, billing, and app updates</li>
        </ul>
        <p>We do <strong>not</strong> sell, rent, or share your data with third parties for marketing purposes.</p>
      </Section>

      <Section title="4. Third-Party Services">
        <p>The App uses the following third-party AI providers to process chat messages:</p>
        <ul>
          <li><strong>OpenAI API</strong> — Chat messages are sent to OpenAI for AI response generation. OpenAI does not retain conversation data beyond the API call under our usage agreement.</li>
          <li><strong>Google Gemini API</strong> — Optional alternative AI provider with the same data handling guarantees.</li>
        </ul>
        <p>
          Merchants who use their own API keys (BYOK — Bring Your Own Key) are governed by their individual agreements
          with these providers.
        </p>
      </Section>

      <Section title="5. Data Retention">
        <ul>
          <li><strong>Chat sessions:</strong> Anonymised session logs retained for up to 30 days, then automatically deleted</li>
          <li><strong>Product catalog cache:</strong> Retained while the App is installed; deleted on uninstall</li>
          <li><strong>Knowledge base content:</strong> Retained until manually deleted by the merchant</li>
          <li><strong>App configuration:</strong> Deleted within 30 days of app uninstallation</li>
        </ul>
      </Section>

      <Section title="6. Customer Rights (GDPR / CCPA)">
        <p>If you are a merchant or a customer located in the European Union, United Kingdom, or California, you have the right to:</p>
        <ul>
          <li>Request access to the personal data we hold about you</li>
          <li>Request correction or deletion of your personal data</li>
          <li>Object to or restrict processing of your personal data</li>
          <li>Request data portability</li>
        </ul>
        <p>
          To exercise these rights, contact us at{" "}
          <a href="mailto:ashvin@digihorizon.in" style={{ color: "#4F46E5" }}>
            ashvin@digihorizon.in
          </a>. We will respond within 30 days.
        </p>
      </Section>

      <Section title="7. Shopify Mandatory Privacy Webhooks">
        <p>We fully support all three of Shopify's mandatory privacy webhooks:</p>
        <table style={{ width: "100%", borderCollapse: "collapse", fontSize: 14 }}>
          <thead>
            <tr style={{ background: "#f9fafb" }}>
              <th style={{ textAlign: "left", padding: "10px 12px", border: "1px solid #e5e7eb" }}>Webhook</th>
              <th style={{ textAlign: "left", padding: "10px 12px", border: "1px solid #e5e7eb" }}>Action Taken</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td style={{ padding: "10px 12px", border: "1px solid #e5e7eb" }}>customers/redact</td>
              <td style={{ padding: "10px 12px", border: "1px solid #e5e7eb" }}>All chat sessions linked to the customer are permanently deleted</td>
            </tr>
            <tr style={{ background: "#f9fafb" }}>
              <td style={{ padding: "10px 12px", border: "1px solid #e5e7eb" }}>customers/data_request</td>
              <td style={{ padding: "10px 12px", border: "1px solid #e5e7eb" }}>We compile and email any data held for the customer within 30 days</td>
            </tr>
            <tr>
              <td style={{ padding: "10px 12px", border: "1px solid #e5e7eb" }}>shop/redact</td>
              <td style={{ padding: "10px 12px", border: "1px solid #e5e7eb" }}>All store data (catalog, settings, sessions) is permanently deleted within 48 hours</td>
            </tr>
          </tbody>
        </table>
      </Section>

      <Section title="8. Security">
        <p>
          We implement industry-standard security measures including AES-256 encryption for stored API keys, HTTPS for
          all data in transit, and strict per-tenant data isolation so no store can access another store's data.
        </p>
      </Section>

      <Section title="9. Cookies">
        <p>
          The chat widget uses a single first-party session cookie (<code>cc_session_id</code>) to maintain conversation
          continuity during a browser session. This cookie expires when the browser is closed and contains no personally
          identifiable information.
        </p>
      </Section>

      <Section title="10. Changes to This Policy">
        <p>
          We may update this Privacy Policy from time to time. We will notify merchants of significant changes via
          in-app notification and by updating the "Last updated" date above.
        </p>
      </Section>

      <Section title="11. Contact Us">
        <p>For any privacy-related questions or requests:</p>
        <div style={{ background: "#f9fafb", border: "1px solid #e5e7eb", borderRadius: 8, padding: "20px 24px", marginTop: 12 }}>
          <p style={{ margin: "0 0 4px" }}><strong>Digi Horizon Technologies</strong></p>
          <p style={{ margin: "0 0 4px" }}>📧 <a href="mailto:ashvin@digihorizon.in" style={{ color: "#4F46E5" }}>ashvin@digihorizon.in</a></p>
          <p style={{ margin: 0 }}>🌐 <a href="https://www.digihorizon.in/" style={{ color: "#4F46E5" }}>https://www.digihorizon.in/</a></p>
        </div>
      </Section>

      <hr style={{ border: "none", borderTop: "1px solid #e5e7eb", marginTop: 48, marginBottom: 24 }} />
      <p style={{ textAlign: "center", color: "#9ca3af", fontSize: 13 }}>
        © 2026 Digi Horizon Technologies. All rights reserved. &nbsp;|&nbsp;
        <a href="/help" style={{ color: "#4F46E5" }}>Help Center</a>
      </p>
    </div>
  );
}

function Section({ title, children }: { title: string; children: React.ReactNode }) {
  return (
    <div style={{ marginBottom: 36 }}>
      <h2 style={{ fontSize: 20, fontWeight: 600, color: "#111827", marginBottom: 12 }}>{title}</h2>
      {children}
    </div>
  );
}

function SubHeading({ children }: { children: React.ReactNode }) {
  return <h3 style={{ fontSize: 16, fontWeight: 600, color: "#374151", marginBottom: 8, marginTop: 16 }}>{children}</h3>;
}