"use client";

import { withCDN } from "@/src/lib/utils";
import Image from "next/image";

/**
 * Placeholder shown while the footer form loads.
 *
 * The wrapper, the image column and the form column deliberately carry the
 * SAME classes as the real form in Footer-Form.tsx - including the two that
 * are styled from globals.css, `from-outer-wrapper` and `footer-form-wrapper`.
 * The skeleton used to approximate them with its own widths and image offsets,
 * so the two columns sat in different places and the photo overlapped the
 * fields until the form swapped in. Only what is inside the form column - the
 * shimmer bars standing in for the heading, fields, consent and button -
 * differs from the real thing.
 *
 * `slug` mirrors the real form's per-slug width, so the column does not
 * change size at the moment the form appears.
 */
export function FormSkeleton({ slug }: { slug?: string } = {}) {
  const bar =
    "bg-gradient-to-r from-gray-200 via-gray-150 to-gray-200 animate-pulse";

  return (
    <div className="max-w-[1300px] mx-auto w-full flex flex-col md:flex-row items-center justify-center gap-8 md:gap-[20px] lg:gap-[90px] xl:gap-[111px] px-12 md:px-16 lg:px-32 xl:px-0 mt-[12px] md:mt-[-36] lg:mt-[-4px] xl:mt-[-10px] 2xl:mt-[-10px] mb-5 from-outer-wrapper">
      {/* Right image - the real photo, in the real position, so nothing moves
          when the form arrives. */}
      <div className="relative flex justify-center items-center w-full md:order-2 h-full z-70">
        <Image
          src={withCDN("/teacher.png")}
          alt=""
          aria-hidden="true"
          width={620}
          height={620}
          priority
          className="lg:block hidden md:absolute max-w-[640px] xl:w-[640px] lg:w-[50dvw] sm:w-[40dvw] w-[80dvw] sm:top-[-130px] lg:top-[-238px] xl:top-[-230px] xl:right-[-80px] md:right-[-100px] rounded-full object-cover"
        />
        <Image
          src={withCDN("/teacher_two.png")}
          alt=""
          aria-hidden="true"
          width={620}
          height={620}
          className="block lg:hidden object-contain md:absolute max-w-[600px] h-[380px] md:h-[400px] xl:w-[50dvw] md:w-[70dwv] sm:w-[40dvw] w-[80dvw]  sm:top-[-300px] md:top-[-180px]  md:right-[-30] "
        />
      </div>

      {/* Form column */}
      <div
        role="status"
        aria-label="Loading form"
        className={`flex flex-col lg:mt-24 xl:mt-46 md:mt-26 items-center gap-4 md:gap-1 w-full md:max-w-[500px] lg:max-w-[600px]  md:order-1 h-auto overflow-visible footer-form-wrapper ${
          slug === "workshop"
            ? "xl:max-w-[416px] xl:ml-[65px]"
            : "xl:max-w-[400px] xl:ml-[75px]"
        }`}
      >
        {/* Heading + subheading, on the same margins DynamicHeader uses */}
        <div className="relative w-full text-center mt-1 md:mt-13 lg:mt-24 xl:mt-16" aria-hidden="true">
          <div className={`h-10 rounded-lg mb-4 ${bar}`} />
          <div className={`h-6 rounded-lg w-3/4 mx-auto mb-2 ${bar}`} />
        </div>

        {/* Fields */}
        <div
          className="flex flex-col items-start gap-2 w-full mt-3 md:mt-1 overflow-visible relative z-10"
          aria-hidden="true"
        >
          <div className={`w-full h-12 rounded-full ${bar}`} />
          <div className={`w-full h-12 rounded-full ${bar}`} />
          <div className={`w-full h-12 rounded-full ${bar}`} />

          {/* Consent row */}
          <div className="flex items-start gap-2 mt-2 md:mt-2 w-full">
            <div className={`w-5 h-5 rounded flex-shrink-0 mt-1 ${bar}`} />
            <div className={`h-6 rounded-lg w-full mt-1 ${bar}`} />
          </div>

          {/* Submit */}
          <div className={`w-full h-12 rounded-full mt-4 ${bar}`} />
        </div>
      </div>
    </div>
  );
}