'use client';
import { usePolicyLayout } from '../layout';
import { useEffect } from 'react';

const AboutPage = () => {
  const { setTitle } = usePolicyLayout();

  useEffect(() => {
    setTitle('Crushlevel About');
  }, [setTitle]);

  return (
    <div className="relative flex h-full size-full flex-col items-center justify-start">
      <div className="relative flex h-full w-full min-w-px shrink-0 grow content-stretch items-start justify-center gap-1 px-6 pt-6 pb-0 md:px-12">
        <div className="h-full max-w-[752px]">
          <div className="relative w-full pb-[27.26%]">
            <img
              src="/images/about/banner.png"
              alt="Banner"
              className="absolute inset-0 object-cover"
            />
          </div>

          <div className="txt-body-l mt-12">
            <div>
              Grow your love story with CrushLevel AI—From "Hi" to "I Do", sparked by every chat
            </div>

            <div className="mt-6">
              At CrushLevel AI, every chat writes a new verse in your love epic—
            </div>
            <div>
              From that tentative "Hi" to the trembling "I do", find a home for the flirts you never
              sent,
            </div>
            <div>the responses you longed for,</div>
            <div>and the risky emotional gambles you feared to take.</div>

            <div className="mt-8">{`Contact Us: ${process.env.NEXT_PUBLIC_EMAIL_CONTACT_US}`}</div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default AboutPage;
