// Client-only sections: Outcomes, Perspectives, Examples, Indicators.
// Each consumes data from data.jsx; rendered only when audience === "client"
// (gated by SECTIONS registry in App.jsx, so no internal audience check needed).

function OutcomesSection() {
  return (
    <section className="section section-light outcomes-section">
      <Reveal>
        <div className="section-label">What gets better in practice</div>
      </Reveal>
      <Reveal delay={80}>
        <h2 className="section-title">
          Six things that change <em>when this lands.</em>
        </h2>
      </Reveal>
      <Reveal delay={140}>
        <p className="section-body">
          Not abstract transformation. Concrete shifts in how delivery feels, for the
          team doing the work and for the people waiting on the output.
        </p>
      </Reveal>

      <div className="outcomes">
        {CLIENT_OUTCOMES.map((o, i) => (
          <Reveal key={o.num} delay={i * 70}>
            <article className="outcome-card">
              <div className="outcome-card-num">{o.num}</div>
              <h3 className="outcome-card-title">{o.title}</h3>
              <p className="outcome-card-body" dangerouslySetInnerHTML={{ __html: o.body }} />
            </article>
          </Reveal>
        ))}
      </div>
    </section>
  );
}

function PerspectivesSection() {
  return (
    <section className="section section-lavender perspectives-section">
      <Reveal>
        <div className="section-label">Two perspectives</div>
      </Reveal>
      <Reveal delay={80}>
        <h2 className="section-title">
          What the client gets. <em>What the team gets.</em>
        </h2>
      </Reveal>
      <Reveal delay={140}>
        <p className="section-body">
          The same workflow improvement looks different from each side. Both views
          have to land. Otherwise the change doesn't stick.
        </p>
      </Reveal>

      <div className="perspectives">
        <div className="perspectives-col">
          <div className="perspectives-head">What the client gets</div>
          {CLIENT_PERSPECTIVES.client.map((row, i) => (
            <Reveal key={i} delay={i * 60}>
              <div className="perspectives-row" dangerouslySetInnerHTML={{ __html: row }} />
            </Reveal>
          ))}
        </div>
        <div className="perspectives-col">
          <div className="perspectives-head">What the team gets</div>
          {CLIENT_PERSPECTIVES.team.map((row, i) => (
            <Reveal key={i} delay={i * 60}>
              <div className="perspectives-row" dangerouslySetInnerHTML={{ __html: row }} />
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

function ExamplesSection() {
  return (
    <section className="section section-light examples-section">
      <Reveal>
        <div className="section-label">AI initiatives, by delivery stage</div>
      </Reveal>
      <Reveal delay={80}>
        <h2 className="section-title">
          What AI can do, <em>and where it fits.</em>
        </h2>
      </Reveal>
      <Reveal delay={140}>
        <p className="section-body">
          Recognisable AI improvements, grouped by the delivery stage where they apply.
          You wouldn't run all of these. Each one earns its place only when it matches
          the stage where your team is currently slowing down.
        </p>
      </Reveal>

      <div className="examples-stages">
        {CLIENT_EXAMPLES.map((group, gi) => (
          <Reveal key={group.stage} delay={gi * 80}>
            <div className="examples-stage-row">
              <div className="examples-stage-head">
                <div className="examples-stage-name">{group.stage}</div>
                {group.note && <div className="examples-stage-note">{group.note}</div>}
              </div>
              <div className="examples-stage-items">
                {group.items.map((item) => (
                  <article key={item.title} className="example-workflow-card">
                    <h3 className="example-workflow-title">{item.title}</h3>
                    <p className="example-workflow-body" dangerouslySetInnerHTML={{ __html: item.body }} />
                  </article>
                ))}
              </div>
            </div>
          </Reveal>
        ))}
      </div>
    </section>
  );
}

function SafetySection() {
  return (
    <section className="section section-cream safety-section">
      <Reveal>
        <div className="section-label">How this stays safe</div>
      </Reveal>
      <Reveal delay={80}>
        <h2 className="section-title">
          AI moves fast. <em>Accountability stays human.</em>
        </h2>
      </Reveal>
      <Reveal delay={140}>
        <p className="section-body">
          Senior decision-makers worry, rightly, about AI making mistakes nobody catches.
          The answer here is structural, not aspirational.
        </p>
      </Reveal>

      <div className="outcomes safety">
        {CLIENT_SAFETY_PRINCIPLES.map((p, i) => (
          <Reveal key={p.title} delay={i * 70}>
            <article className="outcome-card safety-card">
              <h3 className="outcome-card-title">{p.title}</h3>
              <p className="outcome-card-body" dangerouslySetInnerHTML={{ __html: p.body }} />
            </article>
          </Reveal>
        ))}
      </div>
    </section>
  );
}

function IndicatorsSection() {
  return (
    <section className="section section-cream indicators-section">
      <Reveal>
        <div className="section-label">How we'll know it's working</div>
      </Reveal>
      <Reveal delay={80}>
        <h2 className="section-title">
          Structured experimentation, <em>with measurable learning.</em>
        </h2>
      </Reveal>
      <Reveal delay={140}>
        <p className="section-body">
          We don't promise numbers ahead of measurement. We agree which signals to
          watch and review them on a quarterly rhythm.
        </p>
      </Reveal>

      <div className="indicators">
        {CLIENT_INDICATORS.map((ind, i) => (
          <Reveal key={ind.label} delay={i * 70}>
            <div className="indicator-row">
              <div className="indicator-label">{ind.label}</div>
              <div className="indicator-body" dangerouslySetInnerHTML={{ __html: ind.body }} />
            </div>
          </Reveal>
        ))}
      </div>
    </section>
  );
}

Object.assign(window, {
  OutcomesSection,
  PerspectivesSection,
  ExamplesSection,
  SafetySection,
  IndicatorsSection,
});