/* global React */
// Codartia — page components (Home, Produtos, Sobre, Soluções, Cases, Blog, Carreiras, Contato)
(function () {
  const { useEffect, useRef, useState, useMemo } = React;

  const t = (obj, lang) => (obj && obj[lang] !== undefined ? obj[lang] : obj);

  /* ============ Reveal-on-scroll hook ============ */
  function useReveal() {
    useEffect(() => {
      let cancelled = false;
      const setup = () => {
        if (cancelled) return;
        const io = new IntersectionObserver(
          (entries) => {
            entries.forEach((e) => {
              if (e.isIntersecting) {
                e.target.classList.add("in");
                io.unobserve(e.target);
              }
            });
          },
          { rootMargin: "0px 0px -8% 0px", threshold: 0.01 }
        );
        document.querySelectorAll(".reveal:not(.in)").forEach((el) => io.observe(el));
        // Safety fallback: reveal anything still hidden after 1.2s
        // (in case IntersectionObserver doesn't fire in this environment).
        const safety = setTimeout(() => {
          document.querySelectorAll(".reveal:not(.in)").forEach((el) => {
            const r = el.getBoundingClientRect();
            if (r.top < window.innerHeight) el.classList.add("in");
          });
        }, 1200);
        return () => { io.disconnect(); clearTimeout(safety); };
      };
      // Wait two frames so React has committed + layout has settled.
      let cleanup;
      const id = requestAnimationFrame(() => {
        requestAnimationFrame(() => { cleanup = setup(); });
      });
      return () => {
        cancelled = true;
        cancelAnimationFrame(id);
        if (cleanup) cleanup();
      };
    }, []);
  }

  /* ============ Modal: Product detail ============ */
  function ProductModal({ product, lang, onClose }) {
    useEffect(() => {
      const onKey = (e) => { if (e.key === "Escape") onClose(); };
      window.addEventListener("keydown", onKey);
      document.body.style.overflow = "hidden";
      return () => {
        window.removeEventListener("keydown", onKey);
        document.body.style.overflow = "";
      };
    }, [onClose]);

    if (!product) return null;
    const c = product.color;

    return (
      <div className="pm-overlay" onClick={onClose}>
        <div className="pm-modal" onClick={(e) => e.stopPropagation()}>
          <div className="pm-head" style={{ "--c": c }}>
            <div className="pm-icon" style={{ "--c": c }}>{product.glyph}</div>
            <div>
              <div className="pm-seg">{product.segment}</div>
              <h3 className="pm-name">{product.name}</h3>
            </div>
            <button className="pm-close" onClick={onClose} aria-label="Close">×</button>
          </div>
          <div className="pm-tagline" style={{ color: c }}>{t(product.tagline, lang)}</div>
          <div className="pm-body">
            <p>{t(product.description, lang)}</p>
          </div>
          <div className="pm-features">
            {(lang === "pt" ? [
              "Onboarding em até 7 dias com time dedicado",
              "Integração nativa com o Codartia ERP",
              "Aplicativo mobile iOS e Android",
              "Suporte humano em português, 7 dias por semana",
            ] : [
              "Onboarding in up to 7 days with a dedicated team",
              "Native integration with Codartia ERP",
              "Mobile app for iOS and Android",
              "Human support in English, 7 days a week",
            ]).map((f, i) => (
              <div className="pm-feat" key={i}>
                <span className="pm-dot" style={{ background: c }} />
                {f}
              </div>
            ))}
          </div>
          <div className="pm-actions">
            <a href="#contato" className="btn btn-primary" style={{ background: c, boxShadow: `0 0 0 1px ${c}, 0 8px 30px -6px ${c}80` }} onClick={onClose}>
              {lang === "pt" ? "Falar com especialista" : "Talk to a specialist"} →
            </a>
            <button className="btn btn-ghost" onClick={onClose}>
              {lang === "pt" ? "Voltar à galáxia" : "Back to galaxy"}
            </button>
          </div>
        </div>
      </div>
    );
  }

  /* ============ Home ============ */
  function HomePage({ lang, tweaks, onSelectProduct, navigate, data }) {
    useReveal();

    return (
      <>
        {/* HERO */}
        <section className="hero">
          <div className="wrap">
            <div className="hero-eyebrow reveal">
              <span className="pill">v.2026</span>
              {lang === "pt" ? "Treze produtos. Um só núcleo." : "Thirteen products. One core."}
            </div>
            <h1 className="reveal d1">
              {lang === "pt" ? (
                <>Um universo para <em>seu negócio</em></>
              ) : (
                <>A universe for <em>your business</em></>
              )}
            </h1>
            <p className="hero-sub reveal d2">
              {lang === "pt"
                ? "Cada produto Codartia tem sua própria órbita criada para resolver problemas reais da sua empresa."
                : "Each Codartia product has its own orbit, designed to solve real problems in your company."}
            </p>
            <div className="hero-ctas reveal d3">
              <a href="#produtos" className="btn btn-primary" onClick={(e) => { e.preventDefault(); navigate("produtos"); }}>
                {lang === "pt" ? "Explorar produtos" : "Explore products"} →
              </a>
              <a href="#contato" className="btn btn-ghost" onClick={(e) => { e.preventDefault(); navigate("contato"); }}>
                {lang === "pt" ? "Falar com especialista" : "Talk to a specialist"}
              </a>
            </div>
          </div>

          {/* Planet system */}
          <div className="reveal d4">
            <window.PlanetSystem
              products={data.products.slice(0, tweaks.planetCount)}
              sunColor={tweaks.sunColor}
              orbitSpeed={tweaks.orbitSpeed}
              starDensity={tweaks.starDensity}
              language={lang}
              theme={tweaks.theme}
              onSelect={onSelectProduct}
            />
          </div>
          <p className="hero-instruction reveal">
            {lang === "pt"
              ? "Arraste os planetas · Passe o mouse para ver · Clique para abrir"
              : "Drag the planets · Hover to see · Click to open"}
          </p>
        </section>

        {/* STATS */}
        <div className="wrap">
          <div className="stats reveal">
            {data.stats.map((s, i) => (
              <div className="stat" key={i}>
                <div className="stat-value">{s.value}</div>
                <div className="stat-label">{t(s.label, lang)}</div>
              </div>
            ))}
          </div>
        </div>

        {/* PRODUCT HIGHLIGHTS */}
        <section className="section">
          <div className="wrap">
            <div className="reveal">
              <div className="section-eyebrow">{lang === "pt" ? "Produtos em destaque" : "Featured products"}</div>
              <h2 className="section-title">
                {lang === "pt"
                  ? "Cada vertical, um software construído para ela."
                  : "Each vertical, software built for it."}
              </h2>
              <p className="section-lede">
                {lang === "pt"
                  ? "Nada de soluções genéricas adaptadas. Construímos para o jeito de trabalhar de cada setor — e conectamos tudo no Codartia ERP."
                  : "No generic solutions adapted to fit. We build for how each sector works — and connect everything in Codartia ERP."}
              </p>
            </div>

            <div className="product-grid" style={{ marginTop: 48 }}>
              {data.products.slice(0, 6).map((p, i) => (
                <button
                  key={p.id}
                  className="product-card reveal"
                  style={{ "--c": p.color, transitionDelay: `${i * 0.04}s` }}
                  onClick={() => onSelectProduct(p)}
                >
                  <div className="pc-icon" style={{ "--c": p.color }}>{p.glyph}</div>
                  <div className="pc-name">{p.name}</div>
                  <div className="pc-segment">{p.segment}</div>
                  <div className="pc-tag">{t(p.tagline, lang)}</div>
                  <div className="pc-foot">
                    {lang === "pt" ? "Abrir produto" : "Open product"} →
                  </div>
                </button>
              ))}
            </div>

            <div style={{ marginTop: 32, textAlign: "center" }}>
              <button className="btn btn-ghost" onClick={() => navigate("produtos")}>
                {lang === "pt" ? "Ver todos os 13 produtos" : "See all 13 products"} →
              </button>
            </div>
          </div>
        </section>

        {/* SOLUTIONS BY SEGMENT */}
        <section className="section" style={{ paddingTop: 0 }}>
          <div className="wrap">
            <div className="reveal">
              <div className="section-eyebrow">{lang === "pt" ? "Soluções por segmento" : "Solutions by segment"}</div>
              <h2 className="section-title">
                {lang === "pt"
                  ? "Onde sua empresa começa? Achamos a órbita certa."
                  : "Where does your company start? We'll find the right orbit."}
              </h2>
            </div>
            <div className="segment-rows reveal" style={{ marginTop: 40 }}>
              {data.segments.map((s) => (
                <div className="segment-row" key={s.id}>
                  <div>
                    <div className="seg-counter">{String(data.segments.indexOf(s) + 1).padStart(2, "0")}</div>
                    <h3>{s[lang]}</h3>
                  </div>
                  <div className="segment-products">
                    {s.products.map((pid) => {
                      const p = data.products.find((x) => x.id === pid);
                      if (!p) return null;
                      return (
                        <button
                          key={pid}
                          className="seg-chip"
                          style={{ "--c": p.color }}
                          onClick={() => onSelectProduct(p)}
                        >
                          <span className="chip-dot" />
                          <span className="chip-name">{p.name}</span>
                        </button>
                      );
                    })}
                  </div>
                </div>
              ))}
            </div>
          </div>
        </section>

        {/* CASES */}
        <section className="section" style={{ paddingTop: 0 }}>
          <div className="wrap">
            <div className="reveal">
              <div className="section-eyebrow">{lang === "pt" ? "Quem confia" : "Trusted by"}</div>
              <h2 className="section-title">
                {lang === "pt"
                  ? "Negócios reais, resultados em órbita."
                  : "Real businesses, results in orbit."}
              </h2>
            </div>
            <div className="cases-grid" style={{ marginTop: 40 }}>
              {data.cases.map((c, i) => (
                <div className="case-card reveal" key={i} style={{ transitionDelay: `${i * 0.04}s` }}>
                  <div className="case-head">
                    <div style={{ display: "flex", alignItems: "center", gap: 14 }}>
                      <div className="case-logo">{c.logo}</div>
                      <div>
                        <div style={{ fontWeight: 500 }}>{c.company}</div>
                        <div style={{ fontSize: 12, color: "var(--text-mute)", fontFamily: "var(--font-mono)", letterSpacing: ".1em", textTransform: "uppercase" }}>
                          {t(c.segment, lang)} · {c.product}
                        </div>
                      </div>
                    </div>
                  </div>
                  <div className="case-quote">"{t(c.quote, lang)}"</div>
                  <div>
                    <div className="case-metric">{t(c.metric, lang)}</div>
                    <div className="case-author" style={{ marginTop: 8 }}>
                      <strong>{c.author}</strong> · {t(c.role, lang)}
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </section>

        {/* CTA */}
        <section className="section" style={{ paddingTop: 0 }}>
          <div className="wrap">
            <div className="reveal" style={{
              background: "linear-gradient(135deg, color-mix(in oklch, var(--brand) 22%, transparent), color-mix(in oklch, var(--brand-deep) 14%, transparent))",
              border: "1px solid var(--line-strong)",
              borderRadius: "var(--r-xl)",
              padding: "clamp(48px, 6vw, 80px)",
              textAlign: "center",
              position: "relative",
              overflow: "hidden",
            }}>
              <h2 className="section-title" style={{ margin: "0 auto 16px", maxWidth: "18ch" }}>
                {lang === "pt"
                  ? "Pronto para entrar em órbita?"
                  : "Ready to enter orbit?"}
              </h2>
              <p className="section-lede" style={{ margin: "0 auto 32px" }}>
                {lang === "pt"
                  ? "Em 15 minutos, descobrimos qual produto Codartia encaixa no seu negócio."
                  : "In 15 minutes, we find which Codartia product fits your business."}
              </p>
              <div className="hero-ctas" style={{ marginBottom: 0 }}>
                <button className="btn btn-primary" onClick={() => navigate("contato")}>
                  {lang === "pt" ? "Agendar conversa" : "Book a call"} →
                </button>
                <button className="btn btn-ghost" onClick={() => navigate("produtos")}>
                  {lang === "pt" ? "Comparar produtos" : "Compare products"}
                </button>
              </div>
            </div>
          </div>
        </section>
      </>
    );
  }

  /* ============ Produtos (full list) ============ */
  function ProductsPage({ lang, onSelectProduct, data }) {
    useReveal();
    const [filter, setFilter] = useState("all");
    const segments = ["all", ...new Set(data.products.map((p) => p.segment))];

    return (
      <section className="section">
        <div className="wrap">
          <div className="reveal">
            <div className="section-eyebrow">{lang === "pt" ? "Catálogo · 13 produtos" : "Catalog · 13 products"}</div>
            <h1 className="section-title">
              {lang === "pt"
                ? "Toda a galáxia Codartia."
                : "The whole Codartia galaxy."}
            </h1>
            <p className="section-lede">
              {lang === "pt"
                ? "Treze softwares verticais, um núcleo comum de identidade, dados e infraestrutura."
                : "Thirteen vertical softwares, one shared core of identity, data and infrastructure."}
            </p>
          </div>

          <div className="reveal" style={{ display: "flex", gap: 8, flexWrap: "wrap", marginTop: 36, marginBottom: 28 }}>
            {segments.map((s) => (
              <button
                key={s}
                className={`btn ${filter === s ? "btn-primary" : "btn-ghost"}`}
                style={{ padding: "8px 14px", fontSize: 13 }}
                onClick={() => setFilter(s)}
              >
                {s === "all" ? (lang === "pt" ? "Todos" : "All") : s}
              </button>
            ))}
          </div>

          <div className="product-grid">
            {data.products
              .filter((p) => filter === "all" || p.segment === filter)
              .map((p, i) => (
                <button
                  key={p.id}
                  className="product-card reveal"
                  style={{ "--c": p.color, transitionDelay: `${i * 0.03}s` }}
                  onClick={() => onSelectProduct(p)}
                >
                  <div className="pc-icon" style={{ "--c": p.color }}>{p.glyph}</div>
                  <div className="pc-name">{p.name}</div>
                  <div className="pc-segment">{p.segment}</div>
                  <div className="pc-tag">{t(p.tagline, lang)}</div>
                  <div className="pc-foot">
                    {lang === "pt" ? "Abrir produto" : "Open product"} →
                  </div>
                </button>
              ))}
          </div>
        </div>
      </section>
    );
  }

  /* ============ Sobre ============ */
  function AboutPage({ lang, data }) {
    useReveal();
    return (
      <>
        <section className="section about-hero">
          <div className="wrap">
            <div className="reveal">
              <div className="section-eyebrow">{lang === "pt" ? "Sobre a Codartia" : "About Codartia"}</div>
              <h1 className="section-title" style={{ maxWidth: "18ch" }}>
                {lang === "pt"
                  ? "Construímos software para quem ainda não tem voz na revolução digital."
                  : "We build software for those still without a voice in the digital revolution."}
              </h1>
              <p className="section-lede">
                {lang === "pt"
                  ? "Pequenas e médias empresas. Oficinas, clínicas, salões, indústrias, lojas. Negócios reais. Cada um com sua complexidade, seu vocabulário, seu jeito. A Codartia nasceu para servir essa diversidade — com profundidade, não com promessas."
                  : "Small and mid-sized businesses. Repair shops, clinics, salons, factories, stores. Real businesses. Each with its complexity, its vocabulary, its way. Codartia was born to serve that diversity — with depth, not promises."}
              </p>
            </div>
          </div>
        </section>

        <section className="section" style={{ paddingTop: 0 }}>
          <div className="wrap">
            <div className="reveal">
              <div className="section-eyebrow">{lang === "pt" ? "Missão, visão & valores" : "Mission, vision & values"}</div>
              <h2 className="section-title">
                {lang === "pt" ? "A constelação que nos guia." : "The constellation that guides us."}
              </h2>
            </div>

            <div className="mvv-grid reveal" style={{ marginTop: 40 }}>
              <div className="mvv-card mvv-mission">
                <div className="mvv-marker">
                  <svg viewBox="0 0 32 32" width="22" height="22" fill="none" stroke="currentColor" strokeWidth="1.5">
                    <circle cx="16" cy="16" r="10" />
                    <circle cx="16" cy="16" r="3" fill="currentColor" stroke="none" />
                  </svg>
                </div>
                <div className="mvv-label">{lang === "pt" ? "Missão" : "Mission"}</div>
                <div className="mvv-body">{t(data.mission, lang)}</div>
              </div>

              <div className="mvv-card mvv-vision">
                <div className="mvv-marker">
                  <svg viewBox="0 0 32 32" width="22" height="22" fill="none" stroke="currentColor" strokeWidth="1.5">
                    <path d="M3 16 Q 16 3, 29 16" />
                    <path d="M22 9 L 29 16 L 22 23" />
                    <circle cx="3" cy="16" r="2" fill="currentColor" stroke="none" />
                  </svg>
                </div>
                <div className="mvv-label">{lang === "pt" ? "Visão" : "Vision"}</div>
                <div className="mvv-body">{t(data.vision, lang)}</div>
              </div>

              <div className="mvv-card mvv-values">
                <div className="mvv-marker">
                  <svg viewBox="0 0 32 32" width="22" height="22" fill="none" stroke="currentColor" strokeWidth="1.5">
                    <path d="M16 4 L 19 13 L 28 13 L 21 19 L 24 28 L 16 22 L 8 28 L 11 19 L 4 13 L 13 13 Z" />
                  </svg>
                </div>
                <div className="mvv-label">{lang === "pt" ? "Valores" : "Values"}</div>
                <ul className="mvv-values-list">
                  {data.values.map((v, i) => (
                    <li key={i}>
                      <span className="mvv-bullet">{String(i + 1).padStart(2, "0")}</span>
                      <div>
                        <strong>{v[lang]}</strong>
                        <p>{t(v.body, lang)}</p>
                      </div>
                    </li>
                  ))}
                </ul>
              </div>
            </div>
          </div>
        </section>

        <section className="section" style={{ paddingTop: 0 }}>
          <div className="wrap">
            <div className="reveal">
              <div className="section-eyebrow">{lang === "pt" ? "Linha do tempo" : "Timeline"}</div>
              <h2 className="section-title">
                {lang === "pt" ? "Doze anos formando uma galáxia." : "Twelve years forming a galaxy."}
              </h2>
            </div>
            <div className="timeline reveal" style={{ marginTop: 40 }}>
              {data.timeline.map((item) => (
                <div className="timeline-item" key={item.year}>
                  <div className="timeline-year">{item.year}</div>
                  <div className="timeline-body">{item[lang]}</div>
                </div>
              ))}
            </div>
          </div>
        </section>
      </>
    );
  }

  /* ============ Soluções ============ */
  function SolutionsPage({ lang, onSelectProduct, data }) {
    useReveal();
    return (
      <section className="section">
        <div className="wrap">
          <div className="reveal">
            <div className="section-eyebrow">{lang === "pt" ? "Soluções por segmento" : "Solutions by segment"}</div>
            <h1 className="section-title" style={{ maxWidth: "20ch" }}>
              {lang === "pt"
                ? "Para cada setor, uma órbita pronta para girar."
                : "For each industry, an orbit ready to spin."}
            </h1>
            <p className="section-lede">
              {lang === "pt"
                ? "Selecione seu segmento e veja a combinação de produtos Codartia que atende ao seu negócio — com profundidade vertical e integração nativa."
                : "Select your segment and see the combination of Codartia products that fits your business — with vertical depth and native integration."}
            </p>
          </div>

          <div className="segment-rows reveal" style={{ marginTop: 48 }}>
            {data.segments.map((s) => (
              <div className="segment-row" key={s.id}>
                <div>
                  <div className="seg-counter">{String(data.segments.indexOf(s) + 1).padStart(2, "0")}</div>
                  <h3>{s[lang]}</h3>
                  <p style={{ color: "var(--text-dim)", fontSize: 14, marginTop: 8, maxWidth: "30ch" }}>
                    {lang === "pt"
                      ? `${s.products.length} produto${s.products.length > 1 ? "s" : ""} desenhado${s.products.length > 1 ? "s" : ""} para este setor.`
                      : `${s.products.length} product${s.products.length > 1 ? "s" : ""} designed for this sector.`}
                  </p>
                </div>
                <div className="segment-products">
                  {s.products.map((pid) => {
                    const p = data.products.find((x) => x.id === pid);
                    if (!p) return null;
                    return (
                      <button
                        key={pid}
                        className="seg-chip"
                        style={{ "--c": p.color }}
                        onClick={() => onSelectProduct(p)}
                      >
                        <span className="chip-dot" />
                        <span className="chip-name">{p.name}</span>
                      </button>
                    );
                  })}
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>
    );
  }

  /* ============ Cases ============ */
  function CasesPage({ lang, data }) {
    useReveal();
    return (
      <section className="section">
        <div className="wrap">
          <div className="reveal">
            <div className="section-eyebrow">{lang === "pt" ? "Clientes & Cases" : "Customers & Cases"}</div>
            <h1 className="section-title" style={{ maxWidth: "20ch" }}>
              {lang === "pt"
                ? "47 mil negócios. Quatro histórias para começar."
                : "47k businesses. Four stories to start with."}
            </h1>
          </div>
          <div className="cases-grid" style={{ marginTop: 48 }}>
            {data.cases.map((c, i) => (
              <div className="case-card reveal" key={i} style={{ transitionDelay: `${i * 0.05}s` }}>
                <div className="case-head">
                  <div style={{ display: "flex", alignItems: "center", gap: 14 }}>
                    <div className="case-logo">{c.logo}</div>
                    <div>
                      <div style={{ fontWeight: 500 }}>{c.company}</div>
                      <div style={{ fontSize: 12, color: "var(--text-mute)", fontFamily: "var(--font-mono)", letterSpacing: ".1em", textTransform: "uppercase" }}>
                        {t(c.segment, lang)} · {c.product}
                      </div>
                    </div>
                  </div>
                </div>
                <div className="case-quote">"{t(c.quote, lang)}"</div>
                <div>
                  <div className="case-metric">{t(c.metric, lang)}</div>
                  <div className="case-author" style={{ marginTop: 8 }}>
                    <strong>{c.author}</strong> · {t(c.role, lang)}
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>
    );
  }

  /* ============ Blog ============ */
  function BlogPage({ lang, data }) {
    useReveal();
    return (
      <section className="section">
        <div className="wrap">
          <div className="reveal">
            <div className="section-eyebrow">Codartia Lab</div>
            <h1 className="section-title">
              {lang === "pt" ? "Pensamentos em órbita." : "Thoughts in orbit."}
            </h1>
            <p className="section-lede">
              {lang === "pt"
                ? "Engenharia, design de produto, IA e pesquisa de campo, na voz das equipes Codartia."
                : "Engineering, product design, AI and field research, in the voice of Codartia teams."}
            </p>
          </div>
          <div className="blog-list reveal" style={{ marginTop: 48 }}>
            {data.posts.map((p) => (
              <a className="blog-row" key={p.id} href={`#${p.id}`} onClick={(e) => e.preventDefault()}>
                <div className="blog-tag">{p.tag}</div>
                <div>
                  <div className="blog-title">{t(p.title, lang)}</div>
                  <div className="blog-excerpt">{t(p.excerpt, lang)}</div>
                </div>
                <div className="blog-meta">
                  <div>{p.author}</div>
                  <div style={{ marginTop: 4 }}>{t(p.date, lang)}</div>
                </div>
                <div className="blog-arrow">→</div>
              </a>
            ))}
          </div>
        </div>
      </section>
    );
  }

  /* ============ Carreiras ============ */
  function CareersPage({ lang, data }) {
    useReveal();
    const benefits = lang === "pt" ? [
      { h: "Trabalho remoto, de verdade", p: "Você escolhe onde produzir melhor. Encontros presenciais 2× ao ano." },
      { h: "Saúde e mente", p: "Plano de saúde família, terapia subsidiada, mindfulness nas pausas." },
      { h: "Estoque de aprendizado", p: "R$5.000/ano para cursos, livros, conferências — sem aprovações." },
      { h: "Equity para todos", p: "Independente do nível, todo Codartiano tem participação na empresa." },
      { h: "Equipamento top", p: "MacBook Pro, monitor 4K, setup completo de home office na sua casa." },
      { h: "Sextas para criar", p: "20% do tempo dedicado a side-projects, hacks ou descanso radical." },
    ] : [
      { h: "Truly remote work", p: "You choose where you produce best. In-person meets twice a year." },
      { h: "Health & mind", p: "Family health plan, subsidized therapy, mindfulness breaks." },
      { h: "Learning budget", p: "$1,000/year for courses, books, conferences — no approvals." },
      { h: "Equity for all", p: "Regardless of level, every Codartian holds equity in the company." },
      { h: "Top gear", p: "MacBook Pro, 4K monitor, full home-office setup at your home." },
      { h: "Fridays to create", p: "20% time for side-projects, hacks or radical rest." },
    ];

    return (
      <>
        <section className="section">
          <div className="wrap">
            <div className="reveal">
              <div className="section-eyebrow">{lang === "pt" ? "Carreiras" : "Careers"}</div>
              <h1 className="section-title" style={{ maxWidth: "20ch" }}>
                {lang === "pt"
                  ? "Construa software que move o Brasil real."
                  : "Build software that moves the real economy."}
              </h1>
              <p className="section-lede">
                {lang === "pt"
                  ? "Procuramos pessoas que dão distância zero ao cliente. Engenheiros que viajam para a oficina, designers que pintam UI ouvindo o atendente, PMs que ligam para o dono do salão. Se isso te empolga, leia adiante."
                  : "We look for people who keep zero distance to customers. Engineers who travel to the repair shop, designers who craft UI listening to the receptionist, PMs who call the salon owner. If that excites you, read on."}
              </p>
            </div>
          </div>
        </section>

        <section className="section" style={{ paddingTop: 0 }}>
          <div className="wrap">
            <div className="reveal">
              <div className="section-eyebrow">{lang === "pt" ? "Benefícios" : "Benefits"}</div>
              <h2 className="section-title">{lang === "pt" ? "Por que Codartia." : "Why Codartia."}</h2>
            </div>
            <div className="benefits reveal" style={{ marginTop: 40 }}>
              {benefits.map((b, i) => (
                <div className="benefit" key={i}>
                  <h5>{b.h}</h5>
                  <p>{b.p}</p>
                </div>
              ))}
            </div>
          </div>
        </section>

        <section className="section" style={{ paddingTop: 0 }}>
          <div className="wrap">
            <div className="reveal">
              <div className="section-eyebrow">{lang === "pt" ? "Vagas abertas" : "Open roles"}</div>
              <h2 className="section-title">{data.careers.length} {lang === "pt" ? "posições" : "positions"}</h2>
            </div>
            <div className="careers-list reveal" style={{ marginTop: 32 }}>
              {data.careers.map((c, i) => (
                <a className="career-row" key={i} href="#contato" onClick={(e) => e.preventDefault()}>
                  <div className="career-role">{c.role}</div>
                  <div className="career-meta">{c.location}</div>
                  <div className="career-meta">{c.team}</div>
                  <div><span className="career-tag">{c.type}</span></div>
                  <div className="blog-arrow">→</div>
                </a>
              ))}
            </div>
          </div>
        </section>
      </>
    );
  }

  /* ============ Contato ============ */
  function ContactPage({ lang, data }) {
    useReveal();
    const [form, setForm] = useState({ name: "", email: "", company: "", interest: data.products[0].id, message: "" });
    const [sent, setSent] = useState(false);

    return (
      <section className="section">
        <div className="wrap">
          <div className="reveal">
            <div className="section-eyebrow">{lang === "pt" ? "Contato" : "Contact"}</div>
            <h1 className="section-title" style={{ maxWidth: "18ch" }}>
              {lang === "pt"
                ? "Conte seu desafio. A gente desenha a órbita."
                : "Tell us your challenge. We'll draw the orbit."}
            </h1>
          </div>

          <div className="contact-grid reveal" style={{ marginTop: 48 }}>
            <div>
              {sent ? (
                <div style={{
                  padding: 40,
                  background: "var(--surface)",
                  border: "1px solid var(--line)",
                  borderRadius: "var(--r-lg)",
                  textAlign: "center"
                }}>
                  <div style={{ fontSize: 48, marginBottom: 16 }}>🪐</div>
                  <h3 style={{ fontFamily: "var(--font-display)", fontWeight: 500, fontSize: 24, marginBottom: 8 }}>
                    {lang === "pt" ? "Recebemos seu sinal." : "We got your signal."}
                  </h3>
                  <p style={{ color: "var(--text-dim)" }}>
                    {lang === "pt"
                      ? "Em até 1 dia útil um especialista entra em órbita com você."
                      : "Within 1 business day a specialist will enter orbit with you."}
                  </p>
                  <button className="btn btn-ghost" style={{ marginTop: 24 }} onClick={() => setSent(false)}>
                    {lang === "pt" ? "Enviar outra" : "Send another"}
                  </button>
                </div>
              ) : (
                <form onSubmit={(e) => { e.preventDefault(); setSent(true); }}>
                  <div className="field">
                    <label htmlFor="nm">{lang === "pt" ? "Nome" : "Name"}</label>
                    <input id="nm" required value={form.name} onChange={(e) => setForm({ ...form, name: e.target.value })} />
                  </div>
                  <div className="field">
                    <label htmlFor="em">Email</label>
                    <input id="em" type="email" required value={form.email} onChange={(e) => setForm({ ...form, email: e.target.value })} />
                  </div>
                  <div className="field">
                    <label htmlFor="co">{lang === "pt" ? "Empresa" : "Company"}</label>
                    <input id="co" value={form.company} onChange={(e) => setForm({ ...form, company: e.target.value })} />
                  </div>
                  <div className="field">
                    <label htmlFor="pr">{lang === "pt" ? "Produto de interesse" : "Product of interest"}</label>
                    <select id="pr" value={form.interest} onChange={(e) => setForm({ ...form, interest: e.target.value })}>
                      {data.products.map((p) => (
                        <option key={p.id} value={p.id}>{p.name} — {p.segment}</option>
                      ))}
                      <option value="multi">{lang === "pt" ? "Quero a galáxia inteira" : "I want the whole galaxy"}</option>
                    </select>
                  </div>
                  <div className="field">
                    <label htmlFor="ms">{lang === "pt" ? "Sobre seu desafio" : "About your challenge"}</label>
                    <textarea id="ms" value={form.message} onChange={(e) => setForm({ ...form, message: e.target.value })} />
                  </div>
                  <button type="submit" className="btn btn-primary" style={{ width: "100%", justifyContent: "center", padding: "14px 20px" }}>
                    {lang === "pt" ? "Enviar mensagem" : "Send message"} →
                  </button>
                </form>
              )}
            </div>

            <div className="contact-info">
              <div className="contact-block">
                <h5>{lang === "pt" ? "Contato" : "Contact"}</h5>
                <p>contato@codartia.com</p>
                <p style={{ fontSize: 14, color: "var(--text-dim)" }}>+55 11 4042 3120</p>
              </div>
              <div className="contact-block">
                <h5>{lang === "pt" ? "Sede" : "Headquarters"}</h5>
                <p>São Paulo, SP</p>
                <p style={{ fontSize: 14, color: "var(--text-dim)" }}>Brasil</p>
              </div>
            </div>
          </div>
        </div>
      </section>
    );
  }

  Object.assign(window, {
    HomePage, ProductsPage, AboutPage, SolutionsPage, CasesPage, BlogPage, CareersPage, ContactPage, ProductModal,
  });
})();