import { APP_ORIGIN } from "@/lib/deployment";

const link =
  "inline-flex min-h-[44px] items-center gap-1.5 text-sm font-medium text-land-fg underline decoration-land-line underline-offset-4 transition hover:text-land-accent focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-land-accent";

/** Says plainly what KHMYS is and how it handles data, for people and for
 * crawlers that read only the page text. Every claim here is stated on /privacy. */
export function AboutAndTrust() {
  return (
    <section
      id="about"
      aria-labelledby="about-heading"
      className="mx-auto grid max-w-[1280px] grid-cols-1 gap-10 scroll-mt-24 border-t border-land-line px-5 py-16 sm:px-8 sm:py-20 md:grid-cols-[.8fr_1.2fr] md:gap-20 lg:px-10"
    >
      <div data-reveal>
        <p className="mb-4 text-[11px] font-medium uppercase tracking-[0.2em] text-land-accent">
          WHAT IT IS
        </p>
        <h2
          id="about-heading"
          className="text-4xl font-medium leading-[1.1] tracking-[-0.05em] sm:text-5xl"
        >
          What is KHMYS?
        </h2>
      </div>
      <div data-reveal data-reveal-delay={120} className="space-y-8">
        <p className="max-w-xl text-base leading-[1.8] text-land-muted">
          <strong className="font-semibold text-land-fg">KHMYS</strong> (Know
          How Much You Spend) is a personal finance web app. It brings your
          everyday spending, budgets, accounts, investments and goals into one
          place, so you can see where your money goes and decide what to do
          next. Connect a bank, import a CSV or PDF statement, or add
          transactions yourself.
        </p>
        <div>
          <h3 className="text-sm font-medium">How KHMYS handles your data</h3>
          <ul className="mt-4 max-w-xl list-disc space-y-2.5 pl-5 text-sm leading-7 text-land-muted marker:text-land-accent">
            <li>You sign in with Google. KHMYS has no passwords of its own.</li>
            <li>
              Bank connections go through Plaid. You enter your bank login in
              Plaid’s window, never in KHMYS, and KHMYS asks Plaid for
              transactions only.
            </li>
            <li>
              No advertising, no ad cookies, and nothing sold. KHMYS does not
              move money.
            </li>
            <li>
              KHMYS does not charge anything today. There is no billing or
              subscription in the app.
            </li>
          </ul>
        </div>
        <p className="flex flex-wrap items-center gap-x-6">
          <a href={`${APP_ORIGIN}/privacy`} className={link}>
            Privacy policy
          </a>
          <a href={`${APP_ORIGIN}/security`} className={link}>
            Security
          </a>
          <a href="mailto:support@khmys.com" className={link}>
            Contact support
          </a>
        </p>
        <p className="max-w-2xl text-sm leading-relaxed text-land-muted">
          New to tracking money? Start with{" "}
          <a href={`${APP_ORIGIN}/blog/how-to-track-your-spending`} className="text-land-fg underline decoration-land-line underline-offset-4 hover:text-land-accent">
            how to track your spending
          </a>{" "}
          or{" "}
          <a href={`${APP_ORIGIN}/blog/how-to-build-a-monthly-budget`} className="text-land-fg underline decoration-land-line underline-offset-4 hover:text-land-accent">
            how to build a monthly budget
          </a>
          , browse all the{" "}
          <a href={`${APP_ORIGIN}/blog`} className="text-land-fg underline decoration-land-line underline-offset-4 hover:text-land-accent">
            guides
          </a>
          , or read{" "}
          <a href={`${APP_ORIGIN}/about`} className="text-land-fg underline decoration-land-line underline-offset-4 hover:text-land-accent">
            about KHMYS and who built it
          </a>
          .
        </p>
      </div>
    </section>
  );
}