/* global React */

/* ---------- inline icons (rounded, friendly) ---------- */
const Ico = {
  Globe: () => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="9" /><path d="M3 12h18M12 3a14 14 0 010 18M12 3a14 14 0 000 18" /></svg>,
  Heart: () => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M20.84 4.6a5.5 5.5 0 00-7.78 0L12 5.66l-1.06-1.07a5.5 5.5 0 10-7.78 7.78l1.06 1.07L12 21.23l7.78-7.78 1.06-1.07a5.5 5.5 0 000-7.78z" /></svg>,
  Sun: () => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="4" /><path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41" /></svg>,
  Spark: () => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M12 3l1.9 5.6L19.5 10l-5.6 1.9L12 17.5l-1.9-5.6L4.5 10l5.6-1.4z" /></svg>,
  Shield: () => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" /><path d="M9 12l2 2 4-4" /></svg>,
  Users: () => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2" /><circle cx="9" cy="7" r="4" /><path d="M23 21v-2a4 4 0 00-3-3.87M16 3.13a4 4 0 010 7.75" /></svg>,
  Smile: () => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="10" /><path d="M8 14s1.5 2 4 2 4-2 4-2M9 9h.01M15 9h.01" /></svg>,
  Coin: () => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="9" /><path d="M12 7v10M9 10h4.5a2 2 0 010 4H9" /></svg>
};

/* ============================================================
   HomeHero — joyful, with floating shapes + avatar cluster
   ============================================================ */
function HomeHero() {
  return (
    <section className="section section--lg" data-screen-label="01 home-hero" style={{ paddingTop: 80, position: "relative", overflow: "hidden" }}>
      {/* background blobs */}
      <span className="blob blob--mint floaty" style={{ width: 380, height: 380, top: -120, right: -120 }} />
      <span className="blob blob--mint floaty-2" style={{ width: 280, height: 280, bottom: -80, left: -80, opacity: .35 }} />

      <div className="container" style={{ position: "relative", zIndex: 1 }}>
        <div className="grid pop-in" style={{ gridTemplateColumns: "1.2fr 1fr", gap: 64, alignItems: "center" }}>
          <div>
            <div className="pill" style={{ marginBottom: 28 }}>
              <span className="emoji">🌴</span> Boutique EOR · LatAm &amp; the Caribbean
            </div>
            <h1 className="display" style={{ fontSize: "clamp(2.8rem, 6.8vw, 5.6rem)", maxWidth: "16ch", letterSpacing: "-0.04em" }}>
              Hire happy<br />
              <span style={{ color: "var(--amber-deep)", position: "relative", display: "inline-block" }}>
                humans
                <svg viewBox="0 0 200 14" preserveAspectRatio="none" style={{ position: "absolute", left: 0, right: 0, bottom: -6, width: "100%", height: 12 }}>
                  <path d="M2 8 Q 50 2 100 7 T 198 6" stroke="var(--amber)" strokeWidth="4" fill="none" strokeLinecap="round" />
                </svg>
              </span>,<br />
              not headcount.
            </h1>
            <p className="lead" style={{ marginTop: 32, maxWidth: "52ch" }}>
              Midorick is a boutique Employer of Record helping growing companies build dedicated, happy teams across LatAm &amp; the Caribbean — without the compliance headaches.
            </p>
            <div className="row" style={{ marginTop: 36, gap: 14 }}>
              <a href="contact.html" className="btn btn--amber">
                Book a free consult <span className="arrow">→</span>
              </a>
              <a href="services.html" className="btn btn--ghost">See what we do</a>
            </div>
          </div>

          {/* visual cluster — playful globe with role chips */}
          <window.HeroGlobe />
        </div>
      </div>
    </section>);

}

/* ============================================================
   HomeRoles — softer card grid with colored icon swatches
   ============================================================ */
