// Page.jsx — INXM homepage with EN/DE translation support.

// =========================================================
// Translations
// =========================================================
const TRANSLATIONS = {
  EN: {
    nav: {
      whatWeDo: "What we do",
      product: "Product",
      values: "Values",
      whoWeAre: "Who we are"
    },
    cta: { talkToUs: "Talk to us", followUs: "Follow us" },
    hero: {
      headline_pre: "Turn intent into ",
      headline_hl: "reusable execution",
      headline_end: ".",
      subhead: "INXM transforms open-ended requests into approved Solutions, repeatable Executions, and structured Results.",
      ctaPrimary: "Talk to us",
      ctaSecondary: "See how it works",
      // legacy keys retained for backwards-compat with any existing
      // direct-edit anchors; not rendered by the new Hero.
      tagline_pre: "AI that ",
      tagline_hl: "finishes",
      tagline_end: " the work reliably.",
      intro_p1_pre: "Enterprise AI already has intelligence. Now it needs ",
      intro_p1_u: "execution",
      intro_p1_end: ".",
      intro_p2: "This is why INXM builds Orchestrator, the first Enterprise Process Execution Engine."
    },
    whatWeDo: {
      eyebrow: "What we do",
      h2_l1: "Between agents and automation,",
      h2_l2_pre: "",
      h2_l2_hl: "Orchestrator",
      h2_l2_end: " connects the work.",
      p1: "Enterprises already have the tools: copilots, agents, workflow systems, ERP, PLM, MES, QMS, Excel, email, and approvals. What's missing is the engine that makes them collaborate.",
      p2: "Agents reason. Automation executes. Critical work needs both.",
      p3: "INXM closes that gap with Orchestrator: a Process Execution Engine that uses AI to understand intent, create executable Plans, and coordinate work across systems, people, and processes. It works reliably, repeatably, and with a clear audit trail.",
      imagePlaceholder: "Hero photo // envelopes + orange thread"
    },
    product: {
      eyebrow: "Product",
      h2_pre: "Orchestrator is a ",
      h2_strong1: "Process Execution Engine",
      h2_end: " for Enterprises.",
      sideBody: "Orchestrator turns user intent into executable Plans: governed workflows that complete repeatable, auditable transactions across the systems that already run the enterprise.",
      kicker: "From intent to executed work.",
      kicker_body_1_pre: "Instead of letting agents reinterpret every transaction at runtime, INXM uses ",
      kicker_body_1_post: " to generate, validate, and improve the Plan before execution.",
      kicker_body_2: "AI shapes the workflow. Orchestrator runs it reliably."
    },
    values: {
      eyebrow: "Values",
      h2_l1: "Built in Germany.",
      h2_l2: "For European industrial Enterprise.",
      pillars: [
      ["Enterprise-grade governance", "Built for compliance // full audit trail; data stays within the company."],
      ["European compliance", "Built to GDPR and EU AI Act expectations // designed for the audit regulators will run, not a demo."],
      ["Vendor Agnostic", "Enterprise tools don't talk to each other // Orchestrator makes them work together."],
      ["No engineering required", "Manage a workflow in natural language // no code, no extra hires."],
      ["Cost effective", "Orchestrator works with Compiled AI // you pay per Plan, not per execution."],
      ["Deterministic Outcomes", "Using Plans guarantees same input, same output // every time, no probabilistic drift."]]

    },
    who: {
      eyebrow: "Who we are",
      h2_l1: "Built by founders who know",
      h2_l2: "what European enterprises need from AI.",
      p1: "INXM is built by a team with deep experience in enterprise systems, industrial operations, AI, and mission-critical software. We know that enterprise work rarely fails in the demo. It fails in the handoff: the exception, the approval, the schema change, the missing audit trail, and the systems that were never designed to work together.",
      p2_pre: "That is why we built Orchestrator: a Process Execution Engine for enterprises using Compiled AI. ",
      p2_end: "We understand the gap and are building the AI solution we needed.",
      imagePlaceholder: "Team photo // founding team"
    },
    footer: {
      tagline_pre: "AI that ",
      tagline_hl: "finishes",
      tagline_end: " the work.",
      about: "About",
      badges: {
        eu_title: "GDPR-compliant",
        eu_sub: "Hosted in Europe",
        de_title: "Developed in Germany",
        de_sub: "Headquartered in Berlin"
      },
      legal: "Legal",
      social: "Social",
      company: "Company",
      aboutLines: ["INXM GmbH", "Berlin, Germany"],
      aboutEmail: "hello@inxm.ai",
      legalLinks: [["Privacy", "privacy/index.html"], ["Data Security", "data-security/index.html"], ["Imprint", "imprint/index.html"]],
      socialLinks: [["LinkedIn", "https://www.linkedin.com/company/inxm/"], ["Substack", "https://inxm.substack.com"]],
      companyLinks: [["Press Space", "press/index.html"]],
      legal_right: "// © 2026 INXM GMBH · BERLIN"
    }
  },

  DE: {
    nav: {
      whatWeDo: "Was wir tun",
      product: "Produkt",
      values: "Werte",
      whoWeAre: "Wer wir sind"
    },
    cta: { talkToUs: "Mit uns sprechen", followUs: "Folgen" },
    hero: {
      headline_pre: "Aus Absicht wird ",
      headline_hl: "wiederverwendbare Ausführung",
      headline_end: ".",
      subhead: "INXM verwandelt offene Anfragen in geprüfte Solutions, wiederholbare Executions und strukturierte Results.",
      ctaPrimary: "Mit uns sprechen",
      ctaSecondary: "So funktioniert es",
      tagline_pre: "KI, die Arbeit ",
      tagline_hl: "zuverlässig",
      tagline_end: " zu Ende bringt.",
      intro_p1_pre: "Enterprise-KI ist intelligent. Es fehlt an der ",
      intro_p1_u: "Ausführung",
      intro_p1_end: ".",
      intro_p2: "Deshalb baut INXM Orchestrator, den ersten Unternehmensprozessausführungsmotor (Enterprise Process Execution Engine) mit Hilfe von Compiled AI."
    },
    whatWeDo: {
      eyebrow: "Was wir tun",
      h2_l1: "Zwischen KI-Agenten und Automatisierung",
      h2_l2_pre: "verbindet ",
      h2_l2_hl: "Orchestrator",
      h2_l2_end: " die Arbeit.",
      p1: "Unternehmen halten die Werkzeuge bereit — Copiloten, Agenten, Workflow-Systeme, ERP, PLM, MES, QMS, Excel, E-Mail und Freigabensysteme. Was fehlt, ist das Uhrwerk, das sie zur Zusammenarbeit bringt.",
      p2: "Agenten denken. Automatisierung führt aus. Kritische Arbeitsprozesse brauchen beides.",
      p3: "INXM schließt diese Lücke mit Orchestrator: einer Process Execution Engine, die KI nutzt, um Absichten zu verstehen, ausführbare Pläne zu erstellen und die Ausführung über Systeme, Menschen und Prozesse hinweg zu koordinieren — zuverlässig, mit konsistenten Ergebnissen und mit klarem Audit-Trail.",
      imagePlaceholder: "Headerfoto // Briefe + Orange-Faden"
    },
    product: {
      eyebrow: "Produkt",
      h2_pre: "Orchestrator ist eine ",
      h2_strong1: "Process Execution Engine",
      h2_end: " für Unternehmen.",
      sideBody: "Orchestrator verwandelt Nutzerabsicht in ausführbare Pläne: geregelte Workflows, die wiederholbare, prüfbare Transaktionen über bestehende Systeme abwickeln.",
      kicker: "Von der Absicht zur erledigten Arbeit.",
      kicker_body_1_pre: "Statt Agenten die gleiche Arbeit zur Laufzeit jedes Mal neu interpretieren zu lassen, nutzt INXM ",
      kicker_body_1_post: ", um den Plan vor der Ausführung zu generieren, zu validieren und zu verbessern.",
      kicker_body_2: "KI gestaltet den Workflow. Orchestrator führt ihn zuverlässig aus."
    },
    values: {
      eyebrow: "Werte",
      h2_l1: "In Deutschland gebaut.",
      h2_l2: "Für die europäische Industrie.",
      pillars: [
      ["Enterprise-taugliche Governance", "Vollständiger Audit-Trail // Daten bleiben im Unternehmen."],
      ["Europäische Compliance", "DSGVO und EU AI Act // entwickelt für Audits, die Regulatoren tatsächlich durchführen werden."],
      ["Anbieterunabhängig", "Orchestrator bringt bestehende Enterprise-Tools zur Zusammenarbeit."],
      ["Kein Engineering erforderlich", "Workflows in natürlicher Sprache steuern."],
      ["Kosteneffizient", "Zahlung pro Plan, nicht pro Ausführung."],
      ["Deterministische Ergebnisse", "Der Plan ist deterministisch // gleiche Eingabe, gleiche Ausgabe, jedes Mal."]]

    },
    who: {
      eyebrow: "Wer wir sind",
      h2_l1: "Gebaut von Gründern, die wissen,",
      h2_l2: "was europäische Unternehmen von KI brauchen.",
      p1: "INXM wird von einem Team mit tiefer Erfahrung in Enterprise-Systemen, industriellen Operationen, KI und mission-kritischer Software gebaut. Wir wissen: Unternehmensarbeit scheitert selten in der Demo. Sie scheitert im Übergang: in der Ausnahme, der Freigabe, dem Schema-Wechsel, im fehlenden Audit-Trail und in Systemen, die nie dafür konzipiert wurden, zusammenzuarbeiten.",
      p2_pre: "Deshalb haben wir Orchestrator gebaut: eine Process Execution Engine für Unternehmen mit Compiled AI. ",
      p2_end: "Wir verstehen die Lücke und bauen die KI-Lösung, die wir selbst gebraucht haben.",
      imagePlaceholder: "Teamfoto // Gründungsteam"
    },
    footer: {
      tagline_pre: "KI, die Arbeit ",
      tagline_hl: "zu Ende",
      tagline_end: " bringt.",
      about: "Adresse",
      badges: {
        eu_title: "DSGVO-konform",
        eu_sub: "Gehostet in Europa",
        de_title: "Entwickelt in Deutschland",
        de_sub: "Hauptsitz in Berlin"
      },
      legal: "Rechtliches",
      social: "Social",
      company: "Unternehmen",
      aboutLines: ["INXM GmbH", "Berlin, Deutschland"],
      aboutEmail: "hello@inxm.ai",
      legalLinks: [["Datenschutz", "de/privacy/index.html"], ["Datensicherheit", "de/data-security/index.html"], ["Impressum", "de/imprint/index.html"]],
      socialLinks: [["LinkedIn", "https://www.linkedin.com/company/inxm/"], ["Substack", "https://inxm.substack.com"]],
      companyLinks: [["Presse", "press/index.html"]],
      legal_right: "// © 2026 INXM GMBH · BERLIN"
    }
  }
};

