/* global React, window */

// =====================================================================
// Nosotros (About) page
// =====================================================================
window.V4NosotrosPage = function V4NosotrosPage() {
  window.useReveal();
  const { t } = window.useV4();
  const CountUp = window.CountUp;

  return (
    <React.Fragment>
      <window.V4Nav active="about" />

      {/* Hero */}
      <section className="section" style={{ paddingTop: "clamp(70px, 10vw, 120px)", paddingBottom: "clamp(50px, 7vw, 90px)" }}>
        <div className="wrap">
          <div data-reveal style={{ marginBottom: 36 }}><span className="eyebrow">{t.nosotros.hero_eyebrow}</span></div>
          <h1 className="h-display" style={{ marginBottom: 32 }}>
            <span className="kt-line"><span>{t.nosotros.hero_t1}</span></span>
            <span className="kt-line d2"><span style={{ color: "var(--accent)" }}>{t.nosotros.hero_t2}</span></span>
            <span className="kt-line d3"><span>{t.nosotros.hero_t3}</span></span>
          </h1>
          <p className="lead" data-reveal>{t.nosotros.hero_lead}</p>
        </div>
      </section>

      {/* Historia — timeline */}
      <section className="section" style={{ background: "var(--bg-2)" }}>
        <div className="wrap">
          <div data-reveal style={{ maxWidth: 720, marginBottom: 64 }}>
            <span className="eyebrow">{t.nosotros.hist_eyebrow}</span>
            <h2 className="h-section">{t.nosotros.hist_title}</h2>
          </div>
          <div data-stagger style={{ display: "grid", gap: 0 }}>
            {[1,2,3].map((i, idx, arr) => (
              <div key={i} style={{ display: "grid", gridTemplateColumns: "180px 1fr", gap: 48, padding: "44px 0", borderTop: "1px solid var(--rule)", borderBottom: idx === arr.length-1 ? "1px solid var(--rule)" : "none" }}>
                <div>
                  <div style={{ fontFamily: "var(--font-mono)", fontSize: 12, letterSpacing: ".1em", color: "var(--ink-mute)", marginBottom: 8 }}>{t.nosotros["hist_m"+i+"n"]}</div>
                  <div className="h-display" style={{ fontSize: "clamp(40px, 4.5vw, 64px)" }}>{t.nosotros["hist_m"+i+"y"]}</div>
                </div>
                <p style={{ color: "var(--ink-soft)", margin: 0, fontSize: 17, lineHeight: 1.6, maxWidth: "60ch" }}>{t.nosotros["hist_m"+i]}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Números — animated counters */}
      <section className="section">
        <div className="wrap">
          <div data-reveal style={{ marginBottom: 56 }}>
            <span className="eyebrow">{t.nosotros.nums_eyebrow}</span>
          </div>
          <div data-stagger style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(220px, 1fr))", gap: 0, borderTop: "1px solid var(--rule)" }}>
            {[
              { val: 500, sfx: "+", lab: t.nosotros.nums_l1 },
              { val: 15, sfx: "+", lab: t.nosotros.nums_l2 },
              { val: 10, sfx: "+", lab: t.nosotros.nums_l3 },
              { val: 100, sfx: "%", lab: t.nosotros.nums_l4 },
            ].map((n, i, arr) => (
              <div key={i} style={{ padding: "44px 24px", borderRight: i < arr.length-1 ? "1px solid var(--rule)" : "none" }}>
                <div className="h-display" style={{ fontSize: "clamp(48px, 5.5vw, 80px)", marginBottom: 10 }}>
                  <CountUp to={n.val} suffix={n.sfx} />
                </div>
                <div style={{ color: "var(--ink-soft)", fontSize: 14.5 }}>{n.lab}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Cómo trabajamos */}
      <section className="section" style={{ background: "var(--invert-bg)", color: "var(--invert-ink)" }}>
        <div className="wrap">
          <div data-reveal style={{ maxWidth: 720, marginBottom: 56 }}>
            <span className="eyebrow" style={{ color: "rgba(255,255,255,.6)" }}>{t.nosotros.how_eyebrow}</span>
            <h2 className="h-section" style={{ color: "var(--invert-ink)" }}>{t.nosotros.how_title}</h2>
          </div>
          <div data-stagger style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(280px, 1fr))", gap: 0 }}>
            {[1,2,3,4].map((i) => (
              <div key={i} style={{ padding: "36px 32px 36px 0", borderTop: "1px solid rgba(255,255,255,.1)", borderBottom: "1px solid rgba(255,255,255,.1)" }}>
                <div style={{ width: 28, height: 4, background: "var(--accent)", marginBottom: 24 }} />
                <h3 className="h-card" style={{ color: "var(--invert-ink)" }}>{t.nosotros["how_p"+i+"t"]}</h3>
                <p style={{ color: "rgba(255,255,255,.65)", margin: 0, fontSize: 15.5, lineHeight: 1.6 }}>{t.nosotros["how_p"+i+"d"]}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* CTA final con form modal */}
      <window.V5Contact />

      <window.V4Footer />
    </React.Fragment>
  );
};

// =====================================================================
// Servicios page — 4 servicios desplegados
// =====================================================================
window.V4ServiciosPage = function V4ServiciosPage() {
  window.useReveal();
  const { t } = window.useV4();

  const ServiceBlock = ({ id, num, name, intro, what, list, listLabel, close, cta, alt }) => (
    <section id={id} className="section" style={alt ? { background: "var(--bg-2)" } : {}}>
      <div className="wrap">
        <div style={{ display: "grid", gridTemplateColumns: "minmax(0, 0.9fr) minmax(0, 1.1fr)", gap: 64, alignItems: "start" }}>
          <div data-reveal>
            <div style={{ fontFamily: "var(--font-mono)", fontSize: 12, letterSpacing: ".1em", color: "var(--ink-mute)", marginBottom: 14 }}>{num}</div>
            <h2 className="h-section" style={{ marginBottom: 28 }}>{name}</h2>
            <p style={{ color: "var(--ink-soft)", margin: 0, fontSize: 16.5, lineHeight: 1.6 }}>{intro}</p>
          </div>
          <div data-reveal>
            <p style={{ color: "var(--ink)", fontSize: 17, lineHeight: 1.55, margin: "0 0 32px" }}>{what}</p>
            {list && (
              <div style={{ borderTop: "1px solid var(--rule)" }}>
                {listLabel && <div style={{ fontFamily: "var(--font-mono)", fontSize: 11.5, letterSpacing: ".14em", color: "var(--ink-mute)", textTransform: "uppercase", padding: "16px 0 8px" }}>{listLabel}</div>}
                <ul style={{ listStyle: "none", padding: 0, margin: 0 }}>
                  {list.map((it, i) => (
                    <li key={i} style={{ padding: "14px 0", borderTop: i === 0 && listLabel ? "none" : "1px solid var(--rule-soft)", display: "flex", gap: 14, fontSize: 15.5, color: "var(--ink-soft)" }}>
                      <span style={{ color: "var(--accent)", fontWeight: 700 }}>—</span>
                      <span style={{ flex: 1 }}>{it}</span>
                    </li>
                  ))}
                </ul>
              </div>
            )}
            <a href={window.IK_CALENDAR_URL} target="_blank" rel="noopener" className="btn btn-primary" style={{ marginTop: 32 }}>{cta} <span className="arr">→</span></a>
          </div>
        </div>
      </div>
    </section>
  );

  return (
    <React.Fragment>
      <window.V4Nav active="services" />

      {/* Hero */}
      <section className="section" style={{ paddingTop: "clamp(70px, 10vw, 120px)", paddingBottom: "clamp(50px, 7vw, 90px)" }}>
        <div className="wrap">
          <div data-reveal style={{ marginBottom: 36 }}><span className="eyebrow">{t.servicios.hero_eyebrow}</span></div>
          <h1 className="h-display" style={{ marginBottom: 32 }}>
            <span className="kt-line"><span>{t.servicios.hero_t1}</span></span>
            <span className="kt-line d2"><span style={{ color: "var(--accent)" }}>{t.servicios.hero_t2}</span></span>
            <span className="kt-line d3"><span>{t.servicios.hero_t3}</span></span>
          </h1>
          <p className="lead" data-reveal>{t.servicios.hero_lead}</p>
          <div data-reveal style={{ marginTop: 48, display: "flex", gap: 12, flexWrap: "wrap" }}>
            {[1,2,4].map(i => (
              <a key={i} href={"#s"+i} className="btn btn-ghost" style={{ height: 38, fontSize: 13.5 }}>{t.servicios["s"+i+"_num"]} · {t.servicios["s"+i+"_name"]}</a>
            ))}
          </div>
        </div>
      </section>

      <ServiceBlock
        id="s1" num={t.servicios.s1_num} name={t.servicios.s1_name}
        intro={t.servicios.s1_for} what={t.servicios.s1_what}
        list={[t.servicios.s1_inc1, t.servicios.s1_inc2, t.servicios.s1_inc3, t.servicios.s1_inc4]}
        listLabel={t.servicios.label_includes}
        close={t.servicios.s1_close} cta={t.servicios.s1_cta}
        alt={true}
      />
      <ServiceBlock
        id="s2" num={t.servicios.s2_num} name={t.servicios.s2_name}
        intro={t.servicios.s2_for} what={t.servicios.s2_what}
        list={[t.servicios.s2_ex1, t.servicios.s2_ex2, t.servicios.s2_ex3, t.servicios.s2_ex4]}
        listLabel={t.servicios.label_examples}
        close={t.servicios.s2_close} cta={t.servicios.s2_cta}
      />

      {/* s3 (Plataformas) moved to its own page — see plataformas.html */}

      <ServiceBlock
        id="s4" num={t.servicios.s4_num} name={t.servicios.s4_name}
        intro={t.servicios.s4_for} what={t.servicios.s4_what}
        list={[t.servicios.s4_inc1, t.servicios.s4_inc2, t.servicios.s4_inc3, t.servicios.s4_inc4]}
        listLabel={t.servicios.label_includes}
        close={t.servicios.s4_close} cta={t.servicios.s4_cta}
      />

      {/* CTA final con form modal */}
      <window.V5Contact />

      <window.V4Footer />
    </React.Fragment>
  );
};


// =====================================================================
// Plataformas Inteligentes — dedicated page
// =====================================================================
window.V4PlatformsPage = function V4PlatformsPage() {
  window.useReveal();
  const { t } = window.useV4();
  const CountUp = window.CountUp;

  const platforms = [
    { key: "p1", logo: "assets/partner-monday.svg",     tone: "var(--ik-glauco-100, #C7F2EF)" },
    { key: "p2", logo: "assets/partner-freshworks.svg", tone: "var(--ik-celeste-100, #D6EEFE)" },
    { key: "p3", logo: "assets/partner-aircall.svg",    tone: "var(--ik-marine-100, #DCE5F6)" },
    { key: "p4", logo: "assets/partner-make.svg",       tone: "var(--ik-iris-100, #E2DCFE)" },
  ];

  return (
    <React.Fragment>
      <window.V4Nav active="platforms" />

      {/* Hero */}
      <section className="section" style={{ paddingTop: "clamp(70px, 10vw, 120px)", paddingBottom: "clamp(50px, 7vw, 90px)" }}>
        <div className="wrap">
          <div data-reveal style={{ marginBottom: 36, display: "flex", alignItems: "center", gap: 10 }}>
            <span style={{ width: 8, height: 8, borderRadius: "50%", background: "var(--ik-glauco, var(--accent))", display: "inline-block" }} />
            <span className="eyebrow">{t.plataformas.hero_eyebrow}</span>
          </div>
          <h1 className="h-display" style={{ marginBottom: 32 }}>
            <span className="kt-line"><span>{t.plataformas.hero_t1}</span></span>
            <span className="kt-line d2"><span style={{ color: "var(--accent)" }}>{t.plataformas.hero_t2}</span></span>
            <span className="kt-line d3"><span>{t.plataformas.hero_t3}</span></span>
          </h1>
          <p className="lead" data-reveal style={{ maxWidth: "62ch" }}>{t.plataformas.hero_lead}</p>
          <div data-reveal style={{ marginTop: 40, display: "flex", gap: 12, flexWrap: "wrap" }}>
            <a href={window.IK_CALENDAR_URL} target="_blank" rel="noopener" className="btn btn-primary">{t.plataformas.hero_cta1} <span className="arr">→</span></a>
            <a href="#platforms-grid" className="btn btn-ghost">{t.plataformas.hero_cta2}</a>
          </div>

          {/* Partner badges — infinite marquee (right → left) */}
          <div data-reveal style={{ marginTop: 64, paddingTop: 28, borderTop: "1px solid var(--rule)" }}>
            <div className="pf-marquee-wrap" aria-label="Plataformas partner">
              <div className="pf-marquee">
                {[...platforms, ...platforms, ...platforms].map((p, i) => (
                  <div key={i} className="pf-marquee-item">
                    <img src={p.logo} alt={t.plataformas[p.key+"_name"]} className="pf-marquee-logo" />
                    <span className="pf-marquee-tag">{t.plataformas[p.key+"_tag"]}</span>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Promise */}
      <section className="section" style={{ background: "var(--bg-2)" }}>
        <div className="wrap">
          <div data-reveal style={{ maxWidth: 720, marginBottom: 56 }}>
            <span className="eyebrow">{t.plataformas.promise_eyebrow}</span>
            <h2 className="h-section">{t.plataformas.promise_title}</h2>
            <p style={{ color: "var(--ink-soft)", fontSize: 17, lineHeight: 1.6, marginTop: 22, maxWidth: "60ch" }}>{t.plataformas.promise_lead}</p>
          </div>
          <div data-stagger style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(260px, 1fr))", gap: 0, borderTop: "1px solid var(--rule)" }}>
            {[1,2,3].map((i, idx, arr) => (
              <div key={i} style={{ padding: "40px 28px 40px 0", borderRight: idx < arr.length-1 ? "1px solid var(--rule)" : "none" }}>
                <div style={{ width: 28, height: 3, background: "var(--accent)", marginBottom: 22 }} />
                <h3 className="h-card" style={{ marginBottom: 12 }}>{t.plataformas["promise_p"+i+"t"]}</h3>
                <p style={{ color: "var(--ink-soft)", margin: 0, fontSize: 15.5, lineHeight: 1.6 }}>{t.plataformas["promise_p"+i+"d"]}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Platforms grid */}
      <section id="platforms-grid" className="section">
        <div className="wrap">
          <div data-reveal style={{ maxWidth: 760, marginBottom: 56 }}>
            <span className="eyebrow">{t.plataformas.grid_eyebrow}</span>
            <h2 className="h-section">{t.plataformas.grid_title}</h2>
            <p style={{ color: "var(--ink-soft)", fontSize: 17, lineHeight: 1.6, marginTop: 22, maxWidth: "60ch" }}>{t.plataformas.grid_lead}</p>
          </div>
          <div data-stagger style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(420px, 1fr))", gap: 20 }}>
            {platforms.map((p, i) => {
              const k = p.key;
              const num = String(i+1).padStart(2, "0");
              return (
                <article key={k} className="card-lift" style={{
                  background: "var(--bg)",
                  border: "1px solid var(--rule)",
                  borderRadius: "var(--r-lg, 16px)",
                  padding: "36px 36px 32px",
                  display: "flex",
                  flexDirection: "column",
                  gap: 22,
                  position: "relative",
                  overflow: "hidden",
                }}>
                  <div aria-hidden="true" style={{
                    position: "absolute", top: 0, right: 0,
                    width: 200, height: 200,
                    background: `radial-gradient(circle at top right, ${p.tone}, transparent 70%)`,
                    pointerEvents: "none",
                  }} />

                  <header style={{ position: "relative" }}>
                    <div style={{ fontFamily: "var(--font-mono, monospace)", fontSize: 12, color: "var(--ink-mute)", letterSpacing: ".14em", marginBottom: 18 }}>{num} / 04</div>
                    <img src={p.logo} alt={t.plataformas[k+"_name"]} style={{ height: 28, width: "auto", marginBottom: 12 }} />
                    <div style={{ fontFamily: "var(--font-mono, monospace)", fontSize: 11, color: "var(--ink-mute)", letterSpacing: ".1em", textTransform: "uppercase" }}>{t.plataformas[k+"_tag"]}</div>
                  </header>

                  <p style={{ margin: 0, fontSize: 16.5, lineHeight: 1.55, color: "var(--ink)", maxWidth: "44ch" }}>{t.plataformas[k+"_lede"]}</p>

                  <p style={{ margin: 0, fontSize: 14, lineHeight: 1.55, color: "var(--ink-soft)", maxWidth: "44ch", paddingLeft: 14, borderLeft: "2px solid var(--accent)" }}>
                    {t.plataformas[k+"_for"]}
                  </p>

                  <ul style={{ listStyle: "none", padding: 0, margin: 0, borderTop: "1px solid var(--rule)" }}>
                    {[1,2,3,4].map(ci => (
                      <li key={ci} style={{ padding: "12px 0", borderBottom: "1px solid var(--rule-soft, var(--rule))", display: "flex", gap: 12, fontSize: 14.5, color: "var(--ink-soft)" }}>
                        <span style={{ color: "var(--accent)", fontWeight: 700, fontSize: 13, lineHeight: 1.6 }}>—</span>
                        <span style={{ flex: 1 }}>{t.plataformas[k+"_c"+ci]}</span>
                      </li>
                    ))}
                  </ul>

                  <div style={{ marginTop: "auto", paddingTop: 4 }}>
                    <a href="#contact" className="btn-link" style={{ display: "inline-flex", alignItems: "center", gap: 6, fontSize: 14.5, fontWeight: 500, color: "var(--ink)", textDecoration: "none" }}>
                      {t.plataformas[k+"_link"]} <span className="arr">→</span>
                    </a>
                  </div>
                </article>
              );
            })}
          </div>
        </div>
      </section>

      {/* How we work — dark */}
      <section className="section" style={{ background: "var(--invert-bg)", color: "var(--invert-ink)" }}>
        <div className="wrap">
          <div data-reveal style={{ maxWidth: 720, marginBottom: 56 }}>
            <span className="eyebrow" style={{ color: "rgba(255,255,255,.6)" }}>{t.plataformas.how_eyebrow}</span>
            <h2 className="h-section" style={{ color: "var(--invert-ink)" }}>{t.plataformas.how_title}</h2>
          </div>
          <div data-stagger style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(240px, 1fr))", gap: 0, borderTop: "1px solid rgba(255,255,255,.12)" }}>
            {[1,2,3,4].map((i, idx, arr) => (
              <div key={i} style={{ padding: "40px 28px 40px 0", borderRight: idx < arr.length-1 ? "1px solid rgba(255,255,255,.12)" : "none" }}>
                <div style={{ fontFamily: "var(--font-mono, monospace)", fontSize: 12, color: "rgba(255,255,255,.5)", letterSpacing: ".14em", marginBottom: 22 }}>{t.plataformas["how_s"+i+"n"]}</div>
                <div style={{ width: 28, height: 3, background: "var(--accent)", marginBottom: 22 }} />
                <h3 className="h-card" style={{ color: "var(--invert-ink)", marginBottom: 12 }}>{t.plataformas["how_s"+i+"t"]}</h3>
                <p style={{ color: "rgba(255,255,255,.66)", margin: 0, fontSize: 15.5, lineHeight: 1.6 }}>{t.plataformas["how_s"+i+"d"]}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Stats */}
      <section className="section" style={{ paddingTop: "clamp(60px, 7vw, 90px)", paddingBottom: "clamp(60px, 7vw, 90px)" }}>
        <div className="wrap">
          <div data-stagger style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(220px, 1fr))", gap: 0, borderTop: "1px solid var(--rule)" }}>
            {[
              { val: 500, sfx: "+", lab: t.plataformas.stats_l1 },
              { val: 10,  sfx: "+", lab: t.plataformas.stats_l2 },
              { val: 4,   sfx: " sem", lab: t.plataformas.stats_l3 },
            ].map((m, i, arr) => (
              <div key={i} style={{ padding: "44px 24px", borderRight: i < arr.length-1 ? "1px solid var(--rule)" : "none" }}>
                <div className="h-display" style={{ fontSize: "clamp(44px, 5vw, 72px)", marginBottom: 8, color: "var(--accent)" }}>
                  {CountUp ? <CountUp to={m.val} suffix={m.sfx} /> : (m.val + m.sfx)}
                </div>
                <div style={{ color: "var(--ink-soft)", fontSize: 14.5 }}>{m.lab}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <window.V5Contact />
      <window.V4Footer />
    </React.Fragment>
  );
};