"use client";

import Link from "next/link";
import { Shield } from "lucide-react";
import { MarketingNav } from "@/components/marketing/nav";
import { MarketingFooter } from "@/components/marketing/footer";

function Section({
  id,
  title,
  children,
}: {
  id: string;
  title: string;
  children: React.ReactNode;
}) {
  return (
    <section id={id} className="scroll-mt-24">
      <h2 className="text-xl font-bold tracking-tight mb-4">{title}</h2>
      <div className="space-y-4 text-[15px] leading-relaxed text-muted-foreground">
        {children}
      </div>
    </section>
  );
}

const EFFECTIVE_DATE = "April 16, 2026";

export default function PrivacyPolicyPage() {
  return (
    <div className="min-h-screen bg-background">
      <MarketingNav />

      {/* Hero */}
      <section className="relative pt-32 pb-12 sm:pt-40 sm:pb-16 overflow-hidden">
        <div className="absolute inset-0 gradient-mesh pointer-events-none" />
        <div className="relative mx-auto max-w-3xl px-6 text-center">
          <div className="inline-flex items-center gap-2 rounded-full border border-border/60 bg-card/60 px-4 py-1.5 text-xs font-medium text-muted-foreground mb-8 glass">
            <Shield className="h-3.5 w-3.5" />
            Your data, your trust
          </div>
          <h1 className="text-3xl sm:text-4xl font-bold tracking-tight leading-[1.1] mb-4">
            Privacy Policy
          </h1>
          <p className="text-muted-foreground">
            Effective {EFFECTIVE_DATE}
          </p>
        </div>
      </section>

      {/* Body */}
      <article className="mx-auto max-w-3xl px-6 pb-24 space-y-12">
        {/* Intro */}
        <div className="text-[15px] leading-relaxed text-muted-foreground space-y-4">
          <p>
            Echo (&ldquo;we,&rdquo; &ldquo;us,&rdquo; or &ldquo;our&rdquo;) provides
            AI-powered response card scanning for churches, ministries, and nonprofits.
            This Privacy Policy explains how we collect, use, store, and protect personal
            information when you use the Echo platform at{" "}
            <Link href="/welcome" className="underline hover:text-foreground">
              echoocr.com
            </Link>{" "}
            (the &ldquo;Service&rdquo;).
          </p>
          <p>
            We take the protection of your congregation&rsquo;s personal data seriously. Many of the
            individuals whose information flows through Echo &mdash; first-time guests, prayer
            request submitters, families &mdash; have entrusted that data to your church.
            We treat it with the same care you do.
          </p>
        </div>

        {/* TOC */}
        <nav className="rounded-xl border border-border/50 bg-card/40 p-6 glass-card">
          <h2 className="text-sm font-semibold mb-3">Contents</h2>
          <ol className="grid sm:grid-cols-2 gap-x-8 gap-y-1.5 text-sm text-muted-foreground list-decimal list-inside">
            {[
              ["#information-we-collect", "Information We Collect"],
              ["#how-we-use", "How We Use Your Information"],
              ["#ai-processing", "AI Processing & OCR"],
              ["#third-party-integrations", "Third-Party Integrations"],
              ["#subprocessors", "Subprocessors"],
              ["#data-storage", "Data Storage & Security"],
              ["#data-retention", "Data Retention & Deletion"],
              ["#your-rights", "Your Rights"],
              ["#children", "Children\u2019s Privacy"],
              ["#international", "International Data"],
              ["#changes", "Changes to This Policy"],
              ["#contact", "Contact Us"],
            ].map(([href, label]) => (
              <li key={href}>
                <a href={href} className="hover:text-foreground transition-colors">
                  {label}
                </a>
              </li>
            ))}
          </ol>
        </nav>

        {/* 1 */}
        <Section id="information-we-collect" title="1. Information We Collect">
          <h3 className="text-base font-semibold text-foreground mt-2">
            a) Account Information
          </h3>
          <p>
            When you create an Echo account, we collect your <strong>display name</strong>,{" "}
            <strong>email address</strong>, and a <strong>password</strong> (stored as a
            bcrypt hash &mdash; we never store passwords in plain text). If you sign in via
            single sign-on (SSO/OIDC), we receive a unique identifier and email from your
            identity provider.
          </p>

          <h3 className="text-base font-semibold text-foreground mt-6">
            b) Organization & Team Data
          </h3>
          <p>
            Organization administrators provide an <strong>organization name</strong>,{" "}
            <strong>type</strong> (e.g., church), <strong>timezone</strong>, and optionally{" "}
            <strong>allowed email domains</strong> for auto-join. Team member records include
            the member&rsquo;s role (owner, admin, editor, reviewer, or viewer) and the date
            they joined.
          </p>

          <h3 className="text-base font-semibold text-foreground mt-6">
            c) Scanned Card Data (Congregation PII)
          </h3>
          <p>
            This is the most sensitive category. When your team scans or uploads response
            cards, our AI extracts fields that may include:
          </p>
          <ul className="list-disc list-inside space-y-1 ml-2">
            <li>Full name, gender, date of birth, marital status</li>
            <li>Email address, cell phone, home phone</li>
            <li>Mailing address (street, apartment, city, state, ZIP)</li>
            <li>Prayer requests (including confidential flags)</li>
            <li>Spiritual decisions and next steps (e.g., baptism, salvation)</li>
            <li>Visit type, attendance history, campus preferences</li>
            <li>How the visitor heard about your church</li>
            <li>Service time attended, message topics of interest</li>
          </ul>
          <p>
            We also store the <strong>original scanned images</strong> (PDF, JPEG, PNG) and{" "}
            <strong>processed front/back card images</strong> in encrypted object storage.
          </p>

          <h3 className="text-base font-semibold text-foreground mt-6">
            d) Usage & Technical Data
          </h3>
          <p>
            We collect standard server logs including IP addresses, browser user-agent
            strings, page views, and timestamps. We use this data for security monitoring,
            performance optimization, and debugging &mdash; not for advertising.
          </p>
        </Section>

        {/* 2 */}
        <Section id="how-we-use" title="2. How We Use Your Information">
          <p>We use the information we collect to:</p>
          <ul className="list-disc list-inside space-y-1 ml-2">
            <li>
              <strong>Provide the Service</strong> &mdash; process scanned cards with AI OCR,
              display results in your dashboard, and sync data to your integrations
            </li>
            <li>
              <strong>Authenticate and authorize</strong> &mdash; verify your identity,
              manage team roles, and enforce permissions
            </li>
            <li>
              <strong>Send transactional emails</strong> &mdash; email verification,
              team invitations, and service notices (we do not send marketing emails)
            </li>
            <li>
              <strong>Maintain and improve the Service</strong> &mdash; fix bugs, monitor
              performance, and develop new features
            </li>
            <li>
              <strong>Enforce our Terms</strong> &mdash; detect abuse and protect the
              security of the platform
            </li>
          </ul>
          <p>
            We <strong>never</strong> sell personal data. We do <strong>not</strong> use
            your congregation&rsquo;s scanned card data to train AI models, build advertising
            profiles, or for any purpose other than providing the Service to your organization.
          </p>
        </Section>

        {/* 3 */}
        <Section id="ai-processing" title="3. AI Processing & OCR">
          <p>
            Echo uses vision AI models to extract text and structured data from scanned
            card images. When a card is processed:
          </p>
          <ul className="list-disc list-inside space-y-1 ml-2">
            <li>
              The card image is sent to an AI model provider (by default,{" "}
              <strong>OpenAI via the Vercel AI Gateway</strong>) along with a structured
              extraction prompt
            </li>
            <li>
              The AI returns structured field data (name, email, prayer requests, etc.)
              which is stored in your organization&rsquo;s database
            </li>
            <li>
              Self-hosted organizations may configure a local <strong>Ollama</strong> instance
              for fully on-premises processing, meaning card images never leave your network
            </li>
          </ul>
          <p>
            We use OpenAI&rsquo;s API, which, per their enterprise data use policies, does
            not use API inputs to train their models. The Vercel AI Gateway acts as a
            routing proxy and does not persistently store your image data.
          </p>
        </Section>

        {/* 4 */}
        <Section id="third-party-integrations" title="4. Third-Party Integrations">
          <p>
            Echo can send scanned card data to external services <strong>that you
            explicitly configure</strong>. No data is sent to third parties unless your
            organization enables an integration. Available integrations include:
          </p>
          <div className="overflow-x-auto">
            <table className="w-full text-sm border border-border/50 rounded-lg overflow-hidden">
              <thead>
                <tr className="bg-muted/30">
                  <th className="text-left p-3 font-semibold text-foreground">Integration</th>
                  <th className="text-left p-3 font-semibold text-foreground">Data Sent</th>
                </tr>
              </thead>
              <tbody className="divide-y divide-border/30">
                <tr>
                  <td className="p-3 font-medium text-foreground">Planning Center</td>
                  <td className="p-3">Name, email, phone, gender &mdash; used to match or create people records and manage list membership</td>
                </tr>
                <tr>
                  <td className="p-3 font-medium text-foreground">Google Sheets</td>
                  <td className="p-3">Mapped card fields appended as rows to your specified spreadsheet</td>
                </tr>
                <tr>
                  <td className="p-3 font-medium text-foreground">Monday.com</td>
                  <td className="p-3">Mapped card fields as board item columns; optionally card images as file attachments</td>
                </tr>
                <tr>
                  <td className="p-3 font-medium text-foreground">Airtable</td>
                  <td className="p-3">Mapped card fields as Airtable record fields</td>
                </tr>
                <tr>
                  <td className="p-3 font-medium text-foreground">Webhooks</td>
                  <td className="p-3">Full card data as JSON payload to your specified URL, with optional HMAC-SHA256 signature verification</td>
                </tr>
                <tr>
                  <td className="p-3 font-medium text-foreground">CSV Export</td>
                  <td className="p-3">Downloadable file generated locally &mdash; no data sent to external servers</td>
                </tr>
              </tbody>
            </table>
          </div>
          <p>
            Each integration uses <strong>your own credentials</strong> (OAuth tokens, API
            keys, or personal access tokens) and field mappings that you control. You can
            disable any integration at any time.
          </p>
        </Section>

        {/* 5 */}
        <Section id="subprocessors" title="5. Subprocessors">
          <p>
            We use the following third-party services to operate Echo:
          </p>
          <div className="overflow-x-auto">
            <table className="w-full text-sm border border-border/50 rounded-lg overflow-hidden">
              <thead>
                <tr className="bg-muted/30">
                  <th className="text-left p-3 font-semibold text-foreground">Provider</th>
                  <th className="text-left p-3 font-semibold text-foreground">Purpose</th>
                  <th className="text-left p-3 font-semibold text-foreground">Data Processed</th>
                </tr>
              </thead>
              <tbody className="divide-y divide-border/30">
                <tr>
                  <td className="p-3 font-medium text-foreground">Supabase</td>
                  <td className="p-3">Managed PostgreSQL database and S3-compatible object storage</td>
                  <td className="p-3">All application data, card images, and uploaded files</td>
                </tr>
                <tr>
                  <td className="p-3 font-medium text-foreground">Vercel</td>
                  <td className="p-3">Application hosting, edge network, and AI Gateway</td>
                  <td className="p-3">HTTP requests, server-side rendering, AI API routing</td>
                </tr>
                <tr>
                  <td className="p-3 font-medium text-foreground">OpenAI</td>
                  <td className="p-3">AI vision model for OCR extraction (via Vercel AI Gateway)</td>
                  <td className="p-3">Card images and extraction prompts (not used for model training)</td>
                </tr>
                <tr>
                  <td className="p-3 font-medium text-foreground">Upstash</td>
                  <td className="p-3">QStash message queue for async job processing</td>
                  <td className="p-3">Job IDs and processing metadata (no card PII)</td>
                </tr>
                <tr>
                  <td className="p-3 font-medium text-foreground">Brevo</td>
                  <td className="p-3">Transactional email delivery</td>
                  <td className="p-3">Recipient email addresses and email content (verification links, invitations)</td>
                </tr>
              </tbody>
            </table>
          </div>
        </Section>

        {/* 6 */}
        <Section id="data-storage" title="6. Data Storage & Security">
          <p>We implement multiple layers of security to protect your data:</p>
          <ul className="list-disc list-inside space-y-1 ml-2">
            <li>
              <strong>Encryption in transit</strong> &mdash; all connections use TLS/HTTPS
            </li>
            <li>
              <strong>Encryption at rest</strong> &mdash; database and object storage are
              encrypted at rest via our infrastructure providers (Supabase, AWS)
            </li>
            <li>
              <strong>Password security</strong> &mdash; passwords are hashed using bcrypt
              with a cost factor of 12; we never store or log plain-text passwords
            </li>
            <li>
              <strong>Role-based access control</strong> &mdash; five permission tiers
              (owner, admin, editor, reviewer, viewer) restrict who can view, edit,
              delete, and export card data within your organization
            </li>
            <li>
              <strong>Invitation-only teams</strong> &mdash; team members must be explicitly
              invited by an admin or owner; optional domain-based auto-join
            </li>
            <li>
              <strong>Email verification</strong> &mdash; required to confirm account
              ownership
            </li>
            <li>
              <strong>API key security</strong> &mdash; API keys are stored as hashes with
              only a short prefix visible; keys can be scoped with specific permissions and
              expiration dates
            </li>
            <li>
              <strong>Webhook signatures</strong> &mdash; outbound webhook payloads can be
              signed with HMAC-SHA256 so you can verify authenticity
            </li>
            <li>
              <strong>Job queue verification</strong> &mdash; async processing jobs verify
              Upstash cryptographic signatures before execution
            </li>
          </ul>
        </Section>

        {/* 7 */}
        <Section id="data-retention" title="7. Data Retention & Deletion">
          <h3 className="text-base font-semibold text-foreground mt-2">
            Configurable Retention
          </h3>
          <p>
            Organization administrators can configure retention periods for:
          </p>
          <ul className="list-disc list-inside space-y-1 ml-2">
            <li>
              <strong>Source uploads</strong> (original PDFs/images) &mdash; default 30 days
            </li>
            <li>
              <strong>Card images</strong> (processed front/back images) &mdash; default 180
              days
            </li>
          </ul>
          <p>
            When retention periods expire, files are permanently deleted from object
            storage. The structured data extracted from cards (names, contact info, etc.)
            is retained in the database until explicitly deleted.
          </p>

          <h3 className="text-base font-semibold text-foreground mt-6">
            Manual Deletion
          </h3>
          <p>
            Organization admins and owners can delete individual cards at any time. Deletion
            removes the database record <strong>and</strong> all associated images from
            object storage permanently. Deleted data cannot be recovered.
          </p>

          <h3 className="text-base font-semibold text-foreground mt-6">
            Account Deletion
          </h3>
          <p>
            To request deletion of your account and all associated data, please contact us
            at{" "}
            <a href="mailto:support@stillwell.cloud?subject=Privacy%20inquiry" className="underline hover:text-foreground">
              support@stillwell.cloud
            </a>
            . We will process deletion requests within 30 days.
          </p>
        </Section>

        {/* 8 */}
        <Section id="your-rights" title="8. Your Rights">
          <p>
            Depending on your jurisdiction, you may have the right to:
          </p>
          <ul className="list-disc list-inside space-y-1 ml-2">
            <li>
              <strong>Access</strong> &mdash; request a copy of the personal data we hold
              about you
            </li>
            <li>
              <strong>Correction</strong> &mdash; request correction of inaccurate data
            </li>
            <li>
              <strong>Deletion</strong> &mdash; request deletion of your personal data
            </li>
            <li>
              <strong>Data portability</strong> &mdash; export your data via CSV export or
              the API
            </li>
            <li>
              <strong>Restriction</strong> &mdash; request that we limit processing of your
              data
            </li>
            <li>
              <strong>Objection</strong> &mdash; object to processing of your data for
              certain purposes
            </li>
          </ul>
          <p>
            For scanned card data (congregation PII), your church or organization is the{" "}
            <strong>data controller</strong>. Echo acts as a <strong>data processor</strong>{" "}
            on behalf of your organization. Individuals whose data appears on scanned cards
            should direct access, correction, or deletion requests to the church or
            organization that collected their information.
          </p>
          <p>
            To exercise your rights regarding your Echo account, contact us at{" "}
            <a href="mailto:support@stillwell.cloud?subject=Privacy%20inquiry" className="underline hover:text-foreground">
              support@stillwell.cloud
            </a>
            .
          </p>
        </Section>

        {/* 9 */}
        <Section id="children" title="9. Children&rsquo;s Privacy">
          <p>
            Echo is not directed at children under 13. We do not knowingly collect personal
            information from children under 13. Scanned response cards may occasionally
            contain information about minors (e.g., children&rsquo;s ministry forms).
            This data is processed under the authority and responsibility of the
            organization that collected it.
          </p>
          <p>
            If you believe we have inadvertently collected information from a child under 13
            without appropriate consent, please contact us immediately at{" "}
            <a href="mailto:support@stillwell.cloud?subject=Privacy%20inquiry" className="underline hover:text-foreground">
              support@stillwell.cloud
            </a>
            .
          </p>
        </Section>

        {/* 10 */}
        <Section id="international" title="10. International Data">
          <p>
            Echo&rsquo;s infrastructure is hosted in the United States. If you access the
            Service from outside the United States, your data will be transferred to and
            processed in the United States. By using the Service, you consent to this
            transfer.
          </p>
        </Section>

        {/* 11 */}
        <Section id="changes" title="11. Changes to This Policy">
          <p>
            We may update this Privacy Policy from time to time. If we make material
            changes, we will notify you by posting a prominent notice on the Service or
            sending you an email. Your continued use of the Service after changes take
            effect constitutes acceptance of the revised policy.
          </p>
        </Section>

        {/* 12 */}
        <Section id="contact" title="12. Contact Us">
          <p>
            If you have questions about this Privacy Policy or our data practices, please
            contact us:
          </p>
          <ul className="list-none space-y-1 ml-2">
            <li>
              Email:{" "}
              <a href="mailto:support@stillwell.cloud?subject=Privacy%20inquiry" className="underline hover:text-foreground">
                support@stillwell.cloud
              </a>
            </li>
            <li>
              General support:{" "}
              <a href="mailto:support@stillwell.cloud" className="underline hover:text-foreground">
                support@stillwell.cloud
              </a>
            </li>
          </ul>
        </Section>
      </article>

      <MarketingFooter />
    </div>
  );
}
