/* Chiketto — Landing sections (multi-product studio positioning).
   Every string comes from the active-language dict `t` (see src/i18n.jsx).
   Icons & layout live here; copy does not.
   Exports window.ChikettoSections = { Nav, Hero, Pillars, Labs, Enterprise, Philosophy, Contact, Footer } */

const DSsx = window.ChikettoDesignSystem_cd71ef;

const SX_WRAP = { maxWidth: 1180, margin: "0 auto", padding: "0 32px" };
const SIco = ({ n, s = 22, c, sw = 2 }) => <window.CkIcon n={n} s={s} c={c} sw={sw} />;

function scrollTo(href) {
  const el = document.querySelector(href);
  if (el) el.scrollIntoView({ behavior: "smooth" });
}

function SectionHead({ eyebrow, title, sub, align = "center", maxW = 660, dark }) {
  return (
    <div className="ck-reveal" style={{ textAlign: align, maxWidth: align === "center" ? maxW : "none", margin: align === "center" ? "0 auto 52px" : "0 0 44px" }}>
      <span className="cl-eyebrow" style={dark ? { color: "var(--magenta-300)" } : undefined}>{eyebrow}</span>
      <h2 style={{ fontSize: 42, fontWeight: 800, letterSpacing: "-0.02em", color: "var(--text-strong)", margin: "12px 0 14px", textWrap: "balance" }}>{title}</h2>
      {sub && <p style={{ fontSize: 17.5, color: "var(--text-muted)", lineHeight: 1.55, textWrap: "pretty" }}>{sub}</p>}
    </div>
  );
}

/* ---------------- LANGUAGE TOGGLE ---------------- */
function LangToggle({ lang, setLang, dark }) {
  const opts = [{ id: "es", label: "ES" }, { id: "en", label: "EN" }];
  return (
    <div role="group" aria-label="Idioma / Language" style={{ display: "inline-flex", padding: 3, gap: 2, borderRadius: 999, background: dark ? "rgba(255,255,255,0.08)" : "var(--brand-soft)", border: `1px solid ${dark ? "rgba(255,255,255,0.14)" : "var(--brand-soft-border)"}` }}>
      {opts.map((o) => {
        const active = lang === o.id;
        return (
          <button key={o.id} onClick={() => setLang(o.id)} aria-pressed={active} style={{
            border: "none", cursor: "pointer", padding: "5px 12px", borderRadius: 999, fontFamily: "var(--font-display)",
            fontSize: 12.5, fontWeight: 800, letterSpacing: "0.04em",
            background: active ? "var(--text-brand)" : "transparent",
            color: active ? "#fff" : (dark ? "rgba(255,255,255,0.7)" : "var(--text-muted)"),
            transition: "background var(--duration-base) var(--ease-standard), color var(--duration-base) var(--ease-standard)",
          }}>{o.label}</button>
        );
      })}
    </div>
  );
}

