const pressReleases = [
  {
    id: 1,
    tag: "PRESS RELEASE - April 24, 2026",
    title: "Auctera Announces Unified Retargeting Cloud",
    excerpt: "The new platform allows advertisers to seamlessly connect DSP acquisition with intelligent post-purchase retention strategies.",
    content: "SAN FRANCISCO, CA - Auctera today announced the general availability of the Auctera Retargeting Cloud, a new module that natively integrates with the company's flagship DSP and Affiliate Network products.\n\nHistorically, advertisers have been forced to use disconnected vendors for initial customer acquisition and subsequent retargeting. This fragmentation often leads to severe ad waste, as retargeting engines continue to serve impressions to users who have already converted via a different channel.\n\n\"The core issue in performance marketing isn't a lack of data; it's a lack of shared data,\" said Auctera's Head of Product. \"Because our Retargeting Cloud shares a single data layer with our DSP, the moment a user converts, they are instantly suppressed across all retargeting campaigns globally. This eliminates up to 30% of standard ad waste.\"\n\nThe Retargeting Cloud is available immediately to all enterprise customers."
  },
  {
    id: 2,
    tag: "COMPANY NEWS - March 12, 2026",
    title: "Auctera Achieves SOC 2 Type II Certification",
    excerpt: "Independent auditors have verified that Auctera's information security practices, policies, and procedures meet the stringent SOC 2 Type II standards.",
    content: "LONDON, UK - Auctera, the unified performance marketing platform, announced today that it has successfully completed its Service Organization Control (SOC) 2 Type II audit. The audit, conducted by an independent accounting firm, verifies that Auctera's information security practices, policies, procedures, and operations meet the rigorous SOC 2 standards for security, availability, and confidentiality.\n\n\"As our platform processes billions of bid requests and handles highly sensitive conversion data for global brands, security cannot be an afterthought,\" said the VP of Engineering. \"Achieving SOC 2 Type II compliance demonstrates our unwavering commitment to protecting our clients' data at the highest possible tier.\"\n\nThe certification process involved a months-long rigorous examination of Auctera's infrastructure, including its server-to-server tracking APIs and its programmatic bidding engine.\n\nAuctera's SOC 2 Type II report is available to customers and prospective clients under NDA upon request."
  },
  {
    id: 3,
    tag: "INDUSTRY COVERAGE - February 05, 2026",
    title: "How Auctera is Solving the Multi-Touch Attribution Puzzle",
    excerpt: "A deep dive into how Auctera's proprietary shared data layer is eliminating duplicate CPA payouts across affiliate and programmatic channels.",
    content: "NEW YORK, NY - For years, the holy grail of digital advertising has been accurate Multi-Touch Attribution (MTA). But as third-party cookies crumble and walled gardens build higher fences, MTA has felt further away than ever.\n\nEnter Auctera. Unlike traditional attribution vendors that attempt to stitch together data retroactively via API exports, Auctera is fundamentally rebuilding the transaction layer.\n\nBy operating the DSP, the Affiliate Network, and the tracking infrastructure under a single unified roof, Auctera doesn't have to guess which channel drove the sale. It inherently knows.\n\n\"If a user clicks an affiliate link, and then two hours later is served a programmatic display ad from our DSP, we don't charge the advertiser twice when the user finally buys,\" explains Auctera's CEO. \"Our system uses real-time time-decay models to fairly attribute the credit without duplicate payouts. It's saving our pilot customers millions in redundant acquisition costs.\"\n\nAuctera continues to onboard high-volume D2C and Fintech brands to its closed beta program."
  }
];

