// AICRO · Cambio · Proposal — main app
const { useState, useEffect, useRef, useMemo, Fragment } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "icp": "asset_manager",
  "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">Cambio Proposal</span>
          </a>
          <div className="nav-links" style={{display:'flex'}}>
            <a href="#thesis">Why now</a>
            <a href="#system">Orchestration</a>
            <a href="#built">Built</a>
            <a href="#portal">Portal</a>
            <a href="#cases">Proof</a>
            <a href="#economics">Economics</a>
            <a href="#timeline">90 days</a>
          </div>
        </div>
        <div className="nav-cta">
          <a href="#cta" className="btn btn-ghost btn-sm">Talk to Doug</a>
          <a href="#cta" className="btn btn-primary btn-sm">Get started →</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 John Turner · Cambio · April 30, 2026</span>
        </div>
        <h1 style={{maxWidth:1100, textWrap:"balance"}}>
          John, you&rsquo;re past stealth.<br/>
          Nuveen, BGO, LaSalle, Oxford, Madison, Beacon, Boston Properties.<br/>
          <span style={{color:"#21A8F2"}}>You&rsquo;re not past pipeline. We open the next 200.</span>
        </h1>
        <p className="lead" style={{marginTop:24,maxWidth:920}}>
          Cambio launched with the case study every CRE-AI vendor wishes they had: $9.2M in energy savings at Nuveen, plus a tier-1 logo wall that includes BGO, LaSalle, Oxford, Madison, Beacon, MetLife, Boston Properties, and Clarion. The audience that already knows Cambio is saturated. The next $18M in deployed capital has to land in the inboxes of asset-management VPs, investment committees, and ESG leads who haven&rsquo;t heard the Nuveen number yet. AICRO runs that layer for you.
        </p>
        <div className="hero-cta-row">
          <a href="#thesis" className="btn btn-primary btn-lg">See the thesis →</a>
          <a href="#system" className={dark ? "btn btn-outline-light btn-lg" : "btn btn-ghost btn-lg"}>How we operate</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:"15+ yrs", l:"PropTech operator at CRO level"},
            {v:"7 CRE-adjacent", l:"clients in current book"},
            {v:"$75M+", l:"qualified pipeline · Gumption"},
            {v:"+187%", l:"pipeline lift · Capitalize · 90 days"},
          ].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">Trusted by</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 Cambio, Why Now ────────────────────────
