// Fake "ad" tiles — visual-only placeholders that look like scroll-stopping social ads.
// Each renders a 9:16 phone-shaped card with a scene, a caption bar, a CTA, and platform chrome.

const AdTile = ({ ad, height = 360, aspect = "9/16", fluid = false, playing = false, mediaOverride }) => {
  const isVideo = ad.kind === "video";
  // When ad.raw === true, the social-feed chrome (top/bottom bars, hook, play icon) is hidden
  // so real media shows edge-to-edge. Defaults to false to keep the "in-feed" look.
  const showChrome = !ad.raw;
  const mediaSrc = mediaOverride || ad.media;
  const hasRealMedia = !!mediaSrc;
  // Two sizing modes:
  //  - fixed (default): width derived from height × 9/16 — used by hero marquee + VideoAdsSection
  //  - fluid: absolutely fills its parent (parent wrapper controls aspect ratio) — used for static 1:1
  const innerStyle = fluid
    ? {
        position: "absolute", inset: 0,
        borderRadius: 18, overflow: "hidden",
        background: ad.bg,
        boxShadow: "0 20px 48px rgba(5,27,66,0.18), 0 2px 6px rgba(5,27,66,0.08)",
        border: "1px solid rgba(255,255,255,0.08)",
        color: "#fff",
        fontFamily: "'Lato',sans-serif",
      }
    : {
        position: "relative",
        width: Math.round(height * 9 / 16),
        height,
        borderRadius: 18, overflow: "hidden",
        background: ad.bg,
        boxShadow: "0 20px 48px rgba(5,27,66,0.18), 0 2px 6px rgba(5,27,66,0.08)",
        border: "1px solid rgba(255,255,255,0.08)",
        flex: "none",
        color: "#fff",
        fontFamily: "'Lato',sans-serif",
      };
  return (
    <div style={innerStyle}>
      {/* Scene or real media */}
      <AdScene ad={ad} mediaOverride={mediaOverride} />

      {showChrome && (
        <>
          {/* Platform chrome (top) */}
          <div style={{
            position: "absolute", top: 10, left: 10, right: 10,
            display: "flex", alignItems: "center", gap: 8,
            fontFamily: "'Inter',sans-serif", fontSize: 11, fontWeight: 600,
          }}>
            <div style={{
              width: 22, height: 22, borderRadius: 999,
              background: "linear-gradient(135deg,#fff,#e5e5e5)",
              display: "flex", alignItems: "center", justifyContent: "center",
              color: "#051B42", fontSize: 10, fontWeight: 700,
            }}>{ad.brandInitial}</div>
            <div style={{ lineHeight: 1.1 }}>
              <div style={{ fontSize: 11 }}>{ad.brand}</div>
              <div style={{ fontSize: 9, fontWeight: 400, opacity: 0.72 }}>Sponsored · {ad.platform}</div>
            </div>
            <div style={{ marginLeft: "auto", fontSize: 14, opacity: 0.8, letterSpacing: 2 }}>···</div>
          </div>

          {/* Scrim */}
          <div style={{
            position: "absolute", inset: 0,
            background: "linear-gradient(180deg, rgba(0,0,0,0.35) 0%, transparent 30%, transparent 55%, rgba(0,0,0,0.65) 100%)",
            pointerEvents: "none",
          }}/>

          {/* Play icon — only for fake videos (real videos already autoplay) */}
          {isVideo && !hasRealMedia && (
            <div style={{
              position: "absolute", top: "50%", left: "50%",
              transform: "translate(-50%,-50%)",
              width: 54, height: 54, borderRadius: 999,
              background: "rgba(255,255,255,0.16)",
              backdropFilter: "blur(8px)",
              border: "1.5px solid rgba(255,255,255,0.45)",
              display: "flex", alignItems: "center", justifyContent: "center",
            }}>
              <svg width="20" height="20" viewBox="0 0 24 24" fill="#fff" style={{ marginLeft: 3 }}>
                <polygon points="6 3 20 12 6 21 6 3"/>
              </svg>
            </div>
          )}

          {/* Caption hook */}
          {ad.hook && (
            <div style={{
              position: "absolute", left: 12, right: 12, bottom: 60,
              fontFamily: "'Inter',sans-serif", fontWeight: 600, fontSize: 15,
              lineHeight: 1.15, letterSpacing: "-0.01em",
              textShadow: "0 2px 8px rgba(0,0,0,0.4)",
            }}>
              {ad.hook}
            </div>
          )}

          {/* Bottom CTA bar */}
          {(ad.cta || ad.domain) && (
            <div style={{
              position: "absolute", left: 12, right: 12, bottom: 12,
              display: "flex", alignItems: "center", justifyContent: "space-between",
              padding: "8px 10px",
              background: "rgba(255,255,255,0.12)",
              backdropFilter: "blur(10px)",
              borderRadius: 10,
              border: "1px solid rgba(255,255,255,0.18)",
            }}>
              <div style={{ lineHeight: 1.15 }}>
                <div style={{ fontSize: 9, opacity: 0.7, textTransform: "uppercase", letterSpacing: 1 }}>
                  {ad.domain}
                </div>
                <div style={{ fontSize: 11, fontWeight: 600 }}>{ad.cta}</div>
              </div>
              <div style={{
                fontSize: 10, fontWeight: 600,
                padding: "6px 10px", borderRadius: 6,
                background: "rgba(255,255,255,0.95)", color: "#051B42",
              }}>Shop Now</div>
            </div>
          )}

          {/* Progress bar — only for fake videos */}
          {isVideo && !hasRealMedia && (
            <div style={{ position: "absolute", top: 42, left: 10, right: 10, height: 2, background: "rgba(255,255,255,0.2)", borderRadius: 2 }}>
              <div style={{ width: `${ad.progress ?? 35}%`, height: "100%", background: "#fff", borderRadius: 2 }}/>
            </div>
          )}
        </>
      )}
    </div>
  );
};

