/* ABM Section 04/05 - FEEDBACK · ORB variants (G1, G2, G3).
   The orb = the living, self-improving database. Minimal items: feedback from
   sales reps (calls, notes, closed-won) flows in; accuracy climbs.
   Babel script. Reads window.OrbCanvas, window.Icon. Exports FO1, FO2, FO3. */
const { useState, useEffect } = React;

function FOReplay({ onClick }) {
  return (
    <button className="fo-replay" onClick={onClick}>
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8"><path d="M20 7a9 9 0 1 0 1 7" /><path d="M21 3v5h-5" /></svg>
      Replay
    </button>
  );
}
function useCountO(target, dur, key, start) {
  const s0 = start || 0;
  const [v, setV] = useState(s0);
  useEffect(() => {
    setV(s0); const steps = 30; let i = 0;
    const id = setInterval(() => {
      i += 1; const p = i / steps; const e = 1 - Math.pow(1 - p, 3);
      setV(Math.round(s0 + (target - s0) * e));
      if (i >= steps) clearInterval(id);
    }, dur / steps);
    return () => clearInterval(id);
  }, [key]);
  return v;
}
const REP_INPUTS = [
  { nm: "Call recordings", nn: "Gong · Chorus", ic: "signal" },
  { nm: "Rep notes & calls", nn: "AE · SDR activity", ic: "page" },
  { nm: "Closed won / lost", nn: "CRM outcomes", ic: "check" },
];

/* ============================================================
   FO1 - THE DATABASE, ALIVE  (orb core + rep feedback flowing in)
   ============================================================ */
function FO1() {
  const [key, setKey] = useState(0);
  const acc = useCountO(94, 1600, key, 68);
  const ORB = 600;
  // chip positions (% of stage) and their wire endpoints
  const chips = [
    { ...REP_INPUTS[0], x: 12, y: 30 },
    { ...REP_INPUTS[1], x: 7, y: 62 },
    { ...REP_INPUTS[2], x: 33, y: 88 },
  ];
  return (
    <div className="fo fo1" key={key}>
      <div className="fo1-text">
        <div className="fo-kick"><span className="bar" /><span className="num">04 / 04</span><span className="tag">THE FEEDBACK LOOP</span></div>
        <h2 className="fo1-h">A database that gets <span className="cy">sharper</span> every day</h2>
        <p className="fo1-lede">Every call your reps record, every note they log, every deal they close flows back and re-scores the system. It’s wired into the GTM you already run - and it never stops learning.</p>
        <div className="fo-stat">
          <div className="big">{acc}<span className="pct">%</span></div>
          <div className="lbl">ICP-fit accuracy</div>
          <div className="up"><span>▲</span> +26 pts since cold start</div>
        </div>
      </div>

      <div className="fo1-stage">
        <div className="fo-orbwrap" style={{ width: ORB, height: ORB }}>
          <svg className="fo-wires" viewBox="0 0 100 100" preserveAspectRatio="none">
            {chips.map((c, i) => (
              <g key={i}>
                <line className="fo-wire" x1={c.x} y1={c.y} x2="50" y2="50" />
                <line className="fo-flow" x1={c.x} y1={c.y} x2="50" y2="50" style={{ animationDelay: i * 0.3 + "s" }} />
              </g>
            ))}
          </svg>
          <OrbCanvas className="fo-orb" size={ORB} spin={0.05} />
          <div className="fo-core"><div className="ring"><span className="lbl">The database</span><span className="t">Re-scored</span><span className="s">nightly</span></div></div>
          {chips.map((c, i) => (
            <div key={i} className="fo-in" style={{ left: c.x + "%", top: c.y + "%" }}>
              <span className="ic"><Icon name={c.ic} size={16} /></span>
              <div><div className="nm">{c.nm}</div><div className="nn">{c.nn}</div></div>
            </div>
          ))}
        </div>
      </div>
      <FOReplay onClick={() => setKey((k) => k + 1)} />
    </div>
  );
}

