const { useState, useEffect } = React;

// Eternis SVG Logo Component
const EternisLogo = () => (
  <svg xmlns="http://www.w3.org/2000/svg" width="130" height="36" viewBox="0 0 120 37" fill="none" className="cursor-pointer hover:opacity-90 transition-opacity">
    {/* Text Part */}
    <path fill="#fff" stroke="#fff" strokeWidth=".6" d="M36.302 28.604a.284.284 0 0 1-.05-.564l1.535-.277c.793-.155 1.295-.329 1.508-.522.232-.193.348-.59.348-1.189V11.639c0-.619-.116-1.025-.348-1.218-.213-.193-.715-.358-1.508-.493l-1.535-.277a.284.284 0 0 1 .05-.564h15.846c.191 0 .333.176.299.364-.027.15-.052.299-.073.448-.02.27-.029.541-.029.812 0 .715.058 1.382.174 2.001.1.441.178.83.236 1.166.03.18-.11.342-.292.342h-.02a.304.304 0 0 1-.285-.203 12.018 12.018 0 0 0-.944-2.059 4.206 4.206 0 0 0-1.479-1.595c-.619-.387-1.42-.58-2.407-.58h-4.746a.3.3 0 0 0-.3.3v7.52a.3.3 0 0 0 .3.3h4.311c1.005 0 1.672-.174 2.001-.522.348-.348.6-.928.754-1.74l.217-1.131a.286.286 0 0 1 .566.054v7.49a.286.286 0 0 1-.566.054l-.217-1.131c-.155-.812-.406-1.392-.754-1.74-.329-.348-.996-.522-2-.522h-4.312a.3.3 0 0 0-.3.3v6.979c0 .464.058.841.174 1.131.116.27.338.464.667.58.329.116.802.174 1.421.174h2.668c.793 0 1.527-.155 2.204-.464a6.22 6.22 0 0 0 1.74-1.16c.503-.483.87-.947 1.102-1.392l.675-1.323a.285.285 0 0 1 .254-.156.29.29 0 0 1 .277.363c-.2.773-.352 1.561-.452 2.363a25.804 25.804 0 0 0-.193 2.202.304.304 0 0 1-.302.292H36.302ZM77.246 28.604a.246.246 0 0 1-.062-.483l1.034-.271c.29-.077.483-.184.58-.319.116-.135.174-.338.174-.609v-7.917c0-.387-.048-.657-.145-.812-.097-.155-.28-.27-.551-.348l-1.111-.31a.185.185 0 0 1-.136-.179c0-.087.06-.162.146-.181.394-.088.78-.184 1.159-.287.445-.116.87-.251 1.276-.406a8.705 8.705 0 0 0 1.099-.487.226.226 0 0 1 .231.011.229.229 0 0 1 .088.267 7.672 7.672 0 0 0-.2.673c-.058.29-.087.57-.087.841v.232a.3.3 0 0 0 .022.112l.13.327a.3.3 0 0 1 .022.112v8.352c0 .27.048.474.145.609.116.135.319.242.609.319l1.204.276a.242.242 0 0 1-.054.478h-5.573Zm3.669-6.044-.499-4.286a.3.3 0 0 1 .15-.295l3.191-1.816c.116-.058.232-.097.348-.116.135-.039.261-.058.377-.058.348 0 .657.116.928.348.27.232.406.57.406 1.015 0 .348-.126.657-.377.928-.251.27-.6.406-1.044.406-.27 0-.493-.058-.667-.174a3.031 3.031 0 0 1-.464-.377 2.49 2.49 0 0 0-.319-.319.475.475 0 0 0-.348-.145c-.135 0-.338.087-.609.261-.27.155-.522.435-.754.841-.213.406-.319 3.09-.319 3.787ZM70.865 28.836c-1.122 0-2.117-.28-2.987-.841a6.022 6.022 0 0 1-2.06-2.233c-.483-.947-.724-2.001-.724-3.161 0-1.295.26-2.436.783-3.422.522-.986 1.227-1.76 2.117-2.32.908-.56 1.923-.841 3.045-.841.908 0 1.691.222 2.349.667a4.224 4.224 0 0 1 1.566 1.769c.386.735.58 1.566.58 2.494a.5.5 0 0 1-.116.319c-.058.097-.174.145-.348.145h-8.081a.3.3 0 0 1-.3-.3v-.076a.3.3 0 0 1 .291-.3l5.654-.165c.367 0 .55-.174.55-.522 0-.909-.202-1.682-.608-2.32-.387-.638-1.006-.957-1.856-.957-1.064 0-1.924.483-2.581 1.45-.658.947-.986 2.194-.986 3.741 0 1.121.203 2.069.609 2.842.406.773.947 1.363 1.624 1.769.676.387 1.42.58 2.233.58 1.163 0 2.335-.467 3.515-1.401a.264.264 0 0 1 .333.002.254.254 0 0 1 .044.345c-.678.926-1.425 1.606-2.24 2.04-.85.464-1.652.696-2.406.696ZM59.991 28.836c-1.624 0-2.436-1.063-2.436-3.19v-8.284a.3.3 0 0 0-.3-.3h-1.372a.3.3 0 0 1-.3-.3v-.042c0-.14.096-.26.231-.295 1.038-.273 1.773-.69 2.205-1.248.444-.568.716-1.364.818-2.388a.308.308 0 0 1 .304-.28h.057a.3.3 0 0 1 .3.3v3.141a.3.3 0 0 0 .3.3h3.19a.3.3 0 0 1 .282.4l-.076.213a.3.3 0 0 1-.282.199h-3.114a.3.3 0 0 0-.3.3v8.023c0 .754.126 1.286.377 1.595.251.31.59.464 1.015.464.329 0 .677-.068 1.044-.203.317-.11.646-.254.989-.43a.306.306 0 0 1 .385.087l.02.027a.295.295 0 0 1-.051.409 8.841 8.841 0 0 1-1.691 1.067c-.619.29-1.15.435-1.595.435ZM95.966 28.604a.246.246 0 0 1-.062-.483l1.034-.271c.29-.077.483-.184.58-.319.116-.135.174-.338.174-.609v-6.496c0-.928-.26-1.634-.783-2.117-.503-.503-1.237-.754-2.204-.754-.947 0-1.73.329-2.32.957-.59.628-.87 1.42-.87 3.204 0 1.516-.565-2.338-.735-3.532a.298.298 0 0 1 .296-.339h.321c.04 0 .079-.008.115-.023.453-.191.996-.444 1.627-.76.657-.348 1.228-.648 1.711-.899.193-.097.348-.145.464-.145 1.373 0 2.436.348 3.19 1.044.754.677 1.131 1.672 1.131 2.987v6.873c0 .27.048.474.145.609.116.135.319.242.609.319l1.035.271a.245.245 0 0 1-.062.483h-5.396Zm-8.12 0a.246.246 0 0 1-.062-.483l1.034-.271c.29-.077.483-.184.58-.319.116-.135.174-.338.174-.609v-7.917c0-.387-.048-.657-.145-.812-.097-.155-.28-.27-.55-.348l-1.112-.31a.185.185 0 0 1-.136-.179c0-.087.06-.162.146-.181.394-.088.78-.184 1.16-.287.444-.116.87-.251 1.275-.406a8.705 8.705 0 0 0 1.1-.487.226.226 0 0 1 .23.011.229.229 0 0 1 .088.267 7.672 7.672 0 0 0-.2.673c-.058.29-.087.57-.087.841v.232a.3.3 0 0 0 .022.112l.13.327a.3.3 0 0 1 .022.112v8.352c0 .27.048.474.145.609.116.135.32.242.61.319l1.034.271a.245.245 0 0 1-.062.483h-5.396ZM115.418 28.836a6.735 6.735 0 0 1-2.349-.406 11.927 11.927 0 0 1-1.494-.663.293.293 0 0 1-.148-.274c.029-.5.035-1 .018-1.499 0-.451-.032-.915-.094-1.391a.307.307 0 0 1 .301-.349h.172c.149 0 .275.109.301.255.12.67.309 1.271.567 1.804.309.58.715 1.034 1.218 1.363.522.329 1.16.493 1.914.493.56 0 1.053-.203 1.479-.609.444-.425.667-.928.667-1.508 0-.503-.087-.918-.261-1.247-.155-.329-.455-.628-.899-.899-.445-.27-1.093-.56-1.943-.87-1.025-.406-1.818-.86-2.378-1.363-.561-.522-.841-1.257-.841-2.204 0-.6.164-1.16.493-1.682.348-.522.831-.947 1.45-1.276.618-.329 1.334-.493 2.146-.493.56 0 1.015.058 1.363.174.33.11.678.246 1.043.409a.306.306 0 0 0 .123.026h.294a.3.3 0 0 1 .3.309c-.013.532-.02 1.009-.02 1.431.015.392.063.834.142 1.328a.304.304 0 0 1-.299.354h-.028a.307.307 0 0 1-.298-.246c-.2-.945-.522-1.684-.967-2.219-.484-.58-1.093-.87-1.827-.87-.638 0-1.16.184-1.566.551a1.796 1.796 0 0 0-.609 1.392c0 .464.067.85.203 1.16.154.29.435.56.841.812.406.232 1.015.503 1.827.812 1.276.483 2.155.996 2.639 1.537.502.522.754 1.237.754 2.146 0 .619-.155 1.218-.464 1.798-.31.56-.774 1.025-1.392 1.392-.619.348-1.412.522-2.378.522ZM103.946 28.604a.246.246 0 0 1-.246-.245c0-.112.076-.21.184-.238l1.034-.271c.503-.135.754-.445.754-.928v-7.946c0-.387-.048-.657-.145-.812-.096-.155-.28-.27-.551-.348l-1.111-.31a.186.186 0 0 1-.136-.179c0-.087.061-.162.146-.182a51.4 51.4 0 0 0 1.884-.46 10.993 10.993 0 0 0 1.823-.722.231.231 0 0 1 .232.014.236.236 0 0 1 .091.269 5.18 5.18 0 0 0-.232 1.164 20.33 20.33 0 0 0-.058 1.682v7.83c0 .251.058.454.174.609.116.155.29.261.522.319l1.035.271a.245.245 0 0 1-.062.483h-5.338Zm2.654-16.298c-.425 0-.802-.164-1.131-.493-.328-.329-.493-.706-.493-1.131 0-.464.165-.86.493-1.189.329-.329.706-.493 1.131-.493.464 0 .861.164 1.189.493.329.329.493.725.493 1.189 0 .425-.164.802-.493 1.131a1.62 1.62 0 0 1-1.189.493Z"/>
    {/* Icon Mark */}
    <path fill="#3ABC5F" stroke="#3ABC5F" strokeJoin="round" strokeWidth=".5" d="M9.083 24.717c-.924.869-1.91 2.137-2.925 3.17-.154.156-.366.254-.561.156-.72-.362-1.916-1.785-2.296-2.14-.694-.648-1.096-1.326-1.774-1.954-.372-.345-.348-.466-.14-.91.73-1.554 1.599-2.767 2.897-3.898C5.5 17.975 3.3 17.182 1.31 14.898c-1.56-1.637 3.177-4.766 4.835-5.063.488-.088.645.144.888.434.877 1.044 1.78 2.067 2.664 3.105.699.821 3.356-2.727 3.858-3.196.803-.75-2.689-3.47-3.186-4.027-.205-.23-.705-.772-.548-1.083.05-.098.15-.163.22-.248 1.17-1.397 3.336-3.234 4.157-3.722.05-.03.1-.068.156-.085.84-.258 4.098 3.35 5.136 4.258.09.078.176.17.108.268-.44.629-3.33 2.929-3.664 3.244-.518.489-.51.487-.08 1.04 1.137 1.463 2.242 2.505 3.521 3.833.148.152 3.357-2.77 3.776-3.34.848-1.058 1.118-.616 1.76.012 1.106 1.083 1.793 2.392 3.106 3.32.768.543-.003.973-.393 1.36a46.214 46.214 0 0 0-1.566 1.648c-.442.484-.973.905-1.485 1.33-.663.55 2.34 3.7 3.297 4.776.093.105.168.229.163.369-.047 1.181-2.698 3.61-4.086 4.605-.32.23-.745.197-1.052-.051-1.288-1.04-2.726-2.367-3.84-3.756-.436-.544-2.832 2.466-3.21 2.854-.638.656 1.878 3.246 3.16 4.468.33.315.423.812.15 1.177-1.093 1.461-3.305 3.226-4.276 4.228-.715.737-4.035-2.957-4.742-3.602-.375-.342-.365-.893-.003-1.24 1.365-1.314 2.8-2.35 3.867-3.859.382-.54-1.126-1.693-1.482-1.97-.704-.552-1.22-1.279-1.856-1.891-.49-.472-1.208.272-1.58.623Zm6.02-13.963c-.848-.871-3.506 2.665-3.991 3.229-.505.588.732 1.298 1.11 1.67.703.69 1.406 1.382 2.095 2.088.72.74 3.455-2.388 3.98-2.899.485-.47.514-.578.007-1.02-1.155-1.005-2.132-1.97-3.2-3.068Zm11.99 13.074c.16-.2.222-.472.092-.694-.433-.74-1.632-1.347-2.11-1.992-.435-.587-.712-1.283-1.27-1.785-.763-.687-4.346 3.146-3.97 3.597.472.566 3.33 4.21 4.041 3.702.878-.627 2.425-1.843 3.216-2.828ZM11.5 5.975a95.943 95.943 0 0 0 2.846 2.461c.73.608 1.666-.824 2.209-1.306 2.527-2.248 2.322-1.974-1.076-4.788-.728-.644-.979-.367-1.455-.082-1.017.74-1.939 1.63-2.524 2.215-.5.5-.753.91 0 1.5ZM4.284 20.788c-.61.606-1.189 1.242-1.775 1.87-.865.929.48 1.804 1.01 2.396.371.417 1.806 2.308 2.5 1.5.979-1.14 2.107-2.456 3.194-3.492.66-.63-2.53-3.07-3.027-3.53-.563-.517-1.542.907-1.902 1.256Zm2.851-2.786c-.54.503-.514.498-.05 1.08.768.964 1.822 1.62 2.745 2.371a1.26 1.26 0 0 0 1.627-.054c.773-.725 1.615-1.364 2.21-2.25 1.056-1.57-2.266-2.907-3.202-3.803-.527-.504-2.88 2.239-3.33 2.656Zm-5.117-3.948c.606.722 3.09 4.332 3.927 3.495 1.038-1.036 2.219-1.917 3.259-2.952.417-.417-1.4-2.327-1.686-2.543-1.5-1.5-1.218-1.876-2.5-1-1.5 1-3.483 2.254-3 3Zm11.923 21.041a.765.765 0 0 0 .687.001c1.48-.68 2.213-1.268 3.372-2.596.742-.851-1.282-2.435-2.5-3.5-1.436-1.256-3.815 2.551-4.453 3.263-.427.475 1.83 2.258 2.894 2.832Zm2.102-15.541c.032.034.067.067.103.097.898.74 1.825 1.443 2.63 2.29.544.574 1.496-.877 1.885-1.154.694-.494 1.245-1.143 1.903-1.727.588-.692-1.39-2.02-2.908-3.462-.656-.623-1.269.573-1.544.857-.656.676-1.42 1.234-2.171 1.8-.689.518-.35.809.102 1.299Zm1.472 4.29c1.024-1.246-1.46-2.9-2.489-3.966-.734-.761-3.02 2.092-3.58 2.763-.574.687 2.915 3.235 3.44 3.693.554.484 2.271-2.082 2.63-2.49ZM24 17.5c.485-.446 2-2 3-3.025.625-.64-2.23-3.244-3-3.5-.539-.22-1.191.789-1.982 1.58-1 1-2.328 1.678-1.88 2.025.918.712 2.53 4.147 3.862 2.92Z"/>
  </svg>
);