/* ---------------- NAV ---------------- */
function Nav({ t, lang, setLang }) {
  const links = t.nav.links;
  const [open, setOpen] = React.useState(false);
  return (
    <header style={{ position: "sticky", top: 0, zIndex: 100, background: "color-mix(in srgb, var(--neutral-0) 82%, transparent)", backdropFilter: "blur(var(--blur-md))", WebkitBackdropFilter: "blur(var(--blur-md))", borderBottom: "1px solid var(--border-subtle)" }}>
      <div style={{ ...SX_WRAP, height: 72, display: "flex", alignItems: "center", gap: 32 }}>
        <a href="#inicio" onClick={(e) => { e.preventDefault(); scrollTo("#inicio"); }} style={{ display: "flex", alignItems: "center" }}><img src={(window.__resources && window.__resources.logoGradient) || "assets/logo/chiketto-new-gradient.svg"} alt="Chiketto" style={{ height: 32 }} /></a>
        <nav className="ck-navlinks" style={{ display: "flex", gap: 30, flex: 1 }}>
          {links.map((l) => <a key={l.href} href={l.href} onClick={(e) => { e.preventDefault(); scrollTo(l.href); }} style={{ color: "var(--text-body)", fontSize: 14.5, fontWeight: 600, textDecoration: "none" }} onMouseEnter={(e) => (e.target.style.color = "var(--text-brand)")} onMouseLeave={(e) => (e.target.style.color = "var(--text-body)")}>{l.label}</a>)}
        </nav>
        <div className="ck-navcta" style={{ display: "flex", alignItems: "center", gap: 14 }}>
          <LangToggle lang={lang} setLang={setLang} />
          <DSsx.Button size="sm" onClick={() => scrollTo("#contacto")}>{t.nav.cta}</DSsx.Button>
        </div>
        <button className="ck-burger" aria-label="Menú" onClick={() => setOpen(!open)} style={{ display: "none", border: "none", background: "transparent", cursor: "pointer", color: "var(--text-strong)" }}><SIco n={open ? "x" : "menu"} s={24} /></button>
      </div>
      {open && (
        <div className="ck-mobilemenu" style={{ display: "none", flexDirection: "column", gap: 4, padding: "8px 24px 18px", borderTop: "1px solid var(--border-subtle)", background: "var(--neutral-0)" }}>
          {links.map((l) => <a key={l.href} href={l.href} onClick={() => { setOpen(false); scrollTo(l.href); }} style={{ padding: "11px 4px", color: "var(--text-body)", fontSize: 16, fontWeight: 600, textDecoration: "none", borderBottom: "1px solid var(--border-subtle)" }}>{l.label}</a>)}
          <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginTop: 12 }}>
            <LangToggle lang={lang} setLang={setLang} />
          </div>
          <a href="#contacto" onClick={(e) => { e.preventDefault(); setOpen(false); scrollTo("#contacto"); }} style={{ marginTop: 12 }}><DSsx.Button fullWidth>{t.nav.cta}</DSsx.Button></a>
        </div>
      )}
    </header>
  );
}

/* ---------------- HERO ---------------- */
function HeroTile({ icon, label, top, left, r, delay, z }) {
  return (
    <div style={{ position: "absolute", top, left, "--r": r + "deg", zIndex: z, animation: `ck-float 7s ease-in-out infinite ${delay}s` }}>
      <div style={{ display: "flex", alignItems: "center", gap: 12, padding: "13px 17px 13px 13px", borderRadius: "var(--radius-lg)", background: "rgba(255,255,255,0.07)", border: "1px solid rgba(255,255,255,0.14)", backdropFilter: "blur(var(--blur-md))", WebkitBackdropFilter: "blur(var(--blur-md))", boxShadow: "0 18px 40px -18px rgba(0,0,0,0.6)", transform: `rotate(${r}deg)` }}>
        <span style={{ width: 44, height: 44, borderRadius: "var(--radius-md)", background: "var(--gradient-brand)", display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0, boxShadow: "var(--shadow-brand)" }}>
          <SIco n={icon} s={22} c="#fff" />
        </span>
        <span style={{ fontFamily: "var(--font-display)", fontSize: 14.5, fontWeight: 800, color: "#fff", whiteSpace: "nowrap", letterSpacing: "-0.01em" }}>{label}</span>
      </div>
    </div>
  );
}

