/* eslint-disable react/jsx-no-undef */
// GENER8 Promo Video — Scenes 3 (reveal), 4 (engagement), 5 (CTA)
//
//  9.0 – 19.0 : Five platform cards fan out, each writes its native post
// 19.0 – 22.0 : Engagement counters burst onto each card
// 22.0 – 25.0 : Logo + CTA

// ─────────────────────────────────────────────────────────────────────────
// SCENE 3 — Card reveal (9.0 – 19.0)
// Cards stagger in from center, then write their text simultaneously.
// ─────────────────────────────────────────────────────────────────────────

function SceneReveal() {
  return (
    <Sprite start={9.0} end={19.0}>
      {({ localTime }) => {
        // Brief header (shrunken compose) flies up from center to top
        const headerInT = clamp(localTime / 0.5, 0, 1);
        const headerEx = clamp((localTime - 9.5) / 0.5, 0, 1);
        const headerOp = headerInT;

        return (
          <div style={{ position: "absolute", inset: 0 }}>
            {/* Brief summary header at top */}
            <div style={{
              position: "absolute", top: 80, left: "50%",
              transform: `translateX(-50%) translateY(${(1 - Easing.easeOutCubic(headerInT)) * -20}px)`,
              opacity: headerOp,
              padding: "12px 26px",
              background: "oklch(11% 0.006 28)",
              border: "1px solid var(--line-soft)",
              borderRadius: 999,
              display: "flex", alignItems: "center", gap: 14,
              maxWidth: 1100,
            }}>
              <span style={{
                fontSize: 12, fontWeight: 600, letterSpacing: "0.08em",
                textTransform: "uppercase", color: "var(--ink-4)",
              }}>Brief</span>
              <span style={{
                fontSize: 18, color: "var(--ink-2)", fontStyle: "italic",
                fontFamily: "var(--font-serif)",
                overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap",
                maxWidth: 880,
              }}>
                &quot;Just dropped our new product line. Want to capture the energy without sounding corporate.&quot;
              </span>
            </div>

            {/* Five cards row */}
            <CardsRow localTime={localTime} />
          </div>
        );
      }}
    </Sprite>
  );
}

function CardsRow({ localTime }) {
  // Cards: 320 wide × 460 tall, gap 20, centered
  const cardW = 320, cardH = 460, gap = 22;
  const totalW = cardW * 5 + gap * 4;
  const startX = (1920 - totalW) / 2;
  const baseY = 260;

  return (
    <>
      {PLAT_ORDER.map((id, i) => {
        const p = PLAT[id];

        // Stagger entrance: 0.4s + i * 0.12s
        const inStart = 0.4 + i * 0.12;
        const inT = clamp((localTime - inStart) / 0.55, 0, 1);
        const eased = Easing.easeOutBack(inT);
        const cardOp = clamp(inT, 0, 1);
        const cardY  = (1 - eased) * 40;
        const cardScale = 0.85 + 0.15 * eased;

        // Text reveal: starts after entrance, word by word
        const textStart = inStart + 0.5;
        const wordsPerSec = 4.5;
        const words = p.text.split(/(\s+)/);
        const wordCount = Math.floor(Math.max(0, (localTime - textStart) * wordsPerSec));
        const shownText = words.slice(0, wordCount).join("");

        return (
          <div key={id} style={{
            position: "absolute",
            left: startX + i * (cardW + gap),
            top: baseY,
            width: cardW,
            transform: `translateY(${cardY}px) scale(${cardScale})`,
            opacity: cardOp,
            transformOrigin: "center top",
          }}>
            <PlatformCard p={p} text={shownText} writing={wordCount < words.length} localTime={localTime} cardIndex={i} />
          </div>
        );
      })}
    </>
  );
}