function HomeRoles() {
  const roles = [
  { ico: "Users", tone: "mint", t: "Software developers", n: "Full-stack · mobile · QA" },
  { ico: "Smile", tone: "peach", t: "Customer service agents", n: "Bilingual · 24/5 coverage" },
  { ico: "Spark", tone: "butter", t: "Data analysts", n: "SQL · BI · ops reporting" },
  { ico: "Heart", tone: "sky", t: "Graphic designers", n: "Brand · web · production" },
  { ico: "Coin", tone: "lilac", t: "Accountants", n: "US GAAP · bookkeeping" },
  { ico: "Sun", tone: "mint", t: "Marketing specialists", n: "Paid · content · lifecycle" },
  { ico: "Globe", tone: "peach", t: "Recruiters", n: "Sourcing · screening" },
  { ico: "Shield", tone: "sky", t: "Ops & back-office", n: "Admin · finance ops · VAs" }];

  return (
    <section className="section" data-screen-label="02 roles">
      <div className="container">
        <div className="row-between" style={{ marginBottom: 56, alignItems: "flex-end" }}>
          <div>
            <div className="pill pill--peach" style={{ marginBottom: 20 }}>
              <span className="emoji">✨</span> Eight roles, one trusted pipeline
            </div>
            <h2 style={{ maxWidth: "18ch" }}>Real people. Carefully matched.</h2>
          </div>
          <p className="muted" style={{ maxWidth: 380 }}>
            English-fluent professionals, screened on technical skill, communication,
            and culture-fit — ready to plug into your team in two to four weeks.
          </p>
        </div>

        <div className="grid grid-4" style={{ gap: 20 }}>
          {roles.map((r, i) => {
            const Icon = Ico[r.ico];
            return (
              <a key={i} href="services.html" className="feat">
                <div className={`ico ico--${r.tone}`}><Icon /></div>
                <h5 style={{ fontWeight: 500, fontSize: "1.1rem" }}>{r.t}</h5>
                <p className="muted" style={{ fontSize: ".9rem", marginTop: 6 }}>{r.n}</p>
              </a>);

          })}
        </div>
      </div>
    </section>);

}

/* ============================================================
   HomeWhyNearshore — soft mint section with playful cards
   ============================================================ */
function HomeWhyNearshore() {
  const cards = [
  { ico: "Users", tone: "mint", t: "Talented & prepared", d: "Cheerful, hospitable, and trained — ready to innovate alongside your team from day one." },
  { ico: "Sun", tone: "butter", t: "Same-day collaboration", d: "AST year-round. 9am Eastern actually means 9am Eastern — for everyone on the call." },
  { ico: "Coin", tone: "peach", t: "Tariff-free flow", d: "No import/export tariff between the DR and foreign countries on goods or services." },
  { ico: "Spark", tone: "sky", t: "Stable, fast-growing", d: "The fastest-growing economy in the region, with a stable government and a young workforce." },
  { ico: "Globe", tone: "lilac", t: "English fluency", d: "English is taught as a second language across the country. Customers won't notice the handoff." },
  { ico: "Heart", tone: "mint", t: "Boutique by design", d: "We stop growing at the size where every client still gets a name, not a ticket." }];

  return (
    <section className="section section--mint" data-screen-label="03 why-nearshore" style={{ position: "relative", overflow: "hidden" }}>
      <span className="blob blob--mint floaty" style={{ width: 340, height: 340, top: -100, left: "60%" }} />
      <span className="blob blob--peach floaty-2" style={{ width: 260, height: 260, bottom: -100, right: 40, opacity: .4 }} />

      <div className="container" style={{ position: "relative", zIndex: 1 }}>
        <div style={{ textAlign: "center", marginBottom: 64, maxWidth: 760, marginInline: "auto" }}>
          <div className="pill" style={{ marginBottom: 20 }}>
            <span className="emoji">🌎</span> Why nearshore
          </div>
          <h2 style={{ fontSize: "clamp(2rem, 5vw, 3.4rem)" }}>The Republic of Talent.</h2>
          <p className="lead" style={{ marginTop: 20, color: "var(--ink-2)" }}>
            Six reasons companies choose LatAm &amp; the Caribbean — and one reason they choose Midorick.
          </p>
        </div>

        <div className="grid grid-3" style={{ gap: 24 }}>
          {cards.map((c, i) => {
            const Icon = Ico[c.ico];
            return (
              <div className="feat" key={i}>
                <div className={`ico ico--${c.tone}`}><Icon /></div>
                <h4 style={{ fontSize: "1.25rem", fontWeight: 500 }}>{c.t}</h4>
                <p style={{ marginTop: 10, color: "var(--ink-2)" }}>{c.d}</p>
              </div>);

          })}
        </div>
      </div>
    </section>);

}