window.TRANSLATIONS = TRANSLATIONS;
window.LangContext = window.LangContext || React.createContext({ t: TRANSLATIONS.EN, lang: "EN", setLang: () => {} });
window.useT = function () {return React.useContext(window.LangContext).t;};

const LangContext = window.LangContext;
const useT = window.useT;

// =========================================================
// Components
// =========================================================
function ScrollReveal({ children }) {
  const ref = React.useRef(null);
  React.useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const io = new IntersectionObserver(([e]) => {
      if (e.isIntersecting) {el.classList.add("in");io.disconnect();}
    }, { threshold: 0.12, rootMargin: "0px 0px -40px 0px" });
    io.observe(el);
    return () => io.disconnect();
  }, []);
  return <div className="reveal" ref={ref}>{children}</div>;
}

function Header() {
  const { lang, setLang, t, theme, setTheme } = React.useContext(LangContext);
  const isDark = theme === "dark";
  return (
    <header className="site-header">
      <a className="logo logo--pill" href="#" aria-label="INXM">
        <img
          src={isDark ? "ds/assets/inxm-pill-on-dark.svg" : "ds/assets/inxm-pill-on-light.svg"}
          alt="INXM"
          className="logo-pill" />
      </a>
      <nav className="site-nav">
        <a href="#what-we-do"><span className="nav-slash">//</span> {t.nav.whatWeDo}</a>
        <a href="#product"><span className="nav-slash">//</span> {t.nav.product}</a>
        <a href="#values"><span className="nav-slash">//</span> {t.nav.values}</a>
        <a href="#who-we-are"><span className="nav-slash">//</span> {t.nav.whoWeAre}</a>
      </nav>
      <div className="actions">
        <div className="lang-toggle" role="group" aria-label="Language">
          <button type="button" className={lang === "EN" ? "is-active" : ""} onClick={() => setLang("EN")}>EN</button>
          <button type="button" className={lang === "DE" ? "is-active" : ""} onClick={() => setLang("DE")}>DE</button>
        </div>
        <button
          type="button"
          className="theme-toggle"
          aria-label={isDark ? "Switch to light mode" : "Switch to dark mode"}
          onClick={() => setTheme(isDark ? "light" : "dark")}>
          {isDark ?
          <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
              <circle cx="8" cy="8" r="3" stroke="currentColor" strokeWidth="1.3" />
              <path d="M8 1.5v1.5M8 13v1.5M1.5 8h1.5M13 8h1.5M3.3 3.3l1.1 1.1M11.6 11.6l1.1 1.1M3.3 12.7l1.1-1.1M11.6 4.4l1.1-1.1" stroke="currentColor" strokeWidth="1.3" strokeLinecap="round" />
            </svg> :
          <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
              <path d="M13.5 9.5A5.5 5.5 0 0 1 6.5 2.5a5.5 5.5 0 1 0 7 7Z" stroke="currentColor" strokeWidth="1.3" strokeLinejoin="round" />
            </svg>
          }
        </button>
        <a href="mailto:hello@inxm.ai" className="btn btn-primary">{t.cta.talkToUs} <span className="arrow">→</span></a>
      </div>
    </header>);
}

