/* global React, useLang */
const { useState, useEffect, useLayoutEffect, useRef, useMemo } = React;

window.FORSVAR_BOOK_DEMO_CALENDAR_HREF =
  window.FORSVAR_BOOK_DEMO_CALENDAR_HREF ||
  "https://calendar.google.com/calendar/u/0/appointments/schedules/AcZssZ2e9byL5jYJ1drygycwj5-rxSXeiuewiwOh-zzwaQPW-HxbpQfaVbmqBzy3i8S_BAIULjcpKDHr";

function megaAnchorProps(href) {
  return href && /^https?:\/\//i.test(href)
    ? { target: "_blank", rel: "noopener noreferrer" }
    : {};
}

const MEGA_FP_FRAUD_HREFS = [
  "fraud_prevention.html#verificacion-identidad",
  "fraud_prevention.html#inteligencia-dispositivo",
  "fraud_prevention.html#perfil-digital",
  "fraud_prevention.html#geo-intelligence",
  "fraud_prevention.html#risk-engine",
  "fraud_prevention.html#machine-learning",
  "fraud_prevention.html#user-360",
  "fraud_prevention.html#anomalias"
];

const MEGA_FP_AML_HREFS = [
  "aml.html#verificacion-identidad",
  "aml.html#screening",
  "aml.html#risk-matrix",
  "aml.html#transactional-monitoring",
  "aml.html#alertas-casos",
  "aml.html#user-360",
  "aml.html#reportes"
];

const MEGA_SOL_DIG_HREFS = [
  "digital_activity.html#registro",
  "digital_activity.html#login",
  "digital_activity.html#modificaciones",
  "digital_activity.html#solicitud-productos"
];

const MEGA_SOL_TX_HREFS = [
  "transactional_activity.html#pagos",
  "transactional_activity.html#transferencias",
  "transactional_activity.html#retiros",
  "transactional_activity.html#promociones"
];

const MEGA_IND_KEY_HREFS = [
  "industries.html#billeteras-digitales",
  "industries.html#procesadores-pago",
  "industries.html#marketplaces",
  "industries.html#ecommerce",
  "industries.html#prestamos"
];

const MEGA_IND_OTH_HREFS = [
  "industries.html#gaming",
  "industries.html#gambling",
  "industries.html#remesas",
  "industries.html#bancos-digitales",
  "industries.html#cripto"
];

function megaProductsCols(t) {
  return [
    {
      title: t("mega.fp.c0.title"),
      titleHref: "fraud_prevention.html",
      items: [0, 1, 2, 3, 4, 5, 6, 7].map((i) => [
        t("mega.fp.c0.i" + i + ".t"),
        t("mega.fp.c0.i" + i + ".d"),
        MEGA_FP_FRAUD_HREFS[i]
      ])
    },
    {
      title: t("mega.fp.c1.title"),
      titleHref: "aml.html",
      items: [0, 1, 2, 3, 4, 5, 6].map((i) => [
        t("mega.fp.c1.i" + i + ".t"),
        t("mega.fp.c1.i" + i + ".d"),
        MEGA_FP_AML_HREFS[i]
      ])
    }
  ];
}

function megaSolutionsCols(t) {
  return [
    {
      title: t("mega.sol.c0.title"),
      titleHref: "digital_activity.html",
      items: [0, 1, 2, 3].map((i) => [
        t("mega.sol.c0.i" + i + ".t"),
        t("mega.sol.c0.i" + i + ".d"),
        MEGA_SOL_DIG_HREFS[i]
      ])
    },
    {
      title: t("mega.sol.c1.title"),
      titleHref: "transactional_activity.html",
      items: [0, 1, 2, 3].map((i) => [
        t("mega.sol.c1.i" + i + ".t"),
        t("mega.sol.c1.i" + i + ".d"),
        MEGA_SOL_TX_HREFS[i]
      ])
    }
  ];
}

function megaIndustriesCols(t) {
  return [
    {
      title: t("mega.ind.c0.title"),
      titleHref: "industries.html",
      items: [0, 1, 2, 3, 4].map((i) => [
        t("mega.ind.c0.i" + i + ".t"),
        t("mega.ind.c0.i" + i + ".d"),
        MEGA_IND_KEY_HREFS[i]
      ])
    },
    {
      title: t("mega.ind.c1.title"),
      titleHref: "industries.html",
      items: [0, 1, 2, 3, 4].map((i) => [
        t("mega.ind.c1.i" + i + ".t"),
        t("mega.ind.c1.i" + i + ".d"),
        MEGA_IND_OTH_HREFS[i]
      ])
    }
  ];
}

