const APPLE_SANS = "-apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', 'Helvetica Neue', Arial, sans-serif";
const APPLE_TEXT = "-apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', 'Helvetica Neue', Arial, sans-serif";

const LeadHero = ({ variant = "split", onSubmit }) => {
  const bp = useBreakpoint();
  const isMobile = bp === "mobile";
  const isTablet = bp === "tablet";

  if (variant === "stat") {
    return <StatHero onSubmit={onSubmit} isMobile={isMobile}/>;
  }

  const marqueeHeight = isMobile ? 300 : isTablet ? 400 : 480;
  const tileHeight = isMobile ? 280 : isTablet ? 380 : 460;

  return (
    <section id="top" style={{
      background: "#fff", color: "#051B42",
      position: "relative", overflow: "hidden",
      paddingTop: isMobile ? 40 : 80,
      paddingBottom: isMobile ? 24 : 40,
    }}>
      <div style={{
        maxWidth: 1120, margin: "0 auto",
        padding: isMobile ? "16px 20px 0" : "24px 24px 0",
        position: "relative", textAlign: "center",
      }}>
        <div style={{
          display: "inline-flex", alignItems: "center", gap: 8,
          padding: isMobile ? "5px 12px" : "6px 14px", borderRadius: 999,
          background: "rgba(5,27,66,0.06)",
          fontFamily: APPLE_TEXT, fontWeight: 500, fontSize: isMobile ? 11 : 12,
          color: "#051B42",
          marginBottom: isMobile ? 18 : 24,
        }}>
          <span style={{ width: 6, height: 6, borderRadius: 999, background: "#051B42" }}/>
          No more Available Spots
        </div>
        <h1 style={{
          fontFamily: APPLE_SANS, fontWeight: 700,
          fontSize: "clamp(40px, 9vw, 96px)",
          lineHeight: 1.02, letterSpacing: "-0.04em",
          margin: "0 0 18px", color: "#051B42",
          maxWidth: 980, marginLeft: "auto", marginRight: "auto",
        }}>
          {isMobile ? (
            <>A <FreeWord/> month of scroll-stopping <span style={{
              background: "linear-gradient(90deg,#051B42,#B3CDF9)",
              WebkitBackgroundClip: "text", WebkitTextFillColor: "transparent",
              backgroundClip: "text",
              display: "inline-block",
              paddingRight: "0.12em",
            }}>AI video ads.</span></>
          ) : (
            <>A <FreeWord/> month of<br/>
            scroll-stopping <span style={{
              background: "linear-gradient(90deg,#051B42,#B3CDF9)",
              WebkitBackgroundClip: "text", WebkitTextFillColor: "transparent",
              backgroundClip: "text",
              display: "inline-block",
              paddingRight: "0.12em",
            }}>AI video ads.</span></>
          )}
        </h1>
        <p style={{
          fontFamily: APPLE_TEXT,
          fontSize: isMobile ? 17 : 22,
          lineHeight: 1.4,
          color: "rgba(5,27,66,0.6)", margin: "0 auto 18px", maxWidth: 680,
          letterSpacing: "-0.01em", fontWeight: 400,
          padding: isMobile ? "0 4px" : 0,
        }}>
          6 AI video ads. 25 static creatives. Shipped in 15 days.{isMobile ? " " : <br/>}
          You keep everything. Even if we never work together again.
        </p>
        <div style={{
          display: "flex", alignItems: "center",
          gap: isMobile ? 14 : 18,
          justifyContent: "center",
          marginBottom: isMobile ? 40 : 52,
          flexDirection: "column",
        }}>
          <a href="#claim" style={{
            display: "inline-flex", alignItems: "center", gap: 8,
            background: "linear-gradient(180deg,#0A2A5C 0%,#051B42 100%)",
            color: "#fff",
            padding: isMobile ? "12px 24px" : "13px 28px",
            borderRadius: 999,
            fontFamily: APPLE_TEXT, fontWeight: 600,
            fontSize: isMobile ? 14 : 15,
            letterSpacing: "-0.01em", textDecoration: "none",
            border: "1px solid rgba(255,255,255,0.12)",
            boxShadow: [
              "inset 0 1px 0 rgba(255,255,255,0.2)",
              "inset 0 -1px 0 rgba(0,0,0,0.18)",
              "0 2px 0 rgba(5,27,66,0.18)",
              "0 8px 22px rgba(5,27,66,0.24)",
              "0 22px 44px rgba(5,27,66,0.15)",
            ].join(", "),
            transition: "transform 220ms cubic-bezier(0.2,0.7,0.2,1), filter 220ms ease",
            width: isMobile ? "100%" : "auto",
            justifyContent: "center",
            boxSizing: "border-box",
            maxWidth: isMobile ? 360 : "none",
          }}
          onMouseEnter={(e)=>{e.currentTarget.style.transform="translateY(-3px) scale(1.02)";e.currentTarget.style.filter="brightness(1.08)";}}
          onMouseLeave={(e)=>{e.currentTarget.style.transform="translateY(0) scale(1)";e.currentTarget.style.filter="none";}}
          onMouseDown={(e)=>{e.currentTarget.style.transform="translateY(0) scale(0.98)";}}
          onMouseUp={(e)=>{e.currentTarget.style.transform="translateY(-3px) scale(1.02)";}}
          >
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
              <path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/>
            </svg>
            Claim your free month
            <svg width="13" height="13" 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>
          <a href="#videos" style={{
            fontFamily: APPLE_TEXT, fontWeight: 500,
            fontSize: isMobile ? 15 : 17,
            color: "#051B42", letterSpacing: "-0.01em",
            textDecoration: "none",
            display: "inline-flex", alignItems: "center", gap: 4,
          }}>
            See recent work
            <svg width="12" height="12" 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 style={{
          display: "inline-flex", alignItems: "center",
          gap: isMobile ? 14 : 32,
          flexWrap: "wrap", justifyContent: "center",
          fontFamily: APPLE_TEXT,
          fontSize: isMobile ? 12 : 13,
          color: "rgba(5,27,66,0.55)",
          marginBottom: isMobile ? 36 : 56,
        }}>
          <HeroMeta label="No credit card"/>
          <HeroMeta label="No contract"/>
          <HeroMeta label="72-hour first drop"/>
          <HeroMeta label="You own every content"/>
        </div>
      </div>

      {/* Rotating ad showcase */}
      <div style={{
        position: "relative",
        maxWidth: 1400, margin: "0 auto",
        padding: isMobile ? "0 12px" : "0 24px",
      }}>
        <div style={{
          position: "relative", height: marqueeHeight,
          maskImage: "linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%)",
          WebkitMaskImage: "linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%)",
        }}>
          <AdMarquee tileHeight={tileHeight}/>
        </div>
      </div>
    </section>
  );
};

