import { useRef } from "react";
import { motion, useInView } from "framer-motion";
import { Shield, Lock, Eye, FileCheck, UserCheck, MessageCircle } from "lucide-react";

function FadeIn({ children, delay = 0, className = "" }: { children: React.ReactNode; delay?: number; className?: string }) {
  const ref = useRef(null);
  const inView = useInView(ref, { once: true, margin: "-40px" });
  return (
    <motion.div ref={ref} initial={{ opacity: 0, y: 24 }} animate={inView ? { opacity: 1, y: 0 } : {}} transition={{ duration: 0.65, delay, ease: [0.22, 1, 0.36, 1] }} className={className}>
      {children}
    </motion.div>
  );
}

const PILLARS = [
  { icon: UserCheck, title: "Identity Verification", desc: "Every companion undergoes a multi-step identity verification process, including government-issued ID confirmation, a personal interview with our concierge team, and professional background assessment. We accept no exceptions." },
  { icon: Lock, title: "End-to-End Privacy", desc: "All client information — name, contact details, booking history — is stored on encrypted servers accessible only to senior concierge staff. We never share client data with third parties under any circumstances." },
  { icon: Eye, title: "Absolute Confidentiality", desc: "Both clients and companions are bound by comprehensive non-disclosure agreements. What happens during your engagement remains entirely private. Our team discusses no client details internally beyond what is necessary for service delivery." },
  { icon: FileCheck, title: "Legal Compliance", desc: "Elite Companions operates strictly within all applicable Indian laws. All services offered are social and professional in nature. We do not facilitate, encourage, or tolerate any activity outside these boundaries." },
  { icon: MessageCircle, title: "Secure Communication", desc: "Initial inquiries are handled via our encrypted contact form or WhatsApp with end-to-end encryption. Ongoing communication uses secure channels. We never discuss sensitive matters over unencrypted email." },
  { icon: Shield, title: "Conduct Guidelines", desc: "All companions adhere to a strict code of professional conduct. Any client behaviour that is disrespectful, inappropriate, or outside agreed parameters results in immediate termination of service and potential restriction from future bookings." },
];

const PROCESS_STEPS = [
  { step: "01", title: "Application", desc: "Potential companions submit a detailed application. Only a fraction are invited to proceed." },
  { step: "02", title: "Identity Verification", desc: "Government-issued ID is verified through a secure third-party service. Details are never retained." },
  { step: "03", title: "Personal Interview", desc: "A senior member of our team conducts an in-person interview assessing social poise, intellect, and character." },
  { step: "04", title: "Background Review", desc: "A thorough professional and personal background assessment is completed by an independent agency." },
  { step: "05", title: "NDA & Agreement", desc: "Accepted companions sign comprehensive NDAs and service agreements before joining our network." },
  { step: "06", title: "Ongoing Monitoring", desc: "Client feedback is monitored continuously. Any concerns result in immediate internal review." },
];