function megaCompanyCols(t) {
  return [
    {
      title: t("mega.co.c0.title"),
      titleHref: "about_us.html",
      items: [
        [t("mega.co.c0.i0.t"), t("mega.co.c0.i0.d"), "about_us.html"],
        [t("mega.co.c0.i1.t"), t("mega.co.c0.i1.d"), "blog.html"]
      ]
    },
    {
      title: t("mega.co.c1.title"),
      titleHref: "join_us.html",
      items: [[t("mega.co.c1.i0.t"), t("mega.co.c1.i0.d"), "join_us.html"]]
    }
  ];
}

function megaContactCols(t) {
  return [
    {
      title: t("mega.ct.c0.title"),
      titleHref: "contact_us.html",
      items: [[t("mega.ct.c0.i0.t"), t("mega.ct.c0.i0.d"), "contact_us.html"]]
    },
    {
      title: t("mega.ct.c1.title"),
      items: [[t("mega.ct.c1.i0.t"), t("mega.ct.c1.i0.d"), window.FORSVAR_BOOK_DEMO_CALENDAR_HREF]]
    }
  ];
}

function getHeroSegments(t) {
  return [
    { type: "text", value: t("home.hero.typ.line1") },
    { type: "br" },
    { type: "wrap-line2-start" },
    { type: "text", value: t("home.hero.typ.line2a") },
    { type: "br" },
    { type: "text", value: t("home.hero.typ.line2b") },
    { type: "underline", value: t("home.hero.typ.line2u") },
    { type: "text", value: t("home.hero.typ.line2c") },
    { type: "wrap-end" }
  ];
}

/** Centrado bajo el ítem + acotación al viewport (rect dentro de [pad, innerWidth - pad]). */
const MEGAMENU_VIEWPORT_PAD = 16;

function clampMegamenuToViewport(el) {
  if (!el) return;
  el.style.setProperty("--megamenu-shift", "0px");
  const r = el.getBoundingClientRect();
  if (r.width <= 0 || r.height <= 0) return;

  const vw = window.innerWidth;
  const minLeft = MEGAMENU_VIEWPORT_PAD;
  const maxRight = vw - MEGAMENU_VIEWPORT_PAD;
  const maxLeft = maxRight - r.width;

  let targetLeft;
  if (maxLeft < minLeft) {
    targetLeft = minLeft;
  } else {
    targetLeft = Math.min(Math.max(r.left, minLeft), maxLeft);
  }

  el.style.setProperty("--megamenu-shift", `${targetLeft - r.left}px`);
}

const NAV_MOBILE_MQ = "(max-width: 1023px)";

function useSiteHeaderLayout() {
  const [narrow, setNarrow] = useState(
    () => typeof window !== "undefined" && window.matchMedia(NAV_MOBILE_MQ).matches
  );
  const [menuOpen, setMenuOpen] = useState(false);

  useEffect(() => {
    const mq = window.matchMedia(NAV_MOBILE_MQ);
    const sync = () => {
      const n = mq.matches;
      setNarrow(n);
      if (!n) {
        setMenuOpen(false);
      }
    };
    sync();
    mq.addEventListener("change", sync);
    return () => mq.removeEventListener("change", sync);
  }, []);

  useEffect(() => {
    if (menuOpen && narrow) {
      const prev = document.body.style.overflow;
      document.body.style.overflow = "hidden";
      return () => { document.body.style.overflow = prev; };
    }
  }, [menuOpen, narrow]);

  return { narrow, menuOpen, setMenuOpen };
}

