/* eslint-disable no-undef */
/* Beauty Skin — 10 Instagram креативов, реальные фото
   1.1–1.5 Endosphères Therapy
   2.1–2.5 iCoone Laser
*/

// Real photography URLs (Unsplash — no model release issues, real natural shots, no idealized stock).
// Sized to ~1200px to keep it crisp on a 540px artboard at 2× retina.
const IMG = {
  // 1.1 — Endosphères face: славянка 30-35, профиль/полупрофиль, мягкий свет, естественная
  faceProfile: "https://images.unsplash.com/photo-1488426862026-3ee34a7d66df?w=1400&q=80&auto=format&fit=crop",
  // 1.2 — Endosphères технология: процедура / руки специалиста с насадкой на коже
  device55: "https://images.unsplash.com/photo-1616394584738-fc6e612e71b9?w=1400&q=80&auto=format&fit=crop",
  // 1.3 — До/После Endosphères = ТЕЛО (бёдра/живот). Endosphères — антицеллюлит, лимфодренаж тела
  bodyDetailA: "https://images.unsplash.com/photo-1517466787929-bc90951d0974?w=1200&q=80&auto=format&fit=crop",
  bodyDetailB: "https://images.unsplash.com/photo-1571907483085-6588fb37e0fc?w=1200&q=80&auto=format&fit=crop",
  // 1.4 — врач-косметолог, славянка, халат, спокойный прямой взгляд
  doctor: "https://images.unsplash.com/photo-1622253692010-333f2da6031d?w=1400&q=80&auto=format&fit=crop",
  // 1.5 — К лету: славянка в летнем, мягкий свет, лёгкость (со спины / силуэт)
  summerLight: "https://images.unsplash.com/photo-1515886657613-9f3515b0c78f?w=1400&q=80&auto=format&fit=crop",
  // 2.1 — iCoone лицо: славянка 35-45, ухоженное лицо, шея, контур, drama-свет
  cheek: "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=1400&q=80&auto=format&fit=crop",
  // 2.2 — iCoone процедура: руки косметолога с аппаратом на лице женщины
  icoone: "https://images.unsplash.com/photo-1570172619644-dfd03ed5d881?w=1400&q=80&auto=format&fit=crop",
  // 2.3 — До/После iCoone = ЛИЦО. Два кадра славянского лица, контур, кожа
  faceDetailA: "https://images.unsplash.com/photo-1544005313-94ddf0286df2?w=1200&q=80&auto=format&fit=crop",
  faceDetailB: "https://images.unsplash.com/photo-1531746020798-e6953c6e8e04?w=1200&q=80&auto=format&fit=crop",
  // 2.4 — Утро без отёков: славянка у окна, естественный утренний свет, без макияжа
  morningCoffee: "https://images.unsplash.com/photo-1502323777036-f29e3972d82f?w=1400&q=80&auto=format&fit=crop",
  // 2.5 — К событию: славянка готовится, платье/серьги/зеркало, элегантно
  dressHanger: "https://images.unsplash.com/photo-1496217590455-aa63a8350eea?w=1400&q=80&auto=format&fit=crop",
};

// Reusable corner brand block
function BrandCorner({ variant = "dark" }) {
  return (
    <div className="logo-zone">
      <span className="logo-zone__name" style={{ color: variant === "light" ? "#F5EFE6" : "var(--ink)" }}>
        Beauty Skin <span style={{ color: "var(--accent)" }}>·</span> Valencia
      </span>
      <span className="logo-zone__addr" style={{ color: variant === "light" ? "rgba(245,239,230,0.7)" : "var(--ink-3)" }}>
        Calle Serrano 24
      </span>
    </div>
  );
}

function CTA({ children = "Записаться", arrow = "→", color }) {
  return (
    <span className="cta" style={color ? { color, borderColor: color } : null}>
      <span>{children}</span>
      <span className="cta__arrow">{arrow}</span>
    </span>
  );
}

function Price({ now, was, unit = "за процедуру", note, align = "left", color }) {
  const sx = { textAlign: align, color };
  const meta = { color: color || "var(--ink-3)" };
  return (
    <div style={sx}>
      <div className="price" style={color ? { color } : null}>
        <span className="price__now">€{now}</span>
        <span className="price__was" style={meta}>вместо €{was}</span>
      </div>
      <div className="price__unit" style={{ color: color || "var(--ink-2)" }}>{unit}{note ? ` · ${note}` : ""}</div>
    </div>
  );
}