// "FREE" — uppercase, gradient navy text, thick pale-blue underline. Pops inside the hero headline.
const FreeWord = () => (
  <span style={{
    position: "relative",
    display: "inline-block",
    paddingBottom: "0.12em",
  }}>
    {/* Gradient text */}
    <span style={{
      background: "linear-gradient(180deg,#051B42 0%,#1E4A99 100%)",
      WebkitBackgroundClip: "text",
      backgroundClip: "text",
      WebkitTextFillColor: "transparent",
      color: "transparent",
      textTransform: "uppercase",
      letterSpacing: "0.015em",
      fontWeight: 800,
    }}>free</span>
    {/* Thick pale-blue underline bar */}
    <span style={{
      position: "absolute",
      left: "2%", right: "2%", bottom: "0.02em",
      height: "0.11em",
      background: "linear-gradient(90deg,#B3CDF9,#A8B8FF)",
      borderRadius: "0.08em",
      pointerEvents: "none",
    }}/>
  </span>
);

const HeroMeta = ({ label }) => (
  <span style={{ display: "inline-flex", alignItems: "center", gap: 6, whiteSpace: "nowrap" }}>
    <span style={{
      display: "inline-flex", alignItems: "center", justifyContent: "center",
      width: 18, height: 18, borderRadius: 999,
      background: "rgba(179,205,249,0.35)",
    }}>
      <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="#051B42" strokeWidth="3.2" strokeLinecap="round" strokeLinejoin="round">
        <polyline points="20 6 9 17 4 12"/>
      </svg>
    </span>
    {label}
  </span>
);

