// CTV Showcase: visual representation of multi-screen CTV reach
const CTVShowcase = () => {
  const ref = React.useRef(null);
  React.useEffect(() => {
    if (!window.gsap || !window.ScrollTrigger) return;
    const els = ref.current.querySelectorAll("[data-tv]");
    window.gsap.from(els, {
      scrollTrigger: { trigger: ref.current, start: "top 75%" },
      y: 40, opacity: 0, duration: 0.9, stagger: 0.1, ease: "expo.out",
    });
  }, []);

  return (
    <section ref={ref} style={{
      padding: "160px 48px",
      background: "var(--ink-950)",
      color: "var(--paper)",
      position: "relative",
      overflow: "hidden",
    }}>
      <div aria-hidden style={{
        position: "absolute", inset: 0,
        background: "radial-gradient(70% 50% at 80% 30%, rgba(110,43,217,0.22), transparent 60%), radial-gradient(50% 40% at 10% 80%, rgba(46,91,255,0.18), transparent 60%)",
        pointerEvents: "none",
      }}/>

      <div style={{ maxWidth: 1280, margin: "0 auto", position: "relative" }}>
        <div style={{
          display: "grid", gridTemplateColumns: "1fr 1.1fr", gap: 80, alignItems: "center",
        }}>
          <div>
            <div data-tv style={{
              fontFamily: "var(--font-mono)", fontSize: 13, fontWeight: 600,
              letterSpacing: "0.14em", textTransform: "uppercase",
              color: "var(--brand-cyan)", marginBottom: 28,
            }}>The big screen, programmatic</div>
            <h2 data-tv style={{
              fontFamily: "var(--font-sans)", fontWeight: 700,
              fontSize: "clamp(44px, 6vw, 80px)", lineHeight: 1.04,
              letterSpacing: "-0.02em", margin: "0 0 22px",
            }}>
              AI-curated CTV campaigns <span style={{ fontStyle: "italic", color: "var(--brand-cyan)" }}>your CFO will fund.</span>
            </h2>
            <p data-tv style={{
              fontSize: 19, lineHeight: 1.6, color: "rgba(250,248,244,0.72)",
              maxWidth: 540, margin: "0 0 36px",
            }}>
              AI curation of CTV campaigns — AI copywriting for hooks and CTA lines,
              direct deals with premium publishers, biddable supply on Hulu, Roku,
              Samsung Ads, household-level reach planning, and incremental-lift studies that hold up in a board deck.
            </p>
            <div data-tv style={{ display: "flex", flexDirection: "column", gap: 14 }}>
              {[
                ["AI copywriting", "Fresh hooks, CTA lines, and end-card language for every flight."],
                ["Reach planning", "Frequency-capped at the household, not the device."],
                ["Creative QA", "Six-second to thirty-second variants, IAB-VAST tested."],
                ["Lift measurement", "Brand lift, search lift, and incrementality, post-flight."],
              ].map(([t, d]) => (
                <div key={t} style={{
                  display: "flex", gap: 14, paddingBottom: 14,
                  borderBottom: "1px solid rgba(250,248,244,0.08)",
                }}>
                  <div style={{
                    width: 32, height: 32, borderRadius: 8,
                    background: "color-mix(in oklab, var(--brand-cyan) 22%, transparent)",
                    color: "var(--brand-cyan)",
                    display: "grid", placeItems: "center", flexShrink: 0,
                  }}>
                    <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                      <path d="M3 8l3.5 3.5L13 5"/>
                    </svg>
                  </div>
                  <div>
                    <div style={{ fontSize: 15, fontWeight: 600 }}>{t}</div>
                    <div style={{ fontSize: 14, color: "rgba(250,248,244,0.6)", marginTop: 2 }}>{d}</div>
                  </div>
                </div>
              ))}
            </div>
            <div data-tv style={{ marginTop: 36 }}>
              <a href="ctv.html" style={{
                color: "var(--paper)", fontSize: 15, fontWeight: 600,
                padding: "14px 22px", borderRadius: 9999,
                border: "1px solid rgba(250,248,244,0.16)",
                textDecoration: "none",
                display: "inline-flex", alignItems: "center", gap: 8,
                background: "rgba(250,248,244,0.04)",
              }}>
                Read the CTV playbook
                <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
                  <path d="M3 8h10M9 4l4 4-4 4"/>
                </svg>
              </a>
            </div>
          </div>

          {/* Right: stylized TV mock */}
          <div data-tv style={{ position: "relative" }}>
            <div style={{
              aspectRatio: "16/10",
              borderRadius: 22,
              padding: 14,
              background: "linear-gradient(135deg, #1B1F1B 0%, #0E120E 100%)",
              boxShadow: "0 40px 80px rgba(0,0,0,0.5), 0 0 0 1px rgba(250,248,244,0.04)",
              position: "relative",
            }}>
              <div style={{
                width: "100%", height: "100%",
                borderRadius: 14,
                background: "var(--brand-gradient)",
                position: "relative",
                overflow: "hidden",
              }}>
                {/* "ad creative" placeholder lines */}
                <div style={{
                  position: "absolute", inset: 0,
                  backgroundImage: "repeating-linear-gradient(135deg, rgba(255,255,255,0.06) 0 1px, transparent 1px 18px)",
                }}/>
                <div style={{
                  position: "absolute", inset: 0,
                  display: "flex", flexDirection: "column",
                  justifyContent: "space-between", padding: 32,
                }}>
                  <div style={{
                    fontFamily: "var(--font-mono)", fontSize: 11,
                    letterSpacing: "0.14em", textTransform: "uppercase",
                    color: "rgba(255,255,255,0.7)",
                  }}>15s · pre-roll · brand-lift study</div>
                  <div>
                    <div style={{
                      fontFamily: "var(--font-display)", fontSize: 56,
                      lineHeight: 1, color: "var(--paper)", letterSpacing: "-0.02em",
                    }}>Your spot.</div>
                    <div style={{
                      fontFamily: "var(--font-display)", fontSize: 56, fontStyle: "italic",
                      lineHeight: 1, color: "rgba(255,255,255,0.85)", letterSpacing: "-0.02em",
                    }}>Their living room.</div>
                  </div>
                </div>
              </div>
              {/* Stand */}
              <div style={{
                position: "absolute", left: "50%", bottom: -22,
                width: 4, height: 22, background: "#0E120E", transform: "translateX(-50%)",
              }}/>
              <div style={{
                position: "absolute", left: "50%", bottom: -32,
                width: 140, height: 8, background: "#0E120E",
                borderRadius: "0 0 14px 14px", transform: "translateX(-50%)",
              }}/>
            </div>
            {/* Floating metric chips */}
            <div style={{
              position: "absolute", top: -30, right: -20,
              padding: "12px 16px",
              background: "var(--paper-raised)", color: "var(--ink-900)",
              borderRadius: 14, boxShadow: "var(--sh-lg)",
              fontFamily: "var(--font-mono)", fontSize: 13,
            }}>
              <div style={{ color: "var(--fg-muted)", fontSize: 10, letterSpacing: "0.1em", textTransform: "uppercase" }}>
                Incremental reach
              </div>
              <div style={{ fontSize: 22, fontWeight: 600, marginTop: 2 }}>+38.2%</div>
            </div>
            <div style={{
              position: "absolute", bottom: 30, left: -30,
              padding: "12px 16px",
              background: "var(--paper-raised)", color: "var(--ink-900)",
              borderRadius: 14, boxShadow: "var(--sh-lg)",
              fontFamily: "var(--font-mono)", fontSize: 13,
            }}>
              <div style={{ color: "var(--fg-muted)", fontSize: 10, letterSpacing: "0.1em", textTransform: "uppercase" }}>
                Completion rate
              </div>
              <div style={{ fontSize: 22, fontWeight: 600, marginTop: 2 }}>97.4%</div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};
window.CTVShowcase = CTVShowcase;