const APPLE_SANS_AS = "-apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', sans-serif";
const APPLE_TEXT_AS = "-apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', sans-serif";

const VideoAdsSection = () => {
  const videos = Ads.filter(a => a.kind === "video");
  const bp = useBreakpoint();
  const isMobile = bp === "mobile";
  const isTablet = bp === "tablet";
  const cols = isMobile ? 1 : isTablet ? 2 : 3;
  const tileH = isMobile ? 520 : 540;
  return (
    <section id="videos" style={{
      background: "#fff",
      padding: isMobile ? "80px 20px 40px" : "140px 32px 60px",
    }}>
      <div style={{ maxWidth: 1280, margin: "0 auto" }}>
        <SectionHead
          eyebrow="Recent work"
          title={<>Built for the feed.<br/><span style={{ color: "#B3CDF9" }}>Tested in-market.</span></>}
          lede="Every ad below went live on Meta, TikTok, or YouTube in the last 90 days. Scripts, visuals, and edits — all AI-assisted, all human-directed."
        />
        <div style={{
          display: "grid",
          gridTemplateColumns: `repeat(${cols}, minmax(0, 1fr))`,
          gap: isMobile ? 40 : 32,
          justifyItems: "center",
          marginTop: isMobile ? 48 : 72,
        }}>
          {videos.map((ad, i) => (
            <VideoCard key={ad.id} ad={ad} stat={VIDEO_STATS[i]} tileH={tileH}/>
          ))}
        </div>
      </div>
    </section>
  );
};

const VIDEO_STATS = [
  { metric: "4.7× ROAS", sub: "30-day window" },
  { metric: "-62% CPA", sub: "vs. previous top ad" },
  { metric: "2.4M views", sub: "first 15 days" },
  { metric: "9.1% CTR", sub: "paid social avg" },
  { metric: "$28 CPA", sub: "down from $70" },
  { metric: "6.2× ROAS", sub: "Black Friday week" },
];

const VideoCard = ({ ad, stat, tileH = 540 }) => (
  <div style={{ width: "100%", maxWidth: 340 }}>
    <div style={{ position: "relative", display: "flex", justifyContent: "center" }}>
      <AdTile ad={ad} height={tileH}/>
    </div>
    <div style={{
      marginTop: 20, padding: "0 4px",
      display: "flex", justifyContent: "space-between", alignItems: "flex-start",
    }}>
      <div style={{ minWidth: 0 }}>
        <div style={{ fontFamily: APPLE_TEXT_AS, fontWeight: 500, fontSize: 12,
          color: "#051B42", letterSpacing: "-0.005em" }}>
          {ad.brand}
        </div>
        <div style={{ fontFamily: APPLE_SANS_AS, fontWeight: 600, fontSize: 15,
          color: "#051B42", marginTop: 2, letterSpacing: "-0.015em" }}>
          {ad.platform}
        </div>
      </div>
      <div style={{ textAlign: "right", flex: "none" }}>
        <div style={{ fontFamily: APPLE_SANS_AS, fontWeight: 600, fontSize: 20,
          color: "#051B42", letterSpacing: "-0.02em" }}>
          {stat.metric}
        </div>
        <div style={{ fontFamily: APPLE_TEXT_AS, fontSize: 12, color: "rgba(5,27,66,0.55)", marginTop: 2 }}>
          {stat.sub}
        </div>
      </div>
    </div>
  </div>
);

