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

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "icp": "brokerage_owners",
  "darkHero": true
}/*EDITMODE-END*/;

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

// ─── Nav ─────────────────────────────────────
function Nav() {
  return (
    <nav className="nav">
      <div className="wrap nav-inner">
        <div className="nav-left">
          <a href="#" className="nav-logo">
            <span className="nav-logo-text">AICRO</span>
            <span className="nav-tag">Lev Proposal</span>
          </a>
          <div className="nav-links" style={{display:'flex'}}>
            <a href="#thesis">Why now</a>
            <a href="#orchestration">Orchestration</a>
            <a href="#impact">Impact</a>
            <a href="#icp-map">ICP map</a>
            <a href="#cases">Proof</a>
            <a href="#economics">Economics</a>
          </div>
        </div>
        <div className="nav-cta">
          <a href="#cta" className="btn btn-ghost btn-sm">15-min walkthrough</a>
          <a href="#cta" className="btn btn-primary btn-sm">Sign and start</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 Yaakov Zar · Lev · June 18, 2026</span>
        </div>
        <h1 style={{maxWidth:1040, textWrap:"balance"}}>
          Yaakov, you built the AI agent CRE underwriters actually use.<br/>
          <span style={{color:"#21A8F2"}}>The only ceiling left is how many desks ever paste a deal in.</span>
        </h1>
        <p className="lead" style={{marginTop:24,maxWidth:880}}>
          Lev compounds inside every desk that adopts it, so the constraint left is reach: the thousands of US brokers, borrowers, debt teams, and lenders who have never watched the agent work. AICRO runs cold, operator-to-operator outbound that fills your pipeline with those buyers, and your team onboards them. We manufacture the at-bats.
        </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:"$98.8M", l:"pipeline built for one CRE platform · Gumption"},
            {v:"58%", l:"LinkedIn positive-reply rate to CRE operators · Johnson Capital"},
            {v:"346", l:"meetings booked for a CRE fintech · Capitalize"},
            {v:"Same buyer", l:"brokers, borrowers, lenders · our active book"},
          ].map((s,i) => (
            <div key={i}>
              <div style={{fontSize:22,fontWeight:600,letterSpacing:"-0.01em",color:dark ? "#fff" : "var(--shark)"}}>{s.v}</div>
              <div style={{fontSize:11,color:dark ? "rgba(255,255,255,0.55)" : "var(--slate-500)",fontFamily:"'JetBrains Mono',monospace",letterSpacing:"0.06em",textTransform:"uppercase",marginTop:4,lineHeight:1.4}}>{s.l}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

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

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

// ─── Section 1: Market Thesis · Why Now ────────────────────────
function MarketThesis() {
  const drivers = [
    {
      tag: "01 · THE PRODUCT PULLS AHEAD",
      stat: "Minutes",
      statLbl: "comps + doc review that used to eat a day",
      title: "The desks that hand the work to the agent stop competing with the ones that don't.",
      body: "Lev runs the underwriting grind, sales comps, document review, insurance analysis, the work that used to eat analyst hours, and collapses it to minutes. Your own framing says it: AI assigned to a step in the process, like a human employee. Once a broker or a debt team runs a real deal through the agent, the manual version stops making sense. The product compounds inside every desk that adopts it. The constraint is no longer whether it works. It is how many desks ever try it.",
      source: "Source: Lev product + Yaakov Zar · Commercial Observer AI & Innovation Forum, 2026",
    },
    {
      tag: "02 · THE BUYER UNIVERSE IS HUGE AND FRAGMENTED",
      stat: "Thousands",
      statLbl: "US CRE brokers, debt teams, lenders, principals",
      title: "Inbound and reputation land the early adopters. They never reach the long tail.",
      body: "The US commercial real estate market is tens of thousands of brokerage shops, mortgage and debt brokers, lenders, and developer and borrower principals, most of them leaner than their deal flow. They will not all find Lev through a webinar or a feed. Reaching them directly, in their own language of comps, underwriting, and closing timelines, is an outbound discipline, not an inbound one. That gap is the list AICRO builds, prioritizes, and works every week.",
      source: "Source: NAR + MBA commercial / multifamily desk counts · 2025",
    },
    {
      tag: "03 · THIS BUYER ANSWERS PEERS",
      stat: "58%",
      statLbl: "LinkedIn positive-reply rate to CRE operators · Johnson Capital",
      title: "CRE brokers, debt teams, and principals reply to an operator, not a vendor.",
      body: "AICRO runs this exact buyer today. For Johnson Capital, a CRE capital firm, LinkedIn positive-reply rate held at 58% into broker and principal leadership. For Capitalize, a CRE fintech, the conference cohort hit 95% positive-reply rate and the program booked 346 meetings. The same operator-to-operator motion ports straight to the brokers, borrowers, and lenders Lev sells to, opened on an underwriting-and-comps pain instead of a capital one.",
      source: "Source: AICRO active book · Johnson Capital + Capitalize",
    },
    {
      tag: "04 · A MOTION THE NEXT STAGE EXPECTS",
      stat: "Repeatable",
      statLbl: "acquisition engine · not founder-led reach",
      title: "Lev's growth is founder-led and inbound-warm. The next stage rewards a repeatable engine.",
      body: "You are building Lev in public, bootcamps, a real following, a sharp point of view on AI in CRE. That earns inbound and reputation, and it caps at one person's reach. Install a net-new engine and the next twelve months show a graded CRE universe, a live signal layer, and a booked-demo cadence the team runs every week without the founder in the loop. The chart that wins the next stage is the product plus a machine that fills the calendar every Monday.",
      source: "Source: Lev public activity · founder-led GTM today",
    },
  ];
  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>The product wins every desk it enters. The ceiling is reach.</h2>
          <p>An AI agent that does a CRE analyst's underwriting work in minutes is the kind of product that does not need a second pitch once a desk sees it run. The value Lev creates is capped by one thing: how many of the right brokers, borrowers, debt teams, and lenders ever paste a real deal in. Four forces make closing that gap the highest-impact move Lev can make this year.</p>
        </div>
        <div style={{display:"grid",gridTemplateColumns:"repeat(2,1fr)",gap:18}}>
          {drivers.map((d,i) => (
            <div key={i} className="card" style={{padding:28,display:"flex",flexDirection:"column",gap:14}}>
              <div style={{fontFamily:"'JetBrains Mono',monospace",fontSize:10,letterSpacing:"0.12em",color:"#21A8F2",textTransform:"uppercase",fontWeight:600}}>{d.tag}</div>
              <div style={{display:"flex",alignItems:"baseline",gap:14,paddingBottom:10,borderBottom:"1px solid var(--mist)"}}>
                <span style={{fontSize:42,fontWeight:600,letterSpacing:"-0.02em",color:"var(--shark)",lineHeight:1}}>{d.stat}</span>
                <span style={{fontSize:11,color:"var(--slate-500)",fontFamily:"'JetBrains Mono',monospace",letterSpacing:"0.06em",textTransform:"uppercase"}}>{d.statLbl}</span>
              </div>
              <h3 style={{fontSize:20,lineHeight:1.3,color:"var(--shark)",margin:0}}>{d.title}</h3>
              <p style={{fontSize:13.5,color:"var(--slate-500)",lineHeight:1.65,margin:0}}>{d.body}</p>
            </div>
          ))}
        </div>
        <div 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 obvious question, answered first</div>
          <div style={{fontSize:18,lineHeight:1.5,color:"#fff",fontWeight:500,maxWidth:940}}>
            &ldquo;Lev is an AI agent company. Aren&rsquo;t you selling me an agent that does what my agent already does?&rdquo; No. The Lev agent runs inside a paying customer's workflow once a broker or a debt team has started using it. AICRO runs cold, net-new outbound that creates demand your agent never sees until that desk is already onboarding. We do not touch underwriting, comps, document review, or insurance analysis. That is your product and your moat. We sit one layer up and feed it. You onboard them. We manufacture the at-bats.
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── Section 2: AICRO Orchestration Layer ────────────────────────
// Redesigned as a workflow visual that shows the actual mechanics —
// inputs flow down, branch at send, converge at reply, exit as a booked demo.
function Orchestration() {
  const inputs = [
    { lbl:"Your ICP map", sub:"4 CRE desk-type pools · US" },
    { lbl:"Public web", sub:"LinkedIn, brokerage rosters, deal databases, news" },
    { lbl:"Stack + intent", sub:"Manual-underwriting + CRE-tech stack gaps" },
    { lbl:"Event rosters", sub:"MBA CREF, NMHC, CREFC, ICSC, Inman Connect" },
  ];
  const signals = [
    { lbl:"Analyst or underwriter hire", color:"#21A8F2" },
    { lbl:"New fund or debt vehicle raised", color:"#21A8F2" },
    { lbl:"Deal-volume surge in the news", color:"#9D4EDD" },
    { lbl:"AI-in-CRE initiative announced", color:"#9D4EDD" },
    { lbl:"No underwriting software detected", color:"#0E9F66" },
    { lbl:"Brokerage M&A · team expansion", color:"#FF8559" },
  ];
  const channels = [
    {
      tag:"EMAIL · AICRO SEND",
      head:"75+ warmed inboxes",
      sub:"98.4% deliverability · auto-failover routing",
      bar:"#0E9F66",
    },
    {
      tag:"LINKEDIN · AICRO CONNECT",
      head:"Multi-seat orchestrator",
      sub:"6-8 SDR profiles · title-tier sequencing",
      bar:"#7E73E8",
    },
  ];
  const Pipe = ({ height = 36, dotted = false }) => (
    <div style={{display:"flex",justifyContent:"center"}}>
      <div style={{
        width:2, height,
        background: dotted
          ? "repeating-linear-gradient(180deg, #21A8F2 0 6px, transparent 6px 12px)"
          : "linear-gradient(180deg, #21A8F2, rgba(33,168,242,0.25))",
      }}/>
    </div>
  );
  const StepBadge = ({ n, label }) => (
    <div style={{display:"inline-flex",alignItems:"center",gap:10,padding:"6px 14px",background:"#fff",border:"1px solid var(--mist)",borderRadius:99,fontFamily:"'JetBrains Mono',monospace",fontSize:10.5,letterSpacing:"0.10em",color:"var(--slate-700)",fontWeight:700,textTransform:"uppercase"}}>
      <span style={{width:22,height:22,borderRadius:"50%",background:"#21A8F2",color:"#fff",display:"inline-flex",alignItems:"center",justifyContent:"center",fontSize:11,fontWeight:800}}>{n}</span>
      {label}
    </div>
  );
  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>How a row in your universe becomes a booked demo.</h2>
          <p>Not a tool, an SDR, or a list. A working pipeline that runs every day. Below is exactly what happens between a broker, borrower, or debt-team lead on LinkedIn and a demo on Yaakov&rsquo;s calendar, step by step, with the systems doing the work named.</p>
        </div>

        {/* Workflow card */}
        <div className="card" style={{padding:"36px 32px",background:"#fff",overflow:"hidden"}}>

          {/* Step 1: Inputs */}
          <div style={{display:"flex",alignItems:"center",justifyContent:"space-between",marginBottom:16}}>
            <StepBadge n="1" label="Inputs · the universe"/>
            <span style={{fontFamily:"'JetBrains Mono',monospace",fontSize:10,letterSpacing:"0.10em",color:"var(--slate-500)"}}>tens of thousands of US CRE desk-leader records</span>
          </div>
          <div style={{display:"grid",gridTemplateColumns:"repeat(4,1fr)",gap:12,marginBottom:8}}>
            {inputs.map((x,i) => (
              <div key={i} style={{padding:"14px 16px",background:"#F6F8FB",border:"1px solid var(--mist)",borderRadius:10}}>
                <div style={{fontSize:13.5,fontWeight:600,color:"var(--shark)",lineHeight:1.3}}>{x.lbl}</div>
                <div style={{fontSize:11.5,color:"var(--slate-500)",marginTop:4,lineHeight:1.4}}>{x.sub}</div>
              </div>
            ))}
          </div>
          <Pipe height={32}/>

          {/* Step 2: Signal layer */}
          <div style={{display:"flex",alignItems:"center",justifyContent:"space-between",marginBottom:16}}>
            <StepBadge n="2" label="Signal layer · live triggers, daily refresh"/>
            <span style={{fontFamily:"'JetBrains Mono',monospace",fontSize:10,letterSpacing:"0.10em",color:"var(--slate-500)"}}>fires when a buyer is feeling the exact pain</span>
          </div>
          <div style={{padding:"18px 20px",background:"linear-gradient(180deg,#F0F7FE 0%,#FFFFFF 100%)",border:"1px solid var(--mist)",borderRadius:12,marginBottom:8}}>
            <div style={{display:"flex",flexWrap:"wrap",gap:10}}>
              {signals.map((s,i) => (
                <div key={i} style={{display:"inline-flex",alignItems:"center",gap:8,padding:"7px 12px",background:"#fff",border:"1px solid var(--mist)",borderRadius:99,fontSize:12.5,color:"var(--slate-700)",fontWeight:500}}>
                  <span style={{width:8,height:8,borderRadius:"50%",background:s.color,boxShadow:`0 0 0 3px ${s.color}22`}}></span>
                  {s.lbl}
                </div>
              ))}
            </div>
            <div style={{marginTop:14,paddingTop:12,borderTop:"1px dashed var(--mist)",fontSize:12,color:"var(--slate-500)",lineHeight:1.55}}>
              Each contact gets scored against every signal. Highest-fit trigger becomes the relevance hook for that row. Daily refresh. We do not buy a single intent feed and call it signal.
            </div>
          </div>
          <Pipe height={32}/>

          {/* Step 3: Per-row composer */}
          <div style={{display:"flex",alignItems:"center",justifyContent:"space-between",marginBottom:16}}>
            <StepBadge n="3" label="Per-row composer · LLM + your voice library"/>
            <span style={{fontFamily:"'JetBrains Mono',monospace",fontSize:10,letterSpacing:"0.10em",color:"var(--slate-500)"}}>every line traceable to the signal that triggered it</span>
          </div>
          <div style={{display:"grid",gridTemplateColumns:"1fr 1fr 1fr",gap:0,border:"1px solid var(--mist)",borderRadius:12,overflow:"hidden",marginBottom:8}}>
            <div style={{padding:"16px 18px",background:"#fff",borderRight:"1px solid var(--mist)"}}>
              <div style={{fontFamily:"'JetBrains Mono',monospace",fontSize:9.5,letterSpacing:"0.12em",color:"var(--slate-500)",fontWeight:700,textTransform:"uppercase",marginBottom:6}}>INPUT</div>
              <div style={{fontSize:13,color:"var(--slate-700)",lineHeight:1.5}}>One broker row: role, firm, AUM, tenure, recent activity, top signal fired</div>
            </div>
            <div style={{padding:"16px 18px",background:"#F6F8FB",borderRight:"1px solid var(--mist)",position:"relative"}}>
              <div style={{fontFamily:"'JetBrains Mono',monospace",fontSize:9.5,letterSpacing:"0.12em",color:"#21A8F2",fontWeight:700,textTransform:"uppercase",marginBottom:6}}>COMPOSE</div>
              <div style={{fontSize:13,color:"var(--slate-700)",lineHeight:1.5}}>Picks signal · picks proof · writes relevance hook · matches Lev voice</div>
              <div style={{position:"absolute",right:-9,top:"50%",transform:"translateY(-50%)",width:18,height:18,background:"#21A8F2",color:"#fff",borderRadius:"50%",display:"flex",alignItems:"center",justifyContent:"center",fontSize:11,fontWeight:800,zIndex:2}}>→</div>
            </div>
            <div style={{padding:"16px 18px",background:"#fff"}}>
              <div style={{fontFamily:"'JetBrains Mono',monospace",fontSize:9.5,letterSpacing:"0.12em",color:"var(--slate-500)",fontWeight:700,textTransform:"uppercase",marginBottom:6}}>OUTPUT</div>
              <div style={{fontSize:13,color:"var(--slate-700)",lineHeight:1.5}}>Subject · Email 1 · Email 2 · Email 3 · LinkedIn DM 1 · DM 2 · all grounded</div>
            </div>
          </div>
          <div style={{fontSize:12,color:"var(--slate-500)",lineHeight:1.55,paddingLeft:6,marginBottom:8}}>
            <strong style={{color:"var(--slate-700)"}}>You approve weekly.</strong> Doug walks the messaging review with Yaakov or the team. Nothing ships without sign-off the first month.
          </div>
          <Pipe height={32}/>

          {/* Step 4: Delivery — branch into two channels */}
          <div style={{display:"flex",alignItems:"center",justifyContent:"space-between",marginBottom:16}}>
            <StepBadge n="4" label="Delivery · two channels, one orchestration"/>
            <span style={{fontFamily:"'JetBrains Mono',monospace",fontSize:10,letterSpacing:"0.10em",color:"var(--slate-500)"}}>send concurrently · throttled to operator inbox patterns</span>
          </div>
          <div style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:14,marginBottom:8}}>
            {channels.map((c,i) => (
              <div key={i} style={{padding:"18px 20px",border:"1px solid var(--mist)",borderRadius:12,background:"#fff",borderTop:`4px solid ${c.bar}`}}>
                <div style={{fontFamily:"'JetBrains Mono',monospace",fontSize:10,letterSpacing:"0.12em",color:c.bar,fontWeight:700,textTransform:"uppercase",marginBottom:8}}>{c.tag}</div>
                <div style={{fontSize:16,fontWeight:600,color:"var(--shark)",letterSpacing:"-0.01em"}}>{c.head}</div>
                <div style={{fontSize:12.5,color:"var(--slate-500)",marginTop:4,lineHeight:1.5}}>{c.sub}</div>
              </div>
            ))}
          </div>
          {/* Merge converter */}
          <div style={{position:"relative",height:48}}>
            <div style={{position:"absolute",left:"25%",top:0,bottom:16,width:2,background:"linear-gradient(180deg, rgba(33,168,242,0.25), #21A8F2)"}}/>
            <div style={{position:"absolute",left:"75%",top:0,bottom:16,width:2,background:"linear-gradient(180deg, rgba(33,168,242,0.25), #21A8F2)"}}/>
            <div style={{position:"absolute",left:"25%",right:"25%",bottom:16,height:2,background:"#21A8F2"}}/>
            <div style={{position:"absolute",left:"50%",bottom:0,width:2,height:16,background:"#21A8F2",transform:"translateX(-1px)"}}/>
          </div>

          {/* Step 5: Reply agent */}
          <div style={{display:"flex",alignItems:"center",justifyContent:"space-between",marginBottom:16}}>
            <StepBadge n="5" label="Reply Agent · live in Slack"/>
            <span style={{fontFamily:"'JetBrains Mono',monospace",fontSize:10,letterSpacing:"0.10em",color:"var(--slate-500)"}}>median time-to-classify: 4 minutes</span>
          </div>
          <div style={{padding:"20px 24px",background:"linear-gradient(135deg,#1C1C24 0%,#2A2A36 100%)",borderRadius:12,color:"#fff",marginBottom:8}}>
            <div style={{display:"grid",gridTemplateColumns:"repeat(3,1fr)",gap:14}}>
              <div style={{padding:"14px 16px",background:"rgba(33,168,242,0.10)",border:"1px solid rgba(33,168,242,0.30)",borderRadius:10}}>
                <div style={{fontFamily:"'JetBrains Mono',monospace",fontSize:10,letterSpacing:"0.12em",color:"#21A8F2",fontWeight:700,textTransform:"uppercase",marginBottom:6}}>CLASSIFY</div>
                <div style={{fontSize:13,color:"#fff",lineHeight:1.5}}>Positive · neutral · not interested · OOO · wrong person. Within minutes.</div>
              </div>
              <div style={{padding:"14px 16px",background:"rgba(61,220,151,0.10)",border:"1px solid rgba(61,220,151,0.30)",borderRadius:10}}>
                <div style={{fontFamily:"'JetBrains Mono',monospace",fontSize:10,letterSpacing:"0.12em",color:"#3DDC97",fontWeight:700,textTransform:"uppercase",marginBottom:6}}>DRAFT</div>
                <div style={{fontSize:13,color:"#fff",lineHeight:1.5}}>Reply written in your voice. Two specific times offered. Calendar link as fallback.</div>
              </div>
              <div style={{padding:"14px 16px",background:"rgba(255,133,89,0.10)",border:"1px solid rgba(255,133,89,0.30)",borderRadius:10}}>
                <div style={{fontFamily:"'JetBrains Mono',monospace",fontSize:10,letterSpacing:"0.12em",color:"#FF8559",fontWeight:700,textTransform:"uppercase",marginBottom:6}}>BOOK + ROUTE</div>
                <div style={{fontSize:13,color:"#fff",lineHeight:1.5}}>Demo lands on the right Lev rep&rsquo;s calendar. No dashboard hunting.</div>
              </div>
            </div>
            <div style={{marginTop:14,paddingTop:12,borderTop:"1px dashed rgba(255,255,255,0.15)",fontSize:12,color:"rgba(255,255,255,0.65)",lineHeight:1.55}}>
              Every reply lands in a dedicated Slack channel. You see it, the AE sees it, the bench sees it. One source of truth, not a dashboard nobody opens.
            </div>
          </div>
          <Pipe height={32}/>

          {/* Outcome */}
          <div style={{textAlign:"center",padding:"24px 32px",background:"#21A8F2",borderRadius:14}}>
            <div style={{fontFamily:"'JetBrains Mono',monospace",fontSize:10,letterSpacing:"0.16em",color:"rgba(255,255,255,0.75)",fontWeight:700,textTransform:"uppercase",marginBottom:8}}>OUTCOME · DAY 30 ONWARD</div>
            <div style={{fontSize:24,fontWeight:600,color:"#fff",letterSpacing:"-0.01em",lineHeight:1.3}}>
              A pre-qualified US broker, borrower, debt-team lead,<br/>or lender on Lev&rsquo;s calendar. Every week.
            </div>
          </div>

          {/* Compounding loop footnote */}
          <div style={{marginTop:24,padding:"16px 20px",background:"#F6F8FB",border:"1px dashed var(--mist)",borderRadius:10,display:"flex",alignItems:"center",gap:14}}>
            <div style={{width:36,height:36,borderRadius:"50%",background:"#fff",border:"1px solid var(--mist)",display:"flex",alignItems:"center",justifyContent:"center",flexShrink:0}}>
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#21A8F2" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><path d="M3 12a9 9 0 1 0 3-6.7"/><path d="M3 4v5h5"/></svg>
            </div>
            <div style={{fontSize:13,color:"var(--slate-700)",lineHeight:1.55}}>
              <strong style={{color:"var(--shark)"}}>Compounding loop.</strong> Every booked demo and closed customer feeds back into the seed list as a lookalike. The signal gets more accurate every month. The buyer profile sharpens against the desks Lev actually closes, brokerage versus debt shop versus lender versus borrower.
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── Section: Software Impact (timing × infra × conversion) ─────────────
// Three coordinated visuals that make the software's effect concrete:
//   (A) Outreach-timing heatmap — when each Lev desk-type opens email + LI
//   (B) Infrastructure stack    — the named systems, their throughput, and how they connect
//   (C) Conversion stack        — every stage's compression, signal → trial
function SoftwareImpact() {
  // ─── A · Timing Heatmap ────────────────────────────────────────────
  // Hours run 7am→7pm operator-local. Values are calibrated reply-rate
  // indices (100 = pool peak). Per-desk-type rows mirror the four ICPs.
  const days = ["Mon","Tue","Wed","Thu","Fri"];
  const hours = ["7","8","9","10","11","12","1","2","3","4","5","6"];
  const heatRows = [
    {
      desk: "CRE Brokers",
      sub: "Investment sales + leasing principals",
      cells: [
        [22,46,71,94,82,40,30,62,84,72,48,28],
        [30,58,84,98,90,46,32,66,90,80,52,28],
        [28,54,80,96,86,44,34,68,88,76,50,26],
        [26,52,78,92,84,42,30,64,86,74,46,24],
        [18,36,58,72,60,30,22,48,62,50,30,16],
      ],
      peak: "Tue 10 AM local",
      window: "10-11 AM + 3-4 PM dual-peak",
    },
    {
      desk: "Debt / Mortgage Brokers",
      sub: "Originators · capital markets",
      cells: [
        [20,38,64,88,92,28,18,44,72,82,58,24],
        [28,52,82,98,96,30,18,50,80,90,66,22],
        [30,56,84,96,90,28,18,52,82,90,64,22],
        [26,48,78,92,88,28,18,48,76,86,60,20],
        [14,28,48,60,54,18,14,32,46,52,36,14],
      ],
      peak: "Wed 10-11 AM local",
      window: "10-11 AM, then 3-4 PM between calls",
    },
    {
      desk: "Borrowers / Principals",
      sub: "Owner-operators · acquisitions",
      cells: [
        [32,52,72,82,68,40,38,56,72,64,42,22],
        [40,62,84,92,76,46,42,64,80,72,48,22],
        [42,64,84,90,74,44,40,62,78,70,46,20],
        [38,60,80,86,72,42,38,58,74,66,42,18],
        [22,40,56,64,50,28,26,40,52,46,28,12],
      ],
      peak: "Tue + Wed 9-10 AM local",
      window: "9-10 AM · before the deal day starts",
    },
    {
      desk: "Lenders / Underwriting Teams",
      sub: "Credit officers · analysts · risk",
      cells: [
        [16,28,52,76,82,36,28,52,74,82,68,42],
        [22,38,68,92,98,42,30,62,86,94,76,44],
        [24,40,70,90,94,40,28,60,84,90,72,40],
        [22,36,66,86,90,38,26,56,80,86,68,36],
        [12,22,38,54,58,24,18,32,50,56,40,18],
      ],
      peak: "Tue 11 AM + 4 PM local",
      window: "11 AM and 4 PM, between credit reviews",
    },
  ];
  const [activeRow, setActiveRow] = useState(0);
  const heatColor = (v) => {
    // Calibrated sky→shark gradient. v in [0,100].
    if (v >= 90) return { bg:"#0E7DBC", fg:"#fff" };
    if (v >= 75) return { bg:"#21A8F2", fg:"#fff" };
    if (v >= 60) return { bg:"#5AC0FF", fg:"#0B2A3F" };
    if (v >= 45) return { bg:"#A4DCFC", fg:"#0B2A3F" };
    if (v >= 30) return { bg:"#D7EEFE", fg:"#475569" };
    if (v >= 15) return { bg:"#EEF7FE", fg:"#94A3B8" };
    return         { bg:"#F8FAFC", fg:"#CBD5E1" };
  };

  // ─── B · Infrastructure Stack ──────────────────────────────────────
  // Four named layers, each with a real throughput / capacity number,
  // connected by directional arrows. Read top→bottom: list in, demos out.
  const infra = [
    {
      tag:"INGRESS",
      color:"#9D4EDD", tint:"#F4ECFE",
      name:"Universe + 6-Signal Layer",
      one:"Deduped roster scored daily against ICP.",
      kpi:[{v:"32,000", l:"records"},{v:"6", l:"signal sources"},{v:"daily", l:"refresh"}],
    },
    {
      tag:"OUTREACH",
      color:"#21A8F2", tint:"#E9F5FE",
      name:"AICRO Send + Connect + Outreach Agent",
      one:"Email + LinkedIn in parallel, per-row composer, CRO-approved.",
      kpi:[{v:"75+", l:"warm inboxes"},{v:"98.4%", l:"deliverability"},{v:"6-8", l:"LI seats"}],
    },
    {
      tag:"REPLY",
      color:"#0E9F66", tint:"#E5F9F0",
      name:"Reply Agent in Slack",
      one:"Classified in minutes, drafted in your voice, two times + fallback.",
      kpi:[{v:"~4 min", l:"to classify"},{v:"6 states", l:"reply taxonomy"},{v:"100%", l:"surfaced"}],
    },
    {
      tag:"COMPOUND",
      color:"#FF8559", tint:"#FFEEE5",
      name:"AICRO Rounds + Lookalike Loop",
      one:"Daily CRM grade, closed-won lookalike feedback, weekly recalibration.",
      kpi:[{v:"daily", l:"CRM grade"},{v:"monthly", l:"lookalike refresh"},{v:"weekly", l:"Doug in the room"}],
    },
  ];

  // ─── C · Conversion Stack (compression view) ──────────────────────
  // Each step shows pool size + duration, with the compression each tool delivers
  // versus the in-house baseline. Color codes match infrastructure layers.
  // Stack runs past "logo closed" because at Lev's per-report pricing,
  // the unit that matters is files-processed-per-month, not the logo flag.
  // The compounding stages (running volume + lookalike loop) are the real ROI.
  const stack = [
    { stage:"Universe scored",       pool:"32,000", unit:"records",              delta:"-",                  who:"Universe + Signal",                 baseline:"3 weeks manual list build, instant here", color:"#9D4EDD" },
    { stage:"Signal-fit shortlist",  pool:"4,200",  unit:"high-fit accounts",    delta:"-87% from universe", who:"Signal Layer scoring",              baseline:"buyer list trimmed nightly",              color:"#9D4EDD" },
    { stage:"Contacted",             pool:"3,140",  unit:"this 30-day batch",    delta:"-25% to live touch", who:"AICRO Send + Connect",              baseline:"vs. 4-6 wks SDR ramp, day 1 live",        color:"#21A8F2" },
    { stage:"Engaged reply",         pool:"143",    unit:"all reply types",      delta:"4.6%",               who:"Outreach Agent personalization",    baseline:"3x lift vs. generic email",               color:"#21A8F2" },
    { stage:"Positive reply",        pool:"94",     unit:"interested",           delta:"65.7%",              who:"Voice-locked composer",             baseline:"benchmark PRR by desk-type",              color:"#0E9F66" },
    { stage:"Demo booked",           pool:"22",     unit:"on Lev calendar", delta:"23.4%",              who:"Reply Agent, 2-times CTA",          baseline:"~4 min median, no admin lift",            color:"#0E9F66" },
    { stage:"Trial activated",       pool:"6",      unit:"running real files",   delta:"27.3%",              who:"AICRO Rounds, demo to trial trigger",baseline:"+118% vs. unmanaged book",                color:"#0E9F66" },
    { stage:"Closed customer",       pool:"1-2",    unit:"signed logos / mo",    delta:"~25% trial-to-close",who:"Lev product, sticky once adopted", baseline:"the contract; the account starts here",   color:"#FF8559" },
    { stage:"Seat + usage expansion",pool:"grows",  unit:"seats / mo / customer",delta:"30-day ramp",        who:"Customer Success + Rounds nudges",  baseline:"the account grows after the logo",        color:"#FF8559" },
    { stage:"Compounding referral",  pool:"3-5",    unit:"warm intros / mo",     delta:"month 4 onward",     who:"Lookalike loop + closed-won seed",  baseline:"the next wave of desks, cheaper than the first", color:"#FF8559" },
  ];

  const [r] = [activeRow];

  return (
    <section className="section" id="impact">
      <div className="wrap">
        <div className="section-head">
          <span className="eyebrow"><span className="dot"></span>03 / The software, drawn</span>
          <h2>The Orchestration is the workflow. This is what compounds when it runs.</h2>
          <p>Three lenses on the same engine: <strong>when</strong> each Lev buyer responds, <strong>what</strong> infrastructure carries the touch, <strong>how much</strong> compression every stage adds over the in-house baseline.</p>
        </div>

        {/* ── (A) TIMING HEATMAP ─────────────────────────────────────── */}
        <div className="card" style={{padding:0,overflow:"hidden",marginBottom:18}}>
          <div style={{padding:"22px 28px 8px 28px",borderBottom:"1px solid var(--mist)"}}>
            <div style={{display:"flex",alignItems:"baseline",justifyContent:"space-between",gap:14,flexWrap:"wrap"}}>
              <div>
                <div style={{fontFamily:"'JetBrains Mono',monospace",fontSize:10,letterSpacing:"0.12em",color:"#21A8F2",textTransform:"uppercase",fontWeight:700,marginBottom:6}}>03A · OUTREACH TIMING</div>
                <h3 style={{fontSize:22,margin:0,letterSpacing:"-0.01em"}}>When each buyer actually opens.</h3>
              </div>
              <div style={{fontSize:12,color:"var(--slate-500)",maxWidth:520,lineHeight:1.55}}>
                Calibrated reply-rate indices (100 = pool peak) across 5 weekdays × 12 operator-local hours. Sends are throttled to these windows automatically. Off-window sends still go, just down-weighted to keep deliverability healthy.
              </div>
            </div>
            <div style={{display:"flex",gap:8,marginTop:18,flexWrap:"wrap"}}>
              {heatRows.map((row,i) => (
                <button
                  key={i}
                  onClick={() => setActiveRow(i)}
                  style={{
                    padding:"8px 14px",
                    borderRadius:99,
                    border: activeRow === i ? "1px solid #21A8F2" : "1px solid var(--mist)",
                    background: activeRow === i ? "#E9F5FE" : "#fff",
                    color: activeRow === i ? "#0E7DBC" : "var(--slate-700)",
                    fontSize:12.5,
                    fontWeight: activeRow === i ? 600 : 500,
                    cursor:"pointer",
                    transition:"all .15s ease",
                  }}
                >
                  {heatRows[i].desk}
                </button>
              ))}
            </div>
          </div>
          <div style={{padding:"24px 28px 28px 28px"}}>
            <div style={{display:"grid",gridTemplateColumns:"56px repeat(12, 1fr)",gap:6,marginBottom:6}}>
              <div></div>
              {hours.map((h,i) => (
                <div key={i} style={{fontSize:10.5,color:"var(--slate-500)",fontFamily:"'JetBrains Mono',monospace",textAlign:"center"}}>{h}{i === 5 ? "p" : i >= 6 ? "p" : "a"}</div>
              ))}
            </div>
            {heatRows[r].cells.map((row,di) => (
              <div key={di} style={{display:"grid",gridTemplateColumns:"56px repeat(12, 1fr)",gap:6,marginBottom:6}}>
                <div style={{fontSize:11,fontWeight:600,color:"var(--slate-700)",display:"flex",alignItems:"center",fontFamily:"'JetBrains Mono',monospace",letterSpacing:"0.04em"}}>{days[di]}</div>
                {row.map((v,hi) => {
                  const c = heatColor(v);
                  return (
                    <div key={hi} style={{
                      background:c.bg,
                      color:c.fg,
                      borderRadius:5,
                      padding:"10px 0",
                      fontSize:10,
                      fontWeight:600,
                      textAlign:"center",
                      letterSpacing:"-0.02em",
                      fontFamily:"'JetBrains Mono',monospace",
                    }}>{v}</div>
                  );
                })}
              </div>
            ))}
            <div style={{marginTop:18,display:"grid",gridTemplateColumns:"1fr 1fr",gap:14}}>
              <div style={{padding:"14px 18px",background:"#F6F8FB",border:"1px solid var(--mist)",borderRadius:10}}>
                <div style={{fontFamily:"'JetBrains Mono',monospace",fontSize:10,letterSpacing:"0.08em",color:"var(--slate-500)",textTransform:"uppercase",fontWeight:700,marginBottom:6}}>Peak send window</div>
                <div style={{fontSize:14,color:"var(--shark)",fontWeight:600}}>{heatRows[r].peak}</div>
                <div style={{fontSize:12,color:"var(--slate-500)",marginTop:4,lineHeight:1.45}}>{heatRows[r].window}</div>
              </div>
              <div style={{padding:"14px 18px",background:"#E9F5FE",border:"1px solid rgba(33,168,242,0.30)",borderRadius:10}}>
                <div style={{fontFamily:"'JetBrains Mono',monospace",fontSize:10,letterSpacing:"0.08em",color:"#0E7DBC",textTransform:"uppercase",fontWeight:700,marginBottom:6}}>Effect</div>
                <div style={{fontSize:13.5,color:"var(--slate-700)",lineHeight:1.55}}>
                  Routing the right desk-type to the right hour shifts reply rate <strong style={{color:"#0E7DBC"}}>2.2× to 3.4×</strong> versus a flat 9-5 send cadence. The same copy, just scheduled differently.
                </div>
              </div>
            </div>
          </div>
        </div>

        {/* ── (B) INFRASTRUCTURE STACK ───────────────────────────────── */}
        <div className="card" style={{padding:"28px 32px",marginBottom:18}}>
          <div style={{display:"flex",alignItems:"baseline",justifyContent:"space-between",gap:14,flexWrap:"wrap",marginBottom:24}}>
            <div>
              <div style={{fontFamily:"'JetBrains Mono',monospace",fontSize:10,letterSpacing:"0.12em",color:"#9D4EDD",textTransform:"uppercase",fontWeight:700,marginBottom:6}}>03B · INFRASTRUCTURE</div>
              <h3 style={{fontSize:22,margin:0,letterSpacing:"-0.01em"}}>The named systems doing the work.</h3>
            </div>
            <div style={{fontSize:12,color:"var(--slate-500)",maxWidth:520,lineHeight:1.55}}>
              Four layers. Each feeds the next. Numbers are AICRO active-book throughput, Lev hits these within 90 days.
            </div>
          </div>
          <div style={{display:"flex",flexDirection:"column",gap:0}}>
            {infra.map((row,i) => (
              <Fragment key={i}>
                <div style={{
                  display:"grid",
                  gridTemplateColumns:"minmax(0,1fr) 360px",
                  gap:0,
                  border:"1px solid var(--mist)",
                  borderLeft:`4px solid ${row.color}`,
                  borderRadius:12,
                  overflow:"hidden",
                  background:"#fff",
                  alignItems:"stretch",
                }}>
                  <div style={{padding:"18px 22px",display:"flex",flexDirection:"column",justifyContent:"center",gap:6,background:`linear-gradient(90deg, ${row.tint} 0%, #fff 100%)`}}>
                    <div style={{display:"flex",alignItems:"center",gap:10}}>
                      <span style={{padding:"3px 10px",background:row.color,color:"#fff",borderRadius:99,fontFamily:"'JetBrains Mono',monospace",fontSize:9.5,fontWeight:800,letterSpacing:"0.12em"}}>{row.tag}</span>
                      <span style={{fontSize:16,fontWeight:600,color:"var(--shark)",letterSpacing:"-0.01em"}}>{row.name}</span>
                    </div>
                    <div style={{fontSize:12.5,color:"var(--slate-500)",lineHeight:1.45,maxWidth:540}}>{row.one}</div>
                  </div>
                  <div style={{padding:"14px 20px",display:"grid",gridTemplateColumns:"repeat(3,1fr)",gap:8,alignItems:"center",borderLeft:"1px solid var(--mist)"}}>
                    {row.kpi.map((k,j) => (
                      <div key={j} style={{textAlign:"center"}}>
                        <div style={{fontSize:18,fontWeight:700,color:row.color,letterSpacing:"-0.01em",lineHeight:1}}>{k.v}</div>
                        <div style={{fontSize:9,color:"var(--slate-500)",fontFamily:"'JetBrains Mono',monospace",letterSpacing:"0.04em",marginTop:5,lineHeight:1.3,textTransform:"uppercase"}}>{k.l}</div>
                      </div>
                    ))}
                  </div>
                </div>
                {i < infra.length - 1 && (
                  <div style={{display:"flex",justifyContent:"center",padding:"6px 0"}}>
                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke={row.color} strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"><path d="M12 4v16"/><path d="M5 13l7 7 7-7"/></svg>
                  </div>
                )}
              </Fragment>
            ))}
          </div>
        </div>

        {/* ── (C) CONVERSION STACK ───────────────────────────────────── */}
        <div className="card" style={{padding:"28px 32px"}}>
          <div style={{display:"flex",alignItems:"baseline",justifyContent:"space-between",gap:14,flexWrap:"wrap",marginBottom:24}}>
            <div>
              <div style={{fontFamily:"'JetBrains Mono',monospace",fontSize:10,letterSpacing:"0.12em",color:"#0E9F66",textTransform:"uppercase",fontWeight:700,marginBottom:6}}>03C · CONVERSION FOCUS</div>
              <h3 style={{fontSize:22,margin:0,letterSpacing:"-0.01em"}}>Every stage, how much compression we add.</h3>
            </div>
            <div style={{fontSize:12,color:"var(--slate-500)",maxWidth:520,lineHeight:1.55}}>
              Pool size, conversion, the tool doing the work, and the in-house baseline it beats. Each row is an investable compression point.
            </div>
          </div>
          <div style={{display:"grid",gridTemplateColumns:"180px 110px 100px 1fr 1fr",columnGap:0,fontFamily:"'JetBrains Mono',monospace",fontSize:9.5,letterSpacing:"0.08em",color:"var(--slate-500)",textTransform:"uppercase",fontWeight:700,paddingBottom:10,borderBottom:"1px solid var(--mist)",marginBottom:0}}>
            <div>Stage</div>
            <div>Pool</div>
            <div style={{textAlign:"center"}}>→ Next</div>
            <div style={{paddingLeft:18}}>System doing the work</div>
            <div style={{paddingLeft:18}}>Baseline · in-house build</div>
          </div>
          {stack.map((s,i) => {
            // Bar width scales logarithmically so universe and closed-customer
            // can sit in the same chart without burying the bottom rows.
            const poolNum = parseInt(s.pool.replace(/[^\d]/g, "")) || 1;
            const widthPct = Math.max(4, Math.min(100, (Math.log10(poolNum + 1) / Math.log10(33000)) * 100));
            return (
              <div key={i} style={{
                display:"grid",
                gridTemplateColumns:"180px 110px 100px 1fr 1fr",
                columnGap:0,
                padding:"14px 0",
                borderBottom: i < stack.length - 1 ? "1px solid var(--mist)" : "none",
                alignItems:"center",
              }}>
                <div style={{fontSize:13,fontWeight:600,color:"var(--shark)",letterSpacing:"-0.01em",display:"flex",alignItems:"center",gap:10}}>
                  <span style={{width:9,height:9,borderRadius:"50%",background:s.color,flexShrink:0,boxShadow:`0 0 0 3px ${s.color}22`}}></span>
                  {s.stage}
                </div>
                <div>
                  <div style={{position:"relative",height:18,background:"#F6F8FB",borderRadius:4,overflow:"hidden"}}>
                    <div style={{position:"absolute",inset:0,left:0,width:widthPct+"%",background:`linear-gradient(90deg, ${s.color}, ${s.color}cc)`,borderRadius:4}}></div>
                    <span style={{position:"absolute",inset:0,display:"flex",alignItems:"center",justifyContent:"flex-start",paddingLeft:6,fontSize:10.5,fontWeight:700,color:widthPct > 24 ? "#fff" : "var(--shark)",fontFamily:"'JetBrains Mono',monospace"}}>{s.pool}</span>
                  </div>
                  <div style={{fontSize:10,color:"var(--slate-500)",marginTop:4,fontFamily:"'JetBrains Mono',monospace"}}>{s.unit}</div>
                </div>
                <div style={{textAlign:"center",fontSize:12.5,fontWeight:600,color:s.color,fontFamily:"'JetBrains Mono',monospace"}}>{s.delta}</div>
                <div style={{paddingLeft:18,fontSize:12.5,color:"var(--slate-700)",lineHeight:1.45}}>{s.who}</div>
                <div style={{paddingLeft:18,fontSize:12,color:"var(--slate-500)",lineHeight:1.45,fontStyle:"italic"}}>{s.baseline}</div>
              </div>
            );
          })}
          <div style={{marginTop:20,padding:"16px 20px",background:"#1C1C24",borderRadius:10,color:"#fff",display:"flex",alignItems:"center",gap:18,flexWrap:"wrap"}}>
            <div style={{flex:1,minWidth:280}}>
              <div style={{fontFamily:"'JetBrains Mono',monospace",fontSize:10,letterSpacing:"0.14em",color:"rgba(255,255,255,0.55)",textTransform:"uppercase",fontWeight:700,marginBottom:6}}>What this means in one line</div>
              <div style={{fontSize:14,lineHeight:1.55,color:"#fff",fontWeight:500}}>
                A logo is a flag, not the finish line. The engine doesn&rsquo;t stop at the signed contract, it keeps surfacing nudges until the desk has the whole team on the agent, then feeds that closed-won profile back into the seed as the next batch of lookalikes.
              </div>
            </div>
            <div style={{padding:"12px 18px",background:"#21A8F2",borderRadius:10,color:"#fff",textAlign:"center",minWidth:160}}>
              <div style={{fontSize:9.5,fontFamily:"'JetBrains Mono',monospace",letterSpacing:"0.14em",fontWeight:700,opacity:0.9,marginBottom:4}}>MONTH 4 ONWARD</div>
              <div style={{fontSize:15,fontWeight:600,lineHeight:1.3}}>Closed customers<br/>refer the next ones</div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── Matrix ─────────────────────────────────────
function Matrix() {
  const cols = ["US contract SDR shop", "In-house SDR build", "DIY tool stack", "AICRO"];
  const rows = [
    { row: "Time to first demo", vals: [2, 1, 2, 4], aicro: "Day 30 to 45" },
    { row: "Signal-grounded outreach", vals: [1, 2, 2, 4], aicro: "6-source signal layer" },
    { row: "CRE operator in the room", vals: [1, 1, 1, 4], aicro: "Doug, weekly" },
    { row: "Reply triage in Slack", vals: [1, 1, 2, 4], aicro: "Reply Agent live" },
    { row: "Demo booked + routed to rep", vals: [1, 2, 1, 4], aicro: "Qualified handoff" },
    { row: "Cost predictability", vals: [3, 1, 2, 4], aicro: "One retainer, no headcount" },
    { row: "CRE broker + lender fluency", vals: [1, 2, 1, 4], aicro: "4 active CRE accounts" },
  ];
  return (
    <section className="section">
      <div className="wrap">
        <div className="section-head">
          <span className="eyebrow">13 / Position</span>
          <h2>Not an agency. Not a tool. 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. Run by the same operator who built pipeline for Capitalize, Gumption, and Johnson Capital, calibrated for US CRE brokers, debt and mortgage shops, lenders, and borrowers.</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 (cleaner signal map) ─────────────
function SignalMapVisual() {
  const nodes = [
    { x:"50%", y:"14%", cls:"hot",   tag:"NEW ANALYST HIRE",          co:"40-broker CRE shop · underwriting at capacity" },
    { x:"22%", y:"36%", cls:"hot",   tag:"DEBT VEHICLE RAISED",       co:"$200M fund · ramping deal volume" },
    { x:"78%", y:"36%", cls:"warm",  tag:"DEAL-VOLUME SURGE",         co:"Investment-sales shop · record quarter" },
    { x:"22%", y:"66%", cls:"warm",  tag:"AI-IN-CRE INITIATIVE",      co:"Brokerage announces an AI underwriting push" },
    { x:"78%", y:"66%", cls:"match", tag:"NO UNDERWRITING SOFTWARE",  co:"Debt shop · comps + models in Excel" },
    { x:"50%", y:"86%", cls:"hot",   tag:"BROKERAGE M&A · TEAM GROWTH",co:"Multi-market combination · doubled pipeline" },
  ];
  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 deal-team 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:"Job postings · analyst / underwriter / associate", val:"Deal volume outrunning the team in the JD" },
    { lbl:"New funds + debt vehicles raised",             val:"Fresh capital means more deals to underwrite now" },
    { lbl:"Brokerage M&A + multi-market combinations",    val:"Doubled volume on the same analyst bench" },
    { lbl:"Tech-stack detection · underwriting + comps",  val:"Comps and models built by hand in Excel" },
    { lbl:"Senior hires at debt + investment-sales shops",val:"Deal teams scaling, the grunt work scales too" },
    { lbl:"MBA CREF · NMHC · CREFC · ICSC · Inman",       val:"Conference rosters carry buying-intent windows" },
  ];
  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 operator inbox patterns. Operator-to-operator language in every line, not vendor pitch. The signal that triggered the touch is the opener.",
      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: principals and managing directors get the A track; junior associates get the C track. Proven 55%+ LinkedIn positive-reply rates to CRE operators.",
      feats:["Multi-seat orchestration", "Title-tier sequencing", "Operator vocabulary"],
      stats:[ {v:"40%+", l:"accept rate"}, {v:"55%+", l:"positive rate"} ],
    },
    {
      mark:"agent",
      name:"AICRO Outreach Agent",
      tag:"HYPER-PERSONALIZATION LAYER",
      desc:"Reads each operator's role, recent activity, and the signal that triggered the touch (an analyst hire, a new fund raised, a deal-volume surge). Writes the relevance line. CRO-approved before send.",
      feats:["Signal-grounded copy", "Per-operator 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>Routed to:</strong> Lev Rep 1</div>
      <div className="slack-row-a">
        <div className="slack-field">
          <span className="k">Name:</span>
          <span className="v">Daniel Carrington</span>
          <span className="k" style={{marginTop:6}}>Job Title:</span>
          <span className="v">Principal · Investment Sales</span>
          <span className="k" style={{marginTop:6}}>Company:</span>
          <span className="v">Carrington Capital Markets · 40-broker CRE shop · TX + FL</span>
        </div>
        <div className="slack-field">
          <span className="k">Email:</span>
          <span className="v link">dan@carringtoncm.example</span>
          <span className="k" style={{marginTop:6}}>Campaign:</span>
          <span className="v">LI | New analyst hire | CRE brokers</span>
        </div>
      </div>
      <div className="slack-pill"><span className="pdot"></span>Posted underwriting analyst role 12 days ago</div>
      <div className="slack-block">
        <span className="lbl">Last Reply:</span>
        <span className="val">Every deal we pitch needs a comp set and a first-pass underwriting, and right now two analysts build them by hand in Excel. It is the slowest part of getting an OM out the door. What does a real ten-minute turnaround actually look like on a deal we&rsquo;d send you?</span>
      </div>
      <div className="slack-block">
        <span className="lbl">Generated Response:</span>
        <span className="val">Dan, a full comp set plus a first-pass underwriting on a real deal, built in minutes instead of a day, is exactly the screen we&rsquo;d walk on a call. CRE shops your size run their live deals through Lev with the agent doing the comps and the analysts reviewing instead of building from scratch. I have Tuesday 2:30 or Thursday 11 Eastern. Send a sanitized deal and we&rsquo;ll run it live.</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>Holloway Capital Partners | Sarah Holloway</strong> · <span style={{color:"#A8AFC0"}}>Demo Held · Stage: Trial pending</span>
      </div>
      <div style={{fontSize:12,color:"#A8AFC0",marginBottom:10}}>Recommended for: Lev Rep 2</div>
      <div className="slack-source-line">
        <strong>Source:</strong> CRM · <strong>Run:</strong> AICRO Rounds · Mon May 18
      </div>
      <div className="slack-row-a">
        <div className="slack-field">
          <span className="k">Contact:</span>
          <span className="v">Sarah Holloway</span>
          <span className="k" style={{marginTop:6}}>Title:</span>
          <span className="v">Managing Director · Debt &amp; Structured Finance</span>
        </div>
        <div className="slack-field">
          <span className="k">Email:</span>
          <span className="v link">s.holloway@hollowaycap.example</span>
          <span className="k" style={{marginTop:6}}>Company:</span>
          <span className="v">Holloway Capital · 24-person debt shop · TX + AZ</span>
        </div>
      </div>
      <div className="slack-engagement">
        <div className="slack-engagement-head">📊 Engagement</div>
        <div className="slack-engagement-line">• Last meaningful activity: <strong>14d ago</strong></div>
        <div className="slack-engagement-line">• Pattern: <em>Saw demo, no trial activation</em></div>
      </div>
      <div className="slack-block" style={{marginTop:10}}>
        <span style={{fontSize:12.5,color:"#fff",fontWeight:600}}>📞 TODAY · PHONE → Sarah Holloway (+1 ###-###-####)</span>
      </div>
      <div className="slack-quote">
        Sarah, Rounds flagged your account. You saw the Lev demo on May 4 and haven&rsquo;t spun up the trial yet. Give me 15 minutes to run a real deal through the agent end to end, comps, first-pass underwriting, and the OM draft. Your team builds those by hand today; the agent collapses a day of work to an hour. Tuesday or Wednesday?
      </div>
      <div className="slack-callout">📞 If voicemail: Sarah, following up on the May 4 demo. Texting you a 90-second clip of the agent running a sanitized deal file end to end.</div>
      <div className="slack-callout" style={{color:"#A8AFC0",marginTop:8}}>
        <strong style={{color:"#fff"}}>Why now:</strong> Demo held 14 days ago, no trial activation, no follow-up logged. 24-person debt shop underwriting deals by hand means the agent value compounds across every deal at once.
      </div>
      <div className="slack-signals">
        <span className="sl">Signals observed:</span>
        <ul>
          <li>Lev demo held May 4, 14 days ago, no trial activation in CRM</li>
          <li>24-person debt shop across TX + AZ, high deal velocity</li>
          <li>Posted 2 analyst roles last quarter, manual underwriting at capacity</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 → trial activation", v:"+118%", d:"AICRO Rounds + Reply Agent" },
    { l:"Net-new operators in pipeline", v:"3.2×", d:"signal coverage uplift" },
    { 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 Henrik.<br/>Friday: pipeline MBR.<br/>Quarterly: next funding round pipeline math.</h3>
          <p style={{fontSize:13,color:"var(--slate-500)"}}>Doug walks the room weekly. Every reply, every demo booked, every customer closed 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 operator you close<br/>makes the next one easier to find.</h3>
          <p style={{fontSize:13,color:"var(--slate-500)"}}>Closed-won operators feed back into the seed list as lookalikes. Quarterly refresh tunes the signal pack against the operator profiles that actually convert.</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:"Analyst and underwriter hires, new funds and debt vehicles raised, brokerage M&A combinations, underwriting-software stack gaps, senior hires at debt and investment-sales shops, and the MBA CREF + NMHC + CREFC + ICSC + Inman conference rosters. The signal map fires when a desk is feeling the exact pain Lev solves: comps, underwriting, document review, and insurance analysis eating analyst time at scale.",
      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 from the operator signal that triggered it, peer to peer, never a vendor pitch.",
      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:"Booked demos, handed to your reps.",
      body:"The Reply Agent triages every reply and books the demo within minutes. AICRO Rounds grades stalled opportunities against your live CRM, recommends the next action, and routes it to the right Lev rep in Slack. Demo-held-no-trial is a daily Rounds query. Your Lev team handles the agent walkthrough and sanitized deal run once it lands.",
      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 customer you close sharpens the seed list. Closed-won profiles feed back as lookalikes by desk-type and geo, so the signal gets more accurate every month. The 68th, 80th, and 120th customers are easier to find than the first 67 ever were. Monday&rsquo;s signal review becomes the next strategic-investor pipeline math.",
      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">07 / 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 = {
  brokerage_owners: {
    label: "CRE Brokers",
    sub: "Investment sales + leasing · US",
    summary: "Investment-sales principals booking demos within the week.",
    summaryBody: "CRE brokers running 20 to 100-person investment-sales and leasing shops are the strongest pool. The opener that converts is a new analyst or associate hire plus a visible deal-volume surge, a team whose comps and underwriting are built by hand and can no longer keep up. A principal at a 40-broker Texas shop replied within hours of a signal-triggered LinkedIn DM. Illustrative of how the beachhead pool runs in the first 60 days.",
    kpis: { sent:"18,420", positives:"94", meetings:"22", pipeline:"31 desks in play", revenue:"3 trials" },
    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 | New analyst hire | CRE Brokers · TX + FL", sent:"4,820", contacted:"3,140", connReq:"-", connAcc:"-", positives:"38", posRate:"28.4%", accept:"-" },
      { type:"li", name:"LI | Principal / Investment Sales | 20-100 Broker Shops", sent:"312", contacted:"264", connReq:"264", connAcc:"122", positives:"24", posRate:"61.1%", accept:"46.2%", active:true },
      { type:"em", name:"EM | Deal-volume surge signal | CRE Brokers", sent:"3,240", contacted:"2,118", connReq:"-", connAcc:"-", positives:"18", posRate:"24.4%", accept:"-" },
      { type:"li", name:"LI | Owner-Operators | Regional Investment-Sales Shops", sent:"148", contacted:"122", connReq:"122", connAcc:"58", positives:"10", posRate:"52.6%", accept:"47.5%" },
      { type:"em", name:"EM | Brokerage M&A · team growth | Multi-Market", sent:"1,820", contacted:"1,212", connReq:"-", connAcc:"-", positives:"4", posRate:"19.2%", accept:"-" },
    ],
    drawer: {
      name: "LI | Principal / Investment Sales | 20-100 Broker Shops",
      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:"Trials", val:3, w:3, color:"#0E9F66", pct:"3 active" },
        { stage:"Closed Won", val:1, w:2, color:"#0E9F66", pct:"1 paid" },
      ],
      recent: [
        { name:"Daniel Carrington · 40-broker TX CRE shop · principal", date:"May 18", tag:"Trial Activated", booked:true },
        { name:"Lina Mansour · investment-sales shop · managing director", date:"May 17", tag:"Demo Booked", booked:true },
        { name:"Maria Velez · multi-market FL brokerage · 88 brokers", date:"May 16", tag:"Interested" },
        { name:"Brett Coleman · AZ CRE shop · M&A integrating", date:"May 15", tag:"Demo Booked", booked:true },
        { name:"Sofie Khan · GA + SC brokerage · 110 brokers", date:"May 14", tag:"Interested" },
        { name:"Reza Karimi · leasing-focused brokerage · principal", date:"May 13", tag:"Interested" },
        { name:"Marcus Pace · CO CRE shop · 70 brokers", date:"May 12", tag:"Interested" },
      ],
    },
  },
  real_estate_law_firms: {
    label: "Debt / Mortgage Brokers",
    sub: "Originators · capital markets · US",
    summary: "Originators responding to the analyst-hours angle.",
    summaryBody: "Debt and mortgage brokers with 10 to 60 people, originating and structuring deals where comps, underwriting, and OM prep eat analyst hours per deal. The opener is a new fund or debt vehicle raised plus a recent analyst hire. Your peer audience. Managing directors and heads of capital markets are the right title tier. Illustrative pool projection.",
    kpis: { sent:"6,140", positives:"28", meetings:"6", pipeline:"11 firms in play", revenue:"1 trial" },
    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 | New fund raised + analyst hiring | Debt Shops", sent:"2,140", contacted:"1,388", connReq:"-", connAcc:"-", positives:"14", posRate:"24.0%", accept:"-" },
      { type:"li", name:"LI | Managing Director | Debt & Capital Markets · 20-60", sent:"148", contacted:"112", connReq:"112", connAcc:"48", positives:"8", posRate:"52.9%", accept:"42.9%", active:true },
      { type:"em", name:"EM | Deal-volume jump | Multi-Market Debt Shops", sent:"1,820", contacted:"1,124", connReq:"-", connAcc:"-", positives:"6", posRate:"19.4%", accept:"-" },
    ],
    drawer: {
      name: "LI | Managing Director | Debt & Capital Markets · 20-60",
      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:"Trials", val:1, w:2, color:"#0E9F66", pct:"1 active" },
        { stage:"Closed Won", val:0, w:1, color:"#CBD5E1", pct:"-" },
      ],
      recent: [
        { name:"Sarah Holloway · 24-person TX + AZ debt shop · MD", date:"May 18", tag:"Demo Booked", booked:true },
        { name:"Priya Anand · NY capital-markets advisory · 40 people", date:"May 16", tag:"Interested" },
        { name:"Dale Foster · independent FL mortgage brokerage", date:"May 14", tag:"Interested" },
        { name:"Nadia Cole · structured-finance shop · 28 people", date:"May 13", tag:"Demo Booked", booked:true },
      ],
    },
  },
  title_notary_closing: {
    label: "Borrowers / Principals",
    sub: "Owner-operators · acquisitions · US",
    summary: "Owner-operators responding to the per-deal underwriting angle.",
    summaryBody: "Owner-operators and borrowers in active acquisition mode, running 20 to 200 acquisitions a year, where every deal needs its own comp set and underwriting model. The trigger is a deal-volume surge in the press plus an underwriting-software stack gap (spreadsheets only, no agent layer). Principals and heads of acquisitions are the right title tier. Illustrative pool projection.",
    kpis: { sent:"5,420", positives:"22", meetings:"5", pipeline:"9 firms in play", revenue:"1 trial" },
    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 | Deal-volume surge + per-deal cost | Owner-Operators", sent:"1,820", contacted:"1,212", connReq:"-", connAcc:"-", positives:"10", posRate:"24.4%", accept:"-" },
      { type:"li", name:"LI | Principal / Head of Acquisitions | Active Buyers", sent:"148", contacted:"122", connReq:"122", connAcc:"54", positives:"8", posRate:"58.3%", accept:"44.3%", active:true },
      { type:"em", name:"EM | Portfolio-growth signal · multi-market | Operators", sent:"1,420", contacted:"918", connReq:"-", connAcc:"-", positives:"4", posRate:"21.1%", accept:"-" },
    ],
    drawer: {
      name: "LI | Principal / Head of Acquisitions | Active Buyers",
      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:"Trials", val:1, w:1, color:"#0E9F66", pct:"1 active" },
        { stage:"Closed Won", val:0, w:1, color:"#CBD5E1", pct:"-" },
      ],
      recent: [
        { name:"Elin Ross · principal · 5-market TX operator", date:"May 18", tag:"Demo Booked", booked:true },
        { name:"Sanjay Mehta · CA owner-operator · acquisitions", date:"May 16", tag:"Interested" },
        { name:"Grace Holloway · GA multifamily operator · 12 deals/yr", date:"May 15", tag:"Interested" },
        { name:"Viktor Salas · multi-market operator · 1,200 units", date:"May 13", tag:"Trial Activated", booked:true },
      ],
    },
  },
  developers_operators: {
    label: "Lenders / Underwriting Teams",
    sub: "Credit · risk · analysts · US",
    summary: "Credit officers responding to the underwriting-throughput angle.",
    summaryBody: "Lenders and credit teams underwriting 5 to 30 deals a quarter, where every deal carries its own comp set, model, and risk memo. The message leads with the throughput wedge, one agent across comps, underwriting, and document review for every deal in the queue. Chief credit officers, heads of underwriting, and senior analysts are the title tier. Illustrative pool projection.",
    kpis: { sent:"8,820", positives:"42", meetings:"9", pipeline:"16 firms in play", revenue:"2 trials" },
    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 | Underwriting throughput | US Lenders · 5-30 deals/qtr", sent:"3,140", contacted:"2,018", connReq:"-", connAcc:"-", positives:"22", posRate:"26.4%", accept:"-" },
      { type:"li", name:"LI | Chief Credit Officer / Head of Underwriting | Lenders", sent:"212", contacted:"180", connReq:"180", connAcc:"82", positives:"14", posRate:"56.0%", accept:"45.6%", active:true },
      { type:"em", name:"EM | New debt vehicle signal | Regional Lenders", sent:"2,420", contacted:"1,612", connReq:"-", connAcc:"-", positives:"6", posRate:"22.2%", accept:"-" },
    ],
    drawer: {
      name: "LI | Chief Credit Officer / Head of Underwriting | Lenders",
      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:"Trials", val:2, w:2, color:"#0E9F66", pct:"2 active" },
        { stage:"Closed Won", val:0, w:1, color:"#CBD5E1", pct:"-" },
      ],
      recent: [
        { name:"Tara Nguyen · regional lender · head of underwriting", date:"May 18", tag:"Trial Activated", booked:true },
        { name:"Beau Carter · multifamily lender · TX + AZ", date:"May 17", tag:"Demo Booked", booked:true },
        { name:"Imani Clarke · private credit fund · FL", date:"May 15", tag:"Interested" },
        { name:"Felipe Duarte · bridge lender · head of credit", date:"May 14", tag:"Interested" },
      ],
    },
  },
};