function Hero({ t, theme = "dark" }) {
  const dark = theme === "dark";
  const p = t.labs.products;
  const tiles = [
    { icon: "wallet", label: p[0].name, top: 6, left: 24, r: -6, delay: 0, z: 3 },
    { icon: "puzzle", label: p[1].name, top: 96, left: 192, r: 5, delay: 0.7, z: 4 },
    { icon: "chef-hat", label: p[2].name, top: 188, left: 40, r: 4, delay: 1.1, z: 2 },
    { icon: "heart-pulse", label: t.enterprise.sectors[0], top: 286, left: 178, r: -5, delay: 0.4, z: 3 },
    { icon: "book-open-text", label: p[3].name, top: 300, left: 8, r: 7, delay: 1.5, z: 1 },
  ];
  return (
    <section id="inicio" data-theme={dark ? "dark" : undefined} style={{ position: "relative", background: dark ? "var(--gradient-ink)" : "var(--bg-page)", overflow: "hidden", borderBottom: dark ? "none" : "1px solid var(--border-subtle)" }}>
      {dark && <div style={{ position: "absolute", inset: 0, background: "var(--gradient-glow)", pointerEvents: "none" }} />}
      {!dark && <div style={{ position: "absolute", inset: 0, background: "radial-gradient(110% 90% at 95% -10%, var(--magenta-50) 0%, transparent 55%)", pointerEvents: "none" }} />}
      <div style={{ ...SX_WRAP, position: "relative", display: "grid", gridTemplateColumns: "1.08fr 0.92fr", gap: 48, alignItems: "center", padding: "94px 32px 102px" }} data-hero-grid>
        <div className="ck-reveal ck-in">
          <span className="cl-eyebrow" style={{ color: dark ? "var(--magenta-300)" : "var(--text-brand)" }}>{t.hero.eyebrow}</span>
          <h1 style={{ fontSize: 58, fontWeight: 800, letterSpacing: "-0.025em", lineHeight: 1.05, color: "var(--text-strong)", margin: "16px 0 20px", textWrap: "balance" }}>
            {t.hero.headPre}<span className="cl-gradient-text">{t.hero.headAccent}</span>{t.hero.headPost}
          </h1>
          <p style={{ fontSize: 19, lineHeight: 1.55, color: "var(--text-body)", maxWidth: 520, marginBottom: 30 }}>{t.hero.sub}</p>
          <div style={{ display: "flex", gap: 14, alignItems: "center", flexWrap: "wrap" }}>
            <DSsx.Button size="lg" iconRight={<SIco n="arrow-right" s={20} c="#fff" />} onClick={() => scrollTo("#ecosistema")}>{t.hero.ctaPrimary}</DSsx.Button>
            <DSsx.Button size="lg" variant="secondary" onClick={() => scrollTo("#contacto")}>{t.hero.ctaSecondary}</DSsx.Button>
          </div>
        </div>
        <div className="ck-reveal ck-in ck-herovisual" style={{ position: "relative", height: 440 }}>
          {tiles.map((tile) => <HeroTile key={tile.label + tile.top} {...tile} />)}
        </div>
      </div>
    </section>
  );
}

/* ---------------- PILLARS ---------------- */
function Pillars({ t }) {
  const icons = ["rocket", "blocks"];
  return (
    <section id="pilares" style={{ ...SX_WRAP, padding: "90px 32px" }}>
      <SectionHead eyebrow={t.pillars.eyebrow} title={t.pillars.title} sub={t.pillars.sub} />
      <div className="ck-reveal" style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(330px, 1fr))", gap: 22 }}>
        {t.pillars.items.map((it, i) => (
          <DSsx.Card key={it.tag} interactive padding={32} style={{ height: "100%" }}>
            <span style={{ width: 56, height: 56, borderRadius: "var(--radius-lg)", background: "var(--gradient-brand)", display: "flex", alignItems: "center", justifyContent: "center", marginBottom: 20, boxShadow: "var(--shadow-brand)" }}>
              <SIco n={icons[i]} s={27} c="#fff" />
            </span>
            <span className="cl-eyebrow">{it.tag}</span>
            <h3 style={{ fontSize: 23, fontWeight: 800, color: "var(--text-strong)", margin: "8px 0 12px", letterSpacing: "-0.01em" }}>{it.title}</h3>
            <p style={{ fontSize: 15.5, lineHeight: 1.6, color: "var(--text-muted)" }}>{it.body}</p>
          </DSsx.Card>
        ))}
      </div>
    </section>
  );
}

