'use client';

import { useState } from "react";
import { useAnalytics } from "mentiq-sdk";

export function PaymentForm() {
  const { track } = useAnalytics();
  const [cardNumber, setCardNumber] = useState("");

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    
    // Track payment initiation (no sensitive data)
    track("payment_submitted", {
      payment_method: "card",
      card_brand: detectCardBrand(cardNumber), // Generic info only
      // Never include full card number!
    });
  };

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label htmlFor="name">Name on Card</label>
        <input
          id="name"
          type="text"
          className="mentiq-mask" // Mask the name
        />
      </div>

      <div>
        <label htmlFor="card">Card Number</label>
        <input
          id="card"
          type="text"
          className="mentiq-block" // Block completely
          value={cardNumber}
          onChange={(e) => setCardNumber(e.target.value)}
        />
      </div>

      <div>
        <label htmlFor="cvv">CVV</label>
        <input
          id="cvv"
          type="text"
          className="mentiq-block" // Block completely
          maxLength={4}
        />
      </div>

      <button type="submit">Pay Now</button>
    </form>
  );
}

'use client';

import { useState, useEffect } from "react";
import { useAnalytics } from "mentiq-sdk";

export function CookieConsent() {
  const [consent, setConsent] = useState<boolean | null>(null);
  const { track, startRecording, stopRecording } = useAnalytics();

  useEffect(() => {
    // Check existing consent
    const stored = localStorage.getItem("analytics_consent");
    if (stored) {
      setConsent(stored === "true");
    }
  }, []);

  useEffect(() => {
    if (consent === true) {
      // User consented - enable full tracking
      track("consent_granted");
      startRecording();
    } else if (consent === false) {
      // User declined - stop tracking
      stopRecording();
    }
  }, [consent, track, startRecording, stopRecording]);

  const handleAccept = () => {
    localStorage.setItem("analytics_consent", "true");
    setConsent(true);
  };

  const handleDecline = () => {
    localStorage.setItem("analytics_consent", "false");
    setConsent(false);
  };

  if (consent !== null) return null;

  return (
    <div className="cookie-banner">
      <p>
        We use cookies and analytics to improve your experience.
        <a href="/privacy">Learn more</a>
      </p>
      <button onClick={handleAccept}>Accept</button>
      <button onClick={handleDecline}>Decline</button>
    </div>
  );
}

'use client';

import { useState, useEffect } from "react";
import { AnalyticsProvider } from "mentiq-sdk";

function ConditionalAnalytics({ children }: { children: React.ReactNode }) {
  const [hasConsent, setHasConsent] = useState(false);

  useEffect(() => {
    const consent = localStorage.getItem("analytics_consent");
    setHasConsent(consent === "true");
  }, []);

  if (!hasConsent) {
    return <>{children}</>; // No analytics
  }

  return (
    <AnalyticsProvider
      config={{
        apiKey: process.env.NEXT_PUBLIC_MENTIQ_API_KEY!,
        projectId: process.env.NEXT_PUBLIC_MENTIQ_PROJECT_ID!,
        enableSessionRecording: true,
        enableErrorTracking: true,
      }}
    >
      {children}
    </AnalyticsProvider>
  );
}

import { NextRequest, NextResponse } from "next/server";

export async function POST(request: NextRequest) {
  const { userId } = await request.json();

  // 1. Delete from MentiQ Analytics backend
  await fetch(
    `${process.env.MENTIQ_ENDPOINT}/api/v1/users/${userId}`,
    {
      method: "DELETE",
      headers: {
        Authorization: `ApiKey ${process.env.MENTIQ_API_KEY}`,
        "X-Project-ID": process.env.MENTIQ_PROJECT_ID!,
      },
    }
  );

  // 2. Delete from your database
  await db.user.delete({ where: { id: userId } });

  // 3. Clear any cached data
  await redis.del(`user:${userId}`);

  return NextResponse.json({ success: true });
}

'use client';

import { useState } from "react";
import { useAnalytics } from "mentiq-sdk";

export function PrivacySettings() {
  const { stopRecording, startRecording } = useAnalytics();
  const [recordingEnabled, setRecordingEnabled] = useState(true);

  const toggleRecording = (enabled: boolean) => {
    if (enabled) {
      startRecording();
      localStorage.setItem("mentiq_recording_enabled", "true");
    } else {
      stopRecording();
      localStorage.setItem("mentiq_recording_enabled", "false");
    }
    setRecordingEnabled(enabled);
  };

  return (
    <div>
      <h2>Privacy Settings</h2>
      
      <label>
        <input
          type="checkbox"
          checked={recordingEnabled}
          onChange={(e) => toggleRecording(e.target.checked)}
        />
        Enable session recording
      </label>
      
      <p className="text-sm text-gray-600">
        Session recording helps us improve the product. 
        Your sensitive data is always masked.
      </p>
    </div>
  );
}