// DORA capabilities + Adoption stages sections

const { useState: useState4, useEffect: useEffect4 } = React;

const OWNER_META = {
  client:   { label: "Yours",  cls: "dora-owner-client" },
  proshore: { label: "Ours",   cls: "dora-owner-proshore" },
  shared:   { label: "Shared", cls: "dora-owner-shared" },
};

function DoraSection() {
  const [activeId, setActiveId] = useState4(DORA_CAPABILITIES[0].id);
  const [tab, setTab] = useState4("dora");          // "dora" | "team"
  const { audience } = useAudience();
  const isClient = audience === "client";
  const active = DORA_CAPABILITIES.find((c) => c.id === activeId) || DORA_CAPABILITIES[0];

  function handleCapSwitch(id) {
    setActiveId(id);
    setTab("dora");
  }

  return (
    <section className="section section-light dora">
      <Reveal>
        <div className="section-label">
          {isClient ? "What needs to be in place" : "02. DORA's AI capability model, in practice"}
        </div>
      </Reveal>
      <Reveal delay={80}>
        <h2 className="section-title">
          {isClient ? (
            <>Foundations <em>we put in place, together.</em></>
          ) : (
            <>Seven capabilities that <em>make or break</em> AI adoption.</>
          )}
        </h2>
      </Reveal>
      <Reveal delay={140}>
        <p className="section-body">
          {isClient
            ? "AI rewards organisations with a few foundations in place. Some of these you bring: your AI stance, your data. Some we bring: version-control discipline, small batches, the platform. A couple we build together. Here's the split, capability by capability."
            : "Pick a capability. Switch between what DORA recommends and what your team actually does."}
        </p>
      </Reveal>

      {isClient && (
        <Reveal delay={180}>
          <div className="dora-legend">
            <span className="dora-owner-chip dora-owner-client">What you bring</span>
            <span className="dora-owner-chip dora-owner-proshore">What we bring</span>
            <span className="dora-owner-chip dora-owner-shared">Shared</span>
          </div>
        </Reveal>
      )}

      <div className="dora-layout">
        <nav className="dora-nav">
          {DORA_CAPABILITIES.map((c) => (
            <button
              key={c.id}
              className={`dora-nav-item ${activeId === c.id ? "active" : ""}`}
              onClick={() => handleCapSwitch(c.id)}
            >
              <span className="dora-num">{c.num}</span>
              <span className="dora-nav-name">{c.name}</span>
              {isClient && (
                <span className={`dora-owner-chip ${OWNER_META[c.owner].cls}`}>
                  {OWNER_META[c.owner].label}
                </span>
              )}
            </button>
          ))}
        </nav>

        <div className="dora-detail" key={active.id}>
          <div className="dora-detail-header">
            <div>
              <div className="dora-detail-eyebrow">
                Capability {active.num} of 07
                {isClient && (
                  <span className={`dora-owner-chip dora-owner-chip-inline ${OWNER_META[active.owner].cls}`}>
                    {OWNER_META[active.owner].label}
                  </span>
                )}
              </div>
              <h3 className="dora-detail-title">
                <em>{active.name}</em>
              </h3>
              <p className="dora-detail-summary" dangerouslySetInnerHTML={{ __html: pickCopy(active.summary, audience) }} />
            </div>
          </div>

          {/* Tabs + deep content: team mode only. Client sees summary + signals only. */}
          {!isClient && (
            <>
              <div className="dora-tabs">
                <button
                  className={`dora-tab ${tab === "dora" ? "active" : ""}`}
                  onClick={() => setTab("dora")}
                >
                  What DORA says
                </button>
                <button
                  className={`dora-tab ${tab === "team" ? "active" : ""}`}
                  onClick={() => setTab("team")}
                >
                  What the team does
                </button>
              </div>

              {tab === "dora" ? (
                <div className="dora-cards" key={`${active.id}-dora`}>
                  {active.doraSays.map((item, i) => (
                    <div
                      className="dora-card"
                      key={i}
                      style={{ animationDelay: `${i * 70}ms` }}
                    >
                      <span className="dora-card-num">{"0" + (i + 1)}</span>
                      <h4 className="dora-card-title">{item.title}</h4>
                      <p className="dora-card-desc" dangerouslySetInnerHTML={{ __html: item.desc }} />
                    </div>
                  ))}
                </div>
              ) : (
                <div className="dora-steps" key={`${active.id}-team`}>
                  {active.teamDoes.map((item, i) => (
                    <div
                      className="dora-step"
                      key={i}
                      style={{ animationDelay: `${i * 80}ms` }}
                    >
                      <div className="dora-step-indicator">
                        <span className="dora-step-num">{i + 1}</span>
                        {i < active.teamDoes.length - 1 && <div className="dora-step-line" />}
                      </div>
                      <div className="dora-step-content">
                        <h4 className="dora-step-title">{item.step}</h4>
                        <p className="dora-step-desc" dangerouslySetInnerHTML={{ __html: item.desc }} />
                      </div>
                    </div>
                  ))}
                </div>
              )}
            </>
          )}

          {/* Signals: shown to both audiences */}
          <div className="dora-signal">
            <div className="kv-label">{isClient ? "You'll know it's working when" : "Signal it's working"}</div>
            <ul className="dora-signal-list">
              {active.signals.map((s, i) => (
                <li key={i} style={{ animationDelay: `${i * 100}ms` }} dangerouslySetInnerHTML={{ __html: s }} />
              ))}
            </ul>
          </div>
        </div>
      </div>
    </section>
  );
}

