// Shared atoms for the Synthetic Beats Real (B2B personas) landing page.

/* ── Colors ─────────────────────────────────────────────── */
const SBR_COLORS = {
  iris:  { solid: "#8282E3", tint: "#A9A9E2", soft: "#ecebfa" },
  ember: { solid: "#E64A19", tint: "#FFAB91", soft: "#fdeae3" },
  verde: { solid: "#009688", tint: "#80CBC4", soft: "#e0f2f0" },
};
const sbrAccent = (name) => SBR_COLORS[name] || SBR_COLORS.iris;

/* ── Eyebrow ────────────────────────────────────────────── */
const SbrEyebrow = ({ children, color = "iris", style }) => {
  const c = color === "muted" ? "rgba(255,255,255,0.6)" : sbrAccent(color).solid;
  return (
    <span style={{ display: "inline-flex", alignItems: "center", gap: 14, ...style }}>
      <span style={{ width: 32, height: 2, background: c, flexShrink: 0 }}></span>
      <span style={{
        fontSize: 12, fontWeight: 500, letterSpacing: "0.18em",
        textTransform: "uppercase", color: c, fontFamily: "var(--font-sans)"
      }}>{children}</span>
    </span>
  );
};

/* ── Logo ───────────────────────────────────────────────── */
const SbrLogo = ({ width = 170, dark = false }) => (
  <img
    src="assets/logo-full.png"
    alt="AlgoVerde"
    style={{ width, height: "auto", display: "block", filter: dark ? "brightness(0) invert(1)" : "none" }}
  />
);

/* ── White Paper Cover mockup ───────────────────────────── */
const SbrCover = ({ width = 320, rotate = -3 }) => {
  const h = width * 1.41;
  const scale = width / 320;
  const titleLine = {
    fontFamily: "var(--font-serif)", fontWeight: 400,
    fontSize: 23 * scale, lineHeight: 1.06, letterSpacing: "-0.01em",
    color: "#14202A",
  };
  return (
    <div style={{
      width, height: h, position: "relative",
      transform: `rotate(${rotate}deg)`,
      transformOrigin: "center",
      transition: "transform 280ms cubic-bezier(.2,.7,.2,1)",
    }}>
      <div style={{
        position: "absolute", inset: 0,
        borderRadius: 6,
        overflow: "hidden",
        boxShadow: "0 1px 0 rgba(26,26,36,0.04), 0 30px 60px -25px rgba(26,26,36,0.2), 0 18px 28px -18px rgba(26,26,36,0.14)",
      }}>
        {/* Pale cyan-to-lavender cover with an iridescent sphere — mirrors the
            actual PDF cover and og-cover.html so all three stay consistent. */}
        <div style={{
          position: "absolute", inset: 0,
          background: "linear-gradient(180deg, #ecfdfd 0%, #e6f4fd 45%, #dde3fd 100%)",
        }}></div>
        <div style={{
          position: "absolute", top: "16%", right: "-18%",
          width: "62%", height: "44%",
          background: "radial-gradient(ellipse at 38% 38%, rgba(255,255,255,0.9) 0%, rgba(229,194,254,0.85) 25%, rgba(208,175,253,0.75) 48%, rgba(187,232,224,0.6) 68%, transparent 76%)",
          borderRadius: "50%", filter: "blur(1px)",
        }}></div>

        <div style={{
          position: "relative", zIndex: 2,
          padding: `${34 * scale}px ${28 * scale}px`,
          height: "100%",
          display: "flex", flexDirection: "column", justifyContent: "space-between",
        }}>
          <img src="assets/logo-full.png" alt="AlgoVerde" style={{ height: 13 * scale, width: "auto", alignSelf: "flex-start" }} />

          <div>
            <div style={titleLine}>Why B2B</div>
            <div style={titleLine}>synthetic personas</div>
            <div style={titleLine}>are better than</div>
            <div style={titleLine}>human</div>
            <div style={titleLine}>respondents.</div>
            <div style={{
              marginTop: 12 * scale,
              fontFamily: "var(--font-sans)",
              fontSize: 8.5 * scale, color: "#3A4450", lineHeight: 1.45, maxWidth: "80%",
            }}>A better way to study the audiences you struggle to recruit.</div>
          </div>

          <div style={{
            borderTop: "1px solid rgba(130,130,227,0.25)", paddingTop: 8 * scale,
            fontSize: 6.5 * scale, color: "#8A8A95",
            fontFamily: "var(--font-sans)", letterSpacing: "0.12em",
            textTransform: "uppercase",
          }}>AlgoVerde · September 2026</div>
        </div>
      </div>
    </div>
  );
};

/* ── Download ───────────────────────────────────────────────
   Ungated: the PDF is a direct download, no form. Since there is no form
   submission to count as a conversion, every download button fires a GA4
   file_download event — that is the only conversion signal this page has. */
const SBR_PDF = "assets/synthetic-beats-real-whitepaper.pdf";

const sbrTrackDownload = (location) => {
  if (typeof window.gtag === "function") {
    window.gtag("event", "file_download", {
      file_name: "synthetic-beats-real-whitepaper.pdf",
      file_extension: "pdf",
      link_text: "Download the white paper",
      link_location: location,
    });
  }
};

/* ── TOC Chip ───────────────────────────────────────────── */
const SbrTocChip = ({ idx, children, color = "iris" }) => {
  const c = sbrAccent(color).solid;
  return (
    <div style={{
      display: "flex", alignItems: "baseline", gap: 14,
      padding: "12px 0", borderTop: "1px solid var(--av-rule)",
    }}>
      <span style={{
        fontFamily: "var(--font-serif)", fontStyle: "italic", fontWeight: 500,
        fontSize: 18, color: c, minWidth: 38, flexShrink: 0,
      }}>{idx}.</span>
      <span style={{
        fontFamily: "var(--font-sans)", fontWeight: 500, fontSize: 15,
        color: "var(--av-ink)", letterSpacing: "-0.01em",
      }}>{children}</span>
    </div>
  );
};

Object.assign(window, {
  SbrEyebrow, SbrLogo, SbrCover, SbrTocChip,
  sbrAccent, SBR_COLORS,
  SBR_PDF, sbrTrackDownload,
});