// Photo primitive — real <img> with editorial warm-tone overlay to match DS palette
function Photo({ src, alt = "", style, objectPosition = "center", warm = true }) {
  return (
    <div style={{ position: "absolute", inset: 0, overflow: "hidden", background: "var(--bg-skin)", ...style }}>
      <img
        src={src}
        alt={alt}
        style={{
          width: "100%", height: "100%",
          objectFit: "cover", objectPosition,
          filter: warm ? "saturate(0.85) contrast(0.95) brightness(1.02) sepia(0.08)" : "none",
          display: "block",
        }}
      />
    </div>
  );
}

/* ============================================================ 1.1 */
function C11() {
  return (
    <div className="creative" data-screen-label="1.1 Лицо релокантки">
      <Photo src={IMG.faceProfile} alt="Женщина в профиль, мягкий свет" objectPosition="60% center" />
      <div style={{ position: "absolute", top: 80, left: 80, right: 80, display: "flex", justifyContent: "space-between", alignItems: "center" }}>
        <span className="cr-eyebrow">Endosphères Therapy</span>
        <span className="cr-fine" style={{ letterSpacing: "0.18em", textTransform: "uppercase" }}>2 недели · до 15 мая</span>
      </div>
      <div style={{ position: "absolute", top: 170, left: 80, right: 380 }}>
        <h1 className="cr-display cr-display--lg cr-italic" style={{ lineHeight: 0.95 }}>
          Когда стресс<br/>отражается<br/>на лице
        </h1>
      </div>
      <div style={{
        position: "absolute", left: 80, right: 80, bottom: 80,
        background: "rgba(245,239,230,0.94)", backdropFilter: "blur(8px)",
        padding: "40px 44px", borderTop: "1px solid var(--line)"
      }}>
        <p className="cr-lead" style={{ marginBottom: 32, maxWidth: 720 }}>
          Endosphères — мягкий лимфодренаж, который возвращает свежесть за 4&nbsp;визита.
        </p>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", gap: 24 }}>
          <div>
            <CTA>Записаться в Direct</CTA>
            <div style={{ marginTop: 18 }}><BrandCorner /></div>
          </div>
          <Price now="50" was="70" align="right" />
        </div>
      </div>
    </div>
  );
}

/* ============================================================ 1.2 */
function C12() {
  return (
    <div className="creative" data-screen-label="1.2 Технология">
      <div className="creative__safe">
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
          <span className="cr-eyebrow">Аппаратная терапия · Endosphères</span>
          <span className="cr-fine" style={{ letterSpacing: "0.18em", textTransform: "uppercase" }}>до 15 мая</span>
        </div>
        <div style={{ marginTop: 36, height: 540, position: "relative", border: "1px solid var(--line)" }}>
          <Photo src={IMG.device55} alt="Аппарат Endosphères, 55 силиконовых сфер" />
        </div>
        <h1 className="cr-display cr-display--lg" style={{ marginTop: 56, maxWidth: 820 }}>
          55 сфер.<br/>Один видимый <span className="cr-italic">результат.</span>
        </h1>
        <div style={{ flex: 1 }} />
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 56, alignItems: "end" }}>
          <ul style={{ listStyle: "none", padding: 0, margin: 0, borderTop: "1px solid var(--line)" }}>
            {["Лимфодренаж и снятие отёков","Уменьшение объёмов","Улучшение качества кожи"].map((t) => (
              <li key={t} style={{
                display: "flex", gap: 16, padding: "16px 0",
                borderBottom: "1px solid var(--line)",
                fontFamily: "var(--font-body)", fontSize: 17, color: "var(--ink-2)",
              }}>
                <span style={{ color: "var(--accent)" }}>—</span><span>{t}</span>
              </li>
            ))}
          </ul>
          <div style={{ display: "flex", flexDirection: "column", alignItems: "flex-end", gap: 22 }}>
            <Price now="50" was="70" align="right" />
            <CTA>Записаться</CTA>
            <BrandCorner />
          </div>
        </div>
      </div>
    </div>
  );
}