function PlatformCard({ p, text, writing, localTime, cardIndex }) {
  // Engagement bubble appears at 19.0+, on this card
  const engageStart = 10.0 + cardIndex * 0.08; // localTime starts at 0 = 9.0s global
  const engageVisible = localTime >= engageStart && localTime < 13.5;
  return (
    <div style={{
      background: "oklch(11% 0.006 28)",
      border: "1px solid var(--line-soft)",
      borderTop: `2.5px solid ${p.accent}`,
      borderRadius: 16, overflow: "hidden",
      boxShadow: "0 28px 64px oklch(0% 0 0 / 0.5)",
    }}>
      {/* Head */}
      <div style={{
        padding: "14px 18px", borderBottom: "1px solid var(--line-soft)",
        display: "flex", alignItems: "center", gap: 10,
        background: p.accent + "14",
      }}>
        <span style={{
          width: 30, height: 30, borderRadius: 8,
          background: p.dotBg, color: "#fff",
          display: "grid", placeItems: "center",
        }}>
          {p.icon(15)}
        </span>
        <span style={{ fontSize: 15, fontWeight: 600, color: "var(--ink)" }}>{p.name}</span>
      </div>

      {/* Body */}
      <div style={{
        padding: "18px 18px 22px",
        minHeight: 230,
        fontSize: 14.5, lineHeight: 1.55,
        color: "var(--ink-2)", whiteSpace: "pre-line",
        fontFamily: "var(--font-sans)",
      }}>
        {text}
        {writing && (
          <span style={{
            display: "inline-block", width: 2, height: 16,
            background: p.accent, marginLeft: 2, verticalAlign: "-3px",
            animation: "g8v-blink 0.9s steps(2) infinite",
          }} />
        )}
      </div>

      {/* Footer */}
      <div style={{
        padding: "10px 16px",
        borderTop: "1px solid var(--line-soft)",
        display: "flex", alignItems: "center", justifyContent: "space-between",
        background: "oklch(8.5% 0.005 30)",
      }}>
        <div style={{ fontSize: 11, color: "var(--ink-4)", fontFamily: "var(--font-mono)" }}>
          {text.length} chars
        </div>
        <div style={{
          fontSize: 11, color: "var(--green)",
          display: "flex", alignItems: "center", gap: 5,
          padding: "3px 10px", borderRadius: 999,
          background: "oklch(67% 0.13 148 / 0.08)",
          border: "1px solid oklch(67% 0.13 148 / 0.2)",
          fontWeight: 600,
        }}>
          <span style={{ width: 5, height: 5, borderRadius: "50%", background: "var(--green)" }} />
          Ready
        </div>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────────────────
// SCENE 4 — Engagement (19.0 – 22.0)
// On each card, a row of counters bursts in: ♥ 1.2k · 💬 84 · ↗ 32
// ─────────────────────────────────────────────────────────────────────────

const ENGAGEMENT = [
  { likes: 12400, comments: 482, shares: 96 },   // IG
  { likes: 84300, comments: 1240, shares: 312 }, // TT
  { likes:  2100, comments: 184, shares: 64 },   // FB
  { likes: 38200, comments: 920, shares: 188 },  // YT
  { likes:  4200, comments: 0,   shares: 0   },  // Email (no comments/shares — opens instead)
];

function SceneEngagement() {
  return (
    <Sprite start={19.0} end={22.5}>
      {({ localTime }) => {
        const cardW = 320, cardH = 460, gap = 22;
        const totalW = cardW * 5 + gap * 4;
        const startX = (1920 - totalW) / 2;
        // Cards are visible from prior scene; here we just overlay engagement bursts.
        return (
          <div style={{ position: "absolute", inset: 0 }}>
            {/* Counter ribbons stack on each card's bottom */}
            {PLAT_ORDER.map((id, i) => {
              const p = PLAT[id];
              const e = ENGAGEMENT[i];
              const inStart = 0.1 + i * 0.12;
              const inT = clamp((localTime - inStart) / 0.45, 0, 1);
              const eased = Easing.easeOutBack(inT);
              const op = clamp(inT, 0, 1);
              const y  = (1 - eased) * 16;

              // Counter tick: animate likes count from 0 to target
              const tickT = clamp((localTime - inStart - 0.3) / 1.3, 0, 1);
              const eased2 = Easing.easeOutCubic(tickT);
              const likes = Math.floor(e.likes * eased2);
              const comments = Math.floor(e.comments * eased2);
              const shares = Math.floor(e.shares * eased2);

              return (
                <div key={id} style={{
                  position: "absolute",
                  left: startX + i * (cardW + gap),
                  top: 260 + 478,        // card top + card height + spacer
                  width: cardW,
                  opacity: op,
                  transform: `translateY(${y}px)`,
                }}>
                  <div style={{
                    background: p.bg,
                    border: `1px solid ${p.border}`,
                    borderRadius: 10,
                    padding: "10px 12px",
                    display: "flex", alignItems: "center", justifyContent: "space-around",
                    color: p.accent,
                    fontSize: 14, fontWeight: 600,
                    fontFamily: "var(--font-mono)",
                  }}>
                    <CounterBit icon="heart" v={fmtCount(likes)} />
                    {e.comments > 0 && <CounterBit icon="comment" v={fmtCount(comments)} />}
                    {e.shares   > 0 && <CounterBit icon="share"   v={fmtCount(shares)} />}
                    {id === "email" && <CounterBit icon="email" v="open" textOnly />}
                  </div>
                </div>
              );
            })}

            {/* "Trusted by" pill at bottom */}
            <TrustPill localTime={localTime} />
          </div>
        );
      }}
    </Sprite>
  );
}

function CounterBit({ icon, v, textOnly }) {
  const i = {
    heart:   <path d="M7 12.5C7 12.5 1 9.5 1 5.5A3 3 0 0 1 7 4a3 3 0 0 1 6 1.5C13 9.5 7 12.5 7 12.5Z" fill="currentColor" stroke="currentColor" strokeWidth="1.2" strokeLinejoin="round" />,
    comment: <path d="M13 8A6 4 0 0 1 7 12a6.5 6.5 0 0 1-2.5-.5L1 12.5l.8-2.5A4 4 0 0 1 1 8 6 4 0 0 1 7 4a6 4 0 0 1 6 4Z" fill="currentColor" stroke="currentColor" strokeWidth="1.2" strokeLinejoin="round" />,
    share:   <><path d="M9.5 1.5l3 3-3 3M12.5 4.5H5A3.5 3.5 0 0 0 1.5 8v3" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" /></>,
    email:   <><rect x="1" y="2.5" width="12" height="9" rx="1.5" fill="none" stroke="currentColor" strokeWidth="1.5" /><path d="M1 4l6 4.5L13 4" fill="none" stroke="currentColor" strokeWidth="1.5" /></>,
  };
  return (
    <span style={{ display: "inline-flex", alignItems: "center", gap: 5 }}>
      <svg width="13" height="13" viewBox="0 0 14 14">{i[icon]}</svg>
      <span style={{ minWidth: textOnly ? 0 : 28 }}>{v}</span>
    </span>
  );
}

function fmtCount(n) {
  if (n >= 1000) return (n / 1000).toFixed(n >= 10000 ? 1 : 1).replace(/\.0$/, "") + "k";
  return String(n);
}

function TrustPill({ localTime }) {
  const inT = clamp((localTime - 1.4) / 0.5, 0, 1);
  const eased = Easing.easeOutCubic(inT);
  return (
    <div style={{
      position: "absolute", bottom: 80, left: "50%",
      transform: `translateX(-50%) translateY(${(1 - eased) * 20}px)`,
      opacity: inT,
      padding: "14px 26px",
      background: "oklch(11% 0.006 28)",
      border: "1px solid var(--line-soft)",
      borderRadius: 999,
      display: "flex", alignItems: "center", gap: 14,
    }}>
      <div style={{ display: "flex" }}>
        {["MT","JL","PN","AK"].map((av, i) => (
          <div key={av} style={{
            width: 30, height: 30, borderRadius: "50%",
            background: `linear-gradient(135deg, ${i % 2 === 0 ? "var(--accent), oklch(45% 0.17 25)" : "oklch(55% 0.12 250), oklch(42% 0.12 250)"})`,
            display: "grid", placeItems: "center",
            fontSize: 10, fontWeight: 700, color: "#fff",
            border: "2px solid oklch(11% 0.006 28)",
            marginLeft: i > 0 ? -10 : 0,
          }}>{av}</div>
        ))}
      </div>
      <span style={{ fontSize: 16, color: "var(--ink-2)" }}>
        Trusted by <strong style={{ color: "var(--ink)" }}>1,200+</strong> creators &amp; brands
      </span>
    </div>
  );
}

// Cards persist behind SceneEngagement (so the engagement burst overlays them).
// Render them again here, statically.
function SceneRevealHold() {
  return (
    <Sprite start={19.0} end={22.5}>
      {({ localTime }) => (
        <CardsRowStatic localTime={localTime} />
      )}
    </Sprite>
  );
}

function CardsRowStatic({ localTime }) {
  const cardW = 320, gap = 22;
  const totalW = cardW * 5 + gap * 4;
  const startX = (1920 - totalW) / 2;
  return (
    <>
      {/* Brief pill header — held */}
      <div style={{
        position: "absolute", top: 80, left: "50%",
        transform: "translateX(-50%)",
        padding: "12px 26px",
        background: "oklch(11% 0.006 28)",
        border: "1px solid var(--line-soft)",
        borderRadius: 999,
        display: "flex", alignItems: "center", gap: 14,
        maxWidth: 1100,
      }}>
        <span style={{
          fontSize: 12, fontWeight: 600, letterSpacing: "0.08em",
          textTransform: "uppercase", color: "var(--ink-4)",
        }}>Brief</span>
        <span style={{
          fontSize: 18, color: "var(--ink-2)", fontStyle: "italic",
          fontFamily: "var(--font-serif)",
          overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap",
          maxWidth: 880,
        }}>&quot;Just dropped our new product line. Want to capture the energy without sounding corporate.&quot;</span>
      </div>

      {PLAT_ORDER.map((id, i) => {
        const p = PLAT[id];
        return (
          <div key={id} style={{
            position: "absolute",
            left: startX + i * (cardW + gap),
            top: 260,
            width: cardW,
          }}>
            <PlatformCard p={p} text={p.text} writing={false} localTime={999} cardIndex={i} />
          </div>
        );
      })}
    </>
  );
}

// ─────────────────────────────────────────────────────────────────────────
// SCENE 5 — CTA (22.5 – 25.0)
// Cards fade out & shrink; logo grows in center; headline + URL beneath.
// ─────────────────────────────────────────────────────────────────────────

function SceneCTA() {
  return (
    <Sprite start={22.5} end={25.0}>
      {({ localTime }) => {
        // Logo + headline reveal
        const logoT = clamp(localTime / 0.6, 0, 1);
        const logoScale = 0.7 + 0.3 * Easing.easeOutBack(logoT);
        const logoOp = logoT;

        const headT = clamp((localTime - 0.6) / 0.6, 0, 1);
        const headOp = headT;
        const headY  = (1 - Easing.easeOutCubic(headT)) * 20;

        const urlT = clamp((localTime - 1.2) / 0.4, 0, 1);
        const urlOp = urlT;
        const urlY  = (1 - Easing.easeOutCubic(urlT)) * 12;

        return (
          <div style={{
            position: "absolute", inset: 0,
            display: "flex", alignItems: "center", justifyContent: "center",
            flexDirection: "column",
          }}>
            {/* Logo mark */}
            <img src="../assets/logo.svg" alt="GENER8" style={{
              width: 160, height: 160, borderRadius: 32,
              boxShadow: "0 24px 64px oklch(60% 0.19 25 / 0.4)",
              opacity: logoOp,
              transform: `scale(${logoScale})`,
              marginBottom: 36,
            }} />

            {/* Headline */}
            <div style={{
              opacity: headOp,
              transform: `translateY(${headY}px)`,
              fontFamily: "var(--font-serif)",
              fontWeight: 500,
              fontSize: 84,
              lineHeight: 1.05,
              letterSpacing: "-0.03em",
              color: "var(--ink)",
              textAlign: "center",
              maxWidth: 1200,
            }}>
              Your entire social media,<br />
              <em style={{ fontStyle: "italic", color: "var(--accent)" }}>written in seconds.</em>
            </div>

            {/* URL pill */}
            <div style={{
              opacity: urlOp,
              transform: `translateY(${urlY}px)`,
              marginTop: 44,
              padding: "16px 32px",
              background: "var(--accent)", color: "#fff",
              borderRadius: 12,
              fontSize: 24, fontWeight: 700,
              fontFamily: "var(--font-sans)",
              display: "inline-flex", alignItems: "center", gap: 10,
              boxShadow: "0 12px 40px oklch(60% 0.19 25 / 0.5)",
            }}>
              gener8.social <span style={{ fontSize: 22 }}>→</span>
            </div>
          </div>
        );
      }}
    </Sprite>
  );
}

Object.assign(window, { SceneReveal, SceneRevealHold, SceneEngagement, SceneCTA, ENGAGEMENT });