/* EOMA landing v3 · Orbital with 3 annotated callout pins (§6)
   Refactored from previous hero-orbital — removes "QA" badge, swaps Actions to 5/11,
   English Today's Move title, adds 3 paper-balloon callouts with thin connector lines.
*/

const { useState: oUseState, useEffect: oUseEffect } = React;

function OrbitalCallouts() {
  const fx = window.ATLAS_FIXTURE;
  const [ref, inView] = window.useInView(0.18);
  const [forced, setForced] = oUseState(false);
  oUseEffect(() => {
    const t = setTimeout(() => setForced(true), 250);
    return () => clearTimeout(t);
  }, []);
  const isIn = inView || forced;

  const visPct = window.useCountUp(fx.visibility.overall, { duration: 1100, decimals: 1, trigger: isIn, delay: 400 });
  const socialNum = window.useCountUp(fx.social.signalCount, { duration: 900, trigger: isIn, delay: 600 });

  return (
    <section className="orbital-section" id="inside">
      <div className="orbital-head">
        <span className="eyebrow">
          <span className="dot dot-sky" />
          <span>Inside the product</span>
        </span>
        <h2 className="t-display-lg">Open EOMA on Monday morning.<br />Three orbits. One next move.</h2>
        <p className="t-body-lg" style={{ maxWidth: "56ch" }}>
          The dashboard you see when you log in: where you stand in AI search this week,
          what to ship next, and what just happened.
        </p>
      </div>

      <div className="orbital-wrap" ref={ref}>
        <div className={`orbital-frame ${isIn ? "is-in" : ""}`}>
          {/* Sidebar */}
          <aside className="orbital-sidebar">
            <div className="orbital-sidebar-brand">
              <window.Logomark size={22} />
              <span>eoma</span>
            </div>
            <SbItem icon="home" label="Dashboard" active />
            <SbItem icon="report" label="Reports" />
            <SbItem icon="chart" label="GA4 Analytics" />
            <SbItem icon="speaker" label="Social Mgmt" soon />
            <div className="orbital-sidebar-foot">
              <div className="plan"><span>Internal</span><span style={{ color: "var(--ink-muted)" }}>Unlimited</span></div>
            </div>
          </aside>

          {/* Main */}
          <main className="orbital-main">
            <div className="orbital-topbar">
              <span>Dashboard</span>
              <span style={{ color: "var(--ink-muted)", fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.04em" }}>
                {fx.brand.name}
              </span>
            </div>

            <div className="orbital-canvas">
              <h3 className="orbital-h1">
                {fx.brand.name}'s <em>visibility</em> across three orbits.
              </h3>
              <p className="orbital-sub">
                Click any node to dive in — Search, Social or Actions.
              </p>

              <div className="orbital-stage">
                <svg className="rings" viewBox="0 0 700 460" preserveAspectRatio="xMidYMid meet" aria-hidden="true">
                  <circle className="orbital-ring" cx="350" cy="230" r="110" />
                  <circle className="orbital-ring" cx="350" cy="230" r="160" />
                  <circle className="orbital-ring" cx="350" cy="230" r="210" />
                  <line className="orbital-connector" x1="350" y1="230" x2="195" y2="140" stroke="var(--eoma-coral)" />
                  <line className="orbital-connector" x1="350" y1="230" x2="505" y2="140" stroke="var(--eoma-indigo)" />
                  <line className="orbital-connector" x1="350" y1="230" x2="350" y2="410" stroke="var(--eoma-mint)" />
                </svg>

                <div className="orbital-center">
                  <window.Logomark size={36} />
                </div>

                <Planet cls="p1" top="14%" left="22%" icon="target" label="Search Visibility" value={visPct + "%"} />
                <Planet cls="p2" top="14%" left="78%" icon="share"  label="Social"            value={String(socialNum)} />
                <Planet cls="p3" top="82%" left="50%" icon="check"  label="Actions"           value={fx.actions.weekDone + "/" + fx.actions.weekTotal} />

                {/* Today's Move card */}
                <aside className="todays-move" aria-label="Today's move">
                  <div className="tm-kicker">
                    <span>Today's move</span>
                    <span style={{ color: "var(--ink-faint)" }}>1 of 5</span>
                  </div>
                  <div className="tm-tag">
                    <span className="pip" />
                    <span>{fx.todaysMove.tag}</span>
                    <span style={{ color: "var(--ink-faint)", marginLeft: "auto", letterSpacing: "0.08em" }}>{fx.todaysMove.duration}</span>
                  </div>
                  <div className="tm-title">{fx.todaysMove.title}</div>
                  <div className="tm-meta">
                    <span>Effort · <strong>{fx.todaysMove.effort}</strong></span>
                    <span>Impact · <strong>{fx.todaysMove.impact}</strong></span>
                  </div>
                  <div className="tm-ctas">
                    <span className="tm-btn primary">⚡ Run agent</span>
                    <span className="tm-btn ghost">Open</span>
                  </div>
                </aside>
              </div>
            </div>

            {/* Callout pins — positioned absolute over the canvas */}
            <span className="callout-pin p1" />
            <span className="callout-pin p2" />
            <span className="callout-pin p3" />

            <aside className="callout c1">
              Your <strong>visibility score</strong> across 3 orbits: search, social, weekly actions.
            </aside>
            <aside className="callout c2">
              <strong>Today's Move</strong> — the one job most worth doing this week. Click "Run agent" and we do it for you.
            </aside>
            <aside className="callout c3">
              <strong>Activity</strong> — what we did since you last logged in.
            </aside>
          </main>
        </div>

        {/* Mobile-stacked callout list (hidden on desktop via media query) */}
        <div className="callouts-stack" style={{ display: "none" }}>
          <p><strong>Visibility score</strong> — your AEO across 3 orbits.</p>
          <p><strong>Today's Move</strong> — the one action most worth shipping this week.</p>
          <p><strong>Activity</strong> — what we did since you last logged in.</p>
        </div>
      </div>
    </section>
  );
}

function SbItem({ icon, label, active, soon }) {
  return (
    <div className={`orbital-sidebar-item ${active ? "is-active" : ""}`}>
      <window.Icon name={icon} size={15} />
      <span>{label}</span>
      {soon ? <span className="orbital-sidebar-soon">Soon</span> : null}
    </div>
  );
}

function Planet({ cls, top, left, icon, label, value }) {
  return (
    <div className={`orbital-planet ${cls}`} style={{ top, left }}>
      <window.Icon name={icon} size={18} />
      <span className="lbl">{label}</span>
      <span className="val tabular">{value}</span>
    </div>
  );
}

Object.assign(window, { OrbitalCallouts });