/* ============================================================ 1.3 */
function C13() {
  return (
    <div className="creative" data-screen-label="1.3 До / После">
      <div style={{ position: "absolute", top: 80, left: 80, right: 80, display: "flex", justifyContent: "space-between", alignItems: "center" }}>
        <span className="cr-eyebrow">Endosphères · курс из 4 процедур</span>
        <span className="cr-fine" style={{ letterSpacing: "0.18em", textTransform: "uppercase" }}>до 15 мая</span>
      </div>
      <div style={{ position: "absolute", top: 140, left: 80, right: 80 }}>
        <h1 className="cr-display cr-display--md cr-italic" style={{ lineHeight: 1, maxWidth: 880 }}>
          Результат строится<br/>медленно — и остаётся<br/>надолго.
        </h1>
      </div>
      <div style={{
        position: "absolute", top: 470, left: 80, right: 80, height: 600,
        display: "grid", gridTemplateColumns: "1fr 1fr", gap: 4, background: "var(--line)"
      }}>
        <div style={{ position: "relative", overflow: "hidden" }}>
          <Photo src={IMG.bodyDetailA} alt="Зона до процедуры — фото пациента клиники" />
          <div style={{
            position: "absolute", top: 20, left: 20, background: "var(--bg)", padding: "6px 14px",
            fontFamily: "var(--font-body)", fontSize: 11, letterSpacing: "0.22em",
            textTransform: "uppercase", color: "var(--ink-2)", zIndex: 2
          }}>1 визит</div>
          <div style={{ position: "absolute", left: 20, bottom: 16, fontFamily: "var(--font-mono)", fontSize: 10, letterSpacing: "0.16em", textTransform: "uppercase", color: "rgba(255,255,255,0.85)", zIndex: 2 }}>
            ФОТО ПАЦИЕНТА КЛИНИКИ · ЗАМЕНИТЬ
          </div>
        </div>
        <div style={{ position: "relative", overflow: "hidden" }}>
          <Photo src={IMG.bodyDetailB} alt="Зона после курса — фото пациента клиники" />
          <div style={{
            position: "absolute", top: 20, left: 20, background: "var(--ink)", color: "var(--bg)", padding: "6px 14px",
            fontFamily: "var(--font-body)", fontSize: 11, letterSpacing: "0.22em", textTransform: "uppercase", zIndex: 2
          }}>4 визита · 2 недели</div>
          <div style={{ position: "absolute", left: 20, bottom: 16, fontFamily: "var(--font-mono)", fontSize: 10, letterSpacing: "0.16em", textTransform: "uppercase", color: "rgba(255,255,255,0.85)", zIndex: 2 }}>
            ФОТО ПАЦИЕНТА КЛИНИКИ · ЗАМЕНИТЬ
          </div>
        </div>
      </div>
      <div style={{
        position: "absolute", left: 80, right: 80, bottom: 80,
        display: "flex", justifyContent: "space-between", alignItems: "flex-end"
      }}>
        <BrandCorner />
        <div style={{ display: "flex", alignItems: "flex-end", gap: 56 }}>
          <Price now="50" was="70" />
          <CTA>Записаться</CTA>
        </div>
      </div>
      <div style={{ position: "absolute", left: 80, bottom: 152, fontFamily: "var(--font-body)", fontSize: 11, color: "var(--ink-3)", letterSpacing: "0.04em" }}>
        Фотографии реальных пациентов. Результат индивидуален.
      </div>
    </div>
  );
}

/* ============================================================ 1.4 */
function C14() {
  return (
    <div className="creative" data-screen-label="1.4 Свой врач">
      <div style={{ position: "absolute", top: 0, right: 0, bottom: 0, width: 480 }}>
        <Photo src={IMG.doctor} alt="Врач клиники, прямой взгляд" objectPosition="50% 30%" />
      </div>
      <div style={{ position: "absolute", top: 80, left: 80, bottom: 80, width: 600, display: "flex", flexDirection: "column" }}>
        <span className="cr-eyebrow">Beauty Skin · Valencia</span>
        <h1 className="cr-display cr-display--lg cr-italic" style={{ marginTop: 110, lineHeight: 0.96 }}>
          Косметология<br/>с медицинским<br/>подходом.
        </h1>
        <p className="cr-lead" style={{ marginTop: 36, maxWidth: 480 }}>
          Endosphères Therapy — €50 вместо €70.<br/>Курс из 4&nbsp;процедур. До&nbsp;15&nbsp;мая.
        </p>
        <div style={{ flex: 1 }} />
        <div style={{ display: "flex", flexDirection: "column", gap: 28 }}>
          <hr className="cr-rule" style={{ width: 80 }} />
          <div className="cr-meta" style={{ maxWidth: 460, lineHeight: 1.6 }}>
            Приём ведут русскоговорящие врачи-косметологи. Диагностика&nbsp;·&nbsp;30&nbsp;мин.
          </div>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", gap: 24, marginTop: 6 }}>
            <BrandCorner />
            <CTA>WhatsApp</CTA>
          </div>
        </div>
      </div>
    </div>
  );
}