// Drawn "scene" for each ad — tasteful gradient + shape composition (no stock photos).
// If ad.media (or mediaOverride) is provided (e.g. "uploads/my-ad.mp4" or "uploads/product.jpg"),
// we render the real file instead of the fake scene. Videos autoplay muted and loop.
// mediaOverride lets the hero marquee pick a different-aspect variant (e.g. ad.mediaMarquee).
const AdScene = ({ ad, mediaOverride }) => {
  const src = mediaOverride || ad.media;
  if (src) {
    const lower = src.toLowerCase();
    const isVideo = /\.(mp4|webm|mov|m4v|ogv)(\?|$)/.test(lower);
    // Default to `cover` so media fills the frame edge-to-edge.
    // For sources that don't exactly match the frame aspect, slight cropping occurs.
    // To avoid any crop, either (a) export at exact 1080×1920 (9:16) / square (1:1),
    // or (b) set ad.fit = "contain" on that specific ad.
    const fit = ad.fit || "cover";
    return (
      <div style={{ position: "absolute", inset: 0, background: ad.bg || "#000" }}>
        {isVideo ? (
          <video
            src={src}
            autoPlay muted loop playsInline
            poster={ad.poster}
            style={{ width: "100%", height: "100%", objectFit: fit, display: "block" }}
          />
        ) : (
          <img
            src={src}
            alt={ad.brand || ""}
            style={{ width: "100%", height: "100%", objectFit: fit, display: "block" }}
          />
        )}
      </div>
    );
  }
  return (
    <div style={{ position: "absolute", inset: 0 }}>
      {ad.scene}
    </div>
  );
};

