import type { LoanContent } from "@/content/types";
import {
  Artwork,
  SectionHeading,
  Benefits,
  CallToAction,
  Steps,
  Testimonials,
  ApplyBadge,
} from "./marketing-sections";
import { PageHero } from "./page-hero";
import { FAQ } from "./faq";
import { StructuredData } from "./structured-data";
import { faqSchema } from "@/lib/structured-data";
import { LoanComparison } from "./loan-comparison";

export function LoanPage({ content }: { content: LoanContent }) {
  return (
    <main id="main-content" className={`loan-page ${content.slug}`}>
      <link
        rel="alternate"
        type="text/markdown"
        href={`https://maxcredit.sg/loan-information/${content.slug}.md`}
      />
      <link rel="describedby" href="https://maxcredit.sg/llms.txt" />
      <PageHero
        content={content.hero}
        fallbackTitle={content.metadataTitle}
        apply
      />
      <section className="loan-intro">
        <div className="inner-container loan-intro-grid">
          <div className="loan-intro-art">
            <Artwork name={content.image} alt={content.metadataTitle} />
            {content.highlights.length > 0 && (
              <ul>
                {content.highlights.map((text) => (
                  <li key={text}>
                    <span className="brand-glyph" aria-hidden="true">
                      &#xf058;
                    </span>
                    {text}
                  </li>
                ))}
              </ul>
            )}
          </div>
          <SectionHeading content={content.intro} />
        </div>
      </section>
      <section className="loan-benefit-heading">
        <div className="inner-container">
          <SectionHeading
            content={content.benefitsHeading}
            fallbackTitle="Loan benefits"
          />
        </div>
      </section>
      <section className="loan-benefits">
        <Benefits items={content.benefits} />
      </section>
      <CallToAction title={content.cta} label={content.ctaLabel} />
      <section className="loan-faq-heading">
        <div className="inner-container">
          <SectionHeading
            content={content.faqHeading}
            fallbackTitle="Frequently asked questions"
          />
        </div>
      </section>
      <section className="loan-faq">
        <div className="inner-container">
          <FAQ items={content.faqs} />
        </div>
      </section>
      <LoanComparison slug={content.slug} />
      <Steps heading={content.stepsHeading} items={content.steps} />
      <Testimonials
        heading={content.testimonialHeading}
        items={content.testimonials}
      />
      <ApplyBadge />
      <StructuredData value={faqSchema(content.faqs)} />
    </main>
  );
}