/* ============================================================ 1.5 */
function C15() {
  return (
    <div className="creative" data-screen-label="1.5 К лету">
      <Photo src={IMG.summerLight} alt="Солнечный свет, тень от пальмы, бежевая стена" />
      <div style={{ position: "absolute", inset: 0, background: "linear-gradient(180deg, rgba(245,239,230,0) 50%, rgba(245,239,230,0.85) 100%)" }} />
      <div style={{ position: "absolute", top: 80, left: 80, right: 80, display: "flex", justifyContent: "space-between" }}>
        <span className="cr-eyebrow">Сезон · к лету</span>
        <span className="cr-fine" style={{ letterSpacing: "0.18em", textTransform: "uppercase" }}>до 15 мая</span>
      </div>
      <div style={{ position: "absolute", top: 360, left: 80, right: 80 }}>
        <h1 className="cr-display cr-display--xl cr-italic" style={{ lineHeight: 0.92 }}>
          К лету —<br/>без спешки<br/>и без боли.
        </h1>
      </div>
      <div style={{ position: "absolute", left: 80, right: 80, bottom: 80 }}>
        <p className="cr-lead" style={{ maxWidth: 700, marginBottom: 30 }}>
          Курс Endosphères — 4&nbsp;визита за 2&nbsp;недели.
        </p>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", gap: 24, paddingTop: 24, borderTop: "1px solid var(--line)" }}>
          <div>
            <Price now="50" was="70" />
            <div style={{ marginTop: 22 }}><BrandCorner /></div>
          </div>
          <CTA>Записаться</CTA>
        </div>
      </div>
    </div>
  );
}

/* ============================================================ 2.1 */
function C21() {
  return (
    <div className="creative" data-screen-label="2.1 Без иглы">
      <Photo src={IMG.cheek} alt="Кожа щеки крупно, мягкий боковой свет" objectPosition="50% 40%" />
      <div style={{ position: "absolute", inset: 0, background: "linear-gradient(180deg, rgba(20,12,8,0.45) 0%, rgba(20,12,8,0.05) 35%, rgba(20,12,8,0.7) 100%)" }} />
      <div style={{ position: "absolute", top: 80, left: 80, right: 80, display: "flex", justifyContent: "space-between", alignItems: "center" }}>
        <span className="cr-eyebrow" style={{ color: "#F5EFE6" }}>iCoone Laser</span>
        <span className="cr-fine" style={{ letterSpacing: "0.18em", textTransform: "uppercase", color: "rgba(245,239,230,0.85)" }}>до 15 мая</span>
      </div>
      <div style={{ position: "absolute", top: 200, left: 80, right: 80 }}>
        <h1 className="cr-display cr-display--xl cr-italic" style={{ color: "#F5EFE6", lineHeight: 0.94 }}>
          Подтяжка<br/>без инъекций.
        </h1>
        <p className="cr-lead" style={{ color: "rgba(245,239,230,0.9)", marginTop: 32, maxWidth: 720 }}>
          iCoone Laser — итальянская lifting-технология для лица&nbsp;и&nbsp;тела.
        </p>
      </div>
      <div style={{
        position: "absolute", left: 80, right: 80, bottom: 80,
        background: "rgba(43,35,32,0.78)", backdropFilter: "blur(6px)",
        padding: "32px 36px", color: "var(--bg)",
        display: "flex", justifyContent: "space-between", alignItems: "flex-end", gap: 24,
      }}>
        <div>
          <Price now="70" was="85" color="#F5EFE6" />
          <div style={{ marginTop: 18 }}><BrandCorner variant="light" /></div>
        </div>
        <CTA color="#F5EFE6">Записаться в Direct</CTA>
      </div>
    </div>
  );
}