// Main App Container
function App() {
  const [currentTab, setCurrentTab] = useState('home'); // 'home' | 'blog'
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
  const [activeArticle, setActiveArticle] = useState(null);
  const [activeJobModal, setActiveJobModal] = useState(null);
  const [privacyModalOpen, setPrivacyModalOpen] = useState(false);
  const [termsModalOpen, setTermsModalOpen] = useState(false);

  // Scroll to section smoothly
  const scrollToCareers = () => {
    setCurrentTab('home');
    setMobileMenuOpen(false);
    setTimeout(() => {
      const element = document.getElementById('careers');
      if (element) {
        element.scrollIntoView({ behavior: 'smooth' });
      }
    }, 100);
  };

  return (
    <div className="min-h-screen bg-[#0f4631] text-white flex flex-col relative font-sans selection:bg-[#f7d24b]/30 selection:text-[#f7d24b]">
      {/* Hero Ambient Glow */}
      <div className="hero-glow"></div>

      {/* Navigation Header */}
      <nav className="fixed top-0 left-0 right-0 z-50 h-20 backdrop-blur-md bg-[#0f4631]/80 border-b border-[#3abc5f]/10 flex justify-center transition-all">
        <div className="w-full max-w-6xl px-4 sm:px-6 md:px-10 flex justify-between items-center h-full">
          <div onClick={() => { setCurrentTab('home'); window.scrollTo({ top: 0, behavior: 'smooth' }); }}>
            <EternisLogo />
          </div>

          {/* Desktop Nav Links */}
          <ul className="hidden md:flex gap-8 items-center list-none m-0 p-0">
            <li>
              <a
                href="https://axion.eternis.ai"
                target="_blank"
                rel="noopener noreferrer"
                className="font-sans inline-flex items-center gap-1 text-white hover:text-[#f7d24b] text-sm font-medium transition-colors py-2 group relative"
              >
                Axion
                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="transition-transform group-hover:translate-x-0.5 group-hover:-translate-y-0.5">
                  <path d="M7 17L17 7M17 7H7M17 7V17"/>
                </svg>
              </a>
            </li>
            <li>
              <button
                onClick={() => { setCurrentTab('blog'); window.scrollTo({ top: 0, behavior: 'smooth' }); }}
                className={`font-sans text-sm font-medium transition-colors py-2 border-b-2 ${currentTab === 'blog' ? 'text-[#f7d24b] border-[#f7d24b]' : 'text-white border-transparent hover:text-[#f7d24b]'}`}
              >
                Blog
              </button>
            </li>
            <li>
              <button
                onClick={scrollToCareers}
                className="font-sans text-white hover:text-[#f7d24b] text-sm font-medium transition-colors py-2"
              >
                We're hiring
              </button>
            </li>
          </ul>

          {/* Mobile Hamburger Button */}
          <button
            onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
            className="md:hidden flex p-2 focus:outline-none text-white"
            aria-label="Toggle Menu"
          >
            <div className="w-6 h-5 relative flex flex-col justify-between">
              <span className={`w-full h-0.5 bg-white transition-all transform origin-left ${mobileMenuOpen ? 'rotate-45 translate-x-1' : ''}`}></span>
              <span className={`w-full h-0.5 bg-white transition-all ${mobileMenuOpen ? 'opacity-0' : ''}`}></span>
              <span className={`w-full h-0.5 bg-white transition-all transform origin-left ${mobileMenuOpen ? '-rotate-45 translate-x-1' : ''}`}></span>
            </div>
          </button>
        </div>

        {/* Mobile Menu Drawer */}
        {mobileMenuOpen && (
          <div className="md:hidden absolute top-20 left-0 right-0 bg-[#0f4631]/98 backdrop-blur-xl border-b border-[#3abc5f]/20 p-6 flex flex-col gap-4 animate-fade-up">
            <a
              href="https://axion.eternis.ai"
              target="_blank"
              rel="noopener noreferrer"
              className="text-white hover:text-[#f7d24b] text-lg font-medium p-2 rounded-lg hover:bg-[#3abc5f]/10"
            >
              Axion
            </a>
            <button
              onClick={() => { setCurrentTab('blog'); setMobileMenuOpen(false); }}
              className="text-left text-white hover:text-[#f7d24b] text-lg font-medium p-2 rounded-lg hover:bg-[#3abc5f]/10"
            >
              Blog
            </button>
            <button
              onClick={scrollToCareers}
              className="text-left text-white hover:text-[#f7d24b] text-lg font-medium p-2 rounded-lg hover:bg-[#3abc5f]/10"
            >
              We're hiring
            </button>
          </div>
        )}
      </nav>

      {/* Main Content Area */}
      <main className="flex-1 pt-28">
        {currentTab === 'home' ? (
          <div>
            {/* Hero Section */}
            <section className="pt-20 pb-16 px-4 sm:px-6 md:px-10 max-w-6xl mx-auto">
              <div className="flex flex-col gap-8 max-w-4xl">
                <h1 className="text-5xl sm:text-6xl md:text-7xl font-serif leading-[1.08] tracking-tight">
                  <span className="text-[#E3E2E1]/40 transition-opacity duration-1000">Building Frontier Systems for</span>
                  <br />
                  <span className="text-[#E3E2E1] font-normal">Forecasting</span>
                </h1>
                
                <div className="flex flex-col gap-6 text-[15px] sm:text-[16px] text-white/70 max-w-2xl font-sans leading-relaxed">
                  <p>
                    The future is path dependent. Our goal is to forecast, simulate, and quantify uncertainties using AI systems. We aim to understand the evolving manifold of knowledge, epistemics and how the world is evolving.
                  </p>
                  <p>
                    We believe these abilities must be democratized. Our products and experiments explore how we can collectively govern autonomous productive systems in the future.
                  </p>
                </div>
              </div>
            </section>

            {/* Interactive AI Forecasting Simulation Sandbox */}
            <section className="my-12 px-4 sm:px-6 md:px-10 max-w-6xl mx-auto">
              <ForecastingSandbox />
            </section>

            {/* Section: What we're working on */}
            <section className="py-16 px-4 sm:px-6 md:px-10 max-w-6xl mx-auto">
              <div className="mb-10">
                <h2 className="text-4xl sm:text-5xl font-serif text-[#f7d24b]">
                  What we're working on
                </h2>
              </div>

              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                {/* Card 1 */}
                <div className="glass-card rounded-2xl p-8 transition-all duration-300 flex flex-col justify-between">
                  <div>
                    <h3 className="text-2xl font-serif text-white mb-3">Forecasting systems</h3>
                    <p className="text-[13px] text-white/65 leading-relaxed font-sans">
                      Post-training language models for calibrated prediction, exploring pretraining on new modalities, and maintaining cheap world models that are continually learning systems.
                    </p>
                  </div>
                  <div className="mt-6">
                    <button
                      onClick={() => {
                        setCurrentTab('blog');
                        setActiveArticle(blogPosts[1]);
                      }}
                      className="gold-pill text-xs font-medium px-4 py-2 rounded-full inline-block"
                    >
                      Read more
                    </button>
                  </div>
                </div>

                {/* Card 2 */}
                <div className="glass-card rounded-2xl p-8 transition-all duration-300">
                  <h3 className="text-2xl font-serif text-white mb-3">The shape of knowledge and metascience</h3>
                  <p className="text-[13px] text-white/65 leading-relaxed font-sans">
                    Separating what a model knows from what it can fluently say. Epistemic embeddings, new scaling laws, emergent properties, and how world models compress reality.
                  </p>
                </div>

                {/* Card 3 */}
                <div className="glass-card rounded-2xl p-8 transition-all duration-300 flex flex-col justify-between">
                  <div>
                    <h3 className="text-2xl font-serif text-white mb-3">Decision products</h3>
                    <p className="text-[13px] text-white/65 leading-relaxed font-sans">
                      Integrating our research and experiments into a core product that people use to make decisions grounded in structured evidence.
                    </p>
                  </div>
                  <div className="mt-6">
                    <a
                      href="https://axion.eternis.ai"
                      target="_blank"
                      rel="noopener noreferrer"
                      className="gold-pill text-xs font-medium px-4 py-2 rounded-full inline-block"
                    >
                      Axion
                    </a>
                  </div>
                </div>

                {/* Card 4 */}
                <div className="glass-card rounded-2xl p-8 transition-all duration-300 flex flex-col justify-between">
                  <div>
                    <h3 className="text-2xl font-serif text-white mb-3">Multi-agent coordination</h3>
                    <p className="text-[13px] text-white/65 leading-relaxed font-sans">
                      Understanding emergent properties of agent systems at scale. Multi-agent RL, experiments in societies of twins, and large-scale simulations.
                    </p>
                  </div>
                  <div className="mt-6">
                    <a
                      href="https://strategy.freysa.ai"
                      target="_blank"
                      rel="noopener noreferrer"
                      className="gold-pill text-xs font-medium px-4 py-2 rounded-full inline-block"
                    >
                      strategy.freysa.ai
                    </a>
                  </div>
                </div>
              </div>
            </section>

            {/* Section: Product Ecosystem */}
            <section className="py-16 px-4 sm:px-6 md:px-10 max-w-6xl mx-auto">
              <div className="mb-10">
                <h2 className="text-4xl sm:text-5xl font-serif text-[#f7d24b]">
                  Product Ecosystem
                </h2>
              </div>

              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                {/* Axion */}
                <div className="glass-card rounded-2xl p-8 transition-all duration-300 flex flex-col justify-between">
                  <div>
                    <h3 className="text-2xl font-serif text-white mb-3">Axion</h3>
                    <p className="text-[13px] text-white/65 leading-relaxed font-sans mb-4">
                      Multi-agent system for decision-making. Built for capital allocators, strategists, and anyone reasoning through high-stakes forecasts.
                    </p>
                  </div>
                  <div>
                    <a
                      href="https://axion.eternis.ai"
                      target="_blank"
                      rel="noopener noreferrer"
                      className="gold-pill text-xs font-medium px-4 py-2 rounded-full inline-block"
                    >
                      axion.eternis.ai
                    </a>
                  </div>
                </div>

                {/* Freysa */}
                <div className="glass-card rounded-2xl p-8 transition-all duration-300 flex flex-col justify-between">
                  <div>
                    <h3 className="text-2xl font-serif text-white mb-3">Freysa</h3>
                    <p className="text-[13px] text-white/65 leading-relaxed font-sans mb-4">
                      An agent with her own money and private keys, evolving over time. Agents with resources will exist, and governance layers are needed for a human-AI future.
                    </p>
                  </div>
                  <div>
                    <a
                      href="https://freysa.ai"
                      target="_blank"
                      rel="noopener noreferrer"
                      className="gold-pill text-xs font-medium px-4 py-2 rounded-full inline-block"
                    >
                      freysa.ai
                    </a>
                  </div>
                </div>

                {/* Silo */}
                <div className="glass-card rounded-2xl p-8 transition-all duration-300 flex flex-col justify-between">
                  <div>
                    <h3 className="text-2xl font-serif text-white mb-3">Silo</h3>
                    <p className="text-[13px] text-white/65 leading-relaxed font-sans mb-4">
                      A private AI app and box. Access models privately (hosted in TEEs), with data that never leaves your control. Purchase a box so you can host models locally as well.
                    </p>
                  </div>
                  <div>
                    <a
                      href="https://siloprivacy.com"
                      target="_blank"
                      rel="noopener noreferrer"
                      className="gold-pill text-xs font-medium px-4 py-2 rounded-full inline-block"
                    >
                      siloprivacy.com
                    </a>
                  </div>
                </div>

                {/* Lume */}
                <div className="glass-card rounded-2xl p-8 transition-all duration-300 flex flex-col justify-between">
                  <div>
                    <h3 className="text-2xl font-serif text-white mb-3">Lume</h3>
                    <p className="text-[13px] text-white/65 leading-relaxed font-sans mb-4">
                      A prediction market platform. Put forecasts to the test with real stakes.
                    </p>
                  </div>
                  <div>
                    <a
                      href="https://lume.top"
                      target="_blank"
                      rel="noopener noreferrer"
                      className="gold-pill text-xs font-medium px-4 py-2 rounded-full inline-block"
                    >
                      lume.top
                    </a>
                  </div>
                </div>
              </div>
            </section>

            {/* Section: Careers / Join Us */}
            <section id="careers" className="py-20 px-4 sm:px-6 md:px-10 max-w-6xl mx-auto text-center flex flex-col items-center">
              <div className="mb-6">
                <h2 className="text-5xl sm:text-6xl font-serif text-white">
                  Join <span className="text-[#f7d24b]">Us</span>
                </h2>
              </div>

              <div className="max-w-2xl flex flex-col gap-6 text-center">
                <p className="font-sans text-sm text-white/70 font-medium">
                  $30M raised. San Francisco preferred, high-agency remote welcome.
                </p>
                
                <p className="font-sans text-sm text-white/80 font-semibold">
                  We want people who are obsessed with questions like:
                </p>

                <div className="rounded-2xl border border-white/10 bg-gradient-to-b from-white/[0.08] to-white/[0.03] px-6 sm:px-8 py-6 text-xs sm:text-sm text-white/80 space-y-3 text-center leading-relaxed">
                  <p>How should coordination scale in a world where every human has a digital twin?</p>
                  <p>How can we build first-order world models without pretraining on the world's data?</p>
                  <p>How do LLMs represent beliefs?</p>
                  <p>What makes a good forecaster, and can we robustly benchmark it?</p>
                  <p>Are there laws tying compute to scientific production, and can we formalize the intuition behind discovery and better decisions?</p>
                  <p>Can we automate the discovery of new coordination mechanisms — retroactive funding, incentive design, agent alignment around shared goals?</p>
                </div>

                <div className="pt-2">
                  <a
                    href="mailto:contact@eternis.ai"
                    className="font-sans text-sm text-white underline hover:text-[#f7d24b] transition-colors"
                  >
                    contact@eternis.ai
                  </a>
                </div>

                {/* Job Roles Selector & Modal Trigger */}
                <div className="w-full pt-6">
                  <div className="glass-card rounded-2xl p-6 border border-[#3abc5f]/20 hover:border-[#f7d24b]/50 transition-all text-left">
                    <div className="flex justify-between items-center mb-4">
                      <div>
                        <h4 className="text-lg font-serif text-white">Open Roles</h4>
                        <p className="text-xs text-white/60">Select a role to view responsibilities & apply</p>
                      </div>
                      <span className="text-xs gold-pill px-3 py-1 rounded-full">Actively Hiring</span>
                    </div>

                    <div className="space-y-3">
                      {jobOpenings.map((job) => (
                        <div
                          key={job.id}
                          onClick={() => setActiveJobModal(job)}
                          className="p-3.5 rounded-xl bg-white/5 border border-white/10 hover:border-[#f7d24b]/40 hover:bg-white/10 cursor-pointer transition-all flex justify-between items-center"
                        >
                          <div>
                            <span className="font-medium text-sm text-white block">{job.title}</span>
                            <span className="text-xs text-white/50">{job.location} · {job.team}</span>
                          </div>
                          <span className="text-xs text-[#f7d24b] underline">View details →</span>
                        </div>
                      ))}
                    </div>
                  </div>
                </div>
              </div>
            </section>
          </div>
        ) : (
          /* Blog Overview Component */
          <BlogOverview
            onSelectPost={(post) => setActiveArticle(post)}
          />
        )}
      </main>

      {/* Footer Section */}
      <footer className="pt-20 border-t border-[#3abc5f]/15 bg-[#0f4631] text-center">
        <div className="max-w-6xl mx-auto px-4 pb-10">
          <h3 className="text-2xl font-serif text-white mb-6">Get in Touch</h3>

          <div className="flex flex-col md:flex-row justify-center items-center gap-8 mb-8">
            <a
              href="mailto:contact@eternis.ai"
              className="flex items-center gap-3 text-white/80 hover:text-[#f7d24b] transition-colors"
            >
              <div className="w-10 h-10 rounded-full bg-[#3abc5f]/10 border border-[#3abc5f]/20 flex items-center justify-center">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                  <path d="m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7"/>
                  <rect x="2" y="4" width="20" height="16" rx="2"/>
                </svg>
              </div>
              <span className="text-sm font-sans">contact@eternis.ai</span>
            </a>

            <a
              href="https://linkedin.com/company/eternisai"
              target="_blank"
              rel="noopener noreferrer"
              className="flex items-center gap-3 text-white/80 hover:text-[#f7d24b] transition-colors"
            >
              <div className="w-10 h-10 rounded-full bg-[#3abc5f]/10 border border-[#3abc5f]/20 flex items-center justify-center">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                  <path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"/>
                  <rect width="4" height="12" x="2" y="9"/>
                  <circle cx="4" cy="4" r="2"/>
                </svg>
              </div>
              <span className="text-sm font-sans">Eternis</span>
            </a>
          </div>

          <div className="flex justify-center items-center gap-4 text-xs text-white/60 mb-4 font-sans">
            <button onClick={() => setPrivacyModalOpen(true)} className="hover:text-white transition-opacity">Privacy Policy</button>
            <span>·</span>
            <button onClick={() => setTermsModalOpen(true)} className="hover:text-white transition-opacity">Terms of Service</button>
          </div>

          <p className="text-xs text-white/50 font-sans">© 2026 ETERNIS</p>
        </div>

        {/* Bottom Graphic Graphic */}
        <div className="w-full opacity-40 overflow-hidden h-24 relative flex items-end">
          <svg className="w-full h-full object-cover" viewBox="0 0 1200 120" preserveAspectRatio="none">
            <path fill="rgba(58, 188, 95, 0.15)" d="M0,0 C150,90 350,-40 500,40 C650,120 900,10 1200,60 L1200,120 L0,120 Z"></path>
            <path fill="rgba(247, 210, 75, 0.1)" d="M0,30 C300,100 600,-20 900,80 C1050,110 1150,40 1200,80 L1200,120 L0,120 Z"></path>
          </svg>
        </div>
      </footer>

      {/* Article Detail Reader Modal */}
      {activeArticle && (
        <ArticleReaderModal post={activeArticle} onClose={() => setActiveArticle(null)} />
      )}

      {/* Job Details Modal */}
      {activeJobModal && (
        <JobModal job={activeJobModal} onClose={() => setActiveJobModal(null)} />
      )}

      {/* Privacy Policy Modal */}
      {privacyModalOpen && (
        <SimpleTextModal
          title="Privacy Policy"
          onClose={() => setPrivacyModalOpen(false)}
        >
          <p className="mb-4">At Eternis AI, we respect your privacy. We process personal data solely to maintain and improve our forecasting models, researcher interactions, and decision products.</p>
          <p className="mb-4">Data submitted through our apps (Axion, Freysa, Silo) is protected using TEE (Trusted Execution Environments) and encrypted parameters.</p>
          <p>Contact us at contact@eternis.ai for any inquiries regarding telemetry or privacy concerns.</p>
        </SimpleTextModal>
      )}

      {/* Terms of Service Modal */}
      {termsModalOpen && (
        <SimpleTextModal
          title="Terms of Service"
          onClose={() => setTermsModalOpen(false)}
        >
          <p className="mb-4">Welcome to Eternis AI. By accessing or using our websites, products, or predictive API endpoints, you agree to comply with our Terms of Service.</p>
          <p className="mb-4">All models, research papers, software, and epistemic algorithms are protected by copyright and intellectual property rights.</p>
          <p>Forecasting predictions represent probabilistic estimates and do not constitute financial advice.</p>
        </SimpleTextModal>
      )}
    </div>
  );
}

