// Shared atoms for AI Personas Evidence landing page.

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

/* ── Eyebrow ────────────────────────────────────────────── */
const PersonaEyebrow = ({ children, color = "iris", style }) => {
  const c = color === "muted" ? "rgba(255,255,255,0.6)" : personaAccent(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 PersonaLogo = ({ 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 PersonaCover = ({ 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 */}
        <div style={{
          position: "absolute", inset: 0,
          background: "linear-gradient(160deg, #f9eef6 0%, #ede8f8 40%, #ddd8f5 75%, #cec8ef 100%)",
        }}></div>

        {/* Iridescent sphere glow — top right */}
        <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>

        {/* Content */}
        <div style={{
          position: "relative", zIndex: 2,
          padding: `${36 * scale}px ${32 * scale}px`,
          height: "100%",
          display: "flex", flexDirection: "column", justifyContent: "space-between",
        }}>
          {/* Top — logo + eyebrow */}
          <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>

          {/* Title */}
          <div style={{ flex: 1, display: "flex", alignItems: "flex-end", paddingBottom: 12 * scale }}>
            <div>
              <div style={{
                fontFamily: "var(--font-sans)", fontWeight: 700,
                fontSize: 28 * scale, lineHeight: 1.08, letterSpacing: "-0.025em",
                color: "#1A1A24",
              }}>
                AI Personas:<br />What the Evidence
              </div>
              <div style={{
                fontFamily: "var(--font-serif)", fontStyle: "italic", fontWeight: 500,
                fontSize: 30 * scale, lineHeight: 1.05, letterSpacing: "-0.01em",
                color: "#8282E3",
              }}>
                Actually Says
              </div>
              <div style={{
                marginTop: 12 * scale,
                fontFamily: "var(--font-sans)", fontStyle: "italic",
                fontSize: 9 * scale, color: "#4A4A5A", lineHeight: 1.45,
              }}>
                A guide for market research leaders who want<br />the full picture, not the pitch.
              </div>
            </div>
          </div>

          {/* Bottom */}
          <div style={{
            fontSize: 7 * scale, color: "#8A8A95",
            fontFamily: "var(--font-sans)", letterSpacing: "0.06em",
            textTransform: "uppercase",
          }}>AlgoVerde.ai · 19 pages · 24 sources</div>
        </div>
      </div>
    </div>
  );
};

/* ── Email Form (Close.com embed) ───────────────────────── */
const PersonaEmailForm = ({ accentColor = "iris" }) => {
  const accent = personaAccent(accentColor).solid;
  return (
    <div style={{
      background: "#fff", border: "1px solid var(--av-rule)", borderRadius: 16,
      padding: "32px 32px 28px", display: "flex", flexDirection: "column", gap: 18,
      fontFamily: "var(--font-sans)",
    }}>
      <div style={{
        display: "flex", alignItems: "center", gap: 10,
        fontSize: 11, fontWeight: 500, letterSpacing: "0.18em",
        textTransform: "uppercase", color: accent,
      }}>
        <span style={{ width: 24, height: 2, background: accent, flexShrink: 0 }}></span>
        Free white paper
      </div>

      <div style={{
        fontFamily: "var(--font-sans)", fontWeight: 600, fontSize: 24,
        letterSpacing: "-0.018em", color: "var(--av-ink)", lineHeight: 1.2,
      }}>
        Get the{" "}
        <span style={{
          fontFamily: "var(--font-serif)", fontStyle: "italic", fontWeight: 500,
          color: accent
        }}>evidence</span>.
      </div>

      <p style={{
        fontSize: 14, color: "var(--av-ink-soft)", lineHeight: 1.5, margin: 0,
      }}>
        19 pages. 24 sources. No vendor spin. The full picture on what the
        research actually says about AI personas.
      </p>

      <div>
        <close-form id="form_033VPgXoF7ZPsFLgEd8io5"></close-form>
      </div>
    </div>
  );
};

/* ── Logo Bar ───────────────────────────────────────────── */
const PersonaLogoBar = ({ 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 PersonaTocChip = ({ idx, children, color = "iris" }) => {
  const c = personaAccent(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, {
  PersonaEyebrow, PersonaLogo, PersonaCover,
  PersonaEmailForm, PersonaLogoBar, PersonaTocChip,
  personaAccent, PERSONA_COLORS,
});