// SolutionPage.jsx — shared template for all solution detail pages
// Drop in a data object via <SolutionPage data={SD} /> and you get a full page.

// Map URL slug → PageHeroArts registry key
const SOLUTION_ART_BY_SLUG = {
  "software-development": "code",
  "erp": "erp",
  "erp-sap": "erp-sap",
  "erp-oracle": "erp-oracle",
  "erp-microsoft": "erp-microsoft",
  "ecommerce": "ecommerce",
  "crm": "crm",
  "call-center": "call-center",
  "it-operations": "it-ops",
  "it-help-desk": "help-desk",
  "bpo": "bpo",
  "iot": "iot",
};

const getSolutionArtKey = (D) => {
  if (D.artKey) return D.artKey;
  const slug = (typeof window !== "undefined" ? window.location.pathname : "")
    .split("/").pop().replace(".html", "");
  return SOLUTION_ART_BY_SLUG[slug] || "code";
};

const SolutionPage = ({ data: D }) => (
  <PageShell active="Solutions">
    <PageHero
      chip={D.chip}
      breadcrumb={[
        { label: "Home", href: "index.html" },
        { label: "Solutions", href: "solutions.html" },
        ...(D.parent ? [{ label: D.parent.label, href: D.parent.href }] : []),
        { label: D.chip },
      ]}
      title={D.title}
      lede={D.lede}
      secondaryLabel="View delivery models →"
      secondaryHref="delivery.html"
      art={getSolutionArtKey(D)}
    />

    {D.specs && <SpecStrip items={D.specs} />}

    {/* What we deliver + How AI shows up */}
    <section className="container section">
      <div className="split-2-narrow">
        <div className="reveal">
          <div className="eyebrow"><span className="mark"/>WHAT WE DELIVER</div>
          <h2 style={{ marginTop: 14, marginBottom: 32 }}>{D.deliverHeadline || "Services we deliver."}</h2>
          <SpecList items={D.services} />
        </div>
        <div className="reveal" data-d="1">
          {D.aiFlow ? <AIFlow steps={D.aiFlow} /> : <div className="ai-flow"><p>AI not core to this service.</p></div>}
        </div>
      </div>
    </section>

    {/* Optional tab section (used for ERP) */}
    {D.tabs && (
      <section className="container section" style={{ paddingTop: 0 }}>
        <div className="section-header reveal">
          <div className="eyebrow"><span className="mark"/>{D.tabsKicker || "EXPLORE BY VENDOR"}</div>
          <h2>{D.tabsHeadline || "Pick the stack."}</h2>
        </div>
        <ErpTabs tabs={D.tabs} />
      </section>
    )}

    {/* Case study */}
    {D.caseStudy && (
      <section className="bleed cream">
        <div className="container bleed-inner">
          <div className="section-header reveal">
            <div className="eyebrow"><span className="mark"/>RECENT WORK</div>
            <h2>{D.caseStudyHeadline || "What it looks like in production."}</h2>
          </div>
          <CaseStudy {...D.caseStudy} />
        </div>
      </section>
    )}

    {/* Benefits / outcomes */}
    {D.outcomes && (
      <section className="container section">
        <div className="section-header reveal">
          <div className="eyebrow"><span className="mark"/>OUTCOMES</div>
          <h2>{D.outcomesHeadline || "What clients see in the first 90 days."}</h2>
        </div>
        <div className="grid-3">
          {D.outcomes.map((o, i) => (
            <div className="feature-card reveal" data-d={(i % 3) + 1} key={o.t}>
              <div style={{ fontFamily: "var(--font-display)", fontSize: 36, color: "var(--ink)", letterSpacing: "-0.5px", lineHeight: 1 }}>{o.num}</div>
              <h4 className="title-md" style={{ marginTop: 12 }}>{o.t}</h4>
              <p>{o.b}</p>
            </div>
          ))}
        </div>
      </section>
    )}

    {/* Related */}
    {D.related && <RelatedSolutions items={D.related} />}

    <InlineCTA
      title={D.ctaTitle || "Have a project waiting on the right team?"}
      body={D.ctaBody || "Get a senior LATAM team scoped, interviewed, and shipping in under two weeks."}
    />
  </PageShell>
);

// Tab block for ERP page (and any future multi-vendor solution)
const ErpTabs = ({ tabs }) => {
  const [active, setActive] = React.useState(tabs[0].key);
  const cur = tabs.find((t) => t.key === active) || tabs[0];
  return (
    <div className="reveal">
      <div className="erp-tabs">
        {tabs.map((t) => (
          <button key={t.key} className={t.key === active ? "active" : ""} onClick={() => setActive(t.key)}>
            {t.label}
          </button>
        ))}
      </div>
      <div className="split-2">
        <div>
          <h3 className="display-md" style={{ marginBottom: 14 }}>{cur.headline}</h3>
          <p style={{ fontSize: 17, lineHeight: 1.6, color: "var(--body)" }}>{cur.body}</p>
          {cur.modules && (
            <div className="pill-row" style={{ marginTop: 24 }}>
              {cur.modules.map((m) => <span className="pill" key={m}>{m}</span>)}
            </div>
          )}
          {cur.detailHref && (
            <a className="btn btn-primary" href={cur.detailHref} style={{ marginTop: 24 }}>
              Deep dive on {cur.label} &rarr;
            </a>
          )}
        </div>
        <div>
          {cur.specs && (
            <div className="ai-flow" style={{ background: "var(--surface-cream-strong)" }}>
              <div className="caption-up" style={{ color: "var(--muted)", marginBottom: 8 }}>
                What we cover
              </div>
              {cur.specs.map((s, i) => (
                <div className="row" key={s.t}>
                  <div className="n">{String(i + 1).padStart(2, "0")}</div>
                  <div>
                    <div className="lbl">{s.t}</div>
                    <div className="sub">{s.b}</div>
                  </div>
                  <div className="arr">&rarr;</div>
                </div>
              ))}
            </div>
          )}
        </div>
      </div>
    </div>
  );
};

Object.assign(window, { SolutionPage, ErpTabs });