// AICRO · Lerner Associates · May 2026
// Recognition + analytical sample microsite for Ben Lerner.
// Built on the canonical AICRO design system (styles.css + styles-v2.css).
// No CTA. Operator-to-operator tone. The under-quote joke runs as the spine.

const { useState, useEffect, useRef, useMemo, Fragment } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "addressee": "Ben Lerner",
  "darkHero": false
}/*EDITMODE-END*/;

// ─── Logomark ─────────────────────────────────────
function Logomark({ size = 28 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 32 32" fill="none" style={{display:"inline-block"}}>
      <rect width="32" height="32" rx="7" fill="#21A8F2"/>
      <text x="16" y="22" textAnchor="middle" fontFamily="Montserrat, Inter, sans-serif" fontWeight="800" fontSize="18" fill="#fff" letterSpacing="-0.5">A</text>
    </svg>
  );
}

// ─── Nav ─────────────────────────────────────
function Nav() {
  return (
    <nav className="nav">
      <div className="wrap nav-inner">
        <div className="nav-left">
          <a href="#" className="nav-logo">
            <span className="nav-logo-text">AICRO</span>
            <span className="nav-tag">For Ben Lerner · May 2026</span>
          </a>
          <div className="nav-links" style={{display:"flex"}}>
            <a href="#worth-knowing">Worth knowing</a>
            <a href="#this-week">This week</a>
            <a href="#pattern">Pattern</a>
            <a href="#lens">Lens</a>
          </div>
        </div>
        <div className="nav-cta">
          <span style={{fontSize:11,fontFamily:"'JetBrains Mono',monospace",letterSpacing:"0.08em",color:"var(--slate-500)",textTransform:"uppercase"}}>operator → operator</span>
        </div>
      </div>
    </nav>
  );
}

