// iw-beats.jsx — Two interactive beats specific to The Influenceable Web:
//   influencemap — central AI-answer node, four surface nodes sized by
//                  citation share; tap one to read its share + ownership.
//   distribute   — one asset fans out into many earned placements.
// Loaded before beats.jsx so the type switch can route to them.

const { useState: useIW } = React;

const IW_RED = "#FF2417";
const IW_INK = "#1F201B";
const IW_GRN = "#7AF58C";
const IW_MONO = "IBM Plex Mono";

/* ------------------------------------------------------------ InfluenceMap */
const IM_SURFACES = [
  {
    id: "editorial", label: "Independent articles", node: "Editorial",
    share: 54, own: "Earn it, rarely own it",
    note: "Reviews, guides, and explainers other people write. The largest slice of the answer.",
    pos: { x: 120, y: 92 },
  },
  {
    id: "community", label: "Social & community", node: "Community",
    share: 25, own: "Influence, no control",
    note: "Reddit threads, forums, social posts \u2014 where buyers compare notes in the open.",
    pos: { x: 322, y: 122 },
  },
  {
    id: "other", label: "Other sources", node: "Other",
    share: 19, own: "Mixed",
    note: "Marketplaces, directories, aggregators, and the long tail of the open web.",
    pos: { x: 322, y: 268 },
  },
  {
    id: "site", label: "Your own website", node: "Your website",
    share: 2, own: "You own it fully",
    note: "The one surface you control end to end \u2014 and the smallest piece of the mix.",
    pos: { x: 118, y: 290 },
  },
];
const IM_CX = 222, IM_CY = 196;

function InfluenceMapBeat({ beat }) {
  const [sel, setSel] = useIW("editorial");
  const cur = IM_SURFACES.find((s) => s.id === sel);
  const rOf = (share) => 20 + share * 0.62; // editorial ~53, site ~21
  return (
    <div className="beat beat-influencemap">
      <div className="beat-lead">
        <div className="beat-eyebrow">{beat.eyebrow}</div>
        <h2 className="beat-title" style={{ fontSize: 28 }}>{beat.title}</h2>
        <div className="im-readout">
          <div className="im-share" key={cur.id}>{cur.share}<span>%</span></div>
          <div className="im-meta">
            <div className="im-name">{cur.label}</div>
            <div className="im-own"><span className="im-own-dot" data-own={cur.id} /> {cur.own}</div>
          </div>
        </div>
        <p className="im-note">{cur.note}</p>
        {beat.source ? <div className="beat-source">{beat.source}</div> : null}
      </div>
      <div className="beat-aside">
        <svg className="im-svg" viewBox="0 0 440 360" fontFamily={IW_MONO}>
          {/* connectors */}
          {IM_SURFACES.map((s) => {
            const on = s.id === sel;
            return (
              <line key={"l" + s.id} x1={IM_CX} y1={IM_CY} x2={s.pos.x} y2={s.pos.y}
                stroke={on ? IW_RED : "currentColor"} strokeWidth={on ? 2.4 : 1}
                opacity={on ? 0.95 : 0.28} strokeDasharray={on ? "none" : "3 4"}
                style={{ transition: "all .25s" }} />
            );
          })}
          {/* center node */}
          <circle cx={IM_CX} cy={IM_CY} r="40" fill="none" stroke="currentColor" strokeWidth="1.4" opacity="0.5" />
          <circle cx={IM_CX} cy={IM_CY} r="30" fill={IW_INK} />
          <text x={IM_CX} y={IM_CY - 3} textAnchor="middle" fill="#F4F5EE" fontSize="11" fontWeight="700">AI</text>
          <text x={IM_CX} y={IM_CY + 11} textAnchor="middle" fill="#F4F5EE" fontSize="10">answer</text>
          {/* surface nodes */}
          {IM_SURFACES.map((s) => {
            const on = s.id === sel;
            const r = rOf(s.share);
            return (
              <g key={s.id} onClick={() => setSel(s.id)} style={{ cursor: "pointer" }}>
                <circle cx={s.pos.x} cy={s.pos.y} r={r}
                  fill={on ? IW_RED : "var(--story-bg)"}
                  stroke={on ? IW_RED : "currentColor"} strokeWidth={on ? 2 : 1.4}
                  opacity={on ? 1 : 0.9} style={{ transition: "all .25s" }} />
                <text x={s.pos.x} y={s.pos.y - 2} textAnchor="middle"
                  fill={on ? "#F4F5EE" : "var(--story-fg)"} fontSize="11" fontWeight="700"
                  style={{ pointerEvents: "none" }}>{s.node}</text>
                <text x={s.pos.x} y={s.pos.y + 13} textAnchor="middle"
                  fill={on ? "#F4F5EE" : "var(--story-muted)"} fontSize="12" fontWeight="700"
                  style={{ pointerEvents: "none" }}>{s.share}%</text>
              </g>
            );
          })}
        </svg>
        <div className="im-chips">
          {IM_SURFACES.map((s) => (
            <button key={s.id} className={"explore-chip " + (s.id === sel ? "active" : "")} onClick={() => setSel(s.id)}>{s.node}</button>
          ))}
        </div>
      </div>
    </div>
  );
}

/* ---------------------------------------------------------- DistributeBeat */
const DIST_ASSET = { kind: "Original benchmark study", sub: "first-party data \u00b7 real testing" };
const DIST_PLACEMENTS = [
  "Reddit thread", "Journalist pitch", "G2 roundup", "Podcast mention",
  "Newsletter feature", "YouTube explainer", "Community AMA", "Industry roundup",
];

function DistributeBeat({ beat }) {
  const [on, setOn] = useIW(false);
  return (
    <div className="beat beat-distribute">
      <div className="beat-lead">
        <div className="beat-eyebrow">{beat.eyebrow}</div>
        <h2 className="beat-title" style={{ fontSize: 30 }}>{beat.title}</h2>
        <div className="dist-readout">
          <div className="dist-eq">
            <span className="dist-n">1</span>
            <span className="dist-l">asset</span>
          </div>
          <span className="dist-arrow">{"\u2192"}</span>
          <div className="dist-eq">
            <span className="dist-n brand">{on ? DIST_PLACEMENTS.length : 0}</span>
            <span className="dist-l">placements</span>
          </div>
        </div>
        <button className="walker-next dist-btn" onClick={() => setOn((v) => !v)}>
          {on ? "Reset" : "Distribute"} <span>{on ? "\u21ba" : "\u2192"}</span>
        </button>
        {beat.source ? <div className="beat-source">{beat.source}</div> : null}
      </div>
      <div className="beat-aside">
        <div className="dist-stage">
          <div className={"dist-asset " + (on ? "spread" : "")}>
            <div className="dist-asset-kind">{DIST_ASSET.kind}</div>
            <div className="dist-asset-sub">{DIST_ASSET.sub}</div>
          </div>
          <div className="dist-chips">
            {DIST_PLACEMENTS.map((p, i) => (
              <span key={p} className={"dist-chip " + (on ? "in" : "")}
                style={{ transitionDelay: (on ? i * 70 : 0) + "ms" }}>{p}</span>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { InfluenceMapBeat, DistributeBeat });