// ============ Header ============
function Header() {
  const { narrow, menuOpen, setMenuOpen } = useSiteHeaderLayout();
  const { lang, setLang, t } = useLang();
  const [open, setOpen] = useState(null);
  const closeTimer = useRef();
  const enter = (k) => { clearTimeout(closeTimer.current); setOpen(k); };
  const leave = () => { closeTimer.current = setTimeout(() => setOpen(null), 120); };

  const productsCols = useMemo(() => megaProductsCols(t), [lang, t]);
  const solutionsCols = useMemo(() => megaSolutionsCols(t), [lang, t]);
  const industriesCols = useMemo(() => megaIndustriesCols(t), [lang, t]);
  const companyCols = useMemo(() => megaCompanyCols(t), [lang, t]);
  const contactCols = useMemo(() => megaContactCols(t), [lang, t]);

  const itemHandlers = (key) => ({
    onMouseEnter: () => { if (!narrow) enter(key); },
    onMouseLeave: () => { if (!narrow) leave(); },
    onClick: () => {
      if (!narrow) return;
      setOpen((o) => o === key ? null : key);
    }
  });

  const closeMobilePanel = () => {
    setMenuOpen(false);
    setOpen(null);
  };

  const megaLinkProps = narrow ? { onLinkActivate: closeMobilePanel } : {};

  useEffect(() => {
    if (!narrow) setOpen(null);
  }, [narrow]);

  useEffect(() => {
    const onKey = (e) => {
      if (e.key === "Escape") {
        setOpen(null);
        setMenuOpen(false);
      }
    };
    document.addEventListener("keydown", onKey);
    return () => document.removeEventListener("keydown", onKey);
  }, [setMenuOpen]);

  return (
    <header className="site-header">
      <div className="container row" style={{ color: "rgb(34, 51, 80)" }}>
        <div className="header-leading">
          <button
            type="button"
            className={`nav-toggle${menuOpen ? " nav-toggle--open" : ""}`}
            aria-expanded={menuOpen}
            aria-controls="site-nav"
            aria-label={menuOpen ? t("header.closeMenu") : t("header.openMenu")}
            onClick={() => setMenuOpen((v) => !v)}
          >
            <span className="nav-toggle-bars" aria-hidden="true" />
          </button>
          <a href="index.html" className="logo-link" aria-label="Forsvar">
            <img src="assets/forsvar-eagle-white.png" alt="" className="logo-eagle" />
            <span className="wordmark on-dark" style={{ color: "#fff" }}>FORSVAR</span>
          </a>
        </div>

        {menuOpen && narrow &&
        <button
          type="button"
          className="nav-backdrop"
          aria-label={t("header.closeMenu")}
          tabIndex={-1}
          onClick={closeMobilePanel}
        />}

        <nav
          id="site-nav"
          className={`nav${menuOpen && narrow ? " nav--open" : ""}`}
          aria-label={t("nav.aria.main")}
        >
          <div className="nav-item" data-open={open === "products"} {...itemHandlers("products")}>
            {t("nav.products")} <ChevDown />
            <Mega narrow={narrow} open={open === "products"} {...megaLinkProps} cols={productsCols} />
          </div>

          <div className="nav-item" data-open={open === "solutions"} {...itemHandlers("solutions")}>
            {t("nav.solutions")} <ChevDown />
            <Mega narrow={narrow} open={open === "solutions"} {...megaLinkProps} cols={solutionsCols} />
          </div>

          <div className="nav-item" data-open={open === "industries"} {...itemHandlers("industries")}>
            {t("nav.industries")} <ChevDown />
            <Mega narrow={narrow} open={open === "industries"} {...megaLinkProps} cols={industriesCols} />
          </div>
          <div className="nav-item" data-open={open === "company"} {...itemHandlers("company")}>
            {t("nav.company")} <ChevDown />
            <Mega narrow={narrow} open={open === "company"} {...megaLinkProps} cols={companyCols} />
          </div>
          <div className="nav-item" data-open={open === "contact"} {...itemHandlers("contact")}>
            {t("nav.contact")} <ChevDown />
            <Mega narrow={narrow} open={open === "contact"} {...megaLinkProps} cols={contactCols} />
          </div>

          <div className="lang-pill" role="group" aria-label={t("nav.aria.lang")}>
            <button type="button" className={lang === "es" ? "active" : ""} onClick={() => setLang("es")}>ES</button>
            <button type="button" className={lang === "en" ? "active" : ""} onClick={() => setLang("en")}>EN</button>
            <button type="button" className={lang === "pt" ? "active" : ""} onClick={() => setLang("pt")}>PT</button>
          </div>
        </nav>
      </div>
    </header>);

}

function ChevDown() {
  return <svg className="chev" viewBox="0 0 10 10" fill="none"><path d="M2 4l3 3 3-3" stroke="currentColor" strokeWidth="1.4" /></svg>;
}

