import BackButton from "./BackButton";

export const metadata = {
  title: "Privacy Policy | IPTEK (Integrasi Persada Teknologi)",
  description:
    "Kebijakan privasi IPTEK — bagaimana kami mengelola dan melindungi data Anda.",
};

export default function PrivacyPage() {
  return (
    <div className="pb-24 px-6 relative overflow-hidden">
      {/* Decorative blurs */}
      <div className="absolute top-0 right-0 -z-10 w-full h-full opacity-30 pointer-events-none">
        <div className="absolute top-[-10%] right-[-5%] w-[600px] h-[600px] bg-primary-fixed blur-[120px] rounded-full" />
        <div className="absolute bottom-[20%] left-[-10%] w-[400px] h-[400px] bg-secondary-fixed-dim blur-[100px] rounded-full" />
      </div>

      <div className="max-w-3xl mx-auto pt-16">
        {/* Header */}
        <div className="mb-16">
          <div className="flex items-center gap-2 mb-4">
            <span className="px-3 py-1 bg-primary-fixed text-on-primary-fixed-variant text-xs font-bold uppercase tracking-widest rounded-full">
              Legal Documentation
            </span>
            <span className="text-outline text-xs font-medium">Updated Oct 2024</span>
          </div>
          <h1 className="font-headline text-5xl md:text-6xl font-extrabold tracking-tighter text-on-surface mb-6 leading-tight">
            Privacy{" "}
            <span className="text-transparent bg-clip-text bg-gradient-to-r from-primary to-primary-container">
              Policy
            </span>
          </h1>
          <p className="text-lg text-on-surface-variant font-medium leading-relaxed max-w-2xl">
            Integrasi Persada Teknologi (IPTEK) is committed to protecting your
            architectural digital data. This policy outlines how we handle information
            in our pursuit of crystalline connectivity.
          </p>
        </div>

        {/* Content */}
        <div className="bg-surface-container-lowest rounded-xl p-8 md:p-12 shadow-xl shadow-slate-900/5 space-y-12">
          <section>
            <h2 className="font-headline text-2xl font-bold text-on-surface mb-4">
              1. Data Collection &amp; Architecture
            </h2>
            <div className="space-y-4 text-on-surface-variant leading-relaxed">
              <p>
                We collect information that allows us to integrate complex systems into
                seamless operational workflows. This includes technical metadata,
                professional contact information, and system interaction logs necessary
                for architectural digital solutions.
              </p>
              <p>
                Our systems are designed with "Security by Design" principles, ensuring
                that data ingestion is minimal, purposeful, and transparent.
              </p>
            </div>
          </section>

          <section>
            <h2 className="font-headline text-2xl font-bold text-on-surface mb-4">
              2. Integration Protocols
            </h2>
            <div className="space-y-4 text-on-surface-variant leading-relaxed">
              <p>Information collected is utilized strictly to:</p>
              <ul className="space-y-3 pl-4">
                {[
                  "Refine and optimize digital infrastructure performance.",
                  "Deliver personalized enterprise technology insights.",
                  "Ensure compliance with global security architecture standards.",
                ].map((item) => (
                  <li key={item} className="flex items-start gap-3">
                    <span
                      className="material-symbols-outlined text-primary text-lg shrink-0"
                      style={{ fontVariationSettings: "'FILL' 1" }}
                    >
                      check_circle
                    </span>
                    <span>{item}</span>
                  </li>
                ))}
              </ul>
            </div>
          </section>

          <section>
            <h2 className="font-headline text-2xl font-bold text-on-surface mb-4">
              3. Data Integrity &amp; Security
            </h2>
            <div className="space-y-4 text-on-surface-variant leading-relaxed">
              <p>
                IPTEK employs high-end crystalline connectivity security measures. We do
                not use traditional clumsy firewalls but layered, intelligent defense
                systems that utilize deep navy encryption protocols.
              </p>
              <p>
                Data is stored in secure environments with strict multi-factor
                authentication and zero-trust access hierarchies.
              </p>
            </div>
          </section>

          <section>
            <h2 className="font-headline text-2xl font-bold text-on-surface mb-4">
              4. Third-Party Connectivity
            </h2>
            <div className="space-y-4 text-on-surface-variant leading-relaxed">
              <p>
                We do not sell your data. Integration with third-party systems occurs
                only under explicit Service Level Agreements (SLAs) and strictly for the
                purpose of extending the capabilities of your digital architecture.
              </p>
            </div>
          </section>

          <div className="pt-8 border-t border-outline-variant/30">
            <p className="text-sm text-outline italic">
              By using our services, you consent to the architectural data management
              practices described in this policy. For detailed inquiries regarding your
              data rights, please contact our Security Architecture department.
            </p>
          </div>
        </div>

        {/* Back link */}
        <div className="mt-12 flex justify-center">
          <BackButton />
        </div>
      </div>
    </div>
  );
}