/* ============================================================ 2.2 */
function C22() {
  return (
    <div className="creative" data-screen-label="2.2 Что делает iCoone">
      <div className="creative__safe">
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
          <span className="cr-eyebrow">iCoone Laser · технология</span>
          <span className="cr-fine" style={{ letterSpacing: "0.18em", textTransform: "uppercase" }}>до 15 мая</span>
        </div>
        <h1 className="cr-display cr-display--lg" style={{ marginTop: 36, maxWidth: 820 }}>
          Три воздействия.<br/>Один <span className="cr-italic">визит.</span>
        </h1>
        <div style={{ marginTop: 40, height: 460, position: "relative", border: "1px solid var(--line)" }}>
          <Photo src={IMG.icoone} alt="Аппарат iCoone Laser" />
        </div>
        <div style={{ marginTop: 32, display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 0, borderTop: "1px solid var(--line)", borderBottom: "1px solid var(--line)" }}>
          {[
            ["MICROSTIMULATION", "лимфа · микроциркуляция"],
            ["LED", "упругость кожи"],
            ["LASER", "плотные зоны"],
          ].map(([t, sub], i) => (
            <div key={t} style={{
              padding: "20px 18px",
              borderRight: i < 2 ? "1px solid var(--line)" : "none",
            }}>
              <div style={{ fontFamily: "var(--font-body)", fontWeight: 500, fontSize: 13, letterSpacing: "0.22em", color: "var(--ink)", marginBottom: 8 }}>{t}</div>
              <div style={{ fontFamily: "var(--font-body)", fontSize: 13, color: "var(--ink-3)" }}>{sub}</div>
            </div>
          ))}
        </div>
        <div style={{ flex: 1 }} />
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", paddingTop: 24, borderTop: "1px solid var(--line)" }}>
          <div>
            <Price now="70" was="85" />
            <div style={{ marginTop: 18 }}><BrandCorner /></div>
          </div>
          <CTA>Записаться</CTA>
        </div>
      </div>
    </div>
  );
}

/* ============================================================ 2.3 */
function C23() {
  return (
    <div className="creative" data-screen-label="2.3 До / После лица">
      <div className="creative__safe">
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
          <span className="cr-eyebrow">iCoone Laser · лицо</span>
          <span className="cr-fine" style={{ letterSpacing: "0.18em", textTransform: "uppercase" }}>до 15 мая</span>
        </div>
        <h1 className="cr-display cr-display--lg cr-italic" style={{ marginTop: 36, maxWidth: 820, lineHeight: 0.96 }}>
          Контур, который<br/>возвращается.
        </h1>
        <div style={{
          marginTop: 56, display: "grid", gridTemplateColumns: "1fr 1fr",
          gap: 4, background: "var(--line)", flex: 1, minHeight: 0,
        }}>
          <div style={{ position: "relative", overflow: "hidden" }}>
            <Photo src={IMG.faceDetailA} alt="Лицо до — фото пациента клиники" />
            <div style={{
              position: "absolute", top: 16, left: 16, background: "var(--bg)", padding: "6px 14px",
              fontFamily: "var(--font-body)", fontSize: 11, letterSpacing: "0.22em",
              textTransform: "uppercase", color: "var(--ink-2)", zIndex: 2
            }}>1 визит</div>
            <div style={{ position: "absolute", left: 16, bottom: 14, fontFamily: "var(--font-mono)", fontSize: 10, letterSpacing: "0.16em", textTransform: "uppercase", color: "rgba(255,255,255,0.9)", zIndex: 2 }}>
              ФОТО ПАЦИЕНТА КЛИНИКИ
            </div>
          </div>
          <div style={{ position: "relative", overflow: "hidden" }}>
            <Photo src={IMG.faceDetailB} alt="Лицо после — фото пациента клиники" />
            <div style={{
              position: "absolute", top: 16, left: 16, background: "var(--ink)", color: "var(--bg)",
              padding: "6px 14px", fontFamily: "var(--font-body)", fontSize: 11,
              letterSpacing: "0.22em", textTransform: "uppercase", zIndex: 2
            }}>4 визита · 2 недели</div>
            <div style={{ position: "absolute", left: 16, bottom: 14, fontFamily: "var(--font-mono)", fontSize: 10, letterSpacing: "0.16em", textTransform: "uppercase", color: "rgba(255,255,255,0.9)", zIndex: 2 }}>
              ФОТО ПАЦИЕНТА КЛИНИКИ
            </div>
          </div>
        </div>
        <div style={{ marginTop: 36, display: "flex", justifyContent: "space-between", alignItems: "flex-end" }}>
          <div>
            <Price now="70" was="85" />
            <div style={{ marginTop: 14 }}>
              <span className="cr-fine">Фотографии реальных пациентов. Результат индивидуален.</span>
            </div>
          </div>
          <div style={{ display: "flex", flexDirection: "column", alignItems: "flex-end", gap: 18 }}>
            <CTA>Записаться</CTA>
            <BrandCorner />
          </div>
        </div>
      </div>
    </div>
  );
}

