// Hero.jsx — hero block with switchable mockup variants

const HeroCodeArtifact = () =>
<div className="hero-art">
    <div className="hero-art-toolbar">
      <div className="hero-art-dots"><span /><span /><span /></div>
      <span className="hero-art-title">acerti-match &middot; find-team.ts</span>
      <span style={{ width: 36 }} />
    </div>
    <div><span className="code-ln">1</span><span className="c">// AI-matched team for SAP S/4HANA migration</span></div>
    <div><span className="code-ln">2</span><span className="k">import</span> <span className="n">{"{ acerti }"}</span> <span className="k">from</span> <span className="s">"@acerti/match"</span>;</div>
    <div><span className="code-ln">3</span></div>
    <div><span className="code-ln">4</span><span className="k">const</span> <span className="v">team</span> <span className="n">=</span> <span className="k">await</span> <span className="n">acerti.</span><span className="f">findExperts</span>(<span className="n">{"{"}</span></div>
    <div><span className="code-ln">5</span>{"\u00A0\u00A0"}<span className="n">stack</span>: <span className="s">"sap-s4hana"</span>,</div>
    <div><span className="code-ln">6</span>{"\u00A0\u00A0"}<span className="n">timezone</span>: <span className="s">"America/Los_Angeles"</span>,</div>
    <div><span className="code-ln">7</span>{"\u00A0\u00A0"}<span className="n">size</span>: <span className="v">6</span>,</div>
    <div><span className="code-ln">8</span>{"\u00A0\u00A0"}<span className="n">englishLevel</span>: <span className="s">"C1+"</span>,</div>
    <div><span className="code-ln">9</span>{"\u00A0\u00A0"}<span className="n">budget</span>: <span className="s">"70%-onshore"</span>,</div>
    <div><span className="code-ln">10</span><span className="n">{"}"}</span>);</div>
    <div><span className="code-ln">11</span></div>
    <div><span className="code-ln">12</span><span className="c">// &rarr; 6 consultants matched in 4.2s &middot; est. 40–60% under onshore</span></div>
    <div style={{ marginTop: 16, paddingTop: 12, borderTop: "1px solid var(--hairline-dark)", display: "flex", justifyContent: "space-between", fontFamily: "var(--font-body)", fontSize: 12, color: "var(--on-dark-soft)" }}>
      <span>
        <span style={{ display: "inline-block", width: 6, height: 6, borderRadius: 3, background: "var(--accent-teal)", marginRight: 8 }} />
        Connected &middot; CDMX &middot; S&atilde;o Paulo &middot; Buenos Aires
      </span>
      <span style={{ fontFamily: "var(--font-mono)" }}>4.2s</span>
    </div>
  </div>;


const useCountUp = (target, { duration = 1600, delay = 0 } = {}) => {
  const [val, setVal] = React.useState(0);
  React.useEffect(() => {
    let raf, startTs;
    const startTimer = setTimeout(() => {
      const step = (ts) => {
        if (!startTs) startTs = ts;
        const p = Math.min(1, (ts - startTs) / duration);
        // ease-out cubic
        const eased = 1 - Math.pow(1 - p, 3);
        setVal(Math.round(target * eased));
        if (p < 1) raf = requestAnimationFrame(step);
      };
      raf = requestAnimationFrame(step);
    }, delay);
    return () => { clearTimeout(startTimer); if (raf) cancelAnimationFrame(raf); };
  }, [target, duration, delay]);
  return val;
};

const CountKPI = ({ lbl, target, suffix = "", delta, delay = 0 }) => {
  const v = useCountUp(target, { delay });
  return (
    <div className="dash-kpi">
      <div className="lbl">{lbl}</div>
      <div className="val">{v}{suffix}</div>
      <div className="delta">{delta}</div>
    </div>
  );
};

const HeroDashArtifact = () =>
<div className="hero-art dash">
    <div className="dash-top">
      <span className="dash-badge"><span className="pulse" />Live engagements</span>
    </div>
    <div className="dash-body">
      <div className="dash-kpi-row">
        <CountKPI lbl="Active teams" target={28} delta="+3 this week" delay={0} />
        <CountKPI lbl="Consultants engaged" target={354} delta="+12 this week" delay={120} />
        <CountKPI lbl="Avg. onshore savings" target={50} suffix="%" delta={<>range 40&ndash;60%</>} delay={240} />
      </div>
      <div className="dash-list-title">Recent matches</div>
      <div>
        {[
      { name: "Mariana C.", role: "Senior SAP S/4HANA &middot; CDMX", tag: "ERP", rate: "$40/hr", match: 96 },
      { name: "Diego P.", role: "Staff iOS &middot; Buenos Aires", tag: "Mobile", rate: "$30/hr", match: 91 },
      { name: "Renata S.", role: "AI voice engineer &middot; S&atilde;o Paulo", tag: "AI", rate: "$40/hr", match: 89 },
      { name: "Tomas L.", role: "Salesforce architect &middot; Bogot&aacute;", tag: "CRM", rate: "$60/hr", match: 87 }].
      map((r) =>
      <div className="dash-row" key={r.name}>
            <div>
              <div className="who">{r.name}</div>
              <div className="sub" dangerouslySetInnerHTML={{ __html: r.role }} />
            </div>
            <span className="tag">{r.tag}</span>
            <span className="rate">{r.rate}</span>
            <span className="match-bar"><span style={{ width: r.match + "%" }} /></span>
          </div>
      )}
      </div>
    </div>
  </div>;