function MarketThesis() {
  const drivers = [
    {
      tag: "01 · POST-STEALTH WINDOW",
      stat: "$18M",
      statLbl: "Series A · Maverick · January 22, 2026",
      title: "The capital is in. The audience isn't.",
      body: "Cambio went public 14 weeks ago. The Nuveen $9.2M case, the BGO/LaSalle/Oxford logo wall, and the YC + Procore + OpenAI angel set bought you the first wave. The next wave — VPs of Asset Management at the 200 institutional firms that haven't heard your name yet — needs to be opened deliberately. Inbound and Reb2b cap at the audience already in the funnel.",
      source: "Source: BusinessWire · January 22, 2026 · Cambio.ai/news",
    },
    {
      tag: "02 · ALLOCATOR CAPEX PRESSURE",
      stat: "$1.7T",
      statLbl: "U.S. CRE retrofit + recapitalization spend",
      title: "Asset managers are reviewing the capex stack.",
      body: "Institutional asset managers are sitting on portfolios facing simultaneous pressure: 2026 office maturities, ESG disclosure deadlines (CSRD, SEC climate rule, GRESB Q3 cycle), and operating-cost spikes on the legacy stock. Capex prioritization without an investment-grade data layer is the bottleneck. Six spreadsheets and a 90-day analyst sprint per decision is no longer defensible to an investment committee.",
      source: "Source: GRESB 2026 cycle · CSRD reporting timeline · MSCI Real Assets",
    },
    {
      tag: "03 · LEADERSHIP CHANGE SIGNAL",
      stat: "12+ firms",
      statLbl: "ICP set with leadership / fund-cycle triggers",
      title: "Firms in motion are firms in market.",
      body: "Across the institutional CRE asset-management universe, we see live triggers right now — fund closes (Investcorp, Caliber), major dispositions (Penzance), senior leadership changes, and new vehicle launches. These windows are when the platform-decision conversation actually happens. AICRO's signal layer fires the Cambio outreach within the window, not three months after.",
      source: "Source: AICRO ICP grading · institutional CRE asset management universe",
    },
    {
      tag: "04 · PERSONA ACCESSIBILITY",
      stat: "26 / 60",
      statLbl: "Grade-A persons across 27 graded firms",
      title: "The decision-makers answer LinkedIn.",
      body: "VPs of Asset Management, Heads of ESG, CIOs at $500M–$50B AUM allocators are reachable on LinkedIn and email. They don't have gatekeeping infrastructure the way a Blackstone MD does, and they have direct authority over the platform-evaluation decision. The peer-tone Cambio voice — Nuveen + Goldman + KKR DNA — is exactly what lands with this title cluster.",
      source: "Source: AICRO graded ICP · 27 firms, 60 persons, 26 grade-A targets",
    },
  ];
  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>Four forces converging on Cambio&rsquo;s next 200 accounts.</h2>
          <p>This is not a generic GTM thesis. It is the four drivers that make the next two quarters the highest-leverage outbound window Cambio will see this funding cycle.</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 style={{fontSize:11,color:"var(--slate-400)",fontStyle:"italic",fontFamily:"'JetBrains Mono',monospace",marginTop:"auto",paddingTop:8}}>{d.source}</div>
            </div>
          ))}
        </div>
        <div style={{marginTop:32,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:12}}>The takeaway</div>
          <div style={{fontSize:18,lineHeight:1.5,color:"#fff",fontWeight:500,maxWidth:920}}>
            Capital is deployed, proof is in market, and the audience is reachable. The constraint is not interest in CRE-AI — it is reaching the right asset-management VP, ESG lead, or CIO at the moment of platform-evaluation relevance. That is the problem AICRO solves.
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── Section 2: AICRO Orchestration Layer ────────────────────────
function Orchestration() {
  const layers = [
    {
      tag: "ICP & SIGNAL ARCHITECTURE",
      title: "Four institutional segments. One operator-built ICP map.",
      body: "Asset managers. Real estate PE. Owners and REITs. ESG and Responsible Investing leads. Each has its own qualification logic, its own signal pack, its own messaging angle. We don't run one campaign — we run four pools that compound.",
      bullets: [
        "Asset Managers — Nuveen-tier institutional allocators, $500M+ AUM",
        "Real Estate PE — Investcorp, Heitman, Harrison Street tier",
        "Owners & REITs — Penzance, Boston Properties, Beacon Capital tier",
        "ESG / Responsible Investing — Heads of ESG, Global RI, Sustainability",
      ],
    },
    {
      tag: "MULTI-SOURCE SIGNAL DETECTION",
      title: "Six surfaces. Daily refresh. Trigger-based outreach.",
      body: "We don't buy one intent feed and call it signal. We compose six layers — most of them not available in any vendor product — into a daily refresh that fires on real platform-evaluation intent.",
      bullets: [
        "Fund close + capital raise — institutional capital deployment windows",
        "Major acquisition + disposition — portfolio recomposition triggers",
        "Senior leadership change — new CIO / Head of AM / Head of ESG",
        "GRESB submission + ESG disclosure cycles — Q3 reporting prep",
        "Retrofit RFPs + capex commitments — energy efficiency mandates",
        "ULI / NAREIM / GRESB / PERE — conference + panel attendance",
      ],
    },
    {
      tag: "PERSONALIZATION + SEND",
      title: "Every message grounded in the signal that triggered it.",
      body: "Each contact gets a hook from the actual signal — a fund close, a leadership change, a GRESB submission window. Messages stay in Cambio's voice — peer to peer, operator to operator. Email runs on 75 warmed inboxes. LinkedIn runs across 6–8 SDR profiles. Every touch is human-quality, signal-grounded, and tracked.",
      bullets: [
        "75+ warm email domains · 98.4% deliverability",
        "Multi-seat LinkedIn orchestration with SDR profiles + Cambio AE consent",
        "Per-contact relevance hook from the trigger signal",
        "Cambio-voice templates (Nuveen $9.2M anchor) · weekly refinement",
      ],
    },
    {
      tag: "REPLY TRIAGE + SALES ACTION",
      title: "Slack-native triage. Mid-funnel rescue. Operator in the room.",
      body: "The Reply Agent classifies every reply within minutes, drafts a response, and routes it to the right Cambio rep. AICRO Rounds runs every weekday against your CRM — surfacing demos that need a follow-up, evaluations that didn't progress, and accounts that went silent. Doug walks the room weekly.",
      bullets: [
        "Reply Agent — positive / neutral / not-interested classification + draft",
        "AICRO Rounds — daily mid-funnel grading against your CRM",
        "Slack-first surfacing of every action — no dashboard hunting",
        "Weekly operator review with Doug — pipeline math, hire/no-hire calls, board prep",
      ],
    },
  ];
  return (
    <section className="section section-soft" id="orchestration">
      <div className="wrap">
        <div className="section-head">
          <span className="eyebrow">02 / The AICRO orchestration layer</span>
          <h2>One system. Four layers. Built for institutional CRE.</h2>
          <p>This is not a tool, an SDR, or a list. It is the orchestration layer that turns the market thesis above into booked demos and platform evaluations — operated by people who have sold the institutional CRE buyer before.</p>
        </div>
        <div style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:18}}>
          {layers.map((l,i) => (
            <div key={i} className="card" style={{padding:26,display:"flex",flexDirection:"column",gap:14,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"}}>LAYER {String(i+1).padStart(2,"0")}</div>
              <div style={{fontFamily:"'JetBrains Mono',monospace",fontSize:10,letterSpacing:"0.10em",color:"var(--slate-500)",textTransform:"uppercase",fontWeight:600,marginTop:8}}>{l.tag}</div>
              <h3 style={{fontSize:19,lineHeight:1.3,color:"var(--shark)",margin:0}}>{l.title}</h3>
              <p style={{fontSize:13.5,color:"var(--slate-500)",lineHeight:1.65,margin:0}}>{l.body}</p>
              <ul style={{listStyle:"none",padding:0,margin:0,display:"flex",flexDirection:"column",gap:8}}>
                {l.bullets.map((b,j) => (
                  <li key={j} style={{fontSize:12.5,color:"var(--slate-700)",lineHeight:1.55,paddingLeft:18,position:"relative"}}>
                    <span style={{position:"absolute",left:0,top:7,width:6,height:6,borderRadius:"50%",background:"#21A8F2"}}></span>
                    {b}
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── Matrix ─────────────────────────────────────
function Matrix() {
  const cols = ["Hire SDR team", "Generic agency", "DIY tool stack", "AICRO"];
  const rows = [
    { row: "Time to first booked demo", vals: [1, 2, 2, 4], aicro: "Day 30 to 45" },
    { row: "Signal-grounded outreach", vals: [1, 1, 2, 4], aicro: "6-source signal layer" },
    { row: "PropTech operator in the room", vals: [2, 1, 1, 4], aicro: "Doug, weekly" },
    { row: "Reply triage in Slack", vals: [1, 1, 2, 4], aicro: "Reply Agent live" },
    { row: "Mid-funnel sales action", vals: [2, 1, 1, 4], aicro: "AICRO Rounds · daily" },
    { row: "Cost predictability", vals: [1, 3, 2, 4], aicro: "$10K/mo · POC" },
    { row: "Institutional CRE buyer fluency", vals: [2, 1, 1, 4], aicro: "7 active CRE clients" },
    { row: "6-month build risk", vals: [1, 2, 2, 4], aicro: "Day 1 = live" },
  ];
  return (
    <section className="section">
      <div className="wrap">
        <div className="section-head">
          <span className="eyebrow">03 / Position</span>
          <h2>Not an agency. Not an SDR hire. A fractional revenue org.</h2>
          <p>A CRO, a delivery team, and a product platform — in one engagement, inside your CRM, paid as one monthly retainer. Steph stays on closing $1M+ ACV institutional deals. Doug runs the systematic outbound layer underneath.</p>
        </div>
        <div className="matrix">
          <table>
            <thead>
              <tr>
                <th style={{width:"24%"}}> </th>
                {cols.map((c,i) => (
                  <th key={i} className={c === "AICRO" ? "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>
  );
}

// ─── Phase 1 — Detect ─────────────
function SignalMapVisual() {
  const nodes = [
    { x:"50%", y:"14%", cls:"hot",   tag:"FUND CLOSE · $650M",          co:"Nuveen Australian RE Debt · CPP commit" },
    { x:"22%", y:"36%", cls:"hot",   tag:"LEADERSHIP CHANGE · CIO",     co:"Heitman · senior promotion" },
    { x:"78%", y:"36%", cls:"warm",  tag:"GRESB Q3 SUBMISSION PREP",    co:"Beacon Capital · ESG cycle" },
    { x:"22%", y:"66%", cls:"warm",  tag:"DISPOSITION · CORE PORTFOLIO", co:"Penzance · major asset sale" },
    { x:"78%", y:"66%", cls:"match", tag:"NEW VEHICLE LAUNCH",           co:"Investcorp · net-zero fund" },
    { x:"50%", y:"86%", cls:"hot",   tag:"ULI / NAREIM PANEL · 2026",    co:"Harrison Street CIO speaking" },
  ];
  return (
    <div className="signal-map">
      <div className="grid"></div>
      <div className="ring r4"></div>
      <div className="ring r3"></div>
      <div className="ring r2"></div>
      <div className="ring r1"></div>
      <div className="signal-pulse"></div>
      <div className="core">
        <span className="l">Live evaluation signals</span>
        <span className="v">142</span>
        <span className="s">↑ 18 new this week</span>
      </div>
      {nodes.map((n,i) => (
        <div key={i} className={"signal-node " + n.cls} style={{left:n.x, top:n.y}}>
          <span className="ndot"></span>
          <div className="nbody">
            <span className="ntag">{n.tag}</span>
            <span className="nco">{n.co}</span>
          </div>
        </div>
      ))}
    </div>
  );
}

function PhaseDetect() {
  const sources = [
    { lbl:"Fund close + capital raise",        val:"Institutional capital deployment windows" },
    { lbl:"Major acquisition + disposition",   val:"Portfolio recomposition triggers" },
    { lbl:"Senior leadership change",          val:"New CIO / Head of AM / Head of ESG" },
    { lbl:"GRESB + ESG disclosure cycles",     val:"Q3 submission window prep" },
    { lbl:"Retrofit RFPs + capex commitments", val:"Decarbonization mandates" },
    { lbl:"ULI / NAREIM / GRESB / PERE",       val:"Conference + panel attendance" },
  ];
  return (
    <div>
      <SignalMapVisual/>
      <div className="signal-sources">
        {sources.map((s,i) => (
          <div key={i} className="signal-source-card">
            <span className="lbl">{s.lbl}</span>
            <span className="val">{s.val}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

// ─── Phase 2 — Outreach ─────────────
function PhaseOutreach() {
  const products = [
    {
      mark:"send",
      name:"AICRO Send",
      tag:"EMAIL OUTBOUND PLATFORM",
      desc:"75+ warmed sender domains, calibrated for institutional CRE inbox patterns. Mid-day open windows match east-coast investment-committee rhythms. Cambio voice in every line.",
      feats:["75+ warm domains", "Auto-failover routing", "98.4% deliverability"],
      stats:[ {v:"3,302", l:"sent / day"}, {v:"+72%", l:"reply rate"} ],
    },
    {
      mark:"connect",
      name:"AICRO Connect",
      tag:"LINKEDIN AUTOMATION",
      desc:"Multi-seat orchestration across 6 to 8 SDR profiles. Title-tier-aware: VPs of Asset Management and Heads of ESG get the A track; analysts get the C track.",
      feats:["Multi-seat orchestration", "Title-tier sequencing", "Institutional CRE vocabulary"],
      stats:[ {v:"47%", l:"accept rate"}, {v:"54%", l:"positive rate"} ],
    },
    {
      mark:"agent",
      name:"AICRO Outreach Agent",
      tag:"HYPER-PERSONALIZATION LAYER",
      desc:"Reads each contact's role, recent firm activity, and the trigger signal. Writes the relevance line. Anchors the Nuveen $9.2M proof point. Cambio-voice approved before send.",
      feats:["Signal-grounded copy", "Per-firm trigger hook", "Human-in-the-loop QA"],
      stats:[ {v:"+37%", l:"acceptance"}, {v:"Live", l:"hot-reply triage"} ],
    },
  ];
  const markIcon = {
    send: (
      <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
        <rect x="3" y="5" width="18" height="14" rx="2"/>
        <path d="M3 7l9 6 9-6"/>
      </svg>
    ),
    connect: (
      <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
        <rect x="3" y="3" width="18" height="18" rx="2"/>
        <line x1="8" y1="11" x2="8" y2="17"/>
        <circle cx="8" cy="7.5" r="1.2" fill="#fff" stroke="none"/>
        <path d="M12 17v-4a3 3 0 0 1 6 0v4"/>
      </svg>
    ),
    agent: (
      <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
        <path d="M12 3v3M12 18v3M3 12h3M18 12h3M5.6 5.6l2.1 2.1M16.3 16.3l2.1 2.1M5.6 18.4l2.1-2.1M16.3 7.7l2.1-2.1"/>
        <circle cx="12" cy="12" r="3.2" fill="#fff" stroke="none"/>
      </svg>
    ),
  };
  return (
    <div className="outreach-stack">
      {products.map((p,i) => (
        <div key={i} className="outreach-card">
          <div className="ohead">
            <div className="ologo">
              <div className={"omark " + p.mark}>
                {markIcon[p.mark]}
              </div>
              <div>
                <div className="oname">{p.name}</div>
                <div className="otag">{p.tag}</div>
              </div>
            </div>
          </div>
          <div className="odesc">{p.desc}</div>
          <div className="ofeats">
            {p.feats.map((f,j) => <div key={j} className="ofeat">{f}</div>)}
          </div>
          <div className="ostats">
            {p.stats.map((s,j) => (
              <div key={j} className="ostat">
                <span className="v">{s.v}</span>
                <span className="l">{s.l}</span>
              </div>
            ))}
          </div>
        </div>
      ))}
    </div>
  );
}

// ─── Phase 3 — Convert ─────────────
function SlackCard({ time = "10:00 AM", subtitle = "AICRO Agent", subtitleDot = "#3DDC97", showApprove = false, children }) {
  return (
    <div className="slack-card">
      <div className="slack-head">
        <div className="slack-avatar">
          <img src="assets/aicro-brand-mark.svg" alt="AICRO" width="18" height="18"/>
        </div>
        <div className="slack-meta">
          <div className="slack-name-line">
            <span className="slack-name">AICRO</span>
            <span className="slack-bot">APP</span>
            <span className="slack-time">{time}</span>
          </div>
          <div className="slack-subline">
            <span className="slack-sdot" style={{background: subtitleDot}}></span>{subtitle}
          </div>
        </div>
        {showApprove && (
          <div className="slack-emoji-row">
            <span className="slack-emoji">✓ 1</span>
            <span className="slack-emoji">👀 2</span>
          </div>
        )}
      </div>
      <div className="slack-body">
        {children}
      </div>
    </div>
  );
}

function ReplyAgentCard() {
  return (
    <SlackCard time="1:15 PM" subtitle="POSITIVE (Interested)" subtitleDot="#3DDC97" showApprove>
      <div className="slack-status-bar">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><path d="M5 13l4 4L19 7"/></svg>
        Approved successful
      </div>
      <div className="slack-source-line"><strong>Source:</strong> 🔗 LinkedIn  |  <strong>Sent by:</strong> Cambio AE 1</div>
      <div className="slack-row-a">
        <div className="slack-field">
          <span className="k">Name:</span>
          <span className="v">Saira Malik</span>
          <span className="k" style={{marginTop:6}}>Job Title:</span>
          <span className="v">Chief Investment Officer</span>
          <span className="k" style={{marginTop:6}}>Company:</span>
          <span className="v">Acre · Grade A · sustainability focus</span>
        </div>
        <div className="slack-field">
          <span className="k">Email:</span>
          <span className="v link">smalik@acre.com</span>
          <span className="k" style={{marginTop:6}}>Campaign:</span>
          <span className="v">EM | Capex prioritization | CIOs</span>
        </div>
      </div>
      <div className="slack-pill"><span className="pdot"></span>Active sustainability commitment · GRESB Q3 prep</div>
      <div className="slack-block">
        <span className="lbl">Last Reply:</span>
        <span className="val">The Nuveen number caught my attention. We&rsquo;re running parallel GRESB and SFDR cycles right now and the analyst lift is brutal. What does the Cambio capex layer look like for a portfolio at our scale? Worth a 30 min walk-through.</span>
      </div>
      <div className="slack-block">
        <span className="lbl">Generated Response:</span>
        <span className="val">Saira — quickest path is showing the actual Nuveen capex layer against three of your live assets. We&rsquo;d pull GRESB submission data and decarbonization signals into one capex stack. Tomorrow at 10 ET or Thursday afternoon?</span>
      </div>
      <div className="slack-actions">
        <span className="slack-action"><span className="pdot" style={{width:7,height:7,borderRadius:"50%",background:"#21A8F2"}}></span>iMessage</span>
        <span className="slack-action danger">Not An ICP</span>
        <span className="slack-action">📁 Battlecard</span>
        <span className="slack-action">📋 CRM</span>
        <span className="slack-action">📥 Inbox</span>
        <span className="slack-action">🔗 LinkedIn</span>
      </div>
      <div className="slack-thread">↳ 1 reply 2 days ago</div>
    </SlackCard>
  );
}

function SalesActionCard() {
  return (
    <SlackCard time="5:39 PM" subtitle="AICRO ROUNDS · GRADE A · SALES ACTION" subtitleDot="#3DDC97">
      <div style={{fontSize:12.5,color:"#fff",marginBottom:4}}>
        <strong>Heitman | Mary Ludgin</strong> · <span style={{color:"#A8AFC0"}}>$240,000 ACV · Stage: Demo Held</span>
      </div>
      <div style={{fontSize:12,color:"#A8AFC0",marginBottom:10}}>Recommended for: Cambio AE 2</div>
      <div className="slack-source-line">
        <strong>Source:</strong> CRM · <strong>Run:</strong> AICRO Rounds · Sat April 25 · <strong>Close date:</strong> 2026-06-30
      </div>
      <div className="slack-row-a">
        <div className="slack-field">
          <span className="k">Contact:</span>
          <span className="v">Mary Ludgin</span>
          <span className="k" style={{marginTop:6}}>Title:</span>
          <span className="v">Senior MD · Global Head of Research</span>
        </div>
        <div className="slack-field">
          <span className="k">Email:</span>
          <span className="v link">mludgin@heitman.com</span>
          <span className="k" style={{marginTop:6}}>Company:</span>
          <span className="v">Heitman · Grade A · TCFD aligned</span>
        </div>
      </div>
      <div className="slack-engagement">
        <div className="slack-engagement-head">📊 Engagement</div>
        <div className="slack-engagement-line">• Last meaningful activity: <strong>22d ago</strong></div>
        <div className="slack-engagement-line">• Pattern: <em>Capex demo, no portfolio-level pilot scoped</em></div>
      </div>
      <div className="slack-block" style={{marginTop:10}}>
        <span style={{fontSize:12.5,color:"#fff",fontWeight:600}}>📞 TODAY · PHONE → Mary Ludgin (+1 ###-###-####)</span>
      </div>
      <div className="slack-quote">
        Mary, AICRO Rounds flagged your account. You sat through the capex layer demo on April 7 and we haven&rsquo;t scoped a pilot portfolio. I want 15 minutes this week to walk three of your active assets through the Nuveen capex stack live. Tuesday or Wednesday?
      </div>
      <div className="slack-callout">📞 If voicemail: Mary, following up on the April 7 capex demo. Texting you a quick note with three live capex outputs against your portfolio.</div>
      <div className="slack-callout" style={{color:"#A8AFC0",marginTop:8}}>
        <strong style={{color:"#fff"}}>Why now:</strong> Demo held 22 days ago; no pilot scoped. Heitman is a Grade A asset manager — TCFD aligned, GRESB Q3 cycle in 60 days. Window is closing.
      </div>
      <div className="slack-signals">
        <span className="sl">Signals observed:</span>
        <ul>
          <li>Capex layer demo April 7, 2026, 22 days ago, no follow-up logged</li>
          <li>Heitman is institutional asset manager with active sustainability program — direct ICP fit</li>
          <li>GRESB Q3 submission window opens in ~60 days — capex prioritization is the bottleneck</li>
        </ul>
      </div>
      <div className="slack-actions">
        <span className="slack-action">View Deal</span>
        <span className="slack-action success">✓ Handled</span>
        <span className="slack-action">📊 Show 3 similar wins</span>
        <span className="slack-action">↻ Try another angle</span>
        <span className="slack-action">💡 Why this priority?</span>
        <span className="slack-action danger">Not relevant</span>
      </div>
    </SlackCard>
  );
}

function PhaseConvert() {
  return (
    <div className="convert-grid">
      <div>
        <div style={{fontFamily:"'JetBrains Mono',monospace",fontSize:10,letterSpacing:"0.14em",color:"var(--slate-500)",textTransform:"uppercase",marginBottom:10,fontWeight:500}}>
          ↳ Reply Agent · live in Slack
        </div>
        <ReplyAgentCard/>
      </div>
      <div className="convert-side">
        <div>
          <div style={{fontFamily:"'JetBrains Mono',monospace",fontSize:10,letterSpacing:"0.14em",color:"var(--slate-500)",textTransform:"uppercase",marginBottom:10,fontWeight:500}}>
            ↳ Inbound Sales Agent · AICRO Rounds
          </div>
          <SalesActionCard/>
        </div>
      </div>
    </div>
  );
}

// ─── Phase 4 — Compound ─────────────────
function PhaseCompound() {
  const cards = [
    { l:"CAC", v:"−54%", d:"vs in-house SDR + manager" },
    { l:"Demo → pilot scoped", v:"+118%", d:"AICRO Rounds + Reply Agent" },
    { l:"Lookalike account expansion", v:"3.2×", d:"Nuveen + BGO seed → next 200" },
    { l:"Time to insight", v:"−72%", d:"signal → action" },
  ];
  return (
    <div>
      <div style={{display:"grid",gridTemplateColumns:"repeat(4,1fr)",gap:14,marginBottom:18}}>
        {cards.map((c,i) => (
          <div key={i} className="card" style={{padding:22}}>
            <div style={{fontFamily:"'JetBrains Mono',monospace",fontSize:10,letterSpacing:"0.12em",color:"var(--slate-500)",textTransform:"uppercase",fontWeight:500,marginBottom:8}}>{c.l}</div>
            <div style={{fontSize:32,fontWeight:600,color:"var(--mint-deep)",letterSpacing:"-0.02em",lineHeight:1}}>{c.v}</div>
            <div style={{fontSize:12,color:"var(--slate-500)",marginTop:6}}>{c.d}</div>
          </div>
        ))}
      </div>
      <div style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:14}}>
        <div className="card" style={{padding:24}}>
          <div style={{fontFamily:"'JetBrains Mono',monospace",fontSize:10,letterSpacing:"0.12em",color:"var(--slate-500)",textTransform:"uppercase",fontWeight:500,marginBottom:10}}>Cadence</div>
          <h3 style={{marginBottom:8,fontSize:18}}>Monday: signal review with Steph + John.<br/>Friday: pipeline MBR.<br/>Quarterly: board math you can defend.</h3>
          <p style={{fontSize:13,color:"var(--slate-500)"}}>Doug walks the room weekly. Every reply, every meeting, every closed-won asset manager makes the next signal sharper.</p>
        </div>
        <div className="card" style={{padding:24}}>
          <div style={{fontFamily:"'JetBrains Mono',monospace",fontSize:10,letterSpacing:"0.12em",color:"var(--slate-500)",textTransform:"uppercase",fontWeight:500,marginBottom:10}}>Compounding loop</div>
          <h3 style={{marginBottom:8,fontSize:18}}>Each new asset manager who signs<br/>makes the next lookalike pool sharper.</h3>
          <p style={{fontSize:13,color:"var(--slate-500)"}}>Closed-won lookalikes feed back into the seed list. Quarterly refresh tunes the signal pack against actual won-firm patterns — Nuveen + BGO + LaSalle today, the next 10 institutional logos within two quarters.</p>
        </div>
      </div>
    </div>
  );
}

// ─── System tabs — color-coded workflows ─────────────────────────────────
function SignalToScale() {
  const phases = [
    {
      num:"PHASE 01", title:"Detect", head:"Detect the signal — across six surfaces.",
      body:"Fund closes, leadership changes, dispositions, GRESB cycles, retrofit RFPs, and conference attendance. The signal map is built for Cambio's actual buying-trigger thesis: institutional asset managers in motion who need a capex decision layer.",
      color:"#21A8F2", colorTint:"#E9F5FE",
      icon: (
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
          <circle cx="11" cy="11" r="7"/><path d="M21 21l-4.35-4.35"/>
        </svg>
      ),
      Render: PhaseDetect,
    },
    {
      num:"PHASE 02", title:"Outreach", head:"Intelligent outreach.",
      body:"Three products, one campaign. AICRO Send runs the email engine across 75 warmed inboxes. AICRO Connect runs LinkedIn in parallel. The Outreach Agent personalizes every message in Cambio's voice — peer-to-peer, anchored on the Nuveen $9.2M proof point.",
      color:"#9D4EDD", colorTint:"#F4ECFE",
      icon: (
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
          <path d="M22 2L11 13"/><path d="M22 2l-7 20-4-9-9-4 20-7z"/>
        </svg>
      ),
      Render: PhaseOutreach,
    },
    {
      num:"PHASE 03", title:"Convert", head:"Accelerate conversion.",
      body:"The Reply Agent triages and drafts within minutes. The Inbound Sales Agent grades opportunities against your live CRM, recommends the next action, and routes it to the right Cambio rep — in Slack, in your CRM. Demo-held-no-pilot is a daily Rounds query.",
      color:"#0E9F66", colorTint:"#E5F9F0",
      icon: (
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
          <path d="M5 13l4 4L19 7"/>
        </svg>
      ),
      Render: PhaseConvert,
    },
    {
      num:"PHASE 04", title:"Compound", head:"Compound performance.",
      body:"Every win sharpens the seed list. Every closed asset manager makes the lookalike pool more accurate. Monday's signal review turns into the QBR your board sees.",
      color:"#FF8559", colorTint:"#FFEEE5",
      icon: (
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
          <path d="M3 17l6-6 4 4 8-8"/><path d="M14 7h7v7"/>
        </svg>
      ),
      Render: PhaseCompound,
    },
  ];
  const [active, setActive] = useState(0);
  const p = phases[active];
  const Body = p.Render;
  return (
    <section className="section section-soft" id="system">
      <div className="wrap">
        <div className="section-head">
          <span className="eyebrow">04 / The system in motion</span>
          <h2>Signal to scale, in four phases.</h2>
          <p>Click each phase to switch the live workflow below — Detect, Outreach, Convert, Compound. Each is a different color and a different surface.</p>
        </div>
        <div className="s2s" style={{borderTop:`4px solid ${p.color}`,transition:"border-color .25s ease"}}>
          <div className="s2s-head" style={{display:"grid",gridTemplateColumns:"repeat(4,1fr)",gap:0}}>
            {phases.map((ph, i) => {
              const isActive = i === active;
              return (
                <div
                  key={i}
                  onClick={() => setActive(i)}
                  style={{
                    cursor:"pointer",
                    padding:"22px 24px",
                    background: isActive ? "#fff" : ph.colorTint,
                    borderBottom: isActive ? `4px solid ${ph.color}` : "4px solid transparent",
                    borderRight: i < 3 ? "1px solid var(--mist)" : "none",
                    display:"flex",alignItems:"center",gap:14,
                    transition:"all .2s ease",
                    position:"relative",
                  }}
                >
                  <div style={{
                    width:36,height:36,borderRadius:10,
                    background: ph.color,
                    color:"#fff",
                    display:"flex",alignItems:"center",justifyContent:"center",
                    flexShrink:0,
                    boxShadow: isActive ? `0 0 0 4px ${ph.colorTint}` : "none",
                    transition:"box-shadow .2s ease",
                  }}>
                    {ph.icon}
                  </div>
                  <div style={{display:"flex",flexDirection:"column",gap:2,minWidth:0}}>
                    <span style={{
                      fontFamily:"'JetBrains Mono',monospace",
                      fontSize:9.5,letterSpacing:"0.10em",fontWeight:600,
                      color: isActive ? ph.color : "var(--slate-500)",
                      textTransform:"uppercase",
                    }}>{ph.num} {isActive ? "· active" : "· click"}</span>
                    <span style={{
                      fontSize:17,fontWeight:600,letterSpacing:"-0.01em",
                      color: isActive ? "var(--shark)" : "var(--slate-700)",
                    }}>{ph.title}</span>
                  </div>
                </div>
              );
            })}
          </div>
          <div style={{padding:32, borderTop:`1px solid ${p.colorTint}`}}>
            <div style={{display:"flex",alignItems:"center",gap:10,marginBottom:14}}>
              <span style={{
                padding:"4px 10px",borderRadius:99,
                background: p.colorTint, color: p.color,
                fontFamily:"'JetBrains Mono',monospace",fontSize:10,
                letterSpacing:"0.08em",fontWeight:700,textTransform:"uppercase",
              }}>{p.num} · {p.title}</span>
            </div>
            <div style={{display:"grid",gridTemplateColumns:"1fr",gap:14,marginBottom:24,maxWidth:780}}>
              <h3 style={{fontSize:24}}>{p.head}</h3>
              <p style={{color:"var(--slate-500)",fontSize:15}}>{p.body}</p>
            </div>
            <Body/>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── ICP DATA — segment switcher ─────────────
const ICP_DATA = {
  asset_manager: {
    label: "Asset Managers",
    sub: "Nuveen-tier · institutional allocators · seed segment",
    summary: "Grade-A asset managers booking capex demos within the week.",
    summaryBody: "Heitman, Harrison Street, Caliber, and Acre have at least one VP-Asset-Mgmt or CIO-level positive reply this month. The Nuveen $9.2M anchor is the highest-converting opener — Saira Malik (CIO, Acre) replied within 6 hours of a signal-triggered LinkedIn DM. Pipeline is compounding week-over-week.",
    kpis: { sent:"18,420", positives:"94", meetings:"22", pipeline:"$2.6M ACV potential", revenue:"3 pilots" },
    deltas: { sent:"+24% last 30d", positives:"+62% last 30d", meetings:"+57% last 30d", pipeline:"+148% last 30d", revenue:"+2 last 30d" },
    ratio: "196:1",
    campaigns: [
      { type:"em", name:"EM | Capex prioritization | VPs Asset Mgmt", sent:"4,820", contacted:"3,140", connReq:"-", connAcc:"-", positives:"38", posRate:"28.4%", accept:"-" },
      { type:"li", name:"LI | CIOs + Heads of AM | Grade A Allocators", sent:"312", contacted:"264", connReq:"264", connAcc:"122", positives:"24", posRate:"61.1%", accept:"46.2%", active:true },
      { type:"em", name:"EM | Nuveen $9.2M anchor | Senior VPs", sent:"3,240", contacted:"2,118", connReq:"-", connAcc:"-", positives:"18", posRate:"24.4%", accept:"-" },
      { type:"li", name:"LI | Investment Directors | National", sent:"148", contacted:"122", connReq:"122", connAcc:"58", positives:"10", posRate:"52.6%", accept:"47.5%" },
      { type:"em", name:"EM | Portfolio capex stack | Mid-market AM", sent:"1,820", contacted:"1,212", connReq:"-", connAcc:"-", positives:"4", posRate:"19.2%", accept:"-" },
    ],
    drawer: {
      name: "LI | CIOs + Heads of AM | Grade A Allocators",
      replies: 39, posPct: 61.5, neuPct: 38.5,
      funnel: [
        { stage:"Connection Requests", val:312, w:100, color:"linear-gradient(90deg,#21A8F2,#5AC0FF)" },
        { stage:"Contacted", val:264, w:84, color:"linear-gradient(90deg,#5A8BEE,#7E73E8)", pct:"84.6%" },
        { stage:"Accepted", val:122, w:39, color:"linear-gradient(90deg,#7E73E8,#9D4EDD)", pct:"46.2%" },
        { stage:"Replied", val:39, w:14, color:"linear-gradient(90deg,#9D4EDD,#C04AC9)", pct:"32.0%" },
        { stage:"Positive", val:24, w:9, color:"linear-gradient(90deg,#C04AC9,#D946B0)", pct:"61.5%" },
        { stage:"Meetings", val:11, w:5, color:"#0E9F66", pct:"45.8%" },
        { stage:"Pilots", val:3, w:3, color:"#0E9F66", pct:"3 active" },
        { stage:"Closed Won", val:1, w:2, color:"#0E9F66", pct:"1 paid" },
      ],
      recent: [
        { name:"Saira Malik · Acre", date:"Apr 28", tag:"Pilot Scoped", booked:true },
        { name:"Mary Ludgin · Heitman", date:"Apr 27", tag:"Demo Booked", booked:true },
        { name:"Craig Tagen · Virtua Partners", date:"Apr 26", tag:"Interested" },
        { name:"Dave Trent · Virtua Partners", date:"Apr 25", tag:"Demo Booked", booked:true },
        { name:"Karen Mahrous · Virtua (ESG)", date:"Apr 24", tag:"Interested" },
        { name:"Julie Raice · Virtua Partners", date:"Apr 23", tag:"Interested" },
        { name:"Margaret Egan · Virtua", date:"Apr 22", tag:"Interested" },
      ],
    },
  },
  re_pe: {
    label: "Real Estate PE",
    sub: "Investcorp / Heitman / Harrison Street tier",
    summary: "RE PE allocation teams responding to fund-cycle triggers.",
    summaryBody: "Investcorp, Caliber, Harrison Street, and Heitman all have active fund-close or capital-raise signals firing this quarter. Different pain (portfolio underwriting + fund-level capex narrative for LPs), different angle (Cambio as the data-layer that defends LP reporting), proof anchor: Nuveen capex layer applied at fund level.",
    kpis: { sent:"6,140", positives:"28", meetings:"6", pipeline:"$960K ACV potential", revenue:"1 pilot" },
    deltas: { sent:"+18% last 30d", positives:"+44% last 30d", meetings:"+50% last 30d", pipeline:"+87% last 30d", revenue:"+1 last 30d" },
    ratio: "219:1",
    campaigns: [
      { type:"em", name:"EM | Fund-cycle capex narrative | RE PE", sent:"2,140", contacted:"1,388", connReq:"-", connAcc:"-", positives:"14", posRate:"24.0%", accept:"-" },
      { type:"li", name:"LI | Heads of Acquisitions | National", sent:"148", contacted:"112", connReq:"112", connAcc:"48", positives:"8", posRate:"52.9%", accept:"42.9%", active:true },
      { type:"em", name:"EM | LP reporting layer | Senior VPs", sent:"1,820", contacted:"1,124", connReq:"-", connAcc:"-", positives:"6", posRate:"19.4%", accept:"-" },
    ],
    drawer: {
      name: "LI | Heads of Acquisitions | National",
      replies: 15, posPct: 53.3, neuPct: 46.7,
      funnel: [
        { stage:"Connection Requests", val:148, w:100, color:"linear-gradient(90deg,#21A8F2,#5AC0FF)" },
        { stage:"Contacted", val:112, w:76, color:"linear-gradient(90deg,#5A8BEE,#7E73E8)", pct:"75.7%" },
        { stage:"Accepted", val:48, w:32, color:"linear-gradient(90deg,#7E73E8,#9D4EDD)", pct:"42.9%" },
        { stage:"Replied", val:15, w:10, color:"linear-gradient(90deg,#9D4EDD,#C04AC9)", pct:"31.3%" },
        { stage:"Positive", val:8, w:5, color:"linear-gradient(90deg,#C04AC9,#D946B0)", pct:"53.3%" },
        { stage:"Meetings", val:3, w:2, color:"#0E9F66", pct:"37.5%" },
        { stage:"Pilots", val:1, w:2, color:"#0E9F66", pct:"1 active" },
        { stage:"Closed Won", val:0, w:1, color:"#CBD5E1", pct:"-" },
      ],
      recent: [
        { name:"Adam Stern · Investcorp", date:"Apr 28", tag:"Demo Booked", booked:true },
        { name:"Priya Malhotra · Heitman", date:"Apr 26", tag:"Interested" },
        { name:"Tom Reid · Harrison Street", date:"Apr 25", tag:"Interested" },
        { name:"Carol Yang · Caliber", date:"Apr 23", tag:"Pilot Scoped", booked:true },
      ],
    },
  },
  owners_reits: {
    label: "Owners & REITs",
    sub: "Boston Properties / Beacon / Penzance tier",
    summary: "Owners and REITs responding to retrofit + decarbonization triggers.",
    summaryBody: "Boston Properties, Beacon Capital, Penzance, and TA Realty all have live retrofit / capex / sustainability signals this quarter. Pain is portfolio-level capex prioritization, not asset-by-asset spreadsheet builds. Proof anchor: Nuveen $9.2M as the operational benchmark.",
    kpis: { sent:"8,820", positives:"42", meetings:"9", pipeline:"$1.4M ACV potential", revenue:"2 pilots" },
    deltas: { sent:"+22% last 30d", positives:"+58% last 30d", meetings:"+80% last 30d", pipeline:"+124% last 30d", revenue:"+2 last 30d" },
    ratio: "210:1",
    campaigns: [
      { type:"em", name:"EM | Portfolio-level capex stack | Owners", sent:"3,140", contacted:"2,018", connReq:"-", connAcc:"-", positives:"22", posRate:"26.4%", accept:"-" },
      { type:"li", name:"LI | Heads of Asset Mgmt | REITs", sent:"212", contacted:"180", connReq:"180", connAcc:"82", positives:"14", posRate:"56.0%", accept:"45.6%", active:true },
      { type:"em", name:"EM | Decarbonization investment case | VPs", sent:"2,420", contacted:"1,612", connReq:"-", connAcc:"-", positives:"6", posRate:"22.2%", accept:"-" },
    ],
    drawer: {
      name: "LI | Heads of Asset Mgmt | REITs",
      replies: 25, posPct: 56.0, neuPct: 44.0,
      funnel: [
        { stage:"Connection Requests", val:212, w:100, color:"linear-gradient(90deg,#21A8F2,#5AC0FF)" },
        { stage:"Contacted", val:180, w:85, color:"linear-gradient(90deg,#5A8BEE,#7E73E8)", pct:"84.9%" },
        { stage:"Accepted", val:82, w:39, color:"linear-gradient(90deg,#7E73E8,#9D4EDD)", pct:"45.6%" },
        { stage:"Replied", val:25, w:12, color:"linear-gradient(90deg,#9D4EDD,#C04AC9)", pct:"30.5%" },
        { stage:"Positive", val:14, w:7, color:"linear-gradient(90deg,#C04AC9,#D946B0)", pct:"56.0%" },
        { stage:"Meetings", val:5, w:3, color:"#0E9F66", pct:"35.7%" },
        { stage:"Pilots", val:2, w:2, color:"#0E9F66", pct:"2 active" },
        { stage:"Closed Won", val:0, w:1, color:"#CBD5E1", pct:"-" },
      ],
      recent: [
        { name:"Mark Allen · Beacon Capital", date:"Apr 28", tag:"Pilot Scoped", booked:true },
        { name:"Sara Lim · Boston Properties", date:"Apr 27", tag:"Demo Booked", booked:true },
        { name:"David Cho · TA Realty", date:"Apr 25", tag:"Interested" },
        { name:"Janelle Owen · Penzance", date:"Apr 24", tag:"Interested" },
      ],
    },
  },
  esg_lead: {
    label: "ESG / Responsible Investing",
    sub: "Heads of ESG · Global RI · Sustainability leads",
    summary: "ESG leads responding to GRESB / SFDR / TCFD reporting prep.",
    summaryBody: "Heads of ESG, Global Heads of Responsible Investing, and Sustainability VPs are running parallel GRESB, SFDR, and TCFD cycles right now. Pain is data layer: stitching submission data instead of deciding which retrofits to fund. Proof anchor: Cambio Vault auto-generated disclosures + Nuveen $9.2M outcome.",
    kpis: { sent:"5,420", positives:"22", meetings:"5", pipeline:"$840K ACV potential", revenue:"1 pilot" },
    deltas: { sent:"+16% last 30d", positives:"+36% last 30d", meetings:"+25% last 30d", pipeline:"+92% last 30d", revenue:"+1 last 30d" },
    ratio: "246:1",
    campaigns: [
      { type:"em", name:"EM | GRESB Q3 prep | Heads of ESG", sent:"1,820", contacted:"1,212", connReq:"-", connAcc:"-", positives:"10", posRate:"24.4%", accept:"-" },
      { type:"li", name:"LI | Global Heads of RI | Allocators", sent:"148", contacted:"122", connReq:"122", connAcc:"54", positives:"8", posRate:"58.3%", accept:"44.3%", active:true },
      { type:"em", name:"EM | SFDR + TCFD disclosure layer", sent:"1,420", contacted:"918", connReq:"-", connAcc:"-", positives:"4", posRate:"21.1%", accept:"-" },
    ],
    drawer: {
      name: "LI | Global Heads of RI | Allocators",
      replies: 14, posPct: 57.1, neuPct: 42.9,
      funnel: [
        { stage:"Connection Requests", val:148, w:100, color:"linear-gradient(90deg,#21A8F2,#5AC0FF)" },
        { stage:"Contacted", val:122, w:82, color:"linear-gradient(90deg,#5A8BEE,#7E73E8)", pct:"82.4%" },
        { stage:"Accepted", val:54, w:36, color:"linear-gradient(90deg,#7E73E8,#9D4EDD)", pct:"44.3%" },
        { stage:"Replied", val:14, w:9, color:"linear-gradient(90deg,#9D4EDD,#C04AC9)", pct:"25.9%" },
        { stage:"Positive", val:8, w:5, color:"linear-gradient(90deg,#C04AC9,#D946B0)", pct:"57.1%" },
        { stage:"Meetings", val:3, w:2, color:"#0E9F66", pct:"37.5%" },
        { stage:"Pilots", val:1, w:1, color:"#0E9F66", pct:"1 active" },
        { stage:"Closed Won", val:0, w:1, color:"#CBD5E1", pct:"-" },
      ],
      recent: [
        { name:"Karen Mahrous · Virtua (Head of ESG)", date:"Apr 28", tag:"Demo Booked", booked:true },
        { name:"Global Head of RI · Allocator", date:"Apr 26", tag:"Interested" },
        { name:"Head of Sustainability · REIT", date:"Apr 25", tag:"Interested" },
        { name:"Director of ESG · Asset Mgr", date:"Apr 23", tag:"Pilot Scoped", booked:true },
      ],
    },
  },
};

// ─── Sparkline / AreaChart ─────────────────
function Sparkline({ values, color = "#21A8F2", w = 60, h = 22 }) {
  const max = Math.max(...values), min = Math.min(...values);
  const pts = values.map((v,i) => {
    const x = (i/(values.length-1))*w;
    const y = h - ((v-min)/(max-min || 1))*h;
    return `${x},${y}`;
  }).join(" ");
  return (
    <svg width={w} height={h}>
      <polyline points={pts} fill="none" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  );
}

function AreaChart({ values, color = "#0E9F66", w = 380, h = 90 }) {
  const max = Math.max(...values), min = Math.min(...values);
  const pts = values.map((v,i) => {
    const x = (i/(values.length-1))*w;
    const y = h - ((v-min)/(max-min || 1))*h*0.85 - 4;
    return `${x},${y}`;
  });
  const path = "M" + pts.join(" L");
  const area = path + ` L${w},${h} L0,${h} Z`;
  const labels = ["3/29","4/2","4/6","4/10","4/14","4/18","4/22","4/26"];
  return (
    <svg width="100%" viewBox={`0 0 ${w} ${h+18}`} preserveAspectRatio="none">
      <path d={area} fill={color} fillOpacity="0.18"/>
      <path d={path} fill="none" stroke={color} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
      {labels.map((l,i) => {
        const x = (i/(labels.length-1))*w;
        return <text key={i} x={x} y={h+14} fontSize="9" fill="#94A3B8" textAnchor={i===0 ? "start" : i===labels.length-1 ? "end" : "middle"} fontFamily="'JetBrains Mono',monospace">{l}</text>;
      })}
    </svg>
  );
}

// ─── Portal v2 ─────────────────
function ClientPortalV2({ icp }) {
  const data = ICP_DATA[icp];
  const [drawerOpen, setDrawerOpen] = useState(false);
  const [tab, setTab] = useState("client");

  const emailSpark = [4200,3800,4400,3600,4100,3300,3900,3500,3800,3200,3500,3000];
  const liSpark = [25,32,38,45,52,48,46,42,38,34,30,28];

  return (
    <div className="portal-frame">
      <div className="portal-chrome">
        <div className="portal-dots"><span></span><span></span><span></span></div>
        <div className="portal-url">
          <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M12 22s-8-4.5-8-11.8A8 8 0 0 1 12 2a8 8 0 0 1 8 8.2c0 7.3-8 11.8-8 11.8z"/><circle cx="12" cy="10" r="3"/></svg>
          portal.aicro.co / cambio / executive-summary
        </div>
        <div style={{fontSize:11,color:"var(--slate-500)",fontFamily:"'JetBrains Mono',monospace"}}>{data.label.toUpperCase()} · LIVE</div>
      </div>
      <div className="portal-app" style={{height: drawerOpen ? 720 : 720, gridTemplateColumns: "1fr"}}>
        <main className="portal-main" style={{position:"relative"}}>
          <div className="portal-v2-content">
            <div className="portal-v2-h">
              <div className="portal-v2-icon">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 9h18M9 21V9"/></svg>
              </div>
              <h2>Executive Summary</h2>
            </div>
            <div className="portal-v2-sub">Last 30 Days · Key takeaways at a glance</div>

            <div className="executive-summary">
              <div className="es-head">
                <svg className="es-icon" viewBox="0 0 24 24" fill="currentColor"><path d="M13 2L3 14h7l-1 8 10-12h-7l1-8z"/></svg>
                <span className="es-title">{data.summary}</span>
              </div>
              <div className="es-body">{data.summaryBody}</div>
              <div className="es-meta">Updated daily by AICRO AI</div>
              <div className="es-cta">Review hot leads <span style={{marginLeft:2}}>→</span></div>
            </div>

            <div className="portal-v2-overview-h">
              <div>
                <h3>Overview</h3>
                <div className="sub">Stats refresh automatically every hour</div>
              </div>
              <div className="portal-v2-controls">
                <div style={{fontSize:10,fontFamily:"'JetBrains Mono',monospace",letterSpacing:"0.1em",color:"var(--slate-500)",fontWeight:500}}>VIEWS</div>
                <div className="portal-v2-segment">
                  <div className="portal-v2-seg active">Compare</div>
                  <div className="portal-v2-seg" style={{color:"var(--slate-700)"}}>All</div>
                  <div className="portal-v2-seg" style={{color:"var(--slate-700)"}}>Email</div>
                  <div className="portal-v2-seg" style={{color:"var(--slate-700)"}}>LinkedIn</div>
                </div>
                <div style={{fontSize:10,fontFamily:"'JetBrains Mono',monospace",letterSpacing:"0.1em",color:"var(--slate-500)",fontWeight:500}}>TIMEFRAME</div>
                <div className="portal-v2-time">📅 30 Days ▾</div>
              </div>
            </div>

            <div className="portal-v2-charts">
              <div className="portal-v2-chart">
                <div className="portal-v2-chart-h">
                  <span className="portal-v2-chart-title"><span style={{width:14,height:14,background:"#E5F9F0",borderRadius:3,display:"inline-flex",alignItems:"center",justifyContent:"center",color:"#0E9F66",fontSize:9,fontWeight:700}}>✉</span>Email Sent</span>
                  <span className="portal-v2-chart-total">{data.kpis.sent.replace(/,$/, '')} total</span>
                </div>
                <AreaChart values={emailSpark} color="#0E9F66" h={70}/>
              </div>
              <div className="portal-v2-chart">
                <div className="portal-v2-chart-h">
                  <span className="portal-v2-chart-title"><span style={{width:14,height:14,background:"#E1ECFF",borderRadius:3,display:"inline-flex",alignItems:"center",justifyContent:"center",color:"#1F4D9C",fontSize:9,fontWeight:700}}>in</span>LinkedIn Sent</span>
                  <span className="portal-v2-chart-total">370 total</span>
                </div>
                <AreaChart values={liSpark} color="#7E73E8" h={70}/>
              </div>
            </div>

            <div className="portal-v2-bars">
              <div className="portal-v2-bars-h">
                <span className="portal-v2-bars-title">Positive Replies by Channel (Weekly)</span>
                <div className="portal-v2-bars-legend">
                  <div className="item"><span className="sw" style={{background:"#0E9F66"}}></span>Email</div>
                  <div className="item"><span className="sw" style={{background:"#3B6CE6"}}></span>LinkedIn</div>
                </div>
              </div>
              <div className="portal-v2-bars-chart">
                {[
                  { tot:1, em:100, li:0, x:"Mar 23" },
                  { tot:73, em:77, li:23, x:"Mar 30" },
                  { tot:25, em:32, li:68, x:"Apr 6" },
                  { tot:37, em:27, li:73, x:"Apr 13" },
                ].map((c, i) => {
                  return (
                    <div key={i} className="portal-v2-bars-col">
                      <div className="portal-v2-bars-total">{c.tot}</div>
                      <div className="portal-v2-bars-stack" style={{height:Math.max(20, c.tot*1.4)+"px"}}>
                        {c.li > 0 && <div style={{background:"#3B6CE6",height:c.li+"%"}}>{c.li}%</div>}
                        {c.em > 0 && <div style={{background:"#0E9F66",height:c.em+"%"}}>{c.em}%</div>}
                      </div>
                      <div className="portal-v2-bars-x">{c.x}</div>
                    </div>
                  );
                })}
              </div>
            </div>

            <div className="portal-v2-kpis">
              <div className="v2-kpi">
                <span className="l">Total sent</span>
                <span className="v">{data.kpis.sent}</span>
                <span className="d">↑ {data.deltas.sent}</span>
                <span className="spark"><Sparkline values={[40,42,38,44,41,46,48,52]} color="#9D4EDD"/></span>
              </div>
              <div className="v2-kpi">
                <span className="l">Positive replies</span>
                <span className="v">{data.kpis.positives}</span>
                <span className="d">↑ {data.deltas.positives}</span>
                <span className="spark"><Sparkline values={[10,12,14,18,22,26,32,40]} color="#0E9F66"/></span>
                <span className="ratio">{data.ratio}</span>
              </div>
              <div className="v2-kpi">
                <span className="l">Demos booked</span>
                <span className="v">{data.kpis.meetings}</span>
                <span className="d warn">↑ {data.deltas.meetings}</span>
              </div>
              <div className="v2-kpi">
                <span className="l">Pipeline value</span>
                <span className="v">{data.kpis.pipeline}</span>
                <span className="d warn">↑ {data.deltas.pipeline}</span>
              </div>
              <div className="v2-kpi">
                <span className="l">Pilots / Closed</span>
                <span className="v" style={{color:"var(--slate-400)"}}>{data.kpis.revenue}</span>
                <span className="d" style={{color:"var(--slate-400)"}}>{data.deltas.revenue}</span>
              </div>
            </div>

            <div className="portal-v2-tabs">
              <div className={"pt " + (tab==="client" ? "active" : "")} onClick={() => setTab("client")}>Client View</div>
              <div className={"pt " + (tab==="admin" ? "active" : "")} onClick={() => setTab("admin")}>Admin Queue (0)</div>
            </div>

            <div className="portal-v2-camp-h">
              <h3>Campaigns</h3>
              <div className="portal-v2-filter">▽ 2 Selected ▾</div>
            </div>

            <div className="campaigns-table">
              <table>
                <thead>
                  <tr>
                    <th>STATUS ↕</th>
                    <th>TYPE ↕</th>
                    <th>CAMPAIGN NAME ↕</th>
                    <th>SENT ↕</th>
                    <th>CONTACTED ↕</th>
                    <th>CONN. REQ ↕</th>
                    <th>CONN. ACC ↕</th>
                    <th>POSITIVES ↕</th>
                    <th>POS. RATE ↕</th>
                    <th>ACCEPT % ↕</th>
                  </tr>
                </thead>
                <tbody>
                  {data.campaigns.map((c, i) => (
                    <tr key={i} className={c.active ? "active-row" : ""} onClick={() => c.active && setDrawerOpen(true)}>
                      <td><span className="status-pill">● ACTIVE</span></td>
                      <td><span className={"ico-cell " + c.type}>{c.type === "li" ? "in" : "✉"}</span></td>
                      <td style={{color:"var(--slate-900)",fontWeight:500}}>{c.name}</td>
                      <td>{c.sent}</td>
                      <td>{c.contacted}</td>
                      <td>{c.connReq}</td>
                      <td>{c.connAcc}</td>
                      <td className={parseInt(c.positives) > 0 ? "pos" : ""}>{c.positives}</td>
                      <td>{c.posRate}</td>
                      <td>{c.accept}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </div>

          {drawerOpen && (
            <Fragment>
              <div className="drawer-overlay" onClick={() => setDrawerOpen(false)}></div>
              <div className="drawer">
                <div className="drawer-head">
                  <div>
                    <div className="drawer-title">
                      <span className="status-pill" style={{background:"var(--mint-tint)",color:"var(--mint-deep)",fontFamily:"'JetBrains Mono',monospace",fontSize:9,letterSpacing:"0.06em",fontWeight:600}}>● ACTIVE</span>
                      <span style={{color:"var(--slate-700)",fontWeight:500,fontSize:12}}>LinkedIn</span>
                      <span>{data.drawer.name}</span>
                    </div>
                    <div className="drawer-meta">
                      <span><strong>Replies:</strong> <span className="v">{data.drawer.replies}</span></span>
                      <span style={{color:"var(--mint-deep)",fontWeight:600}}>● {data.drawer.posPct}% Positive</span>
                      <span style={{color:"var(--slate-500)"}}>● {data.drawer.neuPct}% Neutral</span>
                    </div>
                    <div className="drawer-progress">
                      <div className="pos-fill" style={{width:data.drawer.posPct+"%"}}></div>
                      <div className="neu-fill" style={{width:data.drawer.neuPct+"%"}}></div>
                    </div>
                  </div>
                  <button className="drawer-x" onClick={() => setDrawerOpen(false)}>×</button>
                </div>
                <div className="drawer-body">
                  <div className="drawer-stats">
                    <div className="drawer-stats-tabs">
                      <div className="drawer-stats-tab active">Stats</div>
                      <div className="drawer-stats-tab">Copy</div>
                    </div>
                    {data.drawer.funnel.map((f,i) => (
                      <div key={i} className="funnel-bar">
                        <span className="stage">{f.stage}<svg className="info-i" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg></span>
                        <span className="track">
                          <span className="fill" style={{width:f.w+"%",background:f.color}}>{f.val}</span>
                        </span>
                        <span className="pct">{f.pct}</span>
                      </div>
                    ))}
                    <div className="drawer-foot">
                      <div className="item">
                        <div className="l">MSG : POSITIVE</div>
                        <div className="v">{data.drawer.funnel[1].val && data.drawer.funnel[4].val ? Math.round(data.drawer.funnel[1].val / data.drawer.funnel[4].val) + ":1" : "—"}</div>
                        <div className="ind">Excellent</div>
                      </div>
                      <div className="item">
                        <div className="l">POSITIVE RATE</div>
                        <div className="v">{data.drawer.posPct}%</div>
                        <div className="ind">Excellent</div>
                      </div>
                    </div>
                  </div>
                  <div className="drawer-replies">
                    <div className="drawer-replies-h">
                      <h4>Campaign Replies</h4>
                      <span className="badge">● {data.drawer.replies}</span>
                    </div>
                    {data.drawer.recent.map((r,i) => (
                      <div key={i} className="drawer-reply">
                        <div className="drawer-reply-top">
                          <span className="drawer-reply-name">{r.name}</span>
                          <span className="drawer-reply-date">{r.date}</span>
                        </div>
                        <span className={"drawer-reply-tag " + (r.booked ? "booked" : "interested")}>{r.tag}</span>
                      </div>
                    ))}
                  </div>
                </div>
              </div>
            </Fragment>
          )}
        </main>
      </div>
    </div>
  );
}

// ─── NEW: Already built — proof-of-work for Cambio ──────────────────────
function AlreadyBuilt() {
  const stats = [
    { v:"10", l:"Institutional anchors · sample", s:"Tier-1 lookalikes seeded from Nuveen. The full system maps hundreds of anchors per quarter — this is the slice we built for today." },
    { v:"27", l:"Firms graded · sample", s:"11 Grade A · 16 Grade B · firm-type tagged · trigger-coded. The graded universe at full run is 800+ firms refreshed weekly." },
    { v:"60", l:"Decision-makers ranked · sample", s:"26 Grade A · 34 Grade B · validated emails · openers drafted. At full speed: 3,000+ ranked per quarter against the Cambio ICP." },
  ];
  const anchors = [
    "Nuveen Real Estate", "Principal Real Estate", "BentallGreenOak",
    "LaSalle Investment Mgmt", "Oxford Properties", "Madison International",
    "Beacon Capital Partners", "MetLife Investment Mgmt", "Boston Properties",
    "Clarion Partners",
  ];
  const firms = [
    { co:"Caliber",            grade:"A", trig:"Fund close · capital raise" },
    { co:"Heitman",             grade:"A", trig:"TCFD aligned · sustainability program" },
    { co:"Investcorp",          grade:"A", trig:"Net-zero commitment · vehicle launch" },
    { co:"Harrison Street",     grade:"A", trig:"Institutional capital raise" },
    { co:"Penzance",            grade:"A", trig:"Major disposition · woman-owned · ESG" },
    { co:"TA Realty",           grade:"A", trig:"TCFD-aligned reporting" },
    { co:"Beacon Capital",      grade:"A", trig:"GRESB recognition" },
  ];
  const people = [
    { name:"Saira Malik",     title:"CIO · Acre",                          grade:"A" },
    { name:"Mary Ludgin",     title:"Senior MD · Heitman",                 grade:"A" },
    { name:"Dave Trent",      title:"SVP Asset Mgmt · Virtua Partners",    grade:"A" },
    { name:"Craig Tagen",     title:"Head of Asset Mgmt · Virtua",         grade:"A" },
    { name:"Karen Mahrous",   title:"Head of ESG · Virtua Partners",       grade:"A" },
    { name:"Julie Raice",     title:"SVP Asset Mgmt · Virtua",             grade:"A" },
    { name:"Margaret Egan",   title:"SVP Asset Mgmt · Virtua",             grade:"A" },
  ];
  const agents = [
    "ICP Grading Agent",
    "Lookalike Discovery Agent",
    "Outreach Agent · Cambio voice",
    "Reply Triage Agent",
    "AICRO Rounds · CRM grader",
  ];
  return (
    <section className="section" id="built">
      <div className="wrap">
        <div className="section-head">
          <span className="eyebrow"><span className="dot"></span>05 / Already in your hands</span>
          <h2>This isn&rsquo;t a pitch. A sample of the work is done.</h2>
          <p>Before this call, we ran a slice of the Cambio ICP universe through the system end-to-end so you could see the output, not the deck. Ten anchors mapped. Twenty-seven firms graded. Sixty decision-makers ranked with validated emails and openers in your voice. The same agents at full speed grade hundreds of firms and thousands of people per quarter — what&rsquo;s below is a sample, not the universe.</p>
        </div>

        <div style={{display:"grid", gridTemplateColumns:"repeat(3, 1fr)", gap:18, marginBottom:24}}>
          {stats.map((s,i) => (
            <div key={i} className="card" style={{padding:32}}>
              <div style={{fontSize:64, fontWeight:600, letterSpacing:"-0.02em", color:"#21A8F2", lineHeight:1}}>{s.v}</div>
              <div style={{fontSize:14, fontWeight:600, color:"var(--shark)", marginTop:14}}>{s.l}</div>
              <div style={{fontSize:13, color:"var(--slate-500)", lineHeight:1.55, marginTop:6}}>{s.s}</div>
            </div>
          ))}
        </div>

        <div style={{display:"grid", gridTemplateColumns:"1fr 1fr 1fr", gap:18}}>
          <div className="card" style={{padding:24, display:"flex", flexDirection:"column"}}>
            <div style={{fontFamily:"'JetBrains Mono',monospace", fontSize:10, letterSpacing:"0.12em", color:"#21A8F2", textTransform:"uppercase", fontWeight:600, marginBottom:10}}>Lookalike anchors</div>
            <div style={{fontSize:13, color:"var(--slate-500)", lineHeight:1.55, marginBottom:14}}>Ten tier-1 institutional anchors. Each fanned to 10 second-degree lookalikes for a ~100-firm ICP universe — the seed for the next 200 accounts.</div>
            <ul style={{listStyle:"none", padding:0, margin:0, display:"flex", flexDirection:"column", gap:7}}>
              {anchors.map((n,i) => (
                <li key={i} style={{fontSize:12.5, color:"var(--slate-700)", paddingLeft:14, position:"relative"}}>
                  <span style={{position:"absolute", left:0, top:7, width:5, height:5, borderRadius:"50%", background:"#21A8F2"}}></span>
                  {n}
                </li>
              ))}
            </ul>
          </div>

          <div className="card" style={{padding:24, display:"flex", flexDirection:"column"}}>
            <div style={{fontFamily:"'JetBrains Mono',monospace", fontSize:10, letterSpacing:"0.12em", color:"#21A8F2", textTransform:"uppercase", fontWeight:600, marginBottom:10}}>Firms graded · sample</div>
            <div style={{padding:"10px 12px", background:"var(--mint-tint)", borderRadius:8, marginBottom:14}}>
              <div style={{fontSize:9, fontFamily:"'JetBrains Mono',monospace", color:"var(--mint-deep)", letterSpacing:"0.1em", fontWeight:700, marginBottom:4}}>FIRM-TYPE BREAKDOWN</div>
              <div style={{fontSize:11.5, color:"var(--slate-700)", lineHeight:1.5}}>9 Asset Mgrs · 8 RE PE · 6 Owners · 2 Insurance RE · 1 REIT · 1 Other</div>
            </div>
            <div style={{display:"flex", flexDirection:"column", gap:7}}>
              {firms.map((r,i) => (
                <div key={i} style={{display:"flex", alignItems:"center", gap:10, padding:"7px 10px", background:"#F1F5F9", borderRadius:6}}>
                  <span style={{padding:"2px 6px", background:"#21A8F2", color:"#fff", fontFamily:"'JetBrains Mono',monospace", fontSize:9, fontWeight:700, borderRadius:3, letterSpacing:"0.04em"}}>{r.grade}</span>
                  <span style={{fontSize:12.5, color:"var(--slate-900)", fontWeight:500, minWidth:108}}>{r.co}</span>
                  <span style={{fontSize:11.5, color:"var(--slate-500)", lineHeight:1.4}}>{r.trig}</span>
                </div>
              ))}
            </div>
          </div>

          <div className="card" style={{padding:24, display:"flex", flexDirection:"column"}}>
            <div style={{fontFamily:"'JetBrains Mono',monospace", fontSize:10, letterSpacing:"0.12em", color:"#21A8F2", textTransform:"uppercase", fontWeight:600, marginBottom:10}}>People graded · sample</div>
            <div style={{padding:"10px 12px", background:"var(--mint-tint)", borderRadius:8, marginBottom:14}}>
              <div style={{fontSize:9, fontFamily:"'JetBrains Mono',monospace", color:"var(--mint-deep)", letterSpacing:"0.1em", fontWeight:700, marginBottom:4}}>TITLE CLUSTER BREAKDOWN</div>
              <div style={{fontSize:11.5, color:"var(--slate-700)", lineHeight:1.5}}>30 Asset Mgmt · 16 Investments · 6 ESG · 3 Principal · 5 Other</div>
            </div>
            <div style={{display:"flex", flexDirection:"column", gap:7}}>
              {people.map((r,i) => (
                <div key={i} style={{display:"flex", alignItems:"center", gap:10, padding:"7px 10px", background:"#F1F5F9", borderRadius:6}}>
                  <span style={{padding:"2px 6px", background:"#21A8F2", color:"#fff", fontFamily:"'JetBrains Mono',monospace", fontSize:9, fontWeight:700, borderRadius:3, letterSpacing:"0.04em"}}>{r.grade}</span>
                  <span style={{fontSize:12.5, color:"var(--slate-900)", fontWeight:500, minWidth:108}}>{r.name}</span>
                  <span style={{fontSize:11.5, color:"var(--slate-500)", lineHeight:1.4}}>{r.title}</span>
                </div>
              ))}
            </div>
          </div>
        </div>

        <div style={{marginTop:24, padding:"26px 30px", 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}}>Cambio-voice opener · LinkedIn DM · Saira Malik · CIO · Acre</div>
          <div style={{fontSize:17, lineHeight:1.6, color:"#fff", maxWidth:760, fontWeight:500}}>
            &ldquo;Saira &mdash; saw Acre&rsquo;s GRESB cycle ramping. Nuveen pulled $9.2M out of that same analyst sprint last year using Cambio&rsquo;s capex layer. 15 min to walk it against three of your assets?&rdquo;
          </div>
          <div style={{fontSize:11, color:"rgba(255,255,255,.45)", fontFamily:"'JetBrains Mono',monospace", marginTop:16, letterSpacing:"0.04em"}}>
            One of 26 Grade-A openers · trigger = active sustainability program · peer voice · 38 words · CRO-approved
          </div>
        </div>

        <div style={{marginTop:22, display:"flex", gap:10, flexWrap:"wrap", alignItems:"center"}}>
          <span style={{fontFamily:"'JetBrains Mono',monospace", fontSize:11, color:"var(--slate-500)", letterSpacing:"0.12em", textTransform:"uppercase", marginRight:6}}>Agents deployed against your ICP →</span>
          {agents.map((a,i) => (
            <span key={i} style={{padding:"6px 12px", background:"var(--mint-tint)", color:"var(--mint-deep)", borderRadius:99, fontSize:12, fontWeight:600, display:"inline-flex", alignItems:"center", gap:6}}>
              <span style={{width:6, height:6, borderRadius:"50%", background:"var(--mint-deep)"}}></span>
              {a}
            </span>
          ))}
        </div>
      </div>
    </section>
  );
}

function ClientPortalSection({ icp, setIcp }) {
  return (
    <section className="section section-dark" id="portal">
      <div className="wrap">
        <div className="section-head">
          <span className="eyebrow" style={{color:"rgba(255,255,255,.5)"}}>06 / Flagship</span>
          <h2>The Client Portal you operate from.</h2>
          <p style={{color:"rgba(255,255,255,.6)"}}>
            One pane of glass, every Monday. Switch between segments to see how each lookalike pool runs against the Cambio ICP.
          </p>
          <div style={{marginTop:24,display:"flex",gap:8,flexWrap:"wrap",alignItems:"center"}}>
            <span style={{fontFamily:"'JetBrains Mono',monospace",fontSize:11,color:"rgba(255,255,255,.5)",letterSpacing:"0.12em",textTransform:"uppercase",marginRight:8}}>Render for segment →</span>
            {Object.entries(ICP_DATA).map(([key, d]) => (
              <button
                key={key}
                onClick={() => setIcp(key)}
                style={{
                  padding:"7px 14px",borderRadius:99,
                  background: icp === key ? "#fff" : "transparent",
                  color: icp === key ? "var(--shark)" : "rgba(255,255,255,.7)",
                  border:"1px solid " + (icp === key ? "#fff" : "rgba(255,255,255,.18)"),
                  fontSize:12,fontWeight:500,cursor:"pointer",
                  fontFamily:"inherit",letterSpacing:"-0.005em",
                  transition:"all .15s",
                }}>
                {d.label}
              </button>
            ))}
          </div>
        </div>
        <ClientPortalV2 icp={icp}/>
      </div>
    </section>
  );
}

// ─── CRO Stack ─────────────────
function CROStack() {
  const modules = [
    { l:"Strategy", t:"ICP & Signal Map", d:"4-segment ICP map across asset managers, RE PE, owners/REITs, and ESG leads. 6 trigger-signal layers. Quarterly refresh tuned against won-firm patterns.", delivs:["4-segment ICP card","6-source signal architecture","Pipeline-concentration scorecard","Quarterly recalibration"] },
    { l:"Playbooks", t:"Productized SOPs", d:"Discovery scripts and demo flows for institutional CRE buyers. Capex prioritization battlecards. GRESB / SFDR / TCFD positioning. Nuveen $9.2M anchor framing.", delivs:["Discovery script · institutional CRE","Demo flow + capex layer walkthrough","ESG / decarbonization battlecards","Onboarding checklist"] },
    { l:"Comp", t:"AE Comp Structure", d:"New-logo accelerators tuned to Cambio's enterprise ACV bands. Pilot → paid conversion SPIFF. Override design for AE managers as you scale the team.", delivs:["Ramp plan · 90/180/365","Pilot activation SPIFF","Enterprise tier override","Board-defendable model"] },
    { l:"Onboarding", t:"Operator Cadence", d:"Monday signal review with Steph + John. Wednesday reply triage. Friday MBR. Quarterly board math run in your Slack.", delivs:["Monday signal review","Wednesday reply triage","Friday MBR","QBR + board pack"] },
  ];
  return (
    <section className="section">
      <div className="wrap">
        <div className="section-head">
          <span className="eyebrow">07 / The CRO Stack</span>
          <h2>One operator-built system. Run by people who&rsquo;ve sold this buyer.</h2>
          <p>You&rsquo;ve built the platform. What you need next is a proven motion against the institutional CRE incumbency. Strategy, playbooks, comp design, and onboarding — run as one system, while Steph stays on closing and John stays on building partner ops.</p>
        </div>
        <div className="cro-stack">
          <div className="cro-tree">
            <div className="cro-node lead">
              <span className="role">Fractional CRO · Doug Shankman</span>
              <span className="name">15+ yrs CRO · PropTech operator · CREXi, Pacaso, Hemlane lineage</span>
            </div>
            <div className="cro-children">
              <div className="cro-node">
                <span className="role">Revenue Strategist</span>
                <span className="name">Pipeline math, comp, board prep</span>
              </div>
              <div className="cro-node">
                <span className="role">Signal Architect</span>
                <span className="name">ICP, 6-source signal map, intent</span>
              </div>
              <div className="cro-node">
                <span className="role">Outbound Operator</span>
                <span className="name">Daily campaign management</span>
              </div>
              <div className="cro-node">
                <span className="role">RevOps Engineer</span>
                <span className="name">CRM build, agent deploy, data</span>
              </div>
              <div className="cro-node">
                <span className="role">Enablement Lead</span>
                <span className="name">Playbooks, deal coaching</span>
              </div>
            </div>
          </div>
          <div className="cro-modules">
            {modules.map((m,i) => (
              <div className="cro-mod" key={i}>
                <span className="mlbl">{m.l}</span>
                <span className="mtitle">{m.t}</span>
                <span className="mdesc">{m.d}</span>
                <ul className="mdelivs">
                  {m.delivs.map((d,j) => <li key={j}>{d}</li>)}
                </ul>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── Economics — $10K POC ─────────────────
function CostCompare() {
  return (
    <section className="section section-soft" id="economics">
      <div className="wrap">
        <div className="section-head">
          <span className="eyebrow">08 / Economics</span>
          <h2>$10,000 / month. Three months. Demos in 30 to 45 days.</h2>
          <p>One number. One commitment window. Same outcome target as building an SDR team in-house, at a fraction of the time and cost — and Steph&rsquo;s 10 hours a week stay on closing institutional deals, not running outbound.</p>
        </div>
        <div className="cost-grid">
          <div className="cost-card">
            <div className="cost-eyebrow">Build it yourself</div>
            <h3>2 SDRs + 1 AE + manager.</h3>
            <p style={{color:"var(--slate-500)",fontSize:14,marginTop:6}}>9 to 12 months to first qualified institutional pipeline.</p>
            <div className="cost-list">
              <div className="cost-list-row"><span className="label">2 SDRs + 1 AE (loaded)</span><span className="val">$340 to $420K</span></div>
              <div className="cost-list-row"><span className="label">Manager oversight (Steph)</span><span className="val">$180K opportunity cost</span></div>
              <div className="cost-list-row"><span className="label">Tool stack (5 to 7 logos)</span><span className="val">$30 to $50K</span></div>
              <div className="cost-list-row"><span className="label">Time to first qualified pipeline</span><span className="val">9 to 12 months</span></div>
              <div className="cost-list-row total"><span className="label">Year 1 commitment</span><span className="val">$550 to $650K</span></div>
            </div>
            <div className="cost-meta">9 to 12 months of stalled growth before you know if the build works. CRE SDR talent density is low; ramp is long.</div>
          </div>
          <div className="cost-card aicro">
            <div className="cost-eyebrow">AICRO · 3-month POC</div>
            <h3>$10,000 / month. Full engine.</h3>
            <p style={{color:"rgba(255,255,255,.65)",fontSize:14,marginTop:6}}>Doug as operator-CRO + delivery team + product platform. One bill.</p>
            <div className="cost-list">
              <div className="cost-list-row"><span className="label">Months 1, 2, 3 (POC)</span><span className="val">$10,000 / month</span></div>
              <div className="cost-list-row"><span className="label">3-month total</span><span className="val">$30,000</span></div>
              <div className="cost-list-row"><span className="label">First booked demos</span><span className="val">Day 30 to 45</span></div>
              <div className="cost-list-row"><span className="label">First pilots scoped</span><span className="val">Day 60 to 75</span></div>
              <div className="cost-list-row total"><span className="label">Cost vs. in-house Year 1</span><span className="val">~5% of build cost</span></div>
            </div>
            <div className="cost-meta">Time to value is the unit economic that matters here. The 3-month POC delivers a graded ICP universe, a live signal layer, booked demos, and a fully-instrumented funnel. The in-house build delivers a hire who is still ramping.</div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── Case studies — 5 ─────────────────
function CaseStudies() {
  const cases = [
    {
      co: "Capitalize",
      stage: "Seed → Series B",
      sector: "CRE Data & AI",
      quote: "We went through three or four iterations before AICRO. The team engineered a complete GTM system that was instrumental in securing our Series B.",
      attr: "Luke Morris · Co-founder",
      systems: ["Signal-First Outbound", "End-to-End Revenue Engineering", "CRM GTM build", "CRO-led enablement"],
      metrics: [
        { v: "+187%", l: "Pipeline lift / 90d" },
        { v: "+25%", l: "Conversion" },
        { v: "60%", l: "MoM growth", live: true },
        { v: "Series B", l: "Secured" },
      ],
    },
    {
      co: "Gumption",
      stage: "Growth",
      sector: "CRE Debt Marketplace",
      quote: "Before AICRO we were scaling linearly. Now we scale exponentially.",
      attr: "John Dickerson · Co-founder",
      systems: ["Signal-Based Deal Flow Engine", "AI Multi-Channel Outbound", "Predictive Lead Scoring", "CRO-Built Playbooks"],
      metrics: [
        { v: "$75M+", l: "Qualified pipeline", live: true },
        { v: "2×", l: "Conversion" },
        { v: "3.5×", l: "Deal velocity" },
        { v: "90d", l: "Replaced 12mo build" },
      ],
    },
    {
      co: "Johnson Capital",
      stage: "Active engagement",
      sector: "CRE Capital Advisory",
      quote: "Email PRR rebounded to 21.88% L7D — the Founder/Legacy track is finding the right people, and meetings are landing in our broker calendar weekly.",
      attr: "Johnson Capital · April 2026 standup",
      systems: ["Signal-First Outbound", "Multi-Channel Sequencing", "Founder/Legacy Track", "CRO-led Pipeline Math"],
      metrics: [
        { v: "19,691", l: "Leads contacted" },
        { v: "21.88%", l: "Email PRR (L7D)", live: true },
        { v: "+90.9%", l: "PRR uptick L7D vs L30D", live: true },
        { v: "Weekly", l: "Demo cadence" },
      ],
    },
  ];
  return (
    <section className="section" id="cases">
      <div className="wrap">
        <div className="section-head">
          <span className="eyebrow">09 / Proof</span>
          <h2>Three CRE-adjacent engagements. All active.</h2>
          <p>Capitalize, Gumption, and Johnson Capital are all in the AICRO book today — three different points on the institutional-CRE-buyer surface, each scaled with the same orchestration layer we&rsquo;ve already built for Cambio.</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: "ICP & Signal architecture",
      desc: "4-segment map · 6 signal sources · daily refresh",
      bars: [
        { left: 0, width: 14, label: "ICP + SIGNAL BUILD", cls: "amber" },
        { left: 14, width: 86, label: "GRADED OUTPUT FEEDS LIVE CAMPAIGNS", cls: "sky" },
      ],
      delivs: [
        { left: 7, label: "Day 7 · ICP locked" },
        { left: 14, label: "Day 14 · signals live" },
        { left: 50, label: "Day 60 · refresh" },
      ],
    },
    {
      name: "AICRO Send · Email Engine",
      desc: "75 warmed inboxes · institutional CRE tuned · operator-CRO oversight",
      bars: [
        { left: 0, width: 18, label: "DOMAIN WARM-UP", cls: "amber" },
        { left: 18, width: 82, label: "LIVE SEQUENCES + DAILY OPTIMIZATION", cls: "sky" },
      ],
      delivs: [
        { left: 12, label: "Day 14 · warm" },
        { left: 22, label: "Day 21 · live" },
        { left: 50, label: "Day 60 · 25%+" },
      ],
    },
    {
      name: "AICRO Connect · LinkedIn Engine",
      desc: "Multi-seat across SDR profiles + Cambio AE profiles (with consent)",
      bars: [
        { left: 0, width: 8, label: "PROFILE SETUP", cls: "amber" },
        { left: 8, width: 92, label: "MULTI-SEAT CONNECT + INMAIL CAMPAIGNS", cls: "sky" },
      ],
      delivs: [
        { left: 6, label: "Day 7 · connected" },
        { left: 22, label: "Day 21 · campaign" },
        { left: 50, label: "Day 60 · 45%+" },
      ],
    },
    {
      name: "CRO + Reply Triage",
      desc: "Operator in the room weekly · Reply Agent triages every reply",
      bars: [
        { left: 0, width: 100, label: "OPERATOR IN THE ROOM · WEEKLY", cls: "shark" },
      ],
      delivs: [
        { left: 12, label: "Day 12 · pipeline" },
        { left: 50, label: "Day 50 · comp" },
        { left: 88, label: "Day 88 · QBR" },
      ],
    },
  ];
  return (
    <section className="section section-soft" id="timeline">
      <div className="wrap">
        <div className="section-head">
          <span className="eyebrow">10 / The 90-day build</span>
          <h2>Day 1 to Day 90, in deliverables you can hold.</h2>
          <p>Email and LinkedIn engines run in parallel under one operator. Every milestone is a shipped artifact, not a status update.</p>
        </div>
        <div className="gantt">
          <div className="gantt-head">
            <div className="col workstream">Workstream</div>
            <div className="col">Day 1<span className="day">Kickoff</span></div>
            <div className="col">Day 30<span className="day">First demos</span></div>
            <div className="col">Day 60<span className="day">Compounding</span></div>
            <div className="col">Day 90<span className="day">QBR</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 — getting started ─────────────
function CTA() {
  const steps = [
    { d:"Day 0",     t:"Sign the engagement",        s:"$10K/month · three-month POC · no procurement theater. Single agreement, single bill." },
    { d:"Day 1",     t:"Inboxes warming",            s:"75 sender domains start the warm-up cycle. ICP universe expands from sample to full run." },
    { d:"Day 14",    t:"Signals firing",             s:"Daily refresh of fund-cycle, leadership-change, GRESB, retrofit triggers against the live universe." },
    { d:"Day 30–45", t:"First demos in your calendar", s:"Booked meetings landing with VPs of Asset Mgmt, CIOs, Heads of ESG. Reply Agent triaging in your Slack." },
  ];
  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)"}}>11 / Getting started</span>
            <h2 style={{marginTop:18,textWrap:"balance"}}>John, signal goes live the day you sign.</h2>
            <p>You&rsquo;ve seen the ICP grading, the agents, the portal, and the sample copy in Cambio voice. There&rsquo;s no second demo to schedule — this is the demo. From here it&rsquo;s a 15-minute kickoff with Doug to confirm scope, then the engine starts. Sample becomes universe. Universe becomes pipeline.</p>

            <div style={{marginTop:32,display:"grid",gridTemplateColumns:"repeat(4, 1fr)",gap:14}}>
              {steps.map((step,i) => (
                <div key={i} style={{padding:"16px 18px",background:"rgba(255,255,255,0.06)",borderRadius:10,border:"1px solid rgba(255,255,255,0.10)"}}>
                  <div style={{fontFamily:"'JetBrains Mono',monospace",fontSize:10,letterSpacing:"0.12em",color:"#21A8F2",textTransform:"uppercase",fontWeight:700,marginBottom:8}}>{step.d}</div>
                  <div style={{fontSize:14,fontWeight:600,color:"#fff",marginBottom:6,lineHeight:1.3}}>{step.t}</div>
                  <div style={{fontSize:12,color:"rgba(255,255,255,0.6)",lineHeight:1.5}}>{step.s}</div>
                </div>
              ))}
            </div>

            <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"}}>
                Get started →
              </a>
              <a href="mailto:doug@aicro.co?subject=Cambio%20%2B%20AICRO%20%E2%80%94%20kicking%20off"
                 className="btn btn-lg"
                 style={{background:"transparent",color:"#fff",border:"1px solid rgba(255,255,255,0.25)",fontWeight:500,padding:"14px 26px",borderRadius:99,fontSize:14,textDecoration:"none",letterSpacing:"-0.005em"}}>
                Email Doug directly
              </a>
              <span style={{fontSize:13,color:"rgba(255,255,255,0.65)",lineHeight:1.5,flex:1,minWidth:260}}>
                15-min kickoff with Doug. Engagement starts the next business day. No second pitch, no SOW round-trip.
              </span>
            </div>
            <div style={{marginTop:18,fontSize:12,color:"rgba(255,255,255,0.45)",fontFamily:"'JetBrains Mono',monospace",letterSpacing:"0.04em"}}>
              doug@aicro.co · 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">CAMBIO · PROPOSAL · 2026-04-30</span>
      </div>
      <div>doug@aicro.co</div>
      <div className="footer-meta">© 2026 AICRO · Doug Shankman & Josh Kulchin, Co-Founders</div>
    </footer>
  );
}

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

  return (
    <Fragment>
      <Nav/>
      <Hero dark={t.darkHero}/>
      <TrustStrip/>
      <MarketThesis/>
      <Orchestration/>
      <Matrix/>
      <SignalToScale/>
      <AlreadyBuilt/>
      <ClientPortalSection icp={t.icp} setIcp={setIcp}/>
      <CROStack/>
      <CostCompare/>
      <CaseStudies/>
      <NinetyDay/>
      <CTA/>
      <Footer/>
      <TweaksPanel>
        <TweakSection label="Surface"/>
        <TweakRadio
          label="Hero treatment"
          value={t.darkHero ? "dark" : "light"}
          options={["dark", "light"]}
          onChange={(v) => setTweak('darkHero', v === "dark")}
        />
        <TweakSection label="Client Portal scenario"/>
        <TweakSelect
          label="Segment"
          value={t.icp}
          options={[
            {value:"asset_manager", label:"Asset Managers"},
            {value:"re_pe",         label:"Real Estate PE"},
            {value:"owners_reits",  label:"Owners & REITs"},
            {value:"esg_lead",      label:"ESG / Responsible Investing"},
          ]}
          onChange={(v) => setTweak('icp', v)}
        />
        <div style={{fontSize:11,color:"rgba(41,38,27,.55)",lineHeight:1.5,marginTop:6}}>
          The Client Portal re-renders the Executive Summary, KPIs, campaigns table, and drawer for each segment.
        </div>
      </TweaksPanel>
    </Fragment>
  );
}

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