// PageHeroArts.jsx — contextual graphics for each inner page's hero
// Each art is a dark surface card matching the homepage hero language.
// Pages reference these by string key via <PageHero art="..."/>.

// ── Shared building blocks ─────────────────────────────────────────
const ArtFrame = ({ title, badge, children, foot }) =>
<div className="hero-art pha">
    <div className="hero-art-toolbar">
      <div className="hero-art-dots"><span /><span /><span /></div>
      <span className="hero-art-title">{title}</span>
      {badge ? <span className="pha-badge">{badge}</span> : <span style={{ width: 36 }} />}
    </div>
    <div className="pha-body">{children}</div>
    {foot && <div className="pha-foot">{foot}</div>}
  </div>;


const Tile = ({ k, v, sub, tint }) =>
<div className="pha-tile" style={tint ? { background: tint } : null}>
    <div className="pha-tile-k">{k}</div>
    <div className="pha-tile-v">{v}</div>
    {sub && <div className="pha-tile-sub">{sub}</div>}
  </div>;


const Row = ({ left, mid, right, dot }) =>
<div className="pha-row">
    {dot && <span className="pha-dot" style={{ background: dot }} />}
    <div className="pha-row-left">{left}</div>
    {mid && <div className="pha-row-mid">{mid}</div>}
    {right && <div className="pha-row-right">{right}</div>}
  </div>;