function Mega({ cols, open = false, narrow = false, onLinkActivate }) {
  const rootRef = useRef(null);

  useLayoutEffect(() => {
    const el = rootRef.current;
    if (!open) {
      el?.style.removeProperty("--megamenu-shift");
      return;
    }
    if (narrow) {
      el?.style.removeProperty("--megamenu-shift");
      return;
    }

    const apply = () => clampMegamenuToViewport(el);

    apply();
    let innerRaf = null;
    const outerRaf = requestAnimationFrame(() => {
      innerRaf = requestAnimationFrame(apply);
    });

    window.addEventListener("resize", apply);
    const vv = window.visualViewport;
    if (vv) vv.addEventListener("resize", apply);

    return () => {
      cancelAnimationFrame(outerRaf);
      if (innerRaf != null) cancelAnimationFrame(innerRaf);
      window.removeEventListener("resize", apply);
      if (vv) vv.removeEventListener("resize", apply);
      el?.style.removeProperty("--megamenu-shift");
    };
  }, [open, narrow]);

  const onMegaClick = (e) => {
    e.stopPropagation();
    if (onLinkActivate && e.target.closest("a[href]")) onLinkActivate();
  };

  return (
    <div
      ref={rootRef}
      className="megamenu"
      style={{ gridTemplateColumns: `repeat(${cols.length}, 1fr)`, gap: 16, backgroundColor: "rgb(34, 51, 80)" }}
      onClick={onMegaClick}
    >
      {cols.map((col, i) =>
      <div key={i}>
          {col.titleHref ?
            <a href={col.titleHref} className="col-title" style={{ display: "block", textDecoration: "none" }} {...megaAnchorProps(col.titleHref)}>{col.title}</a> :
            <div className="col-title">{col.title}</div>}
          <div>
            {col.items.map(([t, d, href], j) =>
          <a key={j} href={href || "#"} style={{ padding: "8px 12px", display: "block" }} {...megaAnchorProps(href)}><strong>{t}</strong><span>{d}</span></a>
          )}
          </div>
        </div>
      )}
    </div>);

}

// ============ Typed Headline ============
const PRE_TYPE_DELAY = 1200;
const POST_TYPE_DELAY = 1800;
const TYPE_INTERVAL = 42;

function TypedHeadline({ segments }) {
  const totalChars = segments.reduce((acc, s) => acc + (s.value ? s.value.length : 0), 0);
  const [phase, setPhase] = useState("waiting"); // waiting → typing → done → hidden
  const [chars, setChars] = useState(0);

  useEffect(() => {
    setChars(0);
    setPhase("waiting");
  }, [segments]);

  // Pre-type delay — re-arms whenever phase returns to "waiting"
  // (initial mount, or reset on bfcache restore below).
  useEffect(() => {
    if (phase !== "waiting") return;
    const t = setTimeout(() => setPhase("typing"), PRE_TYPE_DELAY);
    return () => clearTimeout(t);
  }, [phase]);

  useEffect(() => {
    if (phase !== "typing") return;
    if (chars >= totalChars) { setPhase("done"); return; }
    const t = setTimeout(() => setChars(c => c + 1), TYPE_INTERVAL);
    return () => clearTimeout(t);
  }, [phase, chars, totalChars]);

  useEffect(() => {
    if (phase !== "done") return;
    const t = setTimeout(() => setPhase("hidden"), POST_TYPE_DELAY);
    return () => clearTimeout(t);
  }, [phase]);

  // Replay the effect when the page is restored from the back/forward cache
  // (Safari/Chrome). Without this, navigating away and back would leave the
  // cursor in its "hidden" state with no animation.
  useEffect(() => {
    const onPageShow = (e) => {
      if (e.persisted) {
        setChars(0);
        setPhase("waiting");
      }
    };
    window.addEventListener("pageshow", onPageShow);
    return () => window.removeEventListener("pageshow", onPageShow);
  }, []);

  // Walk segments and render typed slice
  let remaining = chars;
  const out = [];
  let inLine2 = false;
  let line2Buffer = [];
  const flushLine2 = () => {
    if (line2Buffer.length) {
      out.push(<span className="hero-line-2" key={`l2-${out.length}`}>{line2Buffer}</span>);
      line2Buffer = [];
    }
  };
  const push = (node) => {
    if (inLine2) line2Buffer.push(node);
    else out.push(node);
  };

  segments.forEach((seg, i) => {
    if (seg.type === "wrap-line2-start") { inLine2 = true; return; }
    if (seg.type === "wrap-end") { flushLine2(); inLine2 = false; return; }
    if (seg.type === "br") {
      // Only emit the line break once the preceding text has been fully typed.
      if (remaining >= 0) push(<br key={`br-${i}`} />);
      return;
    }
    if (!seg.value) return;
    const take = Math.max(0, Math.min(seg.value.length, remaining));
    remaining -= seg.value.length;
    if (take === 0) return;
    const slice = seg.value.slice(0, take);
    if (seg.type === "underline") {
      push(<span className="underline-mark" key={`u-${i}`}>{slice}</span>);
    } else {
      push(<React.Fragment key={`t-${i}`}>{slice}</React.Fragment>);
    }
  });

  // Cursor: shown until phase === "hidden"
  if (phase !== "hidden") {
    const cursorEl = <span className={`typed-cursor ${phase}`} key="cursor" aria-hidden="true"></span>;
    if (line2Buffer.length > 0) {
      line2Buffer.push(cursorEl);
      out.push(<span className="hero-line-2" key={`l2-${out.length}`}>{line2Buffer}</span>);
    } else if (out.length > 0) {
      const lastIdx = out.length - 1;
      const last = out[lastIdx];
      if (last && last.props && last.props.className === "hero-line-2") {
        out[lastIdx] = <span className="hero-line-2" key={`l2-final`}>{[...last.props.children, cursorEl]}</span>;
      } else {
        out.push(cursorEl);
      }
    } else {
      out.push(cursorEl);
    }
  } else {
    flushLine2();
  }

  return <>{out}</>;
}

