// Solutions.jsx — Stats, Logo cloud, Solutions, Industries

const AnimatedNumber = ({ target, decimals = 0, suffix = "", duration = 1600 }) => {
  const [val, setVal] = React.useState(0);
  const ref = React.useRef(null);
  const started = React.useRef(false);
  React.useEffect(() => {
    if (!ref.current) return;
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting && !started.current) {
          started.current = true;
          let raf, startTs;
          const step = (ts) => {
            if (!startTs) startTs = ts;
            const p = Math.min(1, (ts - startTs) / duration);
            const eased = 1 - Math.pow(1 - p, 3);
            setVal(target * eased);
            if (p < 1) raf = requestAnimationFrame(step);
          };
          raf = requestAnimationFrame(step);
        }
      });
    }, { threshold: 0.3 });
    io.observe(ref.current);
    return () => io.disconnect();
  }, [target, duration]);
  return <span ref={ref}>{val.toFixed(decimals)}{suffix}</span>;
};

const StatsStrip = () =>
<section className="container">
    <div className="stats">
      <div className="reveal">
        <div className="stat-num"><AnimatedNumber target={25} suffix="%" /></div>
        <div className="stat-label">Avg. cost savings vs. onshore providers</div>
      </div>
      <div className="reveal" data-d="1">
        <div className="stat-num"><AnimatedNumber target={92} suffix="%+" /></div>
        <div className="stat-label">Client satisfaction across past engagements</div>
      </div>
      <div className="reveal" data-d="2">
        <div className="stat-num"><AnimatedNumber target={4.2} decimals={1} suffix="s" /></div>
        <div className="stat-label">Average AI-team-match turnaround</div>
      </div>
      <div className="reveal" data-d="3">
        <div className="stat-num"><AnimatedNumber target={3} /></div>
        <div className="stat-label">Delivery models &mdash; Project &middot; Managed &middot; Augmentation</div>
      </div>
    </div>
  </section>;


const TECH_STACK = [
  "SAP S/4HANA", "Oracle NetSuite", "Microsoft Dynamics 365", "Workday",
  "Salesforce", "HubSpot", "Zoho CRM", "Microsoft Power BI", "Tableau",
  "Shopify", "Adobe Commerce", "WooCommerce", "GitHub", "Atlassian Jira",
  "Visual Studio / VS Code", "Amazon Web Services", "ServiceNow", "Datadog",
  "Zendesk", "Cognizant", "Cisco IoT Edge", "Palo Alto Networks",
  "CrowdStrike", "Okta", "Fortinet"
];

const LogoCloud = () =>
<section className="container" style={{ paddingTop: 48, paddingBottom: 24 }}>
    <div className="caption-up" style={{ textAlign: "center", marginBottom: 24, color: "var(--muted-soft)" }}>
      Stacks our consultants ship in production
    </div>
    <div className="logo-marquee">
      <div className="logo-marquee-track">
        {[...TECH_STACK, ...TECH_STACK].map((l, i) =>
          <div className="logo-slot" key={l + "-" + i}>{l}</div>
        )}
      </div>
    </div>
  </section>;


