{/* Special Offer Modal Header */}
<div className="ant-row modal__header align__items--center position--relative p--16">
{/* close icon */}
<svg
  className="close-icon"
  width="24"
  height="24"
  viewBox="0 0 24 24"
  fill="none"
  xmlns="http://www.w3.org/2000/svg"
  onClick={() => setIsModalOpen(false)}
  style={{ cursor: "pointer" }}
>
  <path
    d="M19 12a7 7 0 1 1-14 0 7 7 0 0 1 14 0z"
    fill="#121212"
    stroke="#121212"
    strokeWidth="2"
    strokeLinecap="round"
    strokeLinejoin="round"
  />
  <path
    d="M14.812 9.187l-5.625 5.626m5.625 0L9.187 9.187"
    stroke="#fff"
    strokeWidth="1.5"
    strokeLinecap="round"
    strokeLinejoin="round"
  />
</svg>

<div className="ant-col Special__offer__modal__header__left">
  <div
    className="image-skeleton image-skeleton__square"
    style={{ width: 110, height: 110, borderRadius: 16 }}
  >
    <img
      className="image-skeleton__image thumb isLoaded noBlur"
      src="https://cdn.komi.io/cdn-cgi/image/width=10,height=10,blur=5,dpr=2/photos/ZFUl6YoabKm2gdA01W9-p.png"
      alt="thumb"
    />
    <img
      className="image-skeleton__image original isLoaded"
      src="https://cdn.komi.io/cdn-cgi/image/width=110,height=110,dpr=2/photos/ZFUl6YoabKm2gdA01W9-p.png"
      alt="thumb"
    />
  </div>
</div>

<div className="ant-col music-card__right flex--1 p__l--16">
  <div className="ant-typography text text--semibold14" style={{ WebkitLineClamp: 2 }}>
    offer
  </div>
  <div className="ant-typography text text--regular14 d--block opacity--05 cursor-pointer">
    https://google.com
  </div>
</div>
</div>

{/* Special Offer Form */}
<Formik
initialValues={initialValues}
onSubmit={handleSubmit}
validationSchema={validateSpecialOfferSchema}
>
<Form className="offer-form-item">
  <Text className="text text--regular14 opacity--06">
    Copy the code below and visit the store to claim your discount.
  </Text>

  <Field
    component={AntInput}
    name="specialOffer.couponCode"
    type={FieldType.input}
    label="Coupon Code"
    placeholder="Enter coupon code"
  />

  <div
    className="Special__offer__modal__copy--btn d--flex p--12 cursor-pointer"
    onClick={() => navigator.clipboard.writeText(initialValues.specialOffer.couponCode)}
  >
    <div className="text text--semibold16">{initialValues.specialOffer.couponCode}</div>
    <div className="copy-text">Copy Code</div>
  </div>

  {/* Buttons identical to first page.tsx */}
  <div className="link-editor__actions m__t--16">
    <Button className="ant-btn-xl ant-btn-uppercase" onClick={() => setIsModalOpen(false)}>
      Cancel
    </Button>
    <Button className="ant-btn-xl ant-btn-uppercase" type="primary" htmlType="submit">
      Done
    </Button>
  </div>
</Form>
</Formik>