// Scene library — abstract, on-brand compositions.
const Scenes = {
  // Warm cream product shot
  productCream: (
    <>
      <div style={{ position: "absolute", inset: 0, background: "linear-gradient(160deg,#F9F7F1 0%,#E8DCC4 100%)" }}/>
      <div style={{ position: "absolute", left: "50%", top: "40%", transform: "translate(-50%,-50%)",
        width: 120, height: 180, borderRadius: "50% / 18%",
        background: "linear-gradient(155deg,#b5896a,#7a4e2e)",
        boxShadow: "inset -16px -24px 32px rgba(0,0,0,0.25), 0 20px 28px rgba(0,0,0,0.2)",
      }}/>
      <div style={{ position: "absolute", left: "50%", top: "29%", transform: "translate(-50%,-50%)",
        width: 48, height: 16, borderRadius: 4, background: "#2d1a0f",
      }}/>
    </>
  ),
  // Fitness green gradient
  fitnessGreen: (
    <>
      <div style={{ position: "absolute", inset: 0, background: "linear-gradient(170deg,#1a3a2e 0%,#0d2419 60%,#000 100%)" }}/>
      <div style={{ position: "absolute", left: 0, right: 0, bottom: 0, height: "55%",
        background: "radial-gradient(ellipse at 50% 100%, rgba(120,220,140,0.35), transparent 70%)",
      }}/>
      <div style={{ position: "absolute", left: "50%", top: "40%", transform: "translate(-50%,-50%)",
        width: 140, height: 140, borderRadius: 999,
        background: "conic-gradient(from 220deg, #6ee7b7 0%, #3d8a6a 40%, #1a3a2e 70%, #6ee7b7 100%)",
        filter: "blur(0.2px)",
        boxShadow: "0 0 60px rgba(110,231,183,0.35)",
      }}/>
      <div style={{ position: "absolute", left: "50%", top: "40%", transform: "translate(-50%,-50%)",
        width: 90, height: 90, borderRadius: 999,
        background: "#0d2419", border: "2px solid rgba(110,231,183,0.4)",
      }}/>
    </>
  ),
  // Dark tech/SaaS
  techDark: (
    <>
      <div style={{ position: "absolute", inset: 0, background: "linear-gradient(180deg,#0a0f2b,#1a1048 60%,#3d1b78)" }}/>
      <div style={{ position: "absolute", inset: 0,
        background: "radial-gradient(circle at 20% 30%, rgba(120,80,255,0.35), transparent 40%), radial-gradient(circle at 80% 70%, rgba(67,97,238,0.4), transparent 45%)",
      }}/>
      {/* Grid */}
      <svg style={{ position: "absolute", inset: 0, width: "100%", height: "100%", opacity: 0.2 }}>
        <defs><pattern id="g1" width="16" height="16" patternUnits="userSpaceOnUse">
          <path d="M16 0 L0 0 0 16" fill="none" stroke="#fff" strokeWidth="0.5"/>
        </pattern></defs>
        <rect width="100%" height="100%" fill="url(#g1)"/>
      </svg>
      <div style={{ position: "absolute", left: "50%", top: "45%", transform: "translate(-50%,-50%) perspective(400px) rotateX(25deg) rotateZ(-8deg)",
        width: 160, height: 100, borderRadius: 8,
        background: "linear-gradient(135deg,#4361EE,#2b2b99)",
        boxShadow: "0 30px 60px rgba(67,97,238,0.5)",
        border: "1px solid rgba(255,255,255,0.2)",
      }}>
        <div style={{ padding: 10 }}>
          <div style={{ height: 4, width: "40%", background: "rgba(255,255,255,0.6)", borderRadius: 2, marginBottom: 6 }}/>
          <div style={{ height: 3, width: "70%", background: "rgba(255,255,255,0.3)", borderRadius: 2, marginBottom: 4 }}/>
          <div style={{ height: 3, width: "55%", background: "rgba(255,255,255,0.3)", borderRadius: 2 }}/>
        </div>
      </div>
    </>
  ),
  // Beauty peach
  beautyPeach: (
    <>
      <div style={{ position: "absolute", inset: 0, background: "linear-gradient(160deg,#ffd6c9 0%,#f4a08c 55%,#c86a78 100%)" }}/>
      <div style={{ position: "absolute", left: "50%", top: "42%", transform: "translate(-50%,-50%)",
        width: 70, height: 150, borderRadius: "8px 8px 12px 12px",
        background: "linear-gradient(180deg,#fff 0%,#ffe4db 100%)",
        boxShadow: "0 20px 40px rgba(150,60,60,0.3), inset -10px 0 20px rgba(0,0,0,0.1)",
      }}/>
      <div style={{ position: "absolute", left: "50%", top: "30%", transform: "translate(-50%,-50%)",
        width: 30, height: 20, borderRadius: "4px 4px 0 0", background: "#3d1f1a",
      }}/>
    </>
  ),
  // DTC apparel — teal
  apparelTeal: (
    <>
      <div style={{ position: "absolute", inset: 0, background: "linear-gradient(175deg,#0f3d4a 0%,#1f6d7a 100%)" }}/>
      <div style={{ position: "absolute", inset: 0, background: "radial-gradient(ellipse at 70% 30%, rgba(255,220,140,0.25), transparent 55%)" }}/>
      <div style={{ position: "absolute", left: "50%", top: "48%", transform: "translate(-50%,-50%)",
        width: 150, height: 160,
        background: "linear-gradient(155deg,#d4a574,#8b5a3c)",
        clipPath: "polygon(25% 0, 75% 0, 100% 18%, 90% 100%, 10% 100%, 0 18%)",
        boxShadow: "0 20px 30px rgba(0,0,0,0.3)",
      }}/>
    </>
  ),
  // Food / restaurant — warm red
  foodRed: (
    <>
      <div style={{ position: "absolute", inset: 0, background: "linear-gradient(170deg,#c0392b 0%,#6e1b14 100%)" }}/>
      <div style={{ position: "absolute", inset: 0, background: "radial-gradient(circle at 50% 60%, rgba(255,200,80,0.35), transparent 50%)" }}/>
      <div style={{ position: "absolute", left: "50%", top: "50%", transform: "translate(-50%,-50%)",
        width: 160, height: 160, borderRadius: 999,
        background: "radial-gradient(circle at 50% 40%, #f5c878, #a85a2a 60%, #5a2e14 100%)",
        boxShadow: "0 20px 40px rgba(0,0,0,0.4)",
      }}/>
      <div style={{ position: "absolute", left: "50%", top: "45%", transform: "translate(-50%,-50%)",
        width: 120, height: 120, borderRadius: 999,
        background: "radial-gradient(circle at 30% 30%, #e8a357, #7a3a1a)",
        boxShadow: "inset -10px -20px 30px rgba(0,0,0,0.3)",
      }}/>
    </>
  ),
  // Finance / app — navy blue
  financeNavy: (
    <>
      <div style={{ position: "absolute", inset: 0, background: "linear-gradient(180deg,#051B42 0%,#0A2A5C 100%)" }}/>
      <div style={{ position: "absolute", inset: 0, background: "radial-gradient(ellipse at 50% 0%, rgba(67,97,238,0.4), transparent 60%)" }}/>
      <svg style={{ position: "absolute", inset: 0, width: "100%", height: "100%" }} viewBox="0 0 100 160" preserveAspectRatio="none">
        <polyline points="5,120 20,100 35,108 50,70 65,78 80,40 95,55"
          fill="none" stroke="#B3CDF9" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
        <polyline points="5,120 20,100 35,108 50,70 65,78 80,40 95,55"
          fill="none" stroke="#4361EE" strokeWidth="0.6" strokeLinecap="round" strokeLinejoin="round" opacity="0.5"/>
      </svg>
      <div style={{ position: "absolute", left: "50%", top: "35%", transform: "translate(-50%,-50%)",
        fontFamily: "'Inter',sans-serif", fontWeight: 700, fontSize: 36, color: "#fff", letterSpacing: "-0.02em",
      }}>+312%</div>
    </>
  ),
  // Skincare minimal
  skincareSand: (
    <>
      <div style={{ position: "absolute", inset: 0, background: "linear-gradient(160deg,#e9d7c0 0%,#c4a98a 100%)" }}/>
      <div style={{ position: "absolute", left: "35%", top: "38%", transform: "translate(-50%,-50%)",
        width: 50, height: 120, borderRadius: "12px 12px 6px 6px",
        background: "linear-gradient(180deg,#3a3a3a,#1a1a1a)",
        boxShadow: "0 10px 24px rgba(0,0,0,0.25)",
      }}/>
      <div style={{ position: "absolute", left: "60%", top: "45%", transform: "translate(-50%,-50%)",
        width: 80, height: 100, borderRadius: 6,
        background: "linear-gradient(180deg,#fff,#f0e4d2)",
        boxShadow: "0 10px 24px rgba(0,0,0,0.2)",
      }}/>
    </>
  ),
  // Eco / wellness green-cream
  wellnessOlive: (
    <>
      <div style={{ position: "absolute", inset: 0, background: "linear-gradient(170deg,#3d4a2a 0%,#1f2a15 100%)" }}/>
      <div style={{ position: "absolute", inset: 0, background: "radial-gradient(ellipse at 50% 70%, rgba(200,220,140,0.25), transparent 50%)" }}/>
      <div style={{ position: "absolute", left: "50%", top: "48%", transform: "translate(-50%,-50%)",
        width: 100, height: 170, borderRadius: "50% / 12%",
        background: "linear-gradient(160deg,#687a3c,#3a4620)",
        boxShadow: "0 20px 30px rgba(0,0,0,0.35)",
      }}/>
    </>
  ),
};