const ImageAdsSection = () => {
  const images = Ads.filter(a => a.kind === "image");
  const bp = useBreakpoint();
  const isMobile = bp === "mobile";
  const isTablet = bp === "tablet";
  const cols = isMobile ? 1 : isTablet ? 2 : 3;
  return (
    <section style={{
      background: "rgba(179,205,249,0.25)",
      padding: isMobile ? "80px 20px" : "140px 32px",
    }}>
      <div style={{ maxWidth: 1280, margin: "0 auto" }}>
        <SectionHead
          eyebrow="Static creatives"
          title={<>Same system.<br/><span style={{ color: "#B3CDF9" }}>Thumb-stopping stills.</span></>}
          lede="Statics for brands that need volume — ready for Meta, Pinterest, LinkedIn, programmatic, and retargeting."
        />
        <div style={{
          display: "grid",
          gridTemplateColumns: `repeat(${cols}, minmax(0, 1fr))`,
          gap: isMobile ? 24 : 32,
          justifyItems: "stretch",
          marginTop: isMobile ? 48 : 72,
        }}>
          {images.map((ad) => (
            <div key={ad.id} style={{ width: "100%" }}>
              {/* Square 1:1 aspect holder — padding-bottom trick gives height = width */}
              <div style={{ position: "relative", width: "100%", height: 0, paddingBottom: "100%" }}>
                <AdTile ad={ad} fluid/>
              </div>
              <div style={{ marginTop: 16, fontFamily: APPLE_TEXT_AS, fontWeight: 500, fontSize: 13,
                color: "#051B42", letterSpacing: "-0.005em", textAlign: "center" }}>
                {ad.brand} <span style={{ color: "#B3CDF9" }}>·</span> {ad.platform}
              </div>
            </div>
          ))}
        </div>
        {/* Inline CTA */}
        <div style={{ textAlign: "center", marginTop: isMobile ? 48 : 72 }}>
          <a href="#claim" style={{
            display: "inline-flex", alignItems: "center", gap: 6,
            background: "#051B42", color: "#fff",
            padding: isMobile ? "13px 26px" : "15px 30px",
            borderRadius: 999,
            fontFamily: APPLE_TEXT_AS, fontWeight: 600,
            fontSize: isMobile ? 15 : 16, letterSpacing: "-0.01em",
            textDecoration: "none",
            transition: "background 160ms ease, transform 160ms ease",
          }}
          onMouseEnter={(e) => {
            e.currentTarget.style.background = "#0A2A5C";
            e.currentTarget.style.transform = "translateY(-1px)";
          }}
          onMouseLeave={(e) => {
            e.currentTarget.style.background = "#051B42";
            e.currentTarget.style.transform = "translateY(0)";
          }}
          >
            Claim your free month
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"><path d="m9 6 6 6-6 6"/></svg>
          </a>
        </div>
      </div>
    </section>
  );
};

const SectionHead = ({ eyebrow, title, lede, center = true, light = false }) => {
  const bp = useBreakpoint();
  const isMobile = bp === "mobile";
  return (
    <div style={{ textAlign: center ? "center" : "left", maxWidth: 900, margin: center ? "0 auto" : "0" }}>
      {eyebrow && (
        <div style={{
          fontFamily: APPLE_TEXT_AS, fontWeight: 500,
          fontSize: isMobile ? 15 : 17,
          color: "#051B42",
          marginBottom: isMobile ? 10 : 12, letterSpacing: "-0.005em",
        }}>{eyebrow}</div>
      )}
      <h2 style={{
        fontFamily: APPLE_SANS_AS, fontWeight: 700,
        fontSize: "clamp(34px, 6.2vw, 72px)",
        lineHeight: 1.05, letterSpacing: "-0.035em",
        color: light ? "#fff" : "#051B42",
        margin: isMobile ? "0 0 16px" : "0 0 22px",
      }}>{title}</h2>
      {lede && (
        <p style={{
          fontFamily: APPLE_TEXT_AS,
          fontSize: isMobile ? 16 : 21,
          lineHeight: 1.42,
          color: light ? "rgba(255,255,255,0.72)" : "rgba(5,27,66,0.6)",
          margin: center ? "0 auto" : 0, maxWidth: 680,
          letterSpacing: "-0.01em", fontWeight: 400,
        }}>{lede}</p>
      )}
    </div>
  );
};

window.VideoAdsSection = VideoAdsSection;
window.ImageAdsSection = ImageAdsSection;
window.SectionHead = SectionHead;