// Shared brand atoms for the "Real Problem" variations.
// Monochrome Vuesax/Lucide-style line icons (1.5px stroke, currentColor).
// Brand rule: icons are NEVER pink — pink is reserved for emphasis + CTAs.

const ICON_STROKE = { fill: "none", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" };

function IconSend({ size = 24 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" {...ICON_STROKE}>
      <path d="M21 3 11 13" />
      <path d="M21 3 14.5 21 11 13 3 9.5 21 3Z" />
    </svg>
  );
}
function IconMegaphone({ size = 24 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" {...ICON_STROKE}>
      <path d="m3 11 18-5v12L3 14v-3z" />
      <path d="M11.6 16.8a3 3 0 1 1-5.8-1.6" />
    </svg>
  );
}
function IconRepeat({ size = 24 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" {...ICON_STROKE}>
      <path d="M4 8a5 5 0 0 1 5-5h7" />
      <path d="m13 1 3 2-3 2" />
      <path d="M20 16a5 5 0 0 1-5 5H8" />
      <path d="m11 23-3-2 3-2" />
    </svg>
  );
}
function IconScale({ size = 24 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" {...ICON_STROKE}>
      <path d="M3 21h18" />
      <path d="M5 21v-7" />
      <path d="M10 21v-11" />
      <path d="M15 21v-5" />
      <path d="M20 21V8" />
      <path d="m4 9 5-4 4 2 7-5" />
    </svg>
  );
}

function IconHash({ size = 24 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" {...ICON_STROKE}>
      <path d="M10 3 8 21M16 3l-2 18M4 9h16M3 15h16" />
    </svg>
  );
}
function IconClock({ size = 24 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" {...ICON_STROKE}>
      <circle cx="12" cy="12" r="9" />
      <path className="clock-hand" d="M12 7v5l3.5 2" />
    </svg>
  );
}

// The four problem items, in source order, each paired with its icon.
const PROBLEMS = [
  { Icon: IconSend, text: "Sales teams need proof they can send now", tag: "Sales" },
  { Icon: IconMegaphone, text: "Paid campaigns need fresh creative", tag: "Paid" },
  { Icon: IconRepeat, text: "Social channels need constant content", tag: "Social" },
  { Icon: IconScale, text: "Producing every new video from scratch does not scale", tag: "Production" },
];

// Richer variant: short title + supporting line, matching the split layout.
const PROBLEMS_RICH = [
  { Icon: IconSend, title: "Sales teams need proof", desc: "They need short, credible videos they can send right now." },
  { Icon: IconMegaphone, title: "Paid campaigns need fresh creative", desc: "Ads fatigue fast. Campaigns need new angles and new cuts." },
  { Icon: IconHash, title: "Social channels need constant content", desc: "Always-on channels demand a steady supply of engaging short videos." },
  { Icon: IconClock, title: "Producing every new video from scratch does not scale", desc: "New shoots take time, budget, and too many moving parts." },
];

// Verbatim copy (kept as-is per the brief).
const COPY = {
  eyebrow: "The Real Problem",
  headline: "Marketing and sales teams never have enough video assets.",
  sub: "Campaigns need fresh video assets. But new productions are too slow, too expensive, and too hard to scale.",
};

// Eyebrow pill — gradient pink wash, matching the Hero atom.
function Eyebrow({ children, dark = false, align = "center" }) {
  return (
    <div style={{
      display: "inline-flex", alignItems: "center", gap: 10,
      padding: "7px 18px", borderRadius: 999,
      background: dark
        ? "rgba(255,35,140,0.14)"
        : "linear-gradient(90deg, rgba(255,35,140,0) 0%, rgba(255,35,140,0.12) 50%, rgba(255,35,140,0) 100%)",
      alignSelf: align === "start" ? "flex-start" : "center",
    }}>
      <span style={{ width: 7, height: 7, borderRadius: 999, background: "var(--brand-600)" }} />
      <span style={{
        font: "500 14px/20px var(--font-sans)", letterSpacing: "0.06em",
        textTransform: "uppercase", color: dark ? "rgba(255,255,255,0.92)" : "var(--text-secondary)",
      }}>{children}</span>
    </div>
  );
}

Object.assign(window, { IconSend, IconMegaphone, IconRepeat, IconScale, IconHash, IconClock, PROBLEMS, PROBLEMS_RICH, COPY, Eyebrow });