/* ============================================================
   FO2 - FEEDBACK ORB, HERO  (orb dominant, minimal copy)
   ============================================================ */
function FO2() {
  const [key, setKey] = useState(0);
  const acc = useCountO(94, 1700, key, 68);
  const ORB = 660;
  return (
    <div className="fo fo2" key={key}>
      <div className="fo2-top">
        <div className="fo-kick"><span className="bar" /><span className="num">04 / 04</span><span className="tag">THE FEEDBACK LOOP</span></div>
      </div>

      <div className="fo2-stage">
        <div className="fo-orbwrap" style={{ width: ORB, height: ORB }}>
          <OrbCanvas className="fo-orb" size={ORB} spin={0.045} />
        </div>
        <div className="fo2-overlay">
          <div style={{ position: "absolute", width: 460, height: 300, left: "50%", top: "50%", transform: "translate(-50%,-50%)", background: "radial-gradient(ellipse at center, rgba(4,8,13,0.92) 30%, rgba(4,8,13,0.4) 58%, transparent 75%)", zIndex: -1 }} />
          <h2 className="fo2-h">Every rep action makes<br />the system <span className="cy">smarter</span>.</h2>
          <p className="fo2-cap">Calls, notes and closed deals from your sales reps flow back and re-score the database - continuously.</p>
        </div>
      </div>

      <div className="fo2-foot">
        <div className="fo-stat" style={{ alignItems: "center", textAlign: "center" }}>
          <div className="big">{acc}<span className="pct">%</span></div>
          <div className="lbl">ICP-fit accuracy&nbsp;&nbsp;▲ +26 pts since cold start</div>
        </div>
      </div>
      <FOReplay onClick={() => setKey((k) => k + 1)} />
    </div>
  );
}

/* ============================================================
   FO3 - INPUTS → CORE → LIFT  (3 rep inputs, orb, outcome)
   ============================================================ */