function Hero() {
  const t = useT();
  return (
    <section className="hero hero--product" data-screen-label="Hero · Orchestrator">
      <BackgroundGrid density={56} />
      <div className="inner">
        <h1>
          {t.hero.tagline_pre}<span className="hl-orange">{t.hero.tagline_hl}</span>{t.hero.tagline_end}
        </h1>

        <div className="hero-intro">
          <p>
            {t.hero.intro_p1_pre}<span className="u-thin">{t.hero.intro_p1_u}</span>{t.hero.intro_p1_end}
          </p>
          <p>{t.hero.intro_p2}</p>
        </div>

        <div className="hero-ctas">
          <a href="mailto:hello@inxm.ai" className="btn btn-primary">{t.hero.ctaPrimary} <span className="arrow">→</span></a>
        </div>

        <div className="hero-product-wrap">
          {window.HeroOrchestratorView ? <window.HeroOrchestratorView /> : null}
        </div>
      </div>
      <a className="hero-scroll" href="#what-we-do" aria-label="Scroll for more">
        <span className="hero-scroll__lbl">More</span>
        <svg className="hero-scroll__arrow" width="14" height="22" viewBox="0 0 14 22" aria-hidden="true">
          <path d="M7 1 L7 19 M2 14 L7 19 L12 14" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
        </svg>
      </a>
    </section>);
}

