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

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "icp": "sponsors_acq",
  "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">T2 Capital · Deal Flow Engine</span>
          </a>
          <div className="nav-links" style={{display:'flex'}}>
            <a href="#thesis">Why now</a>
            <a href="#system">Orchestration</a>
            <a href="#portal">Pipeline</a>
            <a href="#cases">Proof</a>
            <a href="#economics">Economics</a>
            <a href="#timeline">90 days</a>
          </div>
        </div>
        <div className="nav-cta">
          <a href="#cta" className="btn btn-ghost btn-sm">15-min walkthrough</a>
          <a href="#cta" className="btn btn-primary btn-sm">Walk it live</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 T2 Capital Management · May 22, 2026</span>
        </div>
        <h1 style={{maxWidth:1100, textWrap:"balance"}}>
          T2 already wins the deals it sees. We widen what it sees.<br/>
          Capitalize, Gumption, Johnson Capital, Henry AI.<br/>
          <span style={{color:"#21A8F2"}}>$875B is maturing into a market the banks left. We surface the fitting deals before T2&rsquo;s referral network can.</span>
        </h1>
        <p className="lead" style={{marginTop:24,maxWidth:940}}>
          Your own tearsheet says it plainly. Virtually all of T2&rsquo;s sourcing comes from repeat borrowers, referrals, and a small group of intermediaries. That model built $1.7B in deployments since 2011. It also caps how many event-driven situations the credit team ever sees. AICRO runs the layer that watches for the triggers that fit your box, the maturing loan, the permit filed, the property under contract, the note trading at a discount, and puts a warm, qualified borrower or intermediary in front of T2 before the deal gets shopped.
        </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:940}}>
          {[
            {v:"15+ yrs", l:"CRO operator · PropTech & CRE GTM"},
            {v:"96K+", l:"CRE borrowers contacted · Gumption"},
            {v:"$98.8M", l:"sourced pipeline · Gumption debt marketplace"},
            {v:"$875B", l:"CRE debt maturing in 2026 · MBA"},
          ].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">CRE &amp; capital-markets clients</span>
        <div className="trust-logos">
          <ClientLogos.Capitalize color={color}/>
          <ClientLogos.Gumption color={color}/>
          <ClientLogos.JohnsonCap color={color}/>
          <ClientLogos.WorthClark color={color}/>
          <ClientLogos.Crexi color={color}/>
          <ClientLogos.Pacaso color={color}/>
          <ClientLogos.Hemlane color={color}/>
        </div>
      </div>
    </section>
  );
}