function FO3() {
  const [key, setKey] = useState(0);
  const acc = useCountO(94, 1600, key, 68);
  const ORB = 440;
  return (
    <div className="fo fo3" key={key}>
      <div className="fo3-col">
        <div className="hd"><span className="bar" /> Feedback from reps</div>
        <div className="fo3-feed">
          {REP_INPUTS.map((r) => (
            <div key={r.nm} className="fo3-item">
              <span className="ic"><Icon name={r.ic} size={17} /></span>
              <div><div className="nm">{r.nm}</div><div className="nn">{r.nn}</div></div>
            </div>
          ))}
        </div>
      </div>

      <div className="fo3-stage">
        <svg className="fo-wires" viewBox="0 0 100 100" preserveAspectRatio="none" style={{ zIndex: 2 }}>
          <line className="fo-flow" x1="-2" y1="50" x2="34" y2="50" />
          <line className="fo-flow" x1="66" y1="50" x2="102" y2="50" style={{ animationDelay: "0.4s" }} />
        </svg>
        <div className="fo-orbwrap" style={{ width: ORB, height: ORB }}>
          <OrbCanvas className="fo-orb" size={ORB} spin={0.06} />
          <div className="fo-core"><div className="ring" style={{ width: 116, height: 116 }}><span className="lbl">Database</span><span className="t">Self-<br />improving</span></div></div>
        </div>
      </div>

      <div className="fo3-right">
        <div className="hd" style={{ fontFamily: "var(--ad-mono)", fontSize: 10.5, letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--ad-faint)", marginBottom: 14, display: "flex", alignItems: "center", gap: 9 }}><span style={{ width: 18, height: 1, background: "var(--c-cyan)" }} /> Sharper every cycle</div>
        <div className="fo-stat">
          <div className="big">{acc}<span className="pct">%</span></div>
          <div className="lbl">ICP-fit accuracy</div>
          <div className="up"><span>▲</span> +26 pts since cold start</div>
        </div>
        <div className="fo3-out">
          <div className="fo3-outchip"><span className="pt" style={{ background: "var(--c-cyan)" }} />Sharper targeting</div>
          <div className="fo3-outchip"><span className="pt" style={{ background: "var(--c-grn)" }} />Better routing &amp; talk tracks</div>
        </div>
      </div>
      <FOReplay onClick={() => setKey((k) => k + 1)} />
    </div>
  );
}

Object.assign(window, { FO1, FO2, FO3 });

/* ============================================================
   FO4 - APERTURE HERO  (G2 layout/copy, chord-iris instead of orb)
   ============================================================ */
function FO4() {
  const [key, setKey] = useState(0);
  const acc = useCountO(94, 1700, key, 68);
  const AP = 760;
  return (
    <div className="fo fo2 fo4" key={key}>
      <div className="fo2-top">
        <div className="fo-kick"><span className="bar" /><span className="num">04 / 04</span><span className="tag">THE FEEDBACK LOOP</span></div>
      </div>

      <div className="fo2-stage">
        <div className="fo-aperwrap" style={{ width: AP, height: AP }}>
          <ApertureCanvas className="fo-orb" size={AP} />
        </div>
        <div className="fo2-overlay" style={{ width: 520 }}>
          <div style={{ position: "absolute", width: 520, height: 320, left: "50%", top: "50%", transform: "translate(-50%,-50%)", background: "radial-gradient(ellipse at center, rgba(4,8,13,0.96) 34%, rgba(4,8,13,0.5) 60%, transparent 76%)", zIndex: -1 }} />
          <h2 className="fo2-h">Every rep action makes<br />the system <span className="cy">smarter</span>.</h2>
          <p className="fo2-cap">Calls, notes and closed deals from your sales reps flow back and re-score the database - continuously.</p>
        </div>
      </div>

      <div className="fo2-foot">
        <div className="fo-stat" style={{ alignItems: "center", textAlign: "center" }}>
          <div className="big">{acc}<span className="pct">%</span></div>
          <div className="lbl">ICP-fit accuracy&nbsp;&nbsp;▲ +26 pts since cold start</div>
        </div>
      </div>
      <FOReplay onClick={() => setKey((k) => k + 1)} />
    </div>
  );
}

Object.assign(window, { FO4 });

/* shared: the data points the system reads ("stars") */
const STAR_DATA = [
  "Call recordings", "Rep notes", "Closed won / lost",
  "Email replies", "Meetings booked", "Objections logged",
];
const StarGlyph = ({ size = 8 }) => (
  <span className="fo-circ" style={{ width: size, height: size }} />
);

/* ============================================================
   FO5 - APERTURE · CONSTELLATION  (alt 1: organic twinkling stars)
   ============================================================ */
function FO5() {
  const AP = 760;
  const C = AP / 2, rim = C * 0.97; // 368.6
  // anchor each marker to the CIRCLE (radius beyond rim) so the glyph always
  // clears the spiral regardless of viewport width. Organic angles + radii.
  const stars = [
    { label: STAR_DATA[0], deg: 232, r: 424 }, // Call recordings (upper-left)
    { label: STAR_DATA[1], deg: -26, r: 408 }, // Rep notes (upper-right, narrow → outer)
    { label: STAR_DATA[2], deg: 56, r: 430 },  // Closed won / lost (lower-right, wide → steeper)
    { label: STAR_DATA[4], deg: -54, r: 446 }, // Meetings booked (upper-right, wide → steeper)
    { label: STAR_DATA[3], deg: 146, r: 406 }, // Email replies (lower-left)
    { label: STAR_DATA[5], deg: 126, r: 430 }, // Objections logged (lower-left, wide → steeper)
  ].map((s) => {
    const a = s.deg * Math.PI / 180, co = Math.cos(a), si = Math.sin(a);
    return { ...s, x: C + co * s.r, y: C + si * s.r, right: co >= 0 };
  });
  const dust = [{ deg: -68, r: 498 }, { deg: 110, r: 524 }, { deg: 165, r: 470 }, { deg: 300, r: 540 }]
    .map((d) => { const a = d.deg * Math.PI / 180; return { x: C + Math.cos(a) * d.r, y: C + Math.sin(a) * d.r }; });
  return (
    <div className="fo fo2 fo4 fo5">
      <div className="fo2-top">
        <div className="fo-kick"><span className="bar" /><span className="num">04 / 04</span><span className="tag">THE FEEDBACK LOOP</span></div>
      </div>

      <div className="fo2-stage">
        <div className="fo-aperwrap" style={{ width: AP, height: AP }}>
          <ApertureCanvas className="fo-orb" size={AP} />
          {dust.map((d, i) => (
            <span key={"d" + i} className="fo-dust" style={{ left: d.x, top: d.y, animationDelay: (i * 0.9) + "s" }} />
          ))}
          {stars.map((s, i) => (
            <div key={i} className={"fo-star " + (s.right ? "r" : "l")} style={{ left: s.x, top: s.y, animationDelay: (i * 0.7) + "s" }}>
              <StarGlyph />
              <span className="fo-starlabel">{s.label}</span>
            </div>
          ))}
        </div>
        <div className="fo2-overlay" style={{ width: 520 }}>
          <div className="fo-textbg" />
          <h2 className="fo2-h">Every rep action makes<br />the system <span className="cy">smarter</span></h2>
          <p className="fo2-cap">Calls, notes and closed deals flow back from your reps and re-score the database. Continuously, with nobody exporting a CSV.</p>
        </div>
      </div>
    </div>
  );
}

/* ============================================================
   FO6 - APERTURE · ANNOTATED RING  (alt 2: structured callouts, signal pulled inward)
   ============================================================ */
function FO6() {
  const AP = 760;
  const C = AP / 2, rim = C * 0.97, rDot = rim + 6, rEnd = rim + 44;
  const angles = [-58, -8, 42, 128, 178, 228];
  const labels = [STAR_DATA[0], STAR_DATA[1], STAR_DATA[2], STAR_DATA[4], STAR_DATA[3], STAR_DATA[5]];
  const pts = angles.map((deg, i) => {
    const a = deg * Math.PI / 180;
    const co = Math.cos(a), si = Math.sin(a);
    return {
      label: labels[i], deg,
      dot: { x: C + co * rDot, y: C + si * rDot },
      end: { x: C + co * rEnd, y: C + si * rEnd },
      right: co >= -0.05,
    };
  });
  return (
    <div className="fo fo2 fo4 fo6">
      <div className="fo2-top">
        <div className="fo-kick"><span className="bar" /><span className="num">04 / 04</span><span className="tag">THE FEEDBACK LOOP</span></div>
      </div>

      <div className="fo2-stage">
        <div className="fo-aperwrap" style={{ width: AP, height: AP }}>
          <ApertureCanvas className="fo-orb" size={AP} />
          <svg className="fo-callsvg" viewBox={"0 0 " + AP + " " + AP} width={AP} height={AP}>
            {pts.map((p, i) => (
              <g key={i}>
                <line className="fo-leader" x1={p.end.x} y1={p.end.y} x2={p.dot.x} y2={p.dot.y} />
                <line className="fo-leadflow" x1={p.end.x} y1={p.end.y} x2={p.dot.x} y2={p.dot.y} style={{ animationDelay: (i * 0.25) + "s" }} />
                <circle className="fo-calldot" cx={p.dot.x} cy={p.dot.y} r="2.4" />
              </g>
            ))}
          </svg>
          {pts.map((p, i) => (
            <div key={i} className={"fo-call " + (p.right ? "r" : "l")} style={{ left: (p.end.x / AP * 100) + "%", top: (p.end.y / AP * 100) + "%" }}>
              <StarGlyph size={9} />
              <span className="fo-starlabel">{p.label}</span>
            </div>
          ))}
        </div>
        <div className="fo2-overlay" style={{ width: 480 }}>
          <div className="fo-textbg" />
          <h2 className="fo2-h">Every rep action makes<br />the system <span className="cy">smarter</span>.</h2>
          <p className="fo2-cap">Calls, notes and closed deals from your sales reps flow back and re-score the database - continuously.</p>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { FO5, FO6 });