/* global React */

/* ---------- inline icons (rounded, friendly, shared) ---------- */
const PIco = {
  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>,
  Doc:    () => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/><path d="M14 2v6h6M9 13h6M9 17h6"/></svg>,
  Send:   () => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M22 2L11 13M22 2l-7 20-4-9-9-4 20-7z"/></svg>,
};

/* ============================================================
   ServicesGrid — joyful feat cards w/ colored icons + emojis
   ============================================================ */
function ServicesGrid() {
  const services = [
    { code: "S-01", emoji:"🤝", ico:"Shield", tone:"mint",   t: "Employer of Record (EOR)",
      d: "We legally employ your team in the Dominican Republic and across LatAm. Contracts, payroll, social security, taxes, terminations — handled.",
      bullets: ["Compliant local contracts", "Bi-monthly payroll", "Statutory benefits", "Termination & severance"] },
    { code: "S-02", emoji:"🔎", ico:"Users",  tone:"peach",  t: "Talent sourcing & screening",
      d: "Active candidate search using local networks — not a database scrape. Three to five vetted profiles per role, on average within ten business days.",
      bullets: ["Technical assessments", "Communication screen", "Culture-fit interview", "Reference checks"] },
    { code: "S-03", emoji:"🎉", ico:"Spark",  tone:"butter", t: "Onboarding & equipment",
      d: "Day-one ready means day-one ready. Hardware procurement, account provisioning, welcome week, and a named onboarding lead for every new hire.",
      bullets: ["Laptop & peripherals", "Accounts & access", "Welcome week", "30-60-90 plan"] },
    { code: "S-04", emoji:"💰", ico:"Coin",   tone:"sky",    t: "Payroll & benefits",
      d: "Bi-monthly payroll in DOP or USD. Health, dental, life, and bonus structures designed to compete with local market leaders, not to undercut them.",
      bullets: ["Health & dental", "Life insurance", "13th-month bonus", "Performance review cycles"] },
    { code: "S-05", emoji:"💚", ico:"Heart",  tone:"lilac",  t: "HR & people ops",
      d: "Ongoing HR support for the awkward conversations, the great ones, and everything in between. Quarterly check-ins, engagement surveys, retention reporting.",
      bullets: ["1:1 cadence support", "Engagement surveys", "Conflict resolution", "Annual reviews"] },
    { code: "S-06", emoji:"📚", ico:"Doc",    tone:"mint",   t: "Compliance & legal",
      d: "Local labor law is our home turf. We keep your team — and your company — on the right side of every Dominican and regional regulation.",
      bullets: ["Labor code compliance", "Social security (TSS)", "Tax reporting (DGII)", "Audit support"] },
  ];

  return (
    <section className="section" data-screen-label="01 services-grid" style={{ position:"relative", overflow:"hidden" }}>
      <span className="blob blob--mint floaty" style={{ width: 320, height: 320, top: -100, right: -120, opacity:.35 }}/>
      <span className="blob blob--butter floaty-2" style={{ width: 240, height: 240, bottom: -80, left: -60, opacity:.35 }}/>
      <div className="container" style={{ position:"relative", zIndex:1 }}>
        <div className="grid grid-2" style={{ gap: 28 }}>
          {services.map(s => {
            const Icon = PIco[s.ico];
            return (
              <article key={s.code} className="feat" style={{ padding: 36 }}>
                <div className="row-between" style={{ alignItems: "flex-start", marginBottom: 8 }}>
                  <div className={`ico ico--${s.tone}`} style={{ marginBottom: 0, fontSize: "1.6rem" }}>
                    <span style={{ fontSize: "1.6rem" }}>{s.emoji}</span>
                  </div>
                  <span className="mono" style={{ fontSize: ".72rem", color: "var(--ink-3)", letterSpacing: ".1em" }}>{s.code}</span>
                </div>
                <h3 style={{ marginTop: 12, fontSize: "1.5rem", fontWeight: 500 }}>{s.t}</h3>
                <p className="muted" style={{ marginTop: 12, fontSize: "1rem", lineHeight: 1.55 }}>{s.d}</p>
                <ul style={{ listStyle: "none", padding: 0, margin: "22px 0 0", display: "grid", gridTemplateColumns: "1fr 1fr", gap: 10 }}>
                  {s.bullets.map((b, j) => (
                    <li key={j} style={{
                      fontSize: ".88rem", color: "var(--ink-2)",
                      paddingLeft: 22, position: "relative",
                    }}>
                      <span style={{
                        position: "absolute", left: 0, top: 2,
                        width: 16, height: 16, borderRadius: "50%",
                        background: "var(--amber-soft)", color: "var(--amber-deep)",
                        display: "inline-flex", alignItems: "center", justifyContent: "center",
                        fontSize: ".7rem", fontWeight: 700,
                      }}>✓</span>
                      {b}
                    </li>
                  ))}
                </ul>
              </article>
            );
          })}
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   ServicesPricing — soft mint section with playful price card
   ============================================================ */
function ServicesPricing() {
  return (
    <section className="section section--mint" data-screen-label="02 pricing" style={{ position:"relative", overflow:"hidden" }}>
      <span className="blob blob--mint floaty" style={{ width: 380, height: 380, top: -140, left: "55%" }}/>
      <span className="blob blob--peach floaty-2" style={{ width: 240, height: 240, bottom: -80, left: -60, opacity:.4 }}/>
      <div className="container" style={{ position:"relative", zIndex:1 }}>
        <div className="grid" style={{ gridTemplateColumns: "1fr 1.6fr", gap: 64, alignItems: "start" }}>
          <div>
            <div className="pill" style={{ marginBottom: 20 }}>
              <span className="emoji">💸</span> How we charge
            </div>
            <h2>Flat fee.<br/>No surprises.</h2>
            <p className="lead muted" style={{ marginTop: 24 }}>
              One transparent monthly fee per hire. No markups on benefits, no kickbacks
              from insurers, no margin hidden in the payslip.
            </p>
          </div>

          <div className="price-card">
            <div className="row-between" style={{ position:"relative", zIndex:1 }}>
              <span className="pill"><span className="emoji">🌿</span> EOR fee · per hire / month</span>
              <span className="chip">Updated Q1 2026</span>
            </div>
            <div style={{ display: "flex", alignItems: "baseline", gap: 12, marginTop: 32 }}>
              <span style={{ fontSize: "5rem", fontWeight: 400, letterSpacing: "-0.04em", lineHeight: 1, color: "var(--amber-deep)" }}>$599</span>
              <span className="muted mono" style={{ fontSize: ".9rem" }}>USD / employee / month</span>
            </div>
            <p className="muted" style={{ marginTop: 18, maxWidth: "48ch" }}>
              Includes contracts, payroll, statutory benefits, HR, and compliance.
              Salary and stat. benefits passed through at cost. Volume pricing
              available from five hires.
            </p>
            <div className="ascii-rule" style={{ marginTop: 28, marginBottom: 28 }}>· · · · · · · · ·</div>
            <div className="row" style={{ gap: 32 }}>
              {[
                ["One-off setup", "$0"],
                ["Recruiting fee", "1× monthly salary"],
                ["Min. commitment", "3 months"],
              ].map(([l,v]) => (
                <div key={l}>
                  <div className="mono muted" style={{ fontSize: ".7rem", letterSpacing: ".1em", textTransform: "uppercase" }}>{l}</div>
                  <div style={{ fontSize: "1.4rem", marginTop: 6, fontWeight: 500 }}>{v}</div>
                </div>
              ))}
            </div>
            <div style={{ marginTop: 32 }}>
              <a href="contact.html" className="btn btn--primary">Get a written quote <span className="arrow">→</span></a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   ServicesCompare — joyful compare card
   ============================================================ */
function ServicesCompare() {
  const rows = [
    ["Dedicated point of contact",  "Yes — named account lead",      "Ticketing portal", "—"],
    ["Local talent network",         "Active sourcing in DR & LatAm", "Database",        "—"],
    ["Onboarding cadence",           "Day-one ready, hardware shipped", "Self-serve",   "Self-serve"],
    ["Payroll cycle",                "Bi-monthly · DOP or USD",       "Monthly",         "Varies"],
    ["Compliance scope",             "Labor · TSS · DGII",            "Generic",         "Limited"],
    ["Avg. candidate shortlist",     "10 business days",              "30 days",         "Unspecified"],
    ["Setup fee",                    "$0",                            "$2,000–10,000",   "Project-based"],
  ];
  return (
    <section className="section" data-screen-label="03 compare">
      <div className="container">
        <div className="row-between" style={{ marginBottom: 40, alignItems: "flex-end" }}>
          <div>
            <div className="pill pill--butter" style={{ marginBottom: 20 }}>
              <span className="emoji">⚖️</span> Versus the alternatives
            </div>
            <h2>Boutique service.<br/>Enterprise infrastructure.</h2>
          </div>
          <p className="muted" style={{ maxWidth: 360 }}>
            Most "global EORs" are a portal and a ticket queue. Most local agencies don't have
            the back-office to run real payroll. We sit in the middle, on purpose.
          </p>
        </div>

        <div className="compare">
          <div className="compare__head">
            <span>Capability</span>
            <span>Midorick</span>
            <span>Global EOR</span>
            <span>Local agency</span>
          </div>
          {rows.map((r, i) => (
            <div className="compare__row" key={i}>
              <span style={{ color: "var(--ink-2)" }}>{r[0]}</span>
              <span style={{ fontWeight: 500, color: "var(--amber-deep)" }}>{r[1]}</span>
              <span className="muted">{r[2]}</span>
              <span className="muted">{r[3]}</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   AboutStory — joyful with floating shapes
   ============================================================ */
function AboutStory() {
  return (
    <section className="section" data-screen-label="01 story" style={{ position:"relative", overflow:"hidden" }}>
      <span className="blob blob--mint floaty" style={{ width: 320, height: 320, top: 60, right: -80, opacity:.35 }}/>
      <span className="shape shape--squircle floaty-2" style={{ width: 70, height: 70, bottom: 120, left: "8%", opacity:.5 }}/>
      <div className="container" style={{ position:"relative", zIndex:1 }}>
        <div className="grid" style={{ gridTemplateColumns: "1fr 1.4fr", gap: 80, alignItems: "start" }}>
          <div style={{ position: "sticky", top: 100 }}>
            <div className="pill" style={{ marginBottom: 20 }}>
              <span className="emoji">🌱</span> The short version
            </div>
            <h2>Founded in 2020.<br/>Boutique by design.</h2>
            <img src="assets/team-photo.png?v=1783946144" alt="Midorick team" style={{ width: "100%", borderRadius: "var(--r-3)", marginTop: 36, display: "block", objectFit: "cover" }}/>
          </div>

          <div className="stack-6" style={{ fontSize: "1.1rem", lineHeight: 1.7, color: "var(--ink-2)" }}>
            <p>
              Midorick was started in 2020 by a group of operators who had spent a decade hiring
              talent across the Dominican Republic for North American companies — and watching too
              much of that talent quit within the first year, frustrated by faceless agencies and
              copy-paste benefit packages.
            </p>
            <p>
              We believed an Employer of Record could be different: small enough to know every
              employee by name, technical enough to run real payroll and compliance, opinionated
              enough to push back when a client's policy would get someone disengaged in six months.
            </p>
            <p>
              Five years later, we're proudly rooted in LatAm &amp; the Caribbean, working with
              startups and fast-growing scale-ups who want a true extension of their team —
              not a vendor that shows up on the invoice.
            </p>

            <div className="grid grid-3" style={{ gap: 32, marginTop: 16 }}>
              {[
                ["2020", "Founded"],
                ["3+", "Countries served"],
                ["94%", "12-mo. retention"],
              ].map(([v,l]) => (
                <div className="stat" key={l}>
                  <span className="v" style={{ color: "var(--amber-deep)" }}>{v}</span>
                  <span className="l">{l}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function AboutCredentials() {
  const team = [
    {
      name: "Eduardo Mejia",
      role: "Chief Executive Officer",
      photo: "assets/team/eduardo-mejia.jpg",
      bio: "Eduardo is a Civil Engineer by training, but his journey quickly branched into something far more dynamic. Starting out in a mid-sized family construction company, he discovered a passion for making businesses run smarter, not harder. That drive led him to become an Innovation and Processes Optimization Specialist, where he\u2019s helped teams unlock their full potential through better systems and leaner workflows. With a track record that includes cutting task completion times by 40%\u201360% across Accounting, Engineering, and Logistics departments, Eduardo thrives at the intersection of strategy and execution. He\u2019s all about building teams that work with purpose and systems that work with people.",
      personal: "Outside the office, Eduardo leads with the same passion\u2014literally. He\u2019s a devoted Christian and worship leader at his church, a fitness enthusiast, and, most recently, a budding tennis player always chasing the next ace."
    },
    {
      name: "Monica Mejia",
      role: "Human Resources Director",
      photo: "assets/team/monica-mejia.jpg",
      bio: "Human Resources Director committed to aligning human talent strategy with business objectives. Leading key areas such as recruitment, organizational development, compensation, and culture. Her focus is on building sustainable, engaged, and high-performing teams through a strategic vision of human capital.",
      personal: "Monica is passionate about gastronomy, discovering new places, and exploring unique flavors."
    },
    {
      name: "Simba Mupfumira",
      role: "Chief Financial Officer",
      photo: "assets/team/simba-mupfumira.png",
      bio: "Senior finance and commercial executive committed to aligning financial strategy with global business growth. Leading key strategic areas such as capital raising, governance, operational execution, and cross-functional technology initiatives. His focus is on scaling finance organizations, optimizing capital structures, and building high-performing, multi-disciplinary global teams to translate complex technical operations into clear investor returns.",
      personal: "Simba is passionate about education and poverty alleviation in Africa, sharing insights on the digital transformation circuit, and pushing his limits as an avid long-distance runner."
    },
    {
      name: "Daniella Pe\u00f1al\u00f3",
      role: "Employee Relations and Total Reward Manager",
      photo: "assets/team/daniella-pe.jpg",
      bio: "HR professional committed to building people-centered cultures where both individuals and organizations thrive. With a background in organizational psychology and human resources, she is passionate and dedicated to improving organizational culture, employee well-being, and operational efficiency through thoughtful systems, strong communication, and continuous learning.",
      personal: "Avid reader, board game enthusiast, and deeply energized by time with loved ones. Lover of good coffee, deep conversations, and finding beauty in the everyday."
    },
    {
      name: "Lumi Esther Rodriguez",
      role: "Customer Success and Recruitment Manager",
      photo: "assets/team/lumi-rod.jpg",
      bio: "Dynamic and collaborative marketing professional with a passion for driving results and building strong relationships. Experienced across diverse areas including general marketing, brand development, customer success, sales, recruitment, and operations. Recognized as a people person who thrives in team environments and adapts quickly to new challenges. Eager to learn, grow, and contribute across various fields, bringing a proactive mindset and a strong commitment to excellence in every project.",
      personal: "Lumi has a deep appreciation for wine, simple coffee, countryside visits, and engaging conversations on a wide range of topics. She values quality time with loved ones, which serves as a source of inspiration and balance in both her personal and professional life."
    },
    {
      name: "Ermis Reyes",
      role: "Accountant Manager",
      photo: "assets/team/ermis-reyes.jpg?v=1782998700",
      bio: "Ermis has managed a diverse portfolio of clients using accounting systems such as QuickBooks and Odoo. His responsibilities have included recording financial transactions, performing bank reconciliations, preparing and submitting Internal Taxes of the Dominican Republic (DGII) tax forms and sworn statements, managing Social Security Fund Administration processes (TSS), overseeing accounts receivable and payable, and conducting financial analysis and preparing financial statements.",
      personal: "Outside of work, Ermis is passionate about sports\u2014both participating in them and as a spectator. His favorite sports include football, basketball, Formula 1, boxing, MMA, tennis, and baseball. He also enjoys watching movies and series, as well as playing video games in his free time."
    },
    {
      name: "Jean Parra",
      role: "Onboarding Specialist and Project Manager",
      photo: "assets/team/jean-parra.png",
      bio: "Jean is a Senior Recruiter and Talent Specialist with a background in engineering and several years of experience connecting top talent with leading companies across various sectors in the U.S. He is passionate about creating meaningful career opportunities and fostering professional growth.",
      personal: "Outside of work, Jean enjoys playing music and challenging his mind with strategy board games."
    },
    {
      name: "Laura Cuello",
      role: "Talent Acquisition Specialist",
      photo: "assets/team/laura-cuello.jpg",
      bio: "Laura is a passionate Human Resources professional with over six years of experience, specializing in talent acquisition, internal communication, employee experience, and HR business partnering. She holds a Master\u2019s degree in Human Resources Management and a Bachelor\u2019s degree in Psychology.",
      personal: "In her free time, Laura enjoys exploring new ways to connect with others, staying up to date with global HR trends, and discovering fresh ideas to nurture talent and promote well-being."
    },
  ];
  return (
    <section className="section section--mint" data-screen-label="02 team" style={{ position:"relative", overflow:"hidden" }}>
      <span className="blob blob--peach floaty" style={{ width: 280, height: 280, top: 80, right: -80, opacity:.4 }}/>
      <span className="blob blob--mint floaty-2" style={{ width: 360, height: 360, bottom: -120, left: "30%", opacity:.35 }}/>
      <div className="container" style={{ position:"relative", zIndex:1 }}>
        <div style={{ textAlign:"center", marginBottom: 64, maxWidth: 760, marginInline: "auto" }}>
          <h1 style={{ fontSize: "clamp(2rem, 5vw, 3.4rem)" }}>Meet the Team</h1>
          <p className="lead" style={{ marginTop: 20, color: "var(--ink-2)" }}>
            Our dedicated Midorick team for your recruitment needs
          </p>
        </div>

        <div style={{ display:"flex", flexDirection:"column", gap:48 }}>
          {team.map((p, i) => (
            <article key={p.name} className="team-profile" style={{
              display:"flex",
              flexDirection: i % 2 === 0 ? "row" : "row-reverse",
              gap: 40,
              alignItems:"center",
              background:"var(--surface)",
              borderRadius:"var(--r-3)",
              padding: 32,
              boxShadow:"var(--shadow)"
            }}>
              <div style={{ flex:"0 0 280px", maxWidth:280 }}>
                <img src={p.photo} alt={p.name} style={{
                  width:"100%",
                  height: 360,
                  objectFit:"cover",
                  borderRadius:"var(--r-2)",
                  display:"block"
                }}/>
              </div>
              <div style={{ flex:1, minWidth: 0 }}>
                <div className="mono" style={{ fontSize:".78rem", letterSpacing:".1em", textTransform:"uppercase", color:"var(--moss)", fontWeight:600, marginBottom:8 }}>{p.role}</div>
                <h3 style={{ fontSize:"clamp(1.4rem, 3vw, 2rem)", fontWeight:700, marginBottom:16 }}>{p.name}</h3>
                <p style={{ fontSize:".95rem", lineHeight:1.7, color:"var(--ink-2)", marginBottom:14 }}>{p.bio}</p>
                <p style={{ fontSize:".9rem", lineHeight:1.6, color:"var(--ink-3)", fontStyle:"italic" }}>{p.personal}</p>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   ContactForm
   ============================================================ */
function ContactForm() {
  // status: "idle" | "sending" | "ok" | "error"
  const [status, setStatus] = React.useState("idle");
  const [errorMsg, setErrorMsg] = React.useState("");
  const submitted = status === "ok";

  const handleSubmit = (e) => {
    e.preventDefault();
    const form = e.target;
    setStatus("sending");
    setErrorMsg("");
    const data = new FormData(form);
    fetch("send.php", { method: "POST", body: data })
      .then(async (res) => {
        let json = null;
        try { json = await res.json(); } catch (_) {}
        if (res.ok && json && json.ok) {
          setStatus("ok");
          form.reset();
        } else {
          setStatus("error");
          setErrorMsg((json && json.error) || "Something went wrong. Please email info@midorick.com.");
        }
      })
      .catch(() => {
        setStatus("error");
        setErrorMsg("Network error. Please email info@midorick.com.");
      });
  };

  return (
    <section className="section" data-screen-label="01 contact" style={{ position:"relative", overflow:"hidden" }}>
      <span className="blob blob--mint floaty" style={{ width: 340, height: 340, top: -100, right: -100, opacity:.35 }}/>
      <span className="blob blob--butter floaty-2" style={{ width: 240, height: 240, bottom: -80, left: -60, opacity:.35 }}/>
      <span className="sparkle floaty" style={{ position: "absolute", top: 120, left: "50%", color: "var(--amber)", width: 22, height: 22 }}/>
      <div className="container" style={{ position:"relative", zIndex:1 }}>
        <div className="grid" style={{ gridTemplateColumns: "1fr 1.3fr", gap: 80, alignItems: "start" }}>
          <div>
            <div className="pill" style={{ marginBottom: 20 }}>
              <span className="emoji">📍</span> Two offices · one team
            </div>
            <h3 style={{ fontWeight: 500, fontSize: "1.6rem" }}>Where to find us</h3>

            <div className="stack-6" style={{ marginTop: 28 }}>
              <div>
                <div className="mono muted" style={{ fontSize: ".72rem", letterSpacing: ".12em", textTransform: "uppercase" }}>HQ · Dominican Republic</div>
                <div style={{ marginTop: 6, fontSize: "1.05rem", fontWeight: 500 }}>Santo Domingo, DR</div>
                <a href="mailto:info@midorick.com" style={{ marginTop: 4, fontSize: "1.05rem", display: "inline-block", color: "var(--amber-deep)", borderBottom: "1px solid currentColor", paddingBottom: 2 }}>info@midorick.com</a>
              </div>
              <div>
                <div className="mono muted" style={{ fontSize: ".72rem", letterSpacing: ".12em", textTransform: "uppercase" }}>Time zone</div>
                <div style={{ marginTop: 6, fontSize: "1.05rem", fontWeight: 500 }}>AST · year-round</div>
                <div className="muted">Aligned with US East Coast</div>
              </div>
              <div>
                <div className="mono muted" style={{ fontSize: ".72rem", letterSpacing: ".12em", textTransform: "uppercase" }}>Response time</div>
                <div style={{ marginTop: 6, fontSize: "1.05rem", fontWeight: 500 }}>Within 1 business day</div>
                <div className="muted">Every enquiry, every time.</div>
              </div>
            </div>
          </div>

          <form
            className="card"
            style={{ padding: 40, background: "var(--paper)", borderRadius: "var(--r-3)" }}
            onSubmit={handleSubmit}
          >
            {submitted ? (
              <div style={{ textAlign: "center", padding: "60px 0" }}>
                <div style={{
                  width: 72, height: 72, borderRadius: "50%",
                  background: "var(--amber-soft)", color: "var(--amber-deep)",
                  display: "inline-flex", alignItems: "center", justifyContent: "center",
                  fontSize: "2rem", fontWeight: 600, marginBottom: 20,
                }}>✓</div>
                <h3 style={{ fontWeight: 500 }}>Thanks — we'll be in touch within one business day.</h3>
                <p className="muted" style={{ marginTop: 12 }}>
                  Meanwhile, you'll get a calendar link to grab a 30-minute slot if you'd like to skip the queue.
                </p>
              </div>
            ) : (
              <>
                <div className="row-between" style={{ marginBottom: 24 }}>
                  <span className="pill"><span className="emoji">📅</span> Book a free consult</span>
                  <span className="mono muted" style={{ fontSize: ".7rem", letterSpacing: ".1em", textTransform: "uppercase" }}>30 min · no pitch deck</span>
                </div>
                <div className="grid grid-2" style={{ gap: 18 }}>
                  <div className="field"><label>First name</label><input type="text" name="first_name" required/></div>
                  <div className="field"><label>Last name</label><input type="text" name="last_name" required/></div>
                  <div className="field"><label>Work email</label><input type="email" name="email" required/></div>
                  <div className="field"><label>Company</label><input type="text" name="company" required/></div>
                  <div className="field" style={{ gridColumn: "1 / -1" }}>
                    <label>When do you want to make a hire?</label>
                    <select name="timeline">
                      <option>Yesterday — ASAP</option>
                      <option>1–2 weeks</option>
                      <option>1 month</option>
                      <option>1–2 months</option>
                      <option>Just exploring</option>
                    </select>
                  </div>
                  <div className="field" style={{ gridColumn: "1 / -1" }}>
                    <label>Roles you're looking to hire</label>
                    <input type="text" name="roles" placeholder="e.g. 2 senior developers + 1 designer"/>
                  </div>
                  <div className="field" style={{ gridColumn: "1 / -1" }}>
                    <label>What's the question we should answer?</label>
                    <textarea name="message" placeholder="A budget, a timeline, a deal-breaker — bring it all."/>
                  </div>
                  {/* honeypot — bots fill this, humans don't see it */}
                  <input type="text" name="website" tabIndex="-1" autoComplete="off" style={{ position: "absolute", left: "-9999px", width: 1, height: 1, opacity: 0 }} aria-hidden="true"/>
                </div>
                {status === "error" && (
                  <div style={{
                    marginTop: 20, padding: "12px 16px", borderRadius: "var(--r-2)",
                    background: "oklch(95% 0.04 25)", color: "oklch(45% 0.15 25)",
                    fontSize: ".9rem",
                  }}>
                    {errorMsg}
                  </div>
                )}
                <div className="row-between" style={{ marginTop: 28 }}>
                  <span className="muted mono" style={{ fontSize: ".72rem", letterSpacing: ".08em" }}>
                    By submitting you agree to our privacy policy.
                  </span>
                  <button type="submit" className="btn btn--amber" disabled={status === "sending"} style={status === "sending" ? { opacity: .7, pointerEvents: "none" } : null}>
                    {status === "sending" ? "Sending…" : <>Send enquiry <span className="arrow">→</span></>}
                  </button>
                </div>
              </>
            )}
          </form>
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   CareersList
   ============================================================ */
function CareersList() {
  const jobs = [
    { code: "1", t: "Send Us your CV and join Midorick AI Talent", work: "Remote",   place: "Dominican Republic",                          type: "",          url: "https://apply.workable.com/midorick-solutions/j/A716899B80/" },
    { code: "2", t: "QA Analyst (Automation)",                      work: "Remote",   place: "Dominican Republic",                          type: "Full-time", url: "https://apply.workable.com/midorick-solutions/j/7B5CD73049/" },
    { code: "3", t: "AI Strategy & Automation Lead",                work: "Remote",   place: "Dominican Republic",                          type: "",          url: "https://apply.workable.com/midorick-solutions/j/D5059537AC/" },
    { code: "4", t: "Pediatric Physical Therapist",                 work: "On-site",  place: "California City, CA & Tacoma, WA · USA",      type: "",          url: "https://apply.workable.com/midorick-solutions/j/219C4DB360/" },
    { code: "5", t: "Data Analyst",                                 work: "Remote",   place: "Dominican Republic",                          type: "Full-time", url: "https://apply.workable.com/midorick-solutions/j/AAD2A8E2FE/" },
    { code: "6", t: "Send Us your CV and join Midorick",            work: "Remote",   place: "Dominican Republic · Argentina",               type: "",          url: "https://apply.workable.com/midorick-solutions/j/2F0065CDC4/" },
  ];
  return (
    <section className="section" data-screen-label="01 jobs" style={{ position:"relative", overflow:"hidden" }}>
      <span className="blob blob--mint floaty" style={{ width: 320, height: 320, top: -100, right: -100, opacity:.3 }}/>
      <span className="blob blob--butter floaty-2" style={{ width: 240, height: 240, bottom: -80, left: -80, opacity:.35 }}/>
      <div className="container" style={{ position:"relative", zIndex:1 }}>
        <div className="row-between" style={{ marginBottom: 32 }}>
          <a href="https://apply.workable.com/midorick-solutions/" target="_blank" rel="noopener noreferrer" style={{ textDecoration: "none" }}><div className="pill"><span className="emoji">🌟</span> Open roles · {jobs.length}</div></a>
          <span className="mono muted" style={{ fontSize: ".75rem", letterSpacing: ".08em", textTransform: "uppercase" }}>
            Updated weekly · last refresh July&nbsp;10
          </span>
        </div>

        <div className="tlist tlist--joy">
          {jobs.map(j => (
            <a key={j.code} href={j.url} target="_blank" rel="noopener noreferrer" className="row" style={{ color: "inherit" }}>
              <h5>{j.t}</h5>
              <span className="job-work">{j.work}</span>
              <p>{j.place}</p>
              <span className="meta">{j.type} <span style={{ marginLeft: 8, color: "var(--amber-deep)" }}>→</span></span>
            </a>
          ))}
        </div>

        <div className="nudge" style={{ marginTop: 56 }}>
          <div className="pill pill--butter" style={{ marginBottom: 14 }}>
            <span className="emoji">📮</span> Don't see your role?
          </div>
          <h4 style={{ fontWeight: 500 }}>We hire continuously. Send a CV anyway.</h4>
          <a href="mailto:careers@midorick.com?subject=CV%20Application%20%E2%80%93%20Open%20Role&body=Hi%20Midorick%20Team%2C%0A%0AI%20would%20like%20to%20submit%20my%20CV%20for%20consideration.%0A%0APlease%20find%20my%20resume%20attached.%0A%0ABest%20regards%2C" className="btn btn--ghost" style={{ marginTop: 20 }}>
            careers@midorick.com →
          </a>
        </div>
      </div>
    </section>
  );
}

function CareersCulture() {
  const values = [
    { n: "01", emoji:"🌿", tone:"mint",   t: "Boutique by design", d: "We grow only when we can keep the experience personal — for clients and employees." },
    { n: "02", emoji:"🧘", tone:"peach",  t: "Calm operators",     d: "We hire people who reduce drama in the room, not raise it. Even on payroll closing day." },
    { n: "03", emoji:"📈", tone:"butter", t: "Real retention",     d: "We measure ourselves on year-three retention, not year-one. The honest number." },
    { n: "04", emoji:"🛡️", tone:"sky",    t: "Compliance is care", d: "Following the law isn't a cost center; it's how we look after our people." },
  ];
  return (
    <section className="section section--mint" data-screen-label="02 culture" style={{ position:"relative", overflow:"hidden" }}>
      <span className="blob blob--peach floaty" style={{ width: 320, height: 320, top: -100, left: -80, opacity:.35 }}/>
      <span className="blob blob--mint floaty-2" style={{ width: 280, height: 280, bottom: -80, right: -80, opacity:.4 }}/>
      <div className="container" style={{ position:"relative", zIndex:1 }}>
        <div className="row-between" style={{ marginBottom: 40 }}>
          <div>
            <div className="pill" style={{ marginBottom: 20 }}>
              <span className="emoji">🌱</span> What you'd be joining
            </div>
            <h2>Four operating principles.<br/>Hung on the wall. Actually used.</h2>
          </div>
        </div>
        <div className="grid grid-2" style={{ gap: 24 }}>
          {values.map(v => (
            <div className="feat" key={v.n} style={{ padding: 36 }}>
              <div className={`ico ico--${v.tone}`} style={{ fontSize: "1.6rem" }}>{v.emoji}</div>
              <span className="mono muted" style={{ fontSize: ".72rem", letterSpacing: ".1em" }}>PRINCIPLE / {v.n}</span>
              <h4 style={{ marginTop: 8, fontWeight: 500 }}>{v.t}</h4>
              <p style={{ marginTop: 10, color: "var(--ink-2)" }}>{v.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   BlogIndex
   ============================================================ */
function BlogCover({ src, alt, ratio = "16/9", corner, style }) {
  return (
    <div style={{ position:"relative", aspectRatio: ratio, borderRadius: "var(--r-2)", overflow:"hidden", background:"var(--fog)", ...style }}>
      <img src={src} alt={alt} loading="lazy" style={{ width:"100%", height:"100%", objectFit:"cover", display:"block" }}/>
      {corner && <span className="mono" style={{ position:"absolute", top:12, right:14, fontSize:".68rem", color:"#fff", background:"rgba(20,20,20,.45)", padding:"3px 10px", borderRadius:999, letterSpacing:".06em", textTransform:"uppercase" }}>{corner}</span>}
    </div>
  );
}
function BlogIndex() {
  const posts = [
    {
      slug: "google-500m-nearshore-hiring-dr.html",
      cat: "Nearshoring · DR", emoji: "🌐", tone: "butter",
      title: "Google’s $500M Digital Hub: What It Means for Nearshore Hiring in the Dominican Republic",
      sub: "A $500M subsea fiber and data-center investment turns the DR into a serious nearshore option — but compliant hiring is still the hard part. Here’s how an EOR closes the gap.",
      date: "3 July 2026", read: "2 min read",
      author: "Midorick Team", role: "Market Insights",
      cover: "assets/blog/dr-digital-hub-cover.png",
      featured: true,
    },
    {
      slug: "eor-service-costs.html",
      cat: "EOR · Costs", emoji: "💰", tone: "butter",
      title: "Key Factors Influencing EOR Service Costs Explained",
      sub: "Unlock the potential of EOR services with a comprehensive overview of typical costs. Gain valuable insights to make informed decisions for your business.",
      date: "16 June 2025", read: "9 min read",
      author: "Midorick Team", role: "Content & Research",
      cover: "assets/blog/eor-costs-cover.jpg",
    },
    {
      slug: "employer-of-record-benefits.html",
      cat: "EOR · Operations", emoji: "🚀", tone: "peach",
      title: "Enhance Business Capabilities Using an Employer of Record Service",
      sub: "Maximize business growth by leveraging EOR services. Learn key advantages, from compliance benefits to streamlined hiring.",
      date: "16 June 2025", read: "10 min read",
      author: "Midorick Team", role: "Content & Research",
      cover: "assets/blog/eor-capabilities-cover.jpg",
    },
    {
      slug: "eor-pitfalls-to-avoid.html",
      cat: "EOR · Risk", emoji: "⚠️", tone: "sky",
      title: "Potential Pitfalls of Engaging an Employer of Record Service",
      sub: "Navigate the risks of using an Employer of Record (EOR) to make informed decisions for your business.",
      date: "16 June 2025", read: "11 min read",
      author: "Midorick Team", role: "Content & Research",
      cover: "assets/blog/eor-pitfalls-cover.jpg",
    },
    {
      slug: "hiring-challenges-solutions.html",
      cat: "Hiring", emoji: "🧩", tone: "peach",
      title: "Some common hiring challenges and solutions to overcome them",
      sub: "Many companies face challenges finding good candidates and filling job positions. Here are some common challenges and recommendations to improve your process.",
      date: "23 August 2022", read: "1 min read",
      author: "Midorick Team", role: "Talent Acquisition",
      cover: "assets/blog/hiring-challenges-cover.jpg",
    },
    {
      slug: "hiring-latam-caribbean.html",
      cat: "Hiring · LatAm", emoji: "🌎", tone: "butter",
      title: "Benefits of hiring in the LatAm & Caribbean",
      sub: "The best way to hire in the LatAm & Caribbean is to outsource a local partner for recruitment, hiring, payroll, and local taxes.",
      date: "23 August 2022", read: "1 min read",
      author: "Midorick Team", role: "Talent Acquisition",
      cover: "assets/blog/latam-benefits-cover.gif",
    },
    {
      slug: "hire-in-dominican-republic.html",
      cat: "Hiring · DR", emoji: "🇩🇴", tone: "sky",
      title: "Why hire in the Dominican Republic",
      sub: "Some of the benefits of hiring in the Dominican Republic, and how we help you establish your team in a simple way.",
      date: "23 August 2022", read: "1 min read",
      author: "Midorick Team", role: "Talent Acquisition",
      cover: "assets/blog/dr-hiring-cover.jpg",
    },
  ];

  const featured = posts.find(p => p.featured);
  const rest = posts.filter(p => !p.featured);

  return (
    <section className="section" data-screen-label="01 blog-index" style={{ position:"relative", overflow:"hidden" }}>
      <span className="blob blob--mint floaty" style={{ width: 360, height: 360, top: -120, right: -120, opacity:.3 }}/>
      <span className="blob blob--peach floaty-2" style={{ width: 240, height: 240, bottom: -80, left: -80, opacity:.35 }}/>
      <div className="container" style={{ position:"relative", zIndex:1 }}>
        {featured && (
          <a href={featured.slug} className="card card--hover" style={{ display: "block", padding: 0, overflow: "hidden", marginBottom: 64, borderRadius: "var(--r-4)" }}>
            <div className="grid" style={{ gridTemplateColumns: "1.2fr 1fr", gap: 0 }}>
              <div style={{ padding: 48, display: "flex", flexDirection: "column", justifyContent: "space-between", gap: 32 }}>
                <div>
                  <div className="row" style={{ gap: 12, marginBottom: 24 }}>
                    <span className="pill"><span className="emoji">⭐</span> Featured</span>
                    <span className="pill pill--butter" style={{ fontSize: ".85rem" }}>
                      <span className="emoji">{featured.emoji}</span> {featured.cat}
                    </span>
                  </div>
                  <h3 style={{ fontSize: "2.1rem", fontWeight: 500, lineHeight: 1.15 }}>{featured.title}</h3>
                  <p className="muted" style={{ marginTop: 18, fontSize: "1.05rem", lineHeight: 1.55 }}>{featured.sub}</p>
                </div>
                <div className="row-between">
                  <div className="row" style={{ gap: 12 }}>
                    <span className="avatar avatar--mint" style={{ width: 40, height: 40, fontSize: ".85rem" }}>{featured.author.split(" ").map(s=>s[0]).join("")}</span>
                    <div>
                      <div style={{ fontWeight: 500, fontSize: ".95rem" }}>{featured.author}</div>
                      <div className="mono muted" style={{ fontSize: ".7rem", letterSpacing: ".08em", textTransform: "uppercase" }}>{featured.date} · {featured.read}</div>
                    </div>
                  </div>
                  <span className="mono" style={{ fontSize: ".8rem", color: "var(--amber-deep)", letterSpacing: ".08em", textTransform: "uppercase" }}>Read →</span>
                </div>
              </div>
              <window.BlogCover src={featured.cover} alt={featured.title} ratio="auto" style={{ minHeight: 360 }} corner="POST 01"/>
            </div>
          </a>
        )}

        <div className="grid grid-2" style={{ gap: 32 }}>
          {rest.map((p, i) => (
            <a key={i} href={p.slug} className="card card--hover" style={{ display: "flex", flexDirection: "column", gap: 18, padding: 28 }}>
              <window.BlogCover src={p.cover} alt={p.title} ratio="16/9" corner={`POST 0${i + 2}`} style={{ borderRadius: "var(--r-2)" }}/>
              <div className={`pill ${p.tone === "peach" ? "pill--peach" : p.tone === "butter" ? "pill--butter" : p.tone === "sky" ? "pill--sky" : ""}`} style={{ alignSelf:"flex-start", fontSize:".82rem" }}>
                <span className="emoji">{p.emoji}</span> {p.cat}
              </div>
              <h4 style={{ fontSize: "1.4rem", fontWeight: 500, lineHeight: 1.2 }}>{p.title}</h4>
              <p className="muted" style={{ fontSize: ".98rem" }}>{p.sub}</p>
              <div className="row" style={{ marginTop: "auto", paddingTop: 16, borderTop: "1px solid var(--fog)", gap: 12 }}>
                <span className="avatar avatar--mint" style={{ width: 32, height: 32, fontSize: ".7rem" }}>{p.author.split(" ").map(s=>s[0]).join("")}</span>
                <div>
                  <div style={{ fontWeight: 500, fontSize: ".88rem" }}>{p.author}</div>
                  <div className="mono muted" style={{ fontSize: ".68rem", letterSpacing: ".08em", textTransform: "uppercase" }}>{p.date} · {p.read}</div>
                </div>
              </div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   BlogPost (article body)
   ============================================================ */
function BlogPost({ meta, children }) {
  return (
    <>
      <header className="page-hero page-hero--joy" style={{ position: "relative", overflow: "hidden", paddingBottom: 48 }}>
        <span className="blob blob--mint floaty" style={{ width: 340, height: 340, top: -100, right: -100, opacity:.35 }}/>
        <span className="blob blob--butter floaty-2" style={{ width: 220, height: 220, bottom: -80, left: -60, opacity:.35 }}/>
        <div className="container pop-in" style={{ position:"relative", zIndex: 1 }}>
          <div className="row" style={{ gap: 12, marginBottom: 28 }}>
            <span className="pill"><span className="emoji">📚</span> {meta.cat}</span>
            <span className="mono muted" style={{ fontSize: ".72rem", letterSpacing: ".1em", textTransform: "uppercase" }}>
              {meta.date} · {meta.read}
            </span>
          </div>
          <h1 style={{ fontSize: "clamp(2rem, 5vw, 3.4rem)", maxWidth: "26ch", letterSpacing: "-0.03em", fontWeight: 400 }}>
            {meta.title}
          </h1>
          <p className="lead" style={{ marginTop: 24, maxWidth: "60ch" }}>{meta.sub}</p>
          <div className="row" style={{ marginTop: 36, gap: 14 }}>
            <span className="avatar avatar--mint" style={{ width: 44, height: 44, fontSize: ".95rem" }}>{meta.author.split(" ").map(s=>s[0]).join("")}</span>
            <div>
              <div style={{ fontWeight: 500 }}>{meta.author}</div>
              <div className="mono muted" style={{ fontSize: ".72rem", letterSpacing: ".08em", textTransform: "uppercase" }}>
                {meta.role}
              </div>
            </div>
          </div>
        </div>
      </header>

      <section className="section">
        <div className="container">
          <article className="post-body">
            {children}
          </article>
        </div>
      </section>

      <section className="section section--mint" style={{ position:"relative", overflow:"hidden" }}>
        <span className="blob blob--mint floaty" style={{ width: 320, height: 320, top: -100, left: "50%", opacity:.35 }}/>
        <span className="blob blob--peach floaty-2" style={{ width: 220, height: 220, bottom: -80, right: -60, opacity:.4 }}/>
        <div className="container" style={{ textAlign: "center", maxWidth: 720, position:"relative", zIndex:1 }}>
          <div className="pill" style={{ marginBottom: 20 }}>
            <span className="emoji">💌</span> Found this useful?
          </div>
          <h3 style={{ fontWeight: 500 }}>We write one of these every other Friday.</h3>
          <p className="muted" style={{ marginTop: 14 }}>Practical pieces on hiring, ops, and back-office in LatAm. No marketing fluff.</p>
          <div className="row" style={{ marginTop: 28, justifyContent: "center" }}>
            <a href="blog.html" className="btn btn--ghost">All posts</a>
            <a href="contact.html" className="btn btn--amber">Talk to us <span className="arrow">→</span></a>
          </div>
        </div>
      </section>
    </>
  );
}


/* ---------- FAQ page ---------- */
function FAQSection() {
  const faqs = [
    { q: "What is Midorick Solutions?", a: "Midorick Solutions is a nearshore Employer of Record (EOR) and workforce solutions provider based in the Dominican Republic. We help companies hire, onboard, manage payroll, and scale remote teams across Latin America and the Caribbean without opening a local legal entity." },
    { q: "What does an Employer of Record (EOR) do?", a: "An Employer of Record legally employs staff on your behalf while you retain operational control. Midorick handles contracts, payroll processing, tax and social security compliance, statutory benefits, and HR administration to ensure legal and regulatory compliance." },
    { q: "Where is Midorick Solutions located?", a: "Midorick Solutions was founded in 2020 and is headquartered in Santo Domingo, Dominican Republic. We serve employers in North America and other international markets seeking talent in LATAM and the Caribbean." },
    { q: "Which companies benefit from Midorick\u2019s services?", a: "North American and global companies expanding into Latin America and the Caribbean\u2014startups, SaaS and tech firms, professional service providers, customer support operations, and finance teams\u2014use Midorick to hire and manage regional talent quickly and compliantly." },
    { q: "What countries do you support?", a: "We specialize in hiring across Latin America and the Caribbean, with a strong operational base in the Dominican Republic. Contact us for specifics about coverage by country and local compliance." },
    { q: "What roles can Midorick help me hire?", a: "We recruit and employ professionals across functions, including software developers, customer support representatives, accountants, data analysts, graphic designers, recruiters, and marketing specialists\u2014plus many other white-collar roles." },
    { q: "Why hire talent from the Dominican Republic?", a: "The Dominican Republic offers an educated, English-proficient workforce, favorable time-zone alignment with the U.S. and Canada, competitive labor costs, and a growing tech and services talent pool\u2014making it an attractive nearshoring location." },
    { q: "Do I need to establish a local legal entity to hire through Midorick?", a: "No. Using Midorick\u2019s EOR services lets you legally hire and pay employees in-country without forming a subsidiary or branch office." },
    { q: "What HR services does Midorick provide?", a: "We offer end-to-end HR services: onboarding, payroll administration, employee benefits management, labor contract drafting, local tax filing, compliance monitoring, and ongoing HR support and reporting." },
    { q: "Does Midorick handle payroll processing and tax compliance?", a: "Yes. Midorick manages payroll runs, statutory deductions, employer contributions, local tax filings, and compliance with labor laws and social security requirements." },
    { q: "How does Midorick\u2019s recruitment process work?", a: "We start by understanding your hiring needs and culture, then source and screen candidates, conduct assessments and interviews, present qualified finalists, and manage onboarding through our EOR once you select a candidate." },
    { q: "Can I use Midorick only for recruitment?", a: "Yes. We offer standalone talent acquisition and candidate-sourcing services as well as full EOR and workforce management packages\u2014choose the combination that fits your hiring strategy." },
    { q: "How fast can I hire through Midorick?", a: "Timelines vary by role and market, but working with an EOR typically shortens time-to-hire by removing the need to establish local legal and HR infrastructure. Ask us for role-specific estimates." },
    { q: "Do you provide office space or coworking solutions?", a: "Yes. Midorick can arrange coworking and office space options in the Dominican Republic to support hybrid or in-country teams." },
    { q: "How does Midorick support employee engagement and retention?", a: "We deliver employee engagement programs, onboarding experiences, team-building activities, and HR initiatives designed to improve workplace culture, performance, and retention." },
    { q: "Which industries do you serve?", a: "We support startups, technology and SaaS companies, business process and customer support operations, professional services, finance and accounting teams, and other organizations expanding into LATAM and the Caribbean." },
    { q: "Why choose Midorick over a large global EOR?", a: "Midorick pairs local Dominican Republic expertise with personalized, boutique-level service. Clients benefit from hands-on support, regional compliance know-how, and faster, more flexible solutions than one-size-fits-all global providers." },
    { q: "Does Midorick ensure local legal and tax compliance?", a: "Yes. Our team maintains up-to-date knowledge of local employment regulations, tax obligations, and labor law requirements to reduce legal and financial risks for clients." },
    { q: "Can Midorick support fully remote and distributed teams?", a: "Absolutely. We specialize in building and managing distributed, remote teams across Latin America and the Caribbean while ensuring local compliance and payroll administration." },
    { q: "What makes the Dominican Republic a strong nearshoring location?", a: "Key advantages include a growing talent pool in technology and services, English-language capabilities, convenient overlap with U.S. time zones, cost-competitive staffing, and a stable business climate." },
    { q: "How do I get started with Midorick Solutions?", a: "Schedule a consultation on our website or contact us via social media. Tell us your hiring needs and target country, and we\u2019ll share a tailored plan and timeline." },
  ];

  const [open, setOpen] = React.useState(null);

  return (
    <section className="section section--cream" id="faq">
      <div className="container" style={{ maxWidth: 820 }}>
        <div style={{ textAlign: "center", marginBottom: "var(--s-8)" }}>
          <h2 style={{ fontSize: "clamp(1.8rem, 4vw, 2.6rem)", fontWeight: 600, lineHeight: 1.15 }}>
            Frequently asked questions
          </h2>
          <p className="lead" style={{ marginTop: 16, color: "oklch(50% 0.02 165)" }}>
            Everything you need to know about hiring through Midorick. Can{"\u2019"}t find an answer? <a href="contact.html" style={{ color: "var(--moss)", fontWeight: 500 }}>Book a consult</a>.
          </p>
        </div>

        <div className="faq-list">
          {faqs.map((item, i) => (
            <div key={i} className={`faq-item ${open === i ? "faq-item--open" : ""}`}>
              <button
                className="faq-question"
                onClick={() => setOpen(open === i ? null : i)}
                aria-expanded={open === i}
              >
                <span>{item.q}</span>
                <span className="faq-icon">{open === i ? "\u2212" : "+"}</span>
              </button>
              <div className="faq-answer">
                <p>{item.a}</p>
              </div>
            </div>
          ))}
        </div>

        <div style={{ marginTop: "var(--s-8)", textAlign: "center" }}>
          <p style={{ color: "oklch(50% 0.02 165)", fontSize: ".95rem" }}>
            Follow us:
            {" "}
            <a href="https://www.linkedin.com/company/midoricksolutions/" target="_blank" rel="noreferrer">LinkedIn</a>
            {" \u00b7 "}
            <a href="https://www.instagram.com/midorick_solutionsdr/" target="_blank" rel="noreferrer">Instagram</a>
            {" \u00b7 "}
            <a href="https://www.facebook.com/midoricksolutions" target="_blank" rel="noreferrer">Facebook</a>
            {" \u00b7 "}
            <a href="https://x.com/MidorickSols" target="_blank" rel="noreferrer">X</a>
            {" \u00b7 "}
            <a href="https://www.youtube.com/@MidorickSolutions" target="_blank" rel="noreferrer">YouTube</a>
          </p>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, {
  ServicesGrid, ServicesPricing, ServicesCompare,
  AboutStory, AboutCredentials,
  ContactForm,
  CareersList, CareersCulture,
  BlogIndex, BlogPost, BlogCover,
  FAQSection,
});
