// Services — horizontal scroll-jack. What you actually get — 6 approved cards.

// ChatMockup — pixel-faithful dark-mode chat thread for card 01.
// Text is real HTML so it's crisp + reads as authentic creator voice.
// Cycles through multiple conversations to show range of chatter voice.
function ChatMockup({ compact = false } = {}) {
  const conversations = [
    {
      contact: "danny_v",
      messages: [
        { from: "fan",     text: "morning beautiful 🥰" },
        { from: "creator", text: "lol just woke up, hairs everywhere" },
        { from: "fan",     text: "pics? 👀" },
        { from: "creator", text: "maybe later if youre lucky 😏" },
        { from: "fan",     text: "youre killing me" },
        { from: "creator", text: "awww 😭 send me a kiss first" },
      ],
    },
    {
      contact: "marcus_88",
      messages: [
        { from: "fan",     text: "you up?" },
        { from: "creator", text: "always for u 😘" },
        { from: "fan",     text: "missed talking to you" },
        { from: "creator", text: "awww been thinking abt u too 🥺" },
        { from: "fan",     text: "send me something special" },
        { from: "creator", text: "what r u in the mood for 👀" },
      ],
    },
    {
      contact: "j.t.collins",
      messages: [
        { from: "fan",     text: "just tipped you 💸" },
        { from: "creator", text: "OMG thank u baby 🥰" },
        { from: "fan",     text: "anything for you" },
        { from: "creator", text: "ur so sweet, lemme send u something" },
        { from: "fan",     text: "🙏🙏🙏" },
        { from: "creator", text: "check ur dms in 2 mins 😉" },
      ],
    },
  ];

  const [convoIdx, setConvoIdx] = React.useState(0);
  React.useEffect(() => {
    const id = setInterval(() => setConvoIdx(i => (i + 1) % conversations.length), 5000);
    return () => clearInterval(id);
  }, []);
  const convo = conversations[convoIdx];
  const messages = convo.messages;
  return (
    <div className="absolute inset-0 overflow-hidden">
      {/* ambient bg gradient */}
      <div className="absolute inset-0" style={{
        background: "radial-gradient(ellipse 80% 60% at 30% 20%, rgba(232,160,160,0.12), transparent 60%), #0a0a0a"
      }}></div>

      {/* phone-ish frame */}
      <div className="absolute" style={compact ? {
        top: 16, right: -28,
        width: 220, height: 380, zIndex: 10,
        borderRadius: 30,
        background: "#000",
        border: "1px solid rgba(255,255,255,0.06)",
        boxShadow: "0 20px 60px rgba(0,0,0,0.6), inset 0 0 0 5px #0a0a0a",
        padding: "36px 12px 14px",
        overflow: "hidden",
      } : {
        top: -12,
        right: -28,
        width: 280,
        height: 520,
        borderRadius: 38,
        background: "#000",
        border: "1px solid rgba(255,255,255,0.06)",
        boxShadow: "0 30px 80px rgba(0,0,0,0.6), inset 0 0 0 6px #0a0a0a",
        transform: "rotate(6deg)",
        padding: "44px 14px 18px",
        overflow: "hidden",
      }}>
        {/* status bar */}
        <div className="flex items-center justify-between text-white/40" style={{ fontSize: 9, padding: "0 6px 8px" }}>
          <span>9:41</span>
          <span>•••</span>
        </div>
        {/* contact name */}
        <div className="flex items-center gap-2 pb-3 mb-2 border-b border-white/[0.04]">
          <div style={{ width: 24, height: 24, borderRadius: "50%", background: "linear-gradient(135deg, #E8A0A0, #C47A7A)" }}></div>
          <div key={convo.contact} style={{ fontSize: 11, color: "#f0ece8", fontWeight: 500, animation: "chatFade 5s ease-in-out infinite" }}>{convo.contact}</div>
          <span style={{ fontSize: 8, color: "rgba(125,211,164,0.9)", marginLeft: "auto" }}>● online</span>
        </div>

        {/* messages */}
        <div key={convoIdx} className="flex flex-col gap-1.5" style={{ animation: "chatFade 5s ease-in-out infinite" }}>
          {messages.map((m, i) => (
            <div key={i} className={`flex ${m.from === "creator" ? "justify-end" : "justify-start"}`}>
              <div style={{
                maxWidth: 180,
                padding: "6px 10px",
                borderRadius: 14,
                fontSize: 10.5,
                lineHeight: 1.35,
                background: m.from === "creator" ? "#E8A0A0" : "rgba(255,255,255,0.06)",
                color: m.from === "creator" ? "#1a0a0a" : "#f0ece8",
                fontWeight: m.from === "creator" ? 500 : 400,
              }}>
                {m.text}
              </div>
            </div>
          ))}
          {/* typing indicator */}
          <div className="flex justify-start mt-1">
            <div style={{
              padding: "8px 12px",
              borderRadius: 14,
              background: "rgba(255,255,255,0.08)",
              display: "flex",
              alignItems: "center",
              gap: 4,
            }}>
              <span style={{ width: 6, height: 6, borderRadius: "50%", background: "rgba(255,255,255,0.7)", display: "inline-block", animation: "typingPulse 1.2s infinite", animationDelay: "0s" }}></span>
              <span style={{ width: 6, height: 6, borderRadius: "50%", background: "rgba(255,255,255,0.7)", display: "inline-block", animation: "typingPulse 1.2s infinite", animationDelay: "0.2s" }}></span>
              <span style={{ width: 6, height: 6, borderRadius: "50%", background: "rgba(255,255,255,0.7)", display: "inline-block", animation: "typingPulse 1.2s infinite", animationDelay: "0.4s" }}></span>
            </div>
          </div>
        </div>
      </div>

      {/* unread queue — desktop: left column; mobile: behind phone full-width */}
      <div className="absolute" style={compact ? {
        left: -18, top: 0, bottom: 0, width: 180,
        overflow: "hidden",
        opacity: 0.85,
        zIndex: 0,
        maskImage: "linear-gradient(to bottom, transparent 0%, #000 12%, #000 88%, transparent 100%)",
        WebkitMaskImage: "linear-gradient(to bottom, transparent 0%, #000 12%, #000 88%, transparent 100%)",
      } : { left: 24, top: 0, bottom: 0, width: 200, overflow: "hidden", opacity: 0.85, maskImage: "linear-gradient(to bottom, transparent 0%, #000 12%, #000 88%, transparent 100%)", WebkitMaskImage: "linear-gradient(to bottom, transparent 0%, #000 12%, #000 88%, transparent 100%)" }}>
        <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 8, animation: "vmarquee 35s linear infinite", paddingTop: 8 }}>
          {[
            { name: "marcus_88",   preview: "you up?",              unread: 3 },
            { name: "j.t.collins", preview: "just sent a tip 💸",    unread: 1 },
            { name: "kev",         preview: "new pics?",            unread: 2 },
            { name: "ryan.h",      preview: "missing you tonight",  unread: 5 },
            { name: "_dave",       preview: "what u wearing?",      unread: 1 },
            { name: "tj88",        preview: "happy bday gorgeous",  unread: 2 },
            { name: "luca_p",      preview: "any chance...",        unread: 1 },
            { name: "mr.swift",    preview: "tipped 💸💸💸",         unread: 4 },
            { name: "anon_42",     preview: "pls reply 🥺",         unread: 8 },
            { name: "drew.b",      preview: "hey beautiful",        unread: 1 },
            { name: "bigmike",     preview: "i miss our chats",     unread: 2 },
            { name: "viktor.r",    preview: "available tonight?",   unread: 3 },
          ].concat([
            { name: "marcus_88",   preview: "you up?",              unread: 3 },
            { name: "j.t.collins", preview: "just sent a tip 💸",    unread: 1 },
            { name: "kev",         preview: "new pics?",            unread: 2 },
            { name: "ryan.h",      preview: "missing you tonight",  unread: 5 },
            { name: "_dave",       preview: "what u wearing?",      unread: 1 },
            { name: "tj88",        preview: "happy bday gorgeous",  unread: 2 },
          ]).map((c, i) => (
            <div key={i} style={{
              display: "flex", alignItems: "center", gap: 8,
              padding: "8px 10px",
              background: "rgba(255,255,255,0.03)",
              border: "1px solid rgba(255,255,255,0.04)",
              borderRadius: 10,
              width: 180,
              flexShrink: 0,
            }}>
              <div style={{ width: 22, height: 22, borderRadius: "50%", background: `hsl(${i*37+200}, 25%, 30%)`, flexShrink: 0 }}></div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontSize: 9.5, color: "#f0ece8", fontWeight: 500 }}>{c.name}</div>
                <div style={{ fontSize: 8.5, color: "rgba(255,255,255,0.4)", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{c.preview}</div>
              </div>
              <div style={{
                width: 16, height: 16, borderRadius: "50%",
                background: "#E8A0A0", color: "#1a0a0a",
                fontSize: 8, fontWeight: 600,
                display: "flex", alignItems: "center", justifyContent: "center",
                flexShrink: 0,
              }}>{c.unread}</div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

// SocialMockup — split layout: posting calendar (left) + smaller IG profile phone (right).
// Capped to top portion of card so title clears.
function SocialMockup({ compact = false } = {}) {
  const platforms = [
    { key: "IG", dot: "#E8A0A0" },
    { key: "TT", dot: "#7DD3A4" },
    { key: "X",  dot: "#9DB6E8" },
    { key: "RD", dot: "#E8B07D" },
  ];
  const days = ["M","T","W","T","F","S","S"];
  const todayCol = 6;
  // Drop one IG cell (Wed) so the row isn't perfect — feels more real
  const grid = [
    [2,2,0,2,2,2,2], // IG (one missing)
    [2,2,2,2,2,2,1], // TT
    [2,2,0,2,2,2,1], // X
    [2,2,2,2,2,1,0], // RD
  ];

  const cellSize = compact ? 14 : 20;
  const cellGap  = compact ? 3  : 5;
  const labelW   = compact ? 22 : 30;

  // 6 lifestyle photos for the IG grid — all real, cohesive creator vibe
  const igGrid = [
    "assets/services/inspo-pool.jpg",
    "assets/services/inspo-mirror.jpg",
    "assets/hero/editorial.jpg",
    "assets/services/inspo-gym.jpg",
    "assets/hero/creator-shoot.jpg",
    "assets/services/inspo-car.jpg",
  ];

  const phoneW = compact ? 168 : 175;
  const phoneH = compact ? 295 : 305;

  return (
    <div className="absolute inset-0 overflow-hidden">
      <div className="absolute inset-0" style={{
        background: "radial-gradient(ellipse 90% 60% at 50% 25%, rgba(232,160,160,0.10), transparent 60%), #0a0a0a"
      }}></div>

      {/* mockup body — capped to top portion */}
      <div className="absolute flex" style={{
        zIndex: 5,
        top: 0, left: 0, right: 0,
        bottom: compact ? 200 : 240,
        padding: compact ? "26px 16px 0" : "50px 32px 0",
        gap: compact ? 12 : 22,
        alignItems: "flex-start",
        justifyContent: compact ? "center" : "flex-start",
      }}>

        {/* LEFT — posting calendar (desktop only) */}
        <div style={{ flex: 1, minWidth: 0, display: compact ? "none" : "block" }}>
          <div className="flex items-center justify-between" style={{ marginBottom: compact ? 8 : 14 }}>
            <div style={{ fontSize: compact ? 7.5 : 9, letterSpacing: "0.25em", textTransform: "uppercase", color: "rgba(255,255,255,0.45)" }}>
              Posting Calendar
            </div>
          </div>
          {/* day-of-week header */}
          <div className="flex" style={{ gap: cellGap, marginBottom: cellGap }}>
            <div style={{ width: labelW }}></div>
            {days.map((d, i) => (
              <div key={i} style={{
                width: cellSize, textAlign: "center",
                fontSize: compact ? 7 : 8,
                color: i === todayCol ? "#E8A0A0" : "rgba(255,255,255,0.4)",
                fontWeight: i === todayCol ? 600 : 400,
              }}>{d}</div>
            ))}
          </div>
          {/* rows */}
          <div className="flex flex-col" style={{ gap: cellGap }}>
            {platforms.map((p, rowI) => (
              <div key={p.key} className="flex items-center" style={{ gap: cellGap }}>
                <div className="flex items-center" style={{ gap: 4, width: labelW }}>
                  <div style={{ width: 5, height: 5, borderRadius: "50%", background: p.dot, boxShadow: `0 0 5px ${p.dot}66` }}></div>
                  <span style={{ fontSize: compact ? 7.5 : 9, color: "#f0ece8", fontWeight: 500 }}>{p.key}</span>
                </div>
                {grid[rowI].map((state, colI) => (
                  <div key={colI} style={{
                    width: cellSize, height: cellSize, borderRadius: 3,
                    background: state === 2 ? p.dot : "transparent",
                    border: state === 1
                      ? `1px dashed ${p.dot}`
                      : state === 0
                        ? "1px solid rgba(255,255,255,0.06)"
                        : "none",
                    opacity: state === 2 ? (colI === todayCol ? 1 : 0.85) : state === 1 ? 0.8 : 0.5,
                    boxShadow: state === 2 ? `0 0 6px ${p.dot}30` : "none",
                    display: "flex", alignItems: "center", justifyContent: "center",
                  }}>
                    {state === 2 && (
                      <span style={{ fontSize: compact ? 6 : 8, color: "rgba(0,0,0,0.55)", fontWeight: 700 }}>✓</span>
                    )}
                  </div>
                ))}
              </div>
            ))}
          </div>
          {/* mini stat */}
          <div className="flex items-center" style={{ gap: compact ? 8 : 14, marginTop: compact ? 12 : 18 }}>
            <div style={{ display: "flex", alignItems: "baseline", gap: 3 }}>
              <span style={{ fontSize: compact ? 14 : 18, color: "#f0ece8", fontWeight: 600, fontFamily: "Sora, sans-serif" }}>22</span>
              <span style={{ fontSize: compact ? 7 : 8, color: "rgba(255,255,255,0.4)", letterSpacing: "0.15em", textTransform: "uppercase" }}>posts</span>
            </div>
            <div style={{ width: 1, height: compact ? 12 : 16, background: "rgba(255,255,255,0.1)" }}></div>
            <div style={{ fontSize: compact ? 9 : 11, color: "#E8A0A0", fontWeight: 500, letterSpacing: "0.15em", textTransform: "uppercase" }}>Daily</div>
          </div>
        </div>

        {/* RIGHT — smaller IG profile phone */}
        <div style={{
          width: phoneW, height: phoneH, flexShrink: 0,
          borderRadius: compact ? 22 : 26,
          background: "#000",
          border: "1px solid rgba(255,255,255,0.06)",
          boxShadow: "0 20px 50px rgba(0,0,0,0.6), inset 0 0 0 3px #0a0a0a",
          padding: compact ? "18px 6px 6px" : "24px 8px 8px",
          overflow: "hidden",
        }}>
          {/* status bar */}
          <div className="flex items-center justify-between text-white/40" style={{ fontSize: compact ? 6 : 7.5, padding: "0 4px 4px" }}>
            <span>9:41</span>
            <span>•••</span>
          </div>
          {/* IG header */}
          <div className="flex items-center justify-between border-b border-white/[0.05]" style={{ padding: compact ? "3px 3px" : "5px 4px" }}>
            <span style={{ fontSize: compact ? 7.5 : 9.5, color: "#f0ece8", fontWeight: 600 }}>
              yourcreator
              <span style={{ fontSize: compact ? 6 : 8, color: "#9DB6E8", marginLeft: 2 }}>✓</span>
            </span>
          </div>
          {/* profile row */}
          <div className="flex items-center" style={{ gap: compact ? 6 : 9, padding: compact ? "5px 3px" : "8px 4px" }}>
            <div style={{
              width: compact ? 30 : 42, height: compact ? 30 : 42,
              borderRadius: "50%",
              background: "linear-gradient(135deg, #E8A0A0, #C47A7A 60%, #6a3a3a)",
              flexShrink: 0,
              border: "1.5px solid rgba(255,255,255,0.08)",
            }}></div>
            <div className="flex" style={{ flex: 1, justifyContent: "space-around" }}>
              <div style={{ textAlign: "center" }}>
                <div style={{ fontSize: compact ? 8 : 10, color: "#f0ece8", fontWeight: 600, fontFamily: "Sora, sans-serif", lineHeight: 1 }}>248</div>
                <div style={{ fontSize: compact ? 5.5 : 6.5, color: "rgba(255,255,255,0.45)", marginTop: 1 }}>Posts</div>
              </div>
              <div style={{ textAlign: "center" }}>
                <div style={{ fontSize: compact ? 8 : 10, color: "#E8A0A0", fontWeight: 600, fontFamily: "Sora, sans-serif", lineHeight: 1, textShadow: "0 0 6px rgba(232,160,160,0.3)" }}>
                  <CountUp value={184.2} decimals={1} suffix="K" delay={300} />
                </div>
                <div style={{ fontSize: compact ? 5.5 : 6.5, color: "rgba(255,255,255,0.45)", marginTop: 1 }}>Followers</div>
              </div>
            </div>
          </div>
          {/* growth pill */}
          <div className="flex items-center justify-center" style={{
            padding: compact ? "3px 5px" : "4px 7px",
            margin: compact ? "0 3px 5px" : "0 4px 7px",
            background: "rgba(125,211,164,0.10)",
            border: "1px solid rgba(125,211,164,0.25)",
            borderRadius: 4,
            gap: 4,
          }}>
            <span style={{ width: 4, height: 4, borderRadius: "50%", background: "#7DD3A4", boxShadow: "0 0 4px #7DD3A4", animation: "pulse 2s ease-in-out infinite" }}></span>
            <span style={{ fontSize: compact ? 6.5 : 8, color: "#7DD3A4", fontWeight: 500, letterSpacing: "0.08em" }}>
              <CountUp value={12.4} decimals={1} prefix="+" suffix="K" delay={300} /> this wk
            </span>
          </div>
          {/* 2x3 grid — 6 lifestyle photos */}
          <div style={{
            display: "grid",
            gridTemplateColumns: "1fr 1fr 1fr",
            gap: 1,
            margin: compact ? "0 3px" : "0 4px",
          }}>
            {igGrid.map((src, i) => (
              <div key={i} style={{
                aspectRatio: "1",
                background: "#1a1a1a",
                overflow: "hidden",
              }}>
                <img src={src} alt="" style={{ width: "100%", height: "100%", objectFit: "cover" }} />
              </div>
            ))}
          </div>
        </div>

      </div>
    </div>
  );
}

// ContentMockup — moodboard of inspo references (real photos) with distribution pills.
// Animated: one card cycles a "Just added" highlight every ~4s.
function ContentMockup({ compact = false } = {}) {
  const refs = [
    { title: "Mirror selfie set", img: "assets/services/inspo-mirror.jpg", plats: ["IG","TT"]   },
    { title: "Pool walk",         img: "assets/services/inspo-pool.jpg",   plats: ["IG","TT","OFTV"] },
    { title: "Driving POV",       img: "assets/services/inspo-car.jpg",    plats: ["IG","RD"]   },
    { title: "Gym mirror",        img: "assets/services/inspo-gym.jpg",    plats: ["TT","RD"]   },
  ];

  const [activeIdx, setActiveIdx] = React.useState(0);
  React.useEffect(() => {
    const id = setInterval(() => setActiveIdx(i => (i + 1) % refs.length), 4200);
    return () => clearInterval(id);
  }, []);

  const platColor = {
    IG:   "#E8A0A0",
    TT:   "#7DD3A4",
    RD:   "#E8B07D",
    OFTV: "#9DB6E8",
  };

  return (
    <div className="absolute inset-0 overflow-hidden">
      {/* ambient bg */}
      <div className="absolute inset-0" style={{
        background: "radial-gradient(ellipse 90% 60% at 50% 20%, rgba(232,160,160,0.10), transparent 60%), #0a0a0a"
      }}></div>

      {/* card body — only top portion so parent title/desc has room below */}
      <div className="absolute flex flex-col" style={{
        zIndex: 5,
        top: 0, left: 0, right: 0,
        bottom: compact ? 230 : 290,
        padding: compact ? "60px 20px 0" : "50px 36px 0",
      }}>

        {/* header — desktop only (parent card already shows label + tag on mobile) */}
        {!compact && (
          <div className="flex items-center justify-between" style={{ marginBottom: 22 }}>
            <div style={{ fontSize: 9.5, letterSpacing: "0.3em", textTransform: "uppercase", color: "rgba(255,255,255,0.45)" }}>
              Your Inspo Board
            </div>
            <div style={{ fontSize: 9, color: "rgba(255,255,255,0.35)", letterSpacing: "0.1em" }}>
              Week of Apr 21
            </div>
          </div>
        )}

        {/* horizontal film-strip — 3 cards mobile, 4 cards desktop */}
        <div className="flex" style={{ gap: compact ? 8 : 12, flex: 1, minHeight: 0 }}>
          {(compact ? refs.slice(0, 3) : refs).map((r, i) => {
            const visibleCount = compact ? 3 : 4;
            const isActive = (activeIdx % visibleCount) === i;
            return (
              <div key={i} style={{
                flex: 1,
                position: "relative",
                background: "rgba(255,255,255,0.025)",
                border: `1px solid ${isActive ? "rgba(232,160,160,0.45)" : "rgba(255,255,255,0.05)"}`,
                borderRadius: 8,
                padding: compact ? 6 : 9,
                display: "flex", flexDirection: "column", gap: 6,
                boxShadow: isActive ? "0 0 24px rgba(232,160,160,0.18)" : "none",
                transition: "border 0.4s ease, box-shadow 0.4s ease",
                overflow: "hidden",
                minWidth: 0,
              }}>
                {/* photo */}
                <div style={{
                  flex: 1,
                  borderRadius: 4,
                  position: "relative",
                  overflow: "hidden",
                  minHeight: 0,
                }}>
                  <img src={r.img} alt={r.title}
                    style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover" }} />
                  {isActive && (
                    <div style={{
                      position: "absolute", top: compact ? 4 : 6, right: compact ? 4 : 6,
                      fontSize: compact ? 6.5 : 7.5,
                      padding: "2px 5px",
                      background: "rgba(232,160,160,0.95)",
                      color: "#1a0a0a",
                      letterSpacing: "0.1em",
                      textTransform: "uppercase",
                      fontWeight: 700,
                      borderRadius: 3,
                      animation: "chatFade 4.2s ease-in-out infinite",
                      zIndex: 2,
                    }}>Just added</div>
                  )}
                </div>
                {/* title only */}
                <div style={{ flexShrink: 0 }}>
                  <div style={{ fontSize: compact ? 9.5 : 11, color: "#f0ece8", fontWeight: 500, lineHeight: 1.2, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{r.title}</div>
                </div>
                {/* platform pills */}
                <div className="flex" style={{ gap: 3, flexWrap: "wrap", flexShrink: 0 }}>
                  {r.plats.slice(0, 3).map(p => (
                    <span key={p} style={{
                      fontSize: compact ? 6.5 : 7.5,
                      padding: "1.5px 5px",
                      borderRadius: 999,
                      background: `${platColor[p]}1f`,
                      color: platColor[p],
                      letterSpacing: "0.1em",
                      textTransform: "uppercase",
                      fontWeight: 600,
                    }}>{p}</span>
                  ))}
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );
}

// CountUp — animates a number from 0 to target on mount, formatted with optional prefix/suffix.
function CountUp({ value, duration = 1800, delay = 0, prefix = "", suffix = "", decimals = 0 }) {
  const [n, setN] = React.useState(0);
  React.useEffect(() => {
    let raf;
    const start = performance.now() + delay;
    const tick = (t) => {
      const elapsed = t - start;
      if (elapsed < 0) { raf = requestAnimationFrame(tick); return; }
      const p = Math.min(1, elapsed / duration);
      const eased = 1 - Math.pow(1 - p, 3);
      setN(value * eased);
      if (p < 1) raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, [value, duration, delay]);
  const display = decimals > 0 ? n.toFixed(decimals) : Math.round(n).toLocaleString();
  return <>{prefix}{display}{suffix}</>;
}

// GrowthMockup — analytics panel. Hero = REACH (the biggest growth number).
// Chart and secondary KPIs flow below. Numbers count up; line draws itself.
function GrowthMockup({ compact = false } = {}) {
  // 12 monthly-ish data points trending up with realistic variability + small dip
  const data = [22, 28, 24, 35, 41, 38, 52, 60, 56, 74, 88, 96];
  const w = 100, h = 36, pad = 5;
  const max = Math.max(...data);
  const min = Math.min(...data);
  const xs = data.map((_, i) => pad + (i * (w - pad * 2)) / (data.length - 1));
  const ys = data.map(v => h - pad - ((v - min) / (max - min)) * (h - pad * 2));

  const path = xs.map((x, i) => {
    if (i === 0) return `M ${x} ${ys[i]}`;
    const cx = (xs[i - 1] + x) / 2;
    return `C ${cx} ${ys[i - 1]} ${cx} ${ys[i]} ${x} ${ys[i]}`;
  }).join(" ");

  const milestones = [
    { i: 6, label: "Reel viral" },
    { i: 9, label: "OFTV ep"   },
  ];

  return (
    <div className="absolute inset-0 overflow-hidden">
      <div className="absolute inset-0" style={{
        background: "radial-gradient(ellipse 90% 60% at 50% 25%, rgba(232,160,160,0.10), transparent 60%), #0a0a0a"
      }}></div>

      {/* card body — claim more vertical room */}
      <div className="absolute flex flex-col" style={{
        zIndex: 5,
        top: 0, left: 0, right: 0,
        bottom: compact ? 170 : 210,
        padding: compact ? "26px 20px 0" : "50px 36px 0",
      }}>

        {/* header */}
        <div className="flex items-center justify-between" style={{ marginBottom: compact ? 16 : 22 }}>
          <div style={{ fontSize: compact ? 8.5 : 9.5, letterSpacing: "0.3em", textTransform: "uppercase", color: "rgba(255,255,255,0.45)" }}>
            Growth · 90 Days
          </div>
          <div className="flex items-center" style={{ gap: 6 }}>
            <span style={{ width: 5, height: 5, borderRadius: "50%", background: "#7DD3A4", boxShadow: "0 0 6px #7DD3A4", animation: "pulse 2s ease-in-out infinite" }}></span>
            <span style={{ fontSize: compact ? 8 : 9, color: "rgba(125,211,164,0.9)", letterSpacing: "0.2em", fontWeight: 500, textTransform: "uppercase" }}>Live</span>
          </div>
        </div>

        {/* HERO — Reach as the headline */}
        <div style={{ marginBottom: compact ? 6 : 10 }}>
          <div style={{ display: "flex", alignItems: "baseline", gap: 8 }}>
            <span style={{
              fontSize: compact ? 44 : 64,
              color: "#f0ece8", fontWeight: 600,
              fontFamily: "Sora, sans-serif", lineHeight: 1,
              background: "linear-gradient(135deg, #fff 0%, #F5C6C6 50%, #E8A0A0 100%)",
              WebkitBackgroundClip: "text", backgroundClip: "text",
              WebkitTextFillColor: "transparent", color: "transparent",
            }}>
              <CountUp value={312} suffix="%" prefix="+" />
            </span>
            <span style={{ fontSize: compact ? 10 : 12, color: "#7DD3A4", letterSpacing: "0.15em", fontWeight: 500, textTransform: "uppercase", animation: "fadeInUp 0.6s ease-out 1.6s both" }}>
              ▲ vs prior 90d
            </span>
          </div>
          <div style={{ fontSize: compact ? 8 : 9, color: "rgba(255,255,255,0.4)", letterSpacing: "0.25em", textTransform: "uppercase", marginTop: 4 }}>
            Reach · across IG · TT · X
          </div>
        </div>

        {/* chart — taller, full breathing room */}
        <div style={{
          flex: 1,
          minHeight: compact ? 80 : 130,
          background: "rgba(255,255,255,0.02)",
          border: "1px solid rgba(255,255,255,0.05)",
          borderRadius: 8,
          padding: compact ? "10px 12px 6px" : "14px 18px 10px",
          position: "relative",
          overflow: "visible",
          display: "flex",
          flexDirection: "column",
        }}>
          <svg viewBox={`0 0 ${w} ${h}`} preserveAspectRatio="none"
            style={{ width: "100%", flex: 1, minHeight: 0, display: "block", overflow: "visible" }}>
            {[0.25, 0.5, 0.75].map((q, i) => (
              <line key={i} x1={pad} x2={w - pad} y1={pad + (h - pad * 2) * q} y2={pad + (h - pad * 2) * q}
                stroke="rgba(255,255,255,0.04)" strokeWidth="0.25" />
            ))}
            <defs>
              <linearGradient id="growthFill2" x1="0" y1="0" x2="0" y2="1">
                <stop offset="0%"   stopColor="#E8A0A0" stopOpacity="0.28" />
                <stop offset="100%" stopColor="#E8A0A0" stopOpacity="0" />
              </linearGradient>
            </defs>
            <path d={`${path} L ${xs[xs.length-1]} ${h - pad} L ${xs[0]} ${h - pad} Z`} fill="url(#growthFill2)" />
            <path d={path} fill="none" stroke="#E8A0A0" strokeWidth="0.7" strokeLinecap="round" strokeLinejoin="round"
              style={{ strokeDasharray: 1000, animation: "drawLine 2.2s ease-out forwards" }} />
            {milestones.map(m => (
              <circle key={m.i} cx={xs[m.i]} cy={ys[m.i]} r="1.2" fill="#E8A0A0"
                style={{ animation: "fadeInUp 0.6s ease-out 1.6s both", filter: "drop-shadow(0 0 2px #E8A0A0)" }} />
            ))}
            <circle cx={xs[xs.length - 1]} cy={ys[ys.length - 1]} r="1.6" fill="#fff"
              style={{ animation: "fadeInUp 0.6s ease-out 2s both" }} />
          </svg>
          {/* milestone labels under chart */}
          <div style={{ position: "relative", height: compact ? 10 : 12, marginTop: 2 }}>
            {milestones.map(m => (
              <span key={m.i} style={{
                position: "absolute",
                left: `${(xs[m.i] / w) * 100}%`,
                transform: "translateX(-50%)",
                fontSize: compact ? 6.5 : 7.5,
                color: "rgba(232,160,160,0.7)",
                letterSpacing: "0.08em",
                whiteSpace: "nowrap",
                animation: "fadeInUp 0.6s ease-out 1.8s both",
              }}>{m.label}</span>
            ))}
          </div>
        </div>

        {/* secondary KPIs — smaller, in a row */}
        <div className="flex" style={{ gap: compact ? 14 : 22, marginTop: compact ? 10 : 14, flexShrink: 0 }}>
          <div style={{ animation: "fadeInUp 0.6s ease-out 2.2s both" }}>
            <div style={{ fontSize: compact ? 13 : 16, color: "#f0ece8", fontWeight: 600, fontFamily: "Sora, sans-serif", lineHeight: 1 }}>
              <CountUp value={12.4} prefix="+" suffix="K" decimals={1} delay={2200} />
            </div>
            <div style={{ fontSize: compact ? 7.5 : 8.5, color: "rgba(255,255,255,0.4)", letterSpacing: "0.2em", textTransform: "uppercase", marginTop: 3 }}>
              Followers
            </div>
          </div>
          <div style={{ width: 1, height: compact ? 22 : 28, background: "rgba(255,255,255,0.08)" }}></div>
          <div style={{ animation: "fadeInUp 0.6s ease-out 2.4s both" }}>
            <div style={{ fontSize: compact ? 13 : 16, color: "#f0ece8", fontWeight: 600, fontFamily: "Sora, sans-serif", lineHeight: 1 }}>
              <CountUp value={8.2} prefix="+" suffix="K" decimals={1} delay={2400} />
            </div>
            <div style={{ fontSize: compact ? 7.5 : 8.5, color: "rgba(255,255,255,0.4)", letterSpacing: "0.2em", textTransform: "uppercase", marginTop: 3 }}>
              Profile Visits
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

function Services() {
  const outerRef = React.useRef(null);
  const p = usePinnedProgress(outerRef);

  const services = [
    { n: "01", t: "Chat Management", tag: "24/7 Coverage", d: "Trained chatters covering your DMs 24/7. We learn how you actually talk — your slang, your pacing, what you'd never say. You approve the voice, we run the volume.", metric: "24/7" },
    { n: "02", t: "Social Media", tag: "Daily Posts + Growth", d: "Instagram, TikTok, Twitter, Reddit — posted, grown, and monitored daily. We handle the schedule, the captions, the engagement. You film, we scale it.", metric: "4 platforms" },
    { n: "03", t: "Content Direction & Distribution", tag: "Every Platform", d: "A custom inspo board built around your niche, your body, your vibe — then we distribute it everywhere. Reels, TikTok, Reddit, OFTV — one calendar, every platform. You always know what to film and why it'll perform.", metric: "Every platform" },
    { n: "04", t: "Growth & Traffic", tag: "Paid + Organic", d: "Paid promo, reel strategy, cross-platform funnels. We find your audience and bring them to your page.", metric: "Tracked" },
    { n: "05", t: "Content Houses", tag: "Palm Beach · LA", d: "Quarterly shoots in Palm Beach and LA. Pro photographers, other creators, collab content — built into the management, not an upsell.", metric: "Quarterly" },
    { n: "06", t: "Profile & Brand", tag: "Audit + Rebuild", d: "Bio, pricing, bundles, PPVs, welcome flow. We audit what's leaking money and rebuild it to convert.", metric: "Full audit" },
  ];

  const translate = -(p * 62);
  return (
    <section id="services" className="relative" data-screen-label="Services">
      {/* === MOBILE ONLY === */}
      <div className="md:hidden py-24">
        <div className="px-6 mb-12">
          <SecLabel num="01 / 09">How we help</SecLabel>
          <h2 className="mt-5 font-display font-semibold tracking-tight leading-[0.95] text-[40px]">
            What you <GradientText>actually get.</GradientText>
          </h2>
          <p className="mt-5 text-[#7a7a7a] font-light leading-relaxed text-[14px]">
            Full-service means full-service. <span className="text-[#f0ece8]">Not "we'll post for you sometimes."</span>
          </p>
        </div>

        {/* vertical stack */}
        <div className="px-6">
          <div className="flex flex-col gap-5">
            {services.map((s) => (
              <article key={s.n} className="w-full h-[460px] glass-card rounded-none relative overflow-hidden">
                {s.n === "01" ? (
                  <ChatMockup compact />
                ) : s.n === "02" ? (
                  <SocialMockup compact />
                ) : s.n === "03" ? (
                  <ContentMockup compact />
                ) : s.n === "04" ? (
                  <GrowthMockup compact />
                ) : s.n === "05" ? (
                  <img src="assets/services/05-houses.jpg" alt="Content house — Florida pool"
                    className="absolute inset-0 w-full h-full object-cover" />
                ) : (
                  <div className="placeholder-media absolute inset-0">
                    <span className="ph-label">{s.tag}</span>
                  </div>
                )}
                <div className="absolute inset-0 pointer-events-none" style={{
                  zIndex: 15,
                  background: (s.n === "01" || s.n === "02" || s.n === "03" || s.n === "04")
                    ? "linear-gradient(to top, #060606 0%, rgba(6,6,6,0.92) 28%, rgba(6,6,6,0.05) 50%, transparent 60%)"
                    : "linear-gradient(to top, #060606 0%, rgba(6,6,6,0.85) 40%, rgba(6,6,6,0.3) 100%)"
                }}></div>
                <div className="relative h-full flex flex-col justify-between p-6" style={{ zIndex: 20 }}>
                  <div className="flex items-start justify-between">
                    <span className="font-display text-[56px] leading-none font-bold text-white/[0.1]">{s.n}</span>
                    <span className="text-[8px] tracking-[0.3em] uppercase text-[rgba(232,160,160,0.6)] text-right max-w-[120px]">{s.tag}</span>
                  </div>
                  <div>
                    <h3 className="font-display text-[24px] font-semibold leading-tight tracking-tight mb-3">{s.t}</h3>
                    <p className="text-[12px] text-[#f0ece8]/75 font-light leading-relaxed">{s.d}</p>
                  </div>
                </div>
              </article>
            ))}
            {/* trailing CTA card */}
            <article className="w-full h-[460px] flex flex-col justify-between p-6 border border-[rgba(232,160,160,0.25)] aurora-bg">
              <span className="text-[8px] tracking-[0.3em] uppercase text-[rgba(232,160,160,0.6)]">— Every plan is custom</span>
              <div>
                <h3 className="font-display text-[28px] font-semibold leading-tight tracking-tight mb-4">Not every<br/>creator needs<br/>everything.</h3>
                <p className="text-[12px] text-[#7a7a7a] font-light leading-relaxed mb-6">A 15-minute call tells us where you are and what moves the needle.</p>
                <BtnArrow href="#cta">Book a Call</BtnArrow>
              </div>
            </article>
          </div>
        </div>

        {/* works-with strip */}
        <div className="mt-12 px-6 pt-6 border-t border-white/[0.04]">
          <span className="text-[9px] tracking-[0.3em] uppercase text-white/25 block mb-3">Works with</span>
          <div className="flex flex-wrap gap-x-5 gap-y-2">
            {["OnlyFans","Fansly","Instagram","TikTok","Twitter","Reddit"].map(p => (
              <span key={p} className="text-[10px] tracking-[0.25em] uppercase text-white/30">{p}</span>
            ))}
          </div>
        </div>
      </div>

      {/* === DESKTOP ONLY (existing scroll-jack) === */}
      <div className="hidden md:block" ref={outerRef} style={{ height: `${services.length * 80}vh` }}>
        <div className="sticky top-0 h-screen overflow-hidden flex flex-col justify-center">
          <div className="absolute right-[-10%] top-1/2 -translate-y-1/2 w-[700px] h-[700px] rounded-full bg-[rgba(232,160,160,0.025)] blur-[160px]"></div>

          <div className="relative max-w-[1600px] mx-auto px-6 md:px-10 w-full">
            <div className="flex items-end justify-between mb-16">
              <div>
                <SecLabel num="01 / 09">How we help</SecLabel>
                <h2 className="mt-6 font-display font-semibold tracking-tight leading-[0.95]" style={{ fontSize: "clamp(44px, 6vw, 96px)" }}>
                  What you <GradientText>actually get.</GradientText>
                </h2>
                <p className="mt-6 text-[#7a7a7a] font-light leading-relaxed max-w-lg text-[15px]">
                  Full-service means full-service. <span className="text-[#f0ece8]">Not "we'll post for you sometimes."</span>
                </p>
              </div>
              <div className="hidden md:flex items-center gap-3 text-[10px] tracking-[0.3em] uppercase text-white/30">
                <span>Scroll</span>
                <span className="flex items-center gap-1.5">
                  <span className="w-4 h-px bg-white/30"></span>→
                </span>
              </div>
            </div>

            <div className="relative h-px bg-white/5 mb-10 overflow-hidden">
              <div className="absolute left-0 top-0 h-full bg-[#E8A0A0]" style={{ width: `${p*100}%`, transition: "width 0.15s linear" }}></div>
            </div>
          </div>

          <div className="relative" style={{ transform: `translate3d(${translate}vw, 0, 0)`, transition: "transform 0.05s linear", willChange: "transform" }}>
            <div className="flex gap-6 pl-[6vw]">
              {services.map((s) => (
                <article key={s.n} className="shrink-0 w-[440px] md:w-[520px] h-[540px] glass-card rounded-none relative overflow-hidden group">
                  {s.n === "01" ? (
                    <ChatMockup />
                  ) : s.n === "02" ? (
                    <SocialMockup />
                  ) : s.n === "03" ? (
                    <ContentMockup />
                  ) : s.n === "04" ? (
                    <GrowthMockup />
                  ) : s.n === "05" ? (
                    <img src="assets/services/05-houses.jpg" alt="Content house — Florida pool"
                      className="absolute inset-0 w-full h-full object-cover" />
                  ) : (
                    <div className="placeholder-media absolute inset-0">
                      <span className="ph-label">{s.tag}</span>
                      <span className="ph-rec">{s.metric}</span>
                    </div>
                  )}
                  <div className="absolute inset-0 bg-gradient-to-t from-[#060606] via-[#060606]/40 to-transparent pointer-events-none"></div>
                  <div className="relative h-full flex flex-col justify-between p-10">
                    <div className="flex items-start justify-between">
                      <span className="font-display text-[80px] leading-none font-bold text-white/[0.08] group-hover:text-[rgba(232,160,160,0.35)] transition-colors duration-700">{s.n}</span>
                      <span className="text-[9px] tracking-[0.3em] uppercase text-[rgba(232,160,160,0.6)] text-right">{s.tag}</span>
                    </div>
                    <div>
                      <h3 className="font-display text-[32px] md:text-[38px] font-semibold leading-tight tracking-tight mb-4">{s.t}</h3>
                      <p className="text-[13px] text-[#f0ece8]/75 font-light leading-relaxed max-w-sm mb-6">{s.d}</p>
                    </div>
                  </div>
                </article>
              ))}
              <article className="shrink-0 w-[440px] md:w-[520px] h-[540px] flex flex-col justify-between p-10 border border-[rgba(232,160,160,0.25)] aurora-bg">
                <span className="text-[10px] tracking-[0.3em] uppercase text-[rgba(232,160,160,0.6)]">— Every plan is custom</span>
                <div>
                  <h3 className="font-display text-[40px] font-semibold leading-tight tracking-tight mb-6">Not every<br/>creator needs<br/>everything.</h3>
                  <p className="text-[13px] text-[#7a7a7a] font-light leading-relaxed mb-8">We scope what fits — and only that. A 15-minute call tells us where you are and what moves the needle.</p>
                  <BtnArrow href="#cta">Book a Call</BtnArrow>
                </div>
              </article>
            </div>
          </div>

          <div className="absolute bottom-10 left-0 right-0 border-t border-white/[0.04] pt-6">
            <div className="max-w-[1600px] mx-auto px-6 md:px-10 flex items-center gap-10 flex-wrap">
              <span className="text-[9px] tracking-[0.3em] uppercase text-white/25 shrink-0">Works with</span>
              {["OnlyFans","Fansly","Instagram","TikTok","Twitter","Reddit"].map(p => (
                <span key={p} className="text-[10px] tracking-[0.25em] uppercase text-white/20 hover:text-[#f0ece8] transition-colors duration-500">{p}</span>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

window.Services = Services;