import Link from "next/link";
import { home } from "@/content/home";
import {
  Artwork,
  SectionHeading,
  Steps,
  Testimonials,
  Benefits,
  CallToAction,
  BrandIcon,
  ApplyBadge,
} from "@/components/marketing-sections";
import { Carousel } from "@/components/carousel";
import { LoanCalculator } from "@/components/loan-calculator";
import { RichText } from "@/components/rich-text";
import { GoogleRating } from "@/components/google-reviews";
import { site } from "@/content/site";
import { pageMetadata } from "@/lib/page-metadata";
export const metadata = pageMetadata(
  "Singapore Licensed Money Lender | Max Credit",
  "/",
  "MaxCredit is a licensed money lender in Singapore you can trust. Compare loan services, estimate repayments and contact our Clementi office to apply today.",
);

export default function Home() {
  return (
    <main id="main-content" className="home-page">
      <link
        rel="preload"
        as="image"
        href="/images/baner-bg-2.png.webp"
        fetchPriority="high"
      />
      <section className="home-hero">
        <div className="home-hero-row site-container">
          <div className="home-hero-copy">
            <p className="hero-licence">
              Licensed money lender · Licence No. {site.licence}
            </p>
            <h1>{home.hero.title}</h1>
            <div className="rich-text">
              <RichText nodes={home.hero.description} />
            </div>
            <Link className="site-button" href="/quick-apply">
              QUICK APPLY NOW
            </Link>
            <p className="hero-trust">
              <GoogleRating variant="compact" />
            </p>
          </div>
          <div className="home-hero-art">
            <Artwork name={home.heroImage} preload />
            <div aria-hidden="true" className="hero-symbols">
              <span className="hero-symbol hero-symbol-0"></span>
              <span className="hero-symbol hero-symbol-1"></span>
              <span className="hero-symbol hero-symbol-2"></span>
              <span className="hero-symbol hero-symbol-3"></span>
            </div>
          </div>
        </div>
        <div className="calculator-wrap site-container">
          <LoanCalculator />
        </div>
      </section>
      <section className="home-intro">
        <div className="home-intro-inner">
          <div className="value-cards">
            {home.values.map((value) => (
              <article className="value-card" key={value.title}>
                <div className="value-ribbon">
                  <Artwork name={value.image} sizes="65px" />
                </div>
                <div>
                  <h2>{value.title}</h2>
                  <RichText nodes={value.description} />
                </div>
              </article>
            ))}
          </div>
          <div className="home-intro-copy">
            <SectionHeading content={home.intro} />
            <Artwork
              name="max-happy-young-asian-couple-realtor-agent-01.webp"
              alt="A couple meeting a MaxCredit loan consultant"
            />
          </div>
        </div>
      </section>
      <Steps heading={home.stepsHeading} items={home.steps} />
      <section className="services-section">
        <div className="site-container">
          <SectionHeading content={home.servicesHeading} />
          <Carousel label="Loan services" count={home.services.length}>
            {home.services.map((service) => (
              <article className="service-card" key={service.title}>
                <div className="service-image">
                  <Artwork
                    name={service.image}
                    alt={service.title}
                    sizes="(max-width: 767px) 80vw, 33vw"
                  />
                  <span className="service-icon">
                    <BrandIcon icon={service.icon} />
                  </span>
                </div>
                <div className="service-body">
                  <h3>{service.title}</h3>
                  <p>{service.description}</p>
                  <Link
                    href={service.href}
                    aria-label={`View service: ${service.title}`}
                  >
                    VIEW SERVICE{" "}
                    <span className="brand-glyph" aria-hidden="true">
                      &#xf30b;
                    </span>
                  </Link>
                </div>
              </article>
            ))}
          </Carousel>
          <Testimonials
            heading={home.testimonialHeading}
            items={home.testimonials}
            embedded
          />
        </div>
      </section>
      <section className="why-section">
        <div className="inner-container">
          <SectionHeading content={home.whyHeading} />
        </div>
      </section>
      <section className="home-benefits">
        <Benefits items={home.benefits} />
      </section>
      <CallToAction title={home.cta} />
      <ApplyBadge />
    </main>
  );
}