function WhatWeDoSection() {
  const t = useT();
  return (
    <section className="section section--vision" id="what-we-do">
      <div className="inner">
        <div className="eyebrow">{t.whatWeDo.eyebrow}</div>
        <div className="vision-grid">
          <div className="vision-text">
            <h2>
              {t.whatWeDo.h2_l1}
              <br />
              {t.whatWeDo.h2_l2_pre}<span className="hl-orange">{t.whatWeDo.h2_l2_hl}</span>{t.whatWeDo.h2_l2_end}
            </h2>
            <div className="vision-body">
              <p>{t.whatWeDo.p1}</p>
              <p>{t.whatWeDo.p2}</p>
              <p>{t.whatWeDo.p3}</p>
            </div>
          </div>
          <div className="vision-image">
            <img
              src="ds/assets/vision-hero.jpg"
              alt="INXM // envelopes connected by an orange thread on a desk"
              className="vision-photo"
              loading="lazy" />
          </div>
        </div>
      </div>
    </section>);
}

function ProductSection() {
  const t = useT();
  return (
    <section className="section section--product" id="product">
      <div className="inner">
        <div className="eyebrow">{t.product.eyebrow}</div>
        <div className="product-head">
          <h2 className="product-h2">
            {t.product.h2_pre}<span className="hl-orange">{t.product.h2_strong1}</span>{t.product.h2_end}
          </h2>
          <div className="product-body">
            <p>{t.product.sideBody}</p>
          </div>
        </div>

        <ScrollReveal><CompilePipeline /></ScrollReveal>

        <div className="product-kicker">
          <span className="kicker-head">{t.product.kicker}</span>
          <p className="kicker-body">
            {t.product.kicker_body_1_pre}
            <a className="compiled-ai-link" href="https://arxiv.org/html/2604.05150v1" target="_blank" rel="noopener noreferrer">Compiled AI</a>
            {t.product.kicker_body_1_post}
          </p>
          <p className="kicker-body kicker-claim">{t.product.kicker_body_2}</p>
        </div>
      </div>
    </section>);
}