// ─── 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 / vericasa / 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">Trials / 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>
  );
}

// Consolidated: the live interactive portal + the four supporting screens
// in one continuous dark section. One narrative beat, not two.
function ClientPortalSection({ icp, setIcp }) {
  const shots = [
    { src:"uploads/pasted-1777222339189-0.png", label:"Executive Summary",          caption:"Monday view. Email plus LinkedIn side by side, weekly positive replies, every campaign with its full funnel." },
    { src:"uploads/pasted-1777222392601-0.png", label:"Campaign Drawer",            caption:"Click any campaign to drill in. Connection request, accepted, replied, positive, demo, trial activated, end to end." },
    { src:"uploads/pasted-1777222050657-0.png", label:"Reply Agent in Slack",       caption:"A broker's reply hits Slack within minutes, classified, response drafted, demo booked. A Lev rep approves before send." },
    { src:"uploads/pasted-1777222220819-0.png", label:"Sales Action · AICRO Rounds",caption:"A 24-person US debt shop saw the demo 14 days ago, no trial. Rounds grades it Grade A, routes to the rep, writes the script." },
  ];
  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)"}}>08 / Flagship</span>
          <h2>The Client Portal you operate from.</h2>
          <p style={{color:"rgba(255,255,255,.6)"}}>
            One pane of glass every Monday. Live interactive view on top, the four screens you actually live in below.
          </p>
        </div>
        <ClientPortalV2 icp={icp}/>
        <div style={{marginTop:48,paddingTop:32,borderTop:"1px solid rgba(255,255,255,0.08)"}}>
          <div style={{display:"flex",alignItems:"baseline",justifyContent:"space-between",marginBottom:18,flexWrap:"wrap",gap:12}}>
            <div>
              <div style={{fontFamily:"'JetBrains Mono',monospace",fontSize:10,letterSpacing:"0.14em",color:"rgba(255,255,255,0.5)",textTransform:"uppercase",fontWeight:700,marginBottom:4}}>The four screens, in detail</div>
              <h3 style={{color:"#fff",fontSize:22,margin:0,letterSpacing:"-0.01em"}}>Monday summary, campaign drill-in, Slack reply agent, sales action card.</h3>
            </div>
            <span style={{fontSize:12,color:"rgba(255,255,255,0.55)",fontFamily:"'JetBrains Mono',monospace",letterSpacing:"0.04em"}}>real data, anonymized</span>
          </div>
          <div style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:18}}>
            {shots.map((s,i) => (
              <div key={i} style={{
                background:"#fff",
                border:"1px solid rgba(255,255,255,0.10)",
                borderRadius:14,
                overflow:"hidden",
                boxShadow:"0 1px 2px rgba(0,0,0,0.20), 0 8px 24px rgba(0,0,0,0.30)",
              }}>
                <div style={{padding:"10px 16px",background:"#F1F5F9",borderBottom:"1px solid #E2E8F0",display:"flex",alignItems:"center",gap:10}}>
                  <span style={{width:8,height:8,borderRadius:"50%",background:"#21A8F2"}}></span>
                  <span style={{fontFamily:"'JetBrains Mono',monospace",fontSize:10,letterSpacing:"0.12em",color:"#334155",fontWeight:600,textTransform:"uppercase"}}>{s.label}</span>
                </div>
                <img src={s.src} alt={s.label} style={{display:"block",width:"100%",height:"auto"}}/>
                <div style={{padding:"14px 18px",fontSize:13,color:"#64748B",lineHeight:1.55}}>{s.caption}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── CRO Stack ─────────────────
function CROStack() {
  const modules = [
    { l:"Strategy", t:"ICP & Signal Map", d:"4 CRE desk-type pools (brokers, debt and mortgage shops, borrowers and principals, lenders and underwriting teams) across the US. 6 signal layers that fire when a desk needs Lev. Quarterly refresh tuned against the profiles that convert.", delivs:["4 desk-type ICP cards","6-source signal architecture","Pool-concentration scorecard","Quarterly recalibration"] },
    { l:"Playbooks", t:"Productized SOPs", d:"Discovery scripts and demo flows for CRE brokers, debt originators, borrowers, and underwriting leads. ROI framing: a day of analyst work per deal to minutes. Horizontal CRE-workflow positioning vs single-task point tools.", delivs:["Discovery script · per desk-type","Demo flow + ROI walkthrough","Positioning battlecards","Onboarding checklist"] },
    { l:"Comp", t:"Rep Comp Structure", d:"New-logo accelerators tuned to Lev&rsquo;s SaaS model. Trial-to-paid SPIFF. Override design for the sales bench you hire next.", delivs:["Ramp plan · 90/180/365","Trial activation SPIFF","New-logo accelerator","Board-defendable model"] },
    { l:"Onboarding", t:"Operator Cadence", d:"Monday signal review with Yaakov and the team. Wednesday reply triage. Friday MBR. Quarterly next-stage pipeline 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">09 / 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 product and the desks that use it love it. What you need next is a proven motion to acquire net-new CRE brokers, debt originators, borrowers, and underwriting teams at volume. Strategy, playbooks, comp design, and onboarding, run as one system.</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 · scaled CREXi revenue $0 to $70M · PropTech + CRE operator</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">HubSpot 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">11 / 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 the US sales hire plus tooling build, at a fraction of the time and cost.</p>
        </div>
        <div className="cost-grid">
          <div className="cost-card">
            <div className="cost-eyebrow">Build the demand engine yourself</div>
            <h3>2 SDRs + demand-gen lead + tools.</h3>
            <p style={{color:"var(--slate-500)",fontSize:14,marginTop:6}}>9 to 12 months to first repeatable pipeline.</p>
            <div className="cost-list">
              <div className="cost-list-row"><span className="label">2 SDRs + demand-gen lead (loaded)</span><span className="val">$280 to $360K</span></div>
              <div className="cost-list-row"><span className="label">Founder oversight (Yaakov + team)</span><span className="val">$120K 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 repeatable 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">$430 to $530K</span></div>
            </div>
            <div className="cost-meta">9 to 12 months and a new layer of management before you know if the build works.</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">Demos handed to your reps</span><span className="val">Day 45 onward</span></div>
              <div className="cost-list-row total"><span className="label">Cost vs. in-house Year 1</span><span className="val">~7% 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 four graded CRE desk-type pools (brokers, debt and mortgage shops, borrowers, lenders), a live signal layer, booked demos on your reps&rsquo; calendars, and a fully-instrumented funnel. The in-house build delivers a sales team that is still ramping.</div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── Case studies — 5 ─────────────────
function CaseStudies() {
  const cases = [
    {
      co: "Henry AI",
      stage: "AI-native CRE platform · closest analog",
      sector: "AI Platform · CRE Capital Markets",
      quote: "An AI platform for CRE capital-markets brokers. AICRO runs their cold outbound. Same shape as Lev: an AI-native deal-flow product with product-market fit that still needs a net-new pipeline engine above it.",
      attr: "Henry AI · AI platform for CRE",
      systems: ["Lookalike Targeting", "Operator-to-Broker Outbound", "Signal-Based Sequencing", "Reply Triage"],
      metrics: [
        { v: "AI for CRE", l: "capital markets" },
        { v: "Outbound", l: "run by AICRO" },
        { v: "Same play", l: "as Lev", live: true },
      ],
    },
    {
      co: "Capitalize",
      stage: "CRE fintech · brokers + lenders",
      sector: "CRE Data & AI",
      quote: "We went through three or four iterations before AICRO. The team engineered a complete GTM system that put qualified CRE meetings on the calendar at scale.",
      attr: "Luke Morris · Co-founder",
      systems: ["Signal-First Outbound", "End-to-End Revenue Engineering", "HubSpot GTM build", "CRO-led enablement"],
      metrics: [
        { v: "346", l: "meetings booked", live: true },
        { v: "30%+", l: "email PRR · L30D" },
        { v: "95%", l: "PRR · CREFC cohort" },
      ],
    },
    {
      co: "Gumption",
      stage: "CRE deal marketplace",
      sector: "CRE Debt Marketplace",
      quote: "Before AICRO we were scaling linearly. Now we scale exponentially.",
      attr: "Gumption · founder engagement",
      systems: ["Signal-Based Deal Flow Engine", "AI Multi-Channel Outbound", "Predictive Lead Scoring", "CRO-Built Playbooks"],
      metrics: [
        { v: "$98.8M", l: "active pipeline", live: true },
        { v: "$65M", l: "attributed · 11 deals" },
        { v: "57.7%", l: "LinkedIn PRR" },
      ],
    },
    {
      co: "Johnson Capital",
      stage: "CRE capital advisory",
      sector: "CRE Capital Advisory",
      quote: "The right-fit track is finding the right people, and meetings are landing in our broker calendar weekly. The motion knows our industry.",
      attr: "Johnson Capital · advisory engagement",
      systems: ["Signal-First Outbound", "Multi-Channel Sequencing", "Right-Fit Track", "CRO-led Pipeline Math"],
      metrics: [
        { v: "58%", l: "LinkedIn PRR", live: true },
        { v: "57%", l: "PRR · NMHC cohort" },
        { v: "Weekly", l: "demos booked" },
      ],
    },
    {
      co: "Worth Clark",
      stage: "Real estate brokerage",
      sector: "Real Estate Brokerage",
      quote: "Around half of every positive responder schedules a call immediately. The combination of reach and close rate is why this motion scales for an operator.",
      attr: "Worth Clark · brokerage engagement",
      systems: ["Multi-Channel Outbound", "Operator Recruiting Funnel", "Reply Triage", "CRO-led Cadence"],
      metrics: [
        { v: "~50%", l: "of positives → meeting", live: true },
        { v: "Operator", l: "recruiting funnel" },
        { v: "Multi-channel", l: "engine" },
      ],
    },
  ];
  return (
    <section className="section" id="cases">
      <div className="wrap">
        <div className="section-head">
          <span className="eyebrow">10 / Proof</span>
          <h2>We&rsquo;ve taken AI and PropTech to market in commercial real estate. Repeatedly.</h2>
          <p>Five engagements that say the same thing. We know this buyer, we know AI-native go-to-market, and we know how to put a CRE product in front of the brokers, lenders, and borrowers who actually move. Henry AI is the closest read on Lev.</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 · operator-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 + Lev principal (Yaakov, 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">12 / 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 — custom demo via Calendly ─────────────
function CTA() {
  return (
    <section className="section" id="cta">
      <div className="wrap">
        <div className="cta-block">
          <div className="cta-block-bg"></div>
          <div className="cta-left" style={{flex:1}}>
            <span className="eyebrow" style={{color:"rgba(255,255,255,.5)"}}>14 / Custom demo + Q&amp;A</span>
            <h2 style={{marginTop:18,textWrap:"balance"}}>Yaakov, the custom demo is built. Let&rsquo;s walk it together.</h2>
            <p>We&rsquo;ve already built the Lev instance. The orchestration layer is live: four CRE desk-type pools graded (brokers, debt and mortgage shops, borrowers, lenders), signals firing across the US, sample operator-to-operator sequences ready. We&rsquo;d rather walk you through it for 30 minutes than send another email. Pick a slot below and we&rsquo;ll run it live, take your questions, and you decide whether the next 90 days are with us.</p>
            <div style={{marginTop:32,display:"flex",alignItems:"center",gap:18,flexWrap:"wrap"}}>
              <a href="https://calendly.com/doug-aicro/custom-demo-qa"
                 target="_blank" rel="noopener"
                 className="btn btn-lg"
                 style={{background:"#FF8559",color:"#fff",border:"none",fontWeight:600,padding:"14px 28px",borderRadius:99,fontSize:15,textDecoration:"none",letterSpacing:"-0.005em"}}>
                Book the custom demo + Q&amp;A →
              </a>
              <span style={{fontSize:13,color:"rgba(255,255,255,0.65)",lineHeight:1.5,flex:1,minWidth:280}}>
                30-minute live walkthrough on Calendly. No deck, no slides. The orchestration layer running in your tab against the four desk-type pools. You see what we&rsquo;d send to a CRE broker, a debt originator, a borrower principal, and a head of underwriting on day one.
              </span>
            </div>
            <div style={{marginTop:18,fontSize:12,color:"rgba(255,255,255,0.45)",fontFamily:"'JetBrains Mono',monospace",letterSpacing:"0.04em"}}>
              calendly.com/doug-aicro/custom-demo-qa
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

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

// ─── Section: Prospect Universe ─────────────────────────────────────
function ProspectUniverse() {
  const verticals = [
    { v:"CRE Brokers", stat:"100K+", statLbl:"US CRE broker professionals", frag:"CBRE, JLL, Cushman, Marcus & Millichap and tens of thousands of independent investment-sales and leasing shops. Every pitch needs a comp set and a first-pass underwriting, and most are built by hand.", buyer:"Principal / Managing Director · Investment Sales" },
    { v:"Debt / Mortgage Brokers", stat:"Thousands", statLbl:"US CRE finance + capital-markets shops", frag:"Walker & Dunlop, Berkadia, Greystone and a long tail of regional debt and mortgage shops. Originators model and draft OMs per deal, where turn-time from deal-in to term sheet is the edge.", buyer:"Managing Director · Capital Markets" },
    { v:"Borrowers / Principals", stat:"10K+", statLbl:"US owner-operators + sponsors", frag:"Owner-operators and sponsors in active acquisition mode, each deal carrying its own comps and underwriting model. Most still run that work in spreadsheets.", buyer:"Principal / Head of Acquisitions" },
    { v:"Lenders / Underwriting Teams", stat:"Hundreds", statLbl:"US CRE lenders + credit funds", frag:"Banks, debt funds, and CRE lenders whose credit teams underwrite a constant deal pipeline, every deal a comp set, a model, and a risk memo.", buyer:"Chief Credit Officer / Head of Underwriting" },
  ];
  return (
    <section className="section" id="universe">
      <div className="wrap">
        <div className="section-head">
          <span className="eyebrow"><span className="dot"></span>04 / Your prospect universe</span>
          <h2>We mapped the market you sell into.</h2>
          <p>Before a single email goes out, here is the buyer universe Lev can win across the US. It is large and it is fragmented, which is exactly why an outbound engine compounds rather than saturates.</p>
        </div>
        <div style={{display:"grid",gridTemplateColumns:"repeat(3,1fr)",gap:18}}>
          {verticals.map((d,i) => (
            <div key={i} className="card" style={{padding:26,display:"flex",flexDirection:"column",gap:12}}>
              <div style={{fontSize:15,fontWeight:600,color:"var(--shark)",letterSpacing:"-0.01em"}}>{d.v}</div>
              <div style={{display:"flex",alignItems:"baseline",gap:12,paddingBottom:10,borderBottom:"1px solid var(--mist)"}}>
                <span style={{fontSize:34,fontWeight:600,letterSpacing:"-0.02em",color:"#21A8F2",lineHeight:1}}>{d.stat}</span>
                <span style={{fontSize:10.5,color:"var(--slate-500)",fontFamily:"'JetBrains Mono',monospace",letterSpacing:"0.05em",textTransform:"uppercase"}}>{d.statLbl}</span>
              </div>
              <p style={{fontSize:13,color:"var(--slate-500)",lineHeight:1.6,margin:0}}>{d.frag}</p>
              <div style={{marginTop:"auto",paddingTop:10,fontSize:11,color:"var(--slate-700)",fontFamily:"'JetBrains Mono',monospace",letterSpacing:"0.04em"}}>
                <span style={{color:"var(--slate-400)"}}>BUYER · </span>{d.buyer}
              </div>
            </div>
          ))}
          <div className="card" style={{padding:26,background:"var(--shark)",display:"flex",flexDirection:"column",justifyContent:"center",gap:10}}>
            <div style={{fontFamily:"'JetBrains Mono',monospace",fontSize:10,letterSpacing:"0.12em",color:"rgba(255,255,255,.5)",textTransform:"uppercase",fontWeight:600}}>The opportunity</div>
            <div style={{fontSize:15,lineHeight:1.55,color:"#fff",fontWeight:500}}>
              Hundreds of thousands of US CRE brokers, debt originators, owner-operators, and underwriting teams, leaner than their deal flow, building comps and underwriting models by hand in Excel. They will not all find Lev on their own. That gap is the list we build, prioritize, and work every week.
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── Section: A-Tier Targets · Why Now ─────────────────────────────────────
function ATierTargets() {
  const targets = [
    {
      co:"Matthews Real Estate Investment Services",
      vert:"CRE Brokers",
      size:"Nashville, TN · ~1,000 agents · privately held",
      why:"Fastest-scaling private investment-sales brokerage in the country. The model is high agent count and high deal velocity, and every agent builds comps and BOVs by hand.",
      how:"Agent-network pilot, one division on Lev, measure time from deal to OM.",
      next:"Comp speed across a thousand agents wins more listings. A scaling shop feels the analyst bottleneck before the giants do.",
    },
    {
      co:"Stream Realty Partners",
      vert:"CRE Brokers",
      size:"Dallas, TX · ~1,300 people · 15 markets · privately held",
      why:"Full-service shop scaling across markets, leasing and investment sales running on lean analyst benches per office.",
      how:"Pilot Lev in one market team, measure underwriting and comp hours saved per deal.",
      next:"A private, fast-growing firm buys on velocity and ROI, not a 9-month enterprise procurement cycle.",
    },
    {
      co:"Slatt Capital",
      vert:"Debt / Mortgage Brokers",
      size:"CA · independent mortgage banking · 50+ yrs · $1-250M deals",
      why:"Independent mortgage bank where originators model and draft per deal. Turn-time from deal-in to term sheet is the entire competitive edge.",
      how:"Drop Lev into origination, comps and first-pass underwriting on every deal that comes in.",
      next:"An independent shop owns its own stack decisions. The MD says yes in one meeting, not one quarter.",
    },
    {
      co:"Cooper Horowitz",
      vert:"Debt / Mortgage Brokers",
      size:"New York, NY · ~60 yrs · 150+ deals / $10B+ a year",
      why:"A lean NYC debt shop closing enormous volume on a small team, exactly the desk where per-deal underwriting time is the binding constraint.",
      how:"Pilot with the origination team, measure analyst hours saved on comps and underwriting per closing.",
      next:"Yaakov's backyard. A principal-run firm where the decision-maker answers a peer directly.",
    },
    {
      co:"The Bascom Group",
      vert:"Borrowers / Principals",
      size:"Irvine, CA · value-add multifamily · active fund acquirer",
      why:"An active value-add acquirer with a live fund, underwriting a constant pipeline of deals to screen and win.",
      how:"Embed Lev in the acquisitions underwriting workflow, comps and models on every deal screened.",
      next:"A sponsor buying on a fund clock needs underwriting throughput now, and owns the buying decision in-house.",
    },
    {
      co:"Thorofare Capital",
      vert:"Lenders / Underwriting Teams",
      size:"Los Angeles, CA · $15-100M loans · vertically integrated debt manager",
      why:"A mid-market debt manager whose credit team underwrites every deal, comp set, model, and risk memo, on a lean bench.",
      how:"Pilot with one underwriting pod, measure deals-per-analyst lift over 30 days.",
      next:"A focused mid-market lender moves on a pilot. The CCO can green-light without an enterprise committee.",
    },
  ];
  return (
    <section className="section section-soft" id="targets">
      <div className="wrap">
        <div className="section-head">
          <span className="eyebrow">05 / A-tier targets · why now</span>
          <h2>Not a category. A list. Here is who we&rsquo;d open with.</h2>
          <p>We deliberately skip the household giants. CBRE, JLL, and the mega-funds build in-house, buy through procurement, and do not move on a cold note. The buyers who do are the mid-market shops with real deal volume and a lean analyst bench, where the principal answers, the pain is acute, and Lev deploys in weeks. A few examples below, each with the reason it fits and the wedge that makes it scale. The full A-list is scored and refreshed weekly once we are live.</p>
        </div>
        <div style={{display:"grid",gridTemplateColumns:"repeat(3,1fr)",gap:16}}>
          {targets.map((t,i) => (
            <div key={i} className="card" style={{padding:22,display:"flex",flexDirection:"column",gap:12}}>
              <div style={{display:"flex",alignItems:"center",gap:8}}>
                <span style={{padding:"3px 9px",borderRadius:99,background:"#E9F5FE",color:"#0E7DBC",fontFamily:"'JetBrains Mono',monospace",fontSize:9,fontWeight:700,letterSpacing:"0.06em",textTransform:"uppercase"}}>{t.vert}</span>
              </div>
              <div>
                <div style={{fontSize:16,fontWeight:600,color:"var(--shark)",letterSpacing:"-0.01em",lineHeight:1.25}}>{t.co}</div>
                <div style={{fontSize:11,color:"var(--slate-500)",fontFamily:"'JetBrains Mono',monospace",marginTop:3}}>{t.size}</div>
              </div>
              <div style={{borderTop:"1px solid var(--mist)",paddingTop:10}}>
                <div style={{fontFamily:"'JetBrains Mono',monospace",fontSize:9,letterSpacing:"0.1em",color:"#21A8F2",textTransform:"uppercase",fontWeight:700,marginBottom:5}}>Why now</div>
                <p style={{fontSize:12.5,color:"var(--slate-700)",lineHeight:1.5,margin:0}}>{t.why}</p>
              </div>
              <div>
                <div style={{fontFamily:"'JetBrains Mono',monospace",fontSize:9,letterSpacing:"0.1em",color:"#0E9F66",textTransform:"uppercase",fontWeight:700,marginBottom:5}}>How they use it</div>
                <p style={{fontSize:12.5,color:"var(--slate-700)",lineHeight:1.5,margin:0}}>{t.how}</p>
              </div>
              <div style={{marginTop:"auto",paddingTop:8,borderTop:"1px dashed var(--mist)"}}>
                <div style={{fontFamily:"'JetBrains Mono',monospace",fontSize:9,letterSpacing:"0.1em",color:"var(--slate-400)",textTransform:"uppercase",fontWeight:700,marginBottom:5}}>The wedge</div>
                <p style={{fontSize:12,color:"var(--slate-500)",lineHeight:1.5,margin:0,fontStyle:"italic"}}>{t.next}</p>
              </div>
            </div>
          ))}
        </div>
        <div style={{marginTop:20,padding:"18px 24px",background:"#fff",border:"1px solid var(--mist)",borderRadius:12,fontSize:13.5,color:"var(--slate-700)",lineHeight:1.6}}>
          Real firms. Illustrative angles. In week one we turn this into a scored, deduped A-list across all four segments with verified dated public signals (analyst and underwriter hires, new funds and debt vehicles raised, deal-volume surges, brokerage M&A combinations), refreshed as new signals fire.
        </div>
      </div>
    </section>
  );
}

// ─── Section: ICP Launch Map ──────────────────────────────
// Concentrated US launch map: four tiers, named CRE firms,
// real US locations, decision-maker title, the wedge to open with.
function ICPLaunchMap() {
  const tiers = [
    {
      tier:"T1",
      label:"CRE Brokers",
      color:"#21A8F2", tint:"#E9F5FE",
      universe:"~100,000 US CRE producers",
      buyer:"Principal / MD · Investment Sales",
      wedge:"A recent analyst hire or a deal-volume surge. The team is building comps and underwriting by hand and feeling it this week.",
      firms:[
        { n:"Matthews Real Estate Inv. Svcs", loc:"Nashville, TN · investment sales", tag:"already on A-list" },
        { n:"Stream Realty Partners",  loc:"Dallas, TX · full-service · 15 mkts", tag:"already on A-list" },
        { n:"Lee & Associates",        loc:"Irvine, CA · brokerage network" },
        { n:"Kidder Mathews",          loc:"Seattle, WA · West Coast CRE" },
        { n:"SVN International",        loc:"Boston, MA · brokerage network" },
        { n:"Hanley Investment Group",  loc:"Corona del Mar, CA · retail IS" },
        { n:"SRS Real Estate Partners", loc:"Dallas, TX · retail investment sales" },
        { n:"The Boulder Group",        loc:"Wilmette, IL · net-lease IS" },
      ],
    },
    {
      tier:"T2",
      label:"Debt / Mortgage Brokers",
      color:"#9D4EDD", tint:"#F4ECFE",
      universe:"Thousands of US CRE finance shops",
      buyer:"Managing Director · Capital Markets",
      wedge:"A new fund or debt vehicle raised plus a recent analyst hire. Faster underwriting is the edge in a turn-time business.",
      firms:[
        { n:"Slatt Capital",                 loc:"Marin, CA · independent mortgage bank", tag:"already on A-list" },
        { n:"Gantry",                        loc:"San Francisco, CA · largest indie mortgage bank" },
        { n:"George Smith Partners",         loc:"Los Angeles, CA · capital advisory" },
        { n:"Cooper Horowitz",               loc:"New York, NY · debt brokerage", tag:"already on A-list" },
        { n:"Northmarq",                     loc:"Minneapolis, MN · debt + equity" },
        { n:"Cronheim Mortgage",             loc:"Chatham, NJ · mortgage banking" },
        { n:"Largo Capital",                 loc:"Buffalo, NY · mortgage banking" },
        { n:"Talonvest Capital",             loc:"Irvine, CA · debt + equity advisory" },
      ],
    },
    {
      tier:"T3",
      label:"Borrowers / Principals",
      color:"#0E9F66", tint:"#E5F9F0",
      universe:"Tens of thousands of US owner-operators",
      buyer:"Principal / Head of Acquisitions",
      wedge:"An active acquisition program plus a fresh raise. Every deal screened needs its own comp set and underwriting model.",
      firms:[
        { n:"The Bascom Group",              loc:"Irvine, CA · value-add multifamily", tag:"already on A-list" },
        { n:"Hamilton Zanze",                loc:"San Francisco, CA · multifamily owner-op" },
        { n:"Tower 16 Capital Partners",     loc:"San Diego, CA · value-add multifamily" },
        { n:"Bell Partners",                 loc:"Greensboro, NC · multifamily" },
        { n:"Fairfield Residential",         loc:"San Diego, CA · multifamily" },
        { n:"Roers Companies",               loc:"Minneapolis, MN · developer" },
        { n:"S2 Capital",                    loc:"Dallas, TX · value-add multifamily" },
        { n:"Pacific Urban Investors",       loc:"Palo Alto, CA · multifamily" },
      ],
    },
    {
      tier:"T4",
      label:"Lenders / Underwriting Teams",
      color:"#FF8559", tint:"#FFEEE5",
      universe:"Hundreds of US CRE lenders + credit funds",
      buyer:"Chief Credit Officer / Head of Underwriting",
      wedge:"Steady deal flow with lean credit teams. Per-deal underwriting compression is pure throughput. Doug's Crexi relationship is a parallel platform vector.",
      firms:[
        { n:"Thorofare Capital",             loc:"Los Angeles, CA · $15-100M debt manager", tag:"already on A-list" },
        { n:"BridgeInvest",                  loc:"Miami, FL · short-term senior-secured" },
        { n:"Lima One Capital",              loc:"Greenville, SC · bridge + multifamily" },
        { n:"Parkview Financial",            loc:"Los Angeles, CA · construction lender" },
        { n:"A10 Capital",                   loc:"Boise, ID · middle-market bridge" },
        { n:"ReadyCap",                      loc:"Summit, NJ · bridge + SBA" },
        { n:"Archway Capital",               loc:"Los Angeles, CA · bridge lender" },
        { n:"3650 REIT",                     loc:"Miami, FL · CRE lender" },
      ],
    },
  ];
  return (
    <section className="section section-soft" id="icp-map">
      <div className="wrap">
        <div className="section-head">
          <span className="eyebrow">06 / ICP launch map · the first 50 desks</span>
          <h2>The right ICP to start the US, named and tiered.</h2>
          <p>A concentrated map for the US launch, built on the same logic as the A-list above: mid-market firms with real deal volume and lean analyst benches, not the giants who build in-house. Four tiers, decision-maker title per tier, the wedge to open with, and the named firms we&rsquo;d work in week one. Live signals refresh the list weekly once we are live; Doug&rsquo;s Crexi relationship is a parallel platform vector queued separately.</p>
        </div>
        <div style={{display:"grid",gridTemplateColumns:"repeat(4,1fr)",gap:14}}>
          {tiers.map((t,i) => (
            <div key={i} className="card" style={{padding:0,overflow:"hidden",display:"flex",flexDirection:"column",borderTop:`4px solid ${t.color}`}}>
              <div style={{padding:"18px 20px 14px 20px",background:t.tint}}>
                <div style={{display:"flex",alignItems:"baseline",gap:10,marginBottom:6}}>
                  <span style={{fontFamily:"'JetBrains Mono',monospace",fontSize:11,fontWeight:800,color:t.color,letterSpacing:"0.06em"}}>{t.tier}</span>
                  <span style={{fontSize:15,fontWeight:600,color:"var(--shark)",letterSpacing:"-0.01em",lineHeight:1.25}}>{t.label}</span>
                </div>
                <div style={{fontSize:11,color:"var(--slate-700)",fontFamily:"'JetBrains Mono',monospace",letterSpacing:"0.02em"}}>{t.universe}</div>
                <div style={{fontSize:11,color:"var(--slate-500)",fontFamily:"'JetBrains Mono',monospace",marginTop:3,letterSpacing:"0.02em"}}><strong style={{color:"var(--slate-700)"}}>BUYER · </strong>{t.buyer}</div>
              </div>
              <div style={{padding:"14px 20px 10px 20px",borderBottom:"1px solid var(--mist)"}}>
                <div style={{fontFamily:"'JetBrains Mono',monospace",fontSize:9,letterSpacing:"0.10em",color:t.color,textTransform:"uppercase",fontWeight:700,marginBottom:5}}>The wedge</div>
                <p style={{fontSize:12,color:"var(--slate-700)",lineHeight:1.55,margin:0}}>{t.wedge}</p>
              </div>
              <div style={{padding:"14px 20px 18px 20px",flex:1}}>
                <div style={{fontFamily:"'JetBrains Mono',monospace",fontSize:9,letterSpacing:"0.10em",color:"var(--slate-500)",textTransform:"uppercase",fontWeight:700,marginBottom:8}}>Named first-touch</div>
                <ul style={{listStyle:"none",padding:0,margin:0,display:"flex",flexDirection:"column",gap:8}}>
                  {t.firms.map((f,j) => (
                    <li key={j} style={{display:"flex",flexDirection:"column",gap:1}}>
                      <div style={{display:"flex",alignItems:"baseline",justifyContent:"space-between",gap:6}}>
                        <span style={{fontSize:12.5,fontWeight:600,color:"var(--shark)",letterSpacing:"-0.005em"}}>{f.n}</span>
                        {f.tag && <span style={{fontSize:8.5,fontWeight:700,color:t.color,fontFamily:"'JetBrains Mono',monospace",letterSpacing:"0.04em",textTransform:"uppercase",whiteSpace:"nowrap"}}>★ A</span>}
                      </div>
                      <span style={{fontSize:10.5,color:"var(--slate-500)",fontFamily:"'JetBrains Mono',monospace",letterSpacing:"0.01em"}}>{f.loc}</span>
                    </li>
                  ))}
                </ul>
              </div>
            </div>
          ))}
        </div>
        <div style={{marginTop:20,padding:"18px 24px",background:"#1C1C24",borderRadius:12,color:"#fff",display:"flex",gap:24,alignItems:"center",flexWrap:"wrap"}}>
          <div style={{flex:1,minWidth:280}}>
            <div style={{fontFamily:"'JetBrains Mono',monospace",fontSize:10,letterSpacing:"0.14em",color:"rgba(255,255,255,0.55)",textTransform:"uppercase",fontWeight:700,marginBottom:6}}>What we&rsquo;d ship in week one</div>
            <div style={{fontSize:13.5,lineHeight:1.55,color:"#fff",fontWeight:500}}>
              Each named firm above gets enriched with role, recent signal, and direct-line contact (principal name, MD name, head-of-underwriting name). Pattern-matched email plus LinkedIn approach paths. Tier&nbsp;1 + Tier&nbsp;2 get the first 60 days of send capacity (~75 inboxes split 60/40), Tier&nbsp;3 + Tier&nbsp;4 come online in week three.
            </div>
          </div>
          <div style={{padding:"12px 18px",background:"#FF8559",borderRadius:10,minWidth:200}}>
            <div style={{fontSize:9.5,fontFamily:"'JetBrains Mono',monospace",letterSpacing:"0.12em",fontWeight:700,color:"rgba(255,255,255,0.85)",marginBottom:4,textTransform:"uppercase"}}>Parallel vector</div>
            <div style={{fontSize:13,fontWeight:600,color:"#fff",lineHeight:1.4}}>Crexi partnership intro: Doug has the founder/exec relationship. Pitches at the platform layer, not seat-by-seat.</div>
          </div>
        </div>
      </div>
    </section>
  );
}

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

  return (
    <Fragment>
      <Nav/>
      <Hero dark={t.darkHero}/>
      <TrustStrip/>
      <MarketThesis/>
      <Orchestration/>
      <SoftwareImpact/>
      <ProspectUniverse/>
      <ATierTargets/>
      <ICPLaunchMap/>
      <SignalToScale/>
      <ClientPortalSection icp={t.icp} setIcp={setIcp}/>
      <CROStack/>
      <CaseStudies/>
      <CostCompare/>
      <NinetyDay/>
      <Matrix/>
      <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:"brokerage_owners",       label:"CRE Brokers"},
            {value:"real_estate_law_firms",  label:"Debt / Mortgage Brokers"},
            {value:"title_notary_closing",   label:"Borrowers / Principals"},
            {value:"developers_operators",   label:"Lenders / Underwriting Teams"},
          ]}
          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/>);