const solutions = [
{ name: "Software Development", body: "React, Angular, mobile, AI/ML, secure back-end. AI-reviewed code reduces defects roughly 30%.", tag: "Engineering",
  photo: "https://images.unsplash.com/photo-1555066931-4365d14bab8c?w=900&q=80&auto=format&fit=crop", phrase: "Ship code that ships." },
{ name: "ERP", body: "Implementation, integration, customization. Remote consultants vetted by AI on past assignments.", tag: "Enterprise",
  photo: "https://images.unsplash.com/photo-1554224155-6726b3ff858f?w=900&q=80&auto=format&fit=crop", phrase: "One source of truth." },
{ name: "eCommerce", body: "Shopify, Magento, WooCommerce \u2014 scalable storefronts with Stripe and PayPal integrations.", tag: "Commerce",
  photo: "https://images.unsplash.com/photo-1556909114-f6e7ad7d3136?w=900&q=80&auto=format&fit=crop", phrase: "Storefronts that convert." },
{ name: "CRM", body: "Salesforce, HubSpot, SAP, Oracle, Microsoft. Lead-gen automation and pipeline tooling.", tag: "Revenue",
  photo: "https://images.unsplash.com/photo-1521737711867-e3b97375f902?w=900&q=80&auto=format&fit=crop", phrase: "Pipelines you can trust." },
{ name: "Call Center \u00b7 AI Voice", body: "24/7 inbound, outbound, blended. 20+ languages. Saves roughly 90% on training and supervision.", tag: "Operations",
  photo: "https://images.unsplash.com/photo-1556745753-b2904692b3cd?w=900&q=80&auto=format&fit=crop", phrase: "Always-on conversations." },
{ name: "IT Operations \u0026 Help Desk", body: "AI voice for tier-1 plus human escalation for infrastructure, network, and server.", tag: "Operations",
  photo: "https://images.unsplash.com/photo-1558494949-ef010cbdcc31?w=900&q=80&auto=format&fit=crop", phrase: "Uptime by design." },
{ name: "BPO \u2014 Front \u0026 Back Office", body: "AI front-office, human-led back office. 50\u201370% cost reduction; 40% fewer errors.", tag: "Operations",
  photo: "https://images.unsplash.com/photo-1497366216548-37526070297c?w=900&q=80&auto=format&fit=crop", phrase: "Less ops, more outcomes." },
{ name: "IoT", body: "Manufacturing, healthcare, logistics. AWS IoT Analytics paired with AI dashboards.", tag: "Connected",
  photo: "https://images.unsplash.com/photo-1518770660439-4636190af475?w=900&q=80&auto=format&fit=crop", phrase: "Devices that speak data." }];


const SolutionsGrid = ({ mode = "grid" }) =>
<section className="container section" id="solutions">
    <div className="section-header reveal">
      <div className="eyebrow"><span className="mark" />SOLUTIONS</div>
      <h2>Eight practice areas, one engagement team.</h2>
      <p>
        Acerti delivers across the full enterprise stack. Each practice is staffed
        by remote senior consultants in Mexico and LATAM, and supported by AI in
        hiring, estimation, and select services.
      </p>
    </div>

    {mode === "list" ?
  <div className="solutions-list-mode">
        {solutions.map((s, i) =>
    <div className="sol-row reveal" data-d={i % 4 + 1} key={s.name}>
            <div className="caption-up" style={{ color: "var(--muted)" }}>{s.tag}</div>
            <div>
              <div className="name">{s.name}</div>
              <div className="body" style={{ marginTop: 8 }}>{s.body}</div>
            </div>
            <div className="arrow">Learn more &rarr;</div>
          </div>
    )}
      </div> :

  <div className="grid-4">
        {solutions.map((s, i) =>
    <div className="solution-flip reveal" data-d={i % 4 + 1} key={s.name}>
            <div className="solution-flip-inner">
              <div className="solution-card solution-flip-face solution-flip-front">
                <div className="solution-meta">
                  <span style={{ width: 6, height: 6, borderRadius: 3, background: "var(--primary)" }} />
                  {s.tag}
                </div>
                <h5 className="title-md">{s.name}</h5>
                <p className="body-sm" style={{ color: "var(--body)" }}>{s.body}</p>
                <span className="tlink" style={{ marginTop: 8 }}>Learn more &rarr;</span>
              </div>
              <div className="solution-flip-face solution-flip-back" style={{ "--bg": `url(${s.photo})` }}>
                <div className="solution-flip-back-overlay" />
                <div className="solution-flip-back-content">
                  <div className="solution-meta" style={{ color: "var(--ink)" }}>
                    <span style={{ width: 6, height: 6, borderRadius: 3, background: "var(--primary)" }} />
                    {s.tag}
                  </div>
                  <div className="solution-flip-phrase">{s.phrase}</div>
                  <span className="tlink">Explore {s.name} &rarr;</span>
                </div>
              </div>
            </div>
          </div>
    )}
      </div>
  }
  </section>;


