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

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "icp": "cre_debt",
  "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">CRED iQ Proposal</span>
          </a>
          <div className="nav-links" style={{display:'flex'}}>
            <a href="#thesis">Why now</a>
            <a href="#system">Orchestration</a>
            <a href="#portal">Portal</a>
            <a href="#cases">Proof</a>
            <a href="#economics">Economics</a>
            <a href="#timeline">90 days</a>
          </div>
        </div>
        <div className="nav-cta">
          <a href="#cta" className="btn btn-ghost btn-sm">15-min walkthrough</a>
          <a href="#cta" className="btn btn-primary btn-sm">Sign and start</a>
        </div>
      </div>
    </nav>
  );
}

function Hero({ dark }) {
  return (
    <section className={`hero ${dark ? "" : "light"}`}>
      <div className="hero-grid-bg"></div>
      <div className="wrap hero-content">
        <div className="hero-pill">
          <span className="dot"></span>
          <span>Prepared for Mike Haas · CRED iQ · April 29, 2026</span>
        </div>
        <h1 style={{maxWidth:1100, textWrap:"balance"}}>
          Mike, we&rsquo;ve operated your buyer.<br/>
          CREXi, Capitalize, Gumption, Johnson Capital, Worth Clark.<br/>
          <span style={{color:"#21A8F2"}}>The CRE debt window is open. We&rsquo;ll move first.</span>
        </h1>
        <p className="lead" style={{marginTop:24,maxWidth:920}}>
          Trepp and CoStar pricing complaints have hit a cycle high. CMBS delinquency is at decade peaks. The 2026 office maturity wall lands inside your sales window. Mid-market lenders, special servicers, and brokerages are reviewing every line item on a $40K+ data subscription right now. AICRO runs the orchestration layer that gets your platform in front of them while the window is open.
        </p>
        <div className="hero-cta-row">
          <a href="#thesis" className="btn btn-primary btn-lg">See the thesis →</a>
          <a href="#system" className={dark ? "btn btn-outline-light btn-lg" : "btn btn-ghost btn-lg"}>How we operate</a>
        </div>
        <div style={{marginTop:36,paddingTop:24,borderTop:"1px solid rgba(255,255,255,0.10)",display:"grid",gridTemplateColumns:"repeat(4,1fr)",gap:24,maxWidth:920}}>
          {[
            {v:"15+ yrs", l:"PropTech operator at CRO level"},
            {v:"6 CRE-adjacent", l:"clients in current book"},
            {v:"$75M+", l:"qualified pipeline · Gumption"},
            {v:"+187%", l:"pipeline lift · Capitalize · 90 days"},
          ].map((s,i) => (
            <div key={i}>
              <div style={{fontSize:22,fontWeight:600,letterSpacing:"-0.01em",color:dark ? "#fff" : "var(--shark)"}}>{s.v}</div>
              <div style={{fontSize:11,color:dark ? "rgba(255,255,255,0.55)" : "var(--slate-500)",fontFamily:"'JetBrains Mono',monospace",letterSpacing:"0.06em",textTransform:"uppercase",marginTop:4,lineHeight:1.4}}>{s.l}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

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

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

// ─── Section 1: Market Thesis · Why CRED iQ, Why Now ────────────────────────
function MarketThesis() {
  const drivers = [
    {
      tag: "01 · MATURITY WALL",
      stat: "$1.5T",
      statLbl: "CRE debt maturing 2026–2028",
      title: "The refinance crunch is here.",
      body: "Trepp's own data: $1.5T in CRE loans mature through 2028. Office and retail are leading delinquency. Every special servicer, bridge lender, and distressed debt fund is staffing up workout teams right now and reviewing every line item on their data stack while they do it.",
      source: "Source: Trepp CMBS Surveillance · MBA CREF Q1 2026",
    },
    {
      tag: "02 · PRICING FATIGUE",
      stat: "$40–80K",
      statLbl: "average annual Trepp + CoStar spend",
      title: "Mid-market is openly shopping.",
      body: "G2 review velocity for 'Trepp alternative' searches is up 3.4× year-over-year. Reddit r/CommercialRealEstate threads on data-platform pricing have crossed 800 comments in 90 days. CFOs at $5M–$500M lenders are asking finance teams to renegotiate or replace before Q3 renewals.",
      source: "Source: G2 search trends · Reddit signal scrape · CRE Daily commentary",
    },
    {
      tag: "03 · DELINQUENCY SPIKE",
      stat: "10.4%",
      statLbl: "CMBS office delinquency · March 2026",
      title: "Workout teams need loan-level data fast.",
      body: "CMBS office delinquency hit 10.4% in March, the highest reading since 2013. Special servicers, distressed funds, and note buyers need delinquency monitoring, borrower contact intel, and CMBS loan-level data inside one platform — not three logins.",
      source: "Source: Trepp CMBS Delinquency Report · March 2026",
    },
    {
      tag: "04 · BUYER ACCESSIBILITY",
      stat: "11–75",
      statLbl: "ICP firm headcount · easier to reach",
      title: "Mid-market firms answer LinkedIn.",
      body: "Bridge lenders, private debt funds, and brokerage capital markets teams sit at 11–75 employees. VP-level decision-makers are reachable on LinkedIn and email — they don't have gatekeeping infrastructure. We've operated this exact firmographic at Capitalize, Gumption, and Johnson Capital. The audience opens the door.",
      source: "Source: AICRO operator pattern · 6 active CRE engagements",
    },
  ];
  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 CRED iQ&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 CRED iQ 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 debt segments. One operator-built ICP map.",
      body: "Bridge / private debt lenders. Special servicing & distressed. Brokerages with debt component. Real estate PE. 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: [
        "Lender pool — bridge, CMBS, agency, private debt originators",
        "Special servicer & distressed debt — workout, note buyers, special servicers",
        "Brokerage with debt component — Walker & Dunlop, Berkadia, NorthMarq tier",
        "Real Estate PE — REDS, REPE allocators, $1B+ enterprise tier",
      ],
    },
    {
      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: [
        "LinkedIn employee skill scrape — Trepp / CoStar / Argus on profiles",
        "G2 + Bombora intent — competitor product page surge",
        "SEC 10-K / 10-Q vendor disclosures — public lender filings",
        "CMBS issuance + servicer reports — Trepp dependency proxy",
        "Job postings — required-tools mention in JD",
        "Conference and podcast attendance — Trepp Talk, MBA CREF, ICSC",
      ],
    },
    {
      tag: "PERSONALIZATION + SEND",
      title: "Every message grounded in the signal that triggered it.",
      body: "Each contact gets a hook from the actual signal — a 10-K vendor disclosure, a G2 intent surge, a job posting. 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 + AE 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 AE. AICRO Rounds runs every weekday against your HubSpot — surfacing demos that need a follow-up, trials that didn't activate, and accounts that went silent. Doug walks the room weekly.",
      bullets: [
        "Reply Agent — positive / neutral / not-interested classification + draft",
        "AICRO Rounds — daily mid-funnel grading against your CRM",
        "Slack-first surfacing of every action — no dashboard hunting",
        "Weekly operator review with Doug — pipeline math, comp, board prep",
      ],
    },
  ];
  return (
    <section className="section section-soft" id="orchestration">
      <div className="wrap">
        <div className="section-head">
          <span className="eyebrow">02 / The AICRO orchestration layer</span>
          <h2>One system. Four layers. Built for 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 booked demos and trial activations — operated by people who have sold this exact buyer before.</p>
        </div>
        <div style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:18}}>
          {layers.map((l,i) => (
            <div key={i} className="card" style={{padding:26,display:"flex",flexDirection:"column",gap:14,position:"relative"}}>
              <div style={{position:"absolute",top:-10,left:24,padding:"4px 10px",background:"#21A8F2",color:"#fff",borderRadius:99,fontSize:9.5,fontWeight:700,fontFamily:"'JetBrains Mono',monospace",letterSpacing:"0.10em"}}>LAYER {String(i+1).padStart(2,"0")}</div>
              <div style={{fontFamily:"'JetBrains Mono',monospace",fontSize:10,letterSpacing:"0.10em",color:"var(--slate-500)",textTransform:"uppercase",fontWeight:600,marginTop:8}}>{l.tag}</div>
              <h3 style={{fontSize:19,lineHeight:1.3,color:"var(--shark)",margin:0}}>{l.title}</h3>
              <p style={{fontSize:13.5,color:"var(--slate-500)",lineHeight:1.65,margin:0}}>{l.body}</p>
              <ul style={{listStyle:"none",padding:0,margin:0,display:"flex",flexDirection:"column",gap:8}}>
                {l.bullets.map((b,j) => (
                  <li key={j} style={{fontSize:12.5,color:"var(--slate-700)",lineHeight:1.55,paddingLeft:18,position:"relative"}}>
                    <span style={{position:"absolute",left:0,top:7,width:6,height:6,borderRadius:"50%",background:"#21A8F2"}}></span>
                    {b}
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── Matrix ─────────────────────────────────────
function Matrix() {
  const cols = ["Generic agency", "In-house build", "DIY tool stack", "AICRO"];
  const rows = [
    { row: "Time to first demo", vals: [2, 1, 2, 4], aicro: "Day 30 to 45" },
    { row: "Signal-grounded outreach", vals: [1, 2, 2, 4], aicro: "6-source signal layer" },
    { row: "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 buyer 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">03 / 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:"10-K · TREPP DISCLOSURE",     co:"Walker & Dunlop · public filing" },
    { x:"22%", y:"36%", cls:"hot",   tag:"LI SKILL · TREPP × 7",        co:"Rialto Capital · employee scrape" },
    { x:"78%", y:"36%", cls:"warm",  tag:"BOMBORA SURGE · COSTAR",      co:"Berkadia · 30d intent surge" },
    { x:"22%", y:"66%", cls:"warm",  tag:"ARGUS · JOB POSTING",         co:"Atlas Commercial · Asset Mgmt" },
    { x:"78%", y:"66%", cls:"match", tag:"CMBS SERVICER REPORT",        co:"LNR Partners · loan-level proxy" },
    { x:"50%", y:"86%", cls:"hot",   tag:"TREPP TALK GUEST · 2026",     co:"KSL Capital Partners" },
  ];
  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 displacement 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:"LinkedIn employee skill scrape",  val:"'Trepp' / 'CoStar' / 'Argus' on profiles" },
    { lbl:"G2 + Bombora intent surge",       val:"30d competitor product page surge" },
    { lbl:"SEC 10-K / 10-Q vendor disclosures", val:"Public REIT and fund filings" },
    { lbl:"CMBS issuance + servicer reports", val:"Trepp dependency proxy" },
    { lbl:"Job postings · Trepp/CoStar/Argus", val:"Required-tools mention in JD" },
    { lbl:"Conference + podcast attendance",  val:"Trepp Talk, MBA CREF, ICSC" },
  ];
  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: Acquisitions VPs and Heads of Credit 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 displacement signal that triggered the touch. Writes the relevance line. CRO-approved before send.",
      feats:["Signal-grounded copy", "Per-firm displacement hook", "Human-in-the-loop QA"],
      stats:[ {v:"+37%", l:"acceptance"}, {v:"Live", l:"hot-reply triage"} ],
    },
  ];
  const markIcon = {
    send: (
      <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
        <rect x="3" y="5" width="18" height="14" rx="2"/>
        <path d="M3 7l9 6 9-6"/>
      </svg>
    ),
    connect: (
      <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
        <rect x="3" y="3" width="18" height="18" rx="2"/>
        <line x1="8" y1="11" x2="8" y2="17"/>
        <circle cx="8" cy="7.5" r="1.2" fill="#fff" stroke="none"/>
        <path d="M12 17v-4a3 3 0 0 1 6 0v4"/>
      </svg>
    ),
    agent: (
      <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
        <path d="M12 3v3M12 18v3M3 12h3M18 12h3M5.6 5.6l2.1 2.1M16.3 16.3l2.1 2.1M5.6 18.4l2.1-2.1M16.3 7.7l2.1-2.1"/>
        <circle cx="12" cy="12" r="3.2" fill="#fff" stroke="none"/>
      </svg>
    ),
  };
  return (
    <div className="outreach-stack">
      {products.map((p,i) => (
        <div key={i} className="outreach-card">
          <div className="ohead">
            <div className="ologo">
              <div className={"omark " + p.mark}>
                {markIcon[p.mark]}
              </div>
              <div>
                <div className="oname">{p.name}</div>
                <div className="otag">{p.tag}</div>
              </div>
            </div>
          </div>
          <div className="odesc">{p.desc}</div>
          <div className="ofeats">
            {p.feats.map((f,j) => <div key={j} className="ofeat">{f}</div>)}
          </div>
          <div className="ostats">
            {p.stats.map((s,j) => (
              <div key={j} className="ostat">
                <span className="v">{s.v}</span>
                <span className="l">{s.l}</span>
              </div>
            ))}
          </div>
        </div>
      ))}
    </div>
  );
}

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

function ReplyAgentCard() {
  return (
    <SlackCard time="1:15 PM" subtitle="POSITIVE (Interested)" subtitleDot="#3DDC97" showApprove>
      <div className="slack-status-bar">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><path d="M5 13l4 4L19 7"/></svg>
        Approved successful
      </div>
      <div className="slack-source-line"><strong>Source:</strong> 🔗 LinkedIn  |  <strong>Sent by:</strong> CRED iQ AE 1</div>
      <div className="slack-row-a">
        <div className="slack-field">
          <span className="k">Name:</span>
          <span className="v">Daniel Reichberg, MBA</span>
          <span className="k" style={{marginTop:6}}>Job Title:</span>
          <span className="v">VP Underwriting</span>
          <span className="k" style={{marginTop:6}}>Company:</span>
          <span className="v">LoanCore Capital · Trepp/CoStar STRONG</span>
        </div>
        <div className="slack-field">
          <span className="k">Email:</span>
          <span className="v link">d.reichberg@loancore.com</span>
          <span className="k" style={{marginTop:6}}>Campaign:</span>
          <span className="v">EM | Trepp displacement | Bridge Lenders</span>
        </div>
      </div>
      <div className="slack-pill"><span className="pdot"></span>Trepp listed in JD · Structured Finance Associate</div>
      <div className="slack-block">
        <span className="lbl">Last Reply:</span>
        <span className="val">We&rsquo;re paying ~$60K/yr for Trepp + a separate CoStar seat. Always wanted borrower contact data without LLC drilling. What does pricing look like for a 12-seat team?</span>
      </div>
      <div className="slack-block">
        <span className="lbl">Generated Response:</span>
        <span className="val">Daniel — for 12 seats with 90%+ borrower contact coverage and built-in MyQ valuation, you'd land at roughly half what you're paying Trepp + CoStar combined. Want to walk through your last 5 transitional loans on the platform tomorrow?</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>Acore Capital | Sarah Klein</strong> · <span style={{color:"#A8AFC0"}}>$72,000 ARR · Stage: Demo Held</span>
      </div>
      <div style={{fontSize:12,color:"#A8AFC0",marginBottom:10}}>Recommended for: CRED iQ AE 2</div>
      <div className="slack-source-line">
        <strong>Source:</strong> HubSpot · <strong>Run:</strong> AICRO Rounds · Sat April 25 · <strong>Close date:</strong> 2026-06-30
      </div>
      <div className="slack-row-a">
        <div className="slack-field">
          <span className="k">Contact:</span>
          <span className="v">Sarah Klein</span>
          <span className="k" style={{marginTop:6}}>Title:</span>
          <span className="v">Head of Credit · Bridge Lending</span>
        </div>
        <div className="slack-field">
          <span className="k">Email:</span>
          <span className="v link">sklein@acorecapital.com</span>
          <span className="k" style={{marginTop:6}}>Company:</span>
          <span className="v">Acore Capital · 138 employees</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>MyQ demo, no follow-up trial activation</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 account. You sat through the MyQ valuation demo on April 7 and haven&rsquo;t activated the 48-hour trial. I want 15 minutes this week to walk you through the borrower-contact lookup specifically against three of your active bridge deals. Tuesday or Wednesday?
      </div>
      <div className="slack-callout">📞 If voicemail: Sarah, following up on the April 7 MyQ demo. Texting you a quick note with three borrower-contact lookups against your live pipeline.</div>
      <div className="slack-callout" style={{color:"#A8AFC0",marginTop:8}}>
        <strong style={{color:"#fff"}}>Why now:</strong> Demo held 22 days ago; no trial activation, no follow-up call logged. Acore is a Grade A account with 138 underwriters — pricing impact at scale.
      </div>
      <div className="slack-signals">
        <span className="sl">Signals observed:</span>
        <ul>
          <li>MyQ valuation demo April 7, 2026, 22 days ago, no trial activation in HubSpot</li>
          <li>Acore is bridge + first-mortgage origination lender — borrower contact + maturity pipeline lookup is direct ICP fit</li>
          <li>Acore is a 10-K filer, currently uses Argus per industry filings — Trepp displacement angle live</li>
        </ul>
      </div>
      <div className="slack-actions">
        <span className="slack-action">View Deal</span>
        <span className="slack-action success">✓ Handled</span>
        <span className="slack-action">📊 Show 3 similar wins</span>
        <span className="slack-action">↻ Try another angle</span>
        <span className="slack-action">💡 Why this priority?</span>
        <span className="slack-action danger">Not relevant</span>
      </div>
    </SlackCard>
  );
}

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

// ─── Phase 4 — Compound ─────────────────
function PhaseCompound() {
  const cards = [
    { l:"CAC", v:"−54%", d:"vs in-house SDR + manager" },
    { l:"Demo → trial activation", v:"+118%", d:"AICRO Rounds + Reply Agent" },
    { l:"Trepp/CoStar displacement deals", 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 Mike.<br/>Friday: pipeline MBR.<br/>Quarterly: board math you can defend.</h3>
          <p style={{fontSize:13,color:"var(--slate-500)"}}>Doug walks the room weekly. Every reply, every meeting, every renewal-replaced 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 Trepp/CoStar customer who switches<br/>makes the next signal sharper.</h3>
          <p style={{fontSize:13,color:"var(--slate-500)"}}>Closed-won lookalikes feed back into the seed list. Quarterly refresh tunes the signal pack against actual won-firm patterns.</p>
        </div>
      </div>
    </div>
  );
}

// ─── System tabs ─────────────────────────────────────
function SignalToScale() {
  const phases = [
    {
      num:"PHASE 01", title:"Detect", head:"Detect the signal — across six surfaces.",
      body:"LinkedIn skills, Bombora intent, SEC filings, CMBS servicer reports, job postings, and conference attendance. The signal map is built for CRED iQ's actual buying-trigger thesis: firms paying for Trepp or CoStar and feeling the cost.",
      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 displacement signal that triggered it.",
      Render: PhaseOutreach,
    },
    {
      num:"PHASE 03", title:"Convert", head:"Accelerate conversion.",
      body:"The Reply Agent triages and drafts within minutes. The Inbound Sales Agent grades opportunities against your live HubSpot, recommends the next action, and routes it to the right AE — in Slack, in HubSpot. Demo-held-no-trial is a daily Rounds query.",
      Render: PhaseConvert,
    },
    {
      num:"PHASE 04", title:"Compound", head:"Compound performance.",
      body:"Every win sharpens the seed list. Every Trepp/CoStar customer switched makes the displacement signal more accurate. Monday's signal review turns into the QBR your board sees.",
      Render: PhaseCompound,
    },
  ];
  const [active, setActive] = useState(0);
  const p = phases[active];
  const Body = p.Render;
  return (
    <section className="section section-soft" id="system">
      <div className="wrap">
        <div className="section-head">
          <span className="eyebrow">04 / The system in motion</span>
          <h2>Signal to scale, in four phases.</h2>
          <p>Detect, reach, convert, compound. Click any phase to see it operating.</p>
        </div>
        <div className="s2s">
          <div className="s2s-head">
            {phases.map((ph, i) => (
              <div key={i} className={"s2s-tab " + (i === active ? "active" : "")} onClick={() => setActive(i)}>
                <span className="num">{ph.num}</span>
                <span className="title">{ph.title}</span>
              </div>
            ))}
          </div>
          <div style={{padding:32}}>
            <div style={{display:"grid",gridTemplateColumns:"1fr",gap:14,marginBottom:24,maxWidth:780}}>
              <h3 style={{fontSize:24}}>{p.head}</h3>
              <p style={{color:"var(--slate-500)",fontSize:15}}>{p.body}</p>
            </div>
            <Body/>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── ICP DATA — segment switcher ─────────────
const ICP_DATA = {
  cre_debt: {
    label: "Bridge & Private Debt",
    sub: "Lender pool · seed segment",
    summary: "Grade-A bridge and private-debt lenders booking demos within the week.",
    summaryBody: "Madison Realty, Acore, LoanCore, and Marathon all have at least one VP-level positive reply this month. The Trepp/CoStar displacement angle is the highest-converting opener — VP Underwriting at LoanCore replied within 4 hours of a signal-triggered LinkedIn DM. Pipeline is compounding week-over-week.",
    kpis: { sent:"18,420", positives:"94", meetings:"22", pipeline:"$540K ARR potential", revenue:"3 trials" },
    deltas: { sent:"+24% last 30d", positives:"+62% last 30d", meetings:"+57% last 30d", pipeline:"+148% last 30d", revenue:"+2 last 30d" },
    ratio: "196:1",
    campaigns: [
      { type:"em", name:"EM | Trepp displacement | Bridge Lenders", sent:"4,820", contacted:"3,140", connReq:"-", connAcc:"-", positives:"38", posRate:"28.4%", accept:"-" },
      { type:"li", name:"LI | Heads of Credit | Grade A Lenders", sent:"312", contacted:"264", connReq:"264", connAcc:"122", positives:"24", posRate:"61.1%", accept:"46.2%", active:true },
      { type:"em", name:"EM | MyQ valuation | Underwriting VPs", sent:"3,240", contacted:"2,118", connReq:"-", connAcc:"-", positives:"18", posRate:"24.4%", accept:"-" },
      { type:"li", name:"LI | Acquisitions Directors | National", sent:"148", contacted:"122", connReq:"122", connAcc:"58", positives:"10", posRate:"52.6%", accept:"47.5%" },
      { type:"em", name:"EM | Borrower contact lookup | Bridge", sent:"1,820", contacted:"1,212", connReq:"-", connAcc:"-", positives:"4", posRate:"19.2%", accept:"-" },
    ],
    drawer: {
      name: "LI | Heads of Credit | Grade A Lenders",
      replies: 39, posPct: 61.5, neuPct: 38.5,
      funnel: [
        { stage:"Connection Requests", val:312, w:100, color:"linear-gradient(90deg,#21A8F2,#5AC0FF)" },
        { stage:"Contacted", val:264, w:84, color:"linear-gradient(90deg,#5A8BEE,#7E73E8)", pct:"84.6%" },
        { stage:"Accepted", val:122, w:39, color:"linear-gradient(90deg,#7E73E8,#9D4EDD)", pct:"46.2%" },
        { stage:"Replied", val:39, w:14, color:"linear-gradient(90deg,#9D4EDD,#C04AC9)", pct:"32.0%" },
        { stage:"Positive", val:24, w:9, color:"linear-gradient(90deg,#C04AC9,#D946B0)", pct:"61.5%" },
        { stage:"Meetings", val:11, w:5, color:"#0E9F66", pct:"45.8%" },
        { stage:"Trials", val:3, w:3, color:"#0E9F66", pct:"3 active" },
        { stage:"Closed Won", val:1, w:2, color:"#0E9F66", pct:"1 paid" },
      ],
      recent: [
        { name:"Daniel Reichberg · LoanCore", date:"Apr 28", tag:"Trial Activated", booked:true },
        { name:"Sarah Klein · Acore Capital", date:"Apr 27", tag:"Demo Booked", booked:true },
        { name:"Marc Stein · Madison Realty", date:"Apr 26", tag:"Interested" },
        { name:"Jordan Reyes · Marathon Asset", date:"Apr 25", tag:"Demo Booked", booked:true },
        { name:"Alex Chen · Black Bear Capital", date:"Apr 24", tag:"Interested" },
        { name:"Renee Park · HALL Structured", date:"Apr 23", tag:"Interested" },
        { name:"Jay Foster · Maxim Capital", date:"Apr 22", tag:"Interested" },
      ],
    },
  },
  special_servicing: {
    label: "Special Servicing & Distressed",
    sub: "Workout teams · KSL, Rialto, LNR seed",
    summary: "Workout teams responding to delinquency-monitoring angle.",
    summaryBody: "CMBS servicer-report scrape feeds the seed list. KSL, Rialto, LNR, CWCapital, and Trimont all have at least one workout officer who's replied positively this quarter. Different keyword pack, different pain (delinquency tracking + workout pipeline), different proof points (CMBS loan-level data).",
    kpis: { sent:"6,140", positives:"28", meetings:"6", pipeline:"$180K ARR potential", revenue:"1 trial" },
    deltas: { sent:"+18% last 30d", positives:"+44% last 30d", meetings:"+50% last 30d", pipeline:"+87% last 30d", revenue:"+1 last 30d" },
    ratio: "219:1",
    campaigns: [
      { type:"em", name:"EM | Delinquency monitoring | Special Servicers", sent:"2,140", contacted:"1,388", connReq:"-", connAcc:"-", positives:"14", posRate:"24.0%", accept:"-" },
      { type:"li", name:"LI | Workout Officers | National", sent:"148", contacted:"112", connReq:"112", connAcc:"48", positives:"8", posRate:"52.9%", accept:"42.9%", active:true },
      { type:"em", name:"EM | Note buyers | Distressed funds", sent:"1,820", contacted:"1,124", connReq:"-", connAcc:"-", positives:"6", posRate:"19.4%", accept:"-" },
    ],
    drawer: {
      name: "LI | Workout Officers | National",
      replies: 15, posPct: 53.3, neuPct: 46.7,
      funnel: [
        { stage:"Connection Requests", val:148, w:100, color:"linear-gradient(90deg,#21A8F2,#5AC0FF)" },
        { stage:"Contacted", val:112, w:76, color:"linear-gradient(90deg,#5A8BEE,#7E73E8)", pct:"75.7%" },
        { stage:"Accepted", val:48, w:32, color:"linear-gradient(90deg,#7E73E8,#9D4EDD)", pct:"42.9%" },
        { stage:"Replied", val:15, w:10, color:"linear-gradient(90deg,#9D4EDD,#C04AC9)", pct:"31.3%" },
        { stage:"Positive", val:8, w:5, color:"linear-gradient(90deg,#C04AC9,#D946B0)", pct:"53.3%" },
        { stage:"Meetings", val:3, w:2, color:"#0E9F66", pct:"37.5%" },
        { stage:"Trials", val:1, w:2, color:"#0E9F66", pct:"1 active" },
        { stage:"Closed Won", val:0, w:1, color:"#CBD5E1", pct:"-" },
      ],
      recent: [
        { name:"Eric Torres · LNR Partners", date:"Apr 28", tag:"Demo Booked", booked:true },
        { name:"Jen Walsh · CWCapital", date:"Apr 26", tag:"Interested" },
        { name:"Marc Hill · Trimont", date:"Apr 24", tag:"Interested" },
        { name:"Lisa Park · KSL Capital", date:"Apr 23", tag:"Demo Booked", booked:true },
      ],
    },
  },
  brokerage_debt: {
    label: "Brokerage with Debt",
    sub: "W&D, Berkadia, NorthMarq seed",
    summary: "Capital markets brokers responding to borrower contact wedge.",
    summaryBody: "Walker & Dunlop, Berkadia, NorthMarq, JLL Capital Markets, Marcus & Millichap Capital. Pain is borrower contact intelligence + market authority for pursuit positioning. Proof anchor: 90%+ borrower contact coverage as a CRED iQ wedge over CoStar Power Broker.",
    kpis: { sent:"8,820", positives:"42", meetings:"9", pipeline:"$310K ARR potential", revenue:"2 trials" },
    deltas: { sent:"+22% last 30d", positives:"+58% last 30d", meetings:"+80% last 30d", pipeline:"+124% last 30d", revenue:"+2 last 30d" },
    ratio: "210:1",
    campaigns: [
      { type:"em", name:"EM | Borrower lookup vs CoStar | Capital Markets", sent:"3,140", contacted:"2,018", connReq:"-", connAcc:"-", positives:"22", posRate:"26.4%", accept:"-" },
      { type:"li", name:"LI | Heads of Originations | Brokerages", sent:"212", contacted:"180", connReq:"180", connAcc:"82", positives:"14", posRate:"56.0%", accept:"45.6%", active:true },
      { type:"em", name:"EM | Pursuit positioning | Brokers", sent:"2,420", contacted:"1,612", connReq:"-", connAcc:"-", positives:"6", posRate:"22.2%", accept:"-" },
    ],
    drawer: {
      name: "LI | Heads of Originations | Brokerages",
      replies: 25, posPct: 56.0, neuPct: 44.0,
      funnel: [
        { stage:"Connection Requests", val:212, w:100, color:"linear-gradient(90deg,#21A8F2,#5AC0FF)" },
        { stage:"Contacted", val:180, w:85, color:"linear-gradient(90deg,#5A8BEE,#7E73E8)", pct:"84.9%" },
        { stage:"Accepted", val:82, w:39, color:"linear-gradient(90deg,#7E73E8,#9D4EDD)", pct:"45.6%" },
        { stage:"Replied", val:25, w:12, color:"linear-gradient(90deg,#9D4EDD,#C04AC9)", pct:"30.5%" },
        { stage:"Positive", val:14, w:7, color:"linear-gradient(90deg,#C04AC9,#D946B0)", pct:"56.0%" },
        { stage:"Meetings", val:5, w:3, color:"#0E9F66", pct:"35.7%" },
        { stage:"Trials", val:2, w:2, color:"#0E9F66", pct:"2 active" },
        { stage:"Closed Won", val:0, w:1, color:"#CBD5E1", pct:"-" },
      ],
      recent: [
        { name:"Mark Allen · Walker & Dunlop", date:"Apr 28", tag:"Trial Activated", booked:true },
        { name:"Sara Lim · Berkadia", date:"Apr 27", tag:"Demo Booked", booked:true },
        { name:"David Cho · NorthMarq", date:"Apr 25", tag:"Interested" },
        { name:"Janelle Owen · JLL Cap Mkts", date:"Apr 24", tag:"Interested" },
      ],
    },
  },
  re_pe: {
    label: "Real Estate PE",
    sub: "Allocation teams · enterprise tier",
    summary: "RE PE allocation teams asking enterprise-pricing questions.",
    summaryBody: "Blackstone REDS, KKR REPE, Brookfield, Starwood Property Trust, plus 30+ mid-market peers. Pain is the same Trepp + Argus stack pricing problem at $1B+ AUM. Enterprise-tier pricing applies. Two MD-level positives this month, one with a stated Q3 renewal review window.",
    kpis: { sent:"5,420", positives:"22", meetings:"5", pipeline:"$420K ARR potential", revenue:"1 trial" },
    deltas: { sent:"+16% last 30d", positives:"+36% last 30d", meetings:"+25% last 30d", pipeline:"+92% last 30d", revenue:"+1 last 30d" },
    ratio: "246:1",
    campaigns: [
      { type:"em", name:"EM | RE PE underwriting | Enterprise tier", sent:"1,820", contacted:"1,212", connReq:"-", connAcc:"-", positives:"10", posRate:"24.4%", accept:"-" },
      { type:"li", name:"LI | Managing Directors | CRE Allocation", sent:"148", contacted:"122", connReq:"122", connAcc:"54", positives:"8", posRate:"58.3%", accept:"44.3%", active:true },
      { type:"em", name:"EM | Enterprise pricing | $1B+ AUM", sent:"1,420", contacted:"918", connReq:"-", connAcc:"-", positives:"4", posRate:"21.1%", accept:"-" },
    ],
    drawer: {
      name: "LI | Managing Directors | CRE Allocation",
      replies: 14, posPct: 57.1, neuPct: 42.9,
      funnel: [
        { stage:"Connection Requests", val:148, w:100, color:"linear-gradient(90deg,#21A8F2,#5AC0FF)" },
        { stage:"Contacted", val:122, w:82, color:"linear-gradient(90deg,#5A8BEE,#7E73E8)", pct:"82.4%" },
        { stage:"Accepted", val:54, w:36, color:"linear-gradient(90deg,#7E73E8,#9D4EDD)", pct:"44.3%" },
        { stage:"Replied", val:14, w:9, color:"linear-gradient(90deg,#9D4EDD,#C04AC9)", pct:"25.9%" },
        { stage:"Positive", val:8, w:5, color:"linear-gradient(90deg,#C04AC9,#D946B0)", pct:"57.1%" },
        { stage:"Meetings", val:3, w:2, color:"#0E9F66", pct:"37.5%" },
        { stage:"Trials", val:1, w:1, color:"#0E9F66", pct:"1 active" },
        { stage:"Closed Won", val:0, w:1, color:"#CBD5E1", pct:"-" },
      ],
      recent: [
        { name:"Adam Stern · Blackstone REDS", date:"Apr 28", tag:"Demo Booked", booked:true },
        { name:"Priya Malhotra · KKR REPE", date:"Apr 26", tag:"Interested" },
        { name:"Tom Reid · Brookfield", date:"Apr 25", tag:"Interested" },
        { name:"Carol Yang · Starwood Property", date:"Apr 23", tag:"Trial Activated", booked:true },
      ],
    },
  },
};

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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 Mike 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, demo, trial activated. 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. CRED iQ AE approves before send.",
    },
    {
      src: "uploads/pasted-1777222220819-0.png",
      label: "Sales Action · AICRO Rounds",
      caption: "$72K ARR opportunity, 22 days since last touch, no trial activation. AICRO Rounds grades it Grade A, recommends the AE, and writes the script.",
    },
  ];
  return (
    <section className="section section-soft" id="portal-screenshots">
      <div className="wrap">
        <div className="section-head">
          <span className="eyebrow">06 / The four screens</span>
          <h2>The four screens you live in.</h2>
          <p>Monday summary, campaign drill-in, Slack reply agent, sales action card. 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({ icp, setIcp }) {
  return (
    <section className="section section-dark" id="portal">
      <div className="wrap">
        <div className="section-head">
          <span className="eyebrow" style={{color:"rgba(255,255,255,.5)"}}>05 / Flagship</span>
          <h2>The Client Portal you operate from.</h2>
          <p style={{color:"rgba(255,255,255,.6)"}}>
            One pane of glass, every Monday. Switch between segments to see how each lookalike pool runs.
          </p>
          <div style={{marginTop:24,display:"flex",gap:8,flexWrap:"wrap",alignItems:"center"}}>
            <span style={{fontFamily:"'JetBrains Mono',monospace",fontSize:11,color:"rgba(255,255,255,.5)",letterSpacing:"0.12em",textTransform:"uppercase",marginRight:8}}>Render for segment →</span>
            {Object.entries(ICP_DATA).map(([key, d]) => (
              <button
                key={key}
                onClick={() => setIcp(key)}
                style={{
                  padding:"7px 14px",borderRadius:99,
                  background: icp === key ? "#fff" : "transparent",
                  color: icp === key ? "var(--shark)" : "rgba(255,255,255,.7)",
                  border:"1px solid " + (icp === key ? "#fff" : "rgba(255,255,255,.18)"),
                  fontSize:12,fontWeight:500,cursor:"pointer",
                  fontFamily:"inherit",letterSpacing:"-0.005em",
                  transition:"all .15s",
                }}>
                {d.label}
              </button>
            ))}
          </div>
        </div>
        <ClientPortalV2 icp={icp}/>
      </div>
    </section>
  );
}

// ─── CRO Stack ─────────────────
function CROStack() {
  const modules = [
    { l:"Strategy", t:"ICP & Signal Map", d:"4-segment ICP map. 6 displacement signal layers. Quarterly refresh tuned against won-firm patterns.", delivs:["4-segment ICP card","6-source signal architecture","Pipeline-concentration scorecard","Quarterly recalibration"] },
    { l:"Playbooks", t:"Productized SOPs", d:"Discovery scripts and demo flows for CRE debt buyers. Trepp/CoStar displacement battlecards. MyQ valuation use-case framing.", delivs:["Discovery script · CRE debt","Demo flow + MyQ walkthrough","Trepp/CoStar battlecards","Onboarding checklist"] },
    { l:"Comp", t:"AE Comp Structure", d:"New-logo accelerators tuned to CRED iQ's $1,200/mo floor + enterprise tier. Trial → paid conversion SPIFF. Override design for AE managers.", delivs:["Ramp plan · 90/180/365","Trial activation SPIFF","Enterprise tier override","Board-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">07 / The CRO Stack</span>
          <h2>One operator-built system. Run by people who&rsquo;ve sold this buyer.</h2>
          <p>You&rsquo;ve built the platform. What you need next is a proven motion against Trepp and CoStar incumbency. 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">08 / Economics</span>
          <h2>$10,000 / month. Three months. Demos in 30 to 45 days.</h2>
          <p>One number. One commitment window. Same outcome target as 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 AEs + 1 SDR + 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 AEs + 1 SDR (loaded)</span><span className="val">$310 to $390K</span></div>
              <div className="cost-list-row"><span className="label">Manager oversight (Mike)</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 pipeline</span><span className="val">9 to 12 months</span></div>
              <div className="cost-list-row total"><span className="label">Year 1 commitment</span><span className="val">$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 booked demos</span><span className="val">Day 30 to 45</span></div>
              <div className="cost-list-row"><span className="label">First trial activations</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 ICP universe, a live signal layer, booked demos, and a fully-instrumented funnel. The in-house build delivers a hire who is still ramping.</div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── Case studies — 5 ─────────────────
function CaseStudies() {
  const cases = [
    {
      co: "Capitalize",
      stage: "Seed → Series B",
      sector: "CRE Data & AI",
      quote: "We went through three or four iterations before AICRO. The team engineered a complete GTM system that was instrumental in securing our Series B.",
      attr: "Luke Morris · Co-founder",
      systems: ["Signal-First Outbound", "End-to-End Revenue Engineering", "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: "CREXi",
      stage: "Operator lineage",
      sector: "CRE Marketplace",
      quote: "Doug built the broker-account playbook that scaled CREXi from seed traction to category-defining marketplace.",
      attr: "Operator lineage · pre-AICRO",
      systems: ["Broker GTM Playbook", "Marketplace Liquidity Levers", "Sales Comp Architecture", "Category Positioning"],
      metrics: [
        { v: "PropTech", l: "operator credentials" },
        { v: "Brokers", l: "primary buyer experience" },
        { v: "Marketplace", l: "GTM motion" },
        { v: "Direct", l: "applicability to CRED iQ" },
      ],
    },
  ];
  return (
    <section className="section" id="cases">
      <div className="wrap">
        <div className="section-head">
          <span className="eyebrow">09 / Proof</span>
          <h2>Five CRE-adjacent engagements. Most are still active.</h2>
          <p>Capitalize, Gumption, Johnson Capital, and Worth Clark are all in the AICRO book today. CREXi is the operator lineage that built the broker-side playbook now applied to your motion.</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 + CRED iQ AE profiles (with consent)",
      bars: [
        { left: 0, width: 8, label: "PROFILE SETUP", cls: "amber" },
        { left: 8, width: 92, label: "MULTI-SEAT CONNECT + INMAIL CAMPAIGNS", cls: "sky" },
      ],
      delivs: [
        { left: 6, label: "Day 7 · connected" },
        { left: 22, label: "Day 21 · campaign" },
        { left: 50, label: "Day 60 · 45%+" },
      ],
    },
    {
      name: "CRO + Reply Triage",
      desc: "Operator in the room weekly · Reply Agent triages every reply",
      bars: [
        { left: 0, width: 100, label: "OPERATOR IN THE ROOM · WEEKLY", cls: "shark" },
      ],
      delivs: [
        { left: 12, label: "Day 12 · pipeline" },
        { left: 50, label: "Day 50 · comp" },
        { left: 88, label: "Day 88 · QBR" },
      ],
    },
  ];
  return (
    <section className="section section-soft" id="timeline">
      <div className="wrap">
        <div className="section-head">
          <span className="eyebrow">10 / The 90-day build</span>
          <h2>Day 1 to Day 90, in deliverables you can hold.</h2>
          <p>Email and LinkedIn engines run in parallel under one operator. Every milestone is a shipped artifact, not a status update.</p>
        </div>
        <div className="gantt">
          <div className="gantt-head">
            <div className="col workstream">Workstream</div>
            <div className="col">Day 1<span className="day">Kickoff</span></div>
            <div className="col">Day 30<span className="day">First demos</span></div>
            <div className="col">Day 60<span className="day">Compounding</span></div>
            <div className="col">Day 90<span className="day">QBR</span></div>
          </div>
          {workstreams.map((w, i) => (
            <div className="gantt-row" key={i}>
              <div className="gantt-ws">
                <div className="name">{w.name}</div>
                <div className="desc">{w.desc}</div>
              </div>
              <div className="gantt-track">
                {w.bars.map((b, j) => (
                  <div key={j} className={"gantt-bar " + b.cls} style={{left:b.left+"%", width:b.width+"%"}}>{b.label}</div>
                ))}
                {w.delivs.map((d, j) => (
                  <div key={j} className="gantt-deliv" style={{left:d.left+"%", bottom: j % 2 ? 30 : 8}}>
                    <span className="pin"></span>{d.label}
                  </div>
                ))}
              </div>
            </div>
          ))}
          <div className="gantt-foot">
            <div className="gantt-legend"><span className="sw" style={{background:"linear-gradient(90deg,#21A8F2,#0E7DBC)"}}></span>Live execution</div>
            <div className="gantt-legend"><span className="sw" style={{background:"#1C1C24"}}></span>Continuous CRO ownership</div>
            <div className="gantt-legend"><span className="sw" style={{background:"#D97706"}}></span>Build / deploy</div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── CTA ─────────────
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)"}}>11 / Next step</span>
            <h2 style={{marginTop:18,textWrap:"balance"}}>15 minutes, Mike. Then we move.</h2>
            <p>The CRE debt window is open right now. We'd rather walk you through a live segment in 15 minutes than send another email. Pick a slot. We'll show you the orchestration layer running against the four segments and you decide whether the next 90 days are with us or without us.</p>
            <div style={{marginTop:32,display:"flex",alignItems:"center",gap:18,flexWrap:"wrap"}}>
              <a href="mailto:doug@aicro.co?subject=CRED%20iQ%20%E2%80%93%2015%20minute%20walkthrough"
                 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 15 minutes →
              </a>
              <span style={{fontSize:13,color:"rgba(255,255,255,0.65)",lineHeight:1.5,flex:1,minWidth:280}}>
                Doug walks the segments live. No deck, no slides. The orchestration layer running in your tab. You see what we'd send to Walker & Dunlop, KKR REPE, and LoanCore on day one.
              </span>
            </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">CRED iQ · PROPOSAL · 2026-04-29</span>
      </div>
      <div>doug@aicro.co</div>
      <div className="footer-meta">© 2026 AICRO · Doug Shankman & Josh Kulchin, Co-Founders</div>
    </footer>
  );
}

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

  return (
    <Fragment>
      <Nav/>
      <Hero dark={t.darkHero}/>
      <TrustStrip/>
      <MarketThesis/>
      <Orchestration/>
      <Matrix/>
      <SignalToScale/>
      <ClientPortalSection icp={t.icp} setIcp={setIcp}/>
      <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")}
        />
        <TweakSection label="Client Portal scenario"/>
        <TweakSelect
          label="Segment"
          value={t.icp}
          options={[
            {value:"cre_debt",          label:"Bridge & Private Debt"},
            {value:"special_servicing", label:"Special Servicing & Distressed"},
            {value:"brokerage_debt",    label:"Brokerage with Debt"},
            {value:"re_pe",             label:"Real Estate PE"},
          ]}
          onChange={(v) => setTweak('icp', v)}
        />
        <div style={{fontSize:11,color:"rgba(41,38,27,.55)",lineHeight:1.5,marginTop:6}}>
          The Client Portal re-renders the Executive Summary, KPIs, campaigns table, and drawer for each segment.
        </div>
      </TweaksPanel>
    </Fragment>
  );
}

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