function Page() {
  const principles = [
    { title: "Transparency by default", body: "Bid logic, fees, and inventory are visible. If you can't see it, you can't trust it, and we don't want you to have to." },
    { title: "Measurement over claims", body: "We'd rather show what actually worked than make a case for what might have. Incrementality and hold-outs are table stakes." },
    { title: "One platform, real integration", body: "Shared data layer, shared identity, shared attribution. Not six products with the same logo on a pricing page." },
    { title: "Built, not acquired", body: "The stack is one codebase. No duct-taped acquisitions, no separate logins, no incompatible data models." },
    { title: "Operators at the table", body: "The people building this ran performance teams. The product decisions reflect operator priorities, not procurement checklists." },
    { title: "Useful by Tuesday", body: "If a feature needs a six-week onboarding before it's useful, we rebuild it. Teams should get value on day one." },
  ];
  const operatorProblems = [
    { title: "Attribution arguments between teams", quote: "We'd spend more hours reconciling which platform got credit than actually running campaigns." },
    { title: "Vendor sprawl eating the margin", quote: "I counted 14 logins across the performance stack. Four were for reporting alone." },
    { title: "Black-box bidding that can't be audited", quote: "When the DSP said 'our AI is optimizing,' we had no way to verify or correct it." },
    { title: "Fraud caught after the fact", quote: "We'd find a fraud spike in the monthly report. The budget was already gone." },
  ];

  return (
    <>
      <Header basePath="./"/>
      <PageHero
        crumb="Company"
        eyebrow="Company · About"
        title="We're building the platform"
        italic="we wanted when we ran performance teams."
        lead="Auctera is a coordinated performance stack with the transparency, measurement, and operator-friendly defaults that most of the category got wrong on purpose. We're built, not bolted together."
        primary={{label:"See the platform", href:"platform-overview"}}
        secondary={{label:"Talk to us", href:"contact"}}
        signals={[["6","Integrated products"],["1","Codebase"],["0","Acquired platforms"],["3","Regions"]]}
        aside={<TeamConstellation/>}
        basePath="./"
      />

      <section className="section">
        <div className="container">
          <SectionHeader eyebrow="Why we built this" title="Operator problems." italic="Operator solutions." lead="The patterns below are the actual reasons Auctera exists. Each came from a real performance team that got tired of the same workaround." />
          <QuoteProblems items={operatorProblems}/>
        </div>
      </section>

      <section className="section" style={{background:"var(--paper-2)"}}>
        <div className="container">
          <SectionHeader eyebrow="How we work" title="Six principles" italic="that shape the product."/>
          <PrincipleGrid principles={principles}/>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <div className="blockheader reveal">
            <div className="eyebrow eyebrow-dot">The company</div>
            <h2 className="display-2">Distributed. <span className="h-italic">Opinionated.</span></h2>
            <p className="lead">A small team spanning Americas, EMEA, and APAC. We ship weekly, write more than we meet, and prefer the work to speak for the brand.</p>
          </div>
          <div className="grid grid-3 reveal-stagger">
            {[
              {t: "Engineering", b: "Distributed product, platform, ML, and data-infrastructure teams. One codebase, shared on-call."},
              {t: "Performance", b: "Former operators in-house. Every customer-facing role spent time running performance budgets on the other side."},
              {t: "Partnerships", b: "Publishers, agencies, and exchanges. A network of long-term supply and demand relationships, not a revolving door."},
            ].map((g,i)=>(
              <div key={i} className="card" style={{padding:"clamp(28px,3vw,40px)"}}>
                <div className="mono" style={{marginBottom:12, color:"var(--ochre-deep)"}}>0{i+1} · TEAM</div>
                <h4 style={{fontFamily:"var(--font-display)", fontSize:26, margin:"0 0 14px", lineHeight:1.15}}>{g.t}</h4>
                <p style={{color:"var(--muted)", margin:0, fontSize:15, lineHeight:1.55}}>{g.b}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <FinalCTASection
        title="Want to see"
        italic="what we're building?"
        body="The product is the argument. Start with a walkthrough on your real use case, not a demo deck."
        primary={{label:"Talk to our team", href:"contact"}}
        secondary={{label:"View the platform", href:"platform-overview"}}
      />
      <Footer basePath="./"/>
    </>
  );
}
ReactDOM.createRoot(document.getElementById("root")).render(<Page/>);