// ── Software Development: code editor ─────────────────────────────
const ArtCode = () =>
<div className="hero-art pha pha-code">
    <div className="hero-art-toolbar">
      <div className="hero-art-dots"><span /><span /><span /></div>
      <span className="hero-art-title">acerti-pr · review-bot.ts</span>
      <span style={{ width: 36 }} />
    </div>
    <div><span className="code-ln">1</span><span className="c">// AI-reviewed PR · senior LATAM engineer</span></div>
    <div><span className="code-ln">2</span><span className="k">async function</span> <span className="f">checkout</span>({"({ cart, user })"} {"{"}</div>
    <div><span className="code-ln">3</span>{"\u00A0\u00A0"}<span className="k">const</span> <span className="v">total</span> <span className="n">=</span> <span className="f">price</span>(cart);</div>
    <div><span className="code-ln">4</span>{"\u00A0\u00A0"}<span className="k">if</span> ({"!"}<span className="v">user</span>.verified) <span className="k">throw</span> <span className="k">new</span> <span className="f">AuthError</span>();</div>
    <div><span className="code-ln">5</span>{"\u00A0\u00A0"}<span className="k">return</span> <span className="v">stripe</span>.<span className="f">charge</span>({"{ total, user }"});</div>
    <div><span className="code-ln">6</span>{"}"}</div>
    <div><span className="code-ln">7</span></div>
    <div><span className="code-ln">8</span><span className="c">// ✓ 0 defects · 12/12 tests · merged in 2h</span></div>
    <div className="pha-foot">
      <span><span className="pha-dot" style={{ background: "var(--accent-teal)" }} />Reviewed · React 18 · Stripe</span>
      <span style={{ fontFamily: "var(--font-mono)" }}>~30% fewer defects</span>
    </div>
  </div>;


// ── ERP overview: module mosaic ───────────────────────────────────
const ArtErp = () =>
<ArtFrame title="erp · module map" badge="3 vendors"
foot={<><span><span className="pha-dot" style={{ background: "var(--accent-teal)" }} />Live</span><span style={{ fontFamily: "var(--font-mono)" }}>SAP · Oracle · MS</span></>}>
    <div className="pha-grid-3">
      <Tile k="FIN" v="Finance" sub="GL · AP · AR" />
      <Tile k="SCM" v="Supply chain" sub="MM · WM · TM" />
      <Tile k="HCM" v="People" sub="Payroll · Talent" />
      <Tile k="CRM" v="Customers" sub="Sales · Service" />
      <Tile k="PLM" v="Lifecycle" sub="PP · QM · PM" />
      <Tile k="EPM" v="Planning" sub="FP&amp;A · Budget" />
    </div>
  </ArtFrame>;


// ── ERP SAP ───────────────────────────────────────────────────────
const ArtErpSap = () =>
<ArtFrame title="sap s/4hana · fiori launchpad" badge="cloud"
foot={<><span><span className="pha-dot" style={{ background: "var(--accent-teal)" }} />Connected · Cloud Connector</span><span style={{ fontFamily: "var(--font-mono)" }}>S/4HANA · BTP</span></>}>
    <div className="pha-grid-3">
      <Tile k="FI-CO" v="$4.2M" sub="MTD revenue" />
      <Tile k="MM" v="318" sub="Open POs" />
      <Tile k="SD" v="92%" sub="On-time ship" />
      <Tile k="PP" v="6 plants" sub="Run rate" />
      <Tile k="WM" v="14k" sub="SKUs" />
      <Tile k="BTP" v="AI" sub="JouleX flow" />
    </div>
  </ArtFrame>;


// ── ERP Oracle ────────────────────────────────────────────────────
const ArtErpOracle = () =>
<ArtFrame title="oracle fusion · cloud erp" badge="REST"
foot={<><span><span className="pha-dot" style={{ background: "var(--accent-teal)" }} />OIC live</span><span style={{ fontFamily: "var(--font-mono)" }}>Fusion · NetSuite</span></>}>
    <div className="pha-rows">
      <Row dot="var(--primary)" left="Cloud ERP · Financials" mid="$2.8M" right="GL" />
      <Row dot="var(--accent-amber)" left="Cloud HCM · Core HR" mid="1,842" right="Empl." />
      <Row dot="var(--accent-teal)" left="Cloud EPM · Planning" mid="Q3 FCST" right="EPM" />
      <Row dot="var(--primary)" left="NetSuite SuiteCloud" mid="12 subs" right="SCS" />
      <Row dot="var(--accent-amber)" left="OCI · Autonomous DB" mid="99.99%" right="DB" />
    </div>
  </ArtFrame>;


// ── ERP Microsoft ─────────────────────────────────────────────────
const ArtErpMicrosoft = () =>
<ArtFrame title="dynamics 365 · power platform" badge="azure"
foot={<><span><span className="pha-dot" style={{ background: "var(--accent-teal)" }} />Dataverse live</span><span style={{ fontFamily: "var(--font-mono)" }}>D365 · Power</span></>}>
    <div className="pha-grid-3">
      <Tile k="F&amp;O" v="Finance" sub="Ops · SCM" />
      <Tile k="CE" v="Customer" sub="Sales · Svc" />
      <Tile k="BC" v="Business" sub="Central" />
      <Tile k="Apps" v="Power Apps" sub="Canvas · Model" />
      <Tile k="Auto" v="Power Auto" sub="Flows" />
      <Tile k="BI" v="Power BI" sub="Dashboards" />
    </div>
  </ArtFrame>;


// ── eCommerce: storefront + conversion ────────────────────────────
const ArtEcommerce = () =>
<ArtFrame title="commerce-ops · checkout funnel" badge="live"
foot={<><span><span className="pha-dot" style={{ background: "var(--accent-teal)" }} />Stripe · PayPal</span><span style={{ fontFamily: "var(--font-mono)" }}>+23% AOV</span></>}>
    <div className="pha-rows">
      <Row left="Sessions · today" mid={<span className="pha-bar"><span style={{ width: "92%" }} /></span>} right="48,210" />
      <Row left="Add-to-cart" mid={<span className="pha-bar"><span style={{ width: "64%" }} /></span>} right="30,854" />
      <Row left="Checkout start" mid={<span className="pha-bar"><span style={{ width: "38%" }} /></span>} right="18,319" />
      <Row left="Order placed" mid={<span className="pha-bar"><span style={{ width: "12%" }} /></span>} right="5,780" />
      <Row dot="var(--primary)" left="AOV · $142.30" mid={<span style={{ fontFamily: "var(--font-mono)" }}>+23% QoQ</span>} />
    </div>
  </ArtFrame>;


// ── CRM: pipeline kanban ──────────────────────────────────────────
const ArtCrm = () =>
<ArtFrame title="crm · pipeline · Q3" badge="$8.4M"
foot={<><span><span className="pha-dot" style={{ background: "var(--accent-teal)" }} />14 reps · 3 regions</span><span style={{ fontFamily: "var(--font-mono)" }}>Salesforce · HubSpot</span></>}>
    <div className="pha-kanban">
      <div className="pha-kanban-col">
        <div className="pha-kanban-h">Qualified · 24</div>
        <div className="pha-kanban-card">Globex · $180k</div>
        <div className="pha-kanban-card">Initech · $94k</div>
      </div>
      <div className="pha-kanban-col">
        <div className="pha-kanban-h">Proposal · 11</div>
        <div className="pha-kanban-card hot">Acme · $420k</div>
        <div className="pha-kanban-card">Soylent · $215k</div>
      </div>
      <div className="pha-kanban-col">
        <div className="pha-kanban-h">Close · 6</div>
        <div className="pha-kanban-card win">Hooli · $1.1M ✓</div>
        <div className="pha-kanban-card">Vandelay · $310k</div>
      </div>
    </div>
  </ArtFrame>;


// ── Call Center: live call + AI transcript ────────────────────────
const ArtCallCenter = () =>
<ArtFrame title="voice-agent · call #C-44291" badge="live"
foot={<><span><span className="pha-dot pulse" style={{ background: "var(--primary)" }} />Connected · 02:14</span><span style={{ fontFamily: "var(--font-mono)" }}>EN · ES · PT</span></>}>
    <div className="pha-wave">
      {Array.from({ length: 48 }).map((_, i) => {
      const h = 6 + Math.abs(Math.sin(i * 0.6) * 22) + i % 3 * 4;
      return <span key={i} style={{ height: h }} />;
    })}
    </div>
    <div className="pha-transcript">
      <div className="pha-line"><span className="who">Caller</span><span>Hi, I need to reschedule my delivery for Friday.</span></div>
      <div className="pha-line ai"><span className="who">Agent</span><span>I can move that to Friday. Morning or afternoon?</span></div>
      <div className="pha-line"><span className="who">Caller</span><span>Afternoon works.</span></div>
      <div className="pha-line ai"><span className="who">Agent</span><span>Done — confirmed for Fri 1–5pm. Anything else?</span></div>
    </div>
  </ArtFrame>;


// ── IT Operations: status grid ────────────────────────────────────
const ArtItOps = () =>
<ArtFrame title="noc · acerti-managed" badge="24/7"
foot={<><span><span className="pha-dot" style={{ background: "var(--accent-teal)" }} />All green · 99.98% uptime</span><span style={{ fontFamily: "var(--font-mono)" }}>0 P1 · 2 P3</span></>}>
    <div className="pha-grid-3">
      <Tile k="API" v="OK" sub="142ms p50" />
      <Tile k="DB" v="OK" sub="2 replicas" />
      <Tile k="CDN" v="OK" sub="98 PoPs" />
      <Tile k="QUEUE" v="OK" sub="3k/s" />
      <Tile k="EDGE" v="OK" sub="WAF on" />
      <Tile k="SOC" v="OK" sub="0 alerts" />
    </div>
  </ArtFrame>;


// ── IT Help Desk: ticket queue ────────────────────────────────────
const ArtHelpDesk = () =>
<ArtFrame title="help-desk · tier-1 queue" badge="ai-triaged"
foot={<><span><span className="pha-dot" style={{ background: "var(--accent-teal)" }} />68% deflected to AI</span><span style={{ fontFamily: "var(--font-mono)" }}>SLA · &lt; 4 min</span></>}>
    <div className="pha-rows">
      <Row dot="var(--accent-teal)" left="#T-9018 · Password reset" mid="AI" right="14s" />
      <Row dot="var(--accent-teal)" left="#T-9017 · VPN access" mid="AI" right="22s" />
      <Row dot="var(--primary)" left="#T-9016 · Network outage · Dallas" mid="L2" right="2m" />
      <Row dot="var(--accent-amber)" left="#T-9015 · Laptop provisioning" mid="L1" right="3m" />
      <Row dot="var(--accent-teal)" left="#T-9014 · Wi-Fi onboarding" mid="AI" right="9s" />
    </div>
  </ArtFrame>;


// ── BPO: front-office / back-office split ─────────────────────────
const ArtBpo = () =>
<ArtFrame title="bpo · ops dashboard" badge="latam"
foot={<><span><span className="pha-dot" style={{ background: "var(--accent-teal)" }} />Coverage · 24/7</span><span style={{ fontFamily: "var(--font-mono)" }}>50–70% cost reduction</span></>}>
    <div className="pha-split">
      <div className="pha-split-col">
        <div className="pha-split-h">Front office · AI</div>
        <div className="pha-split-bar"><span style={{ width: "82%", background: "var(--primary)" }} /></div>
        <div className="pha-split-stat"><strong>4,210</strong> calls · 24h</div>
        <div className="pha-split-stat"><strong>72%</strong> contained</div>
      </div>
      <div className="pha-split-col">
        <div className="pha-split-h">Back office · human</div>
        <div className="pha-split-bar"><span style={{ width: "61%", background: "var(--accent-teal)" }} /></div>
        <div className="pha-split-stat"><strong>1,824</strong> docs processed</div>
        <div className="pha-split-stat"><strong>40%</strong> fewer errors</div>
      </div>
    </div>
  </ArtFrame>;


// ── IoT: device telemetry ─────────────────────────────────────────
const ArtIot = () =>
<ArtFrame title="iot · fleet telemetry" badge="aws iot"
foot={<><span><span className="pha-dot pulse" style={{ background: "var(--primary)" }} />1,204 devices online</span><span style={{ fontFamily: "var(--font-mono)" }}>MQTT · 5s</span></>}>
    <div className="pha-rows">
      <Row dot="var(--accent-teal)" left="Cold-chain truck #TX-441" mid={<span className="pha-bar"><span style={{ width: "84%" }} /></span>} right="2.4&deg;C" />
      <Row dot="var(--accent-teal)" left="Plant sensor · line 3" mid={<span className="pha-bar"><span style={{ width: "67%" }} /></span>} right="98 rpm" />
      <Row dot="var(--accent-amber)" left="Warehouse hub · GDL" mid={<span className="pha-bar"><span style={{ width: "92%" }} /></span>} right="OK" />
      <Row dot="var(--primary)" left="Smart-meter · grid 14" mid={<span className="pha-bar"><span style={{ width: "78%" }} /></span>} right="412W" />
      <Row dot="var(--accent-teal)" left="Air-quality · district 7" mid={<span className="pha-bar"><span style={{ width: "55%" }} /></span>} right="AQI 62" />
    </div>
  </ArtFrame>;


// ── Solutions overview: service mosaic ────────────────────────────
const ArtSolutionsOverview = () =>
<ArtFrame title="solutions · 8 practice areas" badge="latam"
foot={<><span><span className="pha-dot" style={{ background: "var(--accent-teal)" }} />~4,000 vetted consultants</span><span style={{ fontFamily: "var(--font-mono)" }}>3 delivery models</span></>}>
    <div className="pha-grid-4">
      <Tile k="DEV" v="Software" />
      <Tile k="ERP" v="SAP · ORC · MS" />
      <Tile k="COM" v="eCommerce" />
      <Tile k="CRM" v="Pipeline" />
      <Tile k="VOX" v="Call Center" />
      <Tile k="OPS" v="IT Ops" />
      <Tile k="BPO" v="Front · Back" />
      <Tile k="IOT" v="Connected" />
    </div>
  </ArtFrame>;


// ── Delivery models: 3-model comparison ───────────────────────────
const ArtDelivery = () =>
<ArtFrame title="delivery models · pick the shape" badge="3 ways"
foot={<><span><span className="pha-dot" style={{ background: "var(--accent-teal)" }} />SOW · monthly · per-seat</span><span style={{ fontFamily: "var(--font-mono)" }}>Start &lt; 2 wks</span></>}>
    <div className="pha-rows">
      <Row dot="var(--primary)" left={<><strong>Project-Based</strong><br /><span style={{ color: "var(--on-dark-soft)", fontSize: 11 }}>Fixed scope · SOW · milestone</span></>} right="01" />
      <Row dot="var(--accent-amber)" left={<><strong>Managed Team</strong><br /><span style={{ color: "var(--on-dark-soft)", fontSize: 11 }}>Pod · monthly · KPI-led</span></>} right="02" />
      <Row dot="var(--accent-teal)" left={<><strong>Staff Augmentation</strong><br /><span style={{ color: "var(--on-dark-soft)", fontSize: 11 }}>Per-seat · embedded</span></>} right="03" />
    </div>
  </ArtFrame>;


// ── Why Nearshoring: reuse homepage map if present ────────────────
const ArtNearshore = () => window.HeroMapArtifact ? <window.HeroMapArtifact /> :
<ArtFrame title="nearshore network" badge="latam">
    <div className="pha-rows">
      <Row dot="var(--primary)" left="CDMX · Mexico City" right="PST + 2" />
      <Row dot="var(--primary)" left="GDL · Guadalajara" right="PST + 2" />
      <Row dot="var(--primary)" left="BOG · Bogot&aacute;" right="EST + 0" />
      <Row dot="var(--primary)" left="GRU · S&atilde;o Paulo" right="EST + 2" />
      <Row dot="var(--primary)" left="EZE · Buenos Aires" right="EST + 2" />
    </div>
  </ArtFrame>;


// ── Company: snapshot tiles ───────────────────────────────────────
const ArtCompany = () =>
<ArtFrame title="acerti · at a glance" badge="2024"
foot={<><span><span className="pha-dot" style={{ background: "var(--accent-teal)" }} />HQ · USA · ops · LATAM</span><span style={{ fontFamily: "var(--font-mono)" }}>Founded 2019</span></>}>
    <div className="pha-grid-2">
      <Tile k="HQ" v="USA" sub="Operations · LATAM" />
      <Tile k="Hubs" v="5" sub="MX · CO · BR · AR" />
      <Tile k="Roster" v="4,000+" sub="Vetted consultants" />
      <Tile k="Clients" v="USA · CA" sub="Mid-market &amp; enterprise" />
    </div>
  </ArtFrame>;


// ── Careers: open roles ───────────────────────────────────────────
const ArtCareers = () =>
<ArtFrame title="careers · open roles · LATAM" badge="hiring"
foot={<><span><span className="pha-dot pulse" style={{ background: "var(--primary)" }} />Apply in &lt; 5 min</span><span style={{ fontFamily: "var(--font-mono)" }}>Remote · C1+ EN</span></>}>
    <div className="pha-rows">
      <Row dot="var(--primary)" left={<><strong>Senior React engineer</strong><br /><span style={{ color: "var(--on-dark-soft)", fontSize: 11 }}>Remote · MX / BR / AR</span></>} right="5 open" />
      <Row dot="var(--accent-amber)" left={<><strong>SAP S/4HANA consultant</strong><br /><span style={{ color: "var(--on-dark-soft)", fontSize: 11 }}>Remote · LATAM</span></>} right="3 open" />
      <Row dot="var(--accent-teal)" left={<><strong>AI voice engineer</strong><br /><span style={{ color: "var(--on-dark-soft)", fontSize: 11 }}>Remote · BR / MX</span></>} right="2 open" />
      <Row dot="var(--primary)" left={<><strong>DevOps · AWS</strong><br /><span style={{ color: "var(--on-dark-soft)", fontSize: 11 }}>Remote · LATAM</span></>} right="4 open" />
    </div>
  </ArtFrame>;


// ── Case studies: KPI tiles ───────────────────────────────────────
const ArtCaseStudies = () =>
<ArtFrame title="recent work · outcomes" badge="proof"
foot={<><span><span className="pha-dot" style={{ background: "var(--accent-teal)" }} />12 industries · 40+ cases</span><span style={{ fontFamily: "var(--font-mono)" }}>90%+ CSAT</span></>}>
    <div className="pha-grid-2">
      <Tile k="Fintech" v="PCI L1" sub="First-audit cert" />
      <Tile k="Pharma" v="99.6%" sub="Cold-chain compliance" />
      <Tile k="Bank" v="68%" sub="Tier-1 calls deflected" />
      <Tile k="Retail" v="+23%" sub="AOV lift Q1" />
    </div>
  </ArtFrame>;


// ── Insights / blog: featured editorial card ──────────────────────
const ArtBlog = () =>
<ArtFrame title="insights · latest" badge="weekly"
foot={<><span><span className="pha-dot" style={{ background: "var(--accent-teal)" }} />Field notes from delivery</span><span style={{ fontFamily: "var(--font-mono)" }}>~6 min read</span></>}>
    <div className="pha-feature">
      <div className="pha-feature-kicker">FEATURED · NEARSHORE</div>
      <div className="pha-feature-title">Why nearshore beats offshore for senior SAP work in 2026</div>
      <div className="pha-feature-meta">Acerti partners · 6 min · Jan 12</div>
    </div>
    <div className="pha-rows pha-rows-tight">
      <Row dot="var(--primary)" left="AI code review · what we learned" right="4 min" />
      <Row dot="var(--accent-amber)" left="The 3-hour shortlist · how matching works" right="5 min" />
      <Row dot="var(--accent-teal)" left="Managed vs. augmented teams" right="7 min" />
    </div>
  </ArtFrame>;


// ── Security & trust: compliance badges ───────────────────────────
const ArtSecurity = () =>
<ArtFrame title="trust · security posture" badge="audited"
foot={<><span><span className="pha-dot" style={{ background: "var(--accent-teal)" }} />All controls operational</span><span style={{ fontFamily: "var(--font-mono)" }}>Annual audit · clean</span></>}>
    <div className="pha-grid-2">
      <Tile k="SOC 2" v="Type II" sub="Independently audited" />
      <Tile k="ISO" v="27001" sub="ISMS aligned" />
      <Tile k="GDPR" v="DPA" sub="EU + UK ready" />
      <Tile k="HIPAA" v="BAA" sub="Healthcare ready" />
    </div>
  </ArtFrame>;


// ── Legal pages: simple document panel ────────────────────────────
const ArtLegal = ({ kind = "Document" }) =>
<ArtFrame title={`legal · ${kind.toLowerCase()}`} badge="v2026.1"
foot={<><span><span className="pha-dot" style={{ background: "var(--accent-teal)" }} />Reviewed by counsel</span><span style={{ fontFamily: "var(--font-mono)" }}>Last updated · Jan 2026</span></>}>
    <div className="pha-doc">
      <div className="pha-doc-line w90" />
      <div className="pha-doc-line w70" />
      <div className="pha-doc-line w85" />
      <div className="pha-doc-line w50" />
      <div className="pha-doc-line w80" />
      <div className="pha-doc-line w65" />
      <div className="pha-doc-line w75" />
    </div>
  </ArtFrame>;

const ArtTerms = () => <ArtLegal kind="Terms of service" />;
const ArtPrivacy = () => <ArtLegal kind="Privacy policy" />;
const ArtDpa = () => <ArtLegal kind="DPA" />;

// ── Registry ──────────────────────────────────────────────────────
window.PageHeroArts = {
  "code": ArtCode,
  "erp": ArtErp,
  "erp-sap": ArtErpSap,
  "erp-oracle": ArtErpOracle,
  "erp-microsoft": ArtErpMicrosoft,
  "ecommerce": ArtEcommerce,
  "crm": ArtCrm,
  "call-center": ArtCallCenter,
  "it-ops": ArtItOps,
  "help-desk": ArtHelpDesk,
  "bpo": ArtBpo,
  "iot": ArtIot,
  "solutions": ArtSolutionsOverview,
  "delivery": ArtDelivery,
  "nearshore": ArtNearshore,
  "company": ArtCompany,
  "careers": ArtCareers,
  "case-studies": ArtCaseStudies,
  "blog": ArtBlog,
  "security": ArtSecurity,
  "terms": ArtTerms,
  "privacy": ArtPrivacy,
  "dpa": ArtDpa
};