function ValuesSection() {
  const t = useT();
  return (
    <section className="section section--promise section--values" id="values">
      <div className="inner">
        <div className="eyebrow">{t.values.eyebrow}</div>
        <h2 className="promise-h2">
          {t.values.h2_l1}
          <br />
          {t.values.h2_l2}
        </h2>
        <div className="promise-grid promise-grid--6">
          {t.values.pillars.map(([title, desc], i) => {
            const Graphic = window.PILLAR_GRAPHICS && window.PILLAR_GRAPHICS[i];
            return (
              <div className="promise-pillar" key={title}>
                {Graphic ? <div className="promise-graphic"><Graphic /></div> : null}
                <div className="promise-title">{title}</div>
                <div className="promise-desc">
                  {desc.split("//").map((part, j) =>
                  <div key={j} className="promise-desc__line">{part.trim()}</div>
                  )}
                </div>
              </div>);

          })}
        </div>
      </div>
    </section>);
}

function WhoSection() {
  const t = useT();
  return (
    <section className="section section--who" id="who-we-are">
      <div className="inner">
        <div className="eyebrow">{t.who.eyebrow}</div>
        <div className="who-grid">
          <div className="who-text">
            <h2>
              {t.who.h2_l1}
              <br />
              {t.who.h2_l2}
            </h2>
            <div className="who-body">
              <p>{t.who.p1}</p>
              <p>
                {t.who.p2_pre}{t.who.p2_end}
              </p>
            </div>
          </div>
          <div className="who-image">
            <img
              src="ds/assets/team-inxm.jpg"
              alt="INXM team"
              className="who-photo"
              loading="lazy" />
          </div>
        </div>
      </div>
    </section>);
}