// Interactive AI Forecasting Sandbox Component
function ForecastingSandbox() {
  const [topic, setTopic] = useState("LLM Benchmark Calibration in 2026");
  const [confidence, setConfidence] = useState(82);
  const [samples, setSamples] = useState(1000);
  const [isSimulating, setIsSimulating] = useState(false);
  const [results, setResults] = useState(null);

  const runSimulation = () => {
    setIsSimulating(true);
    setResults(null);

    setTimeout(() => {
      const baseProb = Math.min(99, Math.max(10, Math.floor(confidence + (Math.random() * 10 - 5))));
      const brierScore = (0.05 + Math.random() * 0.12).toFixed(3);
      const entropy = (0.3 + Math.random() * 0.4).toFixed(2);
      
      setResults({
        probability: baseProb,
        brierScore: brierScore,
        entropy: entropy,
        samplesUsed: samples,
        timestamp: new Date().toLocaleTimeString(),
        model: "Eternis-8B-GRPO-v2"
      });
      setIsSimulating(false);
    }, 1200);
  };

  useEffect(() => {
    runSimulation();
  }, []);

  return (
    <div className="glass-card rounded-3xl p-6 sm:p-8 border border-[#3abc5f]/25 shadow-2xl relative overflow-hidden">
      <div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-4 mb-6 pb-4 border-b border-[#3abc5f]/15">
        <div>
          <div className="flex items-center gap-2 mb-1">
            <span className="w-2 h-2 rounded-full bg-[#f7d24b] animate-ping"></span>
            <span className="text-xs uppercase tracking-wider text-[#f7d24b] font-semibold">Live Sandbox Demo</span>
          </div>
          <h3 className="text-2xl font-serif text-white">Forecasting Calibration Simulator</h3>
        </div>
        <span className="text-xs text-white/50 bg-[#3abc5f]/10 border border-[#3abc5f]/20 rounded-full px-3 py-1">
          Powered by Eternis 8B Post-trained Model
        </span>
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-12 gap-6 items-center">
        {/* Controls */}
        <div className="lg:col-span-6 space-y-4">
          <div>
            <label className="block text-xs text-white/70 mb-1 font-medium">Forecast Target Topic</label>
            <input
              type="text"
              value={topic}
              onChange={(e) => setTopic(e.target.value)}
              className="w-full bg-white/5 border border-white/10 rounded-xl px-4 py-2.5 text-sm text-white focus:outline-none focus:border-[#f7d24b]"
              placeholder="e.g. AGI arrival probability before 2028"
            />
          </div>

          <div className="grid grid-cols-2 gap-4">
            <div>
              <label className="block text-xs text-white/70 mb-1 font-medium">Prior Confidence ({confidence}%)</label>
              <input
                type="range"
                min="10"
                max="95"
                value={confidence}
                onChange={(e) => setConfidence(Number(e.target.value))}
                className="w-full accent-[#f7d24b]"
              />
            </div>
            <div>
              <label className="block text-xs text-white/70 mb-1 font-medium">Monte Carlo Samples ({samples})</label>
              <input
                type="range"
                min="200"
                max="5000"
                step="200"
                value={samples}
                onChange={(e) => setSamples(Number(e.target.value))}
                className="w-full accent-[#3abc5f]"
              />
            </div>
          </div>

          <button
            onClick={runSimulation}
            disabled={isSimulating}
            className="w-full gold-pill font-medium text-sm py-3 rounded-xl flex items-center justify-center gap-2 transition-all"
          >
            {isSimulating ? (
              <>
                <svg className="animate-spin h-4 w-4 text-[#f7d24b]" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                  <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
                  <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                </svg>
                <span>Evaluating Epistemic Manifold...</span>
              </>
            ) : (
              <span>Simulate Forecast Probability →</span>
            )}
          </button>
        </div>

        {/* Results Visualizer */}
        <div className="lg:col-span-6 bg-[#0B2A1F] rounded-2xl p-6 border border-[#3abc5f]/20 flex flex-col justify-between min-h-[220px]">
          {results ? (
            <div className="space-y-4 animate-fade-up">
              <div className="flex justify-between items-end">
                <div>
                  <span className="text-xs text-white/50 block">Calibrated Probability</span>
                  <span className="text-4xl font-serif font-bold text-[#f7d24b]">{results.probability}%</span>
                </div>
                <div className="text-right">
                  <span className="text-xs text-white/50 block">Brier Score</span>
                  <span className="text-lg font-mono text-[#3abc5f]">{results.brierScore}</span>
                </div>
              </div>

              {/* Progress Bar Visualization */}
              <div className="w-full bg-white/10 rounded-full h-3 overflow-hidden p-0.5">
                <div
                  className="bg-gradient-to-r from-[#3abc5f] to-[#f7d24b] h-full rounded-full transition-all duration-700 ease-out"
                  style={{ width: `${results.probability}%` }}
                ></div>
              </div>

              <div className="grid grid-cols-3 gap-2 pt-2 text-center text-xs text-white/60 border-t border-white/10">
                <div>
                  <span className="block text-[10px] text-white/40">ENTROPY</span>
                  <span className="font-mono text-white/90">{results.entropy} nats</span>
                </div>
                <div>
                  <span className="block text-[10px] text-white/40 font-mono">SAMPLES</span>
                  <span className="font-mono text-white/90">{results.samplesUsed}</span>
                </div>
                <div>
                  <span className="block text-[10px] text-white/40">MODEL</span>
                  <span className="font-mono text-[#f7d24b]">{results.model}</span>
                </div>
              </div>
            </div>
          ) : (
            <div className="flex flex-col items-center justify-center py-10 text-white/40">
              <span className="text-sm font-mono">Run simulation to view probabilistic results</span>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

// Blog Overview Component
function BlogOverview({ onSelectPost }) {
  return (
    <div className="max-w-6xl mx-auto px-4 sm:px-6 md:px-10 py-12">
      <div className="mb-10">
        <h1 className="text-5xl font-serif text-[#f7d24b] mb-3">Blog</h1>
        <p className="text-sm text-white/65 max-w-lg leading-relaxed">
          Research updates, company news, and perspectives from the Eternis team.
        </p>
      </div>

      <div className="border-t border-[#3abc5f]/20 divide-y divide-[#3abc5f]/20">
        {blogPosts.map((post) => (
          <article key={post.id} className="py-8 group cursor-pointer" onClick={() => onSelectPost(post)}>
            <div className="flex flex-wrap gap-2 mb-3">
              {post.tags.map((t, idx) => (
                <span key={idx} className="text-[11px] tracking-wider uppercase text-white/70 border border-white/20 rounded-full px-3 py-0.5">
                  {t}
                </span>
              ))}
            </div>
            <h2 className="text-2xl font-serif text-white leading-tight group-hover:text-[#f7d24b] transition-colors mb-3">
              {post.title}
            </h2>
            <p className="text-sm text-white/65 leading-relaxed max-w-2xl mb-4">
              {post.excerpt}
            </p>
            <div className="text-xs text-white/45 flex items-center gap-2 font-mono">
              <span>{post.author}</span>
              <span>·</span>
              <span>{post.date}</span>
            </div>
          </article>
        ))}
      </div>
    </div>
  );
}

// Article Reader Modal
function ArticleReaderModal({ post, onClose }) {
  return (
    <div className="fixed inset-0 z-50 bg-black/80 backdrop-blur-md flex justify-center items-center p-4 overflow-y-auto custom-scrollbar">
      <div className="bg-[#0f4631] border border-[#3abc5f]/30 rounded-3xl max-w-3xl w-full max-h-[90vh] overflow-y-auto p-6 sm:p-10 relative text-white my-auto animate-fade-up">
        {/* Close Button */}
        <button
          onClick={onClose}
          className="absolute top-6 right-6 text-white/60 hover:text-white bg-white/10 w-9 h-9 rounded-full flex items-center justify-center transition-colors"
        >
          ✕
        </button>

        <div className="flex flex-wrap gap-2 mb-4">
          {post.tags.map((t, i) => (
            <span key={i} className="text-xs text-[#f7d24b] bg-[#f7d24b]/10 border border-[#f7d24b]/30 rounded-full px-3 py-1">
              {t}
            </span>
          ))}
        </div>

        <h1 className="text-4xl sm:text-5xl font-serif text-white mb-4 leading-tight">
          {post.title}
        </h1>

        <div className="text-xs text-white/50 mb-8 border-b border-white/10 pb-4 flex justify-between items-center">
          <span>By {post.author} · {post.date}</span>
          <span className="font-mono text-[#3abc5f]">Read Time: ~4 min</span>
        </div>

        {/* Stats Grid Example */}
        {post.stats && (
          <div className="grid grid-cols-3 gap-3 my-6 p-4 rounded-xl bg-[#3abc5f]/10 border border-[#3abc5f]/20">
            {post.stats.map((s, idx) => (
              <div key={idx} className="text-center">
                <span className="block text-2xl font-serif font-bold text-[#f7d24b]">{s.val}</span>
                <span className="text-[10px] uppercase tracking-wider text-white/60">{s.lbl}</span>
              </div>
            ))}
          </div>
        )}

        <div className="text-sm text-white/80 space-y-4 leading-relaxed font-sans">
          {post.content.map((p, idx) => (
            <p key={idx}>{p}</p>
          ))}
        </div>

        <div className="mt-10 pt-6 border-t border-white/10 flex justify-between items-center">
          <span className="text-xs text-white/40">Eternis AI Research Division</span>
          <button
            onClick={onClose}
            className="gold-pill text-xs font-medium px-5 py-2 rounded-full"
          >
            Close Article
          </button>
        </div>
      </div>
    </div>
  );
}

// Job Details Modal
function JobModal({ job, onClose }) {
  const [applied, setApplied] = useState(false);

  return (
    <div className="fixed inset-0 z-50 bg-black/80 backdrop-blur-md flex justify-center items-center p-4">
      <div className="bg-[#0f4631] border border-[#3abc5f]/30 rounded-3xl max-w-lg w-full p-8 relative text-white animate-fade-up">
        <button onClick={onClose} className="absolute top-5 right-5 text-white/60 hover:text-white bg-white/10 w-8 h-8 rounded-full flex items-center justify-center">✕</button>

        <span className="text-xs text-[#f7d24b] uppercase tracking-widest">{job.team}</span>
        <h2 className="text-3xl font-serif text-white mt-1 mb-2">{job.title}</h2>
        <p className="text-xs text-white/60 mb-6">{job.location} · Full-Time</p>

        <div className="space-y-4 text-xs text-white/80 leading-relaxed mb-6">
          <p><strong>About the role:</strong> {job.description}</p>
          <div>
            <strong>Requirements:</strong>
            <ul className="list-disc list-inside text-white/70 space-y-1 mt-1">
              {job.requirements.map((req, i) => (
                <li key={i}>{req}</li>
              ))}
            </ul>
          </div>
        </div>

        {applied ? (
          <div className="p-4 bg-[#3abc5f]/20 border border-[#3abc5f] rounded-xl text-center text-xs text-[#f7d24b]">
            ✓ Application email template created! Send your CV to contact@eternis.ai
          </div>
        ) : (
          <button
            onClick={() => {
              setApplied(true);
              window.location.href = `mailto:contact@eternis.ai?subject=Application for ${encodeURIComponent(job.title)}`;
            }}
            className="w-full gold-pill text-sm font-medium py-3 rounded-xl"
          >
            Apply for this position →
          </button>
        )}
      </div>
    </div>
  );
}

// Simple Text Modal for Privacy & Terms
function SimpleTextModal({ title, children, onClose }) {
  return (
    <div className="fixed inset-0 z-50 bg-black/80 backdrop-blur-md flex justify-center items-center p-4">
      <div className="bg-[#0f4631] border border-[#3abc5f]/30 rounded-3xl max-w-lg w-full p-8 relative text-white animate-fade-up">
        <button onClick={onClose} className="absolute top-5 right-5 text-white/60 hover:text-white bg-white/10 w-8 h-8 rounded-full flex items-center justify-center">✕</button>
        <h2 className="text-3xl font-serif text-[#f7d24b] mb-4">{title}</h2>
        <div className="text-xs text-white/80 leading-relaxed space-y-3 max-h-[60vh] overflow-y-auto custom-scrollbar pr-2">
          {children}
        </div>
      </div>
    </div>
  );
}

// Data: Blog Posts
const blogPosts = [
  {
    id: 'introducing-eternis',
    title: 'Introducing Eternis',
    tags: ['Vision'],
    excerpt: 'We build coordination systems for a world where humans, digital twins, and autonomous agents all participate in decisions. Forecasting is the foundation. Here\'s what we\'re working on and why.',
    author: 'Eternis Team',
    date: 'April 6, 2026',
    content: [
      'The next wave of intelligent systems will autonomously refine their architectures, optimize prompts, dynamically tune model parameters, and generate code in response to continuous real-world feedback.',
      'We are building adaptive, self-improving agents and the environments in which they interact with humans, to help design the systems needed for a future with safe superintelligence.',
      'Forecasting is not merely about predicting financial metrics; it is about mapping the path-dependent trajectories of human civilization and computational discovery.'
    ]
  },
  {
    id: 'towards-sota-forecasting-llms',
    title: 'Towards SOTA Forecasting LLMs',
    tags: ['Research', 'Forecasting'],
    excerpt: 'We trained an 8B-parameter model that surpasses all published baselines on open-ended forecasting, including models 10-15x larger. Here\'s how context building, calibrated reward design, and modified GRPO got us there.',
    author: 'Eternis',
    date: 'March 24, 2026',
    stats: [
      { val: '8B', lbl: 'Params' },
      { val: '+47%', lbl: 'Acc Gain' },
      { val: '0.082', lbl: 'Brier' }
    ],
    content: [
      'Standard language model post-training tends to favor fluent verbosity over well-calibrated confidence intervals. In forecasting, overconfidence is catastrophic.',
      'To address this, we developed a modified Group Relative Policy Optimization (GRPO) framework that directly penalizes probability calibration errors using logarithmic scoring rules.',
      'Our 8B model achieves state-of-the-art results on open-ended prediction benchmarks, surpassing models over 10x its size while maintaining lightweight latency for real-time decision products.'
    ]
  },
  {
    id: 'hard-examples-are-all-you-need',
    title: 'Hard Examples Are All You Need',
    tags: ['Research'],
    excerpt: 'Maximizing GRPO post-training under annotation budgets. Focusing on the hardest examples yields up to 47% performance gains.',
    author: 'Eternis Team',
    date: 'March 22, 2026',
    content: [
      'In high-stakes reasoning domains, uniform sampling of training queries leads to diminishing returns.',
      'By filtering training datasets down to ambiguous, high-variance epistemic scenarios, we observe significantly steeper learning curves during reinforcement learning fine-tuning.'
    ]
  }
];

// Data: Open Job Positions
const jobOpenings = [
  {
    id: 'job-1',
    title: 'Frontier AI Research Scientist (Forecasting & RL)',
    location: 'San Francisco, CA / Remote',
    team: 'Research',
    description: 'Lead post-training research for calibrated world models, multi-agent reinforcement learning, and GRPO scaling.',
    requirements: ['Strong background in RL post-training (PPO, GRPO, DPO)', 'Published work in ML conferences or competitive forecasting benchmarks', 'Fluency with PyTorch & distributed training clusters']
  },
  {
    id: 'job-[#2]',
    id: 'job-2',
    title: 'Distributed Systems & TEE Engineer',
    location: 'San Francisco, CA',
    team: 'Engineering',
    description: 'Build confidential compute infrastructure in Trusted Execution Environments for our Silo private AI hardware and cloud services.',
    requirements: ['Experience with Rust/C++ and confidential computing (Intel SGX, AMD SEV)', 'Strong understanding of cryptography, enclave attestation, and OS internals']
  },
  {
    id: 'job-3',
    title: 'Product Engineer - Axion Decision Platform',
    location: 'San Francisco, CA / Remote',
    team: 'Product',
    description: 'Design and implement high-performance interfaces for multi-agent reasoning, probabilistic visualization, and decision workflows.',
    requirements: ['Mastery of modern Web application stacks (React, TypeScript, Canvas/WebGL)', 'Obsession with fast, beautiful, data-dense interfaces']
  }
];

// Mount Application to Root DOM
ReactDOM.render(<App />, document.getElementById('root'));