function AdoptionStagesSection() {
  const [active, setActive] = useState4(0);
  const { audience } = useAudience();
  const isClient = audience === "client";
  const stage = ADOPTION_STAGES[active];

  return (
    <section className="section section-lavender adoption">
      <Reveal>
        <div className="section-label">
          {isClient ? "How AI adoption actually unfolds" : "03. How teams actually adopt AI"}
        </div>
      </Reveal>
      <Reveal delay={80}>
        <h2 className="section-title">
          {isClient ? (
            <>A journey, <em>not a six-month plan.</em></>
          ) : (
            <>Stop asking for ROI <em>before the intuition is there.</em></>
          )}
        </h2>
      </Reveal>
      <Reveal delay={140}>
        <p className="section-body">
          {isClient
            ? "What this looks like over time, from your side. Real AI adoption moves through four stages: exploration, experimentation, embedding, evolution. Each has different visibility, a different budget shape, and a different ask of you as a stakeholder. Each stage is timeboxed by the team, not fixed up front. Sprint counts shown are starting examples. After Evolve, the loop continues: Experiment, Embed, Evolve for the next bottleneck."
            : "Real AI adoption moves through stages: exploration, experimentation, embedding, evolution. Each stage has a different question, a different budget, and a different definition of success. Each stage is timeboxed by the team, not fixed up front. Sprint counts shown are starting examples. After Evolve, the loop continues: Experiment, Embed, Evolve for the next bottleneck."}
        </p>
      </Reveal>

      <div className="stages-track">
        {ADOPTION_STAGES.map((s, i) => (
          <button
            key={s.id}
            className={`stage-pill ${active === i ? "active" : ""}`}
            onClick={() => setActive(i)}
          >
            <div className="stage-pill-num">{s.num}</div>
            <div className="stage-pill-name">{s.name}</div>
            <div className="stage-pill-dur">{s.duration}</div>
          </button>
        ))}
      </div>

      <div className="stage-detail" key={active}>
        <div className="stage-detail-grid">
          <div className="stage-lede">
            <div className="stage-eyebrow">
              <span>Stage {stage.num}</span>
              <span className="dot-sep">·</span>
              <span>{stage.duration}</span>
            </div>
            <h3 className="stage-title">
              <em>{stage.name}.</em> {pickCopy(stage.intent, audience)}
            </h3>
            <p className="stage-body" dangerouslySetInnerHTML={{ __html: pickCopy(stage.body, audience) }} />
          </div>

          <aside className="stage-budget">
            <div className="kv-label">AI credit budget</div>
            <div className="budget-amount">{stage.budget}</div>
            <div className="budget-note">{stage.budgetNote}</div>
            <div className="budget-divider" />
            <div className="kv-label">Strengthens</div>
            <div className="budget-dora">
              {stage.dora.map((id) => {
                const cap = DORA_CAPABILITIES.find((c) => c.id === id);
                return cap ? (
                  <span key={id} className="dora-chip">
                    <span className="dora-chip-num">{cap.num}</span>
                    {cap.name}
                  </span>
                ) : null;
              })}
            </div>
          </aside>
        </div>

        {!isClient && (
          <div className="stage-cols">
            <div className="stage-col do">
              <div className="col-label">Do</div>
              <ul>
                {stage.doList.map((d, i) => (
                  <li key={i} dangerouslySetInnerHTML={{ __html: d }} />
                ))}
              </ul>
            </div>
            <div className="stage-col dont">
              <div className="col-label">Don't</div>
              <ul>
                {stage.dontList.map((d, i) => (
                  <li key={i} dangerouslySetInnerHTML={{ __html: d }} />
                ))}
              </ul>
            </div>
            <div className="stage-col exit">
              <div className="col-label">Exit when</div>
              <p dangerouslySetInnerHTML={{ __html: stage.exit }} />
            </div>
          </div>
        )}
      </div>

      <div className="budget-rationale">
        <div className="kv-label">Why credits, not seats</div>
        <p>
          {isClient
            ? "A flat tool licence caps exploration. A credit budget rewards use and makes waste visible. You can see when the team has stopped experimenting, or when one improvement is dominating spend. Set the budget high enough that the team doesn't self-censor the interesting experiments. "
            : "A flat tool licence caps exploration. A credit budget rewards use and makes waste visible. You can see when a developer has stopped experimenting, or when one intervention is dominating spend. Set the budget high enough that developers don't self-censor the interesting experiments. "}
          <em>Unused credits are a signal, not a saving.</em>
        </p>
      </div>
    </section>
  );
}

Object.assign(window, {
  DoraSection,
  AdoptionStagesSection,
});