window.TypedHeadline = TypedHeadline;

// After React mounts the page, jump to the URL hash if the target element
// exists. Without this, navigating from the mega-menu (e.g. aml.html#screening)
// lands at the top because the browser tries to scroll before React has
// rendered the section. Retries briefly to wait for late-mounting components.
(function setupHashScroll() {
  const jump = () => {
    if (!window.location.hash) return;
    const id = decodeURIComponent(window.location.hash.slice(1));
    let attempts = 0;
    const tryScroll = () => {
      const el = document.getElementById(id);
      if (el) { el.scrollIntoView({ block: "start" }); return; }
      if (attempts++ < 30) setTimeout(tryScroll, 50);
    };
    tryScroll();
  };
  if (document.readyState === "complete") jump();
  else window.addEventListener("load", jump);
})();

// ============ Hero ============
function Hero({ tweaks }) {
  const { lang, t } = useLang();
  const heroSegments = useMemo(() => getHeroSegments(t), [lang, t]);
  return (
    <section className="hero" id="top">
      <div className="container">
        <span className="kicker"><span className="dot" />{t("home.hero.kicker")}</span>
        <h1 className="display hero-headline" style={{ marginTop: 22 }}>
          <TypedHeadline key={lang} segments={heroSegments} />
        </h1>

        <div className="hero-lower">
          <div className="hero-lower-left">
            <p className="hero-sub">{t("home.hero.sub")}</p>
            <div className="hero-cta">
              <a href={window.FORSVAR_BOOK_DEMO_CALENDAR_HREF} className="btn btn-primary" target="_blank" rel="noopener noreferrer">{t("home.hero.cta1")} <Arrow /></a>
              <a href="#ecosistema" className="btn btn-ghost">{t("home.hero.cta2")}</a>
            </div>
            <div className="hero-meta">
              <div className="item"><div className="num">{t("home.hero.meta1n")}</div><div className="lbl">{t("home.hero.meta1l")}</div></div>
              <div className="item"><div className="num">{t("home.hero.meta2n")}</div><div className="lbl">{t("home.hero.meta2l")}</div></div>
              <div className="item"><div className="num">{t("home.hero.meta3n")}</div><div className="lbl">{t("home.hero.meta3l")}</div></div>
            </div>
          </div>

          <div className="hero-visual" aria-hidden="true">
            <div className="dash-card back"><img src="assets/dashboard-rules.png" alt="" /></div>
            <div className="dash-card front"><img src="assets/dashboard-cases.png" alt="" /></div>
            <div className="hero-decor"><div className="bar-pattern" /></div>
          </div>
        </div>
      </div>
    </section>);
}

function Arrow() {return <svg className="arrow" width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2 7h10m-3-3l3 3-3 3" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" /></svg>;}

// ============ Strip ============
function Strip() {
  const { t, lang } = useLang();
  const items = useMemo(() => [0, 1, 2, 3, 4, 5].map((i) => t("home.strip.i" + i)), [lang, t]);
  return (
    <div className="strip" style={{ backgroundColor: "rgb(255, 255, 255)" }}>
      <div className="container row">
        <span style={{ color: "rgb(34, 51, 80)" }}>{t("home.strip.prefix")}</span>
        {items.map((x, i) => <span key={i} style={{ color: "rgb(34, 51, 80)" }}>{x}</span>)}
      </div>
    </div>);

}