// ─── Section 1: Market Thesis · Why T2 Capital, Why Now ────────────────────────
function MarketThesis() {
  const drivers = [
    {
      tag: "01 · MATURITY WALL",
      stat: "$875B",
      statLbl: "CRE debt maturing in 2026 · MBA",
      title: "Refinancings the banks won't carry.",
      body: "The MBA puts roughly $875B in commercial and multifamily mortgages maturing in 2026, with well over $1.5T cumulative through year-end and S&P projecting the peak at $1.26T in 2027. A large share of these 2010s-era loans cannot refinance in-place at today's rates. Every one that falls out of a bank's box is a senior-secured bridge that fits T2's: $3M to $30M, recap or acquisition, time-sensitive.",
      source: "Source: MBA CREF maturity outlook · S&P Global · 2026",
    },
    {
      tag: "02 · BANK RETREAT",
      stat: "Banks out",
      statLbl: "regional CRE lending tightened",
      title: "T2 is who the borrower calls next.",
      body: "Regional and community banks hold roughly half of CRE debt and have pulled back hard on new originations since 2023. The borrower whose bank says no still has a deal on the clock. That is precisely the balance-sheet bridge T2 underwrites, the loan that doesn't fit a box, decided on the people and the project, not a credit committee's checklist.",
      source: "Source: Fed Senior Loan Officer Survey · MBA · 2026",
    },
    {
      tag: "03 · DISTRESS RISING",
      stat: "2026",
      statLbl: "distress driven by maturing debt",
      title: "Event-driven volume is climbing.",
      body: "Delinquencies and special-situation filings are rising as maturities collide with higher rates. Bankruptcy, foreclosure, receivership, partnership disputes, the situations T2 is built to finance, are increasing in exactly the property types and deal sizes you target. The deals exist. The question is who sees them first.",
      source: "Source: CRE Daily distress tracking · MMG Real Estate · 2026",
    },
    {
      tag: "04 · SOURCING CONCENTRATION",
      stat: "Repeat + referral",
      statLbl: "where T2's deal flow comes from",
      title: "The funnel is the only thing not scaling.",
      body: "Your tearsheet is explicit: virtually all sourcing is repeat borrowers, referrals, and a small set of intermediaries. That discipline protects credit quality. It also means the credit team only sees the deals that happen to reach the network. Sponsors, developers, and capital-markets intermediaries are reachable directly. We surface the fitting events and route them in, without diluting the relationship model.",
      source: "Source: T2 SREI Tearsheet 2026 · AICRO operator pattern",
    },
  ];
  return (
    <section className="section" id="thesis">
      <div className="wrap">
        <div className="section-head">
          <span className="eyebrow"><span className="dot"></span>01 / Why now</span>
          <h2>Four market forces converging on T2&rsquo;s wedge.</h2>
          <p>This is not a generic GTM thesis. It is the four drivers that make the next two quarters the highest-leverage outbound window T2 will see this cycle.</p>
        </div>
        <div style={{display:"grid",gridTemplateColumns:"repeat(2,1fr)",gap:18}}>
          {drivers.map((d,i) => (
            <div key={i} className="card" style={{padding:28,display:"flex",flexDirection:"column",gap:14}}>
              <div style={{fontFamily:"'JetBrains Mono',monospace",fontSize:10,letterSpacing:"0.12em",color:"#21A8F2",textTransform:"uppercase",fontWeight:600}}>{d.tag}</div>
              <div style={{display:"flex",alignItems:"baseline",gap:14,paddingBottom:10,borderBottom:"1px solid var(--mist)"}}>
                <span style={{fontSize:42,fontWeight:600,letterSpacing:"-0.02em",color:"var(--shark)",lineHeight:1}}>{d.stat}</span>
                <span style={{fontSize:11,color:"var(--slate-500)",fontFamily:"'JetBrains Mono',monospace",letterSpacing:"0.06em",textTransform:"uppercase"}}>{d.statLbl}</span>
              </div>
              <h3 style={{fontSize:20,lineHeight:1.3,color:"var(--shark)",margin:0}}>{d.title}</h3>
              <p style={{fontSize:13.5,color:"var(--slate-500)",lineHeight:1.65,margin:0}}>{d.body}</p>
              <div style={{fontSize:11,color:"var(--slate-400)",fontStyle:"italic",fontFamily:"'JetBrains Mono',monospace",marginTop:"auto",paddingTop:8}}>{d.source}</div>
            </div>
          ))}
        </div>
        <div style={{marginTop:32,padding:"24px 28px",background:"var(--shark)",borderRadius:14,color:"#fff"}}>
          <div style={{fontFamily:"'JetBrains Mono',monospace",fontSize:10,letterSpacing:"0.14em",color:"rgba(255,255,255,.5)",textTransform:"uppercase",fontWeight:600,marginBottom:12}}>The takeaway</div>
          <div style={{fontSize:18,lineHeight:1.5,color:"#fff",fontWeight:500,maxWidth:920}}>
            Buyers are looking, budget conversations are open, and the audience is reachable. The constraint is not interest, it is reaching the right person before the renewal cycle closes. That is the problem AICRO solves.
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── Section 2: AICRO Orchestration Layer ────────────────────────
function Orchestration() {
  const layers = [
    {
      tag: "ICP & SIGNAL ARCHITECTURE",
      title: "Four CRE deal-sourcing segments. One operator-built map.",
      body: "Sponsors and acquisitions. Developers and construction. Debt intermediaries. Special situations and notes. Each has its own qualification logic, its own signal pack, its own messaging angle. We don't run one campaign, we run four pools that compound.",
      bullets: [
        "Sponsors & acquisitions, owner-operators with deals under contract or maturing loans",
        "Developers & construction, ground-up and value-add starts needing a bridge",
        "Debt intermediaries, mortgage bankers and brokers who bring repeat flow",
        "Special situations & notes, distress, workouts, and notes trading at a discount",
      ],
    },
    {
      tag: "MULTI-SOURCE SIGNAL DETECTION",
      title: "Six surfaces. Daily refresh. Trigger-based outreach.",
      body: "We don't buy one intent feed and call it signal. We compose six layers, most of them not available in any vendor product, into a daily refresh that fires on real buying intent.",
      bullets: [
        "CRE loan maturity data, CMBS servicer reports + bank call reports",
        "Building permit & entitlement filings, ground-up and value-add starts",
        "Property under contract, deed, listing, and acquisition signals",
        "Distress filings, notice of default, foreclosure, receivership, BK dockets",
        "Intermediary & sponsor movement, debt brokers, new development shops",
        "Conference attendance, MBA CREF, ICSC, IMN special situations",
      ],
    },
    {
      tag: "PERSONALIZATION + SEND",
      title: "Every message grounded in the signal that triggered it.",
      body: "Each contact gets a hook from the actual signal, a maturing loan, a permit filing, a notice of default. The CRO bench approves messaging weekly. Email runs on 75 warmed inboxes. LinkedIn runs across 6-8 SDR profiles. Every touch is human-quality, signal-grounded, and tracked.",
      bullets: [
        "75+ warm email domains · 98.4% deliverability",
        "Multi-seat LinkedIn orchestration with SDR profiles + credit-team consent",
        "Per-contact relevance hook from the trigger signal",
        "CRO-approved templates · weekly refinement",
      ],
    },
    {
      tag: "REPLY TRIAGE + SALES ACTION",
      title: "Slack-native triage. Mid-funnel rescue. Operator in the room.",
      body: "The Reply Agent classifies every reply within minutes, drafts a response, and routes it to the right originator. AICRO Rounds runs every weekday against your HubSpot, surfacing deals that need a follow-up, intro calls that didn't convert, and borrowers who went silent. Doug walks the room weekly.",
      bullets: [
        "Reply Agent, positive / neutral / not-interested classification + draft",
        "AICRO Rounds, daily mid-funnel grading against your CRM",
        "Slack-first surfacing of every action, no dashboard hunting",
        "Weekly operator review with Doug, deal-flow math, comp, partner prep",
      ],
    },
  ];
  return (
    <section className="section section-soft" id="orchestration">
      <div className="wrap">
        <div className="section-head">
          <span className="eyebrow">02 / The AICRO orchestration layer</span>
          <h2>One system. Four layers. Built for CRE debt.</h2>
          <p>This is not a tool, an SDR, or a list. It is the orchestration layer that turns the market thesis above into qualified deal flow and funded loans, operated by people who have run this exact CRE motion before.</p>
        </div>
        <div style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:18}}>
          {layers.map((l,i) => (
            <div key={i} className="card" style={{padding:26,display:"flex",flexDirection:"column",gap:14,position:"relative"}}>
              <div style={{position:"absolute",top:-10,left:24,padding:"4px 10px",background:"#21A8F2",color:"#fff",borderRadius:99,fontSize:9.5,fontWeight:700,fontFamily:"'JetBrains Mono',monospace",letterSpacing:"0.10em"}}>LAYER {String(i+1).padStart(2,"0")}</div>
              <div style={{fontFamily:"'JetBrains Mono',monospace",fontSize:10,letterSpacing:"0.10em",color:"var(--slate-500)",textTransform:"uppercase",fontWeight:600,marginTop:8}}>{l.tag}</div>
              <h3 style={{fontSize:19,lineHeight:1.3,color:"var(--shark)",margin:0}}>{l.title}</h3>
              <p style={{fontSize:13.5,color:"var(--slate-500)",lineHeight:1.65,margin:0}}>{l.body}</p>
              <ul style={{listStyle:"none",padding:0,margin:0,display:"flex",flexDirection:"column",gap:8}}>
                {l.bullets.map((b,j) => (
                  <li key={j} style={{fontSize:12.5,color:"var(--slate-700)",lineHeight:1.55,paddingLeft:18,position:"relative"}}>
                    <span style={{position:"absolute",left:0,top:7,width:6,height:6,borderRadius:"50%",background:"#21A8F2"}}></span>
                    {b}
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── Matrix ─────────────────────────────────────
function Matrix() {
  const cols = ["Generic agency", "In-house build", "DIY tool stack", "AICRO"];
  const rows = [
    { row: "Time to first deal intro", 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: "PropTech operator in the room", vals: [1, 2, 1, 4], aicro: "Doug, weekly" },
    { row: "Reply triage in Slack", vals: [1, 1, 2, 4], aicro: "Reply Agent live" },
    { row: "Mid-funnel sales action", vals: [1, 1, 1, 4], aicro: "AICRO Rounds · daily" },
    { row: "Cost predictability", vals: [3, 1, 2, 4], aicro: "$10K/mo · POC" },
    { row: "CRE debt sourcing fluency", vals: [1, 2, 1, 4], aicro: "6 active CRE clients" },
  ];
  return (
    <section className="section">
      <div className="wrap">
        <div className="section-head">
          <span className="eyebrow">05 / 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 HubSpot, paid as one monthly retainer.</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:"LOAN MATURING · 2026",        co:"Halsted Property Group · $14M multifamily" },
    { x:"22%", y:"36%", cls:"hot",   tag:"PERMIT FILED · GROUND-UP",     co:"Northpoint Builders · Nashville" },
    { x:"78%", y:"36%", cls:"warm",  tag:"PROPERTY UNDER CONTRACT",      co:"Cardinal Multifamily · acquisition" },
    { x:"22%", y:"66%", cls:"warm",  tag:"BRIDGE PLACEMENT · BROKER",    co:"Gateway Debt Advisors · repeat flow" },
    { x:"78%", y:"66%", cls:"match", tag:"NOTICE OF DEFAULT FILED",      co:"Sterling Restructuring · workout" },
    { x:"50%", y:"86%", cls:"hot",   tag:"NOTE FOR SALE · DISCOUNT",     co:"Anchor Note Capital · special situation" },
  ];
  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-fit 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:"CRE loan maturity data",          val:"CMBS servicer reports + bank call reports" },
    { lbl:"Building permit & entitlement filings", val:"Ground-up and value-add starts" },
    { lbl:"Property under contract · deed & listing", val:"Acquisitions needing a fast bridge" },
    { lbl:"Distress filings · NOD / foreclosure / BK", val:"Receivership and workout dockets" },
    { lbl:"Intermediary & sponsor movement",  val:"Debt brokers, new development shops" },
    { lbl:"Conference attendance",            val:"MBA CREF, ICSC, IMN special situations" },
  ];
  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 CRE-debt inbox patterns. Mid-day open windows match east-coast trading desks. CRE vocabulary in every line.",
      feats:["75+ warm domains", "Auto-failover routing", "98.4% deliverability"],
      stats:[ {v:"3,302", l:"sent / day"}, {v:"+72%", l:"reply rate"} ],
    },
    {
      mark:"connect",
      name:"AICRO Connect",
      tag:"LINKEDIN AUTOMATION",
      desc:"Multi-seat orchestration across 6 to 8 SDR profiles. Title-tier-aware: principals, Heads of Acquisitions, and placement MDs get the A track; analysts get the C track.",
      feats:["Multi-seat orchestration", "Title-tier sequencing", "CRE debt vocabulary"],
      stats:[ {v:"47%", l:"accept rate"}, {v:"54%", l:"positive rate"} ],
    },
    {
      mark:"agent",
      name:"AICRO Outreach Agent",
      tag:"HYPER-PERSONALIZATION LAYER",
      desc:"Reads each contact's role, recent firm activity, and the deal-precursor signal that triggered the touch. Writes the relevance line. CRO-approved before send.",
      feats:["Signal-grounded copy", "Per-deal signal hook", "Human-in-the-loop QA"],
      stats:[ {v:"+37%", l:"acceptance"}, {v:"Live", l:"hot-deal triage"} ],
    },
  ];
  const markIcon = {
    send: (
      <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
        <rect x="3" y="5" width="18" height="14" rx="2"/>
        <path d="M3 7l9 6 9-6"/>
      </svg>
    ),
    connect: (
      <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
        <rect x="3" y="3" width="18" height="18" rx="2"/>
        <line x1="8" y1="11" x2="8" y2="17"/>
        <circle cx="8" cy="7.5" r="1.2" fill="#fff" stroke="none"/>
        <path d="M12 17v-4a3 3 0 0 1 6 0v4"/>
      </svg>
    ),
    agent: (
      <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
        <path d="M12 3v3M12 18v3M3 12h3M18 12h3M5.6 5.6l2.1 2.1M16.3 16.3l2.1 2.1M5.6 18.4l2.1-2.1M16.3 7.7l2.1-2.1"/>
        <circle cx="12" cy="12" r="3.2" fill="#fff" stroke="none"/>
      </svg>
    ),
  };
  return (
    <div className="outreach-stack">
      {products.map((p,i) => (
        <div key={i} className="outreach-card">
          <div className="ohead">
            <div className="ologo">
              <div className={"omark " + p.mark}>
                {markIcon[p.mark]}
              </div>
              <div>
                <div className="oname">{p.name}</div>
                <div className="otag">{p.tag}</div>
              </div>
            </div>
          </div>
          <div className="odesc">{p.desc}</div>
          <div className="ofeats">
            {p.feats.map((f,j) => <div key={j} className="ofeat">{f}</div>)}
          </div>
          <div className="ostats">
            {p.stats.map((s,j) => (
              <div key={j} className="ostat">
                <span className="v">{s.v}</span>
                <span className="l">{s.l}</span>
              </div>
            ))}
          </div>
        </div>
      ))}
    </div>
  );
}

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

function ReplyAgentCard() {
  return (
    <SlackCard time="1:15 PM" subtitle="POSITIVE (Interested)" subtitleDot="#3DDC97" showApprove>
      <div className="slack-status-bar">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><path d="M5 13l4 4L19 7"/></svg>
        Approved successful
      </div>
      <div className="slack-source-line"><strong>Source:</strong> 🔗 LinkedIn  |  <strong>Sent to:</strong> T2 credit team</div>
      <div className="slack-row-a">
        <div className="slack-field">
          <span className="k">Name:</span>
          <span className="v">Daniel Hoffman</span>
          <span className="k" style={{marginTop:6}}>Job Title:</span>
          <span className="v">Principal</span>
          <span className="k" style={{marginTop:6}}>Company:</span>
          <span className="v">Halsted Property Group · multifamily sponsor</span>
        </div>
        <div className="slack-field">
          <span className="k">Email:</span>
          <span className="v link">dhoffman@halstedpg.com</span>
          <span className="k" style={{marginTop:6}}>Campaign:</span>
          <span className="v">EM | Maturing acquisition loans | Multifamily sponsors</span>
        </div>
      </div>
      <div className="slack-pill"><span className="pdot"></span>Acquisition loan maturing Aug 2026 · $14M multifamily, Ohio</div>
      <div className="slack-block">
        <span className="lbl">Last Reply:</span>
        <span className="val">Our bank won&rsquo;t extend and the agency quote came back too low on proceeds. We&rsquo;ve got a 96-unit deal that needs to close in 60 days. Are you doing bridge in this range right now?</span>
      </div>
      <div className="slack-block">
        <span className="lbl">Generated Response:</span>
        <span className="val">Daniel, that&rsquo;s squarely T2&rsquo;s box: senior bridge, $3-30M, recourse, decided on the project not a credit committee. We can move fast on a 60-day close. Want 15 minutes with the credit team tomorrow to walk the 96-unit deal and talk structure?</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>Cardinal Multifamily | Sarah Klein</strong> · <span style={{color:"#A8AFC0"}}>$14M bridge · Stage: Intro Call Held</span>
      </div>
      <div style={{fontSize:12,color:"#A8AFC0",marginBottom:10}}>Recommended for: T2 originator</div>
      <div className="slack-source-line">
        <strong>Source:</strong> HubSpot · <strong>Run:</strong> AICRO Rounds · Sat April 25 · <strong>Target close:</strong> 2026-06-30
      </div>
      <div className="slack-row-a">
        <div className="slack-field">
          <span className="k">Contact:</span>
          <span className="v">Sarah Klein</span>
          <span className="k" style={{marginTop:6}}>Title:</span>
          <span className="v">Head of Acquisitions</span>
        </div>
        <div className="slack-field">
          <span className="k">Email:</span>
          <span className="v link">sklein@cardinalmf.com</span>
          <span className="k" style={{marginTop:6}}>Company:</span>
          <span className="v">Cardinal Multifamily · value-add sponsor</span>
        </div>
      </div>
      <div className="slack-engagement">
        <div className="slack-engagement-head">📊 Engagement</div>
        <div className="slack-engagement-line">• Last meaningful activity: <strong>22d ago</strong></div>
        <div className="slack-engagement-line">• Pattern: <em>intro call held, no term sheet requested yet</em></div>
      </div>
      <div className="slack-block" style={{marginTop:10}}>
        <span style={{fontSize:12.5,color:"#fff",fontWeight:600}}>📞 TODAY · PHONE → Sarah Klein (+1 ###-###-####)</span>
      </div>
      <div className="slack-quote">
        Sarah, AICRO Rounds flagged your file. We held the intro call on the 116-unit acquisition April 7 and haven&rsquo;t circled back on structure. Your bank financing contingency is tight, I want 15 minutes this week to size a senior bridge against the deal and the timeline. Tuesday or Wednesday?
      </div>
      <div className="slack-callout">📞 If voicemail: Sarah, following up on the April 7 call on the 116-unit deal. Texting you indicative bridge terms so you have them before your contingency date.</div>
      <div className="slack-callout" style={{color:"#A8AFC0",marginTop:8}}>
        <strong style={{color:"#fff"}}>Why now:</strong> Intro call 22 days ago; no term sheet requested, no follow-up logged. Cardinal is a Grade A sponsor with a live $14M acquisition and a closing clock.
      </div>
      <div className="slack-signals">
        <span className="sl">Signals observed:</span>
        <ul>
          <li>Intro call April 7, 2026, 22 days ago, no term sheet requested in HubSpot</li>
          <li>Cardinal is a value-add multifamily sponsor with a property under contract, squarely T2's $3-30M box</li>
          <li>Acquisition loan from incumbent bank flagged at-risk; financing contingency date approaching</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:"Cost per sourced deal", v:"−54%", d:"vs in-house originator + analyst" },
    { l:"Intro call → term sheet", v:"+118%", d:"AICRO Rounds + Reply Agent" },
    { l:"Event-driven deals surfaced", 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 the credit team.<br/>Friday: deal-flow MBR.<br/>Quarterly: sourcing math the partners can defend.</h3>
          <p style={{fontSize:13,color:"var(--slate-500)"}}>Doug walks the room weekly. Every reply, every intro call, every funded deal 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}}>Comp loop</div>
          <h3 style={{marginBottom:8,fontSize:18}}>Each funded deal teaches the model<br/>what T2's box really looks like.</h3>
          <p style={{fontSize:13,color:"var(--slate-500)"}}>Funded-deal patterns feed back into the seed list. Quarterly refresh tunes the signal pack against the borrowers and intermediaries who actually closed.</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:"Loan maturities, permit filings, properties under contract, distress filings, intermediary movement, and conference attendance. The signal map is built for T2's actual deal-trigger thesis: event-driven situations that fit a $3-30M senior bridge before they reach the broader market.",
      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 deal-precursor signal that triggered it.",
      color:"#9D4EDD", colorTint:"#F4ECFE",
      icon: (
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
          <path d="M22 2L11 13"/><path d="M22 2l-7 20-4-9-9-4 20-7z"/>
        </svg>
      ),
      Render: PhaseOutreach,
    },
    {
      num:"PHASE 03", title:"Convert", head:"Accelerate conversion.",
      body:"The Reply Agent triages and drafts within minutes. The Inbound Sales Agent grades deals against your live HubSpot, recommends the next action, and routes it to the right originator, in Slack, in HubSpot. Intro-call-held-no-term-sheet is a daily Rounds query.",
      color:"#0E9F66", colorTint:"#E5F9F0",
      icon: (
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
          <path d="M5 13l4 4L19 7"/>
        </svg>
      ),
      Render: PhaseConvert,
    },
    {
      num:"PHASE 04", title:"Compound", head:"Compound performance.",
      body:"Every funded deal sharpens the seed list. Every closed borrower and intermediary makes the deal-fit signal more accurate. Monday's signal review turns into the quarterly sourcing review the partners see.",
      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">06 / 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 PORTAL = {
  label: "T2 deal sourcing",
  summary: "Sponsors, developers, intermediaries, and special situations, sourced as one book.",
  summaryBody: "The whole T2 deal-sourcing engine in one view. Across all four target pools this month, 150 qualified borrower and intermediary conversations, 40 deal intro calls, and roughly $830M in fitting deals identified, every one inside T2's $3-30M senior-bridge box. The maturing-acquisition-loan and bank-declined-refi angles convert hardest. Pipeline is compounding week over week.",
  kpis: { sent:"33,200", positives:"150", meetings:"40", pipeline:"$830M fitting-deal volume", revenue:"7 in diligence" },
  deltas: { sent:"+21% last 30d", positives:"+54% last 30d", meetings:"+58% last 30d", pipeline:"+128% last 30d", revenue:"+5 last 30d" },
  ratio: "221:1",
  campaigns: [
    { type:"li", name:"LI | Heads of Acquisitions | Value-add sponsors", sent:"318", contacted:"268", connReq:"268", connAcc:"124", positives:"22", posRate:"60.5%", accept:"46.3%", active:true },
    { type:"em", name:"EM | Maturing acquisition loans | Multifamily sponsors", sent:"4,820", contacted:"3,140", connReq:"-", connAcc:"-", positives:"24", posRate:"28.1%", accept:"-" },
    { type:"li", name:"LI | Managing Directors | Debt placement", sent:"216", contacted:"184", connReq:"184", connAcc:"86", positives:"14", posRate:"56.4%", accept:"46.7%" },
    { type:"em", name:"EM | Bridge placements | Capital markets brokers", sent:"3,140", contacted:"2,018", connReq:"-", connAcc:"-", positives:"22", posRate:"26.4%", accept:"-" },
    { type:"li", name:"LI | Workout & Restructuring | National", sent:"152", contacted:"124", connReq:"124", connAcc:"56", positives:"8", posRate:"58.3%", accept:"45.2%" },
    { type:"em", name:"EM | Permit filed | Ground-up developers", sent:"2,140", contacted:"1,388", connReq:"-", connAcc:"-", positives:"13", posRate:"24.0%", accept:"-" },
  ],
  drawer: {
    name: "LI | Heads of Acquisitions | Value-add sponsors",
    replies: 38, posPct: 60.5, neuPct: 39.5,
    funnel: [
      { stage:"Connection Requests", val:318, w:100, color:"linear-gradient(90deg,#21A8F2,#5AC0FF)" },
      { stage:"Contacted", val:268, w:84, color:"linear-gradient(90deg,#5A8BEE,#7E73E8)", pct:"84.3%" },
      { stage:"Accepted", val:124, w:39, color:"linear-gradient(90deg,#7E73E8,#9D4EDD)", pct:"46.3%" },
      { stage:"Replied", val:38, w:14, color:"linear-gradient(90deg,#9D4EDD,#C04AC9)", pct:"30.6%" },
      { stage:"Positive", val:23, w:9, color:"linear-gradient(90deg,#C04AC9,#D946B0)", pct:"60.5%" },
      { stage:"Deal Intro Calls", val:11, w:5, color:"#0E9F66", pct:"47.8%" },
      { stage:"In Diligence", val:3, w:3, color:"#0E9F66", pct:"3 active" },
      { stage:"Funded", val:1, w:2, color:"#0E9F66", pct:"1 closed" },
    ],
    recent: [
      { name:"Daniel Hoffman · Riverline Residential", date:"Apr 28", tag:"Term Sheet Out", booked:true },
      { name:"Marcus Webb · Halsted Property Group", date:"Apr 27", tag:"Deal Intro Booked", booked:true },
      { name:"Sara Klein · Gateway Debt Advisors", date:"Apr 26", tag:"Deal Intro Booked", booked:true },
      { name:"Priya Nair · Cardinal Multifamily", date:"Apr 25", tag:"Reviewing" },
      { name:"Greg Salah · Northpoint Builders", date:"Apr 24", tag:"Deal Intro Booked", booked:true },
      { name:"Eric Torres · Sterling Restructuring", date:"Apr 23", tag:"Reviewing" },
      { name:"Tom Becker · Lakeshore Development", date:"Apr 22", tag:"Reviewing" },
    ],
  },
};

// ─── 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() {
  const data = PORTAL;
  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 / t2-capital / 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">Deal intro calls</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">In diligence / Funded</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>
  );
}

function ClientPortalScreenshots() {
  const shots = [
    {
      src: "uploads/pasted-1777222339189-0.png",
      label: "Executive Summary",
      caption: "Last 30 days. Email plus LinkedIn side by side, weekly positive replies, every campaign with full funnel. The view your credit team opens every Monday.",
    },
    {
      src: "uploads/pasted-1777222392601-0.png",
      label: "Campaign Drawer",
      caption: "Click any active campaign to drill in. Full funnel: connection requests, accepted, replied, positive, deal intro call, in diligence. Real AICRO client data, anonymized.",
    },
    {
      src: "uploads/pasted-1777222050657-0.png",
      label: "Reply Agent · live in Slack",
      caption: "Inbound reply hits Slack immediately, classified positive, generated response drafted. T2's credit team approves before send.",
    },
    {
      src: "uploads/pasted-1777222220819-0.png",
      label: "Sales Action · AICRO Rounds",
      caption: "A $14M bridge lead, 22 days since last touch, no diligence call booked. AICRO Rounds grades it Grade A, routes it to the right originator, and writes the script.",
    },
  ];
  return (
    <section className="section section-soft" id="portal-screenshots">
      <div className="wrap">
        <div className="section-head">
          <span className="eyebrow">08 / The operating surface</span>
          <h2>The surface you operate from, and it keeps growing.</h2>
          <p>Monday summary, campaign drill-in, Slack reply agent, sales-action card, plus the live reply inbox and playbook views, with more shipping every month. A few of them here, real data anonymized.</p>
        </div>
        <div style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:24,marginTop:32}}>
          {shots.map((s,i) => (
            <div key={i} style={{
              background:"var(--white,#fff)",
              border:"1px solid var(--mist,#E2E8F0)",
              borderRadius:14,
              overflow:"hidden",
              boxShadow:"0 1px 2px rgba(15,23,42,0.04), 0 8px 24px rgba(15,23,42,0.06)",
            }}>
              <div style={{
                padding:"10px 16px",
                background:"var(--cloud,#F1F5F9)",
                borderBottom:"1px solid var(--mist,#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:"var(--slate-700,#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:"var(--slate-500,#64748B)",lineHeight:1.55}}>
                {s.caption}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function ClientPortalSection() {
  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)"}}>07 / Flagship</span>
          <h2>The Client Portal you operate from.</h2>
          <p style={{color:"rgba(255,255,255,.6)"}}>
            One pane of glass, every Monday. Every campaign, every reply, every sourced deal across the whole T2 book, in one view.
          </p>
        </div>
        <ClientPortalV2/>
      </div>
    </section>
  );
}

// ─── CRO Stack ─────────────────
function CROStack() {
  const modules = [
    { l:"Strategy", t:"ICP & Signal Map", d:"4-segment sourcing map. 6 deal-fit signal layers. Quarterly refresh tuned against funded-deal patterns.", delivs:["4-segment ICP card","6-source signal architecture","Sourcing-concentration scorecard","Quarterly recalibration"] },
    { l:"Playbooks", t:"Productized SOPs", d:"Discovery scripts for sponsors and intermediaries. Bank-pullback and certainty-of-execution battlecards. T2 box and structure framing.", delivs:["Discovery script · sponsors & brokers","Intro-call flow + structure walkthrough","Bank-pullback battlecards","Onboarding checklist"] },
    { l:"Comp", t:"Origination Incentives", d:"Sourcing incentives tuned to T2's $3-30M bridge economics. Intro-call → term-sheet conversion SPIFF. Intermediary referral protection built in. Override design for the origination lead.", delivs:["Ramp plan · 90/180/365","Term-sheet conversion SPIFF","Intermediary referral protection","Partner-defendable model"] },
    { l:"Onboarding", t:"Operator Cadence", d:"Monday signal review with you. Wednesday reply triage. Friday MBR. Quarterly board math run in your Slack.", delivs:["Monday signal review","Wednesday reply triage","Friday MBR","QBR + board pack"] },
  ];
  return (
    <section className="section">
      <div className="wrap">
        <div className="section-head">
          <span className="eyebrow">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 lending platform. What you need next is a proven motion to widen sourcing beyond the referral network. 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 · PropTech operator · CREXi, Pacaso, Hemlane lineage</span>
            </div>
            <div className="cro-children">
              <div className="cro-node">
                <span className="role">Revenue Strategist</span>
                <span className="name">Pipeline math, comp, board prep</span>
              </div>
              <div className="cro-node">
                <span className="role">Signal Architect</span>
                <span className="name">ICP, 6-source signal map, intent</span>
              </div>
              <div className="cro-node">
                <span className="role">Outbound Operator</span>
                <span className="name">Daily campaign management</span>
              </div>
              <div className="cro-node">
                <span className="role">RevOps Engineer</span>
                <span className="name">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">10 / Economics</span>
          <h2>$10,000 / month. Three months. First deal intros in 30 to 45 days.</h2>
          <p>One number. One commitment window. Same outcome target as the in-house build, at a fraction of the time and cost.</p>
        </div>
        <div className="cost-grid">
          <div className="cost-card">
            <div className="cost-eyebrow">Build it yourself</div>
            <h3>2 originators + 1 analyst + manager.</h3>
            <p style={{color:"var(--slate-500)",fontSize:14,marginTop:6}}>9 to 12 months to first qualified pipeline.</p>
            <div className="cost-list">
              <div className="cost-list-row"><span className="label">2 originators + 1 analyst (loaded)</span><span className="val">$310 to $390K</span></div>
              <div className="cost-list-row"><span className="label">Origination lead oversight</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 qualified deal flow</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">$460 to $560K</span></div>
            </div>
            <div className="cost-meta">9 to 12 months of stalled growth 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 deal intro calls</span><span className="val">Day 30 to 45</span></div>
              <div className="cost-list-row"><span className="label">First deals in diligence</span><span className="val">Day 60 to 75</span></div>
              <div className="cost-list-row total"><span className="label">Cost vs. in-house Year 1</span><span className="val">~6% of build cost</span></div>
            </div>
            <div className="cost-meta">Time to value is the unit economic that matters here. The 3-month POC delivers a graded sourcing universe, a live signal layer, booked deal intros, and a fully-instrumented funnel. The in-house build delivers a hire who is still ramping.</div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── Case studies — 5 ─────────────────
function CaseStudies() {
  const cases = [
    {
      co: "Capitalize",
      stage: "Seed → Series B",
      sector: "CRE Data & AI",
      quote: "We went through three or four iterations before AICRO. The team engineered a complete GTM system that was instrumental in securing our Series B.",
      attr: "Luke Morris · Co-founder",
      systems: ["Signal-First Outbound", "End-to-End Revenue Engineering", "HubSpot GTM build", "CRO-led enablement"],
      metrics: [
        { v: "+187%", l: "Pipeline lift / 90d" },
        { v: "+25%", l: "Conversion" },
        { v: "60%", l: "MoM growth", live: true },
        { v: "Series B", l: "Secured" },
      ],
    },
    {
      co: "Gumption",
      stage: "Growth",
      sector: "CRE Debt Marketplace",
      quote: "Before AICRO we were scaling linearly. Now we scale exponentially.",
      attr: "John Dickerson · Co-founder",
      systems: ["Signal-Based Deal Flow Engine", "AI Multi-Channel Outbound", "Predictive Lead Scoring", "CRO-Built Playbooks"],
      metrics: [
        { v: "$75M+", l: "Qualified pipeline", live: true },
        { v: "2×", l: "Conversion" },
        { v: "3.5×", l: "Deal velocity" },
        { v: "90d", l: "Replaced 12mo build" },
      ],
    },
    {
      co: "Johnson Capital",
      stage: "Active engagement",
      sector: "CRE Capital Advisory",
      quote: "Email PRR rebounded to 21.88% L7D, the Founder/Legacy track is finding the right people, and meetings are landing in our broker calendar weekly.",
      attr: "Johnson Capital · April 2026 standup",
      systems: ["Signal-First Outbound", "Multi-Channel Sequencing", "Founder/Legacy Track", "CRO-led Pipeline Math"],
      metrics: [
        { v: "19,691", l: "Leads contacted" },
        { v: "21.88%", l: "Email PRR (L7D)", live: true },
        { v: "+90.9%", l: "PRR uptick L7D vs L30D", live: true },
        { v: "Weekly", l: "Demo cadence" },
      ],
    },
    {
      co: "Worth Clark",
      stage: "Active engagement",
      sector: "Real Estate Brokerage",
      quote: "27,850 leads contacted. ~50% of positive responders schedule calls immediately. The volume + close rate combination is why this scales.",
      attr: "Worth Clark · February 2026 standup",
      systems: ["High-Volume Multi-Channel", "Agent Recruiting Funnel", "Reply Triage", "CRO-led Cadence"],
      metrics: [
        { v: "27,850", l: "Leads contacted" },
        { v: "107", l: "Positive replies / month", live: true },
        { v: "~50%", l: "of positives → meeting" },
        { v: "$10K LTV", l: "per agent recruited" },
      ],
    },
    {
      co: "Henry AI",
      stage: "Active engagement",
      sector: "CRE Capital Markets · Deal Tooling",
      quote: "Six weeks in: 43 warm CRE leads classified, 14 meetings booked or proposed, and a Marcus & Millichap enterprise opening from 17 forwarded broker replies. Lookalike outbound off Henry's closed-won book, the most T2-adjacent motion we run.",
      attr: "Henry AI · 6-week launch review · May 2026",
      systems: ["Closed-Won Lookalike Sourcing", "Conference-Led Targeting · ICSC", "Multi-Channel Outbound", "Warm-Reply Classification"],
      metrics: [
        { v: "43", l: "Warm CRE leads / 6 wks", live: true },
        { v: "14", l: "Meetings booked or proposed", live: true },
        { v: "24%", l: "Email PRR (L7D)" },
        { v: "63%+", l: "LinkedIn PRR" },
      ],
    },
    {
      co: "CREXi",
      stage: "Operator lineage",
      sector: "CRE Marketplace",
      quote: "Doug joined CREXi pre-monetization, closed the company's first $1M in revenue, then scaled it to $70M. The broker-side GTM playbook he built there is the one now applied to T2.",
      attr: "Operator lineage · pre-AICRO",
      systems: ["Pre-Monetization GTM Build", "Broker-Account Playbook", "Sales Comp Architecture", "$1M to $70M Scale"],
      metrics: [
        { v: "$0 to $1M", l: "First revenue closed" },
        { v: "$70M", l: "Scaled to" },
        { v: "Brokers", l: "Primary buyer" },
        { v: "Direct", l: "Applicability to T2" },
      ],
    },
  ];
  return (
    <section className="section" id="cases">
      <div className="wrap">
        <div className="section-head">
          <span className="eyebrow">11 / Proof</span>
          <h2>Five CRE-adjacent engagements.</h2>
          <p>Capitalize, Gumption, Johnson Capital, Worth Clark, and Henry AI are in the AICRO book. CREXi is the operator lineage behind the playbook: Doug joined pre-monetization, closed the first $1M, and scaled it to $70M.</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 · CRE-debt 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 + T2 credit-team profiles (with consent)",
      bars: [
        { left: 0, width: 8, label: "PROFILE SETUP", cls: "amber" },
        { left: 8, width: 92, label: "MULTI-SEAT CONNECT + INMAIL CAMPAIGNS", cls: "sky" },
      ],
      delivs: [
        { left: 6, label: "Day 7 · connected" },
        { left: 22, label: "Day 21 · campaign" },
        { left: 50, label: "Day 60 · 45%+" },
      ],
    },
    {
      name: "CRO + Reply Triage",
      desc: "Operator in the room weekly · Reply Agent triages every reply",
      bars: [
        { left: 0, width: 100, label: "OPERATOR IN THE ROOM · WEEKLY", cls: "shark" },
      ],
      delivs: [
        { left: 12, label: "Day 12 · pipeline" },
        { left: 50, label: "Day 50 · comp" },
        { left: 88, label: "Day 88 · QBR" },
      ],
    },
  ];
  return (
    <section className="section section-soft" id="timeline">
      <div className="wrap">
        <div className="section-head">
          <span className="eyebrow">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 deal intros</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)"}}>13 / Custom demo + Q&amp;A</span>
            <h2 style={{marginTop:18,textWrap:"balance"}}>T2, the custom build is ready. Let&rsquo;s walk it together.</h2>
            <p>We&rsquo;ve already built the T2 Capital instance. The orchestration layer is live, segments graded, signals firing, sample 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 segments. You see what we&rsquo;d send to a maturing-loan sponsor, a permitted developer, and a debt intermediary 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">T2 CAPITAL · PROPOSAL · 2026-05-22</span>
      </div>
      <div>doug@aicro.co</div>
      <div className="footer-meta">© 2026 AICRO · Doug Shankman & Josh Kulchin, Co-Founders</div>
    </footer>
  );
}

// ─── Section 03: Prospect / deal-source universe ──────────────────────────
function ProspectUniverse() {
  const verticals = [
    { v:"Maturity-Wall Owners", stat:"$875B", statLbl:"CRE debt maturing in 2026", frag:"17% of all CRE mortgage balances. Mostly private owners who took 3-year bridges in 2022-2023 with no clean refi today. Every maturity is a dated, deadline-bound trigger.", buyer:"Private owner-operator · 1-5 assets", src:"MBA, Feb 2026" },
    { v:"Value-Add Multifamily Sponsors", stat:"$162B", statLbl:"multifamily maturing 2026 · +56% YoY", frag:"Hundreds of regional value-add operators across OH, IL, MI, TN, GA running sequential bridge programs. The sub-$30M tier is exactly where banks pull back and balance-sheet lenders step in.", buyer:"Repeat sponsor · 50-300 units", src:"MSCI / Multi-Housing News" },
    { v:"Ground-Up & Construction Developers", stat:"+51%", statLbl:"bridge origination volume · YoY", frag:"Private funds now place 60%+ of middle-market bridge. Beneath the $100M institutional deals sits a long tail of $10-30M ground-up and value-add starts banks have stopped touching.", buyer:"Private developer · $8-30M project", src:"CBRE / industry data" },
    { v:"Debt Intermediaries", stat:"140+", statLbl:"MBA-ranked firms (just the tip)", frag:"Below the ranked platforms sit 400-800 boutique mortgage bankers placing sub-$30M bridge, each carrying a short list of 3-6 lenders. T2 is not on most of them yet. One relationship returns 4-10 deals a year.", buyer:"Independent mortgage banker · 1-5 person shop", src:"MBA 2025 Originations" },
    { v:"Distressed & Special Situations", stat:"11%", statLbl:"CMBS special-servicing rate · 12-yr high", frag:"$2.9B transferred to special servicing in a single month; CRE foreclosures up 117% since 2024. Note buyers and distressed acquirers need capital that closes in 30-45 days and tolerates in-place distress.", buyer:"Distressed acquirer / note buyer", src:"Trepp / CRE Daily, 2026" },
  ];
  return (
    <section className="section" id="universe">
      <div className="wrap">
        <div className="section-head">
          <span className="eyebrow"><span className="dot"></span>03 / Your deal-source universe</span>
          <h2>We mapped the deals T2 should already be seeing.</h2>
          <p>Before a single email goes out, here is the deal-source universe AICRO works for T2: owners hitting the maturity wall, value-add sponsors, ground-up developers, the intermediaries who place their debt, and the distress pipeline. Large and 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,display:"flex",justifyContent:"space-between",alignItems:"center",fontSize:11,color:"var(--slate-700)",fontFamily:"'JetBrains Mono',monospace",letterSpacing:"0.04em"}}>
                <span><span style={{color:"var(--slate-400)"}}>BUYER · </span>{d.buyer}</span>
                <span style={{color:"var(--slate-400)",fontSize:9.5}}>{d.src}</span>
              </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}}>
              Thousands of mid-market sponsors, developers, and intermediaries, $3-30M deals, relationship-bound on the debt side. They will not all find T2 on their own. That gap, sorted by a dated maturity-and-permit signal calendar, is the list we build, prioritize, and work every week.
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── Section 04: A-tier targets · why now ─────────────────────────────────
function ATierTargets() {
  const targets = [
    { co:"Eastham Capital + Bender", vert:"Value-Add Multifamily", size:"Chicago suburbs · Fund VII", why:"Bought Park Towers, 270 units in Richton Park IL, for $30.4M (Apr 2026), their third Fund VII acquisition. Fund is early in deployment.", angle:"Repeat suburban-Chicago value-add buyer recycling capital. T2's $15M Chicago recap proves the market. Be the bridge on the next deal before it is shopped." },
    { co:"Vesper Holdings", vert:"Student Housing", size:"Michigan markets · national", why:"Acquired Gateway Lofts at Michigan State, Lansing (Aug 2025). 20+ deals, $1B+ in 15 months, stated 'extremely active' ahead.", angle:"Acquisition-at-pace needs a bridge per deal. T2's Ann Arbor student-housing loan is direct proof of appetite in Vesper's core Michigan market." },
    { co:"CRG + Shapack", vert:"Student Housing · Ground-Up", size:"Ann Arbor · U-Michigan", why:"Closed the site for Chapter Ann Arbor, a 625-bed tower one block from campus (Jul 2025). Construction underway, repeat pipeline.", angle:"Pipeline developer in T2's exact proven metro. Land carry, entitlement, and early-construction gaps are $10-25M bridge candidates on the next deal." },
    { co:"Middle Street Partners", vert:"Multifamily · Southeast", size:"Charleston SC · GA / TN / FL", why:"$69M company recap with Inceptiv (Jan 2025), GP buyout done. Targeting $1B in new GA and TN acquisitions and development.", angle:"Stated plan is T2's exact Southeast footprint (Nashville townhomes, Alpharetta retail). Freed capital means $10-30M acquisition bridges ahead." },
    { co:"Becovic Management", vert:"Value-Add Multifamily", size:"Chicago · family office", why:"Paid $17.4M for a 96-unit Edgewater building (Jan 2025), fourth buy from the CLK portfolio. Two buildings still to absorb.", angle:"Sequential $5-25M Chicago buys, shopping bank debt above 6%. T2's no-committee speed and sub-$30M comfort fit the visible pipeline." },
    { co:"Patterson Real Estate Advisory", vert:"Debt Intermediary", size:"Atlanta · $11.6B+ placed", why:"Active Southeast bridge-placement boutique. Spring 2025 multifamily and student-housing bridge deals across Atlanta and Charleston.", angle:"The compounding lever. On Patterson's approved-lender short list, T2 gets pre-vetted Southeast deal intros, not cold outreach. 4-10 a year per relationship." },
    { co:"CLK Properties", vert:"Special Situations", size:"Chicago · deconversions", why:"Closed a $115M Freddie refi retiring its acquisition bridge (Feb 2026). Largest condo deconversion in IL history, actively recycling capital.", angle:"Proven bridge user on complex deals. T2's stated comfort with recap and partnership restructuring fits CLK's next deconversion that agencies won't touch pre-stabilization." },
  ];
  return (
    <section className="section section-soft" id="targets">
      <div className="wrap">
        <div className="section-head">
          <span className="eyebrow">04 / A-tier targets · why now</span>
          <h2>Not a category. A list. Here&rsquo;s who we&rsquo;d open with.</h2>
          <p>A few examples, not the full list. Each carries a real, dated public signal flagging a financing need T2&rsquo;s $3-30M box can serve right now. The complete 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.55,margin:0}}>{t.why}</p>
              </div>
              <div style={{marginTop:"auto"}}>
                <div style={{fontFamily:"'JetBrains Mono',monospace",fontSize:9,letterSpacing:"0.1em",color:"var(--slate-400)",textTransform:"uppercase",fontWeight:700,marginBottom:5}}>The angle</div>
                <p style={{fontSize:12.5,color:"var(--slate-500)",lineHeight:1.55,margin:0,fontStyle:"italic"}}>{t.angle}</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}}>
          Every signal above is public and dated within the last 16 months, pulled before you signed anything. Competing lenders and debt funds are excluded, these are deal sources, not rivals. In week one we turn this into a scored, deduped A-list across all five segments, refreshed as new maturities, permits, and servicing transfers fire.
        </div>
      </div>
    </section>
  );
}

// ─── App ─────────────────────────────────────
function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  return (
    <Fragment>
      <Nav/>
      <Hero dark={t.darkHero}/>
      <TrustStrip/>
      <MarketThesis/>
      <Orchestration/>
      <ProspectUniverse/>
      <ATierTargets/>
      <Matrix/>
      <SignalToScale/>
      <ClientPortalSection/>
      <ClientPortalScreenshots/>
      <CROStack/>
      <CostCompare/>
      <CaseStudies/>
      <NinetyDay/>
      <CTA/>
      <Footer/>
      <TweaksPanel>
        <TweakSection label="Surface"/>
        <TweakRadio
          label="Hero treatment"
          value={t.darkHero ? "dark" : "light"}
          options={["dark", "light"]}
          onChange={(v) => setTweak('darkHero', v === "dark")}
        />
      </TweaksPanel>
    </Fragment>
  );
}

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