function Page() {
  useReveal();
  return (
    <>
      <Header basePath="./"/>
      
      <section className="page-hero">
        <div className="container">
          <div className="crumb reveal" style={{marginBottom: 24}}>
            <a href="../index">Auctera</a>
            <span>›</span>
            <span>Company</span>
          </div>
          <h1 className="display-1 reveal" style={{marginBottom: 24}}>
            Build the engine.<br />
            <span className="text-muted">Trade the globe.</span>
          </h1>
          <p className="lead reveal" style={{maxWidth: "55ch"}}>
            We are building the unified performance marketing platform. No politics, no red tape. Just elite engineers, data scientists, and traders solving hard problems in real time.
          </p>
        </div>
      </section>

      <section style={{padding: "var(--section-space) 0"}}>
        <div className="container">
          <SectionHeader eyebrow="Our Culture" title="How we operate." italic="Fast and focused." />
          
          <div className="grid-3" style={{marginTop: 64}}>
            <div className="reveal">
              <div style={{fontFamily: "var(--font-mono)", color: "var(--ochre)", marginBottom: 16, fontSize: 13}}>01 / REMOTE-FIRST</div>
              <h3 style={{fontSize: 24, marginBottom: 16}}>Work from anywhere.</h3>
              <p style={{color: "var(--ink-2)", lineHeight: 1.6}}>We hire the best talent globally. We don't care where your desk is, as long as you have a stable connection and ship great work.</p>
            </div>
            <div className="reveal" style={{transitionDelay: "100ms"}}>
              <div style={{fontFamily: "var(--font-mono)", color: "var(--ochre)", marginBottom: 16, fontSize: 13}}>02 / OWNERSHIP</div>
              <h3 style={{fontSize: 24, marginBottom: 16}}>Act like an owner.</h3>
              <p style={{color: "var(--ink-2)", lineHeight: 1.6}}>No top-down micro-management. If you see a problem in the bidding logic or the UI, you own the solution from end to end.</p>
            </div>
            <div className="reveal" style={{transitionDelay: "200ms"}}>
              <div style={{fontFamily: "var(--font-mono)", color: "var(--ochre)", marginBottom: 16, fontSize: 13}}>03 / ASYNC DEFAULT</div>
              <h3 style={{fontSize: 24, marginBottom: 16}}>Fewer meetings.</h3>
              <p style={{color: "var(--ink-2)", lineHeight: 1.6}}>We respect your flow state. We use written memos and async communication to keep calendars clear for deep work.</p>
            </div>
          </div>
        </div>
      </section>

      <section style={{padding: "var(--section-space) 0", background: "var(--surface)"}}>
        <div className="container">
          <SectionHeader eyebrow="Open Roles" title="Join the team." lead="We're always looking for exceptional talent. If you don't see a role that fits, reach out anyway." />
          
          <div style={{marginTop: 64, maxWidth: 800, margin: "64px auto 0"}}>
            <div className="reveal" style={{background: "var(--paper)", border: "1px solid var(--line)", borderRadius: 12, padding: 32, marginBottom: 16, display: "flex", justifyContent: "space-between", alignItems: "center"}}>
              <div>
                <h4 style={{fontSize: 20, marginBottom: 8}}>Senior Full Stack Engineer</h4>
                <p style={{color: "var(--ink-2)", margin: 0, fontSize: 15}}>Engineering · Remote (US/EU)</p>
              </div>
              <a href="contact" className="btn btn-ghost">Apply</a>
            </div>

            <div className="reveal" style={{background: "var(--paper)", border: "1px solid var(--line)", borderRadius: 12, padding: 32, marginBottom: 16, display: "flex", justifyContent: "space-between", alignItems: "center"}}>
              <div>
                <h4 style={{fontSize: 20, marginBottom: 8}}>Performance Trader (Programmatic)</h4>
                <p style={{color: "var(--ink-2)", margin: 0, fontSize: 15}}>Media Buying · Remote (Global)</p>
              </div>
              <a href="contact" className="btn btn-ghost">Apply</a>
            </div>

            <div className="reveal" style={{background: "var(--paper)", border: "1px solid var(--line)", borderRadius: 12, padding: 32, marginBottom: 16, display: "flex", justifyContent: "space-between", alignItems: "center"}}>
              <div>
                <h4 style={{fontSize: 20, marginBottom: 8}}>Account Executive, Mid-Market</h4>
                <p style={{color: "var(--ink-2)", margin: 0, fontSize: 15}}>Sales · Remote (US)</p>
              </div>
              <a href="contact" className="btn btn-ghost">Apply</a>
            </div>
            
            <div className="reveal" style={{marginTop: 40, textAlign: "center"}}>
              <p style={{color: "var(--ink-2)", marginBottom: 16}}>Don't see your perfect role?</p>
              <a href="contact" className="btn btn-ghost">General Application</a>
            </div>
          </div>
        </div>
      </section>

      <Footer basePath="./"/>
    </>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Page />);