function Page() {
  useReveal();

  const featured = {
    href: "blog-source-of-truth",
    category: "Measurement & Attribution",
    title: "Why performance marketing needs",
    italic: "one source of truth.",
    lead: "Most teams don't have a data shortage. They have a trust shortage. When DSP, affiliate, retargeting, and reporting all show different numbers, every budget decision gets weaker.",
    date: "Apr 16, 2026",
    readTime: "9 min read",
  };

  const posts = [
    {
      href: "blog-retargeting-without-waste",
      category: "Retargeting",
      title: "Retargeting without wasted spend",
      desc: "Retargeting works best when it's based on intent, timing, and customer stage, not just repeated exposure. The teams that win don't chase every visitor; they re-engage the right ones.",
      date: "Apr 09, 2026",
      readTime: "10 min read",
      tags: ["Retargeting","Audience","Creative"],
    },
    {
      href: "blog-affiliate-without-losing-control",
      category: "Affiliate Marketing",
      title: "Affiliate growth without losing control",
      desc: "Recruitment adds partners. Control turns those partners into a reliable growth channel. How to scale affiliate while protecting brand safety, attribution, and offer economics.",
      date: "Apr 02, 2026",
      readTime: "11 min read",
      tags: ["Affiliate","Brand Safety","Offers"],
    },
    {
      href: "blog-brand-safety-beyond-blocklists",
      category: "Brand Safety",
      title: "Brand safety beyond blocklists",
      desc: "Blocklists are only the starting point. Real brand safety means placement quality, partner governance, fraud signals, and timely visibility: protecting reputation and performance together.",
      date: "Mar 26, 2026",
      readTime: "9 min read",
      tags: ["Brand Safety","Programmatic","Fraud"],
    },
    {
      href: "blog-programmatic-without-the-black-box",
      category: "Programmatic Advertising",
      title: "Programmatic advertising without the black box",
      desc: "Automation is not the problem. Automation without transparency is. What buyers actually need to see across audiences, placements, spend, reporting, and attribution.",
      date: "Mar 19, 2026",
      readTime: "10 min read",
      tags: ["Programmatic","DSP","Reporting"],
    },
    {
      href: "blog-from-seo-to-aeo",
      category: "Answer Engine Optimization",
      title: "From SEO to AEO: AI search visibility for performance marketers",
      desc: "Search visibility is expanding from rankings to AI-generated answers, citations, and brand mentions. AEO is not about gaming AI: it's about making your expertise easier to find, verify, and cite.",
      date: "Mar 12, 2026",
      readTime: "11 min read",
      tags: ["AEO","SEO","AI Search"],
    },
  ];

  const allPosts = [featured, ...posts];

  return (
    <>
      <Header basePath="./"/>

      {/* Topic browse strip: first thing on the page */}
      <section className="page-hero" style={{paddingBottom: 0}}>
        <div className="container">
          <div className="crumb reveal" style={{marginBottom: 24}}>
            <a href="../">Auctera</a><span>›</span><span>Blog</span>
          </div>
          <div className="reveal" style={{display:"flex", justifyContent:"space-between", alignItems:"end", gap: 32, flexWrap:"wrap", marginBottom: 8}}>
            <div>
              <div className="eyebrow eyebrow-dot" style={{marginBottom: 18}}>Blog</div>
              <h1 className="display-2" style={{margin: 0}}>Articles &amp; <span className="h-italic">insights.</span></h1>
            </div>
            <div style={{flex: "1 1 420px", maxWidth: 640}}>
              <div className="mono" style={{marginBottom: 14, color:"var(--muted-2)"}}>BROWSE BY TOPIC</div>
              <div style={{display:"flex", flexWrap:"wrap", gap:8}}>
                {["All","Measurement","Retargeting","Affiliate","Brand Safety","Programmatic","AEO","Audience","Creative","Offers"].map((t,i)=>(
                  <span key={i} style={{
                    padding:"8px 14px", border:"1px solid var(--line-strong)", borderRadius:999,
                    fontSize:13, background: i===0?"var(--ink)":"var(--paper)",
                    color: i===0?"var(--paper)":"var(--ink-2)",
                    cursor: "default"
                  }}>{t}</span>
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Featured */}
      <section className="section">
        <div className="container">
          <div className="mono reveal" style={{marginBottom:24, color:"var(--ochre-deep)"}}>
            ◆ FEATURED · LATEST
          </div>
          <a href={featured.href} className="blog-feature reveal" style={{textDecoration:"none", color:"inherit"}}>
            <div>
              <span className="article-tag" style={{marginBottom: 24, display:"inline-flex"}}>
                <span className="tag-dot"/>{featured.category}
              </span>
              <h2 className="display-2" style={{marginBottom: 24, marginTop: 0}}>{featured.title} <span className="h-italic">{featured.italic}</span></h2>
              <p className="lead" style={{marginBottom: 28, maxWidth:"50ch"}}>{featured.lead}</p>
              <div style={{display:"flex", alignItems:"center", gap: 24, fontFamily:"var(--font-mono)", fontSize:11, letterSpacing:"0.16em", textTransform:"uppercase", color:"var(--muted)"}}>
                <span>{featured.date}</span>
                <span style={{width:4, height:4, borderRadius:"50%", background:"var(--line-strong)"}}/>
                <span>{featured.readTime}</span>
                <span style={{flex:1, height:1, background:"var(--line)", maxWidth:80}}/>
                <span style={{color:"var(--ink)", display:"inline-flex", alignItems:"center", gap:8}}>
                  Read article <Arrow/>
                </span>
              </div>
            </div>
            <div className="feature-art">
              <TruthLedger/>
            </div>
          </a>
        </div>
      </section>

      {/* List */}
      <section className="section" style={{paddingTop: 0}}>
        <div className="container">
          <div className="reveal" style={{display:"flex", justifyContent:"space-between", alignItems:"baseline", marginBottom: 8}}>
            <h3 className="display-3" style={{margin:0}}>Recent <span className="h-italic">articles.</span></h3>
            <span className="mono" style={{color:"var(--muted-2)"}}>{String(allPosts.length).padStart(2,"0")} ARTICLES</span>
          </div>
          <div className="blog-list reveal-stagger">
            {posts.map((p, i) => (
              <a key={i} href={p.href} className="blog-list-item" style={{textDecoration:"none"}}>
                <div className="bli-num">{String(i+2).padStart(2,"0")}</div>
                <div>
                  <span className="bli-cat">{p.category}</span>
                  <h4 className="bli-title" style={{margin:"8px 0 12px"}}>{p.title}</h4>
                  <p className="bli-desc">{p.desc}</p>
                  <div style={{display:"flex", flexWrap:"wrap", gap:6, marginTop:18}}>
                    {p.tags.map((t,j)=>(
                      <span key={j} style={{
                        fontFamily:"var(--font-mono)", fontSize:10, letterSpacing:"0.12em",
                        textTransform:"uppercase", color:"var(--muted)",
                        padding:"4px 8px", border:"1px solid var(--line)", borderRadius: 4
                      }}>{t}</span>
                    ))}
                  </div>
                </div>
                <div className="bli-meta">
                  <span>{p.date}</span>
                  <span>{p.readTime}</span>
                  <span style={{color:"var(--ochre-deep)"}}>READ →</span>
                </div>
              </a>
            ))}
          </div>
        </div>
      </section>

      {/* Newsletter */}
      <section className="section-tight" style={{paddingBottom: "clamp(72px, 10vw, 140px)"}}>
        <div className="container">
          <div className="cta-dark reveal" style={{padding:"clamp(48px,5vw,80px)"}}>
            <div style={{display:"grid", gridTemplateColumns:"1fr 1fr", gap:64, alignItems:"end"}}>
              <div>
                <div className="mono" style={{color:"var(--ochre)", marginBottom:18}}>◆ THE BRIEFING</div>
                <h2 className="display-3" style={{color:"var(--paper)", margin:"0 0 20px", maxWidth:"16ch"}}>Operator-grade performance writing, <span className="h-italic" style={{color:"var(--ochre)"}}>monthly.</span></h2>
                <p style={{color:"rgba(246,242,236,0.72)", margin:0, maxWidth:"48ch"}}>One article per month. Real teardowns of how performance marketing actually works in 2026: measurement, attribution, partner economics, fraud, and the systems behind them. No fluff, no recap roundups.</p>
              </div>
              <form onSubmit={(e)=>e.preventDefault()} style={{display:"grid", gap:16}}>
                <label className="mono" style={{color:"rgba(246,242,236,0.55)"}}>WORK EMAIL</label>
                <div style={{display:"flex", gap:12, flexWrap:"wrap"}}>
                  <input type="email" placeholder="you@company.com" required style={{
                    flex:"1 1 240px",
                    padding:"16px 18px",
                    background:"transparent", color:"var(--paper)",
                    border:"1px solid rgba(246,242,236,0.25)", borderRadius:10,
                    fontFamily:"var(--font-sans)", fontSize:15, outline:"none"
                  }}/>
                  <button type="submit" className="btn btn-ochre">Subscribe <Arrow/></button>
                </div>
                <p className="mono" style={{color:"rgba(246,242,236,0.45)", marginTop:4}}>NO SPAM · UNSUBSCRIBE WITH ONE CLICK</p>
              </form>
            </div>
          </div>
        </div>
      </section>

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

ReactDOM.createRoot(document.getElementById("root")).render(<Page/>);