import type { JSX } from "react";
import type { ExtendedList } from "@/core/types/list";
import type { RouteParams, StringBool, StringInt } from "@/core/types/common";

import Link from "next/link";
import Image from "next/image";

interface Params {}
interface SearchParams {
  faq?: StringInt;
  more?: StringBool;
}

export default async function AboutPage({ searchParams }: RouteParams<Params, SearchParams>): Promise<JSX.Element> {
  const { faq, more } = await searchParams;

  const isFaqOpened = (sub: number) => faq === sub.toString();
  const isMoreOpened = (moreVal?: StringBool) => moreVal === "true";

  return (
    <div className={"flex gap-20 flex-col h-[calc(100vh-180px)] pb-20 scroll-bar-hidden overflow-y-auto"}>
      <div className={"flex gap-5 flex-wrap"}>
        <div className={"flex-1 max-w-[450px] flex flex-col gap-7"}>
          <h1 className={"title-6"}>
            About the app
          </h1>
          <p className={"subtitle-3 whitespace-pre-wrap text-wrap text-dark-600"}>
            Rendersee is an innovative app designed for creating realistic home plans, catering to both amateur enthusiasts and professional designers. With its intuitive interface and robust feature set, Rendersee transforms the process of home design into a seamless and enjoyable experience.
          </p>
          <div className={"flex flex-col gap-1"}>
            <h2 className={"title-7"}>
              Why Choose Rendersee?
            </h2>
            <div className={"flex flex-col gap-1"}>
              <p className={`
                    subtitle-3 whitespace-pre-wrap text-wrap text-dark-600 max-h-[278px] transition-[max-height] 
                    ${isMoreOpened(more) ? "!max-h-[1000px]" : ""} overflow-hidden duration-500
                 `}>
                Rendersee stands out in the market for its blend of simplicity and sophistication. Whether you are a homeowner looking to visualize your renovation ideas or a professional architect seeking a reliable tool for client presentations, Rendersee offers the perfect solution. Its realistic rendering capabilities, combined with user-centric features, make it a top choice for creating detailed and accurate home plans.
                Start designing your dream home today with Rendersee and bring your visions to life with unparalleled realism .
                Our app stands out as the ultimate 3D room design tool for both professionals and casual users. With a user-friendly interface and advanced design capabilities, it allows you to easily create detailed, accurate room layouts and visualize every aspect of your space before making changes.
                What makes our app the best is its perfect blend of simplicity and power. You can quickly drag and drop furniture, apply real-time lighting, and experiment with textures.{"\n\n"}

                Rendersee stands out in the market for its blend of simplicity and sophistication. Whether you are a homeowner looking to visualize your renovation ideas or a professional architect seeking a reliable tool for client presentations, Rendersee offers the perfect solution. Its realistic rendering capabilities, combined with user-centric features, make it a top choice for creating detailed and accurate home plans.
                Start designing your dream home today with Rendersee and bring your visions to life with unparalleled realism .
              </p>
              <Link href={`/profile/about?${faq ? `faq=${faq}` : "faq=0"}${faq ? "&" : ""}${isMoreOpened(more) ? "more=false" : "more=true"}`}
                    className={"subtitle-4 underline"}>
                Read {isMoreOpened(more) ? "less" : "more"}
              </Link>
            </div>
          </div>
        </div>
        <div className={"flex-1 h-[540px] p-6 shadow-lg rounded-[8px]"}>
          <iframe className={"w-full h-full"}
                  src={"https://www.youtube.com/embed/WeA7edXsU40?si=hUsT1jhzPko_t4Pz"}
                  title={"Rendersee tutorial"}
                  referrerPolicy={"strict-origin-when-cross-origin"}
                  allow={"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"}
                  allowFullScreen={true} />
        </div>
      </div>

      <div className={"flex flex-col gap-10"}>
        <h1 className={"title-6 text-center"}>
          Frequently Asked Questions
        </h1>
        <div className={"flex flex-col"}>
          {faqs.map(f => (
            <div key={f.sub}
                 className={`
                    min-h-[96px] max-h-[96px] duration-500
                    ${isFaqOpened(f.sub) ? "!max-h-[1000px]" : ""} 
                    transition-[max-height] border-b border-b-dark-400 overflow-hidden
                 `}>
              <Link href={`/profile/about?${!isFaqOpened(f.sub) ? `faq=${f.sub}` : "faq=0"}${faq ? "&" : ""}${more ? `more=${more}` : ""}`}
                    className={"h-[96px] title-3 px-2 flex items-center justify-between"}
                    scroll={false}>
                {f.label}
                <div className={"rounded-full h-10 w-10 bg-dark-50 flex items-center justify-center"}>
                  <Image src={"/icons/chevron_down.svg"}
                         alt={"chevron down"}
                         className={`${isFaqOpened(f.sub) ? "rotate-180" : ""} transition-transform`}
                         width={18}
                         height={9} />
                </div>
              </Link>
              <p className={"subtitle-3 text-dark-600 whitespace-pre-wrap px-2 pb-5"}>
                {f.value}
              </p>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

const faqs: ExtendedList<number> = [
  {
    sub: 1,
    label: "What is the purpose of this 3D modeling program?",
    value: "Rendersee is an innovative app designed for creating realistic home plans, catering to both amateur enthusiasts and professional designers. 
With its intuitive interface and robust feature set, Rendersee transforms the process of home design into a seamless and enjoyable experience.\n\nRendersee stands out in the market for its blend of simplicity and sophistication. Whether you are a homeowner looking to visualize your renovation 
ideas or a professional architect seeking a reliable tool for client presentations, Rendersee offers the perfect solution. Its realistic rendering capabilities, combined with user-centric features, make it a top choice for creating detailed and accurate home plans."
  },
  {
    sub: 2,
    label: "Can I import my own 3D models or assets into the program?",
    value: "Rendersee is an innovative app designed for creating realistic home plans, catering to both amateur enthusiasts and professional designers. 
With its intuitive interface and robust feature set, Rendersee transforms the process of home design into a seamless and enjoyable experience.\n\nRendersee stands out in the market for its blend of simplicity and sophistication. Whether you are a homeowner looking to visualize your renovation 
ideas or a professional architect seeking a reliable tool for client presentations, Rendersee offers the perfect solution. Its realistic rendering capabilities, combined with user-centric features, make it a top choice for creating detailed and accurate home plans."
  },
]