const INDUSTRY_CASES = [
  { name: "Technology", tint: "#e8f0f7", client: "B2B SaaS platform · Seattle WA",
    challenge: "Needed a customer-portal rebuild in four months ahead of a Series B board demo, with a senior team they could not hire on the US market in time.",
    solution: "Managed Team: one Acerti tech lead, four senior React engineers, one DevOps. Sprints in PST overlap, AI code review on every PR.",
    stats: [
      { v: "28%", l: "Drop in support tickets after rebuild" },
      { v: "45%", l: "Lower engineering cost vs. onshore quote" },
      { v: "On time", l: "Shipped two days before board demo" },
    ]
  },
  { name: "Fintech", tint: "#e6f1ea", client: "Payments processor · Toronto ON",
    challenge: "Compliance-heavy KYC and ledger platform rebuild on a tight regulatory timeline. PCI-DSS Level 1 in scope from day one.",
    solution: "Staff Augmentation: three senior back-end engineers and a security architect with PCI-DSS history. Acerti tech lead embedded in the client's release train.",
    stats: [
      { v: "PCI L1", l: "Certification achieved first audit" },
      { v: "99.99%", l: "Production uptime since launch" },
      { v: "~50%", l: "Cost reduction vs. previous vendor" },
    ]
  },
  { name: "Pharmaceuticals", tint: "#efeaf2", client: "Pharma manufacturer · New Jersey",
    challenge: "ERP plus IoT footprint needed across two plants and a distribution network. Cold-chain compliance was the executive headline.",
    solution: "SAP S/4HANA implementation by Acerti's ERP practice, paired with an AWS IoT Core build for cold-chain sensor telemetry and AI-driven anomaly detection.",
    stats: [
      { v: "99.6%", l: "Cold-chain compliance across SKUs" },
      { v: "22%", l: "Reduction in spoilage write-offs" },
      { v: "8 mo", l: "ERP + IoT live in production" },
    ]
  },
  { name: "Financial Institutions", tint: "#f4ede0", client: "Regional bank · Charlotte NC",
    challenge: "Salesforce Service Cloud sprawl plus a branch and contact-center call volume that was outstripping human-only support.",
    solution: "CRM consolidation by Acerti's Salesforce architects, layered with an AI voice agent for tier-1 contact-center calls and human escalation to senior LATAM consultants.",
    stats: [
      { v: "68%", l: "Tier-1 calls deflected to AI" },
      { v: "+14", l: "Net Promoter Score points" },
      { v: "30%", l: "Lower contact-center spend" },
    ]
  },
  { name: "Startups", tint: "#fbeae0", client: "Series A health-data startup · Boston MA",
    challenge: "Needed three senior engineers in fourteen days to ship a Q2 product wedge ahead of an investor checkpoint. No US recruiter could move that fast.",
    solution: "Staff Augmentation. AI matching shortlisted three senior LATAM engineers in under three hours; client interviewed and approved the same day. First commit by day six.",
    stats: [
      { v: "3 hrs", l: "From brief to interview shortlist" },
      { v: "2 wks", l: "Shipped ahead of investor demo" },
      { v: "Runway+", l: "Extended runway vs. onshore hires" },
    ]
  },
  { name: "Healthcare", tint: "#f7e7e3", client: "Telehealth provider · Denver CO",
    challenge: "HIPAA-compliant telemedicine platform needed a rebuild while a parallel rollout of at-home patient-monitoring IoT devices was in flight.",
    solution: "Project-Based engagement for the platform rebuild plus an Acerti IoT pod handling device integration. Senior LATAM consultants vetted on HIPAA-experienced past assignments.",
    stats: [
      { v: "47%", l: "Faster patient onboarding flow" },
      { v: "99.97%", l: "Platform uptime first 12 months" },
      { v: "First-pass", l: "HIPAA audit, zero major findings" },
    ]
  },
  { name: "Retail & eCommerce", tint: "#f6e4dc", client: "Mid-market retail platform · Austin TX",
    challenge: "Legacy storefront could not keep up with omnichannel growth. AOV had stalled and checkout drop-off was up two quarters running.",
    solution: "Managed Team handled a Shopify Plus replatform end-to-end, plus an AI-driven personalization layer and an A/B framework Acerti's eCommerce practice maintains.",
    stats: [
      { v: "23%", l: "AOV lift in the first quarter post-launch" },
      { v: "41%", l: "Reduction in checkout drop-off" },
      { v: "Under-budget", l: "Fixed-fee project came in under SOW" },
    ]
  },
  { name: "Manufacturing", tint: "#ebeae3", client: "Industrial parts manufacturer · Cleveland OH",
    challenge: "Aging ERP combined with reactive maintenance on the factory floor. Unplanned downtime was the single biggest hit to quarterly margin.",
    solution: "SAP S/4HANA migration by Acerti's ERP practice, combined with an IoT predictive-maintenance build on AWS IoT Analytics and Tableau dashboards for the plant team.",
    stats: [
      { v: "31%", l: "Reduction in unplanned downtime" },
      { v: "18%", l: "Production-throughput improvement" },
      { v: "ROI < 12 mo", l: "Payback on combined ERP + IoT spend" },
    ]
  },
  { name: "Education", tint: "#f6efd9", client: "Online learning platform · Chicago IL",
    challenge: "LMS scale issues during enrollment peaks plus an adult-ed division asking for an AI tutor pilot. Internal team did not have AI/ML depth.",
    solution: "Project-Based LMS modernization with horizontal scaling baked in, plus an AI tutor pilot built by Acerti's AI/ML team. Multilingual coverage for ES and PT cohorts.",
    stats: [
      { v: "36%", l: "Higher course-completion rate" },
      { v: "52%", l: "Reduction in support-ticket load" },
      { v: "ES + PT", l: "Multilingual tutor live in production" },
    ]
  },
  { name: "Logistics", tint: "#e3eee9", client: "Cold-chain logistics · Miami FL",
    challenge: "1,200-truck cold-chain fleet with no real-time temperature visibility. Customer SLA penalties were eating into margin.",
    solution: "IoT temperature sensors integrated with Azure IoT Hub by Acerti's IoT practice, with real-time dashboards and an anomaly-detection model on the data layer.",
    stats: [
      { v: "<2 min", l: "Anomaly detection (was ~45 min)" },
      { v: "12%", l: "Drop in product losses in transit" },
      { v: "1,200", l: "Trucks live on the new telemetry stack" },
    ]
  },
  { name: "Smart Cities", tint: "#ece6f1", client: "Municipal smart-city initiative · LATAM capital",
    challenge: "Public-lighting modernization combined with a citywide air-quality sensor rollout. Needed both infrastructure and a public-facing data layer.",
    solution: "Acerti's IoT practice delivered the lighting and air-quality sensor mesh, paired with a real-time analytics layer and a public dashboard for residents.",
    stats: [
      { v: "38%", l: "Energy savings across managed grid" },
      { v: "4.2M", l: "Residents receiving real-time alerts" },
      { v: "24/7", l: "Air-quality monitoring across districts" },
    ]
  },
  { name: "Insurance", tint: "#f1e6d9", client: "Mid-market P&C insurer · Dallas TX",
    challenge: "First Notice of Loss intake bottlenecked at peak hours and back-office claims processing was overwhelmingly manual.",
    solution: "AI voice agent for FNOL intake, paired with an RPA + AI workflow build for claims back-office by Acerti's BPO practice. 24/7 coverage from day one.",
    stats: [
      { v: "<90s", l: "FNOL intake time (was ~18 min)" },
      { v: "56%", l: "Lower BPO cost vs. previous setup" },
      { v: "24/7", l: "Coverage with zero overnight staffing" },
    ]
  },
];

