import type { Metadata } from "next";
import { PageHero } from "@/components/PageHero";
import { LegalContents } from "@/components/legal/LegalContents";
import { site } from "@/lib/site";

const description = `Read how ${site.name} uses cookies and similar technologies.`;

export const metadata: Metadata = {
  title: "Cookies",
  description,
  openGraph: { title: `Cookies | ${site.name}`, description },
  twitter: { title: `Cookies | ${site.name}`, description },
};

const domain = site.domain.toLowerCase();
const cookieUses = [
  "Maintaining basic website functionality",
  "Saving visitor preferences and settings",
  "Analyzing how visitors use our website",
  "Measuring website performance and activity",
  "Enhancing website content and function",
  "Protecting the website from abuse",
] as const;

const contents = [
  { id: "introduction", heading: "Introduction", body: [] },
  { id: "what-are-cookies", heading: "What are Cookies?", body: [] },
  { id: "how-we-use-cookies", heading: "How We Use Cookies", body: [] },
  {
    id: "types-of-cookies-we-may-use",
    heading: "Types of Cookies We May Use",
    body: [],
  },
  {
    id: "managing-your-cookie-preferences",
    heading: "Managing Your Cookie Preferences",
    body: [],
  },
  { id: "do-not-track-option", heading: "\u201CDo Not Track\u201D Option", body: [] },
  {
    id: "modifications-to-this-cookie-policy",
    heading: "Modifications to This Cookie Policy",
    body: [],
  },
  { id: "contact-us", heading: "Contact Us", body: [] },
] as const;