function Page() {
  useReveal();
  const [selectedPR, setSelectedPR] = React.useState(null);
  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 }}>
            Press &<br />
            <span className="text-muted">Media.</span>
          </h1>
          <p className="lead reveal" style={{ maxWidth: "55ch" }}>
            The latest news, announcements, and media assets from Auctera. For press inquiries, please contact our media relations team.
          </p>
        </div>
      </section>

      <section style={{ padding: "var(--section-space) 0" }}>
        <div className="container">
          <SectionHeader eyebrow="Brand Assets" title="Press kit." italic="Download assets." />

          <div className="reveal" style={{ marginTop: 64, padding: 48, background: "var(--ochre)", color: "var(--ink)", borderRadius: 16, display: "flex", justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", gap: 24 }}>
            <div>
              <h3 className="display-4" style={{ margin: "0 0 8px" }}>Official Fact Sheet</h3>
              <p style={{ margin: 0, fontSize: 16, maxWidth: 500 }}>Download the comprehensive Auctera company overview, product details, differentiators, and compliance certifications.</p>
            </div>
            <a href="../uploads/Auctera_Press_Kit.pdf" download className="btn" style={{ background: "var(--ink)", color: "var(--paper)", borderColor: "var(--ink)", padding: "16px 32px", fontSize: 16 }}>
              Download PDF (1.2MB)
            </a>
          </div>

          <div className="grid-2" style={{ marginTop: 32, gap: 32 }}>
            <div className="reveal" style={{ padding: 48, background: "var(--surface)", border: "1px solid var(--line)", borderRadius: 16, textAlign: "center", display: "flex", flexDirection: "column", alignItems: "center" }}>
              <img src="../uploads/auctera_logo.png" alt="Auctera Dark Logo" style={{ height: 40, marginBottom: 32 }} />
              <h4 style={{ marginBottom: 8 }}>Standard Logo (Dark)</h4>
              <p style={{ color: "var(--ink-2)", fontSize: 14, marginBottom: 24 }}>For use on light backgrounds.</p>
              <a href="../uploads/auctera_logo.png" download className="btn btn-ghost">Download PNG</a>
            </div>

            <div className="reveal" style={{ padding: 48, background: "var(--ink)", border: "1px solid var(--ink)", borderRadius: 16, textAlign: "center", display: "flex", flexDirection: "column", alignItems: "center" }}>
              <img src="../uploads/auctera_logo_light.png" alt="Auctera Light Logo" style={{ height: 40, marginBottom: 32, filter: "brightness(0) invert(1)" }} onError={(e) => { e.target.src = "../uploads/auctera_logo.png"; e.target.style.filter = "brightness(0) invert(1)"; }} />
              <h4 style={{ marginBottom: 8, color: "var(--paper)" }}>Inverted Logo (Light)</h4>
              <p style={{ color: "rgba(246,242,236,0.6)", fontSize: 14, marginBottom: 24 }}>For use on dark backgrounds.</p>
              <a href="../uploads/auctera_logo_light.png" download className="btn" style={{ background: "var(--paper)", color: "var(--ink)", borderColor: "var(--paper)" }}>Download PNG</a>
            </div>
          </div>
        </div>
      </section>

      <section style={{ padding: "var(--section-space) 0", background: "var(--surface)" }}>
        <div className="container">
          <SectionHeader eyebrow="Brand Identity" title="Brand guidelines." italic="Design rules." />

          <div className="grid-2" style={{ marginTop: 64, gap: 48 }}>
            <div className="reveal">
              <h3 style={{ fontSize: 24, marginBottom: 24 }}>Color Palette</h3>
              <p style={{ color: "var(--ink-2)", marginBottom: 32 }}>Our core palette is intentionally minimal to allow the data and product UI to stand out. Please use these exact hex values.</p>

              <div style={{ display: "grid", gap: 16 }}>
                <div style={{ display: "flex", alignItems: "center", gap: 16 }}>
                  <div style={{ width: 64, height: 64, background: "#0b0c10", borderRadius: 8 }}></div>
                  <div>
                    <div style={{ fontWeight: 600 }}>Auctera Ink</div>
                    <div style={{ fontFamily: "var(--font-mono)", fontSize: 13, color: "var(--ink-2)" }}>HEX #0b0c10</div>
                  </div>
                </div>
                <div style={{ display: "flex", alignItems: "center", gap: 16 }}>
                  <div style={{ width: 64, height: 64, background: "#f6f2ec", border: "1px solid var(--line)", borderRadius: 8 }}></div>
                  <div>
                    <div style={{ fontWeight: 600 }}>Auctera Paper</div>
                    <div style={{ fontFamily: "var(--font-mono)", fontSize: 13, color: "var(--ink-2)" }}>HEX #f6f2ec</div>
                  </div>
                </div>
                <div style={{ display: "flex", alignItems: "center", gap: 16 }}>
                  <div style={{ width: 64, height: 64, background: "#c9aa71", borderRadius: 8 }}></div>
                  <div>
                    <div style={{ fontWeight: 600 }}>Auctera Ochre</div>
                    <div style={{ fontFamily: "var(--font-mono)", fontSize: 13, color: "var(--ink-2)" }}>HEX #c9aa71</div>
                  </div>
                </div>
              </div>
            </div>

            <div className="reveal">
              <h3 style={{ fontSize: 24, marginBottom: 24 }}>Typography</h3>
              <p style={{ color: "var(--ink-2)", marginBottom: 32 }}>Auctera relies on two primary typefaces. Instrument Serif for elegant editorial displays, and Inter Tight for utility.</p>

              <div style={{ padding: 32, border: "1px solid var(--line)", borderRadius: 12, marginBottom: 16 }}>
                <div style={{ fontFamily: "var(--font-display)", fontSize: 40, lineHeight: 1, marginBottom: 8 }}>Instrument Serif</div>
                <div style={{ color: "var(--ink-2)", fontSize: 14 }}>Primary Display & Headers (Italicized for emphasis)</div>
              </div>

              <div style={{ padding: 32, border: "1px solid var(--line)", borderRadius: 12 }}>
                <div style={{ fontFamily: "var(--font-sans)", fontSize: 24, fontWeight: 500, marginBottom: 8 }}>Inter Tight</div>
                <div style={{ color: "var(--ink-2)", fontSize: 14 }}>Body Copy, Utility, & UI Elements (Weights: 300, 400, 500, 600)</div>
              </div>
            </div>
          </div>

          <div className="reveal" style={{ marginTop: 64 }}>
            <h3 style={{ fontSize: 24, marginBottom: 24 }}>Clear Space & Usage</h3>
            <div style={{ display: "flex", flexWrap: "wrap", gap: 32, padding: 48, background: "var(--paper)", border: "1px dashed var(--line-strong)", borderRadius: 16 }}>
              <div style={{ flex: 1, minWidth: 250 }}>
                <h4 style={{ marginBottom: 8 }}>Logo Clear Space</h4>
                <p style={{ color: "var(--ink-2)", fontSize: 14 }}>Always maintain a minimum clear space around the logo equal to the height of the 'a' in Auctera. Do not crowd the logo with other elements.</p>
              </div>
              <div style={{ flex: 1, minWidth: 250 }}>
                <h4 style={{ marginBottom: 8 }}>Logo Misuse</h4>
                <p style={{ color: "var(--ink-2)", fontSize: 14 }}>Do not stretch, rotate, add drop shadows, or change the color of the logo. Only use the provided official brand assets.</p>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section style={{ padding: "var(--section-space) 0" }}>
        <div className="container">
          <SectionHeader eyebrow="Latest News" title="In the news." italic="Company updates." />

          <div style={{ marginTop: 64, maxWidth: 800 }}>
            {pressReleases.map(pr => (
              <button key={pr.id} onClick={(e) => { e.preventDefault(); setSelectedPR(pr); }} className="reveal" style={{display: "block", width: "100%", textAlign: "left", padding: "32px 0", border: "none", borderBottom: "1px solid var(--line)", background: "transparent", color: "inherit", cursor: "pointer"}}>
                <div style={{fontFamily: "var(--font-mono)", fontSize: 13, color: "var(--ochre)", marginBottom: 8}}>{pr.tag}</div>
                <h3 style={{fontSize: 24, marginBottom: 16}}>{pr.title}</h3>
                <p style={{color: "var(--ink-2)", margin: 0, lineHeight: 1.6}}>{pr.excerpt}</p>
              </button>
            ))}
          </div>
        </div>
      </section>

      <section style={{ padding: "var(--section-space) 0", background: "var(--surface)" }}>
        <div className="container" style={{ textAlign: "center", maxWidth: 600 }}>
          <h2 className="display-4 reveal" style={{ marginBottom: 16 }}>Media Contacts</h2>
          <p className="lead reveal" style={{ marginBottom: 32, color: "var(--ink-2)" }}>
            Members of the press can reach our media relations team at the email below. We typically respond within 24 hours.
          </p>
          <a href="mailto:press@auctera.com" className="btn reveal" style={{ fontSize: 18, padding: "16px 32px" }}>press@auctera.com</a>
        </div>
      </section>

      {selectedPR && (
        <div 
          onClick={() => setSelectedPR(null)}
          style={{position: "fixed", top: 0, left: 0, right: 0, bottom: 0, background: "rgba(11, 12, 16, 0.8)", backdropFilter: "blur(8px)", zIndex: 9999, display: "flex", justifyContent: "center", alignItems: "center", padding: 24}}
        >
          <div 
            onClick={(e) => e.stopPropagation()}
            style={{background: "var(--paper)", width: "100%", maxWidth: 800, maxHeight: "90vh", borderRadius: 16, overflowY: "auto", position: "relative", padding: "clamp(32px, 5vw, 64px)"}}
          >
            <button onClick={() => setSelectedPR(null)} style={{position: "absolute", top: 24, right: 24, width: 40, height: 40, display: "flex", alignItems: "center", justifyContent: "center", background: "var(--paper-2)", border: "1px solid var(--line)", borderRadius: "50%", fontSize: 24, cursor: "pointer", color: "var(--ink)"}}>×</button>
            <div style={{fontFamily: "var(--font-mono)", fontSize: 13, color: "var(--ochre)", marginBottom: 16}}>{selectedPR.tag}</div>
            <h2 className="display-4" style={{marginBottom: 32, fontSize: "clamp(32px, 4vw, 48px)"}}>{selectedPR.title}</h2>
            <div style={{color: "var(--ink)", lineHeight: 1.8, fontSize: 16}}>
              {selectedPR.content.split('\n').map((paragraph, idx) => (
                paragraph ? <p key={idx} style={{marginBottom: 24}}>{paragraph}</p> : null
              ))}
            </div>
            <div style={{marginTop: 48, paddingTop: 32, borderTop: "1px solid var(--line)", textAlign: "center"}}>
              <button onClick={() => setSelectedPR(null)} className="btn btn-ghost">Close Article</button>
            </div>
          </div>
        </div>
      )}

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

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