import Link from "next/link";

import type { ServiceStep } from "@/data/site";

type Props = {
  image: string;
  imageAlt?: string;
  index: string;
  title: string;
  titleEn: string;
  lead: string;
  steps: ServiceStep[];
  ctaLabel?: string;
  ctaHref?: string;
};

/**
 * Sticky scroll frame for service pages — side card + vertical steps.
 * Same scroll/zoom mechanic as OpeningFrame, different composition.
 */
export function ServiceFrame({
  image,
  imageAlt = "نمونه خدمت",
  index,
  title,
  titleEn,
  lead,
  steps,
  ctaLabel = "درخواست مشاوره",
  ctaHref = "/contact",
}: Props) {
  return (
    <section className="service-frame-track" aria-label={title}>
      <div className="service-frame-stage">
        <div className="service-frame-media">
          <img src={image} alt={imageAlt} loading="eager" decoding="async" />
        </div>

        <div className="service-frame-vignette" aria-hidden="true" />
        <div className="service-frame-shade" aria-hidden="true" />

        <div className="service-frame-headline">
          <p className="service-frame-headline__index latin" lang="en" dir="ltr">
            {index}
          </p>
          <h2 className="service-frame-headline__title">{title}</h2>
          <p className="service-frame-headline__en latin">{titleEn}</p>
        </div>

        <div className="service-frame-copy">
          <aside className="service-frame-card">
            <div className="service-frame-card__rail" aria-hidden="true">
              <span className="latin">process</span>
              <span className="service-frame-card__line" />
              <span className="service-frame-card__dot" />
            </div>

            <p className="service-frame-card__lead">{lead}</p>

            <ol className="service-frame-steps">
              {steps.map((step, i) => (
                <li key={step.title} className="service-frame-step">
                  <span className="service-frame-step__num latin" lang="en" dir="ltr">
                    {String(i + 1).padStart(2, "0")}
                  </span>
                  <div>
                    <h3>{step.title}</h3>
                    <p>{step.text}</p>
                  </div>
                </li>
              ))}
            </ol>

            {ctaLabel ? (
              <div className="service-frame-card__cta">
                <Link href={ctaHref} className="btn btn--light">
                  {ctaLabel}
                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" aria-hidden="true">
                    <path d="M4 12h16M13 5l7 7-7 7" />
                  </svg>
                </Link>
              </div>
            ) : null}
          </aside>
        </div>
      </div>
    </section>
  );
}