// Shared atoms for the Build vs Buy landing page.

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

/* ── Eyebrow ────────────────────────────────────────────── */
const BuildEyebrow = ({ children, color = "iris", style }) => {
  const c = color === "muted" ? "rgba(255,255,255,0.6)" : buildAccent(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 BuildLogo = ({ 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 BuildCover = ({ width = 320, rotate = -3 }) => {
  const h = width * 1.41;
  const scale = width / 320;
  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)",
      }}>
        {/* Soft pink-lavender gradient cover — same palette as og-cover.html so the two stay visually consistent */}
        <div style={{
          position: "absolute", inset: 0,
          background: "linear-gradient(160deg, #f9eef6 0%, #ede8f8 40%, #ddd8f5 75%, #cec8ef 100%)",
        }}></div>
        <div style={{
          position: "absolute", top: "28%", right: "-10%",
          width: "65%", height: "65%",
          background: "radial-gradient(ellipse at 40% 40%, rgba(186,142,255,0.55) 0%, rgba(130,130,227,0.35) 30%, rgba(120,200,240,0.2) 60%, transparent 80%)",
          borderRadius: "50%", filter: "blur(2px)",
        }}></div>
        <div style={{
          position: "absolute", top: "32%", right: "-6%",
          width: "55%", height: "55%",
          background: "radial-gradient(ellipse at 55% 35%, rgba(255,255,255,0.6) 0%, rgba(200,160,255,0.3) 40%, transparent 70%)",
          borderRadius: "50%", filter: "blur(1px)",
        }}></div>

        <div style={{
          position: "relative", zIndex: 2,
          padding: `${36 * scale}px ${32 * scale}px`,
          height: "100%",
          display: "flex", flexDirection: "column", justifyContent: "space-between",
        }}>
          <div>
            <img src="assets/logo-full.png" alt="AlgoVerde" style={{ height: 14 * scale, width: "auto" }} />
            <div style={{
              fontSize: 7.5 * scale, fontWeight: 500, letterSpacing: "0.28em",
              textTransform: "uppercase", color: "#8282E3",
              marginTop: 18 * scale, fontFamily: "var(--font-sans)",
              display: "flex", alignItems: "center", gap: 8 * scale,
            }}>
              <span style={{ width: 20 * scale, height: 1.5, background: "#8282E3", display: "inline-block" }}></span>
              White Paper
            </div>
          </div>

          <div style={{ flex: 1, display: "flex", alignItems: "flex-end", paddingBottom: 12 * scale }}>
            <div>
              <div style={{
                fontFamily: "var(--font-sans)", fontWeight: 700,
                fontSize: 19 * scale, lineHeight: 1.12, letterSpacing: "-0.02em",
                color: "#1A1A24",
              }}>Everyone Can Build</div>
              <div style={{
                fontFamily: "var(--font-sans)", fontWeight: 700,
                fontSize: 19 * scale, lineHeight: 1.12, letterSpacing: "-0.02em",
                color: "#1A1A24",
              }}>AI Agents.</div>
              <div style={{
                fontFamily: "var(--font-serif)", fontStyle: "italic", fontWeight: 500,
                fontSize: 21 * scale, lineHeight: 1.15, letterSpacing: "-0.01em",
                color: "#8282E3", marginTop: 4 * scale,
              }}>Almost Nobody Can</div>
              <div style={{
                fontFamily: "var(--font-serif)", fontStyle: "italic", fontWeight: 500,
                fontSize: 21 * scale, lineHeight: 1.15, letterSpacing: "-0.01em",
                color: "#8282E3",
              }}>Maintain Them.</div>
              <div style={{
                marginTop: 12 * scale,
                fontFamily: "var(--font-sans)", fontStyle: "italic",
                fontSize: 9 * scale, color: "#4A4A5A", lineHeight: 1.45,
              }}>Why DIY agents stall. An honest take on "build vs buy."</div>
            </div>
          </div>

          <div style={{
            fontSize: 7 * scale, color: "#8A8A95",
            fontFamily: "var(--font-sans)", letterSpacing: "0.06em",
            textTransform: "uppercase",
          }}>AlgoVerde.ai · White Paper · Build vs Buy</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 BUILD_PDF = "assets/build-vs-buy-whitepaper.pdf";

const buildTrackDownload = (location) => {
  if (typeof window.gtag === "function") {
    window.gtag("event", "file_download", {
      file_name: "build-vs-buy-whitepaper.pdf",
      file_extension: "pdf",
      link_text: "Download the white paper",
      link_location: location,
    });
  }
};

/* ── Logo Bar ───────────────────────────────────────────── */
const BuildLogoBar = ({ dark = false }) => {
  const items = ["Top 10 Global Automaker", "Top 3 Global CPG", "Top-5 Consulting", "Leading Telco", "Big-Four Auditor"];
  const color = dark ? "rgba(255,255,255,0.7)" : "var(--av-ink-soft)";
  const ruleColor = dark ? "rgba(255,255,255,0.12)" : "var(--av-rule)";
  return (
    <div style={{
      borderTop: `1px solid ${ruleColor}`, borderBottom: `1px solid ${ruleColor}`,
      padding: "24px 0", display: "flex", flexDirection: "column", gap: 16,
    }}>
      <div style={{
        fontSize: 11, fontWeight: 500, letterSpacing: "0.18em",
        textTransform: "uppercase", color: dark ? "rgba(255,255,255,0.5)" : "var(--av-ink-muted)",
        fontFamily: "var(--font-sans)",
      }}>Trusted by research teams at</div>
      <div style={{ display: "flex", gap: 32, flexWrap: "wrap", alignItems: "center" }}>
        {items.map((name, i) => (
          <span key={i} style={{
            fontFamily: "var(--font-sans)", fontWeight: 500, fontSize: 15,
            color, letterSpacing: "-0.01em",
          }}>{name}</span>
        ))}
      </div>
    </div>
  );
};

/* ── TOC Chip ───────────────────────────────────────────── */
const BuildTocChip = ({ idx, children, color = "iris" }) => {
  const c = buildAccent(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: 28, 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, {
  BuildEyebrow, BuildLogo, BuildCover,
  BuildLogoBar, BuildTocChip,
  buildAccent, BUILD_COLORS,
  BUILD_PDF, buildTrackDownload,
});