import Image from "next/image";
import Link from "next/link";
import { assets, type AssetName } from "@/content/assets";
import { site } from "@/content/site";
import type {
  BenefitContent,
  HeadingContent,
  IconContent,
  StepContent,
  TestimonialContent,
} from "@/content/types";
import { RichText } from "./rich-text";
import { Carousel } from "./carousel";
import { GoogleReviews } from "./google-reviews";

export function Artwork({
  name,
  alt = "",
  className,
  preload = false,
  loading,
  sizes = "(max-width: 767px) 100vw, 50vw",
}: {
  name: AssetName;
  alt?: string;
  className?: string;
  preload?: boolean;
  loading?: "eager" | "lazy";
  sizes?: string;
}) {
  return (
    <Image
      {...assets[name]}
      alt={alt}
      style={{ aspectRatio: `${assets[name].width} / ${assets[name].height}` }}
      className={className}
      preload={preload}
      loading={loading}
      sizes={sizes}
    />
  );
}
export function SectionHeading({
  content,
  className = "",
  fallbackTitle,
}: {
  content: HeadingContent;
  className?: string;
  fallbackTitle?: string;
}) {
  return (
    <div className={`section-heading ${className}`}>
      {content.eyebrow && (
        <p className="eyebrow">
          <span>{content.eyebrow}</span>
        </p>
      )}
      {(content.title || fallbackTitle) && (
        <h2 className={content.title ? undefined : "sr-only"}>
          {content.title || fallbackTitle}
        </h2>
      )}
      {content.description.length > 0 && (
        <div className="section-description rich-text">
          <RichText nodes={content.description} />
        </div>
      )}
    </div>
  );
}
export function BrandIcon({ icon }: { icon: IconContent }) {
  return icon.paths.length ? (
    <svg viewBox={icon.viewBox} width="26" height="26" aria-hidden="true">
      {icon.paths.map((d, i) => (
        <path key={i} d={d} fill="currentColor" />
      ))}
    </svg>
  ) : (
    <span
      className={icon.family === "outline" ? "outline-glyph" : "brand-glyph"}
      aria-hidden="true"
    >
      {icon.glyph}
    </span>
  );
}
export function Benefits({
  items,
  className = "",
}: {
  items: readonly BenefitContent[];
  className?: string;
}) {
  return (
    <div className={`benefit-grid ${className}`}>
      {items.map((item) => (
        <article key={item.title} className="benefit">
          <span className="benefit-icon">
            <BrandIcon icon={item.icon} />
          </span>
          <h3>{item.title}</h3>
          <p>{item.description}</p>
        </article>
      ))}
    </div>
  );
}
export function Steps({
  heading,
  items,
}: {
  heading: HeadingContent;
  items: readonly StepContent[];
}) {
  return (
    <section className="steps-section">
      <div className="site-container">
        <SectionHeading content={heading} fallbackTitle="How to apply" />
        <ol className="steps-grid">
          {items.map((step, index) => (
            <li key={index}>
              <div className="step-art">
                <Artwork name={step.image} sizes="220px" />
              </div>
              <span className="step-number">0{index + 1}</span>
              <h3 className={step.title ? undefined : "sr-only"}>
                {step.title || `Step ${index + 1}`}
              </h3>
              <div className="rich-text">
                <RichText nodes={step.description} />
              </div>
            </li>
          ))}
        </ol>
      </div>
    </section>
  );
}
export function Testimonials({
  heading,
  items,
  embedded = false,
}: {
  heading: HeadingContent;
  items: readonly TestimonialContent[];
  embedded?: boolean;
}) {
  const content = (
    <>
      <SectionHeading content={heading} fallbackTitle="Customer testimonials" />
      <Carousel
        label="Customer testimonials"
        count={items.length}
        autoplayOffset={embedded ? 2500 : 0}
      >
        {items.map((item, i) => (
          <article
            className={`testimonial ${i === 0 ? "testimonial-featured" : ""}`}
            key={i}
          >
            <blockquote>
              <span className="quote-mark" aria-hidden="true">
                “
              </span>
              <span className="review-stars" aria-label="5 out of 5 stars">
                ★★★★★
              </span>
              <div className="rich-text">
                <RichText nodes={item.quote} />
              </div>
            </blockquote>
            {item.name && <h3>{item.name}</h3>}
            {item.product && <p>{item.product}</p>}
          </article>
        ))}
      </Carousel>
      <GoogleReviews />
    </>
  );
  return embedded ? (
    <div className="testimonials embedded">{content}</div>
  ) : (
    <section className="testimonials">
      <div className="site-container">{content}</div>
    </section>
  );
}
export function CallToAction({
  title,
  label = "QUICK APPLY",
}: {
  title: string;
  label?: string;
}) {
  return (
    <section className="cta-section">
      <div className="cta-panel">
        {title ? (
          <h2>{title}</h2>
        ) : (
          <div className="cta-spacer" aria-hidden="true" />
        )}
        <Link className="site-button" href="/quick-apply">
          {label}
        </Link>
      </div>
    </section>
  );
}
export function ApplyBadge() {
  return (
    <a
      href={site.application}
      className="apply-badge"
      aria-label="Apply with Singpass"
    >
      <Artwork
        name="applywithsingpass.webp"
        alt="Apply with Singpass"
        sizes="142px"
      />
    </a>
  );
}