/* ============================================================
   HomeHowWeWork — friendly stepped cards with connectors
   ============================================================ */
function HomeHowWeWork() {
  const steps = [
  { n: "01", emoji: "👂", t: "We Listen", d: "Two calls, no pitch deck. We learn the role, the team, the timezone, the deal-breakers." },
  { n: "02", emoji: "🔎", t: "We Source", d: "Active candidate search across our LatAm & Caribbean networks — not a database scrape." },
  { n: "03", emoji: "🧪", t: "We Screen", d: "Technical, cultural, and language assessment before a single CV reaches your inbox." },
  { n: "04", emoji: "🤝", t: "You Select", d: "Three to five vetted candidates. You interview. You decide. We move at your pace." },
  { n: "05", emoji: "🎉", t: "We Hire & Onboard", d: "Full Employer-of-Record setup: contract, benefits, payroll, equipment, day-one ready." },
  { n: "06", emoji: "💚", t: "We Support", d: "Ongoing HR, engagement, and compliance. Quarterly reviews. Annual raises. Real retention." }];

  return (
    <section className="section" data-screen-label="04 how" style={{ position: "relative", overflow: "hidden" }}>
      <span className="blob blob--butter floaty" style={{ width: 280, height: 280, top: 100, right: -100, opacity: .35 }} />
      <div className="container">
        <div style={{ textAlign: "center", marginBottom: 56, maxWidth: 720, marginInline: "auto" }}>
          <div className="pill pill--butter" style={{ marginBottom: 20 }}>
            <span className="emoji">🌟</span> How we work
          </div>
          <h2>From brief to first paycheck<br />in twenty-one days.</h2>
        </div>

        <div className="steps">
          {steps.map((s) =>
          <div className="step" key={s.n}>
              <div style={{
              width: 56, height: 56, borderRadius: 18,
              background: "var(--amber-soft)",
              display: "flex", alignItems: "center", justifyContent: "center",
              fontSize: "1.75rem", marginBottom: 18
            }}>
                {s.emoji}
              </div>
              <div className="mono muted" style={{ fontSize: ".72rem", letterSpacing: ".1em", marginBottom: 6 }}>
                STEP / {s.n}
              </div>
              <h5 style={{ fontWeight: 500, fontSize: "1.2rem" }}>{s.t}</h5>
              <p style={{ marginTop: 8, color: "var(--ink-2)" }}>{s.d}</p>
            </div>
          )}
        </div>
      </div>
    </section>);

}

/* ============================================================
   HomeChallengesSolved — soft peach panel
   ============================================================ */
function HomeChallengesSolved() {
  const items = [
  "Limited access to a vast talent pool.",
  "Shortage of qualified candidates.",
  "High employee costs.",
  "Time zone difference.",
  "Language and culture barrier.",
  "Inefficient recruiting and admin process.",
  "Risk of hiring permanent contractors.",
  "Juggling payroll, onboarding, and culture-fit."];

  return (
    <section className="section section--cream" data-screen-label="05 challenges" style={{ position: "relative", overflow: "hidden" }}>
      <span className="blob blob--mint floaty" style={{ width: 360, height: 360, top: -120, left: -120, opacity: .4 }} />
      <span className="blob blob--mint floaty-2" style={{ width: 240, height: 240, bottom: -80, right: -80, opacity: .25 }} />

      <div className="container" style={{ position: "relative", zIndex: 1 }}>
        <div className="grid" style={{ gridTemplateColumns: "1fr 1.3fr", gap: 80, alignItems: "start" }}>
          <div>
            <div className="pill pill--peach" style={{ marginBottom: 20 }}>
              <span className="emoji">💪</span> Your challenges, solved
            </div>
            <h2>The eight things keeping you<br />from hiring abroad.</h2>
            <p className="lead" style={{ marginTop: 24, color: "var(--ink-2)" }}>
              Each one is a Tuesday afternoon for us. We've solved them, written them down,
              and now run the playbook for every client we take.
            </p>
            <div style={{ marginTop: 32 }}>
              <a href="contact.html" className="btn btn--primary">
                Bring us yours <span className="arrow">→</span>
              </a>
            </div>
          </div>

          <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14 }}>
            {items.map((x, i) =>
            <li key={i} className="card" style={{
              padding: "18px 20px",
              display: "flex", alignItems: "center", gap: 14,
              background: "var(--paper)",
              borderRadius: 999
            }}>
                <span style={{
                width: 32, height: 32, borderRadius: "50%",
                background: "var(--amber)",
                color: "var(--paper)",
                display: "flex", alignItems: "center", justifyContent: "center",
                fontSize: ".9rem", fontWeight: 600, flexShrink: 0
              }}>✓</span>
                <span style={{ fontSize: ".95rem", color: "var(--ink)" }}>{x}</span>
              </li>
            )}
          </ul>
        </div>
      </div>
    </section>);

}