const AdMarquee = ({ tileHeight = 460 }) => {
  // Interleave real videos + images so the marquee has visual rhythm.
  // Only includes ads with the right media format: videos need `media`, images need `mediaMarquee` (9:16).
  const ads = (() => {
    const vids = Ads.filter(a => a.kind === "video" && a.media);
    const imgs = Ads.filter(a => a.kind === "image" && a.mediaMarquee);
    const out = [];
    const max = Math.max(vids.length, imgs.length);
    for (let i = 0; i < max; i++) {
      if (vids[i]) out.push(vids[i]);
      if (imgs[i]) out.push(imgs[i]);
    }
    return out.slice(0, 10);
  })();
  const tileW = Math.round(tileHeight * 9 / 16);
  const itemW = tileW + 24;
  const halfWidth = ads.length * itemW;
  // Duration scales with distance so speed stays constant regardless of tile size.
  const pxPerSecond = 70;
  const duration = halfWidth / pxPerSecond;

  const Tile = ({ ad, i }) => (
    <div
      style={{
        transition: "transform 220ms cubic-bezier(.2,.7,.2,1)",
        cursor: "pointer", flex: "none",
        marginRight: 24,
      }}
      onMouseEnter={(e) => { e.currentTarget.style.transform = "translateY(-6px)"; }}
      onMouseLeave={(e) => { e.currentTarget.style.transform = "translateY(0)"; }}>
      {/* Use 9:16 variant for images in the marquee; videos use ad.media as-is. */}
      <AdTile ad={ad} height={tileHeight} mediaOverride={ad.mediaMarquee}/>
    </div>
  );

  return (
    <div className="df-marquee" style={{
      position: "absolute", left: 0, top: 0, bottom: 0,
      display: "flex", alignItems: "center",
      willChange: "transform",
      backfaceVisibility: "hidden",
    }}>
      <style>{`
        @keyframes df-marquee {
          from { transform: translate3d(0, 0, 0); }
          to   { transform: translate3d(-${halfWidth}px, 0, 0); }
        }
        .df-marquee {
          animation: df-marquee ${duration}s linear infinite;
          animation-play-state: running;
        }
        .df-marquee:hover,
        .df-marquee:focus-within {
          animation-play-state: paused;
        }
      `}</style>
      {ads.map((ad, i) => <Tile key={ad.id + "-a-" + i} ad={ad} i={i}/>)}
      {ads.map((ad, i) => <Tile key={ad.id + "-b-" + i} ad={ad} i={i}/>)}
    </div>
  );
};

const StatHero = ({ onSubmit, isMobile }) => (
  <section id="top" style={{
    background: "#fff", color: "#051B42",
    position: "relative", overflow: "hidden",
    padding: isMobile ? "60px 20px 72px" : "120px 32px 100px",
  }}>
    <div style={{ maxWidth: 1100, margin: "0 auto", position: "relative", textAlign: "center" }}>
      <div style={{
        display: "inline-flex", alignItems: "center", gap: 8,
        padding: "6px 14px", borderRadius: 999,
        background: "rgba(5,27,66,0.06)",
        fontFamily: APPLE_TEXT, fontWeight: 500, fontSize: 12,
        color: "#051B42", marginBottom: 28,
      }}>
        <span style={{ width: 6, height: 6, borderRadius: 999, background: "#051B42" }}/>
        $47M tracked ad spend · 4.2× avg ROAS
      </div>
      <h1 style={{
        fontFamily: APPLE_SANS, fontWeight: 700,
        fontSize: "clamp(40px, 9vw, 104px)",
        lineHeight: 0.98, letterSpacing: "-0.045em",
        margin: "0 auto 24px", color: "#051B42", maxWidth: 980,
      }}>
        A <span style={{
          background: "linear-gradient(90deg,#051B42,#B3CDF9)",
          WebkitBackgroundClip: "text", WebkitTextFillColor: "transparent",
          backgroundClip: "text",
          display: "inline-block",
          paddingRight: "0.12em",
        }}>free month</span> of ads{isMobile ? " " : <br/>}that actually convert.
      </h1>
      <p style={{
        fontFamily: APPLE_TEXT, fontSize: isMobile ? 17 : 22, lineHeight: 1.4,
        color: "rgba(5,27,66,0.6)", margin: "0 auto 32px", maxWidth: 680,
        letterSpacing: "-0.01em",
      }}>
        6 AI video ads. 25 statics. Shipped in 15 days. You keep every file. Zero upfront cost. Zero contract.
      </p>
      <div style={{
        maxWidth: 520, margin: "0 auto",
        background: "rgba(179,205,249,0.25)", borderRadius: 20,
        padding: isMobile ? 20 : 28,
        textAlign: "left",
      }}>
        <LeadForm variant="light" onSubmit={onSubmit}/>
      </div>
    </div>
  </section>
);

window.LeadHero = LeadHero;
