// Shared atoms for Consumer Pulse Methodology landing page.

const usePulseEmailForm = () => {
  const [email, setEmail] = React.useState("");
  const [optIn, setOptIn] = React.useState(false);
  const [state, setState] = React.useState("idle");
  const [error, setError] = React.useState("");

  const submit = (e) => {
    if (e) e.preventDefault();
    const ok = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
    if (!ok) {
      setState("invalid");
      setError("Enter a valid work email.");
      return;
    }
    setState("submitting");
    setTimeout(() => setState("done"), 700);
  };

  return { email, setEmail, optIn, setOptIn, state, setState, error, setError, submit };
};

/* ── Colors ─────────────────────────────────────────────── */
const PULSE_COLORS = {
  iris:    { solid: "#8282E3", tint: "#A9A9E2", soft: "#ecebfa" },
  ember:   { solid: "#E64A19", tint: "#FFAB91", soft: "#fdeae3" },
  verde:   { solid: "#009688", tint: "#80CBC4", soft: "#e0f2f0" },
};

const pulseAccent = (name) => PULSE_COLORS[name] || PULSE_COLORS.iris;

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

/* ── Logo ───────────────────────────────────────────────── */
const PulseLogo = ({ 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" }}
  />
);

/* ── Methodology Cover mockup ───────────────────────────── */
const MethodologyCover = ({ width = 360, rotate = -3 }) => {
  const h = width * 1.41;
  const scale = width / 360;
  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: 4,
        overflow: "hidden",
        boxShadow: "0 1px 0 rgba(26,26,36,0.04), 0 30px 60px -25px rgba(26,26,36,0.25), 0 18px 28px -18px rgba(26,26,36,0.18)",
      }}>
        <div style={{
          position: "absolute", inset: 0,
          background: "linear-gradient(135deg, #1a1040 0%, #2d2060 40%, #3a2570 60%, #1a1040 100%)",
        }}></div>
        <div style={{
          position: "absolute", top: "-20%", right: "-15%",
          width: "70%", height: "70%",
          background: "radial-gradient(circle, rgba(230,74,25,0.25) 0%, transparent 65%)",
          borderRadius: "50%",
        }}></div>
        <div style={{
          position: "absolute", bottom: "-20%", left: "-15%",
          width: "60%", height: "60%",
          background: "radial-gradient(circle, rgba(130,130,227,0.2) 0%, transparent 65%)",
          borderRadius: "50%",
        }}></div>

        <div style={{
          position: "relative", zIndex: 2,
          padding: `${42 * scale}px ${36 * scale}px`,
          height: "100%",
          display: "flex", flexDirection: "column", justifyContent: "space-between",
          color: "#fff",
        }}>
          <div>
            <img src="assets/logo-full.png" alt="AlgoVerde"
              style={{ height: 14 * scale, width: "auto", filter: "brightness(0) invert(1)" }} />
            <div style={{
              fontSize: 8 * scale, fontWeight: 500, letterSpacing: "0.25em",
              textTransform: "uppercase", color: "rgba(255,255,255,0.6)",
              marginTop: 16 * scale,
              fontFamily: "var(--font-sans)"
            }}>
              AV Consumer Pulse · Spring 2026
            </div>
          </div>

          <div style={{ flex: 1, display: "flex", alignItems: "center" }}>
            <div style={{
              fontFamily: "var(--font-sans)", fontWeight: 600,
              fontSize: 32 * scale, lineHeight: 1.08, letterSpacing: "-0.025em",
              color: "#fff",
            }}>
              How it was{" "}
              <span style={{
                fontFamily: "var(--font-serif)", fontStyle: "italic", fontWeight: 500,
                color: "#ff7043"
              }}>built</span>
              {" "}— and why the numbers{" "}
              <span style={{
                fontFamily: "var(--font-serif)", fontStyle: "italic", fontWeight: 500,
                color: "#ff7043"
              }}>hold up</span>.
            </div>
          </div>

          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end" }}>
            <div style={{
              fontSize: 8 * scale, color: "rgba(255,255,255,0.5)",
              fontFamily: "var(--font-sans)"
            }}>AlgoVerde.ai</div>
            <div style={{
              fontSize: 8 * scale, fontWeight: 500, letterSpacing: "0.25em",
              textTransform: "uppercase", color: "rgba(255,255,255,0.5)",
              fontFamily: "var(--font-sans)"
            }}>Methodology</div>
          </div>
        </div>
      </div>
    </div>
  );
};

/* ── Email Form (Close.com embed) ───────────────────────── */
const PulseEmailForm = ({ accentColor = "iris" }) => {
  const accent = pulseAccent(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 }}></span>
        Methodology deep-dive
      </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
        }}>methodology</span>.
      </div>

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

/* ── Logo Bar ───────────────────────────────────────────── */
const PulseLogoBar = ({ 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 PulseTocChip = ({ idx, children, color = "iris" }) => {
  const c = pulseAccent(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,
      }}>{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, {
  usePulseEmailForm, PulseEyebrow, PulseLogo, MethodologyCover,
  PulseEmailForm, PulseLogoBar, PulseTocChip, pulseAccent, PULSE_COLORS,
});