/* ============================================================
   HomeClients — animated marquee
   ============================================================ */
function HomeClients() {
  const list = ["ELLSWORTH", "+ 10 MORE"];
  const doubled = [...list, ...list, ...list, ...list];
  return (
    <section className="section section--tight" data-screen-label="06 clients">
      <div className="container">
        <div style={{ textAlign: "center", marginBottom: 32 }}>
          <div className="pill pill--sky" style={{ marginBottom: 16 }}>
            <span className="emoji">🤍</span> Trusted since 2020
          </div>
          <h3 style={{ fontSize: "1.4rem", fontWeight: 500, color: "var(--ink-2)" }}>
            Scale-ups &amp; mid-market companies who pick us — and stay.
          </h3>
        </div>
      </div>
      <div className="clients">
        <div className="track">
          {doubled.map((c, i) => <div className="item" key={i}>{c}</div>)}
        </div>
      </div>
    </section>);

}


/* ============================================================
   HomeTestimonials — client feedback carousel
   ============================================================ */
function HomeTestimonials() {
  const testimonials = [
    {
      quote: "The Midorick team is a joy to work with. They show a sense of urgency, and do a great job finding the best candidates to interview. We were able to stand up 6 DR resources in a month in a half with the help of the Midorick team.",
      client: "Verified Client",
      sector: "Technology Sector",
      source: "Annual Customer Satisfaction Survey, April 2026"
    },
    {
      quote: "The Midorick team is very professional and kind and has been very helpful with our requests. Their Dave and Busters event was also a big hit with my team!",
      client: "Verified Client",
      sector: "Technology Sector",
      source: "Annual Customer Satisfaction Survey, April 2026"
    },
    {
      quote: "Jean has been great to work with and he found 2 great candidates very early in the process. I was very impressed!",
      client: "Verified Client",
      sector: "Technology Sector",
      source: "Annual Customer Satisfaction Survey, April 2026"
    }
  ];
  const [current, setCurrent] = React.useState(0);
  const [paused, setPaused] = React.useState(false);
  const count = testimonials.length;

  React.useEffect(() => {
    if (paused) return;
    const timer = setInterval(() => {
      setCurrent(c => (c + 1) % count);
    }, 6000);
    return () => clearInterval(timer);
  }, [paused, count]);

  const go = (dir) => {
    setCurrent(c => (c + dir + count) % count);
  };

  return (
    <section className="section" data-screen-label="07 testimonials" style={{ position: "relative", overflow: "hidden" }}
      onMouseEnter={() => setPaused(true)}
      onMouseLeave={() => setPaused(false)}>
      <span className="blob blob--butter floaty" style={{ width: 320, height: 320, top: -100, right: "10%", opacity: .35 }} />
      <span className="blob blob--mint floaty-2" style={{ width: 260, height: 260, bottom: -80, left: "5%", opacity: .25 }} />

      <div className="container" style={{ maxWidth: 940, position: "relative", zIndex: 1 }}>
        <div style={{ textAlign: "center", marginBottom: 48 }}>
          <div className="pill" style={{ marginBottom: 20 }}>
            <span className="emoji">💬</span> What our clients say
          </div>
          <h2 style={{ fontSize: "clamp(2rem, 5vw, 3.2rem)" }}>Don't take our word for it.</h2>
        </div>

        <div className="carousel" style={{ position: "relative" }}>
          {/* slides */}
          <div className="carousel__viewport" style={{ overflow: "hidden", borderRadius: 36 }}>
            <div className="carousel__track" style={{
              display: "flex",
              transition: "transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1)",
              transform: `translateX(-${current * 100}%)`
            }}>
              {testimonials.map((t, i) => (
                <div key={i} className="carousel__slide" style={{
                  minWidth: "100%",
                  padding: "48px 52px",
                  boxSizing: "border-box"
                }}>
                  <div className="card" style={{
                    padding: "48px 44px",
                    borderRadius: 32,
                    background: "var(--paper)",
                    boxShadow: "var(--shadow-md)",
                    height: "100%",
                    display: "flex",
                    flexDirection: "column",
                    justifyContent: "space-between",
                    minHeight: 340
                  }}>
                    <div>
                      <div style={{ fontSize: "3rem", lineHeight: 1, color: "var(--amber)", marginBottom: 12, fontFamily: "serif" }}>"</div>
                      <p style={{
                        fontSize: "clamp(1.15rem, 2vw, 1.6rem)",
                        lineHeight: 1.4,
                        letterSpacing: "-0.01em",
                        color: "var(--ink)",
                        fontWeight: 400
                      }}>{t.quote}</p>
                    </div>
                    <div style={{ marginTop: 32 }}>
                      <div className="row" style={{ gap: 14 }}>
                        <span className="avatar avatar--mint" style={{ fontSize: ".8rem" }}>★</span>
                        <div>
                          <div style={{ fontWeight: 500, fontSize: "1rem" }}>{t.client}</div>
                          <div className="muted" style={{ fontSize: ".85rem" }}>{t.sector}</div>
                        </div>
                      </div>
                      <div className="muted mono" style={{ fontSize: ".75rem", marginTop: 14, opacity: 0.7 }}>
                        Source: {t.source}
                      </div>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </div>

          {/* controls */}
          <div className="row-between" style={{ marginTop: 28, alignItems: "center" }}>
            {/* dots */}
            <div className="carousel__dots" style={{ display: "flex", gap: 10 }}>
              {testimonials.map((_, i) => (
                <button key={i}
                  onClick={() => setCurrent(i)}
                  aria-label={`Go to testimonial ${i + 1}`}
                  className="carousel__dot"
                  style={{
                    width: i === current ? 32 : 10,
                    height: 10,
                    borderRadius: 999,
                    border: "none",
                    background: i === current ? "var(--amber)" : "var(--fog-2)",
                    cursor: "pointer",
                    transition: "all 0.3s ease"
                  }} />
              ))}
            </div>
            {/* arrows */}
            <div style={{ display: "flex", gap: 10 }}>
              <button onClick={() => go(-1)} aria-label="Previous" className="carousel__arrow" style={{
                width: 44, height: 44, borderRadius: "50%",
                border: "1px solid var(--fog-2)", background: "var(--paper)",
                display: "flex", alignItems: "center", justifyContent: "center",
                cursor: "pointer", transition: "all 0.2s ease",
                color: "var(--ink-2)"
              }}
                onMouseEnter={e => { e.currentTarget.style.borderColor = "var(--amber)"; e.currentTarget.style.color = "var(--amber-deep)"; }}
                onMouseLeave={e => { e.currentTarget.style.borderColor = "var(--fog-2)"; e.currentTarget.style.color = "var(--ink-2)"; }}>
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ width: 20, height: 20 }}><path d="M15 18l-6-6 6-6" /></svg>
              </button>
              <button onClick={() => go(1)} aria-label="Next" className="carousel__arrow" style={{
                width: 44, height: 44, borderRadius: "50%",
                border: "1px solid var(--fog-2)", background: "var(--paper)",
                display: "flex", alignItems: "center", justifyContent: "center",
                cursor: "pointer", transition: "all 0.2s ease",
                color: "var(--ink-2)"
              }}
                onMouseEnter={e => { e.currentTarget.style.borderColor = "var(--amber)"; e.currentTarget.style.color = "var(--amber-deep)"; }}
                onMouseLeave={e => { e.currentTarget.style.borderColor = "var(--fog-2)"; e.currentTarget.style.color = "var(--ink-2)"; }}>
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ width: 20, height: 20 }}><path d="M9 18l6-6-6-6" /></svg>
              </button>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   HomeQuote — soft butter card
   ============================================================ */
function HomeQuote() {
  return (
    <section className="section" data-screen-label="07 quote" style={{ position: "relative", overflow: "hidden" }}>
      <span className="blob blob--butter floaty" style={{ width: 320, height: 320, top: -100, right: "10%", opacity: .35 }} />
      <div className="container" style={{ maxWidth: 920, position: "relative", zIndex: 1 }}>
        <div className="card" style={{ padding: "56px 48px", borderRadius: 36, background: "var(--paper)", boxShadow: "var(--shadow-md)" }}>
          <div className="pill" style={{ marginBottom: 24 }}>
            <span className="emoji">💬</span> From a five-year client
          </div>
          <p style={{
            fontSize: "clamp(1.4rem, 2.6vw, 2.1rem)",
            lineHeight: 1.3,
            letterSpacing: "-0.015em",
            color: "var(--ink)",
            fontWeight: 400
          }}>
            "We hired four engineers and a designer through Midorick over two years.
            Same five people are still here. That has never been our experience with
            a staffing partner before — and it's the only reason we'd recommend one."
          </p>
          <div className="row" style={{ marginTop: 32, gap: 16 }}>
            <span className="avatar avatar--mint">VP</span>
            <div>
              <div style={{ fontWeight: 500 }}>VP of Engineering</div>
              <div className="muted" style={{ fontSize: ".85rem" }}>
                Mid-market SaaS · client since 2021
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>);

}

/* ============================================================
   HomeCTA — friendly mint band with floating shapes
   ============================================================ */
function HomeCTA() {
  return (
    <section className="section section--lg section--mint" data-screen-label="08 cta" style={{ position: "relative", overflow: "hidden" }}>
      <span className="blob blob--mint floaty" style={{ width: 420, height: 420, top: -150, left: "60%" }} />
      <span className="blob blob--peach floaty-2" style={{ width: 260, height: 260, bottom: -100, left: -50, opacity: .4 }} />
      <span className="shape shape--squircle floaty" style={{ width: 80, height: 80, top: 80, left: 80 }} />
      <span className="shape shape--peach floaty-2" style={{ width: 60, height: 60, bottom: 100, right: 120, borderRadius: "50%" }} />

      <div className="container" style={{ textAlign: "center", maxWidth: 760, position: "relative", zIndex: 1 }}>
        <div className="pill" style={{ marginBottom: 24 }}>
          <span className="emoji">🎯</span> Ready when you are
        </div>
        <h2 style={{ fontSize: "clamp(2.2rem, 5.5vw, 3.8rem)", letterSpacing: "-0.03em" }}>
          Save 38% on hiring costs.<br />
          <span style={{ color: "var(--amber-deep)" }}>Keep the team you love.</span>
        </h2>
        <p className="lead" style={{ marginTop: 24, color: "var(--ink-2)" }}>
          A 30-minute consult, no pitch deck. Bring a role, a headcount plan, or just a question
          — and we'll give you our honest read.
        </p>
        <div className="row" style={{ marginTop: 36, justifyContent: "center" }}>
          <a href="contact.html" className="btn btn--primary">Book a free consult <span className="arrow">→</span></a>
          <a href="services.html" className="btn btn--ghost">Browse services</a>
        </div>
      </div>
    </section>);

}

/* ============================================================
   HeroGlobe — playful spinning globe with role chips orbiting
   ============================================================ */
function HeroGlobe() {
  // Role chips placed around the globe at fixed angles + radii.
  // Each has a small dot color and a hint of where the talent role lives.
  const roles = [
  { t: "Automation Engineer", n: "RPA · workflow", a: -90, r: 0.85, tone: "amber", trending: true },
  { t: "Jr. AI Associate", n: "Prompt · ops", a: -45, r: 0.95, tone: "deep", trending: true },
  { t: "Accountants", n: "US GAAP · books", a: 90, r: 0.85, tone: "amber" },
  { t: "Finance", n: "FP&A · controls", a: 45, r: 0.95, tone: "deep" },
  { t: "HR", n: "People ops", a: 0, r: 0.85, tone: "amber" },
  { t: "Customer Service", n: "Bilingual · 24/5", a: 135, r: 0.95, tone: "deep" },
  { t: "Admin", n: "EA · back-office", a: 180, r: 0.85, tone: "amber" },
  { t: "Marketing", n: "Content · lifecycle", a: 225, r: 0.95, tone: "deep" }];




  return (
    <div className="globe-wrap" aria-hidden="false">
      {/* role chips, absolutely placed around the globe */}
      {roles.map((r, i) => {
        const rad = r.a * Math.PI / 180;
        const x = 50 + Math.cos(rad) * 50 * r.r;
        const y = 50 + Math.sin(rad) * 50 * r.r;
        return (
          <div
            key={i}
            className={`globe-chip globe-chip--${r.tone}${r.trending ? " globe-chip--trending" : ""} pop-in`}
            style={{
              left: `${x}%`, top: `${y}%`,
              animationDelay: `${0.08 * i}s`, margin: "0px", alignItems: "center", width: "165px", padding: "8px 2px", borderWidth: "1px 2px", gap: "8px"
            }}>
            
            {r.trending &&
            <span className="globe-chip__badge">
                <svg viewBox="0 0 24 24" fill="currentColor" width="10" height="10" aria-hidden="true">
                  <path d="M12 2.5l2.6 6.3 6.9.5-5.3 4.5 1.7 6.7L12 17l-5.9 3.5 1.7-6.7L2.5 9.3l6.9-.5z" />
                </svg>
                Trending
              </span>
            }
            <span className="globe-chip__dot" />
            <div>
              <div className="globe-chip__t">{r.t}</div>
              <div className="globe-chip__n">{r.n}</div>
            </div>
          </div>);

      })}

      {/* the globe itself */}
      <div className="globe">
        <div className="globe__shadow" />
        <div className="globe__sphere">
          <div className="globe__highlight" />
          {/* meridians + parallels */}
          <svg className="globe__lines" viewBox="0 0 100 100" preserveAspectRatio="none">
            {/* equator + parallels */}
            <ellipse cx="50" cy="50" rx="48" ry="14" fill="none" stroke="currentColor" strokeWidth=".5" opacity=".55" />
            <ellipse cx="50" cy="35" rx="46" ry="10" fill="none" stroke="currentColor" strokeWidth=".4" opacity=".35" />
            <ellipse cx="50" cy="65" rx="46" ry="10" fill="none" stroke="currentColor" strokeWidth=".4" opacity=".35" />
            <ellipse cx="50" cy="22" rx="38" ry="6" fill="none" stroke="currentColor" strokeWidth=".4" opacity=".25" />
            <ellipse cx="50" cy="78" rx="38" ry="6" fill="none" stroke="currentColor" strokeWidth=".4" opacity=".25" />
            {/* meridians */}
            <ellipse cx="50" cy="50" rx="14" ry="48" fill="none" stroke="currentColor" strokeWidth=".5" opacity=".55" />
            <ellipse cx="50" cy="50" rx="30" ry="48" fill="none" stroke="currentColor" strokeWidth=".4" opacity=".35" />
            <ellipse cx="50" cy="50" rx="42" ry="48" fill="none" stroke="currentColor" strokeWidth=".4" opacity=".25" />
            {/* outer ring */}
            <circle cx="50" cy="50" r="49" fill="none" stroke="currentColor" strokeWidth=".7" opacity=".7" />
          </svg>

          {/* Continents — dotted-map style for a globe */}
          <svg className="globe__land" viewBox="0 0 200 200" preserveAspectRatio="none">
            <defs>
              <clipPath id="globeDisc">
                <circle cx="100" cy="100" r="98" />
              </clipPath>
              {/* dotted texture */}
              <pattern id="globeDots" x="0" y="0" width="3" height="3" patternUnits="userSpaceOnUse">
                <circle cx="1.5" cy="1.5" r=".75" fill="currentColor" />
              </pattern>
            </defs>
            <g clipPath="url(#globeDisc)">
              {/* Americas-centered land masses, filled with the dot pattern */}
              {/* North America */}
              <path fill="url(#globeDots)" d="
                M 14 36
                C 22 28, 38 26, 52 30
                C 64 33, 76 38, 84 44
                C 90 48, 96 52, 100 58
                C 102 62, 100 66, 96 66
                C 92 66, 88 64, 84 62
                L 80 64
                C 82 70, 86 76, 86 82
                C 86 88, 82 92, 76 92
                C 70 92, 66 88, 64 82
                C 62 76, 58 72, 52 70
                C 46 68, 40 70, 38 76
                C 36 82, 38 88, 44 92
                C 50 96, 56 100, 56 104
                C 56 108, 52 110, 46 108
                C 38 106, 30 100, 24 92
                C 18 84, 14 74, 12 62
                C 10 50, 10 42, 14 36 Z
              " />


















              


















              


















              


















              


















              


















              


















              


















              


















              


















              


















              


















              


















              


















              


















              


















              


















              


















              


















              


















              


















              


















              


















              


















              


















              


















              


















              


















              


















              


















              


















              


















              


















              


















              


















              


















              


















              

              {/* Central America narrow strip → Panama */}
              <path fill="url(#globeDots)" d="
                M 56 108
                C 60 112, 66 116, 72 122
                C 76 126, 78 130, 76 132
                C 74 134, 70 132, 66 128
                C 60 124, 56 118, 54 114
                C 52 110, 54 108, 56 108 Z
              " />






              






              






              






              






              






              






              






              






              






              






              






              






              






              






              






              






              






              






              






              






              






              






              






              






              






              






              






              






              






              






              






              






              






              






              






              






              

              {/* South America */}
              <path fill="url(#globeDots)" d="
                M 80 130
                C 92 126, 106 128, 114 136
                C 120 142, 122 152, 118 162
                C 114 172, 108 178, 104 180
                C 100 184, 96 184, 94 180
                C 92 174, 94 166, 90 158
                C 86 152, 80 148, 76 142
                C 72 136, 74 132, 80 130 Z
              " />








              








              








              








              








              








              








              








              








              








              








              








              








              








              








              








              








              








              








              








              








              








              








              








              








              








              








              








              








              








              








              








              








              








              








              








              








              

              {/* Greenland */}
              <path fill="url(#globeDots)" d="
                M 116 22
                C 126 20, 138 24, 142 32
                C 144 40, 140 46, 132 48
                C 124 50, 116 46, 114 38
                C 112 30, 112 24, 116 22 Z
              " />





              





              





              





              





              





              





              





              





              





              





              





              





              





              





              





              





              





              





              





              





              





              





              





              





              





              





              





              





              





              





              





              





              





              





              





              





              

              {/* Africa (peeking in on the right) */}
              <path fill="url(#globeDots)" d="
                M 168 70
                C 178 68, 188 74, 192 86
                C 196 100, 194 116, 188 128
                C 184 138, 178 144, 172 144
                C 168 144, 166 138, 168 130
                C 170 120, 168 112, 166 102
                C 164 92, 164 80, 168 70 Z
              " />







              







              







              







              







              







              







              







              







              







              







              







              







              







              







              







              







              







              







              







              







              







              







              







              







              







              







              







              







              







              







              







              







              







              







              







              







              

              {/* Western Europe (small, peeking) */}
              <path fill="url(#globeDots)" d="
                M 158 50
                C 166 48, 174 52, 176 58
                C 178 64, 174 68, 168 68
                C 162 68, 158 64, 156 58
                C 156 54, 156 52, 158 50 Z
              " />





              





              





              





              





              





              





              





              





              





              





              





              





              





              





              





              





              





              





              





              





              





              





              





              





              





              





              





              





              





              





              





              





              





              





              





              





              
            </g>
          </svg>
        </div>

        {/* orbit rings around the globe */}
        <span className="globe-orbit globe-orbit--1" />
        <span className="globe-orbit globe-orbit--2" />
      </div>

      {/* sparkles */}
      <span className="sparkle floaty" style={{ position: "absolute", top: 30, left: 10, color: "var(--amber)", width: 22, height: 22 }} />
      <span className="sparkle floaty-2" style={{ position: "absolute", bottom: 60, right: 30, color: "var(--amber-deep)", width: 16, height: 16 }} />
      <span className="sparkle floaty" style={{ position: "absolute", top: 220, right: 0, color: "var(--amber)", width: 14, height: 14, animationDelay: "1.2s" }} />
    </div>);

}

Object.assign(window, {
  HomeHero, HomeRoles, HomeWhyNearshore, HomeHowWeWork,
  HomeChallengesSolved, HomeClients, HomeTestimonials, HomeQuote, HomeCTA,
  HeroGlobe
});