function Footer() {
  const t = useT();
  const f = t.footer;
  return (
    <footer className="site-footer">
      <div className="inner">
        <div className="footer-headline">
          <h2 className="footer-h2">
            {f.tagline_pre}<span className="hl-orange">{f.tagline_hl}</span>{f.tagline_end}
          </h2>
          <a className="logo logo--pill-foot" href="#" aria-label="INXM">
            <img src="ds/assets/inxm-pill-on-dark.svg" alt="INXM" className="logo-pill" />
          </a>
        </div>

        <div className="footer-divider"></div>

        <div className="row">
          <div className="footer-col footer-col--about">
            <h6>{f.about}</h6>
            <address className="footer-address">
              {f.aboutLines.map((line, i) => <div key={i}>{line}</div>)}
            </address>
            <a className="footer-email" href={`mailto:${f.aboutEmail}`}><span className="footer-email__slash">// </span><span className="footer-email__addr">{f.aboutEmail}</span></a>
          </div>
          <div className="footer-col">
            <h6>{f.legal}</h6>
            <ul>{f.legalLinks.map(([label, href]) => <li key={label}><a href={href}>{label}</a></li>)}</ul>
          </div>
          <div className="footer-col">
            <h6>{f.social}</h6>
            <ul>{f.socialLinks.map(([label, href]) => <li key={label}><a href={href}>{label}</a></li>)}</ul>
          </div>
          <div className="footer-col">
            <h6>{f.company}</h6>
            <ul>{f.companyLinks.map(([label, href]) => <li key={label}><a href={href}>{label}</a></li>)}</ul>
          </div>
        </div>

        <div className="footer-divider"></div>

        <div className="legal">
          <div className="footer-badges">
            <div className="footer-badge">
              <svg className="footer-badge__flag" viewBox="0 0 24 24" aria-hidden="true">
                <circle cx="12" cy="12" r="12" fill="#003399" />
                {Array.from({ length: 12 }).map((_, i) => {
                  const angle = (i * 30 - 90) * Math.PI / 180;
                  const cx = 12 + Math.cos(angle) * 7.5;
                  const cy = 12 + Math.sin(angle) * 7.5;
                  return <polygon key={i} fill="#FFCC00" points={`${cx},${cy - 1.2} ${cx + 0.36},${cy - 0.38} ${cx + 1.14},${cy - 0.38} ${cx + 0.51},${cy + 0.14} ${cx + 0.74},${cy + 0.92} ${cx},${cy + 0.45} ${cx - 0.74},${cy + 0.92} ${cx - 0.51},${cy + 0.14} ${cx - 1.14},${cy - 0.38} ${cx - 0.36},${cy - 0.38}`} />;
                })}
              </svg>
              <div className="footer-badge__text">
                <div className="footer-badge__title">{f.badges.eu_title}</div>
                <div className="footer-badge__sub">{f.badges.eu_sub}</div>
              </div>
            </div>
            <div className="footer-badge">
              <svg className="footer-badge__flag" viewBox="0 0 24 24" aria-hidden="true">
                <defs>
                  <clipPath id="footer-flag-de-clip"><circle cx="12" cy="12" r="12" /></clipPath>
                </defs>
                <g clipPath="url(#footer-flag-de-clip)">
                  <rect x="0" y="0"  width="24" height="8" fill="#000000" />
                  <rect x="0" y="8"  width="24" height="8" fill="#DD0000" />
                  <rect x="0" y="16" width="24" height="8" fill="#FFCE00" />
                </g>
              </svg>
              <div className="footer-badge__text">
                <div className="footer-badge__title">{f.badges.de_title}</div>
                <div className="footer-badge__sub">{f.badges.de_sub}</div>
              </div>
            </div>
          </div>
          <span>{f.legal_right}</span>
        </div>
      </div>
    </footer>);
}

function INXMPage() {
  const [lang, setLang] = React.useState("EN");
  const [theme, setTheme] = React.useState("light");
  const t = TRANSLATIONS[lang];

  React.useEffect(() => {
    const root = document.querySelector(".theme-shell");
    if (root) root.setAttribute("data-theme", theme);
    document.documentElement.setAttribute("data-theme", theme);
  }, [theme]);

  React.useEffect(() => {
    document.documentElement.setAttribute("lang", lang.toLowerCase());
  }, [lang]);

  return (
    <LangContext.Provider value={{ t, lang, setLang, theme, setTheme }}>
      <div className="page" data-theme={theme}>
        <Header />
        <Hero />
        <WhatWeDoSection />
        <ProductSection />
        <ValuesSection />
        <WhoSection />
        <Footer />
      </div>
    </LangContext.Provider>);
}

window.INXMPage = INXMPage;