export default function CookiesPage() {
  return (
    <>
      <PageHero
        title="Our Cookie"
        accent="Policy"
        lead={
          <>
            <span className="d-block">{`Last updated: Sep 30, 2026`}</span>
            {site.name} uses cookies and similar technologies to ensure that our
            website operates effectively, understands user interactions, and
            provides them with a better experience.
          </>
        }
      />

      <section className="webContent py-4 py-lg-5">
        <div className="container">
          <div className="row g-4 g-xl-5">
            <div className="d-none d-lg-block col-12 col-lg-4 col-xl-3">
              <LegalContents sections={contents} />
            </div>
            <div className="col-12 col-lg-8 col-xl-9">
              <article className="legal-section" id="introduction">
                <div className="legal-section-head">
                  <h2 className="text-xl fw-600 mb-0">Introduction</h2>
                </div>
                <p className="text-md fw-400 mb-0">
                  {site.name} (“we,” “our,” or “us”) respects your privacy and
                  is committed to handling your personal information
                  responsibly. This Cookie Policy explains what cookies are, how
                  we may use them, and the choices available to you when
                  managing cookies.
                </p>
              </article>

              <article className="legal-section" id="what-are-cookies">
                <div className="legal-section-head">
                  <h2 className="text-xl fw-600 mb-0">What are Cookies?</h2>
                </div>
                <p className="text-md fw-400 mb-0">
                  Cookies are tiny data files that sites save on your computer
                  when you visit them. They might be useful in recording your
                  visit details, ensuring important functionality, understanding
                  website usage, and offering you a more uniform experience.
                </p>
                <p className="text-md fw-400 mb-0">
                  We might also employ other tracking tools, including pixels,
                  tags, and local storage for purposes related to those
                  discussed below.
                </p>
              </article>

              <article className="legal-section" id="how-we-use-cookies">
                <div className="legal-section-head">
                  <h2 className="text-xl fw-600 mb-0">How We Use Cookies</h2>
                </div>
                <p className="text-md fw-400 mb-0">
                  {site.name} may utilize cookies and similar technology for:
                </p>
                <ul className="legal-list text-md fw-400">
                  {cookieUses.map((item) => (
                    <li key={item}>{item}</li>
                  ))}
                </ul>
              </article>

              <article className="legal-section" id="types-of-cookies-we-may-use">
                <div className="legal-section-head">
                  <h2 className="text-xl fw-600 mb-0">Types of Cookies We May Use</h2>
                </div>

                <h3 className="text-lg fw-600 mb-2">Essential Cookies</h3>
                <p className="text-md fw-400 mb-0">
                  These cookies are strictly required for the proper
                  functioning of our websites. They enable functionalities like
                  navigation, security, form filling, and other functions that
                  are necessary for the proper operation of the website.
                </p>
                <p className="text-md fw-400 mb-0">
                  Since these cookies provide essential functionality, they
                  cannot be deleted from the cookie settings.
                </p>

                <h3 className="text-lg fw-600 mb-2 mt-4">Preference Cookies</h3>
                <p className="text-md fw-400 mb-0">
                  Preference cookies allow the website to remember choices or
                  settings you make. They can ensure that your experience of
                  using the website is more consistent.
                </p>

                <h3 className="text-lg fw-600 mb-2 mt-4">Analytics Cookies</h3>
                <p className="text-md fw-400 mb-0">
                  Analytics cookies allow us to gather information about how you
                  use the website. This way, we can know which pages you visit,
                  how you use the website, and how the website&apos;s performance
                  can be improved.
                </p>

                <h3 className="text-lg fw-600 mb-2 mt-4">Marketing and Other Similar Technologies</h3>
                <p className="text-md fw-400 mb-0">
                  When such technologies are utilized, they can help us to
                  assess our campaigns and analyze the interaction with the
                  promotional materials. We will use them in compliance with
                  applicable laws and consent requirements, if any.
                </p>

                <h3 className="text-lg fw-600 mb-2 mt-4">Third-Party Cookies</h3>
                <p className="text-md fw-400 mb-0">
                  There may be some services offered on the {site.name} website
                  by third parties. Third-party providers will make use of their
                  own cookies or other tracking technologies.
                </p>
                <p className="text-md fw-400 mb-0">
                  Cookies of third-party services will be governed by the
                  privacy policies of the companies placing them. We recommend
                  that users check the third-party privacy policy where
                  applicable.
                </p>
              </article>

              <article className="legal-section" id="managing-your-cookie-preferences">
                <div className="legal-section-head">
                  <h2 className="text-xl fw-600 mb-0">Managing Your Cookie Preferences</h2>
                </div>
                <p className="text-md fw-400 mb-0">
                  Cookies can be controlled through your browser settings. Based
                  on your browser type, you might be able to block, delete, or
                  get notified about cookies.
                </p>
                <p className="text-md fw-400 mb-0">
                  When necessary, {site.name} can also offer you cookie
                  preference options that enable you to pick categories of
                  non-essential cookies you want to accept.
                </p>
                <p className="text-md fw-400 mb-0">
                  Please be informed that disabling certain cookies can impact
                  the performance of some of the website functionalities.
                </p>
              </article>

              <article className="legal-section" id="do-not-track-option">
                <div className="legal-section-head">
                  <h2 className="text-xl fw-600 mb-0">“Do Not Track” Option</h2>
                </div>
                <p className="text-md fw-400 mb-0">
                  Many web browsers come with the option to set up “Do Not
                  Track”. Since there is no universal protocol on how to act on
                  such requests, our website may not always honor all of these
                  requests in the same manner.
                </p>
              </article>

              <article className="legal-section" id="modifications-to-this-cookie-policy">
                <div className="legal-section-head">
                  <h2 className="text-xl fw-600 mb-0">Modifications to This Cookie Policy</h2>
                </div>
                <p className="text-md fw-400 mb-0">
                  We may revise this Cookie Policy from time to time as a
                  result of changes in our website, technology, services, or
                  legal requirements.
                </p>
                <p className="text-md fw-400 mb-0">
                  Any modifications that we make will be reflected by updating
                  the “Last updated” date at the top of this document. Please
                  review this policy periodically.
                </p>
              </article>

              <article className="legal-section" id="contact-us">
                <div className="legal-section-head">
                  <h2 className="text-xl fw-600 mb-0">Contact Us</h2>
                </div>
                <p className="text-md fw-400 mb-0">
                  If you have questions about how {site.name} uses cookies or
                  similar technologies, please contact us at:
                </p>
                <p className="text-md fw-400 mb-0">
                  <a href={`mailto:privacy@${domain}`}>{`privacy@${domain}`}</a>
                </p>
              </article>
            </div>
          </div>
        </div>
      </section>
    </>
  );
}