import React from 'react';
import { Link } from 'react-router-dom';
import PublicNavbar from '../components/PublicNavbar';
import PublicFooter from '../components/PublicFooter';

export default function PrivacyPolicy() {
  return (
    <>
      <PublicNavbar />
      <div className="min-h-screen bg-[#F8F7FB]">
        <div className="max-w-4xl mx-auto px-4 sm:px-6 md:px-8 lg:px-12 xl:px-16 py-12">
          {/* Header */}
          <div className="mb-8">
            <h1 className="text-3xl sm:text-4xl md:text-5xl font-bold text-[#422268] mb-4"
                style={{ fontFamily: "'Inter', sans-serif" }}>
              Privacy Policy
            </h1>
            <p className="text-base sm:text-lg text-gray-600" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
              LOAFers, Inc. Website Privacy Policy
            </p>
          </div>

          {/* Content */}
          <div className="bg-white rounded-lg border border-[#ddd8eb] p-6 sm:p-8 md:p-10 space-y-8">

            {/* Introduction */}
            <section>
              <div className="prose max-w-none space-y-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                <p className="text-gray-700 leading-relaxed">
                  This Privacy Policy ("Policy") applies to Membership Applications, and LOAFers, Inc. ("Company") and governs data collection and usage. The Company's application is a Membership request, Membership online profile, and Consent to receive eNewsletters. By using the Company application, you consent to the data practices described in the statement.
                </p>
                <p className="text-gray-700 leading-relaxed">
                  We reserve the right to change this policy at any given time, of which you will be promptly updated. If you want to make sure that you are up to date with the latest changes, we advise you to frequently visit this page.
                </p>
              </div>
            </section>

            {/* Section 1: What User Data We Collect */}
            <section>
              <h2 className="text-xl sm:text-2xl font-bold text-[#422268] mb-4 flex items-center gap-2"
                  style={{ fontFamily: "'Inter', sans-serif" }}>
                <span>💻</span> What User Data We Collect
              </h2>
              <div className="prose max-w-none space-y-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                <p className="text-gray-700 leading-relaxed">
                  When you visit the Site, we may collect the following data:
                </p>
                <ul className="list-disc list-inside space-y-2 text-gray-700 ml-4">
                  <li>Your <strong>IP address</strong></li>
                  <li>Your <strong>contact information and email address</strong></li>
                </ul>

                <p className="text-gray-700 leading-relaxed mt-4">
                  When you apply for membership, we collect the following data:
                </p>
                <ul className="list-disc list-inside space-y-2 text-gray-700 ml-4">
                  <li><strong>First and last name</strong></li>
                  <li><strong>Mailing address</strong></li>
                  <li><strong>Email</strong></li>
                  <li><strong>Phone number</strong></li>
                  <li><strong>Birthday</strong></li>
                </ul>

                <p className="text-gray-700 leading-relaxed mt-4">
                  If you choose to pay your membership administrative fee online, we have access to:
                </p>
                <ul className="list-disc list-inside space-y-2 text-gray-700 ml-4">
                  <li><strong>Partial credit card information</strong></li>
                </ul>

                <p className="text-gray-700 leading-relaxed mt-4">
                  You may also choose to provide the following:
                </p>
                <ul className="list-disc list-inside space-y-2 text-gray-700 ml-4">
                  <li><strong>Partner's name</strong></li>
                  <li><strong>Photo</strong></li>
                  <li><strong>Self-bio</strong></li>
                  <li><strong>Consent to receive our eNewsletter</strong></li>
                  <li><strong>Consent to display an online profile visible only to membership</strong></li>
                </ul>
              </div>
            </section>

            {/* Section 2: Why We Collect Your Data */}
            <section>
              <h2 className="text-xl sm:text-2xl font-bold text-[#422268] mb-4 flex items-center gap-2"
                  style={{ fontFamily: "'Inter', sans-serif" }}>
                <span>🎯</span> Why We Collect Your Data
              </h2>
              <div className="prose max-w-none" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                <ul className="list-disc list-inside space-y-2 text-gray-700 ml-4">
                  <li>To send you announcement emails containing the information about our events and information we think you will find interesting.</li>
                  <li>To contact you to fill out surveys about our membership.</li>
                  <li>To customize our blog according to your online behavior and personal preferences.</li>
                </ul>
              </div>
            </section>

            {/* Section 3: Sharing Information with Third Parties */}
            <section>
              <h2 className="text-xl sm:text-2xl font-bold text-[#422268] mb-4 flex items-center gap-2"
                  style={{ fontFamily: "'Inter', sans-serif" }}>
                <span>🤝</span> Sharing Information with Third Parties
              </h2>
              <div className="prose max-w-none space-y-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                <p className="text-gray-700 leading-relaxed">
                  The Company does not sell, rent, or lease personal data to third parties.
                </p>
                <p className="text-gray-700 leading-relaxed">
                  The Company may share data with trusted partners to help perform statistical analysis, provide customer support.
                </p>
                <p className="text-gray-700 leading-relaxed">
                  The Company uses <strong>Stripe</strong> to process online payments at which time users would no longer be governed by the Company's Privacy Policy.
                </p>
                <p className="text-gray-700 leading-relaxed">
                  The Company may disclose your personal information, without notice, if required to do so by law.
                </p>
              </div>
            </section>

            {/* Section 4: Safeguarding and Securing the Data */}
            <section>
              <h2 className="text-xl sm:text-2xl font-bold text-[#422268] mb-4 flex items-center gap-2"
                  style={{ fontFamily: "'Inter', sans-serif" }}>
                <span>🔒</span> Safeguarding and Securing the Data
              </h2>
              <div className="prose max-w-none space-y-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                <p className="text-gray-700 leading-relaxed">
                  LOAFers, Inc. is committed to securing your data and keeping it confidential. LOAFers, Inc. has done all in its power to prevent data theft, unauthorized access, and disclosure by implementing the latest technologies and software, which help us safeguard all the information we collect online.
                </p>
              </div>
            </section>

            {/* Section 5: Our Cookie Policy */}
            <section>
              <h2 className="text-xl sm:text-2xl font-bold text-[#422268] mb-4 flex items-center gap-2"
                  style={{ fontFamily: "'Inter', sans-serif" }}>
                <span>🍪</span> Our Cookie Policy
              </h2>
              <div className="prose max-w-none space-y-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                <p className="text-gray-700 leading-relaxed">
                  Once you agree to allow our blog to use cookies, you also agree to use the data it collects regarding your online behavior (analyze web traffic, web pages you visit and spend the most time on).
                </p>
                <p className="text-gray-700 leading-relaxed">
                  The data we collect by using cookies is used to customize our blog to your needs. After we use the data for statistical analysis, the data is completely removed from our systems.
                </p>
                <p className="text-gray-700 leading-relaxed">
                  Please note that cookies don't allow us to gain control of your computer in any way. They are strictly used to monitor which pages you find useful and which you do not so that we can provide a better experience for you.
                </p>
                <p className="text-gray-700 leading-relaxed">
                  If you want to disable cookies, you can do it by accessing the settings of your internet browser. You can visit{' '}
                  <a href="https://www.internetcookies.com" target="_blank" rel="noopener noreferrer" className="text-[#664fa3] hover:text-[#422268] font-semibold">
                    https://www.internetcookies.com
                  </a>, which contains comprehensive information on how to do this on a wide variety of browsers and devices.
                </p>
              </div>
            </section>

            {/* Section 6: Links to Other Websites */}
            <section>
              <h2 className="text-xl sm:text-2xl font-bold text-[#422268] mb-4 flex items-center gap-2"
                  style={{ fontFamily: "'Inter', sans-serif" }}>
                <span>🔗</span> Links to Other Websites
              </h2>
              <div className="prose max-w-none space-y-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                <p className="text-gray-700 leading-relaxed">
                  Our blog contains links that lead to other websites. If you click on these links LOAFers, Inc. is not held responsible for your data and privacy protection. Visiting those websites is not governed by this privacy policy agreement. Make sure to read the privacy policy documentation of the website you go to from our website.
                </p>
              </div>
            </section>

            {/* Section 7: Restricting the Collection of your Personal Data */}
            <section>
              <h2 className="text-xl sm:text-2xl font-bold text-[#422268] mb-4 flex items-center gap-2"
                  style={{ fontFamily: "'Inter', sans-serif" }}>
                <span>🚫</span> Restricting the Collection of your Personal Data
              </h2>
              <div className="prose max-w-none space-y-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                <p className="text-gray-700 leading-relaxed">
                  At some point, you might wish to restrict the use and collection of your personal data. You can achieve this by doing the following:
                </p>
                <ul className="list-disc list-inside space-y-2 text-gray-700 ml-4">
                  <li>Log in to your online profile and make any changes you wish to your profile information.</li>
                  <li>If you have already agreed to share your information with us, feel free to contact us via email and we will be more than happy to change this for you.</li>
                </ul>
              </div>
            </section>

            {/* Section 8: Children Under Thirteen */}
            <section>
              <h2 className="text-xl sm:text-2xl font-bold text-[#422268] mb-4 flex items-center gap-2"
                  style={{ fontFamily: "'Inter', sans-serif" }}>
                <span>👶</span> Children Under Thirteen
              </h2>
              <div className="prose max-w-none space-y-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                <p className="text-gray-700 leading-relaxed">
                  The Company does not knowingly collect information from children under the age of 13.
                </p>
              </div>
            </section>

            {/* Section 9: Changes to this Statement */}
            <section>
              <h2 className="text-xl sm:text-2xl font-bold text-[#422268] mb-4 flex items-center gap-2"
                  style={{ fontFamily: "'Inter', sans-serif" }}>
                <span>🗓️</span> Changes to this Statement
              </h2>
              <div className="prose max-w-none space-y-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                <p className="text-gray-700 leading-relaxed">
                  The Company may make changes to this Policy. When this occurs the effective date of this policy will be updated.
                </p>
              </div>
            </section>

            {/* Section 10: Contact Information */}
            <section>
              <h2 className="text-xl sm:text-2xl font-bold text-[#422268] mb-4 flex items-center gap-2"
                  style={{ fontFamily: "'Inter', sans-serif" }}>
                <span>📧</span> Contact Information
              </h2>
              <div className="prose max-w-none space-y-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                <p className="text-gray-700 leading-relaxed">
                  If you have any questions, please contact LOAFers, Inc. at:
                </p>
                <div className="bg-[#F8F7FB] p-4 rounded-lg border border-[#ddd8eb]">
                  <p className="font-semibold text-gray-800">LOAFers, Inc.</p>
                  <p className="text-gray-700">PO Box 7207</p>
                  <p className="text-gray-700">Houston, TX 77248-7207</p>
                  <p className="text-gray-700 mt-2">
                    Email: <a href="mailto:info@loaftx.org" className="text-[#664fa3] hover:text-[#422268] font-semibold">info@loaftx.org</a>
                  </p>
                </div>
              </div>
            </section>
          </div>

          {/* Back to Home Link */}
          <div className="mt-8 text-center">
            <Link to="/" className="text-[#664fa3] hover:text-[#422268] font-semibold transition-colors inline-flex items-center gap-2"
                  style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
              <span>←</span> Back to Home
            </Link>
          </div>
        </div>
      </div>
      <PublicFooter />
    </>
  );
}