/* ---------------- CHIKETTO LABS (product ecosystem) ---------------- */
function Labs({ t }) {
  const icons = ["wallet", "puzzle", "chef-hat", "book-open-text"];
  const products = t.labs.products;
  return (
    <section id="ecosistema" style={{ background: "var(--bg-subtle)", borderTop: "1px solid var(--border-subtle)", borderBottom: "1px solid var(--border-subtle)" }}>
      <div style={{ ...SX_WRAP, padding: "90px 32px" }}>
        <SectionHead eyebrow={t.labs.eyebrow} title={t.labs.title} sub={t.labs.sub} />
        <div className="ck-reveal" style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(280px, 1fr))", gap: 20 }}>
          {products.map((pr, i) => (
            <DSsx.Card key={pr.name} interactive padding={26} style={{ height: "100%", position: "relative", overflow: "hidden" }}>
              {i === 0 && <span style={{ position: "absolute", top: 18, right: 18 }}><DSsx.Badge tone="brand" variant="solid">{t.labs.rootsTag}</DSsx.Badge></span>}
              <span style={{ width: 54, height: 54, borderRadius: "var(--radius-md)", background: "var(--brand-soft)", border: "1px solid var(--brand-soft-border)", display: "flex", alignItems: "center", justifyContent: "center", marginBottom: 18 }}>
                <SIco n={icons[i]} s={26} c="var(--text-brand)" />
              </span>
              <h3 style={{ fontSize: 19, fontWeight: 800, color: "var(--text-strong)", marginBottom: 4, letterSpacing: "-0.01em" }}>{pr.name}</h3>
              <p style={{ fontSize: 14, fontWeight: 700, color: "var(--text-brand)", marginBottom: 12 }}>{pr.tagline}</p>
              <p style={{ fontSize: 14.5, lineHeight: 1.55, color: "var(--text-muted)" }}>{pr.desc}</p>
            </DSsx.Card>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------------- ENTERPRISE ENGINEERING ---------------- */
function Enterprise({ t }) {
  const icons = ["heart-pulse", "scale", "messages-square"];
  const e = t.enterprise;
  return (
    <section id="empresarial" style={{ ...SX_WRAP, padding: "90px 32px" }}>
      <SectionHead eyebrow={e.eyebrow} title={e.title} sub={e.sub} />
      <div className="ck-reveal" style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(300px, 1fr))", gap: 20, marginBottom: 44 }}>
        {e.solutions.map((s, i) => (
          <DSsx.Card key={s.title} interactive padding={28} style={{ height: "100%" }}>
            <div style={{ display: "flex", alignItems: "center", gap: 13, marginBottom: 14 }}>
              <span style={{ width: 46, height: 46, borderRadius: "var(--radius-md)", background: "var(--accent-soft)", display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }}>
                <SIco n={icons[i]} s={23} c="var(--accent)" />
              </span>
              <span style={{ fontFamily: "var(--font-display)", fontWeight: 900, fontSize: 15, color: "var(--text-faint)" }}>{String(i + 1).padStart(2, "0")}</span>
            </div>
            <h3 style={{ fontSize: 18.5, fontWeight: 800, color: "var(--text-strong)", marginBottom: 10, letterSpacing: "-0.01em", lineHeight: 1.25 }}>{s.title}</h3>
            <p style={{ fontSize: 14.5, lineHeight: 1.6, color: "var(--text-muted)" }}>{s.desc}</p>
          </DSsx.Card>
        ))}
      </div>

      {/* Credibility strip — illustrative placeholder proof */}
      <div className="ck-reveal" data-theme="dark" style={{ position: "relative", overflow: "hidden", borderRadius: "var(--radius-2xl)", background: "var(--gradient-ink)", boxShadow: "var(--shadow-lg)" }}>
        <div style={{ position: "absolute", inset: 0, background: "var(--gradient-glow)", opacity: 0.55, pointerEvents: "none" }} />
        <div style={{ position: "relative", padding: "40px 40px 34px" }}>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(150px, 1fr))", gap: 24, marginBottom: 30 }}>
            {e.stats.map((st) => (
              <div key={st.l}>
                <div className="cl-gradient-text" style={{ fontFamily: "var(--font-display)", fontSize: 38, fontWeight: 900, letterSpacing: "-0.02em", lineHeight: 1 }}>{st.v}</div>
                <div style={{ fontSize: 13.5, color: "rgba(255,255,255,0.72)", marginTop: 8, lineHeight: 1.4 }}>{st.l}</div>
              </div>
            ))}
          </div>
          <div style={{ borderTop: "1px solid rgba(255,255,255,0.12)", paddingTop: 22, display: "flex", alignItems: "center", gap: 16, flexWrap: "wrap" }}>
            <span style={{ fontSize: 11.5, fontWeight: 800, letterSpacing: "0.12em", textTransform: "uppercase", color: "rgba(255,255,255,0.55)" }}>{e.proofLabel}</span>
            <div style={{ display: "flex", gap: 10, flexWrap: "wrap" }}>
              {e.sectors.map((sec) => (
                <span key={sec} style={{ display: "inline-flex", alignItems: "center", gap: 7, padding: "7px 14px", borderRadius: 999, background: "rgba(255,255,255,0.08)", border: "1px solid rgba(255,255,255,0.16)", fontSize: 13.5, fontWeight: 700, color: "#fff" }}>
                  <span style={{ width: 6, height: 6, borderRadius: "50%", background: "var(--magenta-300)" }} />{sec}
                </span>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------------- PHILOSOPHY / ABOUT ---------------- */
function Philosophy({ t }) {
  const icons = ["feather", "trending-up", "infinity"];
  const ph = t.philosophy;
  return (
    <section id="nosotros" style={{ background: "var(--bg-subtle)", borderTop: "1px solid var(--border-subtle)", borderBottom: "1px solid var(--border-subtle)" }}>
      <div style={{ ...SX_WRAP, padding: "90px 32px", display: "grid", gridTemplateColumns: "0.85fr 1.15fr", gap: 56, alignItems: "start" }} data-phil-grid>
        <div className="ck-reveal">
          <span className="cl-eyebrow">{ph.eyebrow}</span>
          <h2 style={{ fontSize: 38, fontWeight: 800, letterSpacing: "-0.02em", color: "var(--text-strong)", margin: "12px 0 0", lineHeight: 1.12, textWrap: "balance" }}>{ph.title}</h2>
        </div>
        <div className="ck-reveal">
          <p style={{ fontSize: 18, lineHeight: 1.7, color: "var(--text-body)", marginBottom: 28, textWrap: "pretty" }}>{ph.body}</p>
          <div style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
            {ph.principles.map((pr, i) => (
              <span key={pr} style={{ display: "inline-flex", alignItems: "center", gap: 9, padding: "11px 18px", borderRadius: 999, background: "var(--surface-card)", border: "1px solid var(--border-default)", boxShadow: "var(--shadow-xs)", fontSize: 14.5, fontWeight: 700, color: "var(--text-strong)" }}>
                <SIco n={icons[i]} s={17} c="var(--text-brand)" />{pr}
              </span>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------------- CONTACT CTA ---------------- */
function Contact({ t }) {
  const c = t.contact;
  return (
    <section style={{ ...SX_WRAP, padding: "84px 32px" }}>
      <div className="ck-reveal" style={{ borderRadius: "var(--radius-2xl)", background: "var(--gradient-brand)", boxShadow: "var(--shadow-brand)", padding: "64px 48px", position: "relative", overflow: "hidden", textAlign: "center" }}>
        <span style={{ position: "absolute", right: -70, top: -70, width: 260, height: 260, borderRadius: "50%", background: "rgba(255,255,255,0.12)" }} />
        <span style={{ position: "absolute", left: -50, bottom: -90, width: 220, height: 220, borderRadius: "50%", background: "rgba(255,255,255,0.10)" }} />
        <span style={{ position: "relative", display: "inline-block", fontSize: 12.5, fontWeight: 800, letterSpacing: "0.14em", textTransform: "uppercase", color: "rgba(255,255,255,0.85)", marginBottom: 14 }}>{c.eyebrow}</span>
        <h2 style={{ fontSize: 40, fontWeight: 800, letterSpacing: "-0.02em", color: "#fff", margin: "0 auto 16px", maxWidth: 760, position: "relative", textWrap: "balance" }}>{c.headline}</h2>
        <p style={{ fontSize: 18.5, color: "rgba(255,255,255,0.92)", maxWidth: 600, margin: "0 auto 30px", position: "relative", lineHeight: 1.55 }}>{c.sub}</p>
        <div style={{ display: "flex", gap: 14, justifyContent: "center", position: "relative", flexWrap: "wrap" }}>
          <DSsx.Button size="lg" variant="secondary" iconRight={<SIco n="arrow-right" s={20} />} onClick={() => { window.location.href = "mailto:info@chiketto.co"; }}>{c.button}</DSsx.Button>
        </div>
      </div>
    </section>
  );
}

/* ---------------- FOOTER ---------------- */
function Footer({ t }) {
  const f = t.footer;
  return (
    <footer id="contacto" data-theme="dark" style={{ background: "var(--neutral-950)", borderTop: "1px solid var(--border-subtle)" }}>
      <div style={{ position: "relative", overflow: "hidden" }}>
        <div style={{ position: "absolute", inset: 0, background: "var(--gradient-glow)", opacity: 0.4, pointerEvents: "none" }} />
        <div style={{ ...SX_WRAP, position: "relative", padding: "64px 32px 44px", display: "grid", gridTemplateColumns: "1.5fr 1fr 1fr 1.2fr", gap: 36 }} data-footer-grid>
          <div>
            <img src={(window.__resources && window.__resources.logoWhite) || "assets/logo/chiketto-new-white.svg"} alt="Chiketto" style={{ height: 34, marginBottom: 16 }} />
            <p style={{ fontSize: 14, color: "var(--text-muted)", maxWidth: 280, lineHeight: 1.6 }}>{f.tagline}</p>
          </div>
          {f.cols.map((col) => (
            <div key={col.h}>
              <div style={{ fontSize: 12, fontWeight: 700, letterSpacing: "0.1em", textTransform: "uppercase", color: "var(--text-faint)", marginBottom: 14 }}>{col.h}</div>
              <div style={{ display: "flex", flexDirection: "column", gap: 11 }}>
                {col.items.map((i) => <a key={i.label} href={i.href} onClick={(e) => { e.preventDefault(); scrollTo(i.href); }} style={{ fontSize: 14.5, color: "var(--text-body)", textDecoration: "none" }} onMouseEnter={(e) => (e.target.style.color = "#fff")} onMouseLeave={(e) => (e.target.style.color = "var(--text-body)")}>{i.label}</a>)}
              </div>
            </div>
          ))}
          <div>
            <div style={{ fontSize: 12, fontWeight: 700, letterSpacing: "0.1em", textTransform: "uppercase", color: "var(--text-faint)", marginBottom: 14 }}>{f.contactH}</div>
            <div style={{ display: "flex", flexDirection: "column", gap: 13 }}>
              <a href="tel:+573003563851" style={{ display: "inline-flex", alignItems: "center", gap: 10, fontSize: 14.5, color: "var(--text-body)", textDecoration: "none" }}><SIco n="phone" s={16} c="var(--magenta-300)" /> (+57) 300 356 3851</a>
              <a href="mailto:info@chiketto.co" style={{ display: "inline-flex", alignItems: "center", gap: 10, fontSize: 14.5, color: "var(--text-body)", textDecoration: "none" }}><SIco n="mail" s={16} c="var(--magenta-300)" /> info@chiketto.co</a>
            </div>
          </div>
        </div>
        <div style={{ ...SX_WRAP, position: "relative", padding: "20px 32px", borderTop: "1px solid var(--border-subtle)", display: "flex", justifyContent: "space-between", gap: 16, flexWrap: "wrap", fontSize: 13.5, color: "var(--text-faint)" }}>
          <span>{f.rights}</span>
          <span>{f.location}</span>
        </div>
      </div>
    </footer>
  );
}

window.ChikettoSections = { Nav, Hero, Pillars, Labs, Enterprise, Philosophy, Contact, Footer };