// ============ Ecosistema ============
function Ecosistema() {
  const { t } = useLang();
  return (
    <section id="ecosistema">
      <div className="container">
        <div className="section-head">
          <div>
            <span className="kicker"><span className="dot" />{t("home.eco.kicker")}</span>
            <h2 className="section" style={{ marginTop: 16, color: "rgb(34, 51, 80)" }}>
              {(() => {
                const full = t("home.eco.h2");
                const u = t("home.eco.h2u");
                const idx = full.indexOf(u);
                if (idx < 0) return full;
                return (
                  <>
                    {full.slice(0, idx)}
                    <span className="underline-mark"><span style={{ color: "#223350" }}>{u}</span></span>
                    {full.slice(idx + u.length)}
                  </>);
              })()}
            </h2>
          </div>
          <p className="lead">{t("home.eco.lead")}</p>
        </div>

        <div className="cards-3">
          <div className="card">
            <div className="num">{t("home.eco.c1n")}</div>
            <h3 className="card-title">{t("home.eco.c1t")}</h3>
            <p>{t("home.eco.c1p")}</p>
            <div className="foot">{t("home.eco.c1f")}</div>
          </div>
          <div className="card">
            <div className="num">{t("home.eco.c2n")}</div>
            <h3 className="card-title">{t("home.eco.c2t")}</h3>
            <p>{t("home.eco.c2p")}</p>
            <div className="foot">{t("home.eco.c2f")}</div>
          </div>
          <div className="card">
            <div className="num">{t("home.eco.c3n")}</div>
            <h3 className="card-title">{t("home.eco.c3t")}</h3>
            <p>{t("home.eco.c3p")}</p>
            <div className="foot">{t("home.eco.c3f")}</div>
          </div>
        </div>
      </div>
    </section>);

}

// ============ Qué hacemos ============
function QueHacemos() {
  const { t } = useLang();
  return (
    <section className="on-ink" id="que-hacemos">
      <div className="container">
        <div className="section-head">
          <div>
            <span className="kicker"><span className="dot" />{t("home.qh.kicker")}</span>
            <h2 className="section" style={{ marginTop: 16 }}>
              {t("home.qh.h2l1")}<br />{t("home.qh.h2l2a")}<span className="accent-mark">{t("home.qh.h2l2b")}</span>{t("home.qh.h2l2c")}
            </h2>
          </div>
          <p className="lead">{t("home.qh.lead")}</p>
        </div>

        <div className="cards-3">
          <div className="card">
            <div className="num" style={{ color: "var(--accent)" }}>{t("home.qh.card1n")}</div>
            <h3 className="card-title" style={{ color: "rgb(255, 255, 255)" }}>{t("home.qh.card1t")}</h3>
            <p>{t("home.qh.card1p")}</p>
          </div>
          <div className="card">
            <div className="num" style={{ color: "var(--accent)" }}>{t("home.qh.card2n")}</div>
            <h3 className="card-title" style={{ color: "rgb(255, 255, 255)" }}>{t("home.qh.card2t")}</h3>
            <p>{t("home.qh.card2p")}</p>
          </div>
          <div className="card">
            <div className="num" style={{ color: "var(--accent)" }}>{t("home.qh.card3n")}</div>
            <h3 className="card-title" style={{ color: "rgb(255, 255, 255)" }}>{t("home.qh.card3t")}</h3>
            <p>{t("home.qh.card3p")}</p>
          </div>
        </div>

        <div className="pipeline">
          <Step n="01" t={t("home.qh.s1t")} d={t("home.qh.s1d")} />
          <Step n="02" t={t("home.qh.s2t")} d={t("home.qh.s2d")} />
          <Step n="03" t={t("home.qh.s3t")} d={t("home.qh.s3d")} />
          <Step n="04" t={t("home.qh.s4t")} d={t("home.qh.s4d")} />
          <Step n="05" t={t("home.qh.s5t")} d={t("home.qh.s5d")} />
        </div>
      </div>
    </section>);

}

function Step({ n, t, d }) {
  return (
    <div className="step">
      <div className="n">{n}</div>
      <div className="t" style={{ color: "rgb(255, 255, 255)" }}>{t}</div>
      <div className="d" style={{ color: "rgb(194, 200, 212)" }}>{d}</div>
    </div>);

}

window.Header = Header;
window.Hero = Hero;
window.Strip = Strip;
window.Ecosistema = Ecosistema;
window.QueHacemos = QueHacemos;
window.Arrow = Arrow;