const HeroMapArtifact = () =>
<div className="hero-art map">
    <div className="map-top">
      <span>Nearshore network</span>
      <span style={{ fontFamily: "var(--font-mono)" }}>PST &harr; ART</span>
    </div>
    <svg viewBox="0 0 520 320" xmlns="http://www.w3.org/2000/svg">
      <defs>
        <pattern id="grid" width="20" height="20" patternUnits="userSpaceOnUse">
          <path d="M 20 0 L 0 0 0 20" fill="none" stroke="#2a2825" strokeWidth="0.5" />
        </pattern>
      </defs>
      <rect width="520" height="320" fill="url(#grid)" />

      {/* very rough Americas silhouette */}
      <path
      d="M 80 60 L 180 50 L 230 70 L 250 110 L 240 150 L 260 170 L 250 210 L 270 240 L 240 280 L 200 290 L 180 270 L 170 240 L 160 200 L 130 180 L 110 150 L 90 110 Z"
      fill="#252320" stroke="#3a3833" strokeWidth="1" />
    
      <path
      d="M 250 110 L 300 100 L 360 110 L 410 130 L 440 170 L 430 220 L 400 250 L 350 240 L 320 210 L 300 180 L 280 150 Z"
      fill="#252320" stroke="#3a3833" strokeWidth="1" />
    

      {/* arcs */}
      <g stroke="#f4901e" strokeWidth="1.2" fill="none" opacity="0.85">
        <path d="M 140 90 Q 180 30 220 95" />
        <path d="M 140 90 Q 170 50 230 130" />
        <path d="M 140 90 Q 230 100 310 200" />
        <path d="M 140 90 Q 260 60 380 230" />
      </g>

      {/* origin: NA */}
      <g>
        <circle cx="140" cy="90" r="8" fill="#f4901e" />
        <circle cx="140" cy="90" r="14" fill="none" stroke="#f4901e" strokeOpacity="0.3" strokeWidth="2" />
        <text x="155" y="92" fill="#faf9f5" fontSize="11" fontFamily="Inter">North America</text>
        <text x="155" y="106" fill="#a09d96" fontSize="10" fontFamily="Inter">clients &middot; PST &middot; EST</text>
      </g>

      {/* nearshore hubs */}
      {[
    { x: 220, y: 95, label: "Mexico City", sub: "CDMX" },
    { x: 230, y: 130, label: "Guadalajara", sub: "GDL" },
    { x: 310, y: 200, label: "Bogot\u00e1", sub: "BOG" },
    { x: 380, y: 230, label: "S\u00e3o Paulo", sub: "GRU" },
    { x: 360, y: 260, label: "Buenos Aires", sub: "EZE" }].
    map((p) =>
    <g key={p.label}>
          <circle cx={p.x} cy={p.y} r="5" fill="#faf9f5" />
          <circle cx={p.x} cy={p.y} r="9" fill="none" stroke="#faf9f5" strokeOpacity="0.4" strokeWidth="1" />
          <text x={p.x + 10} y={p.y - 2} fill="#faf9f5" fontSize="10" fontFamily="Inter">{p.label}</text>
          <text x={p.x + 10} y={p.y + 10} fill="#a09d96" fontSize="9" fontFamily="JetBrains Mono">{p.sub}</text>
        </g>
    )}
    </svg>
    <div className="map-foot">
      <span><strong>5</strong> delivery hubs</span>
      <span><strong>4,000+</strong> vetted consultants</span>
      <span><strong>0&ndash;3 hr</strong> overlap with USA</span>
    </div>
  </div>;


const Hero = ({ onCta, onSecondary, variant = "code" }) => {
  const isEditorial = variant === "editorial";
  return (
    <section className={"container hero" + (isEditorial ? " is-editorial" : "")}>
      <div className="reveal">
        <div className="eyebrow">
          <span className="mark" />
          NEARSHORE &middot; LATAM &middot; AI-NATIVE
        </div>
        <h1 className="display-xl">Nearshore engineering, matched in seconds.</h1>
        <p className="hero-sub">
          Acerti pairs North American clients with senior engineers, ERP consultants,
          and AI voice teams across Mexico and LATAM. Up to <strong style={{ color: "var(--ink)", fontWeight: 500 }}>60% under onshore</strong> &mdash; without the hand-offs.
        </p>
        <div className="hero-cta">
          <button className="btn btn-primary" onClick={onCta}>CONTACT US</button>
          <button className="btn btn-secondary" onClick={onSecondary}>View delivery models &rarr;</button>
        </div>
        <div className="hero-pill-row">
          <span>Trusted by mid-market teams in the USA &amp; Canada</span>
          <span className="dot" />
          <span>SAP &middot; Oracle &middot; Microsoft Dynamics 365</span>
          <span className="dot" />
          <span>C1+ English floor</span>
        </div>
      </div>
      {!isEditorial &&
      <div className="hero-art-wrap reveal" data-d="2">
          {variant === "dashboard" && <HeroDashArtifact />}
          {variant === "map" && <HeroMapArtifact />}
          {variant === "code" && <HeroCodeArtifact />}
        </div>
      }
    </section>);

};

Object.assign(window, { Hero, HeroCodeArtifact, HeroDashArtifact, HeroMapArtifact });