// VSE AI · PlusBanner.tsx
// Drop-in React component. Reads variant texts from providers.json (banners.plus_full_screen.variants[]).
// Make sure to import banners.css alongside this component:
//   import "./banners.css";
//   import providers from "./providers.json";

import React from "react";

export type PlusVariantId = "A" | "B" | "C";

export interface PlusVariantData {
  id: PlusVariantId;
  tag: string;
  title: string;
  title_2?: string;
  description: string;
  bullets?: string[];
  promo_line1: string;
  promo_price: string;
  promo_old_price?: string;
  cta_label: string;
  bg: "v1-cyan-waves" | "v2-cyan-aurora" | "v3-cyan-flow";
}

export interface PlusBannerProps {
  variant: PlusVariantData;
  /** Folder where bg PNGs are served from. Defaults to "/plus-bg". */
  bgBasePath?: string;
  onClose?: () => void;
  onCtaClick?: (variantId: PlusVariantId) => void;
}

/**
 * PlusBanner — full-screen modal for the "Plus" upsell.
 * Position the parent container as the viewport (height: 100%) and overlay it on top of your app.
 */
export const PlusBanner: React.FC<PlusBannerProps> = ({
  variant,
  bgBasePath = "/plus-bg",
  onClose,
  onCtaClick,
}) => {
  const bgUrl = `${bgBasePath}/${variant.bg}.png`;
  const hasBullets = variant.bullets && variant.bullets.length > 0;

  return (
    <div className="plus-screen">
      <div className="plus-bg" style={{ backgroundImage: `url(${bgUrl})` }} />
      <div className="plus-card">
        <div
          className="plus-close"
          role="button"
          tabIndex={0}
          onClick={onClose}
          onKeyDown={(e) => (e.key === "Enter" || e.key === " ") && onClose?.()}
          aria-label="Закрыть"
        >
          {"✕"}
        </div>
        <div className="plus-tag">{variant.tag}</div>
        <h2 style={variant.id === "B" ? { fontSize: 48, lineHeight: 1, letterSpacing: "-0.04em" } : variant.id === "C" ? { fontSize: 24 } : undefined}>
          {variant.title}
        </h2>
        {variant.title_2 && (
          <h2 style={{ fontSize: 24, marginTop: 6, opacity: 0.92 }}>{variant.title_2}</h2>
        )}
        <p style={variant.id === "B" ? { marginTop: 14 } : undefined}
           dangerouslySetInnerHTML={{ __html: variant.description }} />

        {hasBullets && (
          <ul className="plus-bullets">
            {variant.bullets!.map((b, i) => <li key={i}>{b}</li>)}
          </ul>
        )}

        <div className="plus-promo">
          <div className="pp-line1">{variant.promo_line1}</div>
          <div className="pp-line2">
            {variant.promo_price}
            {variant.promo_old_price && (
              <span className="strike">{variant.promo_old_price}</span>
            )}
          </div>
        </div>
      </div>
      <div className="plus-cta-wrap">
        <div
          className="plus-cta"
          role="button"
          tabIndex={0}
          onClick={() => onCtaClick?.(variant.id)}
          onKeyDown={(e) => (e.key === "Enter" || e.key === " ") && onCtaClick?.(variant.id)}
        >
          {variant.cta_label}
        </div>
      </div>
    </div>
  );
};

export default PlusBanner;