const Industries = () => {
  const [active, setActive] = React.useState(0);
  const cur = INDUSTRY_CASES[active];
  return (
    <section className="container section" id="industries" style={{ paddingTop: 0 }}>
      <div className="section-header reveal" style={{ marginBottom: 28 }}>
        <div className="eyebrow"><span className="mark" />INDUSTRIES SERVED</div>
        <h3 className="display-md">We work where software is the operating system of the business.</h3>
        <p>Twelve industries we have shipped in. Pick one to see how Acerti's solutions show up in practice.</p>
      </div>

      <div className="industry-tabs reveal" data-d="1">
        {INDUSTRY_CASES.map((c, i) => (
          <button
            key={c.name}
            className={"industry-tab" + (i === active ? " is-active" : "")}
            onClick={() => setActive(i)}
            aria-pressed={i === active}
          >
            {c.name}
          </button>
        ))}
      </div>

      <div key={cur.name} className="industry-case reveal in" data-d="2" style={{ background: cur.tint }}>
        <div className="industry-case-head">
          <div className="industry-kicker">{cur.name.toUpperCase()} &middot; CASE</div>
          <div className="industry-client">{cur.client}</div>
        </div>
        <div className="industry-case-body">
          <div className="industry-block">
            <div className="industry-label">Challenge</div>
            <p>{cur.challenge}</p>
          </div>
          <div className="industry-block">
            <div className="industry-label">Acerti's solution</div>
            <p>{cur.solution}</p>
          </div>
          <div className="industry-block">
            <div className="industry-label">Outcomes</div>
            <div className="industry-stats">
              {cur.stats.map((s) => (
                <div key={s.l} className="industry-stat">
                  <div className="val">{s.v}</div>
                  <div className="lbl">{s.l}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};


Object.assign(window, { StatsStrip, LogoCloud, SolutionsGrid, Industries });