// AUDIENCES — who we actually work with, and what we do for each.
//
// Replaces the old "Live Ops" telemetry strip, which animated invented call
// counts and deflection rates. We don't publish numbers we can't stand behind;
// this says plainly who we serve and what they get.

const AUDIENCES = [
  {
    id: "isv",
    tag: "01",
    label: "AppExchange ISVs",
    line: "You have a product. You need engineering that scales with the pipeline, not with headcount.",
    points: [
      "Feature work inside your managed package, on your release train",
      "Implementation services for your customers, branded as yours",
      "AI and Agentforce features shipped as part of the product, not beside it",
      "Security review prep, packaging and upgrade paths",
      "Tier-2 and Tier-3 escalations inside your SLA",
    ],
    cta: "Scope ISV work",
    seed: "audience:isv",
  },
  {
    id: "consultancy",
    tag: "02",
    label: "Consultancies & SIs",
    line: "You have the clients and the relationships. We are the delivery capacity behind them.",
    points: [
      "A white-label pod that joins your standups and works in your repo",
      "Overflow delivery on projects you've sold but can't staff",
      "Pre-sales support — architecture, demo, estimate, statement of work",
      "Agentforce and AI depth for bids you couldn't take before",
      "A managed admin desk so you can offer managed services",
    ],
    cta: "Scope partner capacity",
    seed: "audience:consultancy",
  },
  {
    id: "direct",
    tag: "03",
    label: "Direct clients",
    line: "You run on Salesforce and need something built, fixed or automated. No layers.",
    points: [
      "Implementation, configuration and the clean-up nobody enjoys",
      "Apex, LWC, Flow, integrations, migrations, reporting",
      "Agentforce set up against your real process, with evals",
      "Work outside the org too — apps, APIs, pipelines, automation",
      "One fixed price per item, and we work until it's accepted",
    ],
    cta: "Scope a project",
    seed: "audience:direct",
  },
];

function Audiences() {
  return (
    <section style={{
      background: "var(--ink)",
      color: "var(--bone)",
      padding: "clamp(48px, 6vw, 88px) 0",
      borderTop: "1px solid var(--ink)",
      borderBottom: "1px solid var(--ink)",
    }} id="audiences">
      <div className="shell">

        <div style={{
          display: "flex",
          justifyContent: "space-between",
          alignItems: "flex-end",
          flexWrap: "wrap",
          gap: 16,
          paddingBottom: 32,
          borderBottom: "1px solid color-mix(in oklab, var(--bone) 18%, transparent)",
          marginBottom: 40,
        }}>
          <div>
            <div className="mono" style={{ fontSize: 12, letterSpacing: "0.16em", textTransform: "uppercase", color: "color-mix(in oklab, var(--bone) 55%, transparent)", marginBottom: 18 }}>
              § 01 · WHO WE WORK WITH
            </div>
            <h2 className="display-l serif" style={{ margin: 0, color: "var(--bone)", maxWidth: "22ch", textWrap: "balance" }}>
              Mostly we work <span className="italic" style={{ color: "var(--yellow)" }}>behind</span> someone else's logo.
            </h2>
          </div>
          <p className="body" style={{ margin: 0, maxWidth: "38ch", color: "color-mix(in oklab, var(--bone) 70%, transparent)" }}>
            Partners keep the client, the brand and the margin. We keep the engineering
            honest and the price fixed. Direct work is welcome too — same terms.
          </p>
        </div>

        <div style={{
          display: "grid",
          gridTemplateColumns: "repeat(3, 1fr)",
          gap: 1,
          background: "color-mix(in oklab, var(--bone) 18%, transparent)",
          border: "1px solid color-mix(in oklab, var(--bone) 22%, transparent)",
        }} className="aud-grid">
          {AUDIENCES.map(a => (
            <article key={a.id} style={{
              background: "var(--ink)",
              padding: "28px 26px",
              display: "flex",
              flexDirection: "column",
              gap: 16,
              minHeight: 420,
            }}>
              <header>
                <span className="mono" style={{ fontSize: 11, letterSpacing: "0.12em", color: "var(--persimmon)" }}>{a.tag}</span>
                <h3 className="serif" style={{ margin: "10px 0 0 0", fontSize: "clamp(24px, 2.5vw, 32px)", lineHeight: 1.05, letterSpacing: "-0.025em", color: "var(--bone)" }}>
                  {a.label}
                </h3>
                <p className="body-sm" style={{ margin: "10px 0 0 0", color: "color-mix(in oklab, var(--bone) 68%, transparent)" }}>
                  {a.line}
                </p>
              </header>

              <ul style={{ margin: 0, padding: 0, listStyle: "none", display: "grid", gap: 10, flex: 1, paddingTop: 8, borderTop: "1px solid color-mix(in oklab, var(--bone) 16%, transparent)" }}>
                {a.points.map((p, i) => (
                  <li key={i} style={{ display: "flex", gap: 10, alignItems: "flex-start", fontSize: 13, lineHeight: 1.45 }}>
                    <span style={{ flexShrink: 0, width: 5, height: 5, background: "var(--yellow)", marginTop: 7 }}></span>
                    <span style={{ color: "color-mix(in oklab, var(--bone) 88%, transparent)" }}>{p}</span>
                  </li>
                ))}
              </ul>

              <button
                type="button"
                data-iris-open
                data-iris-seed={a.seed}
                className="btn btn-ghost"
                style={{ borderColor: "color-mix(in oklab, var(--bone) 35%, transparent)", color: "var(--bone)", justifyContent: "center" }}
              >
                {a.cta} <span className="arr">→</span>
              </button>
            </article>
          ))}
        </div>
      </div>

      <style>{`
        @media (max-width: 980px) {
          .aud-grid { grid-template-columns: 1fr !important; }
          .aud-grid > article { min-height: 0 !important; }
        }
      `}</style>
    </section>
  );
}

Object.assign(window, { Audiences, AUDIENCES });