// ─── Hero ─────────────────────────────────────
function Hero() {
  return (
    <section className="hero light">
      <div className="hero-grid-bg"></div>
      <div className="wrap hero-content">
        <div className="hero-pill">
          <span className="dot"></span>
          <span>For Ben Lerner · Lerner Associates · May 2026</span>
        </div>
        <h1 style={{maxWidth:1100, textWrap:"balance"}}>
          Ben, you under-quoted yourself.<br/>
          <span style={{position:"relative",display:"inline-block"}}>
            <span style={{textDecoration:"line-through",textDecorationColor:"#21A8F2",textDecorationThickness:3,opacity:0.55,marginRight:14}}>13+ deals.</span>
          </span>
          <span style={{color:"#21A8F2"}}>We counted again. The floor is higher.</span>
        </h1>
        <p className="lead" style={{marginTop:24,maxWidth:920,color:"var(--slate-700)"}}>
          We&rsquo;re an operator-built revenue system that ran a Q2 2026 PropTech deal-readiness scan and noticed your post on the way through. You modestly listed 13+. Counting only what&rsquo;s public, we got to a higher floor, and we know we&rsquo;re still missing some. So this page is two things at once. A recognition note, because the team you&rsquo;ve built deserves it. And a small analytical addendum to the brief we sent over. The kind of thing James might find useful on a Monday morning.
        </p>
        <div className="hero-cta-row">
          <a href="#worth-knowing" className="btn btn-primary btn-lg">Worth knowing &rarr;</a>
          <a href="#this-week" className="btn btn-ghost btn-lg">What we&rsquo;d add this week</a>
        </div>
        <div style={{marginTop:36,paddingTop:24,borderTop:"1px solid var(--mist)",display:"grid",gridTemplateColumns:"repeat(4,1fr)",gap:24,maxWidth:920}}>
          {[
            {v:"25 yrs", l:"PropTech operator depth · Ben"},
            {v:"5 markets", l:"closed transactions · global"},
            {v:"1 of 1", l:"only PropTech-only M&A practice"},
            {v:"3 gens", l:"of Lerner inside the same industry"},
          ].map((s,i) => (
            <div key={i}>
              <div style={{fontSize:24,fontWeight:600,letterSpacing:"-0.01em",color:"var(--shark)"}}>{s.v}</div>
              <div style={{fontSize:11,color:"var(--slate-500)",fontFamily:"'JetBrains Mono',monospace",letterSpacing:"0.06em",textTransform:"uppercase",marginTop:4,lineHeight:1.4}}>{s.l}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── Section 1: Worth Knowing ─────────────────────────
// Mirrors his post structure. Recognition + light-hearted team treatment.
function WorthKnowing() {
  const timeline = [
    { yr: "2002", evt: "Ben joins Qube Global Software · £25M revenue" },
    { yr: "2010", evt: "Joins the board after 8 years inside the business" },
    { yr: "2017", evt: "Sells Qube to MRI Software · 15 years operator" },
    { yr: "2019", evt: "Founds Lerner Associates · the only PropTech-focused M&A practice" },
    { yr: "2025", evt: "US + UK team in place · seed-to-exit advisory across both markets" },
  ];
  const team = [
    {
      name: "Ben Lerner",
      role: "Founder & Managing Director",
      cred: "Venture Partner at Concrete VC · mentor at MetaProp, Pi Labs, Goldacre",
      tenure: "25 years in PropTech",
      fun: "Lapsed fixed-wing pilot. Self-described terrible squash player.",
      anchor: true,
    },
    {
      name: "Joseph (Yossi)",
      role: "Investment Banking Analyst",
      cred: "Joined 2023 straight out of university",
      tenure: "Multiple completed transactions since",
      fun: "First gig was PropTech Connect (Europe&rsquo;s largest real estate tech event), within weeks of starting.",
    },
    {
      name: "Josephine",
      role: "Investment Banking Associate",
      cred: "Ex-PwC · qualified ICAEW Chartered Accountant",
      tenure: "Audit-grade financial rigour",
      fun: "Brings the kind of transaction work most boutiques her size simply don&rsquo;t have.",
    },
    {
      name: "Joseph (Analyst)",
      role: "Investment Banking Analyst",
      cred: "Third generation of the same PropTech family",
      tenure: "Grandfather built Qube · father sold it",
      fun: "Now learning the advisory side from inside the firm. Worth pausing on. That&rsquo;s rare.",
    },
    {
      name: "James",
      role: "VP, Origination & Business Development",
      cred: "Ex-Alpine Investors · $16B AUM PE",
      tenure: "Sourced institutional acquisitions at scale",
      fun: "Now building pipeline for the only pure-play PropTech boutique in the world. The translation from PE corp dev to boutique origination is non-trivial.",
    },
  ];
  return (
    <section className="section section-soft" id="worth-knowing">
      <div className="wrap">
        <div className="section-head">
          <span className="eyebrow"><span className="dot"></span>01 / Worth knowing</span>
          <h2>Quoting your own line back at you.</h2>
          <p>You ended your post with &ldquo;Worth knowing who these people are.&rdquo; We agreed. So this section is just the timeline and the team, set out properly. Skip if you&rsquo;d rather get to the new analysis below.</p>
        </div>

        {/* Timeline */}
        <div style={{display:"grid",gridTemplateColumns:"repeat(5,1fr)",gap:14,marginBottom:48}}>
          {timeline.map((t,i) => (
            <div key={i} style={{position:"relative",padding:"22px 18px",background:"#fff",border:"1px solid var(--mist)",borderRadius:12,display:"flex",flexDirection:"column",gap:10}}>
              <div style={{fontFamily:"'JetBrains Mono',monospace",fontSize:11,letterSpacing:"0.10em",color:"#21A8F2",fontWeight:700}}>{t.yr}</div>
              <div style={{fontSize:13,lineHeight:1.5,color:"var(--slate-700)"}}>{t.evt}</div>
            </div>
          ))}
        </div>

        {/* Team */}
        <div style={{marginBottom:24,paddingBottom:14,borderBottom:"1px solid var(--mist)"}}>
          <div style={{fontFamily:"'JetBrains Mono',monospace",fontSize:11,letterSpacing:"0.10em",color:"var(--slate-500)",textTransform:"uppercase",fontWeight:600}}>The team you built</div>
        </div>
        <div style={{display:"grid",gridTemplateColumns:"repeat(2,1fr)",gap:18}}>
          {team.map((m,i) => (
            <div key={i} className="card" style={{padding:24,display:"flex",flexDirection:"column",gap:10,background:m.anchor ? "var(--shark)" : "#fff",color:m.anchor ? "#fff" : "var(--slate-900)"}}>
              <div style={{display:"flex",alignItems:"baseline",justifyContent:"space-between",gap:14,paddingBottom:10,borderBottom:m.anchor ? "1px solid rgba(255,255,255,0.14)" : "1px solid var(--mist)"}}>
                <div>
                  <div style={{fontSize:18,fontWeight:600,letterSpacing:"-0.01em"}}>{m.name}</div>
                  <div style={{fontSize:12,color:m.anchor ? "rgba(255,255,255,0.65)" : "var(--slate-500)",marginTop:4}}>{m.role}</div>
                </div>
              </div>
              <div style={{fontSize:13.5,lineHeight:1.55,color:m.anchor ? "rgba(255,255,255,0.85)" : "var(--slate-700)"}}>{m.cred}</div>
              <div style={{fontSize:12,fontFamily:"'JetBrains Mono',monospace",letterSpacing:"0.04em",color:m.anchor ? "rgba(255,255,255,0.55)" : "var(--slate-500)"}}>{m.tenure}</div>
              <div style={{fontSize:13,lineHeight:1.55,color:m.anchor ? "rgba(255,255,255,0.75)" : "var(--slate-500)",fontStyle:"italic",marginTop:6,paddingTop:10,borderTop:m.anchor ? "1px dashed rgba(255,255,255,0.14)" : "1px dashed var(--mist)"}} dangerouslySetInnerHTML={{__html: m.fun}}/>
            </div>
          ))}
        </div>

        {/* Closer line */}
        <div style={{marginTop:32,padding:"22px 28px",background:"#fff",border:"1px solid var(--mist)",borderRadius:12,display:"flex",alignItems:"center",gap:18}}>
          <span style={{fontFamily:"'JetBrains Mono',monospace",fontSize:10,letterSpacing:"0.14em",color:"#21A8F2",textTransform:"uppercase",fontWeight:700,whiteSpace:"nowrap"}}>FOOTNOTE</span>
          <span style={{fontSize:14,lineHeight:1.55,color:"var(--slate-700)"}}>
            On the deal count: we did the desk-research version, but you have the spreadsheet. We&rsquo;re reading <span style={{textDecoration:"line-through",opacity:0.5}}>13+</span> as the public floor, not the actual number. If the real one&rsquo;s closer to 18 or 20, we&rsquo;d believe you. Either way, the only PropTech-only boutique in the world has done more than &ldquo;13+.&rdquo;
          </span>
        </div>
      </div>
    </section>
  );
}

// ─── Section 2: This Week — Net-new signal feed ────────────────
// 4 verified signals from past 14 days (Apr 23 - May 7 2026). All net-new vs April 23 brief.
function ThisWeek() {
  const signals = [
    {
      co: "Real → RE/MAX",
      sub: "residential · real_estate_data",
      hq: "US",
      tag: "M&A · DEFINITIVE",
      date: "Apr 27 · 2026",
      headline: "Real signs $880M definitive to acquire RE/MAX. Pro forma 2.3B revenue, 180K agents, 120+ countries.",
      why: "Sets the comp for any AI-platform-onto-legacy-brand transaction in residential. Anchors valuation at roughly 7x synergized EBITDA. Every founder-owned tech-forward residential brokerage outside the US should read this and call a banker.",
      source: "Real investor release · Apr 27 2026",
      sourceUrl: "https://investors.onereal.com/news/news-details/2026/Real-to-Acquire-REMAX-Creating-a-Leading-Technology-Enabled-Global-Real-Estate-Platform/default.aspx",
    },
    {
      co: "AvalonBay / Equity Residential",
      sub: "multifamily",
      hq: "US",
      tag: "M&A · EXPLORATORY",
      date: "Apr 30 · 2026",
      headline: "Two largest US apartment REITs in early-stage talks on a $50B megamerger. 180K combined units.",
      why: "Read-through, not direct. A combined AVB/EQR forces every multifamily PropTech vendor (Funnel, AppFolio, RealPage, Aerwave, Homebase) into procurement consolidation. Single-platform contracts get re-bid; vendors with overlapping point solutions become absorption candidates within 12 months of close.",
      source: "Bloomberg / The Real Deal · Apr 30 2026",
      sourceUrl: "https://therealdeal.com/national/2026/04/30/major-multifamily-reits-avalonbay-eqr-exploring-merger/",
    },
    {
      co: "Kompas VC",
      sub: "construction_tech · smart_buildings · esg",
      hq: "DK / EU",
      tag: "CAPITAL · FUND CLOSE",
      date: "Apr 29 · 2026",
      headline: "€160M Fund II close. Realdania (Danish built-environment foundation) added as LP alongside VKR Holding.",
      why: "Realdania-as-LP is the non-obvious hook. Signals that Danish institutional capital is rotating into transatlantic built-environment vehicles. Useful for raise-side mandates in EU construction-tech / smart-buildings, especially DACH founders deciding between London and Copenhagen as their growth-round home.",
      source: "Tech.eu · Apr 29 2026",
      sourceUrl: "https://tech.eu/2026/04/29/kompas-vc-closes-eur160m-fund-ii-for-industrial-tech-startups/",
    },
    {
      co: "Flash",
      sub: "workplace_solutions · smart_buildings",
      hq: "US",
      tag: "EXEC HIRE",
      date: "Apr 28 · 2026",
      headline: "Flash hires Peter Weiss (ex-CRE Officer at Latch / Door) as Chief Business Officer. Stated mandate: shift parking conversations from facility-level sales to investment-committee.",
      why: "Textbook precursor signal. A CRE-veteran hire whose explicit mandate is institutional-capital-courting reads as a strategic-options posture. Watch Flash for a strategic round, infrastructure-fund minority, or sell-side process inside 12 to 18 months.",
      source: "Commercial Observer · Apr 28 2026",
      sourceUrl: "https://commercialobserver.com/2026/04/peter-weiss-chief-business-officer-parking-platform-flash/",
    },
  ];
  return (
    <section className="section" id="this-week">
      <div className="wrap">
        <div className="section-head">
          <span className="eyebrow">02 / This week, on top of the brief</span>
          <h2>What James would have on his Monday list.</h2>
          <p>The April 23 brief covered the trailing 90 days. These four landed in the two weeks since. Each one fits a precursor pattern from the brief&rsquo;s methodology. Not announcements, but the layer underneath them.</p>
        </div>
        <div style={{display:"grid",gridTemplateColumns:"repeat(2,1fr)",gap:18}}>
          {signals.map((s,i) => (
            <div key={i} className="card" style={{padding:26,display:"flex",flexDirection:"column",gap:12,position:"relative"}}>
              <div style={{position:"absolute",top:-10,left:24,padding:"4px 10px",background:"#21A8F2",color:"#fff",borderRadius:99,fontSize:9.5,fontWeight:700,fontFamily:"'JetBrains Mono',monospace",letterSpacing:"0.10em"}}>{s.tag}</div>
              <div style={{display:"flex",alignItems:"baseline",justifyContent:"space-between",gap:14,marginTop:6,paddingBottom:12,borderBottom:"1px solid var(--mist)"}}>
                <div>
                  <div style={{fontSize:20,fontWeight:600,letterSpacing:"-0.01em",color:"var(--shark)"}}>{s.co}</div>
                  <div style={{fontSize:11,color:"var(--slate-500)",fontFamily:"'JetBrains Mono',monospace",letterSpacing:"0.06em",textTransform:"uppercase",marginTop:4}}>{s.sub} &middot; {s.hq}</div>
                </div>
                <div style={{fontSize:11,color:"var(--slate-500)",fontFamily:"'JetBrains Mono',monospace"}}>{s.date}</div>
              </div>
              <div style={{fontSize:14.5,lineHeight:1.5,color:"var(--slate-900)",fontWeight:500}}>{s.headline}</div>
              <div style={{fontSize:13,lineHeight:1.6,color:"var(--slate-500)"}}>
                <span style={{fontFamily:"'JetBrains Mono',monospace",fontSize:10,letterSpacing:"0.10em",color:"#21A8F2",textTransform:"uppercase",fontWeight:700,marginRight:8}}>WHY IT MATTERS</span>
                {s.why}
              </div>
              <a href={s.sourceUrl} target="_blank" rel="noopener" style={{fontSize:11,color:"var(--slate-400)",fontStyle:"italic",fontFamily:"'JetBrains Mono',monospace",marginTop:"auto",paddingTop:8,borderTop:"1px dashed var(--mist)",textDecoration:"none"}}>{s.source} &rarr;</a>
            </div>
          ))}
        </div>
        <div style={{marginTop:32,padding:"22px 28px",background:"var(--shark)",borderRadius:14,color:"#fff",display:"flex",alignItems:"flex-start",gap:18}}>
          <span style={{fontFamily:"'JetBrains Mono',monospace",fontSize:10,letterSpacing:"0.14em",color:"#21A8F2",textTransform:"uppercase",fontWeight:700,whiteSpace:"nowrap",marginTop:3}}>NOTE</span>
          <span style={{fontSize:14,lineHeight:1.55,color:"rgba(255,255,255,0.85)",maxWidth:920}}>
            None of these are in the April 23 brief&rsquo;s top 25. The brief is the snapshot; this is two weeks of decay. The production version of the underlying system refreshes weekly. The value to a boutique with Lerner&rsquo;s velocity is the delta, not the snapshot.
          </span>
        </div>
      </div>
    </section>
  );
}

// ─── Section 3: Pattern across the sector ────────────────
// The platform-four contech AI absorption pattern. All four moves verified.
function Pattern() {
  const evidence = [
    { co: "Procore → Datagrid", note: "Jan 2026 · agentic AI agents for builders" },
    { co: "Autodesk → Rhumbix", note: "Mar 31 2026 · jobsite data collection" },
    { co: "Trimble → Document Crunch", note: "Apr 2 2026 · AI contract risk scanning" },
    { co: "Nemetschek → HCSS", note: "Apr 13 2026 · $2.4B · heavy civil contractor software" },
  ];
  const crossRefs = [
    { rk: "#4", co: "Acelab", sub: "construction_tech" },
    { rk: "#6", co: "Versatile", sub: "construction_tech" },
    { rk: "#7", co: "ProNovos", sub: "construction_tech" },
    { rk: "#9", co: "OpenSpace", sub: "construction_tech" },
  ];
  return (
    <section className="section section-soft" id="pattern">
      <div className="wrap">
        <div className="section-head">
          <span className="eyebrow">03 / Pattern across the sector</span>
          <h2>The contech AI absorption window is closing inside 180 days, not 18.</h2>
          <p>One pattern the brief flagged, but didn&rsquo;t time-narrow. We think it&rsquo;s the sharpest actionable observation in PropTech right now. Specifically for the contech names already in your top 25.</p>
        </div>

        <div style={{display:"grid",gridTemplateColumns:"1.2fr 1fr",gap:32,alignItems:"flex-start"}}>
          <div style={{padding:32,background:"#fff",border:"1px solid var(--mist)",borderRadius:14}}>
            <div style={{fontFamily:"'JetBrains Mono',monospace",fontSize:10,letterSpacing:"0.14em",color:"#21A8F2",textTransform:"uppercase",fontWeight:700,marginBottom:16}}>THE OBSERVATION</div>
            <div style={{fontSize:18,lineHeight:1.55,color:"var(--slate-900)",fontWeight:500,marginBottom:18}}>
              The four construction-tech platforms (Procore, Autodesk, Trimble, Nemetschek) executed the same playbook in a 90-day window. Each acquired a narrow AI-specialist startup under $50M revenue.
            </div>
            <div style={{fontSize:14,lineHeight:1.65,color:"var(--slate-500)"}}>
              The obvious read is &ldquo;construction is consolidating&rdquo; or &ldquo;AI is hot.&rdquo; Both dead weight. The non-obvious read is the narrowness of the targets. Each acquired company is a single-workflow AI specialist (contracts, jobsite data, agent orchestration, risk review). None had Series C scale. None are platforms. All four platform acquirers chose the same playbook in the same quarter. Buy the AI workflow before it gets to Series B pricing.
            </div>
            <div style={{fontSize:14,lineHeight:1.65,color:"var(--slate-500)",marginTop:14}}>
              By Q3 2026, the platform four will have telegraphed their AI gaps with these four moves. Tier-2 buyers (Bentley, Hexagon, Oracle Construction, RIB) move on the remaining targets at lower multiples. Or the targets run out of growth and get bundled out. The window for premium tuck-in pricing in contech AI specialists likely closes around Nemetschek/HCSS close in H2 2026.
            </div>
            <div style={{marginTop:18,padding:"14px 18px",background:"var(--shark)",borderRadius:10,fontSize:13.5,lineHeight:1.55,color:"#fff"}}>
              The reframing question for any contech founder in your book: do you want to be one of the next four tuck-ins, or do you want to be a platform-vs-platform competitor in Q4?
            </div>
          </div>

          <div style={{display:"flex",flexDirection:"column",gap:14}}>
            <div style={{fontFamily:"'JetBrains Mono',monospace",fontSize:10,letterSpacing:"0.14em",color:"var(--slate-500)",textTransform:"uppercase",fontWeight:700,marginBottom:4}}>THE FOUR MOVES</div>
            {evidence.map((e,i) => (
              <div key={i} style={{padding:"14px 18px",background:"#fff",border:"1px solid var(--mist)",borderRadius:10,borderLeft:"3px solid #21A8F2"}}>
                <div style={{fontSize:14,fontWeight:600,color:"var(--shark)",marginBottom:4}}>{e.co}</div>
                <div style={{fontSize:12,lineHeight:1.5,color:"var(--slate-500)",fontFamily:"'JetBrains Mono',monospace",letterSpacing:"0.02em"}}>{e.note}</div>
              </div>
            ))}

            <div style={{marginTop:18,padding:"18px 20px",background:"var(--shark)",borderRadius:10}}>
              <div style={{fontFamily:"'JetBrains Mono',monospace",fontSize:10,letterSpacing:"0.14em",color:"#21A8F2",textTransform:"uppercase",fontWeight:700,marginBottom:12}}>FROM THE APR 23 BRIEF</div>
              <div style={{fontSize:12.5,lineHeight:1.5,color:"rgba(255,255,255,0.75)",marginBottom:10}}>Four contech names already on your top 25 fit the absorption profile.</div>
              <div style={{display:"flex",flexDirection:"column",gap:6}}>
                {crossRefs.map((r,i) => (
                  <div key={i} style={{display:"flex",alignItems:"center",gap:10,fontSize:12.5,color:"#fff"}}>
                    <span style={{fontFamily:"'JetBrains Mono',monospace",fontSize:10,color:"rgba(255,255,255,0.55)",width:30}}>{r.rk}</span>
                    <span style={{fontWeight:600}}>{r.co}</span>
                    <span style={{fontSize:10.5,color:"rgba(255,255,255,0.45)",fontFamily:"'JetBrains Mono',monospace"}}>{r.sub}</span>
                  </div>
                ))}
              </div>
            </div>

            <div style={{fontSize:12,fontStyle:"italic",color:"var(--slate-400)",fontFamily:"'JetBrains Mono',monospace",marginTop:6,lineHeight:1.5}}>
              Open question we&rsquo;d ask you tomorrow. Which of these four would James start with on Monday?
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── Section 4: The Lens (methodology) ─────────────────
function Lens() {
  const factors = [
    { w: "40%", k: "Precursor signal density", d: "Finance/legal exec hires, geographic entity formation, board changes, hiring-mix inflection, IP filings. Three or more concurrent signals inside 90 days scores heavily." },
    { w: "25%", k: "Buyer-demand match", d: "Plausible acquirer in adjacent sector visibly expanding corporate development, issuing thesis, or absorbing similar companies." },
    { w: "20%", k: "Cross-company pattern", d: "Talent migration between peers, shared advisors/board members, integration with the same protocol or platform." },
    { w: "15%", k: "Sector tailwind", d: "Regulatory / capex / macro context specific to the subsector. EU CSRD, multifamily rent inflection, AI-infra capex cycles." },
  ];
  return (
    <section className="section" id="lens">
      <div className="wrap">
        <div className="section-head">
          <span className="eyebrow">04 / The lens</span>
          <h2>What sits underneath the brief.</h2>
          <p>You see PropTech transactions when they happen. The lens we built is the layer underneath. The behavioral and structural patterns that precede events by 6 to 18 months. A single signal in isolation is rarely useful. Multiple independent signals lining up on the same company at the same time is. That&rsquo;s the entire premise.</p>
        </div>

        <div style={{display:"grid",gridTemplateColumns:"repeat(4,1fr)",gap:14,marginBottom:32}}>
          {factors.map((f,i) => (
            <div key={i} style={{padding:22,background:"#fff",border:"1px solid var(--mist)",borderRadius:12,display:"flex",flexDirection:"column",gap:10}}>
              <div style={{fontSize:32,fontWeight:600,letterSpacing:"-0.02em",color:"#21A8F2",lineHeight:1}}>{f.w}</div>
              <div style={{fontSize:13,fontWeight:600,color:"var(--slate-900)",lineHeight:1.4}}>{f.k}</div>
              <div style={{fontSize:12,lineHeight:1.6,color:"var(--slate-500)"}}>{f.d}</div>
            </div>
          ))}
        </div>

        <div style={{padding:"24px 28px",background:"var(--shark)",borderRadius:14,color:"#fff"}}>
          <div style={{fontFamily:"'JetBrains Mono',monospace",fontSize:10,letterSpacing:"0.14em",color:"rgba(255,255,255,.5)",textTransform:"uppercase",fontWeight:600,marginBottom:14}}>What this is not</div>
          <div style={{display:"grid",gridTemplateColumns:"repeat(3,1fr)",gap:24}}>
            <div style={{fontSize:13,lineHeight:1.55,color:"rgba(255,255,255,0.85)"}}>
              <strong style={{color:"#fff"}}>Not a substitute</strong> for your direct relationships or sector intuition. It&rsquo;s a layer that runs alongside.
            </div>
            <div style={{fontSize:13,lineHeight:1.55,color:"rgba(255,255,255,0.85)"}}>
              <strong style={{color:"#fff"}}>Not an announcement tracker.</strong> Companies widely covered in PropTech press in the last 30 days are excluded unless the composite reveals something the coverage missed.
            </div>
            <div style={{fontSize:13,lineHeight:1.55,color:"rgba(255,255,255,0.85)"}}>
              <strong style={{color:"#fff"}}>Not exhaustive.</strong> 123-company sample. A defensible cross-section, not a census. The production system runs continuously.
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── Closer ─────────────────────────
function Closer() {
  return (
    <section className="section section-soft">
      <div className="wrap">
        <div style={{maxWidth:880,margin:"0 auto",textAlign:"center",padding:"48px 0"}}>
          <div style={{fontFamily:"'JetBrains Mono',monospace",fontSize:11,letterSpacing:"0.14em",color:"#21A8F2",textTransform:"uppercase",fontWeight:700,marginBottom:24}}>THE LAST WORD</div>
          <h2 style={{fontSize:38,lineHeight:1.2,color:"var(--shark)",marginBottom:24,letterSpacing:"-0.01em"}}>
            We counted again. <span style={{textDecoration:"line-through",textDecorationColor:"#21A8F2",opacity:0.55}}>13+</span> is still under.
          </h2>
          <p style={{fontSize:17,lineHeight:1.6,color:"var(--slate-500)",marginBottom:8}}>
            Looking forward to tomorrow morning. Operator to operator. If the lens is useful, we&rsquo;d rather you keep using it than hear us pitch it. The brief, this update, and a continuous version are all available on the same terms: free, signal-only, no quid-pro-quo.
          </p>
          <p style={{fontSize:13,lineHeight:1.6,color:"var(--slate-400)",marginTop:24,fontStyle:"italic"}}>
            Worth knowing what these people are building, too.
          </p>
        </div>
      </div>
    </section>
  );
}

// ─── Footer ─────────────────────────
function Footer() {
  return (
    <footer style={{padding:"48px 0 32px",borderTop:"1px solid var(--mist)",background:"#fff"}}>
      <div className="wrap" style={{display:"flex",alignItems:"center",justifyContent:"space-between",flexWrap:"wrap",gap:24}}>
        <div style={{display:"flex",alignItems:"center",gap:12}}>
          <Logomark size={24}/>
          <div>
            <div style={{fontSize:14,fontWeight:700,color:"var(--shark)",letterSpacing:"-0.01em"}}>AICRO</div>
            <div style={{fontSize:11,color:"var(--slate-500)",fontFamily:"'JetBrains Mono',monospace",letterSpacing:"0.04em"}}>Doug Shankman &middot; Josh Kulchin &middot; co-founders</div>
          </div>
        </div>
        <div style={{fontSize:11,color:"var(--slate-400)",fontFamily:"'JetBrains Mono',monospace",letterSpacing:"0.04em",textAlign:"right"}}>
          For Ben Lerner &middot; Lerner Associates<br/>
          May 2026 &middot; recognition + analytical addendum
        </div>
      </div>
    </footer>
  );
}

// ─── App ─────────────────────────
function App() {
  return (
    <Fragment>
      <Nav/>
      <Hero/>
      <WorthKnowing/>
      <ThisWeek/>
      <Pattern/>
      <Lens/>
      <Closer/>
      <Footer/>
    </Fragment>
  );
}

ReactDOM.render(<App/>, document.getElementById("root"));