export default function Safety() {
  return (
    <div className="pt-20 min-h-screen">
      <div className="py-20 text-center border-b border-border bg-card">
        <FadeIn>
          <span className="text-xs tracking-[0.35em] uppercase text-primary mb-3 block">Our Commitment</span>
          <h1 className="font-serif text-5xl sm:text-6xl text-foreground mb-4">Safety & Verification</h1>
          <p className="text-muted-foreground max-w-xl mx-auto text-base">
            Safety, privacy, and dignity are not features — they are the foundation upon which every engagement is built.
          </p>
        </FadeIn>
      </div>

      {/* Pillars */}
      <section className="max-w-7xl mx-auto px-6 py-20">
        <FadeIn className="mb-12">
          <span className="text-xs tracking-[0.3em] uppercase text-primary mb-2 block">Our Principles</span>
          <h2 className="font-serif text-3xl text-foreground">Six Pillars of Trust</h2>
        </FadeIn>
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          {PILLARS.map(({ icon: Icon, title, desc }, i) => (
            <FadeIn key={title} delay={i * 0.07}>
              <div className="p-8 border border-border hover:border-primary/25 transition-colors h-full">
                <Icon size={20} className="text-primary mb-5" />
                <h3 className="font-serif text-xl text-foreground mb-3">{title}</h3>
                <p className="text-sm text-muted-foreground leading-relaxed">{desc}</p>
              </div>
            </FadeIn>
          ))}
        </div>
      </section>

      {/* Verification process */}
      <section className="py-20 bg-card border-y border-border">
        <div className="max-w-5xl mx-auto px-6">
          <FadeIn className="mb-14">
            <span className="text-xs tracking-[0.3em] uppercase text-primary mb-2 block">The Process</span>
            <h2 className="font-serif text-3xl text-foreground">Companion Verification</h2>
            <p className="text-muted-foreground mt-3 max-w-lg text-sm">Every companion you encounter has completed our rigorous six-stage verification process. There are no exceptions.</p>
          </FadeIn>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-px bg-border">
            {PROCESS_STEPS.map((s, i) => (
              <FadeIn key={s.step} delay={i * 0.07}>
                <div className="bg-card p-8">
                  <p className="font-serif text-4xl text-primary/20 mb-4">{s.step}</p>
                  <h3 className="text-sm font-medium text-foreground mb-2 tracking-wide">{s.title}</h3>
                  <p className="text-xs text-muted-foreground leading-relaxed">{s.desc}</p>
                </div>
              </FadeIn>
            ))}
          </div>
        </div>
      </section>

      {/* Privacy policy summary */}
      <section className="max-w-3xl mx-auto px-6 py-20">
        <FadeIn>
          <span className="text-xs tracking-[0.3em] uppercase text-primary mb-3 block">Privacy</span>
          <h2 className="font-serif text-3xl text-foreground mb-8">Our Privacy Commitment</h2>
        </FadeIn>
        <FadeIn delay={0.1} className="space-y-6 text-sm text-muted-foreground leading-relaxed">
          <p>Elite Companions is committed to the absolute protection of client and companion privacy. We collect only the information necessary to facilitate your inquiry and booking. No data is ever sold, shared, or disclosed to third parties without explicit legal obligation.</p>
          <p>All client records are stored on encrypted, access-restricted servers located within compliant data centres. Records are purged after a defined retention period unless you request otherwise. You may request deletion of your data at any time by contacting our privacy officer.</p>
          <p>Our companion network members are bound by comprehensive non-disclosure agreements that explicitly prohibit discussion of client details, identities, booking specifics, or any information arising from an engagement.</p>
          <p>We do not maintain photographs of clients, and our internal records use anonymised reference codes rather than identifying information wherever operationally possible.</p>
        </FadeIn>
      </section>

      {/* Conduct guidelines */}
      <section className="py-20 bg-card border-t border-border">
        <div className="max-w-3xl mx-auto px-6">
          <FadeIn>
            <span className="text-xs tracking-[0.3em] uppercase text-primary mb-3 block">Standards</span>
            <h2 className="font-serif text-3xl text-foreground mb-8">Respect & Conduct Guidelines</h2>
          </FadeIn>
          <FadeIn delay={0.1} className="space-y-4">
            {[
              "All interactions must remain within the professional and social scope agreed upon at booking.",
              "Companions reserve the right to terminate any engagement if they feel unsafe, disrespected, or if the client's conduct falls outside agreed parameters.",
              "Physical contact beyond socially appropriate norms is strictly prohibited and constitutes grounds for immediate service termination.",
              "Any attempt to coerce, pressure, or engage a companion beyond their stated professional role will result in permanent account restriction.",
              "Clients are expected to treat companions with the same respect they would accord any professional peer or colleague.",
              "All communications with companions prior to an engagement must be conducted through our platform to ensure safety and quality.",
            ].map((guideline, i) => (
              <div key={i} className="flex items-start gap-4 p-5 border border-border">
                <Shield size={14} className="text-primary mt-0.5 shrink-0" />
                <p className="text-sm text-muted-foreground leading-relaxed">{guideline}</p>
              </div>
            ))}
          </FadeIn>
        </div>
      </section>
    </div>
  );
}
