import type { HomeContent } from "@/lib/content";
import Image from "@/components/Image";

const dotGrid: React.CSSProperties = {
  position: "absolute",
  backgroundImage: "radial-gradient(rgba(255,255,255,.5) 1.8px, transparent 1.9px)",
  backgroundSize: "14px 14px",
  pointerEvents: "none",
};

/** Promotional banner — copy, code & CTA swap per campaign via WordPress. */
export default function Promo({ content }: { content: HomeContent }) {
  const { promo } = content;
  return (
    <section id="promo" style={{ padding: "36px 0 0" }}>
      <div className="container">
        <div
          style={{
            position: "relative",
            overflow: "hidden",
            background:
              "radial-gradient(130% 160% at 84% 10%, rgba(19,163,166,.45) 0%, rgba(19,163,166,0) 46%), linear-gradient(135deg,#0b7376 0%,#02494c 52%,#022f31 100%)",
            border: "1px solid rgba(255,255,255,.55)",
            borderRadius: 26,
            boxShadow: "0 24px 54px rgba(2,47,49,.22)",
          }}
        >
          {/* decorative layer */}
          <div style={{ ...dotGrid, top: 12, left: 26, width: 72, height: 28 }} />
          <div style={{ ...dotGrid, bottom: 76, right: 28, width: 72, height: 58 }} />
          <span
            style={{
              position: "absolute",
              top: 52,
              left: "44%",
              width: 34,
              height: 34,
              border: "2px solid rgba(255,255,255,.45)",
              borderRadius: "50%",
              pointerEvents: "none",
            }}
          />
          <span
            style={{
              position: "absolute",
              bottom: 140,
              left: 22,
              width: 16,
              height: 16,
              border: "2px solid rgba(255,255,255,.35)",
              borderRadius: "50%",
              pointerEvents: "none",
            }}
          />

          {/* discount stamp */}
          <div
            style={{
              position: "absolute",
              top: 24,
              right: 32,
              zIndex: 5,
              width: 98,
              height: 98,
              border: "2px solid rgba(255,255,255,.9)",
              borderRadius: "50%",
              display: "flex",
              alignItems: "center",
              justifyContent: "center",
              transform: "rotate(8deg)",
              pointerEvents: "none",
            }}
          >
            <div
              style={{
                width: 84,
                height: 84,
                border: "1.5px dashed rgba(255,255,255,.65)",
                borderRadius: "50%",
                display: "flex",
                flexDirection: "column",
                alignItems: "center",
                justifyContent: "center",
              }}
            >
              <span style={{ fontFamily: "var(--font-plex-serif)", fontStyle: "italic", fontSize: 11, color: "#ead591", lineHeight: 1 }}>
                {promo.discountPrefix}
              </span>
              <span style={{ fontWeight: 900, fontSize: 26, color: "#fff", lineHeight: 1.05 }}>{promo.discountValue}</span>
              <span style={{ fontWeight: 700, fontSize: 10, letterSpacing: ".22em", color: "#fff", lineHeight: 1 }}>
                {promo.discountSuffix}
              </span>
            </div>
          </div>

          {/* content */}
          <div className="promo-grid" style={{ position: "relative", zIndex: 3 }}>
            <div>
              <div
                style={{
                  fontSize: 11,
                  fontWeight: 700,
                  letterSpacing: ".2em",
                  textTransform: "uppercase",
                  color: "rgba(255,255,255,.72)",
                }}
              >
                {promo.eyebrow}
              </div>
              <div
                style={{
                  fontFamily: "var(--font-plex-serif)",
                  fontStyle: "italic",
                  fontWeight: 600,
                  fontSize: 32,
                  color: "#ead591",
                  marginTop: 14,
                  lineHeight: 1,
                }}
              >
                {promo.scriptLine}
              </div>
              <h2
                style={{
                  fontWeight: 900,
                  fontSize: 56,
                  lineHeight: 1,
                  letterSpacing: "-.015em",
                  textTransform: "uppercase",
                  color: "#fff",
                  margin: "6px 0 0",
                }}
              >
                {promo.headline}
              </h2>
              <div
                style={{
                  fontWeight: 700,
                  fontSize: 17,
                  letterSpacing: ".16em",
                  textTransform: "uppercase",
                  color: "#fff",
                  marginTop: 12,
                }}
              >
                {promo.subline}
              </div>
              <p style={{ fontSize: 15, lineHeight: 1.6, color: "rgba(255,255,255,.75)", margin: "14px 0 0", maxWidth: 440 }}>
                {promo.body}
              </p>
              <div style={{ display: "flex", alignItems: "center", gap: 18, flexWrap: "wrap", marginTop: 26 }}>
                <a
                  className="btn-gold"
                  href={promo.ctaUrl}
                  style={{
                    fontSize: 14,
                    letterSpacing: ".1em",
                    textTransform: "uppercase",
                    padding: "16px 32px",
                    boxShadow: "0 14px 30px rgba(2,28,30,.35)",
                  }}
                >
                  {promo.cta}
                </a>
                <span
                  style={{
                    display: "inline-flex",
                    flexDirection: "column",
                    gap: 3,
                    border: "1.5px dashed rgba(234,213,145,.6)",
                    borderRadius: 14,
                    padding: "9px 18px",
                  }}
                >
                  <span
                    style={{
                      fontSize: 10,
                      fontWeight: 700,
                      letterSpacing: ".14em",
                      textTransform: "uppercase",
                      color: "rgba(255,255,255,.65)",
                    }}
                  >
                    Promo code
                  </span>
                  <span
                    style={{
                      fontFamily: "'Courier New', Courier, monospace",
                      fontWeight: 700,
                      fontSize: 17,
                      letterSpacing: ".08em",
                      color: "#ead591",
                    }}
                  >
                    {promo.code}
                  </span>
                </span>
              </div>
            </div>
            <div style={{ position: "relative", display: "flex", alignItems: "flex-end", justifyContent: "center" }}>
              <div
                style={{
                  position: "absolute",
                  top: "50%",
                  left: "50%",
                  transform: "translate(-50%,-46%)",
                  width: 340,
                  height: 340,
                  background: "radial-gradient(circle, rgba(234,213,145,.32), transparent 66%)",
                  pointerEvents: "none",
                }}
              />
              <span style={{ position: "absolute", top: "8%", left: "6%", width: 10, height: 10, background: "#c9a62f", transform: "rotate(24deg)", pointerEvents: "none" }} />
              <span style={{ position: "absolute", top: "26%", right: "4%", width: 8, height: 8, borderRadius: "50%", background: "rgba(255,255,255,.7)", pointerEvents: "none" }} />
              <span style={{ position: "absolute", bottom: "34%", left: 0, width: 7, height: 7, borderRadius: "50%", background: "#ead591", pointerEvents: "none" }} />
              <span style={{ position: "absolute", top: "52%", right: "10%", width: 9, height: 9, background: "rgba(255,255,255,.55)", transform: "rotate(-18deg)", pointerEvents: "none" }} />
              <Image
                src={promo.image}
                alt="Sigma mascot"
                sizes="(max-width: 768px) 45vw, 200px"
                style={{
                  position: "relative",
                  zIndex: 3,
                  height: 388,
                  width: "auto",
                  marginBottom: -78,
                  filter: "drop-shadow(0 26px 40px rgba(2,28,30,.4))",
                }}
              />
            </div>
          </div>

          {/* gold wave */}
          <svg
            viewBox="0 0 1200 70"
            preserveAspectRatio="none"
            style={{ position: "absolute", bottom: 0, left: 0, width: "100%", height: 56, zIndex: 2, display: "block" }}
          >
            <path
              d="M0,28 C75,4 150,52 225,28 C300,4 375,52 450,28 C525,4 600,52 675,28 C750,4 825,52 900,28 C975,4 1050,52 1125,28 C1163,16 1187,22 1200,28"
              fill="none"
              stroke="rgba(255,255,255,.8)"
              strokeWidth="3"
            />
            <path
              d="M0,44 C75,20 150,68 225,44 C300,20 375,68 450,44 C525,20 600,68 675,44 C750,20 825,68 900,44 C975,20 1050,68 1125,44 C1163,32 1187,38 1200,44 L1200,70 L0,70 Z"
              fill="#c9a62f"
            />
          </svg>
        </div>
      </div>
    </section>
  );
}