// Ad data — 6 video + 6 image (plus extras for hero)
const Ads = [
  // VIDEOS — real media, `raw: true` hides the fake social chrome so videos play edge-to-edge
  { id: "v1", kind: "video", brand: "Lemon Burst", brandInitial: "L", platform: "Meta Reels",
    media: "uploads/Hyper%20MOtion%20Lemon%20(1).mp4", raw: true, bg: "#000" },
  { id: "v2", kind: "video", brand: "Pawcast", brandInitial: "P", platform: "TikTok",
    media: "uploads/PAW%20With%20Caption.mp4", raw: true, bg: "#000" },
  { id: "v3", kind: "video", brand: "Super Burger", brandInitial: "S", platform: "Meta Reels",
    media: "uploads/Burger%20Hyper%20(1).mp4", raw: true, bg: "#000" },
  { id: "v4", kind: "video", brand: "Goelia", brandInitial: "G", platform: "TikTok",
    media: "uploads/Goelia%20(1).mp4", raw: true, bg: "#000" },
  { id: "v5", kind: "video", brand: "Corvari", brandInitial: "C", platform: "Meta Reels",
    media: "uploads/Corvari%20Ads2%20StorytellingNEW.mp4", raw: true, bg: "#000" },
  { id: "v6", kind: "video", brand: "Flakes", brandInitial: "F", platform: "TikTok",
    media: "uploads/Flake%20Test.mp4", raw: true, bg: "#000" },
  // IMAGES
  { id: "i1", kind: "image", brand: "Apulia Olive Oil", brandInitial: "A", platform: "Meta",
    media: "uploads/Apulia%20Olive%20Oil.webp",           // 1:1 for Static Creatives
    mediaMarquee: "uploads/Apulia%20Olive%20Oil%20916.webp", // 9:16 for hero scrolling
    raw: true, bg: "#000" },
  { id: "i2", kind: "image", brand: "Mobili Rebecca", brandInitial: "M", platform: "Pinterest",
    media: "uploads/Mobili%20Rebecca.webp",
    mediaMarquee: "uploads/Mobili%20Rebecca%20916.webp",
    raw: true, bg: "#000" },
  { id: "i3", kind: "image", brand: "Pawcast", brandInitial: "P", platform: "Meta",
    media: "uploads/Pawcast.webp",
    mediaMarquee: "uploads/Pawcast%20916.webp",
    raw: true, bg: "#000" },
  { id: "i4", kind: "image", brand: "Kedor", brandInitial: "K", platform: "Google",
    media: "uploads/Kedor%20WPC.webp",               // 1:1 only — appears in Static but NOT in marquee
    raw: true, bg: "#000" },
  { id: "i5", kind: "image", brand: "Lemon Burst", brandInitial: "L", platform: "Meta",
    media: "uploads/Lemon%20Burst.webp",
    mediaMarquee: "uploads/Lemon%20Burst916.webp",
    raw: true, bg: "#000" },
  { id: "i6", kind: "image", brand: "Goelia", brandInitial: "G", platform: "Pinterest",
    media: "uploads/Goelia.webp",
    mediaMarquee: "uploads/Goelia%20916.webp",
    raw: true, bg: "#000" },
];

window.Ads = Ads;
window.AdTile = AdTile;
window.Scenes = Scenes;