// AICRO · Membio · Go-to-Market Plan (strategy gift, no AICRO pricing)
const { useState, useEffect, useRef, useMemo, Fragment } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "icp": "brokerage_owners",
  "darkHero": true
}/*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">Membio · GTM Plan</span>
          </a>
          <div className="nav-links" style={{display:'flex'}}>
            <a href="#thesis">Why now</a>
            <a href="#universe">The market</a>
            <a href="#targets">Phase 1 list</a>
            <a href="#economics">Pricing</a>
            <a href="#icp-map">Phase 2 · brokerage</a>
            <a href="#cases">Proof</a>
          </div>
        </div>
        <div className="nav-cta">
          <a href="#economics" className="btn btn-ghost btn-sm">Jump to pricing</a>
          <a href="#cta" className="btn btn-primary btn-sm">Book the kickoff</a>
        </div>
      </div>
    </nav>
  );
}

function Hero({ dark }) {
  return (
    <section className={`hero ${dark ? "" : "light"}`}>
      <div className="hero-grid-bg"></div>
      <div className="wrap hero-content">
        <div className="hero-pill">
          <span className="dot"></span>
          <span>Prepared for Tracy Weir · Membio · September 16, 2026</span>
        </div>
        <h1 style={{maxWidth:1100, textWrap:"balance"}}>
          Where to sell first.<br/>
          What to charge.<br/>
          <span style={{color:"#21A8F2"}}>And how to think about brokerage.</span>
        </h1>
        <p className="lead" style={{marginTop:24,maxWidth:920}}>
          Built from the September 11 walkthrough and the industry&rsquo;s own 2026 numbers. Three recommendations, in the order we would run them. No price attached to this page.
        </p>
        <div className="hero-cta-row">
          <a href="#thesis" className="btn btn-primary btn-lg">Start with the numbers →</a>
          <a href="#economics" className={dark ? "btn btn-outline-light btn-lg" : "btn btn-ghost btn-lg"}>Skip to pricing</a>
        </div>
        <div style={{marginTop:36,paddingTop:24,borderTop:"1px solid rgba(255,255,255,0.10)",display:"grid",gridTemplateColumns:"repeat(4,1fr)",gap:24,maxWidth:920}}>
          {[
            {v:"484", l:"MLSs left · down 22% since 2018 · T3 Sixty"},
            {v:"49%", l:"of MLS sector revenue · held by 20 MLSs"},
            {v:"~345", l:"associations under 250 members · below the floor"},
            {v:"15 yrs", l:"operating in real estate + proptech"},
          ].map((s,i) => (
            <div key={i}>
              <div style={{fontSize:22,fontWeight:600,letterSpacing:"-0.01em",color:dark ? "#fff" : "var(--shark)"}}>{s.v}</div>
              <div style={{fontSize:11,color:dark ? "rgba(255,255,255,0.55)" : "var(--slate-500)",fontFamily:"'JetBrains Mono',monospace",letterSpacing:"0.06em",textTransform:"uppercase",marginTop:4,lineHeight:1.4}}>{s.l}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── Client logos ─────────────────────────────────────
const ClientLogos = {
  Crexi: ({color="#1C1C24"}) => (
    <svg viewBox="0 0 80 22" height="20"><text x="0" y="17" fontFamily="Inter,sans-serif" fontSize="18" fontWeight="700" letterSpacing="-0.02em" fill={color}>CREXi</text></svg>
  ),
  Pacaso: ({color="#1C1C24"}) => (
    <svg viewBox="0 0 100 22" height="20"><text x="0" y="17" fontFamily="Georgia,serif" fontSize="20" fontWeight="400" fontStyle="italic" letterSpacing="-0.01em" fill={color}>Pacaso</text></svg>
  ),
  Capitalize: ({color="#1C1C24"}) => (
    <svg viewBox="0 0 130 22" height="20"><text x="0" y="17" fontFamily="Inter,sans-serif" fontSize="17" fontWeight="800" letterSpacing="-0.02em" fill={color}>Capitalize</text></svg>
  ),
  JohnsonCap: ({color="#1C1C24"}) => (
    <svg viewBox="0 0 150 22" height="20"><text x="0" y="17" fontFamily="Inter,sans-serif" fontSize="15" fontWeight="600" letterSpacing="0.01em" fill={color}>Johnson Capital</text></svg>
  ),
  WorthClark: ({color="#1C1C24"}) => (
    <svg viewBox="0 0 130 22" height="20"><text x="0" y="17" fontFamily="Inter,sans-serif" fontSize="15" fontWeight="600" letterSpacing="0.02em" fill={color}>Worth Clark</text></svg>
  ),
  Gumption: ({color="#1C1C24"}) => (
    <svg viewBox="0 0 110 22" height="20"><text x="0" y="17" fontFamily="Inter,sans-serif" fontSize="17" fontWeight="700" fontStyle="italic" letterSpacing="-0.02em" fill={color}>gumption</text></svg>
  ),
  Hemlane: ({color="#1C1C24"}) => (
    <svg viewBox="0 0 90 22" height="20"><text x="0" y="17" fontFamily="Inter,sans-serif" fontSize="17" fontWeight="600" letterSpacing="-0.01em" fill={color}>Hemlane</text></svg>
  ),
};

function TrustStrip() {
  const color = "#1C1C24";
  return (
    <section className="trust-strip">
      <div className="wrap trust-inner">
        <span className="trust-label">PropTech + RE operating partners</span>
        <div className="trust-logos">
          <ClientLogos.Crexi color={color}/>
          <ClientLogos.Capitalize color={color}/>
          <ClientLogos.Gumption color={color}/>
          <ClientLogos.JohnsonCap color={color}/>
          <ClientLogos.WorthClark color={color}/>
          <ClientLogos.Pacaso color={color}/>
          <ClientLogos.Hemlane color={color}/>
        </div>
      </div>
    </section>
  );
}

// ─── Section 1: Market Thesis · Why Now ────────────────────────
function MarketThesis() {
  const drivers = [
    {
      tag: "01 · THE CLOCK",
      stat: "484",
      statLbl: "MLSs left · down 5.8% in one year",
      title: "Your buyer is disappearing at about 30 organizations a year.",
      body: "As of December 31, 2025 there were 484 MLSs nationwide, the first time below 500 in decades and 30 fewer than a year earlier. Local associations fell to 991 from 1,014. That is a deadline, not a decline. Every organization that merges out of existence is a logo nobody can sell, and the survivors are getting bigger and better funded.",
      source: "Source: T3 Sixty · 2026 Organized Real Estate Indices · released March 4, 2026",
    },
    {
      tag: "02 · THE SHORT LIST",
      stat: "49%",
      statLbl: "of MLS sector revenue · inside 20 MLSs",
      title: "Twenty organizations hold half the money. Sell to them first.",
      body: "Twenty MLSs, 4% of the national total, serve half of all subscribers and generate roughly 49% of MLS sector revenue. Twelve associations serve 20% of all REALTORs. About 345 associations have fewer than 250 members. Priced where Membio wants to price, the addressable set is closer to 100 to 150 organizations than to 991. That is a named-account motion.",
      source: "Source: T3 Sixty · 2026 Organized Real Estate Indices",
    },
    {
      tag: "03 · THE WEDGE",
      stat: "+25%",
      statLbl: "MLS subscribers over REALTOR members",
      title: "Associations are losing the exclusive relationship with their own market.",
      body: "MLS subscriber counts now exceed REALTOR membership by 25%, up from 13% in 2018. T3 Sixty puts 57% of subscribers in MLSs open to non-REALTORs, heading past 66% by the end of 2026. Association executives hold jurisdictions full of producers they have no membership relationship with and no instrument that names them. Membio reads both records in one query. That is a retention argument, not a marketing-automation one.",
      source: "Source: T3 Sixty · 2025 Real Estate Almanac + 2026 Indices",
    },
    {
      tag: "04 · THE BUDGET ARGUMENT",
      stat: "1.48M",
      statLbl: "NAR members · down 2.2% year over year",
      title: "Dues revenue is falling, which makes this easier to sell, not harder.",
      body: "NAR counted roughly 1.48 million members at the end of 2025, down 2.2% from 1.52 million. Falling dues revenue raises the pressure on every executive to prove the organization is worth joining. That turns a tool which replaces a headcount and evidences engagement into a defensive purchase rather than a discretionary one. Lead with both lines together.",
      source: "Source: T3 Sixty estimates · NAR membership, December 31, 2025",
    },
  ];
  return (
    <section className="section" id="thesis">
      <div className="wrap">
        <div className="section-head">
          <span className="eyebrow"><span className="dot"></span>01 / Why now</span>
          <h2>Organized real estate is consolidating.</h2>
          <p>One source: T3 Sixty&rsquo;s 2026 Organized Real Estate Indices, published March 4, 2026. Four numbers that set the order.</p>
        </div>
        <div style={{display:"grid",gridTemplateColumns:"repeat(2,1fr)",gap:18}}>
          {drivers.map((d,i) => (
            <div key={i} className="card" style={{padding:28,display:"flex",flexDirection:"column",gap:14}}>
              <div style={{fontFamily:"'JetBrains Mono',monospace",fontSize:10,letterSpacing:"0.12em",color:"#21A8F2",textTransform:"uppercase",fontWeight:600}}>{d.tag}</div>
              <div style={{display:"flex",alignItems:"baseline",gap:14,paddingBottom:10,borderBottom:"1px solid var(--mist)"}}>
                <span style={{fontSize:42,fontWeight:600,letterSpacing:"-0.02em",color:"var(--shark)",lineHeight:1}}>{d.stat}</span>
                <span style={{fontSize:11,color:"var(--slate-500)",fontFamily:"'JetBrains Mono',monospace",letterSpacing:"0.06em",textTransform:"uppercase"}}>{d.statLbl}</span>
              </div>
              <h3 style={{fontSize:20,lineHeight:1.3,color:"var(--shark)",margin:0}}>{d.title}</h3>
              <p style={{fontSize:13.5,color:"var(--slate-500)",lineHeight:1.65,margin:0}}>{d.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── Matrix ─────────────────────────────────────
function Matrix() {
  const cols = ["Their AMS", "Courted", "BI / reporting tool", "Membio"];
  const rows = [
    { row: "Reads the AMS member record", vals: [4, 1, 2, 4], aicro: "Native" },
    { row: "Reads the MLS production data", vals: [1, 4, 2, 4], aicro: "Native" },
    { row: "Both in a single query", vals: [1, 1, 1, 4], aicro: "The whole moat" },
    { row: "Sold to associations and MLSs", vals: [4, 1, 3, 4], aicro: "Your buyer" },
    { row: "Sold to brokerages", vals: [1, 4, 2, 1], aicro: "Open question" },
    { row: "Answers a question in seconds", vals: [1, 3, 2, 4], aicro: "No IT ticket" },
    { row: "Sends the campaign afterwards", vals: [2, 3, 1, 4], aicro: "Audience to send" },
  ];
  return (
    <section className="section">
      <div className="wrap">
        <div className="section-head">
          <span className="eyebrow">07 / Position</span>
          <h2>Nobody else reads both sides of the house.</h2>
          <p>The AMS knows who the members are. Courted knows what the agents produce. A reporting tool charts whichever one you feed it. Only one column joins both and answers a question an executive asked out loud, which is what the Downers Grove query did in the demo.</p>
        </div>
        <div className="matrix">
          <table>
            <thead>
              <tr>
                <th style={{width:"24%"}}> </th>
                {cols.map((c,i) => (
                  <th key={i} className={c === "Membio" ? "aicro" : ""}>{c}</th>
                ))}
              </tr>
            </thead>
            <tbody>
              {rows.map((r,i) => (
                <tr key={i}>
                  <td className="row-label">{r.row}</td>
                  {r.vals.map((v,j) => (
                    <td key={j} className={j === 3 ? "aicro" : ""}>
                      {j === 3 ? (
                        <span style={{display:"inline-flex",alignItems:"center",gap:8,fontWeight:500,color:"var(--slate-900)"}}>
                          <span style={{width:14,height:14,borderRadius:"50%",background:"var(--mint-tint)",color:"var(--mint-deep)",display:"inline-flex",alignItems:"center",justifyContent:"center",fontSize:10,fontWeight:700}}>✓</span>
                          {r.aicro}
                        </span>
                      ) : (
                        <span className="dot-row">
                          {[1,2,3,4].map(d => (
                            <span key={d} className={"d " + (d <= v ? "on" : "")}></span>
                          ))}
                        </span>
                      )}
                    </td>
                  ))}
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </section>
  );
}

// ─── Pricing: Membio tiering recommendation (no AICRO price on this page)
function CostCompare() {
  return (
    <section className="section section-soft" id="economics">
      <div className="wrap">
        <div className="section-head">
          <span className="eyebrow">10 / Pricing</span>
          <h2>The anchor prices the hire. It charges nothing for the data.</h2>
          <p>$5,000 to $7,500 a month came off the cost of the marketing role Membio displaces. Sound math, and it prices the displacement at full freight and the addition at zero.</p>
        </div>
        <div className="cost-grid">
          <div className="cost-card">
            <div className="cost-eyebrow">The anchor from Friday</div>
            <h3>One marketing salary, priced at 1x.</h3>
            <p style={{color:"var(--slate-500)",fontSize:14,marginTop:6}}>Defensible, easy to explain, and it caps you at the cost of a junior hire.</p>
            <div className="cost-list">
              <div className="cost-list-row"><span className="label">Junior association marketer</span><span className="val">$65 to $70K / yr</span></div>
              <div className="cost-list-row"><span className="label">Senior association marketer</span><span className="val">$80 to $85K / yr</span></div>
              <div className="cost-list-row"><span className="label">Implied subscription</span><span className="val">$5,000 to $7,500 / mo</span></div>
              <div className="cost-list-row"><span className="label">Annualised</span><span className="val">$60 to $90K / yr</span></div>
              <div className="cost-list-row total"><span className="label">Value captured on the data layer</span><span className="val">$0</span></div>
            </div>
            <div className="cost-meta">The same flat number goes to an 18,000-member association and a 900-member one. One of those is underpaying by a factor of three and the other cannot afford it at all.</div>
          </div>
          <div className="cost-card aicro">
            <div className="cost-eyebrow">The anchor we would use</div>
            <h3>The stack you replace, plus the thing they cannot buy.</h3>
            <p style={{color:"rgba(255,255,255,.65)",fontSize:14,marginTop:6}}>Same conversation, four line items instead of one.</p>
            <div className="cost-list">
              <div className="cost-list-row"><span className="label">Marketing headcount displaced</span><span className="val">$65 to $85K / yr</span></div>
              <div className="cost-list-row"><span className="label">Email and engagement platform</span><span className="val">already in budget</span></div>
              <div className="cost-list-row"><span className="label">Reporting they route through IT</span><span className="val">staff hours, every request</span></div>
              <div className="cost-list-row"><span className="label">Jurisdiction market stats</span><span className="val">not purchasable today</span></div>
              <div className="cost-list-row total"><span className="label">Tier by member count, not one price</span><span className="val">see below</span></div>
            </div>
            <div className="cost-meta">Work that today routes through the IT director, plus jurisdiction market stats no association can buy anywhere. Not a marketing-tool line item. Price it against the budget it actually comes out of.</div>
          </div>
        </div>
        <div style={{marginTop:28}}>
          <div style={{fontFamily:"'JetBrains Mono',monospace",fontSize:10,letterSpacing:"0.12em",color:"#21A8F2",textTransform:"uppercase",fontWeight:700,marginBottom:14}}>Recommended tiering</div>
          <div style={{display:"grid",gridTemplateColumns:"repeat(4,1fr)",gap:16}}>
            {[
              {t:"Tier 1 · Mega", who:"Top-20 MLS or 10,000+ members", p:"$12,500", yr:"$150K / yr", note:"Board-approved software spend is routine at this size. Your current ceiling is their rounding error."},
              {t:"Tier 2 · Large", who:"3,000 to 10,000 members", p:"$7,500", yr:"$90K / yr", note:"Your existing top price becomes the middle of the range. This is the Mainstreet-shaped buyer."},
              {t:"Tier 3 · Mid", who:"1,000 to 3,000 members", p:"$4,000", yr:"$48K / yr", note:"Under the signing authority of most AEs at this size, which is how you dodge the board resolution."},
              {t:"Under 1,000", who:"Roughly a third of the market", p:"Do not sell direct", yr:"Sell through", note:"Reach them through the MLS or state association that already serves them. Stellar alone carries 21."},
            ].map((x,i) => (
              <div key={i} className="card" style={{padding:22,display:"flex",flexDirection:"column",gap:10}}>
                <div style={{fontFamily:"'JetBrains Mono',monospace",fontSize:9.5,letterSpacing:"0.1em",color:"var(--slate-400)",textTransform:"uppercase",fontWeight:700}}>{x.t}</div>
                <div style={{fontSize:12.5,color:"var(--slate-700)",lineHeight:1.45,minHeight:34}}>{x.who}</div>
                <div style={{paddingTop:10,borderTop:"1px solid var(--mist)"}}>
                  <div style={{fontSize:26,fontWeight:600,letterSpacing:"-0.02em",color:"var(--shark)",lineHeight:1.1}}>{x.p}</div>
                  <div style={{fontSize:10.5,color:"var(--slate-500)",fontFamily:"'JetBrains Mono',monospace",letterSpacing:"0.05em",textTransform:"uppercase",marginTop:3}}>{x.yr}</div>
                </div>
                <p style={{fontSize:12,color:"var(--slate-500)",lineHeight:1.55,margin:0,marginTop:"auto",paddingTop:8}}>{x.note}</p>
              </div>
            ))}
          </div>
          <div style={{marginTop:18,padding:"20px 24px",background:"var(--shark)",borderRadius:12,color:"#fff",fontSize:14,lineHeight:1.6}}>
            <strong style={{fontWeight:600}}>The objection this has to survive.</strong> A Tier III association management system starts around $3,500 a year. At $150,000, Tier 1 is roughly 40x that, and someone on a technology committee will say so out loud. The answer is to refuse the comparison. The AMS is the system of record. Membio is the only thing that reads the system of record and the MLS in one query and returns an answer an executive can act on that afternoon. Price it next to business intelligence and market data, never next to membership software.
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── Case studies: who is giving the advice
function CaseStudies() {
  const cases = [
    {
      co: "Worth Clark",
      stage: "Real estate brokerage",
      sector: "Agent recruiting · multi-channel",
      quote: "The brokerage mentioned on the call. Recruits real estate agents, roughly half of every positive responder books a call immediately. Same industry, same data sources, same problem of reaching licensed producers who do not answer vendors.",
      attr: "Worth Clark · brokerage engagement · figures as of 2026-02-23",
      systems: ["Agent Recruiting Funnel", "Multi-Channel Outbound", "Reply Triage", "Operator-led Cadence"],
      metrics: [
        { v: "27,850", l: "agents contacted", live: true },
        { v: "~50%", l: "of positives book" },
        { v: "Feb 2026", l: "as-of date" },
      ],
    },
    {
      co: "Capitalize",
      stage: "Verified September 2026",
      sector: "CRE Data & AI",
      quote: "Numbers from a full attribution review completed September 10, 2026, not a dashboard. Nearly a third of closed revenue in the covered pipelines traces to buyers sitting in AICRO outreach records. The review publishes its own limits, which is the part worth reading.",
      attr: "Capitalize · all-time deal ledger · 2025-03-31 to 2026-09-09",
      systems: ["Signal-First Outbound", "Revenue Engineering", "HubSpot GTM Build", "Attribution Instrumentation"],
      metrics: [
        { v: "$1.32M", l: "closed value linked", live: true },
        { v: "31.6%", l: "of covered closed value" },
        { v: "$1.86M", l: "matched, still open" },
      ],
    },
    {
      co: "Gumption",
      stage: "CRE debt marketplace",
      sector: "CRE Debt Marketplace",
      quote: "Before AICRO we were scaling linearly. Now we scale exponentially.",
      attr: "John Dickerson · Co-founder · pipeline figure as of 2026-03-04",
      systems: ["Signal-Based Deal Flow Engine", "Multi-Channel Outbound", "Predictive Lead Scoring", "Operator Playbooks"],
      metrics: [
        { v: "$98.8M", l: "attributed pipeline", live: true },
        { v: "2x", l: "conversion" },
        { v: "Mar 2026", l: "as-of date" },
      ],
    },
    {
      co: "RemoteLock",
      stage: "PropTech · into RE operators",
      sector: "PropTech · Smart Access SaaS",
      quote: "Smart-access software sold into real estate operators. The relevant part is not the product, it is that named institutional operators replied to cold outreach written operator-to-operator. Getting a real estate executive to answer a stranger is the same skill an association CEO conversation needs.",
      attr: "RemoteLock · PropTech engagement",
      systems: ["Operator-to-Operator Outbound", "Vertical Segmentation", "Stack-Specific Targeting", "Reply Triage"],
      metrics: [
        { v: "47%", l: "LinkedIn positive reply rate", live: true },
        { v: "Named", l: "operators replied" },
        { v: "PropTech", l: "into real estate" },
      ],
    },
    {
      co: "Henry AI",
      stage: "AI-native CRE platform",
      sector: "AI Platform · CRE Capital Markets",
      quote: "An AI platform for commercial real estate capital markets brokers. Closest structural read on Membio: an AI-native product with real product-market fit whose ceiling is how many of the right operators ever see it, not whether the software works.",
      attr: "Henry AI · AI platform for CRE",
      systems: ["Lookalike Targeting", "Operator-to-Broker Outbound", "Signal-Based Sequencing", "Reply Triage"],
      metrics: [
        { v: "AI for CRE", l: "capital markets" },
        { v: "Same shape", l: "as Membio", live: true },
        { v: "Active", l: "engagement" },
      ],
    },
    {
      co: "Johnson Capital",
      stage: "CRE capital advisory",
      sector: "CRE Capital Advisory",
      quote: "The right-fit track is finding the right people, and meetings are landing in our broker calendar weekly. The motion knows our industry.",
      attr: "Johnson Capital · advisory engagement",
      systems: ["Signal-First Outbound", "Multi-Channel Sequencing", "Right-Fit Track", "Pipeline Math"],
      metrics: [
        { v: "Weekly", l: "meetings booked", live: true },
        { v: "Broker", l: "calendar fills" },
        { v: "CRE", l: "capital advisory" },
      ],
    },
  ];
  return (
    <section className="section" id="cases">
      <div className="wrap">
        <div className="section-head">
          <span className="eyebrow">09 / Proof</span>
          <h2>Six engagements behind the recommendations.</h2>
          <p>Worth Clark is the closest read: agent recruiting against MLS-shaped audiences. Capitalize is the most rigorously measured, verified September 10, 2026. Older numbers carry their as-of date on the card rather than being rounded into the present tense.</p>
        </div>
        <div className="cs-grid" style={{display:"grid",gridTemplateColumns:"repeat(3, 1fr)",gap:18}}>
          {cases.map((c,i) => (
            <div className="cs-card" key={i}>
              <div className="cs-head">
                <div>
                  <div className="cs-co">{c.co}</div>
                  <div style={{fontSize:12,color:"var(--slate-500)",marginTop:2}}>{c.sector}</div>
                </div>
                <span className="cs-stage">{c.stage}</span>
              </div>
              <div className="cs-body">
                <p className="cs-quote">{c.quote}</p>
                <div className="cs-attr">{c.attr}</div>
                <div className="cs-systems">
                  <span className="cs-systems-lbl">Systems delivered</span>
                  {c.systems.map((s,j) => <div className="cs-system" key={j}>{s}</div>)}
                </div>
              </div>
              <div className="cs-metrics">
                {c.metrics.map((m,j) => (
                  <div className="cs-metric" key={j}>
                    <span className={"v " + (m.live ? "live" : "")}>{m.v}</span>
                    <span className="l">{m.l}</span>
                  </div>
                ))}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── 90-day Gantt ─────────────────
function NinetyDay() {
  const workstreams = [
    {
      name: "Repricing",
      desc: "Off the salary anchor before the next pilot conversation. Week one, together.",
      bars: [
        { left: 0, width: 20, label: "TIER MODEL + OBJECTION SCRIPT", cls: "amber" },
        { left: 20, width: 80, label: "QUOTE AT TIER PRICING, EVERY DEAL", cls: "sky" },
      ],
      delivs: [
        { left: 10, label: "Day 10 · tiers set" },
        { left: 20, label: "Day 20 · BI framing" },
        { left: 55, label: "Day 55 · first Tier 1 quote" },
      ],
    },
    {
      name: "Phase 1 named list",
      desc: "100 to 150 organizations scored by size, merger status and AE tenure. We build it, you approve it.",
      bars: [
        { left: 0, width: 25, label: "BUILD + SCORE THE LIST", cls: "amber" },
        { left: 25, width: 75, label: "WORK IT IN PRIORITY ORDER", cls: "sky" },
      ],
      delivs: [
        { left: 14, label: "Day 14 · list built" },
        { left: 30, label: "Day 30 · merger cohort first" },
        { left: 70, label: "Day 70 · refresh" },
      ],
    },
    {
      name: "Mainstreet to reference",
      desc: "Turn the live pilot into a proof asset and an MRED conversation.",
      bars: [
        { left: 0, width: 40, label: "INSTRUMENT USAGE + OUTCOMES", cls: "amber" },
        { left: 40, width: 60, label: "REFERENCE STORY IN MARKET", cls: "sky" },
      ],
      delivs: [
        { left: 25, label: "Day 25 · usage baseline" },
        { left: 45, label: "Day 45 · written case" },
        { left: 60, label: "Day 60 · MRED approach" },
      ],
    },
    {
      name: "Brokerage, scoped",
      desc: "Residential or commercial. Answer the four questions before committing engineering.",
      bars: [
        { left: 0, width: 100, label: "SCOPE THE TWO PATHS · DECIDE WITH EVIDENCE", cls: "shark" },
      ],
      delivs: [
        { left: 45, label: "Day 45 · paths compared" },
        { left: 90, label: "Day 90 · decision" },
      ],
    },
  ];
  return (
    <section className="section section-soft" id="timeline">
      <div className="wrap">
        <div className="section-head">
          <span className="eyebrow">08 / Kickoff</span>
          <h2>Four workstreams, starting next week.</h2>
          <p>Three are decisions, not builds. The constraint is not engineering capacity, it is that the price sits too low and the target list is not written down yet.</p>
        </div>
        <div className="gantt">
          <div className="gantt-head">
            <div className="col workstream">Workstream</div>
            <div className="col">Week 1<span className="day">Kickoff</span></div>
            <div className="col">Day 30<span className="day">List live</span></div>
            <div className="col">Day 60<span className="day">First Tier 1 quote</span></div>
            <div className="col">Day 90<span className="day">Brokerage decision</span></div>
          </div>
          {workstreams.map((w, i) => (
            <div className="gantt-row" key={i}>
              <div className="gantt-ws">
                <div className="name">{w.name}</div>
                <div className="desc">{w.desc}</div>
              </div>
              <div className="gantt-track">
                {w.bars.map((b, j) => (
                  <div key={j} className={"gantt-bar " + b.cls} style={{left:b.left+"%", width:b.width+"%"}}>{b.label}</div>
                ))}
                {w.delivs.map((d, j) => (
                  <div key={j} className="gantt-deliv" style={{left:d.left+"%", bottom: j % 2 ? 30 : 8}}>
                    <span className="pin"></span>{d.label}
                  </div>
                ))}
              </div>
            </div>
          ))}
          <div className="gantt-foot">
            <div className="gantt-legend"><span className="sw" style={{background:"linear-gradient(90deg,#21A8F2,#0E7DBC)"}}></span>Live execution</div>
            <div className="gantt-legend"><span className="sw" style={{background:"#1C1C24"}}></span>Continuous CRO ownership</div>
            <div className="gantt-legend"><span className="sw" style={{background:"#D97706"}}></span>Build / deploy</div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── CTA: debrief via Calendly
function CTA() {
  return (
    <section className="section" id="cta">
      <div className="wrap">
        <div className="cta-block">
          <div className="cta-block-bg"></div>
          <div className="cta-left" style={{flex:1}}>
            <span className="eyebrow" style={{color:"rgba(255,255,255,.5)"}}>10 / The debrief</span>
            <h2 style={{marginTop:18,textWrap:"balance"}}>Let&rsquo;s run this together.</h2>
            <p>The plan is yours either way, with nothing to buy on this page. If it holds up, the fastest version starts next week: our team takes the Phase 1 list and the repricing, you keep building. You offered to open doors in organized real estate and we said we would help you sell. This is that, with a start date on it.</p>
            <div style={{marginTop:32,display:"flex",alignItems:"center",gap:18,flexWrap:"wrap"}}>
              <a href="https://calendly.com/doug-aicro/custom-demo-qa"
                 target="_blank" rel="noopener"
                 className="btn btn-lg"
                 style={{background:"#FF8559",color:"#fff",border:"none",fontWeight:600,padding:"14px 28px",borderRadius:99,fontSize:15,textDecoration:"none",letterSpacing:"-0.005em"}}>
                Book the kickoff call →
              </a>
              <span style={{fontSize:13,color:"rgba(255,255,255,0.65)",lineHeight:1.5,flex:1,minWidth:280}}>
                Thirty minutes to scope it. Agenda is yours: the tiering, the Phase 1 list, or the brokerage call. If the read is that Membio should hold at $5,000 and go straight at brokers, that is worth hearing too.
              </span>
            </div>
            <div style={{marginTop:18,fontSize:12,color:"rgba(255,255,255,0.45)",fontFamily:"'JetBrains Mono',monospace",letterSpacing:"0.04em"}}>
              calendly.com/doug-aicro/custom-demo-qa
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer className="footer wrap">
      <div className="footer-left">
        <span style={{fontFamily:"Montserrat, Inter, sans-serif",fontWeight:800,fontSize:18,color:"#21A8F2",letterSpacing:"-0.01em"}}>AICRO</span>
        <span className="footer-meta">MEMBIO · GO-TO-MARKET PLAN · 2026-09-16</span>
      </div>
      <div>doug@aicro.co</div>
      <div className="footer-meta">© 2026 AICRO · Doug Shankman & Josh Kulchin, Co-Founders</div>
    </footer>
  );
}

// ─── Section: Prospect Universe ─────────────────────────────────────
function ProspectUniverse() {
  const verticals = [
    { v:"Tier 1 · The Mega MLSs", stat:"20", statLbl:"MLSs holding ~49% of sector revenue", frag:"Bright, CRMLS, Stellar and the rest of the top twenty serve half of all US subscribers. Real technology budgets, dedicated staff, boards that already approve six-figure vendor spend. The only organizations large enough that top-tier pricing is not a board event.", buyer:"MLS CEO / President / CTO" },
    { v:"Tier 2 · The Large Associations", stat:"12", statLbl:"associations serving 20% of all REALTORs", frag:"Twelve local associations serve a fifth of every REALTOR in the country, with a wider band behind them at 5,000 members and up. The buyer from the Mainstreet demo: a communications team, a real budget, and no way to see their own market. Highest product fit in the market.", buyer:"Association Executive / CEO" },
    { v:"Tier 3 · Mid-Market Associations", stat:"~646", statLbl:"associations at 250+ members", frag:"Subtract the roughly 345 associations under 250 members from 991 and about 646 remain. Most cannot carry a five-figure monthly subscription alone. Reach them through the MLS or state association already serving them, not one at a time.", buyer:"AE / Director of Communications" },
    { v:"The 2026 Merger Cohort", stat:"53", statLbl:"organizations that exited in 2025 alone", frag:"Thirty MLSs and twenty-three associations disappeared during 2025. Each exit leaves a survivor that absorbed a second member base, a second data set and usually a second system of record. A data-integration problem with a budget line attached. Best-timed segment in the market.", buyer:"AE or MLS CEO of the surviving entity" },
  ];
  return (
    <section className="section" id="universe">
      <div className="wrap">
        <div className="section-head">
          <span className="eyebrow"><span className="dot"></span>04 / Your prospect universe</span>
          <h2>How the buyer universe splits.</h2>
          <p>Three tiers by size. One cohort by timing.</p>
        </div>
        <div style={{display:"grid",gridTemplateColumns:"repeat(3,1fr)",gap:18}}>
          {verticals.map((d,i) => (
            <div key={i} className="card" style={{padding:26,display:"flex",flexDirection:"column",gap:12}}>
              <div style={{fontSize:15,fontWeight:600,color:"var(--shark)",letterSpacing:"-0.01em"}}>{d.v}</div>
              <div style={{display:"flex",alignItems:"baseline",gap:12,paddingBottom:10,borderBottom:"1px solid var(--mist)"}}>
                <span style={{fontSize:34,fontWeight:600,letterSpacing:"-0.02em",color:"#21A8F2",lineHeight:1}}>{d.stat}</span>
                <span style={{fontSize:10.5,color:"var(--slate-500)",fontFamily:"'JetBrains Mono',monospace",letterSpacing:"0.05em",textTransform:"uppercase"}}>{d.statLbl}</span>
              </div>
              <p style={{fontSize:13,color:"var(--slate-500)",lineHeight:1.6,margin:0}}>{d.frag}</p>
              <div style={{marginTop:"auto",paddingTop:10,fontSize:11,color:"var(--slate-700)",fontFamily:"'JetBrains Mono',monospace",letterSpacing:"0.04em"}}>
                <span style={{color:"var(--slate-400)"}}>BUYER · </span>{d.buyer}
              </div>
            </div>
          ))}
          <div className="card" style={{padding:26,background:"var(--shark)",display:"flex",flexDirection:"column",justifyContent:"center",gap:10}}>
            <div style={{fontFamily:"'JetBrains Mono',monospace",fontSize:10,letterSpacing:"0.12em",color:"rgba(255,255,255,.5)",textTransform:"uppercase",fontWeight:600}}>Distribution without the board resolution</div>
            <div style={{fontSize:15,lineHeight:1.55,color:"#fff",fontWeight:500}}>
              Stellar MLS serves 84,000+ customers across 21 REALTOR associations. One contract, 21 association relationships, none sold individually. Broad distribution does not come from pricing low enough for everyone. It comes from selling to the twenty organizations already sitting on top of everyone else.
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── Section: A-Tier Targets · Why Now ─────────────────────────────────────
function ATierTargets() {
  const targets = [
    {
      co:"Miami and South Florida Realtors",
      vert:"2026 Merger Cohort",
      size:"~93,000 members · third-largest MLS in the US",
      why:"MIAMI Association of Realtors and RWorld combined effective May 11, 2026. Largest and fastest association and MLS merger in NAR history.",
      how:"Two member bases, two data sets, one executive team that has to prove the merger produced something. Membio is the proof layer.",
      next:"If you land one organization this year, land this one. Nobody in the country has a sharper need or a fresher budget.",
    },
    {
      co:"Stellar MLS",
      vert:"Tier 1 · Mega MLS",
      size:"84,000+ customers · 21 REALTOR associations",
      why:"Entered reciprocal data access agreements with CRMLS and Bright MLS in July 2025, linking roughly 300,000 professionals.",
      how:"Sell once to Stellar, deploy across the 21 associations it already serves in Central and Southwest Florida and Puerto Rico.",
      next:"This is your distribution answer. One contract, 21 association relationships, none of them individually sold.",
    },
    {
      co:"Bright MLS",
      vert:"Tier 1 · Mega MLS",
      size:"101,100 subscribers · #1 in the US",
      why:"Took the top spot in T3 Sixty's MLS ranking, the first change at number one since the ranking began in 2019.",
      how:"Mid-Atlantic footprint spanning many separate associations. The jurisdiction-level market view from the demo scales directly.",
      next:"The largest single subscriber base in the country sets your reference price for everyone below it.",
    },
    {
      co:"California Regional MLS",
      vert:"Tier 1 · Mega MLS",
      size:"103,000+ professionals · self-reported July 2025",
      why:"Publicly positioning as the nation's largest subscriber-based MLS and actively building reciprocal data infrastructure with Stellar and Bright.",
      how:"An organization competing on data reach is an organization that buys data products. Lead with the market-stats view, not the email tool.",
      next:"CRMLS, Bright and Stellar move together. Land one and the reference call to the other two is warm.",
    },
    {
      co:"MRED",
      vert:"Warm · already in your pipes",
      size:"~48,000 members · your Mainstreet data source",
      why:"Opened access to any licensed agent nationwide in spring 2026, backed by Compass, which said it would subsidize the first 100,000 agents joining. That would roughly triple MRED's membership.",
      how:"A membership base that triples is an onboarding, segmentation and communication problem arriving all at once. You already parse their feed correctly for Mainstreet.",
      next:"Warmest logo on this page and the sharpest timing. Approach before the expansion settles, not after.",
    },
    {
      co:"FMLS",
      vert:"Tier 1 · Mega MLS",
      size:"57,000+ subscribers · 4th largest nationally",
      why:"Opened a two-way data connection with MARIS in August 2026, reaching a combined 72,000 subscribers across Georgia, Illinois and Missouri, after a three-way Southeast data share in April 2026.",
      how:"An organization stitching together three states of listing data has a cross-jurisdiction reporting problem and no clean way to show any single association what its own market is doing.",
      next:"Georgia MLS operates independently in the same state, so the competitive-differentiation pitch works on both and you get two shots at one market.",
    },
  ];
  return (
    <section className="section section-soft" id="targets">
      <div className="wrap">
        <div className="section-head">
          <span className="eyebrow">05 / Phase 1 targets · why now</span>
          <h2>Not a category. A list.</h2>
          <p>Six of roughly 100 to 150. Each with a dated public signal and a reason it scales past the first contract.</p>
        </div>
        <div style={{display:"grid",gridTemplateColumns:"repeat(3,1fr)",gap:16}}>
          {targets.map((t,i) => (
            <div key={i} className="card" style={{padding:22,display:"flex",flexDirection:"column",gap:12}}>
              <div style={{display:"flex",alignItems:"center",gap:8}}>
                <span style={{padding:"3px 9px",borderRadius:99,background:"#E9F5FE",color:"#0E7DBC",fontFamily:"'JetBrains Mono',monospace",fontSize:9,fontWeight:700,letterSpacing:"0.06em",textTransform:"uppercase"}}>{t.vert}</span>
              </div>
              <div>
                <div style={{fontSize:16,fontWeight:600,color:"var(--shark)",letterSpacing:"-0.01em",lineHeight:1.25}}>{t.co}</div>
                <div style={{fontSize:11,color:"var(--slate-500)",fontFamily:"'JetBrains Mono',monospace",marginTop:3}}>{t.size}</div>
              </div>
              <div style={{borderTop:"1px solid var(--mist)",paddingTop:10}}>
                <div style={{fontFamily:"'JetBrains Mono',monospace",fontSize:9,letterSpacing:"0.1em",color:"#21A8F2",textTransform:"uppercase",fontWeight:700,marginBottom:5}}>Why now</div>
                <p style={{fontSize:12.5,color:"var(--slate-700)",lineHeight:1.5,margin:0}}>{t.why}</p>
              </div>
              <div>
                <div style={{fontFamily:"'JetBrains Mono',monospace",fontSize:9,letterSpacing:"0.1em",color:"#0E9F66",textTransform:"uppercase",fontWeight:700,marginBottom:5}}>How they use it</div>
                <p style={{fontSize:12.5,color:"var(--slate-700)",lineHeight:1.5,margin:0}}>{t.how}</p>
              </div>
              <div style={{marginTop:"auto",paddingTop:8,borderTop:"1px dashed var(--mist)"}}>
                <div style={{fontFamily:"'JetBrains Mono',monospace",fontSize:9,letterSpacing:"0.1em",color:"var(--slate-400)",textTransform:"uppercase",fontWeight:700,marginBottom:5}}>The wedge</div>
                <p style={{fontSize:12,color:"var(--slate-500)",lineHeight:1.5,margin:0,fontStyle:"italic"}}>{t.next}</p>
              </div>
            </div>
          ))}
        </div>
        <div style={{marginTop:20,padding:"18px 24px",background:"#fff",border:"1px solid var(--mist)",borderRadius:12,fontSize:13.5,color:"var(--slate-700)",lineHeight:1.6}}>
          Counts are as reported by T3 Sixty and the organizations themselves between January 2025 and April 2026, so treat them as directional. The four signals worth building a live list on: merger announcements, MLS data-sharing agreements, AE and CEO transitions, new technology committees. All public, all dated.
        </div>
      </div>
    </section>
  );
}

// ─── Section: Phase 2 · The brokerage question ──────────────
// Written after checking Courted. This section deliberately walks back
// the advice given live on the 2026-09-11 call.
function ICPLaunchMap() {
  const phases = [
    {
      tier:"P1",
      label:"Associations and MLSs",
      color:"#21A8F2", tint:"#E9F5FE",
      window:"Months 0 to 9",
      buyer:"AE / MLS CEO / President",
wedge:"Concentrated, reachable, and nobody credible is selling this. Roughly 100 to 150 organizations carry the whole opportunity at this price.",
      points:[
        "Top-20 MLSs, which hold about 49% of sector revenue",
        "The twelve associations serving 20% of all REALTORs",
        "The 2026 merger cohort, where the budget event already happened",
        "MRED, whose data you already parse for Mainstreet",
        "Stellar as the distribution proof, 21 associations on one contract",
      ],
    },
    {
      tier:"P2",
      label:"Brokerage, two paths",
      color:"#9D4EDD", tint:"#F4ECFE",
      window:"Months 9 to 18, open question",
      buyer:"Residential or commercial. Different animals.",
      wedge:"Residential and commercial brokerage are not one market. Residential is where your data already sits and where a competitor already sits. Commercial is the reverse on both counts. Worth choosing deliberately rather than drifting into one.",
      points:[
        "Residential: MLS production data you already parse, plus a live competitor",
        "Commercial: cleaner competitive field, but a different data model to build",
        "Either path is stronger carried in on an MLS relationship than sold cold",
        "Price it separately from the association tiers",
        "Worth revisiting once Phase 1 has reference customers",
      ],
    },
    {
      tier:"P3",
      label:"Associations beyond real estate",
      color:"#0E9F66", tint:"#E5F9F0",
      window:"Months 18+",
      buyer:"Association CEO, any vertical",
wedge:"Far more associations sit outside real estate than inside it, and the product is built vertical-agnostic. True, and also the phase that can wait.",
      points:[
        "Requires one new data integration per vertical, not per customer",
        "The MLS-plus-AMS pairing is what makes real estate special",
        "Outside real estate you lose the second data source and the moat",
        "Go here once Phase 1 pricing is proven, not before",
        "Trade association and medical society markets are the nearest analogs",
      ],
    },
  ];
  return (
    <section className="section section-soft" id="icp-map">
      <div className="wrap">
        <div className="section-head">
          <span className="eyebrow">06 / The phased plan</span>
          <h2>Three phases. The second one is a conversation, not a conclusion.</h2>
          <p>Phase 1 and Phase 3 are straightforward. Brokerage is the one worth thinking through together, and on the call we treated it as a single market when it is really two. Here is how we would evaluate it, plus the questions none of us can answer from the outside yet.</p>
        </div>
        <div style={{display:"grid",gridTemplateColumns:"repeat(3,1fr)",gap:16}}>
          {phases.map((t,i) => (
            <div key={i} className="card" style={{padding:0,overflow:"hidden",display:"flex",flexDirection:"column",borderTop:`4px solid ${t.color}`}}>
              <div style={{padding:"18px 20px 14px 20px",background:t.tint}}>
                <div style={{display:"flex",alignItems:"baseline",gap:10,marginBottom:6}}>
                  <span style={{fontFamily:"'JetBrains Mono',monospace",fontSize:11,fontWeight:800,color:t.color,letterSpacing:"0.06em"}}>{t.tier}</span>
                  <span style={{fontSize:15,fontWeight:600,color:"var(--shark)",letterSpacing:"-0.01em",lineHeight:1.25}}>{t.label}</span>
                </div>
                <div style={{fontSize:11,color:"var(--slate-700)",fontFamily:"'JetBrains Mono',monospace",letterSpacing:"0.02em"}}>{t.window}</div>
                <div style={{fontSize:11,color:"var(--slate-500)",fontFamily:"'JetBrains Mono',monospace",marginTop:3,letterSpacing:"0.02em"}}><strong style={{color:"var(--slate-700)"}}>BUYER · </strong>{t.buyer}</div>
              </div>
              <div style={{padding:"14px 20px 10px 20px",borderBottom:"1px solid var(--mist)"}}>
                <div style={{fontFamily:"'JetBrains Mono',monospace",fontSize:9,letterSpacing:"0.10em",color:t.color,textTransform:"uppercase",fontWeight:700,marginBottom:5}}>The call</div>
                <p style={{fontSize:12,color:"var(--slate-700)",lineHeight:1.55,margin:0}}>{t.wedge}</p>
              </div>
              <div style={{padding:"14px 20px 18px 20px",flex:1}}>
                <div style={{fontFamily:"'JetBrains Mono',monospace",fontSize:9,letterSpacing:"0.10em",color:"var(--slate-500)",textTransform:"uppercase",fontWeight:700,marginBottom:8}}>What it means in practice</div>
                <ul style={{listStyle:"none",padding:0,margin:0,display:"flex",flexDirection:"column",gap:7}}>
                  {t.points.map((f,j) => (
                    <li key={j} style={{display:"flex",gap:8,alignItems:"flex-start"}}>
                      <span style={{color:t.color,fontWeight:700,fontSize:12,lineHeight:1.5}}>&middot;</span>
                      <span style={{fontSize:12.5,color:"var(--slate-700)",lineHeight:1.5}}>{f}</span>
                    </li>
                  ))}
                </ul>
              </div>
            </div>
          ))}
        </div>

        <div style={{marginTop:22,display:"grid",gridTemplateColumns:"1.15fr 1fr",gap:16}}>
          <div className="card" style={{padding:26,display:"flex",flexDirection:"column",gap:12}}>
            <div style={{fontFamily:"'JetBrains Mono',monospace",fontSize:10,letterSpacing:"0.12em",color:"#9D4EDD",textTransform:"uppercase",fontWeight:700}}>Courted · what is public, and what is not</div>
            <h3 style={{fontSize:20,lineHeight:1.3,color:"var(--shark)",margin:0}}>Worth understanding properly before it changes the roadmap.</h3>
            <p style={{fontSize:13.5,color:"var(--slate-500)",lineHeight:1.65,margin:0}}>
              What is public: Courted sells agent recruiting and retention to residential brokerages, scoring MLS data to flag which agents are likely to move. Its own comparisons name BrokerMetrics, MarketView Broker and Relitix. It is seed stage, founded 2021, roughly $6M raised, around 39 people. Nothing it sells today is aimed at an association or an MLS.
            </p>
            <p style={{fontSize:13.5,color:"var(--slate-500)",lineHeight:1.65,margin:0}}>
              What is not public, and matters more: their list pricing, the actual depth and coverage of their data, and whether they have an association or MLS motion coming. You said on the call you could not find their pricing either. We could not either, and we are not going to pretend a number we cannot see is a number we can plan against.
            </p>
            <p style={{fontSize:13.5,color:"var(--slate-700)",lineHeight:1.65,margin:0,paddingTop:10,borderTop:"1px solid var(--mist)"}}>
              So the honest read is narrower than a verdict. Courted is a reason to enter residential brokerage with your eyes open, not a reason to stay out of brokerage altogether. It says nothing at all about the commercial side.
            </p>
          </div>
          <div className="card" style={{padding:26,background:"var(--shark)",display:"flex",flexDirection:"column",gap:12}}>
            <div style={{fontFamily:"'JetBrains Mono',monospace",fontSize:10,letterSpacing:"0.12em",color:"rgba(255,255,255,.5)",textTransform:"uppercase",fontWeight:700}}>Two different questions</div>
            <div style={{fontSize:14,lineHeight:1.6,color:"#fff",fontWeight:500}}>
              <span style={{color:"#21A8F2"}}>Residential.</span> The data is already in your pipes. So is a competitor, and the only public price point anywhere near it is a $200 per month community rate advertised by a third-party team. That is a group rate rather than list, so it proves little, but it hints at where the expectation sits.
            </div>
            <div style={{fontSize:14,lineHeight:1.6,color:"#fff",fontWeight:500,paddingTop:12,borderTop:"1px solid rgba(255,255,255,.14)"}}>
              <span style={{color:"#07DE83"}}>Commercial.</span> No Courted, no obvious incumbent doing this off association data, and a buyer used to paying real money for market intelligence. The cost is that commercial transactions do not sit in the residential MLS, so this is a data build, not a repackage.
            </div>
            <div style={{fontSize:13,lineHeight:1.6,color:"rgba(255,255,255,.72)",paddingTop:10}}>
              Same word, two businesses. The choice between them is a product decision, and it is yours, not ours.
            </div>
          </div>
        </div>

        <div style={{marginTop:16,padding:"20px 26px",background:"#fff",border:"1px solid var(--mist)",borderLeft:"4px solid #FF8559",borderRadius:12,fontSize:13.5,color:"var(--slate-700)",lineHeight:1.65}}>
          <strong style={{color:"var(--shark)"}}>What would actually decide this.</strong> Four questions, none answerable from outside: what does Courted really charge, and to whom? How deep is their data next to what you already pull from the MLS and the AMS? Does the commercial side justify a second data model, or does it stay a residential product? And does either path reach the buyer through an MLS relationship, or does it need a sales motion you do not have yet? Our recommendation is only that Phase 1 does not wait on the answers. Brokerage may well be the right second act, and this is the part worth an hour on a call rather than a paragraph on a page.
        </div>
      </div>
    </section>
  );
}

// ─── App ─────────────────────────────────────
function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const setIcp = (v) => setTweak('icp', v);

  return (
    <Fragment>
      <Nav/>
      <Hero dark={t.darkHero}/>
      <TrustStrip/>
      <MarketThesis/>
      <ProspectUniverse/>
      <ATierTargets/>
      <CostCompare/>
      <ICPLaunchMap/>
      <Matrix/>
      <NinetyDay/>
      <CaseStudies/>
      <CTA/>
      <Footer/>
      <TweaksPanel>
        <TweakSection label="Surface"/>
        <TweakRadio
          label="Hero treatment"
          value={t.darkHero ? "dark" : "light"}
          options={["dark", "light"]}
          onChange={(v) => setTweak('darkHero', v === "dark")}
        />
        <div style={{fontSize:11,color:"rgba(41,38,27,.55)",lineHeight:1.5,marginTop:6}}>
          Strategy-gift build. No AICRO pricing on this page by design. The Economics section carries Membio&rsquo;s recommended tiering instead.
        </div>
      </TweaksPanel>
    </Fragment>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App/>);