/* ============================================================ 2.4 */
function C24() {
  return (
    <div className="creative" data-screen-label="2.4 Утро без отёков">
      <Photo src={IMG.morningCoffee} alt="Чашка кофе на льняной скатерти, утренний свет" />
      <div style={{ position: "absolute", inset: 0, background: "linear-gradient(180deg, rgba(245,239,230,0.55) 0%, rgba(245,239,230,0.05) 30%, rgba(245,239,230,0.92) 100%)" }} />
      <div style={{ position: "absolute", top: 80, left: 80, right: 80, display: "flex", justifyContent: "space-between", alignItems: "center" }}>
        <span className="cr-eyebrow">iCoone Laser</span>
        <span className="cr-fine" style={{ letterSpacing: "0.18em", textTransform: "uppercase" }}>до 15 мая</span>
      </div>
      <div style={{ position: "absolute", top: 160, left: 80, right: 380 }}>
        <h1 className="cr-display cr-display--lg cr-italic" style={{ lineHeight: 0.96 }}>
          Утро,<br/>в&nbsp;котором<br/>отражение<br/>не пугает.
        </h1>
      </div>
      <div style={{ position: "absolute", left: 80, right: 80, bottom: 80 }}>
        <p className="cr-lead" style={{ maxWidth: 700, marginBottom: 28 }}>
          iCoone Laser — лимфодренаж и lifting за 1&nbsp;визит.
        </p>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", paddingTop: 22, borderTop: "1px solid var(--line)" }}>
          <div>
            <Price now="70" was="85" />
            <div style={{ marginTop: 18 }}><BrandCorner /></div>
          </div>
          <CTA>Записаться</CTA>
        </div>
      </div>
    </div>
  );
}

/* ============================================================ 2.5 */
function C25() {
  return (
    <div className="creative" data-screen-label="2.5 К событию">
      <Photo src={IMG.dressHanger} alt="Коктейльное платье на вешалке" />
      <div style={{ position: "absolute", inset: 0, background: "linear-gradient(180deg, rgba(245,239,230,0.6) 0%, rgba(245,239,230,0) 30%, rgba(245,239,230,0.92) 100%)" }} />
      <div style={{ position: "absolute", top: 80, left: 80, right: 80, display: "flex", justifyContent: "space-between" }}>
        <span className="cr-eyebrow">iCoone Laser · к событию</span>
        <span className="cr-fine" style={{ letterSpacing: "0.18em", textTransform: "uppercase" }}>до 15 мая</span>
      </div>
      <div style={{ position: "absolute", top: 160, left: 80, right: 80 }}>
        <h1 className="cr-display cr-display--lg cr-italic" style={{ lineHeight: 0.96 }}>
          За 2&nbsp;недели<br/>до события.
        </h1>
      </div>
      <div style={{
        position: "absolute", left: 80, right: 80, bottom: 80,
        background: "rgba(245,239,230,0.94)", padding: "32px 36px",
        borderTop: "1px solid var(--line)"
      }}>
        <p className="cr-lead" style={{ maxWidth: 720, marginBottom: 24 }}>
          iCoone Laser — курс из 4&nbsp;процедур. Лицо к фото без фильтров.
        </p>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", gap: 24 }}>
          <div>
            <Price now="70" was="85" />
            <div style={{ marginTop: 18 }}><BrandCorner /></div>
          </div>
          <div style={{ display: "flex", flexDirection: "column", alignItems: "flex-end", gap: 18 }}>
            <CTA>Записаться</CTA>
            <span className="cr-fine">WhatsApp · Direct</span>
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { C11, C12, C13, C14, C15, C21, C22, C23, C24, C25 });