"use client";

import { motion } from "framer-motion";
import { Shield, Eye, Lock, CheckCircle } from "lucide-react";

export default function PrivacyPage() {
  return (
    <div className="min-h-screen bg-background">
      <div className="container mx-auto px-4 py-12 sm:px-6 lg:px-8">
        <motion.div
          className="mb-12 text-center"
          initial={{ opacity: 0, y: -20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.6 }}
        >
          <h1 className="mb-4 font-serif text-4xl font-bold text-primary sm:text-5xl">
            Política de Privacidad
          </h1>
          <p className="mx-auto max-w-2xl text-lg text-secondary">
            Tu privacidad es mi prioridad. Lee cómo protejo tu información personal.
          </p>
          <motion.div
            className="mx-auto h-1 w-24 bg-accent"
            initial={{ width: 0 }}
            animate={{ width: 96 }}
            transition={{ duration: 0.8, delay: 0.3 }}
          />
        </motion.div>

        <div className="space-y-8">
          <motion.section
            initial={{ opacity: 0, x: -30 }}
            animate={{ opacity: 1, x: 0 }}
            transition={{ duration: 0.6, delay: 0.2 }}
            className="rounded-2xl bg-white p-8 shadow-lg"
          >
            <div className="flex items-start gap-4">
              <div className="flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-primary/10">
                <Lock className="h-6 w-6 text-primary" />
              </div>
              <div>
                <h2 className="mb-3 font-serif text-xl font-semibold text-primary">
                  1. Información que Recopilo
                </h2>
                <p className="mb-3 text-secondary">
                  Recopilo información que me proporcionas directamente, incluyendo:
                </p>
                <ul className="list-inside list-disc space-y-2 text-secondary">
                  <li>Nombre y apellidos</li>
                  <li>Número de teléfono</li>
                  <li>Correo electrónico (opcional)</li>
                  <li>Información de contacto de emergencia</li>
                  <li>Información relevante para el proceso terapéutico</li>
                </ul>
              </div>
            </div>
          </motion.section>

          <motion.section
            initial={{ opacity: 0, x: -30 }}
            animate={{ opacity: 1, x: 0 }}
            transition={{ duration: 0.6, delay: 0.3 }}
            className="rounded-2xl bg-white p-8 shadow-lg"
          >
            <div className="flex items-start gap-4">
              <div className="flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-primary/10">
                <Eye className="h-6 w-6 text-primary" />
              </div>
              <div>
                <h2 className="mb-3 font-serif text-xl font-semibold text-primary">
                  2. Uso de tu Información
                </h2>
                <p className="mb-3 text-secondary">Utilizo tu información personal para:</p>
                <ul className="list-inside list-disc space-y-2 text-secondary">
                  <li>Gestionar tus citas y horarios</li>
                  <li>Coordinar sesiones de terapia</li>
                  <li>Enviar recordatorios y confirmaciones</li>
                  <li>Mantener registros de progreso terapéutico</li>
                  <li>Mejorar la calidad del servicio</li>
                </ul>
                <p className="mt-4 text-sm text-secondary">
                  Nunca compartiré tu información con terceros sin tu consentimiento explícito,
                  excepto cuando sea necesario para proporcionar los servicios contratados.
                </p>
              </div>
            </div>
          </motion.section>

          <motion.section
            initial={{ opacity: 0, x: -30 }}
            animate={{ opacity: 1, x: 0 }}
            transition={{ duration: 0.6, delay: 0.4 }}
            className="rounded-2xl bg-white p-8 shadow-lg"
          >
            <div className="flex items-start gap-4">
              <div className="flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-primary/10">
                <Shield className="h-6 w-6 text-primary" />
              </div>
              <div>
                <h2 className="mb-3 font-serif text-xl font-semibold text-primary">
                  3. Protección de tu Información
                </h2>
                <div className="space-y-4">
                  <div className="flex items-start gap-3">
                    <CheckCircle className="mt-0.5 h-5 w-5 flex-shrink-0 text-green-500" />
                    <div>
                      <p className="font-medium text-primary">Medidas de Seguridad</p>
                      <p className="text-sm text-secondary">
                        Todas las comunicaciones se realizan a través de canales seguros y
                        encriptados cuando es posible.
                      </p>
                    </div>
                  </div>
                  <div className="flex items-start gap-3">
                    <CheckCircle className="mt-0.5 h-5 w-5 flex-shrink-0 text-green-500" />
                    <div>
                      <p className="font-medium text-primary">Acceso Restringido</p>
                      <p className="text-sm text-secondary">
                        Solo tú y los profesionales autorizados tienen acceso a tu información
                        personal y expediente clínico.
                      </p>
                    </div>
                  </div>
                  <div className="flex items-start gap-3">
                    <CheckCircle className="mt-0.5 h-5 w-5 flex-shrink-0 text-green-500" />
                    <div>
                      <p className="font-medium text-primary">Almacenamiento Seguro</p>
                      <p className="text-sm text-secondary">
                        Tu información se almacena en servidores seguros con copias de seguridad
                        regulares.
                      </p>
                    </div>
                  </div>
                  <div className="flex items-start gap-3">
                    <CheckCircle className="mt-0.5 h-5 w-5 flex-shrink-0 text-green-500" />
                    <div>
                      <p className="font-medium text-primary">Confidencialidad Absoluta</p>
                      <p className="text-sm text-secondary">
                        Toda la información compartida en sesiones de terapia se mantiene bajo
                        estricto profesional y confidencial.
                      </p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </motion.section>

          <motion.section
            initial={{ opacity: 0, x: -30 }}
            animate={{ opacity: 1, x: 0 }}
            transition={{ duration: 0.6, delay: 0.5 }}
            className="rounded-2xl bg-white p-8 shadow-lg"
          >
            <div className="flex items-start gap-4">
              <div className="flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-primary/10">
                <Eye className="h-6 w-6 text-primary" />
              </div>
              <div>
                <h2 className="mb-3 font-serif text-xl font-semibold text-primary">
                  4. Tus Derechos
                </h2>
                <p className="mb-3 text-secondary">Tienes derecho a:</p>
                <ul className="list-inside list-disc space-y-2 text-secondary">
                  <li>Solicitar acceso a tu información personal en cualquier momento</li>
                  <li>Solicitar corrección de datos inexactos</li>
                  <li>Solicitar eliminación de tu información</li>
                  <li>Retirar tu consentimiento para procesar tus datos</li>
                  <li>Presentar quejas ante autoridades de protección de datos</li>
                </ul>
                <p className="mt-4 text-sm text-secondary">
                  Para ejercer estos derechos, contáctame a través de WhatsApp o correo electrónico.
                </p>
              </div>
            </div>
          </motion.section>

          <motion.section
            initial={{ opacity: 0, x: -30 }}
            animate={{ opacity: 1, x: 0 }}
            transition={{ duration: 0.6, delay: 0.6 }}
            className="rounded-2xl bg-white p-8 shadow-lg"
          >
            <div className="flex items-start gap-4">
              <div className="flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-primary/10">
                <Shield className="h-6 w-6 text-primary" />
              </div>
              <div>
                <h2 className="mb-3 font-serif text-xl font-semibold text-primary">
                  5. Datos de Contacto
                </h2>
                <p className="text-secondary">
                  Si tienes preguntas sobre esta política de privacidad o el manejo de tus datos
                  personales, puedes contactarme:
                </p>
                <div className="mt-4 space-y-3">
                  <div>
                    <p className="font-medium text-primary">Correo Electrónico</p>
                    <p className="text-accent">contacto@glorianino.com</p>
                  </div>
                  <div>
                    <p className="font-medium text-primary">WhatsApp</p>
                    <p className="text-accent">+52 55 1234 5678</p>
                  </div>
                </div>
                <p className="mt-6 text-sm text-secondary">
                  Esta política de privacidad fue actualizada por última vez en Enero de 2026.
                </p>
              </div>
            </div>
          </motion.section>
        </div>
      </div>
    </div>
  );
}
